source: Dev/branches/rest-dojo-ui/client/mockup.html @ 319

Last change on this file since 319 was 319, checked in by tjcschipper, 13 years ago
File size: 11.8 KB
Line 
1<!DOCTYPE html>
2<html>
3    <head>
4        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5        <title>Research Facilitator Tool</title>
6        <link rel="stylesheet" type="text/css" href="dojotoolkit/dijit/themes/gamelab/gamelab.css" />
7        <link rel="stylesheet" type="text/css" href="dojotoolkit/dojox/grid/resources/Grid.css" />
8        <link rel="stylesheet" type="text/css" href="dojotoolkit/dojox/grid/resources/claroGrid.css" />
9        <link rel="stylesheet" type="text/css" href="dojotoolkit/dojox/widget/Toaster/Toaster.css" />
10        <link rel="stylesheet" type="text/css" href="rft/css/main.css" />
11        <script type="text/javascript" src="dojotoolkit/dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: false, tlmSiblingOfDojo: false, isDebug: true, baseUrl: '', packagePaths: {'dojotoolkit':['dojo','dijit', 'dojox'], '.':['rft']}"></script>
12        <script type="text/javascript">
13            require([
14                'dojo/parser',
15                'dijit/DropDownMenu',
16                'dijit/layout/AccordionContainer',
17                'dijit/layout/BorderContainer',
18                'dijit/layout/ContentPane',
19                'dijit/layout/TabContainer',
20                'dijit/layout/SplitContainer',
21                'dijit/MenuBar',
22                'dijit/MenuBarItem',
23                'dijit/form/Button',
24                'dijit/form/ComboBox',
25                'dijit/form/Form',
26                'dijit/form/Select',
27                'dijit/form/SimpleTextarea',
28                'dijit/form/TextBox',
29                'dijit/form/Textarea',
30                'dijit/PopupMenuBarItem',
31                'dijit/TitlePane',
32                'dojox/grid/DataGrid',
33                'dojox/widget/TitleGroup',
34                'rft/ui/List',
35                'rft/ui/MainMenu',
36                'rft/ui/MenuBarLink',
37                'rft/ui/MenuLink',
38                'rft/ui/Notifications',
39                'rft/ui/LineWithActionsWidget',
40                'rft/ui/QuestionWidget',
41                'rft/ui/Selector',
42                'rft/ui/TitleGroup',
43                'dojo/domReady!'
44            ],function(parser){
45                parser.parse();
46            });
47        </script>
48        <!--
49        <style>
50            /* 
51             CLARO EXTEND STYLE for researchtool
52             Note: Possibly overwrites important claro properties, so instead of altering standard elements, try to add a new class for them.
53             This also has the effect of ensuring that the new rules will overwrite the rules specified in claro.css!
54            */
55
56            body, html {
57                font-family: 'Segoe UI', Verdana, sans-serif;
58                font-size: 13px;
59                background-color: #333333;
60            }
61
62            .claro .header {
63                background-color: #333;
64                height: 80px;
65            }
66
67            .claro .header .mainLogo {
68                float: left;
69                height: 54px;
70                font-size: 48px;
71                margin: 0 0 0 50px;
72            }
73
74            .claro .header .mainMenu {
75                margin: 10px 0 17px 500px;
76                font-size: 20px;
77                line-height: 30px;
78                width: 370px;
79                height: 30px;
80                float: left;
81            }
82
83            .claro .header .mainMenu.dijitMenuPassive .dijitMenuItem {
84                color: #999999;
85                font-size: 20px;
86                line-height: 30px;
87                margin: 0;
88                padding:0;
89            }
90           
91            .claro .header .mainMenu.dijitMenuPassive .dijitMenuItemSelected {
92                background: none;
93                background-color: transparent;
94                border: none;
95                margin: 0;
96                color: #ffffff;
97                font-size: 30px;
98            }
99           
100            .claro .header .mainMenu.dijitMenuPassive .dijitMenuItemHover {
101                background: none;
102                background-color: transparent;
103                border: none;
104                margin: 0;
105                color: #ffffff;
106            }
107           
108           
109           
110           
111           
112            .claro .header .dijitMenuBar {
113                border: none;
114                background: transparent;
115            }
116
117            .claro .header .breadcrumbs {
118                height: 14px;
119                text-align: center;
120                clear: both;
121                margin: 0;
122            }
123
124            .claro .header .breadcrumbs .breadcrumb {
125                padding: 3px 0;
126                font-size: 14px;
127                line-height: 16px;
128                color: #999999;
129            }
130           
131            .claro .header .breadcrumbs .breadcrumb:hover {
132                color: #ffffff;
133            }
134
135            .claro .header .breadcrumbs .breadcrumb.current {
136                font-size: 16px;
137                color: #ffffff;
138            }
139
140            .dijitTab {
141                width: 190px;
142                white-space: normal;
143            }
144
145            .claro .dijitContentPane.content {
146                background-color: #444444;
147            }
148
149
150
151
152
153
154
155
156
157
158            .rftLineWithButtons {
159                display: table;
160                width: 100%;
161                height: 24px;
162                background-color: #0072bc;
163                border: 1px gray solid;
164                margin: 2px;
165            }
166            .rftLineWithButtons.includedQuestion {
167                background-color: lightgreen;
168            }
169            .rftLineWithButtons.conflictedQuestion {
170                background-color: lightcoral;
171            }
172            .rftLineWithButtons.dijitSelected {
173                background-color: lightblue;
174            }
175            .rftLineWithButtonsTitle {
176                display: table-cell;
177                padding-left: 4px;
178            }
179            .rftLineWithButtonsButtons {
180                display: table-cell;
181                text-align: right;
182            }
183
184            /* Softbutton is the type of button/element that is 50% 'transparent' in idle state (#Disabled), and opaque (#White) on active/hover/select. Icon is always opaque */
185            .softButton {
186                color: #999999;
187            }
188
189            .softButton.softButtonOn {
190                color: #fff;
191            }
192
193        </style>
194        -->
195    </head>
196    <body class="dijitReset gamelab">
197        <div class="header">
198            <div class="mainLogo">Research Tool</div>
199
200            <div data-dojo-type="dijit.MenuBar" class="mainMenu">
201                <div data-dojo-type="dijit.MenuBarItem" >Sessions</div>
202                <div data-dojo-type="dijit.MenuBarItem" >Content</div>
203                <div data-dojo-type="dijit.MenuBarItem" >Results</div>
204                <div data-dojo-type="dijit.MenuBarItem" >Log out</div>
205            </div>
206            <div class="breadcrumbs">
207                <span class="breadcrumb">Home > </span>
208                <span class="breadcrumb">Sessions > </span>
209                <span class="breadcrumb">Session A > </span>
210                <span class="breadcrumb breadcrumbCurrent">Survey 123 [Editing]</span>
211            </div>
212        </div>
213        <div class="content" data-dojo-type="dijit.layout.ContentPane">
214            <div class="title">
215                <span class="titleIcon"><img style="width: 32px; height: 32px; background-color: #ff00ff;" /></span><h2 class="titleText">Survey 123 [Editing]</h2>
216            </div>
217            <div data-dojo-type="dijit.layout.BorderContainer" style="width: 100%; height: 500px;">
218                <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center'">
219                    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
220                        <span>Load preset</span>
221                        <select data-dojo-type="dijit.form.ComboBox">
222                            <option>Preset A</option>
223                            <option>Preset B</option>
224                        </select>
225                    </div>
226                    <div data-dojo-type="dijit.layout.TabContainer" data-dojo-props="region:'center',tabPosition:'left-h'">
227                        <div title="Emotional, moral and relational attitudes" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Emotional, moral and relational attitudes'"></div>
228                        <div title="The professional as a participant" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="selected:true">
229                            <div data-dojo-type="rft.ui.Selector" data-dojo-props="title:'Intrinsic motivation'"></div>
230                            <div data-dojo-type="rft.ui.Selector" data-dojo-props="title:'Extrinsic motivation'"></div>
231                            <div data-dojo-type="rft.ui.Selector" data-dojo-props="title:'Motivation to participate'"></div>
232                            <div data-dojo-type="rft.ui.Selector" data-dojo-props="title:'Experience with games'"></div>
233                            <div data-dojo-type="rft.ui.Selector" data-dojo-props="title:'Participant context'"></div>
234                        </div>
235                        <div title="Declarative, procedural and stragegic knowledge" data-dojo-type="dijit.layout.ContentPane"></div>
236                        <div title="Motoric, cognitive and social skills" data-dojo-type="dijit.layout.ContentPane"></div>
237                        <div title="Scientific, competitive and commercial acchievements" data-dojo-type="dijit.layout.ContentPane"></div>
238                    </div>
239                    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'">
240                        <div>Legend</div>
241                        <div>Selected question is included in survey.</div>
242                        <div>Selected question is not yet in survey. These van be included in the survey.</div>
243                        <div>Selected question conflicts with an included question. You can only swap these.</div>
244                    </div>
245                </div>
246                <div title="Included questions" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'right',splitter:true">
247                    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
248                        <span>Included questions</span>
249                        <div data-dojo-type="rft.ui.List">
250                            <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>
251                            <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>
252                            <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>
253                        </div>
254                    </div>
255                    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'">
256                        <button data-dojo-type="dijit.form.Button" data-dojo-props="iconClass:'dijitIconConfigure'">Properties</button>
257                        <button data-dojo-type="dijit.form.Button" data-dojo-props="iconClass:'dijitIconSample'">Preview</button>
258                        <button data-dojo-type="dijit.form.Button" data-dojo-props="iconClass:'dijitIconUndo'">Discard</button>
259                        <button data-dojo-type="dijit.form.Button" data-dojo-props="iconClass:'dijitIconSave'">Save</button>
260                    </div>
261                </div>
262            </div>
263        </div>
264    </body>
265</html>
Note: See TracBrowser for help on using the repository browser.