Changeset 335 for Dev/branches/rest-dojo-ui/client/rft/ui

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/rft/ui

Files:

• BlockButton.js (deleted)
• InlineButton.js (deleted)
• LargeButton.js (deleted)
• LineWithActionsWidgetThijs.js (modified) (2 diffs)
• SelectorThijs.js (modified) (5 diffs)
• templates/SelectorThijs.html (modified) (1 diff)

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

@@ -1 +1 @@
 define(['dojo/_base/declare','dojo/_base/lang','dojo/on','dojo/dom','dijit/form/Button',
     'dijit/_WidgetBase','dijit/_TemplatedMixin','dijit/_WidgetsInTemplateMixin',
-    'dojo/text!./templates/LineWithActionsWidget.html',
-    'rft/ui/InlineButton', 'rft/ui/BlockButton'],
-    function(declare,lang,on,dom,Button,_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin,templateString, InlineButton, BlockButton){
+    'dojo/text!./templates/LineWithActionsWidget.html'
+],
+    function(declare,lang,on,dom,Button,_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin,templateString){
         return declare('rft.ui.LineWithActionsWidgetThijs',[_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin],{
             templateString: templateString,
             baseClass: 'rftLineWithButtons',
             title: '',
+            color: "blue",
             userObject: null,
             actions: {},
@@ -21 +22 @@
             _setupActions: function() {
                 for (var action in this.actions) {
-                    new InlineButton({
-                        label: action,
-                        iconType: action,
-                        highlightColor: "White",
-                        onClick: lang.hitch(this, function(){
-                            this.actions[action](this.userObject);
-                        })
-                    }).placeAt(this.buttonsNode);
+                    
+                    if (this.actions[action].properties.blockButton == true) {  // BlockButton
+                        new Button(
+                            lang.mixin({
+                                baseClass: 'rftBlockButton',
+                                "class": this.color,
+                                label: action,
+                                iconClass: 'rftIcon rftIcon'+action,
+                                title: action,
+                                onClick: lang.hitch(this, function(){
+                                    this.actions[action].callback(this.userObject);
+                                })
+                            }, this.actions[action].properties)).placeAt(this.buttonsNode);
+                    } else {    //InlineButton
+                        new Button(
+                            lang.mixin({
+                                baseClass: 'rftInlineButton',
+                                "class": "black",
+                                showLabel: false,
+                                iconClass: 'rftIcon rftIcon'+action,
+                                title: action,
+                                onClick: lang.hitch(this, function(){
+                                    this.actions[action].callback(this.userObject);
+                                })
+                            }, this.actions[action].properties)).placeAt(this.buttonsNode);
+                    }
+                    
+                    
+                    
+                /*  THIS USES DEPRECATED CLASSES!!!
+                    if (this.actions[action].blockButton == true) {    // BlockButton!
+                        new BlockButton({
+                            label: action,
+                            iconType: action,
+                            highlightColor: this.actions[action].color || "green",
+                            onClick: lang.hitch(this, function(){
+                                this.actions[action].callback(this.userObject);
+                            })
+                        }).placeAt(this.buttonsNode);
+                        
+                    } else {    // InlineButton!
+                        new InlineButton({
+                            label: action,
+                            iconType: action,
+                            highlightColor: "Black",
+                            onClick: lang.hitch(this, function(){
+                                this.actions[action].callback(this.userObject);
+                            })
+                        }).placeAt(this.buttonsNode);
+                    }
+                    */
                 }
             },

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

@@ -8 +8 @@
     'dijit/_Container',
     './LineWithActionsWidgetThijs',
-    'dojo/text!./templates/Selector.html',
+    'dojo/text!./templates/SelectorThijs.html',
     'dojo/dom-class'
     ],function(
@@ -26 +26 @@
             title: "The professional as a participant",
             baseClass: 'rftSelector',
+            color: 'red',    // This is hardcoded for now, will serve as default value later! (Selector defaults to blue!) Only affects color of lineWithActions
             postCreate: function() {
                 var infoFunction = function() {
@@ -32 +33 @@
                 new LineWithActionsWidget({
                     title: this.title,
+                    color: this.color,
                     actions: {
-                        "Accept" : function(){}
+                        "Accept" : {
+                            callback: function(arg){},
+                            properties: {
+                                blockButton: true,
+                                color: this.color
+                            }
+                        }
                     }
                 },this.titleNode);
                 var selectorLine = new LineWithActionsWidget({
                     title: 'None',
+                    color: this.color,
                     actions: {
-                        "HalfArrowDown" : lang.hitch(this,function(){
-                            var node = this.optionsNode;
-                            var show = fx.wipeIn({
-                                node: node
-                            });
-                            var hide = fx.wipeOut({
-                                node: node
-                            });
-                            hide.play();
-                            var folded = true;
-                            return function(e) {
-                                if ( folded ) {
-                                    // Bit of an ugly solution, really. Limit workload by limiting search to child elements of selecorLine.buttonsNode
-                                    var downArrowIcon = dojo.query(".rftInlineButton .rftIconHalfArrowDown", selectorLine.buttonsNode)[0];  // Query the down arrow rftIcon span
-                                    if (downArrowIcon){
-                                        domClass.replace(downArrowIcon, "rftIconHalfArrowUp", "rftIconHalfArrowDown");
+                        "HalfArrowDown" : {
+                            callback: lang.hitch(this,function(){
+                                var node = this.optionsNode;
+                                var show = fx.wipeIn({
+                                    node: node
+                                });
+                                var hide = fx.wipeOut({
+                                    node: node
+                                });
+                                hide.play();
+                                var folded = true;
+                                return function(e) {
+                                    if ( folded ) {
+                                        // Bit of an ugly solution, really. Limit workload by limiting search to child elements of selecorLine.buttonsNode
+                                        var downArrowIcon = dojo.query(".rftBlockButton .rftIconHalfArrowDown", selectorLine.buttonsNode)[0];  // Query the down arrow rftIcon span
+                                        if (downArrowIcon){
+                                            domClass.replace(downArrowIcon, "rftIconHalfArrowUp", "rftIconHalfArrowDown");
+                                        }
+                                        show.play();
+                                        folded = false;
+                                    } else {
+                                        // Bit of an ugly solution, really. Limit workload by limiting search to child elements of selecorLine.buttonsNode
+                                        var upArrowIcon = dojo.query(".rftBlockButton .rftIconHalfArrowUp", selectorLine.buttonsNode)[0];  // Query the up arrow rftIcon span
+                                        if (upArrowIcon){
+                                            domClass.replace(upArrowIcon, "rftIconHalfArrowDown", "rftIconHalfArrowUp");
+                                        }
+                                        hide.play();
+                                        folded = true;
+                            
                                     }
-                                    show.play();
-                                    folded = false;
-                                } else {
-                                    // Bit of an ugly solution, really. Limit workload by limiting search to child elements of selecorLine.buttonsNode
-                                    var upArrowIcon = dojo.query(".rftInlineButton .rftIconHalfArrowUp", selectorLine.buttonsNode)[0];  // Query the up arrow rftIcon span
-                                    if (upArrowIcon){
-                                        domClass.replace(upArrowIcon, "rftIconHalfArrowDown", "rftIconHalfArrowUp");
-                                    }
-                                    hide.play();
-                                    folded = true;
-                            
-                                }
-                                e.preventDefault();
-                                e.stopPropagation();
-                            };
-                        })()
+                                    e.preventDefault();
+                                    e.stopPropagation();
+                                };
+                            })(),
+                            properties: {
+                                blockButton: true,
+                                color: this.color,
+                                showLabel: false
+                            }
+                        }
                     }
                 },this.selectedItemNode);
@@ -77 +93 @@
                     title: 'Are there direct colleagues among the other participants?',
                     actions: {
-                        "Inspect" : infoFunction
+                        "Inspect" : {
+                            callback: infoFunction,
+                            properties: {
+                                blockButton: false,
+                                showLabel: false
+                            }
+                        }
                     }
                 }).placeAt(this.optionsNode);
+                /*
                 new LineWithActionsWidget({
                     title: 'Do you personally know ithers present at the current session?',
@@ -92 +115 @@
                     }
                 }).placeAt(this.optionsNode);
+                */
             }
         });

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

@@ -1 @@
-<div>
-    <div class="${baseClass}Title" data-dojo-attach-point="titleNode"></div>
+<div class="${color}">
+    <div class="${baseClass}Category">
+        <div class="${baseClass}Title" data-dojo-attach-point="titleNode"></div>
+    </div>
     <div class="${baseClass}Selected">
         <div class="${baseClass}Color" data-dojo-attach-point="selectedColorNode"></div>