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

Last change on this file since 316 was 316, checked in by hendrikvanantwerpen, 13 years ago

Mockup included.
File size: 8.3 KB
RevLine 
[256]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>
[311]6        <link rel="stylesheet" type="text/css" href="dojotoolkit/dijit/themes/claro/claro.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" />
[281]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>
[316]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        <style>
49            .dijitTab {
50                width: 120px;
51                white-space: normal;
52            }
53
54            .rftLineWithButtons {
55                display: table;
56                width: 100%;
57                border: 1px gray solid;
58                margin: 2px;
59            }
60            .rftLineWithButtons.includedQuestion {
61                background-color: lightgreen;
62            }
63            .rftLineWithButtons.conflictedQuestion {
64                background-color: lightcoral;
65            }
66            .rftLineWithButtons.dijitSelected {
67                background-color: lightblue;
68            }
69            .rftLineWithButtonsTitle {
70                display: table-cell;
71                padding-left: 4px;
72            }
73            .rftLineWithButtonsButtons {
74                display: table-cell;
75                text-align: right;
76            }
77        </style>
[256]78    </head>
[316]79    <body class="dijitReset claro">
80        <div class="header">
81            <div data-dojo-type="dijit.MenuBar">
82                <div data-dojo-type="dijit.MenuBarItem">Research tool</div>
83                <div data-dojo-type="dijit.MenuBarItem">Sessions</div>
84                <div data-dojo-type="dijit.MenuBarItem">Content</div>
85                <div data-dojo-type="dijit.MenuBarItem">Results</div>
86                <div data-dojo-type="dijit.MenuBarItem">Log out</div>
[256]87            </div>
[316]88            <div class="breadcrumbs">Home > Sessions > Session A > Survey 123 [Editing]</div>
[256]89        </div>
[316]90        <div class="content" data-dojo-type="dijit.layout.ContentPane">
91            <div class="title">
92                <span class="titleIcon"></span><span class="titleText">Survey 123 [Editing]</span>
93            </div>
94            <div data-dojo-type="dijit.layout.BorderContainer" style="width: 100%; height: 500px;">
95                <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center'">
96                    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
97                        <span>Load preset</span>
98                        <select data-dojo-type="dijit.form.ComboBox">
99                            <option>Preset A</option>
100                            <option>Preset B</option>
101                        </select>
102                    </div>
103                    <div data-dojo-type="dijit.layout.TabContainer" data-dojo-props="region:'center',tabPosition:'left-h'">
104                        <div title="Emotional, moral and relational attitudes" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Emotional, moral and relational attitudes'"></div>
105                        <div title="The professional as a participant" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="selected:true">
106                            <div data-dojo-type="rft.ui.Selector" data-dojo-props="title:'Intrinsic motivation'"></div>
107                            <div data-dojo-type="rft.ui.Selector" data-dojo-props="title:'Extrinsic motivation'"></div>
108                            <div data-dojo-type="rft.ui.Selector" data-dojo-props="title:'Motivation to participate'"></div>
109                            <div data-dojo-type="rft.ui.Selector" data-dojo-props="title:'Experience with games'"></div>
110                            <div data-dojo-type="rft.ui.Selector" data-dojo-props="title:'Participant context'"></div>
111                        </div>
112                        <div title="Declarative, procedural and stragegic knowledge" data-dojo-type="dijit.layout.ContentPane"></div>
113                        <div title="Motoric, cognitive and social skills" data-dojo-type="dijit.layout.ContentPane"></div>
114                        <div title="Scientific, competitive and commercial acchievements" data-dojo-type="dijit.layout.ContentPane"></div>
115                    </div>
116                    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'">
117                        <div>Legend</div>
118                        <div>Selected question is included in survey.</div>
119                        <div>Selected question is not yet in survey. These van be included in the survey.</div>
120                        <div>Selected question conflicts with an included question. You can only swap these.</div>
121                    </div>
122                </div>
123                <div title="Included questions" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'right',splitter:true">
124                    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
125                        <span>Included questions</span>
126                        <div data-dojo-type="rft.ui.List">
127                            <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>
128                            <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>
129                            <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>
130                        </div>
131                    </div>
132                    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'">
133                        <button data-dojo-type="dijit.form.Button" data-dojo-props="iconClass:'dijitIconConfigure'">Properties</button>
134                        <button data-dojo-type="dijit.form.Button" data-dojo-props="iconClass:'dijitIconSample'">Preview</button>
135                        <button data-dojo-type="dijit.form.Button" data-dojo-props="iconClass:'dijitIconUndo'">Discard</button>
136                        <button data-dojo-type="dijit.form.Button" data-dojo-props="iconClass:'dijitIconSave'">Save</button>
137                    </div>
138                </div>
139            </div>
[256]140        </div>
141    </body>
142</html>
Note: See TracBrowser for help on using the repository browser.