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

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

Files:

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

Dev/branches/rest-dojo-ui/client/rft/css/rftSelector.css

@@ -1 @@
-/* IT'S LIKE THAT, AND THAT'S THE WAY IT IS! HUH! */
 .gamelab .rftSelector {
     margin: 4px;
     font-size: 13px;
-    color: #ffffff;
 }
 .gamelab .rftLineWithButtons {
@@ -10 +8 @@
     font-size: 13px;
     margin: 0;
-    background-color: #ffffff;
-    color: #000000;
     white-space: nowrap;
-}
-.gamelab .rftSelector .rftSelectorCategory {
-    height: 24px;
-}
-
-/* Colour scheme */
-.gamelab .blue.rftSelector .rftSelectorCategory {
-        background-color: #0072bc;
-}
-.gamelab .red.rftSelector .rftSelectorCategory {
-        background-color: #8c0310;
-}
-.gamelab .purple.rftSelector .rftSelectorCategory {
-        background-color: #6529b7;
-}
-.gamelab .green.rftSelector .rftSelectorCategory {
-        background-color: #3aa605;
-}
-.gamelab .orange.rftSelector .rftSelectorCategory {
-        background-color: #ff5b12;
 }
 .gamelab .rftLineWithButtons .rftLineWithButtonsButtons {
@@ -39 +15 @@
     line-height: 24px;
     margin: 0;
+    padding: 0;
 }
 .gamelab .rftLineWithButtons .rftLineWithButtonsButtons .rftBlockButton {
@@ -44 +21 @@
     clear: none;
 }
-.gamelab .rftSelector .rftLineWithButtons .rftLineWithButtonsTitle {
+.gamelab .rftLineWithButtons .rftLineWithButtonsTitle {
     float: left;
     margin: 0 8px 0 8px;
@@ -51 +28 @@
     width: 8px;
     height: 24px;
-    background-color: #ff0000;
     float: left;
     margin: 0;
 }
-.gamelab .rftSelectorSelected rftSelectorColor.red {
-    /* NO. Don't do that! Change the background color property using JS instead! Event handler for changeContentStatus on the rftSelector!!! */
+
+/* Background colour settings for the various contexts of rftLineWithButtons */
+.gamelab .rftSelector .rftLineWithButtons {
+    background-color: #ffffff;
+    color: #000000;
 }
+.gamelab .blue.rftSelector .rftLineWithButtons {
+    background-color: #0072bc;
+    color: #ffffff;
+}
+.gamelab .red.rftSelector .rftLineWithButtons {
+    background-color: #8c0310;
+    color: #ffffff;
+}
+.gamelab .green.rftSelector .rftLineWithButtons {
+    background-color: #3aa605;
+    color: #ffffff;
+}
+.gamelab .purple.rftSelector .rftLineWithButtons {
+    background-color: #6529b7;
+    color: #ffffff;
+}
+.gamelab .orange.rftSelector .rftLineWithButtons {
+    background-color: #ff5b12;
+    color: #ffffff;
+}
+
+/* Black-on-white setting for non-header lines in the rftSelector */
+.gamelab .rftSelector .rftSelectorSelected .rftLineWithButtons {
+    background-color: #ffffff;
+    color: #000000;
+}
+.gamelab .rftSelector .rftSelectorOptions .rftLineWithButtons {
+    background-color: #ffffff;
+    color: #000000;
+}
+
+/* Colour settings for the rftSelectorColor status indicator */
+.gamelab .rftSelectorSelected .rftSelectorColor.conflict {
+    background-color: #ff0000;
+}
+.gamelab .rftSelectorSelected .rftSelectorColor.pending {
+    background-color: #ff8000;
+}
+.gamelab .rftSelectorSelected .rftSelectorColor.success {
+    background-color: #00ff00;
+}
+
+/*  NOT SURE WHAT THIS DOES ATM...KEEP HERE FOR FUTURE REFERENCE IF NON-SELECTOR LINES FAIL TO DISPLAY PROPERLY
 .gamelab .rftSelector .rftSelectorCategory .rftLineWithButtons {
     display: inline-block;
-    color: #ffffff;
-    background-color: transparent;
     width: 100% !important;
 }
+*/

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>