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

Last change on this file since 333 was 333, checked in by tjcschipper, 13 years ago
  • Added rft.ui.InlineButton?, which is another preset like LargeButton? and BlockButton?. This time icon only and no label, made to fit into rftLineWithActions widgets. highlightColor: White/Black? allows for two different versions depending on icon background.
  • Make copies of rft/ui/LineWithActionsWidget and rft/ui/Selector, with -Thijs appended to the classnames. These are an attempt at integrating the newly created buttons in their intended contexts. The original classes and templates are untouched.
  • Changed LargeButton? and BlockButton? to be less hardcoded and just better.
File size: 8.9 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                'rft/ui/LargeButton',
46                'rft/ui/BlockButton',
47                'rft/ui/InlineButton',
48                'dojo/domReady!'
49            ],function(parser){
50                parser.parse();
51            });
52        </script>
53
54    </head>
55    <body class="dijitReset gamelab">
56        <div class="header">
57            <div class="mainLogo">Research Tool</div>
58
59            <div data-dojo-type="dijit.MenuBar" class="mainMenu">
60                <div data-dojo-type="dijit.MenuBarItem" >Sessions</div>
61                <div data-dojo-type="dijit.MenuBarItem" >Content</div>
62                <div data-dojo-type="dijit.MenuBarItem" >Results</div>
63                <div data-dojo-type="dijit.MenuBarItem" >Log out</div>
64            </div>
65            <div class="breadcrumbs">
66                <span class="breadcrumb">Home > </span>
67                <span class="breadcrumb">Sessions > </span>
68                <span class="breadcrumb">Session A > </span>
69                <span class="breadcrumb breadcrumbCurrent">Survey 123 [Editing]</span>
70            </div>
71        </div>
72        <div class="content" data-dojo-type="dijit.layout.ContentPane">
73            <div class="title">
74                <div class="rftIcon rftMainIcon rftMainIconSurvey"></div><h2 class="titleText">Survey 123 [Editing]</h2>
75            </div>
76            <div data-dojo-type="dijit.layout.BorderContainer" style="height: 500px;">
77                <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center'">
78                    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
79                        <span>Load preset</span>
80                        <select data-dojo-type="dijit.form.ComboBox">
81                            <option>Preset A</option>
82                            <option>Preset B</option>
83                        </select>
84                    </div>
85                    <div data-dojo-type="dijit.layout.TabContainer" data-dojo-props="region:'center',tabPosition:'left-h'">
86                        <div title="Emotional, moral and relational attitudes" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Emotional, moral and relational attitudes'"></div>
87                        <div title="The professional as a participant" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="selected:true">
88                            <div data-dojo-type="rft.ui.SelectorThijs" class="survey" data-dojo-props="title:'Intrinsic motivation'"></div>
89                            <div data-dojo-type="rft.ui.SelectorThijs" class="survey" data-dojo-props="title:'Extrinsic motivation'"></div>
90                            <div data-dojo-type="rft.ui.SelectorThijs" class="survey" data-dojo-props="title:'Motivation to participate'"></div>
91                            <div data-dojo-type="rft.ui.SelectorThijs" class="survey" data-dojo-props="title:'Experience with games'"></div>
92                            <div data-dojo-type="rft.ui.SelectorThijs" class="survey" data-dojo-props="title:'Participant context'"></div>
93                        </div>
94                        <div title="Declarative, procedural and stragegic knowledge" data-dojo-type="dijit.layout.ContentPane"></div>
95                        <div title="Motoric, cognitive and social skills" data-dojo-type="dijit.layout.ContentPane"></div>
96                        <div title="Scientific, competitive and commercial acchievements" data-dojo-type="dijit.layout.ContentPane"></div>
97                    </div>
98                    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'">
99                        <div>Legend</div>
100                        <div>Selected question is included in survey.</div>
101                        <div>Selected question is not yet in survey. These van be included in the survey.</div>
102                        <div>Selected question conflicts with an included question. You can only swap these.</div>
103                       
104                        <button data-dojo-type="rft.ui.LargeButton" data-dojo-props="iconType: 'Save'">Save</button>
105                        <button data-dojo-type="rft.ui.LargeButton" data-dojo-props="iconType: 'Cancel'">Cancel</button>
106                        <button data-dojo-type="rft.ui.BlockButton" data-dojo-props="highlightColor: 'Orange', iconType: 'Accept'">Add to survey</button>
107                        <button data-dojo-type="rft.ui.BlockButton" data-dojo-props="highlightColor: 'Orange', iconType: 'Cancel'">Cancel</button>
108                        <button data-dojo-type="rft.ui.InlineButton" data-dojo-props="highlightColor: 'White', iconType: 'Help', label:'Help?'">Add to survey</button>
109                        <button data-dojo-type="rft.ui.InlineButton" data-dojo-props="highlightColor: 'White', iconType: 'Inspect', label:'See more details'">Add to survey</button>
110                    </div>
111                </div>
112                <div title="Included questions" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'right',splitter:true">
113                    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
114                        <span>Included questions</span>
115                        <div data-dojo-type="rft.ui.List">
116                            <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>
117                            <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>
118                            <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>
119                        </div>
120                    </div>
121                    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'">
122                        <button data-dojo-type="rft.ui.LargeButton" data-dojo-props="iconType: 'Settings'">Properties</button>
123                        <button data-dojo-type="rft.ui.LargeButton" data-dojo-props="iconType: 'Preview'">Preview</button>
124                        <button data-dojo-type="rft.ui.LargeButton" data-dojo-props="iconType: 'Undo'">Discard</button>
125                        <button data-dojo-type="rft.ui.LargeButton" data-dojo-props="iconType: 'Accept'">Accept changes</button>
126
127                    </div>
128                </div>
129            </div>
130        </div>
131    </body>
132</html>
Note: See TracBrowser for help on using the repository browser.