Changeset 338 for Dev


Ignore:
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
Files:
5 edited

Legend:

Unmodified
Added
Removed

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

    r337 r338  
    8282                        <div data-dojo-type="dijit.layout.TabContainer" data-dojo-props="tabPosition:'left-h',region:'center'">
    8383                            <div data-dojo-type="dijit.layout.ContentPane" title="Category One">
    84                                 <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat one', color: 'blue'"></div>
    85                                 <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat two', color: 'blue'"></div>
     84                                <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat one'"></div>
     85                                <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat two'"></div>
    8686                            </div>
    8787                            <div data-dojo-type="dijit.layout.ContentPane" title="Category Two">
    88                                 <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat one', color: 'blue'"></div>
    89                                 <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat two', color: 'blue'"></div>
     88                                <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat one'"></div>
     89                                <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat two'"></div>
    9090                            </div>
    9191                            <div data-dojo-type="dijit.layout.ContentPane" title="Category Three">
    92                                 <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat one', color: 'blue'"></div>
     92                                <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat one'"></div>
    9393                            </div>
    9494                            <div data-dojo-type="dijit.layout.ContentPane" title="Category Four">
    95                                 <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat one', color: 'blue'"></div>
    96                                 <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat two', color: 'blue'"></div>
    97                                 <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat three', color: 'blue'"></div>
     95                                <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Green Question Subcat one'"></div>
     96                                <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat two'"></div>
     97                                <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat three'"></div>
    9898                            </div>
    9999                            <div data-dojo-type="dijit.layout.ContentPane" title="Category Five">
    100                                 <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat one', color: 'purple'"></div>
    101                                 <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat two', color: 'purple'"></div>
    102                                 <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat three', color: 'purple'"></div>
    103                                 <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat four', color: 'purple'"></div>
     100                                <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat one'"></div>
     101                                <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat two'"></div>
     102                                <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat three'"></div>
     103                                <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat four'"></div>
    104104
    105105                                <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass:'rftIcon rftIconAccept'">Properties</button>

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

    r335 r338  
    1 /* IT'S LIKE THAT, AND THAT'S THE WAY IT IS! HUH! */
    21.gamelab .rftSelector {
    32    margin: 4px;
    43    font-size: 13px;
    5     color: #ffffff;
    64}
    75.gamelab .rftLineWithButtons {
    … …  
    108    font-size: 13px;
    119    margin: 0;
    12     background-color: #ffffff;
    13     color: #000000;
    1410    white-space: nowrap;
    15 }
    16 .gamelab .rftSelector .rftSelectorCategory {
    17     height: 24px;
    18 }
    19 
    20 /* Colour scheme */
    21 .gamelab .blue.rftSelector .rftSelectorCategory {
    22         background-color: #0072bc;
    23 }
    24 .gamelab .red.rftSelector .rftSelectorCategory {
    25         background-color: #8c0310;
    26 }
    27 .gamelab .purple.rftSelector .rftSelectorCategory {
    28         background-color: #6529b7;
    29 }
    30 .gamelab .green.rftSelector .rftSelectorCategory {
    31         background-color: #3aa605;
    32 }
    33 .gamelab .orange.rftSelector .rftSelectorCategory {
    34         background-color: #ff5b12;
    3511}
    3612.gamelab .rftLineWithButtons .rftLineWithButtonsButtons {
    … …  
    3915    line-height: 24px;
    4016    margin: 0;
     17    padding: 0;
    4118}
    4219.gamelab .rftLineWithButtons .rftLineWithButtonsButtons .rftBlockButton {
    … …  
    4421    clear: none;
    4522}
    46 .gamelab .rftSelector .rftLineWithButtons .rftLineWithButtonsTitle {
     23.gamelab .rftLineWithButtons .rftLineWithButtonsTitle {
    4724    float: left;
    4825    margin: 0 8px 0 8px;
    … …  
    5128    width: 8px;
    5229    height: 24px;
    53     background-color: #ff0000;
    5430    float: left;
    5531    margin: 0;
    5632}
    57 .gamelab .rftSelectorSelected rftSelectorColor.red {
    58     /* NO. Don't do that! Change the background color property using JS instead! Event handler for changeContentStatus on the rftSelector!!! */
     33
     34/* Background colour settings for the various contexts of rftLineWithButtons */
     35.gamelab .rftSelector .rftLineWithButtons {
     36    background-color: #ffffff;
     37    color: #000000;
    5938}
     39.gamelab .blue.rftSelector .rftLineWithButtons {
     40    background-color: #0072bc;
     41    color: #ffffff;
     42}
     43.gamelab .red.rftSelector .rftLineWithButtons {
     44    background-color: #8c0310;
     45    color: #ffffff;
     46}
     47.gamelab .green.rftSelector .rftLineWithButtons {
     48    background-color: #3aa605;
     49    color: #ffffff;
     50}
     51.gamelab .purple.rftSelector .rftLineWithButtons {
     52    background-color: #6529b7;
     53    color: #ffffff;
     54}
     55.gamelab .orange.rftSelector .rftLineWithButtons {
     56    background-color: #ff5b12;
     57    color: #ffffff;
     58}
     59
     60/* Black-on-white setting for non-header lines in the rftSelector */
     61.gamelab .rftSelector .rftSelectorSelected .rftLineWithButtons {
     62    background-color: #ffffff;
     63    color: #000000;
     64}
     65.gamelab .rftSelector .rftSelectorOptions .rftLineWithButtons {
     66    background-color: #ffffff;
     67    color: #000000;
     68}
     69
     70/* Colour settings for the rftSelectorColor status indicator */
     71.gamelab .rftSelectorSelected .rftSelectorColor.conflict {
     72    background-color: #ff0000;
     73}
     74.gamelab .rftSelectorSelected .rftSelectorColor.pending {
     75    background-color: #ff8000;
     76}
     77.gamelab .rftSelectorSelected .rftSelectorColor.success {
     78    background-color: #00ff00;
     79}
     80
     81/*  NOT SURE WHAT THIS DOES ATM...KEEP HERE FOR FUTURE REFERENCE IF NON-SELECTOR LINES FAIL TO DISPLAY PROPERLY
    6082.gamelab .rftSelector .rftSelectorCategory .rftLineWithButtons {
    6183    display: inline-block;
    62     color: #ffffff;
    63     background-color: transparent;
    6484    width: 100% !important;
    6585}
     86*/

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

    r335 r338  
    1 define(['dojo/_base/declare','dojo/_base/lang','dojo/on','dojo/dom','dijit/form/Button',
     1define(['dojo/_base/declare','dojo/_base/lang','dojo/on','dojo/dom', 'dojo/dom-class', 'dijit/form/Button',
    22    'dijit/_WidgetBase','dijit/_TemplatedMixin','dijit/_WidgetsInTemplateMixin',
    33    'dojo/text!./templates/LineWithActionsWidget.html'
    44],
    5     function(declare,lang,on,dom,Button,_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin,templateString){
     5    function(declare,lang,on,dom,domClass,Button,_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin,templateString){
    66        return declare('rft.ui.LineWithActionsWidgetThijs',[_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin],{
    77            templateString: templateString,
    88            baseClass: 'rftLineWithButtons',
    99            title: '',
    10             color: "blue",
     10            modifiers: "red",
    1111            userObject: null,
    1212            actions: {},
    … …  
    1818                this.inherited(arguments);
    1919                this._setupActions();
     20                domClass.add(this.domNode, this.modifiers);
    2021                this.refresh();
    2122            },
    … …  
    2425                   
    2526                    if (this.actions[action].properties.blockButton == true) {  // BlockButton
    26                         new Button(
    27                             lang.mixin({
    28                                 baseClass: 'rftBlockButton',
    29                                 "class": this.color,
    30                                 label: action,
    31                                 iconClass: 'rftIcon rftIcon'+action,
    32                                 title: action,
    33                                 onClick: lang.hitch(this, function(){
    34                                     this.actions[action].callback(this.userObject);
    35                                 })
    36                             }, this.actions[action].properties)).placeAt(this.buttonsNode);
     27                        var properties = lang.mixin(
     28                        {
     29                            baseClass: 'rftBlockButton',
     30                            modifiers: this.modifiers,
     31                            label: action,
     32                            iconClass: 'rftIcon rftIcon'+action,
     33                            title: action,
     34                            onClick: lang.hitch(this, function(){
     35                                this.actions[action].callback(this.userObject);
     36                            })
     37                        },
     38                        this.actions[action].properties);
     39                        properties["class"] = properties.modifiers;
     40                       
     41                        new Button(properties).placeAt(this.buttonsNode);
    3742                    } else {    //InlineButton
    3843                        new Button(
    … …  
    4853                            }, this.actions[action].properties)).placeAt(this.buttonsNode);
    4954                    }
    50                    
    51                    
    52                    
    53                 /*  THIS USES DEPRECATED CLASSES!!!
    54                     if (this.actions[action].blockButton == true) {    // BlockButton!
    55                         new BlockButton({
    56                             label: action,
    57                             iconType: action,
    58                             highlightColor: this.actions[action].color || "green",
    59                             onClick: lang.hitch(this, function(){
    60                                 this.actions[action].callback(this.userObject);
    61                             })
    62                         }).placeAt(this.buttonsNode);
    63                        
    64                     } else {    // InlineButton!
    65                         new InlineButton({
    66                             label: action,
    67                             iconType: action,
    68                             highlightColor: "Black",
    69                             onClick: lang.hitch(this, function(){
    70                                 this.actions[action].callback(this.userObject);
    71                             })
    72                         }).placeAt(this.buttonsNode);
    73                     }
    74                     */
    7555                }
    7656            },

  • Dev/branches/rest-dojo-ui/client/rft/ui/SelectorThijs.js

    r335 r338  
    2626            title: "The professional as a participant",
    2727            baseClass: 'rftSelector',
    28             color: 'red',    // This is hardcoded for now, will serve as default value later! (Selector defaults to blue!) Only affects color of lineWithActions
     28            modifiers: 'blue',    // Extra CSS classes
    2929            postCreate: function() {
     30                domClass.add(this.domNode, this.modifiers);
     31                domClass.add(this.selectedColorNode, "pending");
    3032                var infoFunction = function() {
    3133                    alert("Show info here");
    … …  
    3335                new LineWithActionsWidget({
    3436                    title: this.title,
    35                     color: this.color,
     37                    modifiers: this.modifiers,
    3638                    actions: {
    3739                        "Accept" : {
    … …  
    3941                            properties: {
    4042                                blockButton: true,
    41                                 color: this.color
     43                                modifiers: this.modifiers
    4244                            }
    4345                        }
    … …  
    4648                var selectorLine = new LineWithActionsWidget({
    4749                    title: 'None',
    48                     color: this.color,
     50                    modifiers: this.modifiers,
    4951                    actions: {
    5052                        "HalfArrowDown" : {
    … …  
    8486                            properties: {
    8587                                blockButton: true,
    86                                 color: this.color,
     88                                modifiers: this.modifiers,
    8789                                showLabel: false
    8890                            }
    … …  
    102104                    }
    103105                }).placeAt(this.optionsNode);
    104                 /*
    105                 new LineWithActionsWidget({
    106                     title: 'Do you personally know ithers present at the current session?',
    107                     actions: {
    108                         "Inspect" : infoFunction
    109                     }
    110                 }).placeAt(this.optionsNode);
    111                 new LineWithActionsWidget({
    112                     title: 'Have you worked with other participants before?',
    113                     actions: {
    114                         "Inspect" : infoFunction
    115                     }
    116                 }).placeAt(this.optionsNode);
    117                 */
    118106            }
    119107        });

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

    r335 r338  
    1 <div class="${color}">
     1<div>
    22    <div class="${baseClass}Category">
    33        <div class="${baseClass}Title" data-dojo-attach-point="titleNode"></div>
Note: See TracChangeset for help on using the changeset viewer.