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

Timestamp:

06/04/12 16:18:24 (13 years ago)

Author:

tjcschipper

Message:

• Changed linewithactions and selector -options- property to -modifiers-: more general approach. These extra classes are applied to the root domNode of the widget during the postCreate phase instead.
• Changed rftSelector.css stuff to match this change, and allow for separate colouring of a selector and its contents.

Location:

Dev/branches/rest-dojo-ui/client/rft/ui

Files:

• LineWithActionsWidgetThijs.js (modified) (4 diffs)
• SelectorThijs.js (modified) (6 diffs)
• templates/SelectorThijs.html (modified) (1 diff)

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

@@ -1 @@
-define(['dojo/_base/declare','dojo/_base/lang','dojo/on','dojo/dom','dijit/form/Button',
+define(['dojo/_base/declare','dojo/_base/lang','dojo/on','dojo/dom', 'dojo/dom-class', 'dijit/form/Button',
     'dijit/_WidgetBase','dijit/_TemplatedMixin','dijit/_WidgetsInTemplateMixin',
     'dojo/text!./templates/LineWithActionsWidget.html'
 ],
-    function(declare,lang,on,dom,Button,_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin,templateString){
+    function(declare,lang,on,dom,domClass,Button,_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin,templateString){
         return declare('rft.ui.LineWithActionsWidgetThijs',[_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin],{
             templateString: templateString,
             baseClass: 'rftLineWithButtons',
             title: '',
-            color: "blue",
+            modifiers: "red",
             userObject: null,
             actions: {},
@@ -18 +18 @@
                 this.inherited(arguments);
                 this._setupActions();
+                domClass.add(this.domNode, this.modifiers);
                 this.refresh();
             },
@@ -24 +25 @@
                     
                     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);
+                        var properties = lang.mixin(
+                        {
+                            baseClass: 'rftBlockButton',
+                            modifiers: this.modifiers,
+                            label: action,
+                            iconClass: 'rftIcon rftIcon'+action,
+                            title: action,
+                            onClick: lang.hitch(this, function(){
+                                this.actions[action].callback(this.userObject);
+                            })
+                        },
+                        this.actions[action].properties);
+                        properties["class"] = properties.modifiers;
+                        
+                        new Button(properties).placeAt(this.buttonsNode);
                     } else {    //InlineButton
                         new Button(
@@ -48 +53 @@
                             }, 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

@@ -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
+            modifiers: 'blue',    // Extra CSS classes
             postCreate: function() {
+                domClass.add(this.domNode, this.modifiers);
+                domClass.add(this.selectedColorNode, "pending");
                 var infoFunction = function() {
                     alert("Show info here");
@@ -33 +35 @@
                 new LineWithActionsWidget({
                     title: this.title,
-                    color: this.color,
+                    modifiers: this.modifiers,
                     actions: {
                         "Accept" : {
@@ -39 +41 @@
                             properties: {
                                 blockButton: true,
-                                color: this.color
+                                modifiers: this.modifiers
                             }
                         }
@@ -46 +48 @@
                 var selectorLine = new LineWithActionsWidget({
                     title: 'None',
-                    color: this.color,
+                    modifiers: this.modifiers,
                     actions: {
                         "HalfArrowDown" : {
@@ -84 +86 @@
                             properties: {
                                 blockButton: true,
-                                color: this.color,
+                                modifiers: this.modifiers,
                                 showLabel: false
                             }
@@ -102 +104 @@
                     }
                 }).placeAt(this.optionsNode);
-                /*
-                new LineWithActionsWidget({
-                    title: 'Do you personally know ithers present at the current session?',
-                    actions: {
-                        "Inspect" : infoFunction
-                    }
-                }).placeAt(this.optionsNode);
-                new LineWithActionsWidget({
-                    title: 'Have you worked with other participants before?',
-                    actions: {
-                        "Inspect" : infoFunction
-                    }
-                }).placeAt(this.optionsNode);
-                */
             }
         });

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

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