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

Timestamp:

08/09/12 17:09:46 (13 years ago)

Author:

tjcschipper

Message:

• Modifiers property on LineWithActions? and selectors is gone! Yay! Colour handling now happens through a combination of up to four CSS classes.

  "red/blue/orange/green/purple/etc": These do not do anything in themselves, they just mark a certain element as being of that colour.
  "inheritBgColor": Any element that has this class assigned will adjust its color to the color class of their parents. A 'div.blue' has no colour itself, but a 'div.inheritBgColor' within that div will turn blue. It also adjusts text colour to white.
  "bg": Any element with this property will also take on any colour class assigned to itself. This overrides 'inheritBgColor' if the element has both classes, so you could still make an orange button in a 'blue' container if you wanted. If the element itself does not have a colour class, it will stay transparent. This also adjusts text colour to white.
  "light": This class modifies the inherited/set colour to its lighter version (see RFT Design Sheet). For example, it can be used when placing a blue BlockButton? on an already blue LineWithActions?: adding the light class will differentiate the button from the background.
  

For examples of how to implement/derive more specific style rules using these classes, see rftButtons.css.

• Changed all widgets still using the 'modifiers' to assign proper colour classes where necessary. (For instance, changed Selector.js to always set its main buttons to "light".)

Location:

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

Files:

• LineWithActionsWidget.js (modified) (5 diffs)
• ObjectBox.js (modified) (5 diffs)
• Selector.js (modified) (7 diffs)
• lists/AccountListView.js (modified) (1 diff)
• lists/CategoryListView.js (modified) (1 diff)
• lists/MultipleChoiceListView.js (modified) (1 diff)
• lists/QuestionListView.js (modified) (2 diffs)
• templates/SessionBar.html (modified) (1 diff)

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

@@ -16 +16 @@
                         baseClass: 'rftLineWithButtons',
                         title: '',
-                        modifiers: "blue",
                         selectable: false,
                         userObject: null,
@@ -28 +27 @@
                                 this.inherited(arguments);
                                 this._setupActions();
-                                domClass.add(this.domNode, this.modifiers);
+                                domClass.add(this.domNode, "inheritBgColor bg");
                                 this.refresh();
                         },
@@ -37 +36 @@
                                                 properties = lang.mixin({
                                                         baseClass: 'rftBlockButton',
-                                                        modifiers: this.modifiers,
+                            "class": "inheritBgColor light",
                                                         label: "Default",
                                                         iconClass: 'rftIcon rftIcon'+this.actions[action].properties.icon,
@@ -47 +46 @@
                             }, this.actions[action])
                                                 }, this.actions[action].properties);
-                        properties["class"] = properties.modifiers;
                         new Button(properties).placeAt(this.buttonsNode);
                     } else {
                         properties = lang.mixin({
                             baseClass: 'rftInlineButton',
-                            modifiers: 'black',
                             label: "Default",
                             showLabel: false,
@@ -63 +60 @@
                             }, this.actions[action])
                         }, this.actions[action].properties);
-                        properties["class"] = properties.modifiers;
                         new Button(properties).placeAt(this.buttonsNode);
                     }

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

@@ -15 +15 @@
             startup: function() {
                 this.line1 = new LineWithActionsWidget({
-                    modifiers: 'green',
                     actions: {
                         "inspectIcon": {
@@ -21 +20 @@
                             properties: {
                                 blockButton: false,
-                                modifiers: "white",
                                 icon: "Inspect"
                             }
@@ -28 +26 @@
                 }).placeAt(this.line1Node);
                 this.line2 = new LineWithActionsWidget({
-                    modifiers: 'green'
                 }).placeAt(this.line1Node);
                 var line3Actions = this._createLine3Actions();
                 this.line3 = new LineWithActionsWidget({
-                    modifiers: 'green',
                     actions: line3Actions
                 }).placeAt(this.line1Node);
@@ -50 +46 @@
                             blockButton: true,
                             label: action,
-                            modifiers: "trans",
                             icon: action.charAt(0).toUpperCase()+action.slice(1)
                         }
@@ -76 +71 @@
             }
         });
-    });
+});

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

@@ -31 +31 @@
             templateString: templateString,
             baseClass: 'rftSelector',
-            modifiers: 'blue',
 
             title: "",
@@ -47 +46 @@
 
             startup: function() {
-                domClass.add(this.domNode, this.modifiers);
                 domClass.add(this.selectedColorNode, "pending");
 
@@ -69 +67 @@
                             properties: {
                                  blockButton: true,
-                                 modifiers: this.modifiers,
                                  label: action.title || actionName,
                                  icon: action.icon,
@@ -81 +78 @@
                 this._titleLine = new LineWithActionsWidget({
                     title: this.title,
-                    modifiers: this.modifiers,
                     actions: actions
                 },this.titleNode);
@@ -89 +85 @@
                 this._selectorLine = new LineWithActionsWidget({
                     title: 'None',
-                    modifiers: this.modifiers,
                     actions: {
                         "Toggle dropdown" : {
@@ -95 +90 @@
                             properties: {
                                 blockButton: true,
-                                modifiers: this.modifiers,
                                 showLabel: false,
                                 icon: "HalfArrowDown"
@@ -162 +156 @@
                                 blockButton: false,
                                 showLabel: false,
-                                icon: action.icon,
+                                icon: action.icon + " black",
                                 tooltip: action.description
                             }

Dev/branches/rest-dojo-ui/client/rft/ui/lists/AccountListView.js

@@ -31 +31 @@
                                                 properties: {
                                                         blockButton: false,
-                                                        icon: "Delete",
-                                                        modifiers: "white"
+                                                        icon: "Delete"
                                                 }
                                         }

Dev/branches/rest-dojo-ui/client/rft/ui/lists/CategoryListView.js

@@ -31 +31 @@
                             properties: {
                                 blockButton: false,
-                                icon: "Delete",
-                                modifiers: "white"
+                                icon: "Delete"
                             }
                         }

Dev/branches/rest-dojo-ui/client/rft/ui/lists/MultipleChoiceListView.js

@@ -31 +31 @@
                             properties: {
                                 blockButton: false,
-                                icon: "Delete",
-                                modifiers: "white"
+                                icon: "Delete"
                             }
                         }

Dev/branches/rest-dojo-ui/client/rft/ui/lists/QuestionListView.js

@@ -32 +32 @@
                                 blockButton: false,
                                 icon: "Delete",
-                                modifiers: "white",
                                 label: "Remove"
                             }
@@ -41 +40 @@
                                 blockButton: false,
                                 icon: "Inspect",
-                                modifiers: "white",
                                 label: "Show info"
                             }

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

@@ -1 +1 @@
 <div class="${baseClass}">
     <span class="rftIcon rftIconSession" data-dojo-attach-point="iconNode"></span>
-    <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>
+    <div data-dojo-type="rft.ui.LineWithActionsWidget" data-dojo-attach-point="upperNode" data-dojo-props="actions: {'inspect':{callback: inspect, properties: {blockButton: true}}}"></div>
     <div data-dojo-type="rft.ui.LineWithActionsWidget" data-dojo-attach-point="lowerNode"></div>
 </div>