Changeset 350 for Dev


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
Files:
9 edited
1 copied

Legend:

Unmodified
Added
Removed

  • Dev/branches/rest-dojo-ui/client/rft/pages/session.html

    r347 r350  
    3030                        <br/><br/>
    3131                        <div data-dojo-type="rft.ui.List" data-dojo-props="region:'center'" style="width: 500px;">
    32                             <div data-dojo-type="rft.ui.LineWithActionsWidgetThijs" data-dojo-props="title:'a.bezuijen@tudelft.nl', modifiers: 'green', actions: {'Cancel':{callback: function(){}, properties: {blockButton: false, icon: 'Delete', modifiers:'white'}}}"></div>
    33                             <div data-dojo-type="rft.ui.LineWithActionsWidgetThijs" data-dojo-props="title:'i.mayer@tudelft.nl', modifiers: 'green', actions: {'Cancel':{callback: function(){}, properties: {blockButton: false, icon: 'Delete', modifiers:'white'}}}"></div>
     32                            <div data-dojo-type="rft.ui.LineWithActionsWidget" data-dojo-props="title:'a.bezuijen@tudelft.nl', modifiers: 'green', actions: {'Cancel':{callback: function(){}, properties: {blockButton: false, icon: 'Delete', modifiers:'white'}}}"></div>
     33                            <div data-dojo-type="rft.ui.LineWithActionsWidget" data-dojo-props="title:'i.mayer@tudelft.nl', modifiers: 'green', actions: {'Cancel':{callback: function(){}, properties: {blockButton: false, icon: 'Delete', modifiers:'white'}}}"></div>
    3434                        </div>
    3535                    </fieldset>

  • Dev/branches/rest-dojo-ui/client/rft/pages/sessions.html

    r347 r350  
    1 <div>
     1<div data-dojo-type="rft.pages.sessions">
    22    <script>
    33        function createNew(){
    … …  
    5050                    <div id="containerTemplates" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'center'">
    5151                        <!--TODO: These don't allow for custom icon settings yet! -->
    52                         <div data-dojo-type="rft.ui.ObjectBox" data-dojo-props="actions: {'edit': function(){alert('Custom edit code');}, 'delete':function(){}, 'Custom function': function(){alert('newCommand');}, 'publish': createInstance}"></div>
     52                        <div data-dojo-type="rft.ui.ObjectBox" data-dojo-props="actions: {'edit': function(){alert('Custom edit code');}, 'delete':function(){}, 'Custom function': function(){alert('newCommand');}, 'publish': function(){alert('createInstance');}}"></div>
    5353                    </div>
    5454                    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'bottom'" style="height: 40px;">
    55                         <div data-dojo-type="dijit.form.Button" data-dojo-props="region: 'bottom', baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconSessionTemplate', onClick: createNew">Create new template</div>
     55                        <div data-dojo-type="dijit.form.Button" data-dojo-props="region: 'bottom', baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconSessionTemplate', onClick: function(){alert('createNew');}">Create new template</div>
    5656                    </div>
    5757                </div>

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

    r347 r350  
    11define(['dojo/_base/declare','dojo/_base/lang','dojo/_base/Deferred','dojo/data/ObjectStore','rft/auth','rft/store','rft/content','rft/ui/_Page'],
    22    function(declare,lang,Deferred,ObjectStore,auth,store,content,_Page){
    3         return declare('rft.pages.surveys',[_Page],{
     3        return declare('rft.pages.sessions',[_Page],{
    44            selectedObject: null,
    55            onVisit: function() {

  • Dev/branches/rest-dojo-ui/client/rft/pages/survey.html

    r349 r350  
    1313            <div data-dojo-type="dijit.layout.TabContainer" class="blue" data-dojo-props="tabPosition:'left-h',region:'center'">
    1414                <div data-dojo-type="dijit.layout.ContentPane" title="Category One, this is a very long title to see how overflow works. This part is cut off because it passes two lines at 200px wide.">
    15                     <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat one'"></div>
    16                     <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat two'"></div>
     15                    <div data-dojo-type="rft.ui.Selector" data-dojo-props="Title:'Subcat one'"></div>
     16                    <div data-dojo-type="rft.ui.Selector" data-dojo-props="Title:'Subcat two'"></div>
    1717                </div>
    1818                <div data-dojo-type="dijit.layout.ContentPane" title="Category Two">
    19                     <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat one'"></div>
    20                     <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat two'"></div>
     19                    <div data-dojo-type="rft.ui.Selector" data-dojo-props="Title:'Subcat one'"></div>
     20                    <div data-dojo-type="rft.ui.Selector" data-dojo-props="Title:'Subcat two'"></div>
    2121                </div>
    2222                <div data-dojo-type="dijit.layout.ContentPane" title="Category Three">
    23                     <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat one'"></div>
     23                    <div data-dojo-type="rft.ui.Selector" data-dojo-props="Title:'Subcat one'"></div>
    2424                </div>
    2525                <div data-dojo-type="dijit.layout.ContentPane" title="Category Four">
    26                     <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Green Question Subcat one'"></div>
    27                     <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat two'"></div>
    28                     <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat three'"></div>
     26                    <div data-dojo-type="rft.ui.Selector" data-dojo-props="Title:'Green Question Subcat one'"></div>
     27                    <div data-dojo-type="rft.ui.Selector" data-dojo-props="Title:'Subcat two'"></div>
     28                    <div data-dojo-type="rft.ui.Selector" data-dojo-props="Title:'Subcat three'"></div>
    2929                </div>
    3030                <div data-dojo-type="dijit.layout.ContentPane" title="Category Five">
    31                     <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat one'"></div>
    32                     <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat two'"></div>
    33                     <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat three'"></div>
    34                     <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat four'"></div>
     31                    <div data-dojo-type="rft.ui.Selector" data-dojo-props="Title:'Subcat one'"></div>
     32                    <div data-dojo-type="rft.ui.Selector" data-dojo-props="Title:'Subcat two'"></div>
     33                    <div data-dojo-type="rft.ui.Selector" data-dojo-props="Title:'Subcat three'"></div>
     34                    <div data-dojo-type="rft.ui.Selector" data-dojo-props="Title:'Subcat four'"></div>
    3535                </div>
    3636            </div>
    … …  
    4343            <div data-dojo-type="rft.ui.List" data-dojo-props="region:'center'">
    4444                <!-- These would have to be dynamically generated instead of declared here! -->
    45                 <div data-dojo-type="rft.ui.LineWithActionsWidgetThijs" data-dojo-props="title:'Question one', actions: {'Cancel':{callback: function(){}, properties: {blockButton: false, icon: 'Delete', modifiers:'white'}}}"></div>
    46                 <div data-dojo-type="rft.ui.LineWithActionsWidgetThijs" data-dojo-props="title:'Question two', actions: {'Cancel':{callback: function(){}, properties: {blockButton: false, icon: 'Delete', modifiers:'white'}}}"></div>
     45                <div data-dojo-type="rft.ui.LineWithActionsWidget" data-dojo-props="title:'Question one', actions: {'Cancel':{callback: function(){}, properties: {blockButton: false, icon: 'Delete', modifiers:'white'}}}"></div>
     46                <div data-dojo-type="rft.ui.LineWithActionsWidget" data-dojo-props="title:'Question two', actions: {'Cancel':{callback: function(){}, properties: {blockButton: false, icon: 'Delete', modifiers:'white'}}}"></div>
    4747            </div>
    4848            <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'bottom'">

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

    r347 r350  
    3434    'rft/ui/Notifications',
    3535    'rft/ui/LineWithActionsWidget',
     36    'rft/ui/ObjectBox',
    3637    'rft/ui/QuestionWidget',
     38    'rft/ui/Selector',
    3739    'rft/ui/TitleGroup',
    38    
    39     // Thijs mods, to be merged
    40     'rft/ui/SelectorThijs',
    41     'rft/ui/LineWithActionsWidgetThijs',
    4240   
    4341    // pages -> load dynamically?
    4442    'rft/pages/questions',
     43    'rft/pages/sessions',
    4544    'rft/pages/surveys',
    4645    'rft/pages/survey',

  • 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.