Ignore:
Timestamp:
07/03/12 16:57:07 (13 years ago)
Author:
hendrikvanantwerpen
Message:

Merge and integrate mockups in proper pages.

Location:
Dev/branches/rest-dojo-ui/client/rft/ui
Files:
5 edited

Legend:

Unmodified
Added
Removed

  • Dev/branches/rest-dojo-ui/client/rft/ui/LineWithActionsWidget.js

    r316 r350  
    1 define(['dojo/_base/declare','dojo/_base/lang','dojo/on','dojo/dom','dijit/form/Button',
     1define(['dojo/_base/declare','dojo/_base/lang','dojo/on','dojo/dom', 'dojo/dom-class', 'dijit/form/Button',
    22    'dijit/_WidgetBase','dijit/_TemplatedMixin','dijit/_WidgetsInTemplateMixin',
    3     'dojo/text!./templates/LineWithActionsWidget.html'],
    4     function(declare,lang,on,dom,Button,_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin,templateString){
     3    'dojo/text!./templates/LineWithActionsWidget.html'
     4    ],
     5    function(declare,lang,on,dom,domClass,Button,_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin,templateString){
    56        return declare('rft.ui.LineWithActionsWidget',[_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin],{
    67            templateString: templateString,
    78            baseClass: 'rftLineWithButtons',
    89            title: '',
     10            modifiers: "blue",
    911            userObject: null,
    1012            actions: {},
    … …  
    1618                this.inherited(arguments);
    1719                this._setupActions();
     20                domClass.add(this.domNode, this.modifiers);
    1821                this.refresh();
    1922            },
    2023            _setupActions: function() {
    2124                for (var action in this.actions) {
    22                     new Button({
    23                         label: action,
    24                         //iconClass: 'dijitIconSearch',
    25                         //showLabel: false,
    26                         onClick: lang.hitch(this,function(){
    27                             this.actions[action](this.userObject);
    28                         })
    29                     }).placeAt(this.buttonsNode);
     25                    var properties;
     26                    if (this.actions[action].properties.blockButton == true) {  // BlockButton
     27                        properties = lang.mixin({
     28                            baseClass: 'rftBlockButton',
     29                            modifiers: this.modifiers,
     30                            label: "Default",
     31                            iconClass: 'rftIcon rftIcon'+this.actions[action].properties.icon,
     32                            title: action,
     33                            onClick: lang.hitch(this, this.actions[action].callback)
     34                        }, this.actions[action].properties);
     35                        properties["class"] = properties.modifiers;
     36                        new Button(properties).placeAt(this.buttonsNode);
     37                    } else {    //InlineButton
     38                        properties = lang.mixin({
     39                            baseClass: 'rftInlineButton',
     40                            modifiers: 'black',
     41                            label: "Default",
     42                            showLabel: false,
     43                            iconClass: 'rftIcon rftIcon'+this.actions[action].properties.icon,
     44                            title: action,
     45                            onClick: lang.hitch(this, this.actions[action].callback)
     46                        }, this.actions[action].properties);
     47                        properties["class"] = properties.modifiers;
     48                        new Button(properties).placeAt(this.buttonsNode);
     49                    }
    3050                }
    3151            },
    … …  
    4060                return !preventDefault;
    4161            },
    42             onClick: function(e) {}
     62            onClick: function(e) {},
     63            _setTitleAttr: function(value){
     64                this.title = value;
     65                this.refresh();
     66            }
    4367        });
    4468    });

  • Dev/branches/rest-dojo-ui/client/rft/ui/ObjectBox.js

    r349 r350  
    55    'dijit/_TemplatedMixin',
    66    'dijit/_WidgetsInTemplateMixin',
    7     'rft/ui/LineWithActionsWidgetThijs',
     7    'rft/ui/LineWithActionsWidget',
    88    'dojo/text!./templates/ObjectBox.html',
    9     ], function(declare, lang, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, LineWithActionsWidgetThijs, template){
     9    ], function(declare, lang, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, LineWithActionsWidget, template){
    1010        return declare('rft.ui.ObjectBox', [_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
    1111            baseClass: "rftObjectBox",
    … …  
    2121            },
    2222            postCreate: function() {
    23                 this.line1 = new LineWithActionsWidgetThijs({
     23                this.line1 = new LineWithActionsWidget({
    2424                    title: this.title || "Untitled",
    2525                    modifiers: 'green',
    … …  
    3535                    }
    3636                }).placeAt(this.line1Node);
    37                 this.line2 = new LineWithActionsWidgetThijs({
     37                this.line2 = new LineWithActionsWidget({
    3838                    title: this.subTitle || "",
    3939                    modifiers: 'green',
    … …  
    4141                }).placeAt(this.line1Node);
    4242                var line3Actions = this._createLine3Actions();
    43                 this.line3 = new LineWithActionsWidgetThijs({
     43                this.line3 = new LineWithActionsWidget({
    4444                    title: this.lowerTitle || "",
    4545                    modifiers: 'green',
    … …  
    101101        },
    102102        _editObject: function(customFunction) {
    103                 // TODO: Pass an edit call to the page script, along with reference to the object contained in this ObjectBox
    104                 alert("Default edit code");
    105                 customFunction();
    106             },
    107             _deleteObject: function(customFunction) {
    108                 // TODO: Pass a delete call to the page script, along with reference to the object contained in this ObjectBox
    109                 customFunction();
    110             },
     103            // TODO: Pass an edit call to the page script, along with reference to the object contained in this ObjectBox
     104            alert("Default edit code");
     105            customFunction();
     106        },
     107        _deleteObject: function(customFunction) {
     108            // TODO: Pass a delete call to the page script, along with reference to the object contained in this ObjectBox
     109            customFunction();
     110        },
    111111           
    112112           
    113             _setTitleAttr: function(value) {
    114                 this.title = value;
    115                 if (this.line1 && this.line1.set) {
    116                     this.line1.set('title', this.title);
    117                 }
    118             },
    119             _setSubTitleAttr: function(value) {
    120                 this.subTitle = value;
    121                 if (this.line2 && this.line2.set) {
    122                     this.line2.set('title', this.subTitle);
    123                 }
    124             },
    125             _setLowerTitleAttr: function(value) {
    126                 this.lowerTitle = value;
    127                 if (this.line3 && this.line3.set) {
    128                     this.line3.set('title', this.lowerTitle);
    129                 }
    130             },
    131             _setObjectTypeAttr: function(value) {
    132                 this.objectType = value;
    133                 this.iconNode.className = "rftIcon typeIcon rftIcon"+this.objectType;
    134             },
     113        _setTitleAttr: function(value) {
     114            this.title = value;
     115            if (this.line1 && this.line1.set) {
     116                this.line1.set('title', this.title);
     117            }
     118        },
     119        _setSubTitleAttr: function(value) {
     120            this.subTitle = value;
     121            if (this.line2 && this.line2.set) {
     122                this.line2.set('title', this.subTitle);
     123            }
     124        },
     125        _setLowerTitleAttr: function(value) {
     126            this.lowerTitle = value;
     127            if (this.line3 && this.line3.set) {
     128                this.line3.set('title', this.lowerTitle);
     129            }
     130        },
     131        _setObjectTypeAttr: function(value) {
     132            this.objectType = value;
     133            this.iconNode.className = "rftIcon typeIcon rftIcon"+this.objectType;
     134        },
    135135
    136             /* This is an experiment to embed the creation function in the ObjectBox class itself. This method cannot be static, but can be called externally as such:
    137              * rft.ui.ObjectBox().CreateNew(args, ref, loc);
    138              * TODO: Check with Hendrik if I should do this or not!
    139              * */
    140              CreateNew: function(arguments, reference, location) {
    141                 var newBox = new rft.ui.ObjectBox(arguments);
    142                 newBox.startup();
    143                 newBox.placeAt(reference, location);
    144             }
    145         });
     136        /* This is an experiment to embed the creation function in the ObjectBox class itself. This method cannot be static, but can be called externally as such:
     137         * rft.ui.ObjectBox().CreateNew(args, ref, loc);
     138         * TODO: Check with Hendrik if I should do this or not!
     139         * */
     140         CreateNew: function(arguments, reference, location) {
     141            var newBox = new rft.ui.ObjectBox(arguments);
     142            newBox.startup();
     143            newBox.placeAt(reference, location);
     144        }
     145    });
    146146});

  • Dev/branches/rest-dojo-ui/client/rft/ui/Selector.js

    r316 r350  
    88    'dijit/_Container',
    99    './LineWithActionsWidget',
    10     'dojo/text!./templates/Selector.html'
     10    'dojo/text!./templates/Selector.html',
     11    'dojo/dom-class'
    1112    ],function(
    1213        declare,
    … …  
    1819        _Container,
    1920        LineWithActionsWidget,
    20         templateString
     21        templateString,
     22        domClass
    2123        ){
    2224        return declare('rft.ui.Selector',[_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin,_Container],{
    … …  
    2426            title: "The professional as a participant",
    2527            baseClass: 'rftSelector',
     28            modifiers: 'blue',    // Extra CSS classes
    2629            postCreate: function() {
     30                domClass.add(this.domNode, this.modifiers);
     31                domClass.add(this.selectedColorNode, "pending");
    2732                var infoFunction = function() {
    2833                    alert("Show info here");
    … …  
    3035                new LineWithActionsWidget({
    3136                    title: this.title,
     37                    modifiers: this.modifiers,
    3238                    actions: {
    33                         "Select" : function(){}
     39                        "AddToSurvey" : {
     40                            callback: function(arg){},
     41                            properties: {
     42                                blockButton: true,
     43                                modifiers: this.modifiers,
     44                                icon: "Accept",
     45                                label: "Include"
     46                            }
     47                        }
    3448                    }
    3549                },this.titleNode);
    36                 new LineWithActionsWidget({
     50                var selectorLine = new LineWithActionsWidget({
    3751                    title: 'None',
     52                    modifiers: this.modifiers,
    3853                    actions: {
    39                         "V" : lang.hitch(this,function(){
    40                             var node = this.optionsNode;
    41                             var show = fx.wipeIn({
    42                                 node: node
    43                             });
    44                             var hide = fx.wipeOut({
    45                                 node: node
    46                             });
    47                             hide.play();
    48                             var folded = true;
    49                             return function(e) {
    50                                 if ( folded ) {
    51                                     show.play();
    52                                     folded = false;
    53                                 } else {
    54                                     hide.play();
    55                                     folded = true;
     54                        "ToggleDropdown" : {
     55                            callback: lang.hitch(this,function(){
     56                                var node = this.optionsNode;
     57                                var show = fx.wipeIn({
     58                                    node: node
     59                                });
     60                                var hide = fx.wipeOut({
     61                                    node: node
     62                                });
     63                                hide.play();
     64                                var folded = true;
     65                                return function(e) {
     66                                    if ( folded ) {
     67                                        // Bit of an ugly solution, really. Limit workload by limiting search to child elements of selecorLine.buttonsNode
     68                                        var downArrowIcon = dojo.query(".rftBlockButton .rftIconHalfArrowDown", selectorLine.buttonsNode)[0];  // Query the down arrow rftIcon span
     69                                        if (downArrowIcon){
     70                                            domClass.replace(downArrowIcon, "rftIconHalfArrowUp", "rftIconHalfArrowDown");
     71                                        }
     72                                        show.play();
     73                                        folded = false;
     74                                    } else {
     75                                        // Bit of an ugly solution, really. Limit workload by limiting search to child elements of selecorLine.buttonsNode
     76                                        var upArrowIcon = dojo.query(".rftBlockButton .rftIconHalfArrowUp", selectorLine.buttonsNode)[0];  // Query the up arrow rftIcon span
     77                                        if (upArrowIcon){
     78                                            domClass.replace(upArrowIcon, "rftIconHalfArrowDown", "rftIconHalfArrowUp");
     79                                        }
     80                                        hide.play();
     81                                        folded = true;
    5682                           
    57                                 }
    58                                 e.preventDefault();
    59                                 e.stopPropagation();
    60                             };
    61                         })()
     83                                    }
     84                                    e.preventDefault();
     85                                    e.stopPropagation();
     86                                };
     87                            })(),
     88                            properties: {
     89                                blockButton: true,
     90                                modifiers: this.modifiers,
     91                                showLabel: false,
     92                                icon: "HalfArrowDown"
     93                            }
     94                        }
    6295                    }
    6396                },this.selectedItemNode);
    … …  
    6598                    title: 'Are there direct colleagues among the other participants?',
    6699                    actions: {
    67                         "i" : infoFunction
    68                     }
    69                 }).placeAt(this.optionsNode);
    70                 new LineWithActionsWidget({
    71                     title: 'Do you personally know ithers present at the current session?',
    72                     actions: {
    73                         "i" : infoFunction
    74                     }
    75                 }).placeAt(this.optionsNode);
    76                 new LineWithActionsWidget({
    77                     title: 'Have you worked with other participants before?',
    78                     actions: {
    79                         "i" : infoFunction
     100                        "InfoHover" : {
     101                            callback: infoFunction,
     102                            properties: {
     103                                blockButton: false,
     104                                showLabel: false,
     105                                icon: "Inspect"
     106                            }
     107                        }
    80108                    }
    81109                }).placeAt(this.optionsNode);

  • Dev/branches/rest-dojo-ui/client/rft/ui/templates/Selector.html

    r316 r350  
    11<div>
    2     <div class="${baseClass}Title" data-dojo-attach-point="titleNode"></div>
     2    <div class="${baseClass}Category">
     3        <div class="${baseClass}Title" data-dojo-attach-point="titleNode"></div>
     4    </div>
    35    <div class="${baseClass}Selected">
    46        <div class="${baseClass}Color" data-dojo-attach-point="selectedColorNode"></div>

  • Dev/branches/rest-dojo-ui/client/rft/ui/templates/SessionBar.html

    r344 r350  
    11<div class="${baseClass}">
    22    <span class="rftIcon rftIconSession" data-dojo-attach-point="iconNode"></span>
    3     <div data-dojo-type="rft.ui.LineWithActionsWidgetThijs" data-dojo-attach-point="upperNode" data-dojo-props="modifiers: 'green', actions: {'inspect':{callback: inspect, properties: {blockButton: true, modifiers: 'white'}}}"></div>
    4     <div data-dojo-type="rft.ui.LineWithActionsWidgetThijs" data-dojo-attach-point="lowerNode"></div>
     3    <div data-dojo-type="rft.ui.LineWithActionsWidget" data-dojo-attach-point="upperNode" data-dojo-props="modifiers: 'green', actions: {'inspect':{callback: inspect, properties: {blockButton: true, modifiers: 'white'}}}"></div>
     4    <div data-dojo-type="rft.ui.LineWithActionsWidget" data-dojo-attach-point="lowerNode"></div>
    55</div>
Note: See TracChangeset for help on using the changeset viewer.