Changeset 339


Ignore:
Timestamp:
06/04/12 18:09:33 (13 years ago)
Author:
tjcschipper
Message:
  • Switched away from using custom themes, this allows us to use the default Claro theme off of a CDN, then override the needed properties using our own, much smaller stylesheets. Retains graceful degradation of dijit style.
  • Made rftLineWithActions also work outside of the context of an rftSelector.css
  • Fixed some general layout issues
  • Redid the tabs styling
Location:
Dev/branches/rest-dojo-ui/client
Files:
6 edited

Legend:

Unmodified
Added
Removed

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

    r338 r339  
    4848            });
    4949        </script>
    50 
    5150    </head>
    52     <body class="dijitReset gamelab">
     51    <body class="dijitReset claro">
    5352        <div class="page" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
     53            <!-- Top menu bar -->
    5454            <div class="topbar" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
    5555                <h1>ResearchTool</h1>
    56                 <!-- And now the menu! -->
    5756                <div data-dojo-type="dijit.MenuBar">
    5857                    <div data-dojo-type="dijit.MenuBarItem" class="rftMainMenuButton">Sessions</div>
    … …  
    6766                </div>
    6867            </div>
    69 
     68            <!-- Main content window -->
    7069            <div class="content" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
    7170                <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center'" style="height: 500px;">
    … …  
    8079                            Presets
    8180                        </div>
    82                         <div data-dojo-type="dijit.layout.TabContainer" data-dojo-props="tabPosition:'left-h',region:'center'">
     81                        <div data-dojo-type="dijit.layout.TabContainer" class="blue" data-dojo-props="tabPosition:'left-h',region:'center'">
    8382                            <div data-dojo-type="dijit.layout.ContentPane" title="Category One">
    8483                                <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat one'"></div>
    … …  
    110109                        </div>
    111110                    </div>
     111                    <!-- "Shopping cart" -->
    112112                    <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'right'" style="width: 300px">
    113113                        <div data-dojo-type="rft.ui.List" data-dojo-props="region:'center'">
    114                             <div data-dojo-type="rft.ui.LineWithActionsWidgetThijs" data-dojo-props="title:'Question one', actions: {'Cancel':{callback: function(){}, properties: {blockButton: false, class:'black'}}}"></div>
    115                             <div data-dojo-type="rft.ui.LineWithActionsWidgetThijs" data-dojo-props="title:'Question two', actions: {'Cancel':{callback: function(){}, properties: {blockButton: false, class:'black'}}}"></div>
     114                            <!-- These would have to be dynamically generated instead of declared here! -->
     115                            <div data-dojo-type="rft.ui.LineWithActionsWidgetThijs" data-dojo-props="title:'Question one', actions: {'Cancel':{callback: function(){}, properties: {blockButton: false, modifiers:'white'}}}"></div>
     116                            <div data-dojo-type="rft.ui.LineWithActionsWidgetThijs" data-dojo-props="title:'Question two', actions: {'Cancel':{callback: function(){}, properties: {blockButton: false, modifiers:'white'}}}"></div>
    116117                        </div>
    117118                    </div>

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

    r337 r339  
    22They are typically small fixes or tweaks to adjust spacing and/or borders/colours */
    33
    4 .gamelab .dijitTabPaneWrapper {
     4.claro .dijitTabPaneWrapper {
    55    border: none;
    66}

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

    r337 r339  
    99    background-color: #333333;
    1010}
    11 .gamelab {
     11.claro {
    1212    font-family: 'Segoe UI', Verdana, Arial, Helvetica, sans-serif;
    1313    color: #ffffff;
    … …  
    1515
    1616/* Headings */
    17 .gamelab h1 {   
     17.claro h1 {   
    1818    /* Main logo */
    1919    float: left;
    … …  
    2828    -moz-user-select: none;
    2929}
    30 .gamelab h2 {
     30.claro h2 {
    3131    /* Content pane title */
    3232    font-size: 22px;
    … …  
    3535    padding: 0;
    3636}
    37 .gamelab h2 .rftIcon {
     37.claro h2 .rftIcon {
    3838    float: left;
    3939    width: 32px;
    … …  
    4242    margin-right: 8px;
    4343}
    44 .gamelab h3 {
     44.claro h3 {
    4545    /* Section headers */
    4646    font-size: 18px;
    4747}
    48 .gamelab h4 {
     48.claro h4 {
    4949    /* Small text headers/paragraph headers */
    5050    font-size: 16px;
    … …  
    137137    width: 190px;
    138138}
     139
     140
     141/* Tabs */
     142.claro .dijitTabContainerLeft-tabs {
     143    border: none;
     144}
     145.claro .dijitTabContainerLeft-tabs .dijitTab {
     146    margin: 4px 0;
     147    width: 200px;
     148    height: 30px;
     149}
     150.claro .dijitTab {
     151    color: #999999;
     152    border: 1px solid #999999;
     153    transition: all 0.3s;
     154    -moz-transition: all 0.3s;
     155    -webkit-transition: all 0.3s;
     156    -o-transition: all 0.3s;
     157}
     158.claro .dijitTab.dijitTabHover {
     159    color: #ffffff;
     160    transition: all 0.1s;
     161    -moz-transition: all 0.1s;
     162    -webkit-transition: all 0.1s;
     163    -o-transition: all 0.1s;
     164}
     165.claro .dijitTab.dijitTabActive {
     166    color: #0072bc;
     167    transition: all 0.1s;
     168    -moz-transition: all 0.1s;
     169    -webkit-transition: all 0.1s;
     170    -o-transition: all 0.1s;
     171    /* The delay on clicking is wrong, needs to be quicker! */
     172}
     173.claro .dijitTab.dijitTabChecked {
     174    color: #ffffff;
     175    border: 1px solid transparent;
     176    transition: all 0.1s;
     177    -moz-transition: all 0.1s;
     178    -webkit-transition: all 0.1s;
     179    -o-transition: all 0.1s;
     180}
     181
     182.claro .dijitTabContainer.blue .dijitTab.dijitTabChecked {
     183    background-color: #0072bc;
     184}
     185.claro .dijitTabContainer.orange .dijitTab.dijitTabChecked {
     186    background-color: #ff5b12;
     187}
     188.claro .dijitTabContainer.red .dijitTab.dijitTabChecked {
     189    background-color: #8c0310;
     190}
     191.claro .dijitTabContainer.purple .dijitTab.dijitTabChecked {
     192    background-color: #6529b7;
     193}
     194.claro .dijitTabContainer.green .dijitTab.dijitTabChecked {
     195    background-color: #3aa605;
     196}
     197
     198.claro .dijitTabContainer.blue .dijitTab.dijitTabActive {
     199    color: #0072bc;
     200}
     201.claro .dijitTabContainer.orange .dijitTab.dijitTabActive {
     202    color: #ff5b12;
     203}
     204.claro .dijitTabContainer.red .dijitTab.dijitTabActive {
     205    color: #8c0310;
     206}
     207.claro .dijitTabContainer.purple .dijitTab.dijitTabActive {
     208    color: #6529b7;
     209}
     210.claro .dijitTabContainer.green .dijitTab.dijitTabActive {
     211    color: #3aa605;
     212}

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

    r337 r339  
    11/* And now for the RFT specific stuff! */
    22/*LargeButton*/
    3 .gamelab .rftLargeButton {
     3.claro .rftLargeButton {
    44    margin-right: 16px;
    55}
    6 .gamelab .rftLargeButton .dijitButtonNode {
     6.claro .rftLargeButton .dijitButtonNode {
    77    border: none;
    88    height: 24px;
    … …  
    1717    -o-transition: color 0.3s;
    1818}
    19 .gamelab .rftLargeButton .rftIcon {
     19.claro .rftLargeButton .rftIcon {
    2020    width: 24px;
    2121    height: 24px;
    2222    background-image: url('images/icons/rftIcons24.png');
    2323}
    24 .gamelab .rftLargeButton .dijitButtonText {
     24.claro .rftLargeButton .dijitButtonText {
    2525    line-height: 24px;
    2626    margin-left: 6px;
    2727    padding: 0;
    2828}
    29 .gamelab .rftLargeButton.rftLargeButtonHover .dijitButtonNode {
     29.claro .rftLargeButton.rftLargeButtonHover .dijitButtonNode {
    3030    transition: color 0.1s;
    3131    -moz-transition: color 0.1s;
    … …  
    3434    color: #ffffff;
    3535}
    36 .gamelab .rftLargeButton.rftLargeButtonActive .dijitButtonNode {
     36.claro .rftLargeButton.rftLargeButtonActive .dijitButtonNode {
    3737    color: #0794d1;
    3838    transition: color 0.1s;
    … …  
    4343
    4444/*BlockButton*/
    45 .gamelab .rftBlockButton {
     45.claro .rftBlockButton {
    4646    height: 24px;
    4747    margin: 0;
    4848    line-height: 20px;
    4949}
    50 .gamelab .rftBlockButton .dijitButtonNode {
     50.claro .rftBlockButton .dijitButtonNode {
    5151    height: 24px;
    5252    padding: 0 4px;
    … …  
    6262    -o-transition: background-color 0.3s;
    6363}
    64 .gamelab .rftBlockButton .rftIcon {
     64.claro .rftBlockButton .rftIcon {
    6565    height: 16px;
    6666    width: 16px;
    6767    background-image: url('images/icons/rftIcons16.png');
    6868}
    69 .gamelab .rftBlockButton.rftBlockButtonHover .rftIcon {
     69.claro .rftBlockButton.rftBlockButtonHover .rftIcon {
    7070    background-image: url('images/icons/rftIcons16black.png');
    7171}
    72 .gamelab .rftBlockButton.rftBlockButtonHover .dijitButtonNode {
     72.claro .rftBlockButton.rftBlockButtonHover .dijitButtonNode {
    7373    /*background: #999999 !important;*/
    7474    /* Currently not used, only applicable when all the different colours of BlockButton need the same background colour on hover */
    … …  
    7878    -o-transition: background-color 0.1s;
    7979}
    80 .gamelab .rftBlockButton.blue .dijitButtonNode {
     80.claro .rftBlockButton.blue .dijitButtonNode {
    8181    background: #0794d1;
    8282}
    83 .gamelab .rftBlockButton.blue.rftBlockButtonHover .dijitButtonNode {
     83.claro .rftBlockButton.blue.rftBlockButtonHover .dijitButtonNode {
    8484    background: #ffffff !important; /* This should be changed to an appropriate color once it is defined in the colour scheme! */
    8585    color: #0794d1;
    8686}
    87 .gamelab .rftBlockButton.red .dijitButtonNode {
     87.claro .rftBlockButton.red .dijitButtonNode {
    8888    background: #bd0013;
    8989}
    90 .gamelab .rftBlockButton.red.rftBlockButtonHover .dijitButtonNode {
     90.claro .rftBlockButton.red.rftBlockButtonHover .dijitButtonNode {
    9191    background: #ffffff !important; /* This should be changed to an appropriate color once it is defined in the colour scheme! */
    9292    color: #bd0013;
    9393}
    94 .gamelab .rftBlockButton.green .dijitButtonNode {
     94.claro .rftBlockButton.green .dijitButtonNode {
    9595    background: #79ca0a;
    9696}
    97 .gamelab .rftBlockButton.green.rftBlockButtonHover .dijitButtonNode {
     97.claro .rftBlockButton.green.rftBlockButtonHover .dijitButtonNode {
    9898    background: #ffffff !important; /* This should be changed to an appropriate color once it is defined in the colour scheme! */
    9999    color: #79ca0a;
    100100}
    101 .gamelab .rftBlockButton.orange .dijitButtonNode {
     101.claro .rftBlockButton.orange .dijitButtonNode {
    102102    background: #ff9140;
    103103}
    104 .gamelab .rftBlockButton.orange.rftBlockButtonHover .dijitButtonNode {
     104.claro .rftBlockButton.orange.rftBlockButtonHover .dijitButtonNode {
    105105    background: #ffffff !important; /* This should be changed to an appropriate color once it is defined in the colour scheme! */
    106106    color: #ff9140;
    107107}
    108 .gamelab .rftBlockButton.purple .dijitButtonNode {
     108.claro .rftBlockButton.purple .dijitButtonNode {
    109109    background: #993dec;
    110110}
    111 .gamelab .rftBlockButton.purple.rftBlockButtonHover .dijitButtonNode {
     111.claro .rftBlockButton.purple.rftBlockButtonHover .dijitButtonNode {
    112112    background: #ffffff !important; /* This should be changed to an appropriate color once it is defined in the colour scheme! */
    113113    color: #993dec;
    … …  
    116116
    117117/* InlineButton */
    118 .gamelab .rftInlineButton {
     118.claro .rftInlineButton {
     119    float: right;
    119120    height: 24px;
    120     margin: 0 -6px 0 -2px;
     121    width: 24px;
    121122}
    122 .gamelab .rftInlineButton .dijitButtonNode {
     123.claro .rftInlineButton .dijitButtonNode {
    123124    width: 24px;
    124125    height: 24px;
    … …  
    128129    border: none;
    129130}
    130 .gamelab .rftInlineButton .rftIcon {
     131.claro .rftInlineButton .rftIcon {
    131132    width: 16px;
    132133    height: 16px;
    133     margin: 0 4px 0 4px;
    134134    background-image: url('images/icons/rftIcons16.png');
    135135}
    136 .gamelab .rftInlineButton.white .rftIcon {
     136.claro .rftInlineButton.white .rftIcon {
    137137    background-image: url('images/icons/rftIcons16.png');
    138138}
    139 .gamelab .rftInlineButton.black .rftIcon {
     139.claro .rftInlineButton.black .rftIcon {
    140140    background-image: url('images/icons/rftIcons16black.png');
    141141}
    142 .gamelab .rftInlineButton.rftInlineButtonHover .dijitButtonNode {
    143     /* No changes so far */
    144     /*background-color: #ff00ff;*/
    145 }
    146 .gamelab .rftInlineButton.rftInlineButtonHover .rftIcon {
     142.claro .rftInlineButton.rftInlineButtonHover .rftIcon {
    147143    /* We should use either the displacement or the background image change, not both! */
    148144    /*background-image: url('../../icons/images/rftIcons16c.png');*/
    149     margin: 1px 4px -1px 4px;
     145    margin-top: 1px;
    150146}
    151 .gamelab .rftInlineButton.rftInlineButtonActive .rftIcon {
     147.claro .rftInlineButton.rftInlineButtonActive .rftIcon {
    152148    /* This "afterclick" is optional. Check to see if people like it or not! */
    153     margin: 2px 4px -2px 4px;
     149    /* Good, the displacement on click does not come from these settings! */
    154150}
    155151
    156152/* MainMenuButton */
    157 .gamelab .dijitMenuBar .rftMainMenuButton {
     153.claro .dijitMenuBar .rftMainMenuButton {
    158154    border: none;
    159155    height: 30px;
    … …  
    173169    -o-transition: all 0.3s;
    174170}
    175 .gamelab .dijitMenuBar .rftMainMenuButton.dijitMenuItemHover {
     171.claro .dijitMenuBar .rftMainMenuButton.dijitMenuItemHover {
    176172    color: #ffffff;
    177173    font-size: 26px;
    … …  
    181177    -o-transition: all 0.1s;
    182178}
    183 .gamelab .dijitMenuBar .rftMainMenuButton.dijitMenuItemActive {
     179.claro .dijitMenuBar .rftMainMenuButton.dijitMenuItemActive {
    184180    color: #0794d1 !important;
    185181    font-size: 26px;
    … …  
    189185    -o-transition: all 0.1s;
    190186}
    191 .gamelab .dijitMenuBar .rftMainMenuButton.dijitMenuItemSelected {
     187.claro .dijitMenuBar .rftMainMenuButton.dijitMenuItemSelected {
    192188    color: #ffffff;
    193189    font-size: 26px;

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

    r338 r339  
    1 .gamelab .rftSelector {
     1.claro .rftSelector {
    22    margin: 4px;
    33    font-size: 13px;
    44}
    5 .gamelab .rftLineWithButtons {
     5.claro .rftLineWithButtons {
    66    height: 24px;
    77    line-height: 24px;
    88    font-size: 13px;
    9     margin: 0;
     9    margin: 4px 0;
    1010    white-space: nowrap;
    1111}
    12 .gamelab .rftLineWithButtons .rftLineWithButtonsButtons {
     12.claro .rftSelector .rftLineWithButtons {
     13    margin: 0;
     14}
     15.claro .rftLineWithButtons .rftLineWithButtonsButtons {
    1316    float: right;
    1417    height: 24px;
    … …  
    1720    padding: 0;
    1821}
    19 .gamelab .rftLineWithButtons .rftLineWithButtonsButtons .rftBlockButton {
     22.claro .rftLineWithButtons .rftLineWithButtonsButtons .rftBlockButton {
    2023    float: right;
    2124    clear: none;
    2225}
    23 .gamelab .rftLineWithButtons .rftLineWithButtonsTitle {
     26.claro .rftLineWithButtons .rftLineWithButtonsTitle {
    2427    float: left;
    2528    margin: 0 8px 0 8px;
    2629}
    27 .gamelab .rftSelectorSelected .rftSelectorColor {
     30.claro .rftSelectorSelected .rftSelectorColor {
    2831    width: 8px;
    2932    height: 24px;
    … …  
    3235}
    3336
     37/* Own standard colour settings */
     38.claro .rftLineWithButtons.blue {
     39    background-color: #0072bc;
     40    color: #ffffff;
     41}
     42.claro .rftLineWithButtons.red {
     43    background-color: #8c0310;
     44    color: #ffffff;
     45}
     46.claro .rftLineWithButtons.green {
     47    background-color: #3aa605;
     48    color: #ffffff;
     49}
     50.claro .rftLineWithButtons.purple {
     51    background-color: #6529b7;
     52    color: #ffffff;
     53}
     54.claro .rftLineWithButtons.orange {
     55    background-color: #ff5b12;
     56    color: #ffffff;
     57}
     58
    3459/* Background colour settings for the various contexts of rftLineWithButtons */
    35 .gamelab .rftSelector .rftLineWithButtons {
     60.claro .rftSelector .rftLineWithButtons {
    3661    background-color: #ffffff;
    3762    color: #000000;
    3863}
    39 .gamelab .blue.rftSelector .rftLineWithButtons {
     64.claro .blue.rftSelector .rftLineWithButtons {
    4065    background-color: #0072bc;
    4166    color: #ffffff;
    4267}
    43 .gamelab .red.rftSelector .rftLineWithButtons {
     68.claro .red.rftSelector .rftLineWithButtons {
    4469    background-color: #8c0310;
    4570    color: #ffffff;
    4671}
    47 .gamelab .green.rftSelector .rftLineWithButtons {
     72.claro .green.rftSelector .rftLineWithButtons {
    4873    background-color: #3aa605;
    4974    color: #ffffff;
    5075}
    51 .gamelab .purple.rftSelector .rftLineWithButtons {
     76.claro .purple.rftSelector .rftLineWithButtons {
    5277    background-color: #6529b7;
    5378    color: #ffffff;
    5479}
    55 .gamelab .orange.rftSelector .rftLineWithButtons {
     80.claro .orange.rftSelector .rftLineWithButtons {
    5681    background-color: #ff5b12;
    5782    color: #ffffff;
    … …  
    5984
    6085/* Black-on-white setting for non-header lines in the rftSelector */
    61 .gamelab .rftSelector .rftSelectorSelected .rftLineWithButtons {
     86.claro .rftSelector .rftSelectorSelected .rftLineWithButtons {
    6287    background-color: #ffffff;
    6388    color: #000000;
    6489}
    65 .gamelab .rftSelector .rftSelectorOptions .rftLineWithButtons {
     90.claro .rftSelector .rftSelectorOptions .rftLineWithButtons {
    6691    background-color: #ffffff;
    6792    color: #000000;
    … …  
    6994
    7095/* Colour settings for the rftSelectorColor status indicator */
    71 .gamelab .rftSelectorSelected .rftSelectorColor.conflict {
     96.claro .rftSelectorSelected .rftSelectorColor.conflict {
    7297    background-color: #ff0000;
    7398}
    74 .gamelab .rftSelectorSelected .rftSelectorColor.pending {
     99.claro .rftSelectorSelected .rftSelectorColor.pending {
    75100    background-color: #ff8000;
    76101}
    77 .gamelab .rftSelectorSelected .rftSelectorColor.success {
     102.claro .rftSelectorSelected .rftSelectorColor.success {
    78103    background-color: #00ff00;
    79104}
    80 
    81 /*  NOT SURE WHAT THIS DOES ATM...KEEP HERE FOR FUTURE REFERENCE IF NON-SELECTOR LINES FAIL TO DISPLAY PROPERLY
    82 .gamelab .rftSelector .rftSelectorCategory .rftLineWithButtons {
    83     display: inline-block;
    84     width: 100% !important;
    85 }
    86 */

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

    r338 r339  
    22    'dijit/_WidgetBase','dijit/_TemplatedMixin','dijit/_WidgetsInTemplateMixin',
    33    'dojo/text!./templates/LineWithActionsWidget.html'
    4 ],
     4    ],
    55    function(declare,lang,on,dom,domClass,Button,_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin,templateString){
    66        return declare('rft.ui.LineWithActionsWidgetThijs',[_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin],{
    … …  
    88            baseClass: 'rftLineWithButtons',
    99            title: '',
    10             modifiers: "red",
     10            modifiers: "blue",
    1111            userObject: null,
    1212            actions: {},
    … …  
    2525                   
    2626                    if (this.actions[action].properties.blockButton == true) {  // BlockButton
    27                         var properties = lang.mixin(
    28                         {
     27                        var properties = lang.mixin({
    2928                            baseClass: 'rftBlockButton',
    3029                            modifiers: this.modifiers,
    … …  
    3837                        this.actions[action].properties);
    3938                        properties["class"] = properties.modifiers;
    40                        
    4139                        new Button(properties).placeAt(this.buttonsNode);
    4240                    } else {    //InlineButton
    43                         new Button(
    44                             lang.mixin({
    45                                 baseClass: 'rftInlineButton',
    46                                 "class": "black",
    47                                 showLabel: false,
    48                                 iconClass: 'rftIcon rftIcon'+action,
    49                                 title: action,
    50                                 onClick: lang.hitch(this, function(){
    51                                     this.actions[action].callback(this.userObject);
    52                                 })
    53                             }, this.actions[action].properties)).placeAt(this.buttonsNode);
     41                        var properties = lang.mixin({
     42                            baseClass: 'rftInlineButton',
     43                            modifiers: 'black',
     44                            showLabel: false,
     45                            iconClass: 'rftIcon rftIcon'+action,
     46                            title: action,
     47                            onClick: lang.hitch(this, function(){
     48                                this.actions[action].callback(this.userObject);
     49                            })
     50                        },
     51                        this.actions[action].properties);
     52                        properties["class"] = properties.modifiers;
     53                        new Button(properties).placeAt(this.buttonsNode);
    5454                    }
    5555                }
Note: See TracChangeset for help on using the changeset viewer.