Ignore:
Timestamp:
05/30/12 16:39:27 (13 years ago)
Author:
tjcschipper
Message:
  • Removed rft/ui/*Button classes, since they are not actually needed. All buttons use standard dijit.form.Button again.

(baseClass: 'rft*Button', color: 'lowercase *, iconClass: 'rftIcon rftIcon*')

  • Changed CSS color classes to be shorter and more organized. No more highlightRed, now just red.
  • Moved extra .css files from client/dojotoolkit/dijit/themes/gamelab folder to client/rft/css folder, so they are actually included. Same for icons. Gamelab theme now contains only original Claro theme with renamed base class. Part of an effort to make the gamelab style work with standard inclusions of Dojo toolkit. (Override instead of change!)
  • Changed rft/ui/LineWithActionsWidgetThijs.js to use the new Button format.
  • Changed rft/ui/LineWithActionsWidgetThijs.js and rft/ui/SelectorThijs.js to use a new way to add Actions to the LineWithActions?. Instead of {"action": function(){}}, you now pass {"action": {callback: function(){}, properties: {props}}}.

The properties object is used as a mixin during creation of the Buttons, so you can directly set properties on the resulting buttons here. Most important one: action.properties.blockButton (boolean), that determines whether the Button should be a blockButton or inlineButton.

Location:
Dev/branches/rest-dojo-ui/client
Files:
12 added
3 deleted
5 edited

Legend:

Unmodified
Added
Removed

  • Dev/branches/rest-dojo-ui/client/mockup.html

    r333 r335  
    4343                'rft/ui/LineWithActionsWidgetThijs',
    4444                'rft/ui/TitleGroup',
    45                 'rft/ui/LargeButton',
    46                 'rft/ui/BlockButton',
    47                 'rft/ui/InlineButton',
    4845                'dojo/domReady!'
    4946            ],function(parser){
    … …  
    8683                        <div title="Emotional, moral and relational attitudes" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Emotional, moral and relational attitudes'"></div>
    8784                        <div title="The professional as a participant" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="selected:true">
    88                             <div data-dojo-type="rft.ui.SelectorThijs" class="survey" data-dojo-props="title:'Intrinsic motivation'"></div>
    89                             <div data-dojo-type="rft.ui.SelectorThijs" class="survey" data-dojo-props="title:'Extrinsic motivation'"></div>
    90                             <div data-dojo-type="rft.ui.SelectorThijs" class="survey" data-dojo-props="title:'Motivation to participate'"></div>
    91                             <div data-dojo-type="rft.ui.SelectorThijs" class="survey" data-dojo-props="title:'Experience with games'"></div>
    92                             <div data-dojo-type="rft.ui.SelectorThijs" class="survey" data-dojo-props="title:'Participant context'"></div>
     85                            <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="title:'Intrinsic motivation', color: 'blue'"></div>
     86                            <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="title:'Extrinsic motivation', color: 'blue'"></div>
     87                            <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="title:'Motivation to participate', color: 'blue'"></div>
     88                            <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="title:'Experience with games', color: 'blue'"></div>
     89                            <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="title:'Participant context', color: 'blue'"></div>
    9390                        </div>
    9491                        <div title="Declarative, procedural and stragegic knowledge" data-dojo-type="dijit.layout.ContentPane"></div>
    … …  
    10299                        <div>Selected question conflicts with an included question. You can only swap these.</div>
    103100                       
    104                         <button data-dojo-type="rft.ui.LargeButton" data-dojo-props="iconType: 'Save'">Save</button>
    105                         <button data-dojo-type="rft.ui.LargeButton" data-dojo-props="iconType: 'Cancel'">Cancel</button>
    106                         <button data-dojo-type="rft.ui.BlockButton" data-dojo-props="highlightColor: 'Orange', iconType: 'Accept'">Add to survey</button>
    107                         <button data-dojo-type="rft.ui.BlockButton" data-dojo-props="highlightColor: 'Orange', iconType: 'Cancel'">Cancel</button>
    108                         <button data-dojo-type="rft.ui.InlineButton" data-dojo-props="highlightColor: 'White', iconType: 'Help', label:'Help?'">Add to survey</button>
    109                         <button data-dojo-type="rft.ui.InlineButton" data-dojo-props="highlightColor: 'White', iconType: 'Inspect', label:'See more details'">Add to survey</button>
     101
    110102                    </div>
    111103                </div>
    … …  
    120112                    </div>
    121113                    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'">
    122                         <button data-dojo-type="rft.ui.LargeButton" data-dojo-props="iconType: 'Settings'">Properties</button>
    123                         <button data-dojo-type="rft.ui.LargeButton" data-dojo-props="iconType: 'Preview'">Preview</button>
    124                         <button data-dojo-type="rft.ui.LargeButton" data-dojo-props="iconType: 'Undo'">Discard</button>
    125                         <button data-dojo-type="rft.ui.LargeButton" data-dojo-props="iconType: 'Accept'">Accept changes</button>
    126 
     114                        <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass:'rftIcon rftIconSettings'">Properties</button>
     115                        <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass:'rftIcon rftIconPreview'">Preview</button>
     116                        <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass:'rftIcon rftIconCancel'">Discard</button>
     117                        <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass:'rftIcon rftIconAccept'">Accept changes</button>
    127118                    </div>
    128119                </div>

  • Dev/branches/rest-dojo-ui/client/rft/css/main.css

    r319 r335  
    1 *:focus {
    2     outline: none;
    3 }
     1@import url('layout.css');
     2@import url('general.css');
    43
    5 html,body {
    6     width: 100%;
    7     height: 100%;
    8     font-size: .813em;
    9     background-color: #333333;
    10 }
    11 
    12 .gamelab {
    13     font-family: 'Segoe UI', Verdana, Arial, Helvetica, sans-serif;
    14     color: #ffffff;
    15 }
    16 
    17 /* Headings */
    18 .gamelab h1 {
    19     font-size: 3em;
    20     margin-bottom: 0.727em;
    21     font-weight: normal !important;
    22 }
    23 .gamelab h2 {
    24     font-size: 1.375em;
    25     line-height: 1.5em;
    26     margin-top: 1em;
    27     margin-bottom: 0.60em;
    28     font-weight: normal;
    29 }
    30 .gamelab h3,
    31 .gamelab h4,
    32 .gamelab h5,
    33 .gamelab h6 {
    34     font-size: 1.125em;
    35     font-weight: normal;
    36 }
    37 
    38 .mainLogo {
    39     float: left;
    40     height: 50px;
    41     font-size: 50px;
    42     width: auto;
    43     -webkit-margin: 5px 20px 5px 20px !important;
    44     padding: 0 !important;
    45     line-height: 50px;
    46     color: #999999;
    47 }
    48 
    49 .gamelab .dijitMenuBar.mainMenu {
    50     width: auto;
    51     float: right;
    52     margin: 10px 50px 10px 20px;
    53 }
    54 
    55 .breadcrumbs {
    56     float: left;
    57     clear: left;
    58     width: 100%;
    59     text-align: center;
    60 }
    61 
    62 .breadcrumb {
    63     color: #999999;
    64     font-size: 13px;
    65 }
    66 
    67 .breadcrumbCurrent {
    68     color: #ffffff;
    69     font-size: 14px;
    70 }
    71 
    72 .menuItem {
    73     margin: 0px 5px 0px 5px;
    74 }
    75 
    76 .content {
    77     width: 100%;
    78     display: block;
    79     clear: both;
    80     background-color: #555555;
    81 }
    82 
    83 .loginLabel {
    84     float: left;
    85     clear: left;
    86     width: 100px;
    87 }
    88 
    89 .loginInput {
    90     float: left;
    91     clear: right;
    92     width: 150px;
    93 }
    94 
    95 .rftMultipleChoiceWidget {
    96     display: table;
    97 }
    98 
    99 .rftMultipleChoiceWidget .row {
    100     display: table-row;
    101 }
    102 
    103 .rftMultipleChoiceWidget .rowBox {
    104     display: table-cell;
    105 }
    106 
    107 .rftMultipleChoiceWidget .rowText {
    108     display: table-cell;
    109     width: 100px;
    110 }
    111 
    112 .rftMultipleChoiceWidget .rowBtn {
    113     display: table-cell;
    114     width: 30px;
    115 }
    116 
    117 /* Basic layout */
    118 .gamelab .header {
    119     background-color: #333333;
    120     height: 80px;
    121     font-size: 16px;
    122 }
    123 
    124 .title {
    125     height: 24px;
    126     padding: 4px 0;
    127     margin: 4px;
    128 }
    129 
    130 .title .titleIcon {
    131     float: left;
    132     width: 32px;
    133     height: 32px;
    134     clear: none;
    135     margin-right: 8px;
    136     margin-top: -4px;
    137     margin-bottom: -4px;
    138 }
    139 
    140 .title .titleText {
    141     float: left;
    142     line-height: 24px;
    143     font-size: 24px;
    144     margin: 0;
    145 }
    146 
    147 .verticalTabList {
    148     width: 190px;
    149 }
     4@import url('rftButtons.css');
     5@import url('rftIcons.css');
     6@import url('rftSelector.css');

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

    r333 r335  
    11define(['dojo/_base/declare','dojo/_base/lang','dojo/on','dojo/dom','dijit/form/Button',
    22    'dijit/_WidgetBase','dijit/_TemplatedMixin','dijit/_WidgetsInTemplateMixin',
    3     'dojo/text!./templates/LineWithActionsWidget.html',
    4     'rft/ui/InlineButton', 'rft/ui/BlockButton'],
    5     function(declare,lang,on,dom,Button,_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin,templateString, InlineButton, BlockButton){
     3    'dojo/text!./templates/LineWithActionsWidget.html'
     4],
     5    function(declare,lang,on,dom,Button,_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin,templateString){
    66        return declare('rft.ui.LineWithActionsWidgetThijs',[_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin],{
    77            templateString: templateString,
    88            baseClass: 'rftLineWithButtons',
    99            title: '',
     10            color: "blue",
    1011            userObject: null,
    1112            actions: {},
    … …  
    2122            _setupActions: function() {
    2223                for (var action in this.actions) {
    23                     new InlineButton({
    24                         label: action,
    25                         iconType: action,
    26                         highlightColor: "White",
    27                         onClick: lang.hitch(this, function(){
    28                             this.actions[action](this.userObject);
    29                         })
    30                     }).placeAt(this.buttonsNode);
     24                   
     25                    if (this.actions[action].properties.blockButton == true) {  // BlockButton
     26                        new Button(
     27                            lang.mixin({
     28                                baseClass: 'rftBlockButton',
     29                                "class": this.color,
     30                                label: action,
     31                                iconClass: 'rftIcon rftIcon'+action,
     32                                title: action,
     33                                onClick: lang.hitch(this, function(){
     34                                    this.actions[action].callback(this.userObject);
     35                                })
     36                            }, this.actions[action].properties)).placeAt(this.buttonsNode);
     37                    } else {    //InlineButton
     38                        new Button(
     39                            lang.mixin({
     40                                baseClass: 'rftInlineButton',
     41                                "class": "black",
     42                                showLabel: false,
     43                                iconClass: 'rftIcon rftIcon'+action,
     44                                title: action,
     45                                onClick: lang.hitch(this, function(){
     46                                    this.actions[action].callback(this.userObject);
     47                                })
     48                            }, this.actions[action].properties)).placeAt(this.buttonsNode);
     49                    }
     50                   
     51                   
     52                   
     53                /*  THIS USES DEPRECATED CLASSES!!!
     54                    if (this.actions[action].blockButton == true) {    // BlockButton!
     55                        new BlockButton({
     56                            label: action,
     57                            iconType: action,
     58                            highlightColor: this.actions[action].color || "green",
     59                            onClick: lang.hitch(this, function(){
     60                                this.actions[action].callback(this.userObject);
     61                            })
     62                        }).placeAt(this.buttonsNode);
     63                       
     64                    } else {    // InlineButton!
     65                        new InlineButton({
     66                            label: action,
     67                            iconType: action,
     68                            highlightColor: "Black",
     69                            onClick: lang.hitch(this, function(){
     70                                this.actions[action].callback(this.userObject);
     71                            })
     72                        }).placeAt(this.buttonsNode);
     73                    }
     74                    */
    3175                }
    3276            },

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

    r333 r335  
    88    'dijit/_Container',
    99    './LineWithActionsWidgetThijs',
    10     'dojo/text!./templates/Selector.html',
     10    'dojo/text!./templates/SelectorThijs.html',
    1111    'dojo/dom-class'
    1212    ],function(
    … …  
    2626            title: "The professional as a participant",
    2727            baseClass: 'rftSelector',
     28            color: 'red',    // This is hardcoded for now, will serve as default value later! (Selector defaults to blue!) Only affects color of lineWithActions
    2829            postCreate: function() {
    2930                var infoFunction = function() {
    … …  
    3233                new LineWithActionsWidget({
    3334                    title: this.title,
     35                    color: this.color,
    3436                    actions: {
    35                         "Accept" : function(){}
     37                        "Accept" : {
     38                            callback: function(arg){},
     39                            properties: {
     40                                blockButton: true,
     41                                color: this.color
     42                            }
     43                        }
    3644                    }
    3745                },this.titleNode);
    3846                var selectorLine = new LineWithActionsWidget({
    3947                    title: 'None',
     48                    color: this.color,
    4049                    actions: {
    41                         "HalfArrowDown" : lang.hitch(this,function(){
    42                             var node = this.optionsNode;
    43                             var show = fx.wipeIn({
    44                                 node: node
    45                             });
    46                             var hide = fx.wipeOut({
    47                                 node: node
    48                             });
    49                             hide.play();
    50                             var folded = true;
    51                             return function(e) {
    52                                 if ( folded ) {
    53                                     // Bit of an ugly solution, really. Limit workload by limiting search to child elements of selecorLine.buttonsNode
    54                                     var downArrowIcon = dojo.query(".rftInlineButton .rftIconHalfArrowDown", selectorLine.buttonsNode)[0];  // Query the down arrow rftIcon span
    55                                     if (downArrowIcon){
    56                                         domClass.replace(downArrowIcon, "rftIconHalfArrowUp", "rftIconHalfArrowDown");
     50                        "HalfArrowDown" : {
     51                            callback: lang.hitch(this,function(){
     52                                var node = this.optionsNode;
     53                                var show = fx.wipeIn({
     54                                    node: node
     55                                });
     56                                var hide = fx.wipeOut({
     57                                    node: node
     58                                });
     59                                hide.play();
     60                                var folded = true;
     61                                return function(e) {
     62                                    if ( folded ) {
     63                                        // Bit of an ugly solution, really. Limit workload by limiting search to child elements of selecorLine.buttonsNode
     64                                        var downArrowIcon = dojo.query(".rftBlockButton .rftIconHalfArrowDown", selectorLine.buttonsNode)[0];  // Query the down arrow rftIcon span
     65                                        if (downArrowIcon){
     66                                            domClass.replace(downArrowIcon, "rftIconHalfArrowUp", "rftIconHalfArrowDown");
     67                                        }
     68                                        show.play();
     69                                        folded = false;
     70                                    } else {
     71                                        // Bit of an ugly solution, really. Limit workload by limiting search to child elements of selecorLine.buttonsNode
     72                                        var upArrowIcon = dojo.query(".rftBlockButton .rftIconHalfArrowUp", selectorLine.buttonsNode)[0];  // Query the up arrow rftIcon span
     73                                        if (upArrowIcon){
     74                                            domClass.replace(upArrowIcon, "rftIconHalfArrowDown", "rftIconHalfArrowUp");
     75                                        }
     76                                        hide.play();
     77                                        folded = true;
     78                           
    5779                                    }
    58                                     show.play();
    59                                     folded = false;
    60                                 } else {
    61                                     // Bit of an ugly solution, really. Limit workload by limiting search to child elements of selecorLine.buttonsNode
    62                                     var upArrowIcon = dojo.query(".rftInlineButton .rftIconHalfArrowUp", selectorLine.buttonsNode)[0];  // Query the up arrow rftIcon span
    63                                     if (upArrowIcon){
    64                                         domClass.replace(upArrowIcon, "rftIconHalfArrowDown", "rftIconHalfArrowUp");
    65                                     }
    66                                     hide.play();
    67                                     folded = true;
    68                            
    69                                 }
    70                                 e.preventDefault();
    71                                 e.stopPropagation();
    72                             };
    73                         })()
     80                                    e.preventDefault();
     81                                    e.stopPropagation();
     82                                };
     83                            })(),
     84                            properties: {
     85                                blockButton: true,
     86                                color: this.color,
     87                                showLabel: false
     88                            }
     89                        }
    7490                    }
    7591                },this.selectedItemNode);
    … …  
    7793                    title: 'Are there direct colleagues among the other participants?',
    7894                    actions: {
    79                         "Inspect" : infoFunction
     95                        "Inspect" : {
     96                            callback: infoFunction,
     97                            properties: {
     98                                blockButton: false,
     99                                showLabel: false
     100                            }
     101                        }
    80102                    }
    81103                }).placeAt(this.optionsNode);
     104                /*
    82105                new LineWithActionsWidget({
    83106                    title: 'Do you personally know ithers present at the current session?',
    … …  
    92115                    }
    93116                }).placeAt(this.optionsNode);
     117                */
    94118            }
    95119        });

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

    r333 r335  
    1 <div>
    2     <div class="${baseClass}Title" data-dojo-attach-point="titleNode"></div>
     1<div class="${color}">
     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>
Note: See TracChangeset for help on using the changeset viewer.