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

Last change on this file since 336 was 336, checked in by tjcschipper, 13 years ago
File size: 11.7 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/SelectorThijs',
43                'rft/ui/LineWithActionsWidgetThijs',
44                'rft/ui/TitleGroup',
45                'dojo/domReady!'
46            ],function(parser){
47                parser.parse();
48            });
49        </script>
50
51    </head>
52    <body class="dijitReset gamelab">
53        <div class="header">
54            <div class="mainLogo">Research Tool</div>
55
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'">
75                    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
76                        Presets
77                    </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>
82                        </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>
86                        </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
101                        </div>
102                    </div>
103                </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>
110            </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            -->
165        </div>
166    </body>
167</html>
Note: See TracBrowser for help on using the repository browser.