Ignore:
Timestamp:
05/31/12 17:03:19 (13 years ago)
Author:
tjcschipper
Message:
 
File:
1 edited

Legend:

Unmodified
Added
Removed

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

    r336 r337  
    5151    </head>
    5252    <body class="dijitReset gamelab">
    53         <div class="header">
    54             <div class="mainLogo">Research Tool</div>
     53        <div class="page" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
     54            <div class="topbar" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
     55                <h1>ResearchTool</h1>
     56                <!-- And now the menu! -->
     57                <div data-dojo-type="dijit.MenuBar">
     58                    <div data-dojo-type="dijit.MenuBarItem" class="rftMainMenuButton">Sessions</div>
     59                    <div data-dojo-type="dijit.MenuBarItem" class="rftMainMenuButton">Content</div>
     60                    <div data-dojo-type="dijit.MenuBarItem" class="rftMainMenuButton">Results</div>
     61                    <div data-dojo-type="dijit.MenuBarItem" class="rftMainMenuButton">Log out</div>
     62                </div>
     63                <div class="breadcrumbs">
     64                    <span class="breadcrumb">User > </span>
     65                    <span class="breadcrumb">Session > </span>
     66                    <span class="breadcrumbCurrent">Survey A [editing]</span>
     67                </div>
     68            </div>
    5569
    56             <div data-dojo-type="dijit.MenuBar" class="mainMenu">
    57                 <div data-dojo-type="dijit.MenuBarItem" >Sessions</div>
    58                 <div data-dojo-type="dijit.MenuBarItem" >Content</div>
    59                 <div data-dojo-type="dijit.MenuBarItem" >Results</div>
    60                 <div data-dojo-type="dijit.MenuBarItem" >Log out</div>
    61             </div>
    62             <div class="breadcrumbs">
    63                 <span class="breadcrumb">Home > </span>
    64                 <span class="breadcrumb">Sessions > </span>
    65                 <span class="breadcrumb">Session A > </span>
    66                 <span class="breadcrumb breadcrumbCurrent">Survey 123 [Editing]</span>
    67             </div>
    68         </div>  <!-- HEADER -->
    69         <div class="content" data-dojo-type="dijit.layout.ContentPane">
    70             <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center'" style="height: 500px;">
    71                 <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
    72                     Title and icon
    73                 </div>
    74                 <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center'">
     70            <div class="content" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
     71                <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center'" style="height: 500px;">
    7572                    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
    76                         Presets
     73                        <h2>
     74                            <span class="rftIcon rftIconSurvey"></span>
     75                            <span class="headerText">Survey A [editing]</span>
     76                        </h2>
    7777                    </div>
    78                     <div data-dojo-type="dijit.layout.TabContainer" data-dojo-props="tabPosition:'left-h',region:'center'">
    79                         <div data-dojo-type="dijit.layout.ContentPane" title="Category One">
    80                             <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat one', color: 'blue'"></div>
    81                             <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat two', color: 'blue'"></div>
     78                    <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center'">
     79                        <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
     80                            Presets
    8281                        </div>
    83                         <div data-dojo-type="dijit.layout.ContentPane" title="Category Two">
    84                             <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat one', color: 'orange'"></div>
    85                             <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat two', color: 'orange'"></div>
     82                        <div data-dojo-type="dijit.layout.TabContainer" data-dojo-props="tabPosition:'left-h',region:'center'">
     83                            <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>
     86                            </div>
     87                            <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>
     90                            </div>
     91                            <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>
     93                            </div>
     94                            <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>
     98                            </div>
     99                            <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>
     104
     105                                <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass:'rftIcon rftIconAccept'">Properties</button>
     106                                <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass:'rftIcon rftIconPreview'">Preview</button>
     107                                <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass:'rftIcon rftIconCancel'">Discard</button>
     108                                <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass:'rftIcon rftIconAccept'">Accept changes</button>
     109                            </div>
    86110                        </div>
    87                         <div data-dojo-type="dijit.layout.ContentPane" title="Category Three">
    88                             <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat one', color: 'green'"></div>
    89                         </div>
    90                         <div data-dojo-type="dijit.layout.ContentPane" title="Category Four">
    91                             <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat one', color: 'red'"></div>
    92                             <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat two', color: 'red'"></div>
    93                             <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat three', color: 'red'"></div>
    94                         </div>
    95                         <div data-dojo-type="dijit.layout.ContentPane" title="Category Five">
    96                             <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat one', color: 'purple'"></div>
    97                             <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat two', color: 'purple'"></div>
    98                             <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat three', color: 'purple'"></div>
    99                             <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat four', color: 'purple'"></div>
    100 
     111                    </div>
     112                    <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'right'" style="width: 300px">
     113                        <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>
    101116                        </div>
    102117                    </div>
    103118                </div>
    104                 <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'right'" style="width: 300px">
    105                     <div data-dojo-type="rft.ui.List" data-dojo-props="region:'center'">
    106                         <div data-dojo-type="rft.ui.LineWithActionsWidgetThijs" data-dojo-props="title:'Question one', actions: {'Cancel':{callback: function(){}, properties: {blockButton: false, class:'black'}}}"></div>
    107                         <div data-dojo-type="rft.ui.LineWithActionsWidgetThijs" data-dojo-props="title:'Question two', actions: {'Cancel':{callback: function(){}, properties: {blockButton: false, class:'black'}}}"></div>
    108                     </div>
    109                 </div>
    110119            </div>
    111 
    112             <!--
    113             <div class="title">
    114                 <div class="rftIcon rftMainIcon rftMainIconSurvey"></div><h2 class="titleText">Survey 123 [Editing]</h2>
    115             </div>
    116             <div data-dojo-type="dijit.layout.BorderContainer" style="height: 500px;">
    117                 <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center'">
    118                     <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
    119                         <span>Load preset</span>
    120                         <select data-dojo-type="dijit.form.ComboBox">
    121                             <option>Preset A</option>
    122                             <option>Preset B</option>
    123                         </select>
    124                     </div>
    125                     <div data-dojo-type="dijit.layout.TabContainer" data-dojo-props="region:'center',tabPosition:'left-h'">
    126                         <div title="Emotional, moral and relational attitudes" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Emotional, moral and relational attitudes'"></div>
    127                         <div title="The professional as a participant" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="selected:true">
    128                             <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="title:'Intrinsic motivation', color: 'blue'"></div>
    129                             <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="title:'Extrinsic motivation', color: 'blue'"></div>
    130                             <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="title:'Motivation to participate', color: 'blue'"></div>
    131                             <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="title:'Experience with games', color: 'blue'"></div>
    132                             <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="title:'Participant context', color: 'blue'"></div>
    133                         </div>
    134                         <div title="Declarative, procedural and stragegic knowledge" data-dojo-type="dijit.layout.ContentPane"></div>
    135                         <div title="Motoric, cognitive and social skills" data-dojo-type="dijit.layout.ContentPane"></div>
    136                         <div title="Scientific, competitive and commercial acchievements" data-dojo-type="dijit.layout.ContentPane"></div>
    137                     </div>
    138                     <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'">
    139                         <div>Legend</div>
    140                         <div>Selected question is included in survey.</div>
    141                         <div>Selected question is not yet in survey. These van be included in the survey.</div>
    142                         <div>Selected question conflicts with an included question. You can only swap these.</div>
    143                        
    144 
    145                     </div>
    146                 </div>
    147                 <div title="Included questions" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'right',splitter:true">
    148                     <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
    149                         <span>Included questions</span>
    150                         <div data-dojo-type="rft.ui.List">
    151                             <div class="includedQuestion" data-dojo-type="rft.ui.LineWithActionsWidget" data-dojo-props="title:'Why are you participating in this session?',actions:{'+':function(){ alert('Bah!'); }},onClick:function(evt){ alert('Buh!'); return false; }"></div>
    152                             <div class="conflictedQuestion" data-dojo-type="rft.ui.LineWithActionsWidget" data-dojo-props="title:'Is this a long-term goal or immediate?',actions:{'+':function(){ alert('Bah!'); }},onClick:function(evt){ alert('Buh!'); return false; }"></div>
    153                             <div class="includedQuestion" data-dojo-type="rft.ui.LineWithActionsWidget" data-dojo-props="title:'Have you played &quot;serious games&quot; before?',actions:{'+':function(){ alert('Bah!'); }},onClick:function(evt){ alert('Buh!'); return false; }"></div>
    154                         </div>
    155                     </div>
    156                     <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'">
    157                         <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass:'rftIcon rftIconSettings'">Properties</button>
    158                         <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass:'rftIcon rftIconPreview'">Preview</button>
    159                         <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass:'rftIcon rftIconCancel'">Discard</button>
    160                         <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass:'rftIcon rftIconAccept'">Accept changes</button>
    161                     </div>
    162                 </div>
    163             </div>
    164             -->
    165120        </div>
    166121    </body>
Note: See TracChangeset for help on using the changeset viewer.