Changeset 333

Timestamp:

05/23/12 18:05:17 (13 years ago)

Author:

tjcschipper

Message:

• Added rft.ui.InlineButton?, which is another preset like LargeButton? and BlockButton?. This time icon only and no label, made to fit into rftLineWithActions widgets. highlightColor: White/Black? allows for two different versions depending on icon background.
• Make copies of rft/ui/LineWithActionsWidget and rft/ui/Selector, with -Thijs appended to the classnames. These are an attempt at integrating the newly created buttons in their intended contexts. The original classes and templates are untouched.
• Changed LargeButton? and BlockButton? to be less hardcoded and just better.

Location:

Dev/branches/rest-dojo-ui/client

Files:

• mockup.html (modified) (4 diffs)
• rft/ui/BlockButton.js (modified) (2 diffs)
• rft/ui/InlineButton.js (added)
• rft/ui/LargeButton.js (modified) (2 diffs)
• rft/ui/LineWithActionsWidgetThijs.js (added)
• rft/ui/SelectorThijs.js (added)
• rft/ui/templates/LineWithActionsWidgetThijs.html (added)
• rft/ui/templates/SelectorThijs.html (added)

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

@@ -40 +40 @@
                 'rft/ui/QuestionWidget',
                 'rft/ui/Selector',
+                'rft/ui/SelectorThijs',
+                'rft/ui/LineWithActionsWidgetThijs',
                 'rft/ui/TitleGroup',
                 'rft/ui/LargeButton',
                 'rft/ui/BlockButton',
+                'rft/ui/InlineButton',
                 'dojo/domReady!'
             ],function(parser){
@@ -83 +86 @@
                         <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.Selector" class="survey" data-dojo-props="title:'Intrinsic motivation'"></div>
-                            <div data-dojo-type="rft.ui.Selector" class="survey" data-dojo-props="title:'Extrinsic motivation'"></div>
-                            <div data-dojo-type="rft.ui.Selector" class="survey" data-dojo-props="title:'Motivation to participate'"></div>
-                            <div data-dojo-type="rft.ui.Selector" class="survey" data-dojo-props="title:'Experience with games'"></div>
-                            <div data-dojo-type="rft.ui.Selector" class="survey" data-dojo-props="title:'Participant context'"></div>
+                            <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>
                         <div title="Declarative, procedural and stragegic knowledge" data-dojo-type="dijit.layout.ContentPane"></div>
@@ -98 +101 @@
                         <div>Selected question is not yet in survey. These van be included in the survey.</div>
                         <div>Selected question conflicts with an included question. You can only swap these.</div>
-                        --BUTTON TESTS--
+                        
                         <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: null">Add to survey</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>
@@ -114 +120 @@
                     </div>
                     <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'">
-                        Nothing here! yet....
-
-                        //sooooooon......
+                        <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>
 
                     </div>

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

@@ -7 +7 @@
             showLabel: true,    // Or false? Documentation is retarded about this boolean... true = no label???
             highlightColor: 'blue', // Use the CSS class "highlightBlue" this adds to style active/hover transitions.
+            baseClass: "rftBlockButton",
             postMixInProperties: function(){
                 if (this.iconType == "none" || this.iconType == null) {
@@ -17 +18 @@
             postCreate: function(){
                 var capitalizedHighlightColor = this.highlightColor.charAt(0).toUpperCase() + this.highlightColor.slice(1);
-                domClass.add(this.domNode, "rftBlockButton highlight"+capitalizedHighlightColor);
+                domClass.add(this.domNode, "highlight"+capitalizedHighlightColor);
                 this.inherited(arguments);
             }

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

@@ -7 +7 @@
             showLabel: true,    // Or false? Documentation is retarded about this boolean... true = no label???
             highlightColor: "blue", // Use the CSS class "highlightBlue" this adds to style active/hover transitions
+            baseClass: "rftLargeButton",
             postMixInProperties: function(){
                 this.iconClass = "rftIcon rftIcon"+this.iconType;
@@ -13 +14 @@
             postCreate: function(){
                 var capitalizedHighlightColor = this.highlightColor.charAt(0).toUpperCase() + this.highlightColor.slice(1);
-                domClass.add(this.domNode, "rftLargeButton highlight"+capitalizedHighlightColor);
+                domClass.add(this.domNode, "highlight"+capitalizedHighlightColor);
                 this.inherited(arguments);
             }