Ignore:
Timestamp:
06/20/12 19:07:01 (13 years ago)
Author:
tjcschipper
Message:
  • mSessions.html is more or less done
  • mMenu.html is nearly done, still needs non-hover overlays on the menu boxes/buttons
  • Fixed theme dependency, style overrides now work on a stock copy of Dojo claro theme!
  • Improved iconset alignment somewhat, still needs pixel tweaks to rftIcons24.png and rftIcons16.png (Icons are sometimes 1px too wide!)
  • Fixed MainMenu? template and applied styling classes. Replaced markup version with rft.ui.MainMenu? version in all mockups.
  • Fixed colour settings/context on LineWithButtons?
Location:
Dev/branches/rest-dojo-ui/client/rft
Files:
6 added
6 edited

Legend:

Unmodified
Added
Removed

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

    r342 r344  
    5353
    5454/* Topbar  */
    55 .topbar {
     55.claro .topbar {
    5656    overflow-y: hidden;
    5757}
    58 .topbar .dijitMenuBar {
     58.claro .topbar .dijitMenuBar {
     59    border: none;
     60    background-color: transparent;
     61    background-image: none;   
    5962    float: right;
    6063    clear: right;
    … …  
    172175.claro .dijitTab.dijitTabHover {
    173176    color: #ffffff;
     177    border-color: #ffffff;
    174178    transition: all 0.1s;
    175179    -moz-transition: all 0.1s;
    … …  
    183187    -webkit-transition: all 0.1s;
    184188    -o-transition: all 0.1s;
    185     /* The delay on clicking is wrong, needs to be quicker! */
    186189}
    187190.claro .dijitTab.dijitTabChecked {
    … …  
    225228    color: #3aa605;
    226229}
     230
     231
     232/* Index Menu */
     233.rftIndexMenuBlock {
     234    width: 400px;
     235    height: 400px;
     236    background: #444444;
     237    float: left;
     238    margin: 16px;
     239    padding: 0;
     240}
     241
     242.rftIndexMenuBlockMask {
     243    height: 400px;
     244    width: 400px;
     245    margin: 0 0 0 -400px;
     246    background: #ff00ff;
     247    color: #999999;
     248    visibility: visible;
     249    float: left;
     250}
     251.rftIndexMenuBlockMask:hover {
     252    visibility: hidden;
     253}

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

    r335 r344  
     1@import url('claroOverride.css');
     2
    13@import url('layout.css');
    24@import url('general.css');
    35
     6@import url('rftLineWithButtons.css');
    47@import url('rftButtons.css');
    58@import url('rftIcons.css');
    69@import url('rftSelector.css');
     10@import url('rftObjectBox.css');

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

    r342 r344  
    196196    font-size: 26px;
    197197}
     198
     199/* IndexMenuButton */
     200.claro .rftIndexMenuButton {
     201    display: block;
     202    margin: 0;
     203    padding: 0;
     204    line-height: 32px;
     205    vertical-align: middle;
     206    text-align: left;
     207    transition: all 0.3s;
     208    -moz-transition: all 0.3s;
     209    -webkit-transition: all 0.3s;
     210    -o-transition: all 0.3s;
     211}
     212.claro .rftIndexMenuButton .dijitButtonNode {
     213    border: none;
     214    color: #999999;
     215    font-size: 24px;
     216    font-weight: normal;
     217}
     218.claro .rftIndexMenuButton .rftIcon {
     219    height: 32px;
     220    width: 32px;
     221    margin: 0 8px;
     222    padding: 0;
     223    background-image: url('images/icons/rftIcons32.png');
     224}
     225.claro .oneHeight {
     226    height: 100px;
     227}
     228.claro .oneHeight .dijitButtonContents {
     229    margin: 34px 0 0 0;
     230}
     231.claro .twoHeight {
     232    height: 200px;
     233}
     234.claro .twoHeight .dijitButtonContents {
     235    margin: 82px 0 0 0;
     236}
     237.claro .fourHeight {
     238    height: 400px;
     239}
     240.claro .fourHeight .dijitButtonContents {
     241    margin: 184px 0 0 0;
     242}
     243.claro .rftIndexMenuButton.rftIndexMenuButtonHover,
     244.claro .rftIndexMenuButton.rftIndexMenuButtonHover .rftButtonText{
     245    transition: all 0.1s;
     246    -moz-transition: all 0.1s;
     247    -webkit-transition: all 0.1s;
     248    -o-transition: all 0.1s;
     249}
     250.claro .rftIndexMenuButton.rftIndexMenuButtonHover .dijitButtonText {
     251    color: #ffffff;
     252}
     253.claro .rftIndexMenuButton.rftIndexMenuButtonHover.blue {
     254    background: #0072bc;
     255}
     256.claro .rftIndexMenuButton.rftIndexMenuButtonHover.green {
     257    background: #3aa605;
     258}
     259.claro .rftIndexMenuButton.rftIndexMenuButtonHover.red {
     260    background: #8c0310;
     261}
     262.claro .rftIndexMenuButton.rftIndexMenuButtonHover.purple {
     263    background: #6529b7;
     264}
     265.claro .rftIndexMenuButton.rftIndexMenuButtonHover.orange {
     266    background: #ff5b12;
     267}

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

    r342 r344  
    145145    background-position: -1248px 0px;
    146146}
     147
     148
     149/* TODO: rftIcons24.png and rftIcons16.png have icons that are 1px too wide!
     150 * Fix this in the .psd and re-export!
     151 */

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

    r342 r344  
    33    font-size: 13px;
    44}
    5 .claro .rftLineWithButtons {
    6     height: 24px;
    7     line-height: 24px;
    8     font-size: 13px;
    9     margin: 4px 0;
    10     white-space: nowrap;
    11 }
    125.claro .rftSelector .rftLineWithButtons {
    136    margin: 0;
    14 }
    15 .claro .rftLineWithButtons .rftLineWithButtonsButtons {
    16     float: right;
    17     height: 24px;
    18     line-height: 24px;
    19     margin: 0;
    20     padding: 0;
    21 }
    22 .claro .rftLineWithButtons .rftLineWithButtonsButtons .rftBlockButton {
    23     float: right;
    24     clear: none;
    25 }
    26 .claro .rftLineWithButtons .rftLineWithButtonsTitle {
    27     float: left;
    28     margin: 0 8px 0 8px;
    297}
    308.claro .rftSelectorSelected .rftSelectorColor {
    … …  
    3513}
    3614
    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 .claro .rftLineWithButtons.trans {
    59     background-color: transparent;
    60     color: #ffffff;
    61 }
    62 
    63 /* Background colour settings for the various contexts of rftLineWithButtons */
     15/* Set default LWB colour to white. */
    6416.claro .rftSelector .rftLineWithButtons {
    6517    background-color: #ffffff;
    6618    color: #000000;
    67 }
    68 .claro .blue.rftSelector .rftLineWithButtons {
    69     background-color: #0072bc;
    70     color: #ffffff;
    71 }
    72 .claro .red.rftSelector .rftLineWithButtons {
    73     background-color: #8c0310;
    74     color: #ffffff;
    75 }
    76 .claro .green.rftSelector .rftLineWithButtons {
    77     background-color: #3aa605;
    78     color: #ffffff;
    79 }
    80 .claro .purple.rftSelector .rftLineWithButtons {
    81     background-color: #6529b7;
    82     color: #ffffff;
    83 }
    84 .claro .orange.rftSelector .rftLineWithButtons {
    85     background-color: #ff5b12;
    86     color: #ffffff;
    8719}
    8820
    … …  
    10739    background-color: #00ff00;
    10840}
    109 
    110 /* rftSessionBar */
    111 .claro .rftSessionBar {
    112     margin: 8px 0;
    113 }
    114 .claro .rftSessionBar .rftIcon.typeIcon {
    115     background-image: url('images/icons/rftIcons32.png');
    116     height: 32px;
    117     width: 32px;
    118     margin: 20px 8px;
    119     float: left;
    120 }
    121 .claro .rftSessionBar .rftLineWithButtons {
    122     margin: 0;
    123     padding: 0;
    124 }

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

    r311 r344  
    11<div class="mainMenu">
    22    <div  data-dojo-type="dijit.MenuBar">
    3         <div data-dojo-type="dijit.MenuBarItem" data-dojo-props="disabled: true">Research Facilitator Tool</div>
    4         <div data-dojo-type="rft.ui.MenuBarLink" data-dojo-props="pageId:'sessions'">Sessions</div>
    5         <div data-dojo-type="dijit.PopupMenuBarItem">
     3        <div class="rftMainMenuButton" data-dojo-type="rft.ui.MenuBarLink" data-dojo-props="pageId:'sessions'">Sessions</div>
     4        <div class="rftMainMenuButton" data-dojo-type="dijit.PopupMenuBarItem">
    65            <span>Content</span>
    76            <div data-dojo-type="dijit.DropDownMenu">
    … …  
    1211            </div>
    1312        </div>
    14         <div data-dojo-type="rft.ui.MenuBarLink" data-dojo-props="pageId:'results'">Results</div>
    15         <div data-dojo-type="dijit.MenuBarItem" id="loginMenu" style="float:right;">Login/Register</div>
     13        <div class="rftMainMenuButton" data-dojo-type="rft.ui.MenuBarLink" data-dojo-props="pageId:'results'">Results</div>
     14        <div class="rftMainMenuButton" data-dojo-type="rft.ui.MenuBarLink" id="loginMenu">Logout</div>
    1615    </div>
    1716</div>
Note: See TracChangeset for help on using the changeset viewer.