Changeset 335 for Dev/branches/rest-dojo-ui/client/mockup.html

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.

File:

• Dev/branches/rest-dojo-ui/client/mockup.html (modified) (4 diffs)

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

@@ -43 +43 @@
                 'rft/ui/LineWithActionsWidgetThijs',
                 'rft/ui/TitleGroup',
-                'rft/ui/LargeButton',
-                'rft/ui/BlockButton',
-                'rft/ui/InlineButton',
                 'dojo/domReady!'
             ],function(parser){
@@ -86 +83 @@
                         <div title="Emotional, moral and relational attitudes" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Emotional, moral and relational attitudes'"></div>
                         <div title="The professional as a participant" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="selected:true">
-                            <div data-dojo-type="rft.ui.SelectorThijs" class="survey" data-dojo-props="title:'Intrinsic motivation'"></div>
-                            <div data-dojo-type="rft.ui.SelectorThijs" class="survey" data-dojo-props="title:'Extrinsic motivation'"></div>
-                            <div data-dojo-type="rft.ui.SelectorThijs" class="survey" data-dojo-props="title:'Motivation to participate'"></div>
-                            <div data-dojo-type="rft.ui.SelectorThijs" class="survey" data-dojo-props="title:'Experience with games'"></div>
-                            <div data-dojo-type="rft.ui.SelectorThijs" class="survey" data-dojo-props="title:'Participant context'"></div>
+                            <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="title:'Intrinsic motivation', color: 'blue'"></div>
+                            <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="title:'Extrinsic motivation', color: 'blue'"></div>
+                            <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="title:'Motivation to participate', color: 'blue'"></div>
+                            <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="title:'Experience with games', color: 'blue'"></div>
+                            <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="title:'Participant context', color: 'blue'"></div>
                         </div>
                         <div title="Declarative, procedural and stragegic knowledge" data-dojo-type="dijit.layout.ContentPane"></div>
@@ -102 +99 @@
                         <div>Selected question conflicts with an included question. You can only swap these.</div>
                         
-                        <button data-dojo-type="rft.ui.LargeButton" data-dojo-props="iconType: 'Save'">Save</button>
-                        <button data-dojo-type="rft.ui.LargeButton" data-dojo-props="iconType: 'Cancel'">Cancel</button>
-                        <button data-dojo-type="rft.ui.BlockButton" data-dojo-props="highlightColor: 'Orange', iconType: 'Accept'">Add to survey</button>
-                        <button data-dojo-type="rft.ui.BlockButton" data-dojo-props="highlightColor: 'Orange', iconType: 'Cancel'">Cancel</button>
-                        <button data-dojo-type="rft.ui.InlineButton" data-dojo-props="highlightColor: 'White', iconType: 'Help', label:'Help?'">Add to survey</button>
-                        <button data-dojo-type="rft.ui.InlineButton" data-dojo-props="highlightColor: 'White', iconType: 'Inspect', label:'See more details'">Add to survey</button>
+
                     </div>
                 </div>
@@ -120 +112 @@
                     </div>
                     <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'">
-                        <button data-dojo-type="rft.ui.LargeButton" data-dojo-props="iconType: 'Settings'">Properties</button>
-                        <button data-dojo-type="rft.ui.LargeButton" data-dojo-props="iconType: 'Preview'">Preview</button>
-                        <button data-dojo-type="rft.ui.LargeButton" data-dojo-props="iconType: 'Undo'">Discard</button>
-                        <button data-dojo-type="rft.ui.LargeButton" data-dojo-props="iconType: 'Accept'">Accept changes</button>
-
+                        <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass:'rftIcon rftIconSettings'">Properties</button>
+                        <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass:'rftIcon rftIconPreview'">Preview</button>
+                        <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass:'rftIcon rftIconCancel'">Discard</button>
+                        <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass:'rftIcon rftIconAccept'">Accept changes</button>
                     </div>
                 </div>