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
Files:
7 added
8 edited

Legend:

Unmodified
Added
Removed

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

    r342 r344  
    44        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    55        <title>Research Facilitator Tool</title>
    6         <link rel="stylesheet" type="text/css" href="dojotoolkit/dijit/themes/gamelab/gamelab.css" />
     6        <link rel="stylesheet" type="text/css" href="dojotoolkit/dijit/themes/claro/claro.css" />
    77        <link rel="stylesheet" type="text/css" href="dojotoolkit/dojox/grid/resources/Grid.css" />
    88        <link rel="stylesheet" type="text/css" href="dojotoolkit/dojox/grid/resources/claroGrid.css" />
    … …  
    4343                'rft/ui/SelectorThijs',
    4444                'rft/ui/LineWithActionsWidgetThijs',
     45                'rft/ui/ObjectBox',
    4546                'rft/ui/TitleGroup',
    4647                'dojo/domReady!'
    … …  
    5152        <script>
    5253            function createNew(){
    53                 /* There is no way this should be handled as such. Create an rftSessionBar templated widget for this! */
    54                
    55                 require([
    56                     'dojo/_base/array',
    57                     'dojo/query',
    58                     'dojo/dom-construct'
    59                 ], function(array, query, domConstruct){
    60                     var props1 = {
    61                         title: 'Session name',
    62                         modifiers: 'purple',
    63                         actions: {
    64                             "Inspect": {
    65                                 callback: function(){alert("Info display!");},
    66                                 properties: {
    67                                     modifiers: 'trans',
    68                                     blockButton: false
    69                                 }
    70                             }
    71                         }
    72                     };
    73                     var props2 = {
    74                         modifiers: 'purple',
    75                         title: 'Creator and creation date'
    76                     };
    77                     var props3 = {
    78                         modifiers: 'purple',
    79                         actions: {
    80                             "FullArrowUp": {
    81                                 callback: function(){alert("Moving up...");},
    82                                 properties: {
    83                                     modifiers: 'trans',
    84                                     blockButton: true}
    85                             },
    86                             "FullArrowDown": {
    87                                 callback: function(){alert("Moving down...");},
    88                                 properties: {
    89                                     blockButton: true,
    90                                     modifiers: 'trans'
    91                                 }
    92                             }
    93                         }
    94                     };
    95                     // Tab container div
    96                     var container = array.filter(query(".dijitContentPane"), function(item){
    97                         return item.id.toLowerCase() == "mainOne".toLowerCase();
    98                     })[0];
    99                     // rftSessionBar root node
    100                     var root = domConstruct.create("div", {
    101                         className: "rftSessionBar"
    102                     }, container);
    103                     // Icon
    104                     domConstruct.create("div", {
    105                         className: "rftIcon typeIcon rftIconSession"
    106                     }, root);
    107                     var line1 = new rft.ui.LineWithActionsWidgetThijs(props1).placeAt(root);
    108                     var line2 = new rft.ui.LineWithActionsWidgetThijs(props2).placeAt(root);
    109                     var line3 = new rft.ui.LineWithActionsWidgetThijs(props3).placeAt(root);
    110                     line1.startup();
    111                     line2.startup();
    112                     line3.startup();
    113                    
     54                debugger;
     55                var newBox = new rft.ui.ObjectBox({
     56                    title: 'TeamUp Basic Template',
     57                    subTitle: '',
     58                    lowerTitle: '',
     59                    objectType: 'SessionTemplate',
     60                    actions: {
     61                        "edit": function() {},
     62                        "delete": function() {}
     63                    }
    11464                });
     65                newBox.startup();
     66                newBox.placeAt("containerTemplates", "last");
     67            }
     68           
     69            function createInstance(args) {
     70            // Create a template instance in the "Sessions" tab
     71            debugger;
     72            var args;
     73            args.objectType = "Session";
     74            var d = new Date();
     75            var dateString = d.getDate()+"-"+d.getMonth()+"-"+d.getFullYear();
     76            var creator = "Igor Mayer"; // Use currently logged in profile instead!
     77            args.subTitle = "Created on "+dateString+" by "+creator;
     78           
     79            args.actions = {
     80                        "edit": function() {},
     81                        "delete": function() {}
     82                    }
     83            var newBox = new rft.ui.ObjectBox(args);
     84            newBox.startup();
     85            newBox.placeAt("containerSessions", "last");
     86            // TODO: Then switch tabs to the Sessions tab!
    11587            }
    11688           
    … …  
    12597            <div class="topbar" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
    12698                <h1>ResearchTool</h1>
    127                 <div data-dojo-type="dijit.MenuBar">
    128                     <div data-dojo-type="dijit.MenuBarItem" class="rftMainMenuButton">Sessions</div>
    129                     <div data-dojo-type="dijit.MenuBarItem" class="rftMainMenuButton">Content</div>
    130                     <div data-dojo-type="dijit.MenuBarItem" class="rftMainMenuButton">Results</div>
    131                     <div data-dojo-type="dijit.MenuBarItem" class="rftMainMenuButton">Log out</div>
    132                 </div>
     99                <div data-dojo-type="rft.ui.MainMenu"></div>
    133100                <div class="breadcrumbs">
    134101                    <span class="breadcrumb">User > </span>
    … …  
    147114                    <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center'">
    148115                        <div data-dojo-type="dijit.layout.TabContainer" class="green" data-dojo-props="tabPosition:'left-h',region:'center'">
    149                             <div data-dojo-type="dijit.layout.ContentPane" title="Templates" id="mainOne">
    150 
    151                                 <div class="rftSessionBar">
    152                                     <div class="rftIcon typeIcon rftIconSession"></div>
    153                                     <div style="font-weight: bold;" data-dojo-type="rft.ui.LineWithActionsWidgetThijs" title="Teamup 25-5-2012" data-dojo-props="modifiers: 'green', actions: {'Inspect':{callback: function(){}, properties: {blockButton: false, modifiers: 'white', showLabel: false}}}"></div>
    154                                     <div data-dojo-type="rft.ui.LineWithActionsWidgetThijs" title="Created by Arne Bezuijen on 25-01-2012 15:19" data-dojo-props="modifiers: 'green', actions: {}"></div>
    155                                     <div data-dojo-type="rft.ui.LineWithActionsWidgetThijs" title="" data-dojo-props="modifiers: 'green', actions: {'FullArrowUp':{callback: function(){}, properties: {blockButton: true, modifiers: 'trans', label: 'Publish'}}, 'Cancel':{callback: function(){}, properties: {blockButton: true, modifiers: 'trans', label: 'Delete'}},'Accept':{callback: function(){this.set('title','NEW TITLE YO');}, properties: {blockButton: true, modifiers: 'trans', label:'Edit/View'}}}"></div>
     116                            <div data-dojo-type="dijit.layout.BorderContainer" title="Templates">
     117                                <div id="containerTemplates" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'center'">
     118                                    <div data-dojo-type="rft.ui.ObjectBox" data-dojo-props="actions: {'edit': function(){alert('Custom edit code');}, 'New Command': function(){alert('newCommand');}, 'publish': createInstance}"></div>
    156119                                </div>
    157 
    158                                 <div data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconSession', onClick: createNew">Create new session</div>
    159 
     120                                <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'bottom'" style="height: 40px;">
     121                                    <div data-dojo-type="dijit.form.Button" data-dojo-props="region: 'bottom', baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconSession', onClick: createNew">Create new session</div>
     122                                </div>
    160123                            </div>
    161124                            <div data-dojo-type="dijit.layout.ContentPane" title="Sessions">
    162 
     125                                <div id="containerSessions" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'center'">
     126                                   
     127                                </div>
     128                                <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'bottom'" style="height: 40px;">
     129                                    <!-- Buttons? -->
     130                                </div>
    163131                            </div>
    164132                        </div>

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

    r342 r344  
    44        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    55        <title>Research Facilitator Tool</title>
    6         <link rel="stylesheet" type="text/css" href="dojotoolkit/dijit/themes/gamelab/gamelab.css" />
     6        <link rel="stylesheet" type="text/css" href="dojotoolkit/dijit/themes/claro/claro.css" />
    77        <link rel="stylesheet" type="text/css" href="dojotoolkit/dojox/grid/resources/Grid.css" />
    88        <link rel="stylesheet" type="text/css" href="dojotoolkit/dojox/grid/resources/claroGrid.css" />
    … …  
    5454            <div class="topbar" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
    5555                <h1>ResearchTool</h1>
    56                 <div data-dojo-type="dijit.MenuBar">
    57                     <div data-dojo-type="dijit.MenuBarItem" class="rftMainMenuButton">Sessions</div>
    58                     <div data-dojo-type="dijit.MenuBarItem" class="rftMainMenuButton">Content</div>
    59                     <div data-dojo-type="dijit.MenuBarItem" class="rftMainMenuButton">Results</div>
    60                     <div data-dojo-type="dijit.MenuBarItem" class="rftMainMenuButton">Log out</div>
    61                 </div>
     56                <div data-dojo-type="rft.ui.MainMenu"></div>
    6257                <div class="breadcrumbs">
    6358                    <span class="breadcrumb">User > </span>
    … …  
    10297                                <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat four'"></div>
    10398
    104                                 <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass:'rftIcon rftIconAccept'">Properties</button>
     99                                <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass:'rftIcon rftIconSettings'">Properties</button>
    105100                                <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass:'rftIcon rftIconPreview'">Preview</button>
    106                                 <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass:'rftIcon rftIconCancel'">Discard</button>
     101                                <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass:'rftIcon rftIconCancel'">Cancel</button>
    107102                                <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass:'rftIcon rftIconAccept'">Accept changes</button>
    108103                            </div>
    … …  
    116111                        <div data-dojo-type="rft.ui.List" data-dojo-props="region:'center'">
    117112                            <!-- These would have to be dynamically generated instead of declared here! -->
    118                             <div data-dojo-type="rft.ui.LineWithActionsWidgetThijs" data-dojo-props="title:'Question one', actions: {'Cancel':{callback: function(){}, properties: {blockButton: false, modifiers:'white'}}}"></div>
    119                             <div data-dojo-type="rft.ui.LineWithActionsWidgetThijs" data-dojo-props="title:'Question two', actions: {'Cancel':{callback: function(){}, properties: {blockButton: false, modifiers:'white'}}}"></div>
     113                            <div data-dojo-type="rft.ui.LineWithActionsWidgetThijs" data-dojo-props="title:'Question one', actions: {'Cancel':{callback: function(){}, properties: {blockButton: false, icon: 'Delete', modifiers:'white'}}}"></div>
     114                            <div data-dojo-type="rft.ui.LineWithActionsWidgetThijs" data-dojo-props="title:'Question two', actions: {'Cancel':{callback: function(){}, properties: {blockButton: false, icon: 'Delete', modifiers:'white'}}}"></div>
    120115                        </div>
    121116                    </div>

  • 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.