Changeset 396


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

Legend:

Unmodified
Added
Removed

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

    r395 r396  
    374374}
    375375
    376 /* Experimental background colour inheritance */
    377 .claro div.blue.inheritBgColor,
    378 .claro span.blue.inheritBgColor,
     376/****************************************************
     377/*  Self- and Inherit Colours
     378/***************************************************/
     379
     380/* InheritColours */
     381.claro .inheritBgColor,
     382.claro .bg {
     383    transition: all 0.2s;
     384    -moz-transition: all 0.2s;
     385    -webkit-transition: all 0.2s;
     386}
     387
    379388.claro .blue .inheritBgColor {
    380389    background-color: #0072bc;
    381390    color: #ffffff;
    382391}
    383 .claro div.green.inheritBgColor,
    384 .claro span.green.inheritBgColor,
     392.claro .blue.light .inheritBgColor,
     393.claro .blue .light.inheritBgColor {
     394    background-color: #0794d1;
     395    color: #ffffff;
     396}
    385397.claro .green .inheritBgColor {
    386398    background-color: #3aa605;
    387399    color: #ffffff;
    388400}
    389 .claro div.orange.inheritBgColor,
    390 .claro span.orange.inheritBgColor,
     401.claro .green.light .inheritBgColor,
     402.claro .green .light.inheritBgColor {
     403    background-color: #79ca0a;
     404    color: #ffffff;
     405}
    391406.claro .orange .inheritBgColor {
    392407    background-color: #ff5b12;
    393408    color: #ffffff;
    394409}
    395 .claro div.purple.inheritBgColor,
    396 .claro span.purple.inheritBgColor,
     410.claro .orange.light .inheritBgColor,
     411.claro .orange .light.inheritBgColor {
     412    background-color: #ff9140;
     413    color: #ffffff;
     414}
     415.claro .red .inheritBgColor {
     416    background-color: #8c0310;
     417    color: #ffffff;
     418}
     419.claro .red.light .inheritBgColor,
     420.claro .red .light.inheritBgColor {
     421   background-color: #bd0013;
     422   color: #ffffff;   
     423}
    397424.claro .purple .inheritBgColor {
    398425    background-color: #6529b7;
    399426    color: #ffffff;
    400427}
    401 .claro div.red.inheritBgColor,
    402 .claro span.red.inheritBgColor,
    403 .claro .red .inheritBgColor {
     428.claro .purple.light .inheritBgColor,
     429.claro .purple .light.inheritBgColor {
     430    background-color: #993dec;
     431    color: #ffffff;
     432}
     433.claro .white .inheritBgColor {
     434    background-color: #ffffff;
     435    color: #000000;
     436}
     437.claro .black .inheritBgColor {
     438    background-color: #000000;
     439    color: #ffffff;
     440}
     441.claro .trans .inheritBgColor {
     442    background: transparent;
     443    color: #ffffff;
     444}
     445
     446/*SelfColours! */
     447.claro .blue.bg {
     448    background-color: #0072bc;
     449    color: #ffffff;
     450}
     451.claro .blue.light.bg {
     452    background-color: #0794d1;
     453    color: #ffffff;
     454}
     455.claro .green.bg {
     456    background-color: #3aa605;
     457    color: #ffffff;
     458}
     459.claro .green.light.bg {
     460    background-color: #79ca0a;
     461    color: #ffffff;
     462}
     463.claro .orange.bg {
     464    background-color: #ff5b12;
     465    color: #ffffff;
     466}
     467.claro .orange.light.bg {
     468    background-color: #ff9140;
     469    color: #ffffff;
     470}
     471.claro .red.bg {
    404472    background-color: #8c0310;
    405473    color: #ffffff;
    406474}
    407 .claro div.trans.inheritBgColor,
    408 .claro span.trans.inheritBgColor,
    409 .claro .trans .inheritBgColor {
    410     background-color: transparent;
    411     color: #ffffff;
    412 }
    413 .claro div.blue.inheritBgColor.light,
    414 .claro span.blue.inheritBgColor.light,
    415 .claro .blue .inheritBgColor.light {
    416     background-color: #0794d1;
    417     color: #ffffff;
    418 }
    419 .claro div.green.inheritBgColor.light,
    420 .claro span.green.inheritBgColor.light,
    421 .claro .green .inheritBgColor.light {
    422     background-color: #79ca0a;
    423     color: #ffffff;
    424 }
    425 .claro div.orange.inheritBgColor.light,
    426 .claro span.orange.inheritBgColor.light,
    427 .claro .orange .inheritBgColor.light {
    428     background-color: #ff9140;
    429     color: #ffffff;
    430 }
    431 .claro div.purple.inheritBgColor.light,
    432 .claro span.purple.inheritBgColor.light,
    433 .claro .purple .inheritBgColor.light {
     475.claro .red.light.bg {
     476    background-color: #bd0013;
     477    color: #ffffff;   
     478}
     479.claro .purple.bg {
     480    background-color: #6529b7;
     481    color: #ffffff;
     482}
     483.claro .purple.light.bg {
    434484    background-color: #993dec;
    435485    color: #ffffff;
    436486}
    437 .claro div.red.inheritBgColor.light,
    438 .claro span.red.inheritBgColor.light,
    439 .claro .red .inheritBgColor.light {
    440     background-color: #bd0013;
    441     color: #ffffff;
    442 }
    443 
    444 /*TODO: Apply these classes to display elements that need to inherit the interface's object colour!
    445 Remove/disable other references to these colours from files like rftButtons, rftLineWithButtons, etc to make sure it works properly.
    446 Put these settings in a separate "colours.css" file to separate the concern of styling these objects from other layout-oriented properties.
    447 When we add things like highlightColours, borders, etc, the list could become quite long, especially if more colours are added to the colour scheme in time.
    448 
    449 
    450 Dropdown menu on MenuBar*/
     487.claro .white.bg {
     488    background-color: #ffffff;
     489    color: #000000;
     490}
     491.claro .black.bg {
     492    background-color: #000000;
     493    color: #ffffff;
     494}
     495.claro .trans.bg {
     496    background: transparent;
     497    color: #ffffff;
     498}
     499
     500/*Dropdown menu on MenuBar */
    451501.claro .dijitMenuPopup {
    452502
    … …  
    541591  padding-left: 5px;
    542592}
    543 
    544593.labelsAndValues-valueCell {
    545594  padding-left: 20px;

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

    r395 r396  
    4343}
    4444.claro .rftLargeButton.rftLargeButtonActive .dijitButtonNode {
    45     color: #0794d1;
    4645    transition: color 0.1s;
    4746    -moz-transition: color 0.1s;
    … …  
    4948    -o-transition: color 0.1s;
    5049}
    51 
    52 /*BlockButton*/
     50.claro span.blue.rftLargeButton.rftLargeButtonActive .dijitButtonNode,
     51.claro .blue .rftLargeButton.rftLargeButtonActive .dijitButtonNode {
     52    color: #0794d1;
     53}
     54.claro span.orange.rftLargeButton.rftLargeButtonActive .dijitButtonNode,
     55.claro .orange .rftLargeButton.rftLargeButtonActive .dijitButtonNode {
     56    color: #ff9140;
     57}
     58.claro span.green.rftLargeButton.rftLargeButtonActive .dijitButtonNode,
     59.claro .green .rftLargeButton.rftLargeButtonActive .dijitButtonNode {
     60    color: #79ca0a;
     61}
     62.claro span.red.rftLargeButton.rftLargeButtonActive .dijitButtonNode,
     63.claro .red .rftLargeButton.rftLargeButtonActive .dijitButtonNode {
     64    color: #bd0013;
     65}
     66.claro span.purple.rftLargeButton.rftLargeButtonActive .dijitButtonNode,
     67.claro .purple .rftLargeButton.rftLargeButtonActive .dijitButtonNode {
     68    color: #993dec;
     69}
     70
     71/****************************************************
     72/*  BlockButton
     73/***************************************************/
     74
    5375.claro .rftBlockButton {
    5476    height: 24px;
    … …  
    93115}
    94116
    95 /* Color hovers */
    96 /* These pertain to the 'normal' blockButtons - those that are placed on an empty background (gray) */
    97 .claro span.orange.inheritBgColor.rftBlockButtonHover,
     117/* Hover effects */
     118/*Normal*/
     119.claro span.blue.bg.rftBlockButtonHover,
     120.claro .blue .inheritBgColor.rftBlockButtonHover {
     121    background-color: #0794d1;
     122}
     123.claro span.orange.bg.rftBlockButtonHover,
    98124.claro .orange .inheritBgColor.rftBlockButtonHover {
    99     background-color: #ff9140 !important;
    100 }
    101 .claro span.orange.inheritBgColor.rftBlockButtonActive .dijitButtonNode,
     125    background-color: #ff9140;
     126}
     127.claro span.green.bg.rftBlockButtonHover,
     128.claro .green .inheritBgColor.rftBlockButtonHover {
     129    background-color: #79ca0a;
     130}
     131.claro span.red.bg.rftBlockButtonHover,
     132.claro .red .inheritBgColor.rftBlockButtonHover {
     133    background-color: #bd0013;
     134}
     135.claro span.purple.bg.rftBlockButtonHover,
     136.claro .purple .inheritBgColor.rftBlockButtonHover {
     137    background-color: #993dec;
     138}
     139/*Light*/
     140.claro span.blue.light.bg.rftBlockButtonHover .dijitButtonNode,
     141.claro .blue .light.inheritBgColor.rftBlockButtonHover .dijitButtonNode {
     142    color: #0072bc;
     143}
     144.claro span.orange.light.bg.rftBlockButtonHover .dijitButtonNode,
     145.claro .orange .light.inheritBgColor.rftBlockButtonHover .dijitButtonNode {
     146    color: #ff5b12;
     147}
     148.claro span.green.light.bg.rftBlockButtonHover .dijitButtonNode,
     149.claro .green .light.inheritBgColor.rftBlockButtonHover .dijitButtonNode {
     150    color: #3aa605;
     151}
     152.claro span.red.light.bg.rftBlockButtonHover .dijitButtonNode,
     153.claro .red .light.inheritBgColor.rftBlockButtonHover .dijitButtonNode {
     154    color: #8c0310;
     155}
     156.claro span.purple.light.bg.rftBlockButtonHover .dijitButtonNode,
     157.claro .purple .light.inheritBgColor.rftBlockButtonHover .dijitButtonNode {
     158    color: #6529b7;
     159}
     160/* Set all .light .bg/.inheritBgColors hover to White background! */
     161.claro span.light.bg.rftBlockButtonHover,
     162.claro .light.inheritBgColor.rftBlockButtonHover {
     163    background-color: #ffffff;
     164}
     165
     166/* Active effects */
     167/*Normal*/
     168.claro span.blue.bg.rftBlockButtonActive .dijitButtonNode,
     169.claro .blue .inheritBgColor.rftBlockButtonActive .dijitButtonNode {
     170    color: #0072bc;
     171}
     172.claro span.orange.bg.rftBlockButtonActive .dijitButtonNode,
    102173.claro .orange .inheritBgColor.rftBlockButtonActive .dijitButtonNode {
    103174    color: #ff5b12;
    104175}
    105 .claro span.blue.inheritBgColor.rftBlockButtonHover,
    106 .claro .blue .inheritBgColor.rftBlockButtonHover {
    107     background-color: #0794d1 !important;
    108 }
    109 .claro span.blue.inheritBgColor.rftBlockButtonActive .dijitButtonNode,
    110 .claro .blue .inheritBgColor.rftBlockButtonActive .dijitButtonNode {
    111     color: #0072bc;
    112 }
    113 .claro span.green.inheritBgColor.rftBlockButtonHover,
    114 .claro .green .inheritBgColor.rftBlockButtonHover {
    115     background-color: #79ca0a !important;
    116 }
    117 .claro span.green.inheritBgColor.rftBlockButtonActive .dijitButtonNode,
     176.claro span.green.bg.rftBlockButtonActive .dijitButtonNode,
    118177.claro .green .inheritBgColor.rftBlockButtonActive .dijitButtonNode {
    119178    color: #3aa605;
    120179}
    121 .claro span.red.inheritBgColor.rftBlockButtonHover,
    122 .claro .red .inheritBgColor.rftBlockButtonHover {
    123     background-color: #bd0013 !important;
    124 }
    125 .claro span.red.inheritBgColor.rftBlockButtonActive .dijitButtonNode,
     180.claro span.red.bg.rftBlockButtonActive .dijitButtonNode,
    126181.claro .red .inheritBgColor.rftBlockButtonActive .dijitButtonNode {
    127182    color: #8c0310;
    128183}
    129 .claro span.purple.inheritBgColor.rftBlockButtonHover,
    130 .claro .purple .inheritBgColor.rftBlockButtonHover {
    131     background-color: #993dec !important;
    132 }
    133 .claro span.purple.inheritBgColor.rftBlockButtonActive .dijitButtonNode,
     184.claro span.purple.bg.rftBlockButtonActive .dijitButtonNode,
    134185.claro .purple .inheritBgColor.rftBlockButtonActive .dijitButtonNode {
    135186    color: #6529b7;
    136187}
     188/* Set bg color to white for all normal .bg/.inheritBgColors on active! */
     189.claro span.bg.rftBlockButtonActive,
    137190.claro .inheritBgColor.rftBlockButtonActive {
    138     background-color: #ffffff !important;
    139 }
    140 
    141 /* These pertain to 'docked' BlockButtons, those on a coloured background, identified by the class "light" */
    142 .claro span.light.inheritBgColor.rftBlockButtonHover,
    143 .claro .light .inheritBgColor.rftBlockButtonHover {
    144     background-color: #ffffff !important;
    145 }
    146 .claro span.light.inheritBgColor.rftBlockButtonHover .dijitButtonNode,
    147 .claro .light .inheritBgColor.rftBlockButtonHover .dijitButtonNode {
    148     color: #000000;
    149 }
    150 .claro span.light.inheritBgColor.rftBlockButtonActive .dijitButtonNode,
    151 .claro .light .inheritBgColor.rftBlockButtonActive .dijitButtonNode {
    152     color: #ffffff;
    153 }
    154 /* colour specific ones*/
    155 .claro span.orange.light.inheritBgColor.rftBlockButtonActive .dijitButtonNode,
    156 .claro .orange .light.inheritBgColor.rftBlockButtonActive .dijitButtonNode {
    157     background-color: #ff5b12 !important;
    158 }
    159 .claro span.green.light.inheritBgColor.rftBlockButtonActive,
     191    background-color: #ffffff;
     192}
     193/*Light*/
     194.claro span.blue.light.bg.rftBlockButtonActive,
     195.claro .blue .light.inheritBgColor.rftBlockButtonActive {
     196    background-color: #0072bc;
     197}
     198.claro span.orange.light.bg.rftBlockButtonActive,
     199.claro .orange .light.inheritBgColor.rftBlockButtonActive {
     200    background-color: #ff5b12;
     201}
     202.claro span.green.light.bg.rftBlockButtonActive,
    160203.claro .green .light.inheritBgColor.rftBlockButtonActive {
    161     background-color: #3aa605 !important;
    162 }
    163 .claro span.red.light.inheritBgColor.rftBlockButtonActive,
     204    background-color: #3aa605;
     205}
     206.claro span.red.light.bg.rftBlockButtonActive,
    164207.claro .red .light.inheritBgColor.rftBlockButtonActive {
    165     background-color: #8c0310 !important;
    166 }
    167 .claro span.purple.light.inheritBgColor.rftBlockButtonActive,
     208    background-color: #8c0310;
     209}
     210.claro span.purple.light.bg.rftBlockButtonActive,
    168211.claro .purple .light.inheritBgColor.rftBlockButtonActive {
    169     background-color: #6529b7 !important;
    170 }
    171 .claro span.blue.light.inheritBgColor.rftBlockButtonActive,
    172 .claro .blue .light.inheritBgColor.rftBlockButtonActive {
    173     background-color: #0072bc !important;
    174 }
    175 
    176 
    177 /* InlineButton */
     212    background-color: #6529b7;
     213}
     214/* Set text color to white for all .light.bg/.light.inheritBgColor on active! */
     215.claro span.light.bg.rftBlockButtonActive .dijitButtonNode,
     216.claro .light.inheritBgColor.rftBlockButtonActive .dijitButtonNode {
     217    color: #ffffff;
     218}
     219
     220/****************************************************
     221/*  InlineButton
     222/***************************************************/
    178223.claro .rftInlineButton {
    179224    float: right;

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

    r395 r396  
    1111    float: left;
    1212    margin: 0;
    13 }
    14 
    15 /* Set default LWB colour to white. */
    16 .claro .rftSelector .rftLineWithButtons {
    17     background-color: #ffffff;
    18     color: #000000;
    1913}
    2014

  • Dev/branches/rest-dojo-ui/client/rft/pages/question.html

    r390 r396  
    1717        </div>
    1818        <div data-rft-attach-point="QuestionEditorPreviewNode"></div>
     19
    1920    </div>
    2021</div>

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

    r370 r396  
    1616                        baseClass: 'rftLineWithButtons',
    1717                        title: '',
    18                         modifiers: "blue",
    1918                        selectable: false,
    2019                        userObject: null,
    … …  
    2827                                this.inherited(arguments);
    2928                                this._setupActions();
    30                                 domClass.add(this.domNode, this.modifiers);
     29                                domClass.add(this.domNode, "inheritBgColor bg");
    3130                                this.refresh();
    3231                        },
    … …  
    3736                                                properties = lang.mixin({
    3837                                                        baseClass: 'rftBlockButton',
    39                                                         modifiers: this.modifiers,
     38                            "class": "inheritBgColor light",
    4039                                                        label: "Default",
    4140                                                        iconClass: 'rftIcon rftIcon'+this.actions[action].properties.icon,
    … …  
    4746                            }, this.actions[action])
    4847                                                }, this.actions[action].properties);
    49                         properties["class"] = properties.modifiers;
    5048                        new Button(properties).placeAt(this.buttonsNode);
    5149                    } else {
    5250                        properties = lang.mixin({
    5351                            baseClass: 'rftInlineButton',
    54                             modifiers: 'black',
    5552                            label: "Default",
    5653                            showLabel: false,
    … …  
    6360                            }, this.actions[action])
    6461                        }, this.actions[action].properties);
    65                         properties["class"] = properties.modifiers;
    6662                        new Button(properties).placeAt(this.buttonsNode);
    6763                    }

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

    r359 r396  
    1515            startup: function() {
    1616                this.line1 = new LineWithActionsWidget({
    17                     modifiers: 'green',
    1817                    actions: {
    1918                        "inspectIcon": {
    … …  
    2120                            properties: {
    2221                                blockButton: false,
    23                                 modifiers: "white",
    2422                                icon: "Inspect"
    2523                            }
    … …  
    2826                }).placeAt(this.line1Node);
    2927                this.line2 = new LineWithActionsWidget({
    30                     modifiers: 'green'
    3128                }).placeAt(this.line1Node);
    3229                var line3Actions = this._createLine3Actions();
    3330                this.line3 = new LineWithActionsWidget({
    34                     modifiers: 'green',
    3531                    actions: line3Actions
    3632                }).placeAt(this.line1Node);
    … …  
    5046                            blockButton: true,
    5147                            label: action,
    52                             modifiers: "trans",
    5348                            icon: action.charAt(0).toUpperCase()+action.slice(1)
    5449                        }
    … …  
    7671            }
    7772        });
    78     });
     73});

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

    r370 r396  
    3131            templateString: templateString,
    3232            baseClass: 'rftSelector',
    33             modifiers: 'blue',
    3433
    3534            title: "",
    … …  
    4746
    4847            startup: function() {
    49                 domClass.add(this.domNode, this.modifiers);
    5048                domClass.add(this.selectedColorNode, "pending");
    5149
    … …  
    6967                            properties: {
    7068                                 blockButton: true,
    71                                  modifiers: this.modifiers,
    7269                                 label: action.title || actionName,
    7370                                 icon: action.icon,
    … …  
    8178                this._titleLine = new LineWithActionsWidget({
    8279                    title: this.title,
    83                     modifiers: this.modifiers,
    8480                    actions: actions
    8581                },this.titleNode);
    … …  
    8985                this._selectorLine = new LineWithActionsWidget({
    9086                    title: 'None',
    91                     modifiers: this.modifiers,
    9287                    actions: {
    9388                        "Toggle dropdown" : {
    … …  
    9590                            properties: {
    9691                                blockButton: true,
    97                                 modifiers: this.modifiers,
    9892                                showLabel: false,
    9993                                icon: "HalfArrowDown"
    … …  
    162156                                blockButton: false,
    163157                                showLabel: false,
    164                                 icon: action.icon,
     158                                icon: action.icon + " black",
    165159                                tooltip: action.description
    166160                            }

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

    r389 r396  
    3131                                                properties: {
    3232                                                        blockButton: false,
    33                                                         icon: "Delete",
    34                                                         modifiers: "white"
     33                                                        icon: "Delete"
    3534                                                }
    3635                                        }

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

    r389 r396  
    3131                            properties: {
    3232                                blockButton: false,
    33                                 icon: "Delete",
    34                                 modifiers: "white"
     33                                icon: "Delete"
    3534                            }
    3635                        }

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

    r389 r396  
    3131                            properties: {
    3232                                blockButton: false,
    33                                 icon: "Delete",
    34                                 modifiers: "white"
     33                                icon: "Delete"
    3534                            }
    3635                        }

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

    r389 r396  
    3232                                blockButton: false,
    3333                                icon: "Delete",
    34                                 modifiers: "white",
    3534                                label: "Remove"
    3635                            }
    … …  
    4140                                blockButton: false,
    4241                                icon: "Inspect",
    43                                 modifiers: "white",
    4442                                label: "Show info"
    4543                            }

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

    r350 r396  
    11<div class="${baseClass}">
    22    <span class="rftIcon rftIconSession" data-dojo-attach-point="iconNode"></span>
    3     <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>
     3    <div data-dojo-type="rft.ui.LineWithActionsWidget" data-dojo-attach-point="upperNode" data-dojo-props="actions: {'inspect':{callback: inspect, properties: {blockButton: true}}}"></div>
    44    <div data-dojo-type="rft.ui.LineWithActionsWidget" data-dojo-attach-point="lowerNode"></div>
    55</div>
Note: See TracChangeset for help on using the changeset viewer.