source: Dev/branches/rest-dojo-ui/client/mSurvey.html @ 342

Last change on this file since 342 was 342, checked in by tjcschipper, 13 years ago
  • Fixed callbacks/actions in LineWithActionsWidgetThijs?.js. Previously an onClick event would not fire the correct callback. They were also incorrectly bound to the context of the widget, so the this keyword referred to the properties object instead of the LineWithActions?.
  • Changed a bunch of stuff in CSS files, general layout.
  • Added another mockup page to show the Session selection page.
File size: 8.4 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    </head>
51    <body class="dijitReset claro">
52        <div class="page" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
53            <!-- Top menu bar -->
54            <div class="topbar" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
55                <h1>ResearchTool</h1>
56                <div data-dojo-type="dijit.MenuBar">
57                    <div data-dojo-type="dijit.MenuBarItem" class="rftMainMenuButton">Sessions</div>
58                    <div data-dojo-type="dijit.MenuBarItem" class="rftMainMenuButton">Content</div>
59                    <div data-dojo-type="dijit.MenuBarItem" class="rftMainMenuButton">Results</div>
60                    <div data-dojo-type="dijit.MenuBarItem" class="rftMainMenuButton">Log out</div>
61                </div>
62                <div class="breadcrumbs">
63                    <span class="breadcrumb">User > </span>
64                    <span class="breadcrumb">Session > </span>
65                    <span class="breadcrumbCurrent">Survey A [editing]</span>
66                </div>
67            </div>
68            <!-- Main content window -->
69            <div class="content" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
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                        <h2>
73                            <span class="rftIcon rftIconSurvey"></span>
74                            <span class="headerText">Survey A [editing]</span>
75                        </h2>
76                    </div>
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                            Presets
80                        </div>
81                        <div data-dojo-type="dijit.layout.TabContainer" class="blue" data-dojo-props="tabPosition:'left-h',region:'center'">
82                            <div data-dojo-type="dijit.layout.ContentPane" title="Category One, this is a very long title to see how overflow works. This part is cut off because it passes two lines at 200px wide.">
83                                <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat one'"></div>
84                                <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat two'"></div>
85                            </div>
86                            <div data-dojo-type="dijit.layout.ContentPane" title="Category Two">
87                                <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat one'"></div>
88                                <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat two'"></div>
89                            </div>
90                            <div data-dojo-type="dijit.layout.ContentPane" title="Category Three">
91                                <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat one'"></div>
92                            </div>
93                            <div data-dojo-type="dijit.layout.ContentPane" title="Category Four">
94                                <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Green Question Subcat one'"></div>
95                                <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat two'"></div>
96                                <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat three'"></div>
97                            </div>
98                            <div data-dojo-type="dijit.layout.ContentPane" title="Category Five">
99                                <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat one'"></div>
100                                <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat two'"></div>
101                                <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat three'"></div>
102                                <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat four'"></div>
103
104                                <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass:'rftIcon rftIconAccept'">Properties</button>
105                                <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass:'rftIcon rftIconPreview'">Preview</button>
106                                <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass:'rftIcon rftIconCancel'">Discard</button>
107                                <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass:'rftIcon rftIconAccept'">Accept changes</button>
108                            </div>
109                        </div>
110                    </div>
111                    <!-- "Shopping cart" -->
112                    <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'right'" style="width: 300px">
113                        <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'top'">
114                            <h3>Included questions</h3>
115                        </div>
116                        <div data-dojo-type="rft.ui.List" data-dojo-props="region:'center'">
117                            <!-- These would have to be dynamically generated instead of declared here! -->
118                            <div data-dojo-type="rft.ui.LineWithActionsWidgetThijs" data-dojo-props="title:'Question one', actions: {'Cancel':{callback: function(){}, properties: {blockButton: false, modifiers:'white'}}}"></div>
119                            <div data-dojo-type="rft.ui.LineWithActionsWidgetThijs" data-dojo-props="title:'Question two', actions: {'Cancel':{callback: function(){}, properties: {blockButton: false, modifiers:'white'}}}"></div>
120                        </div>
121                    </div>
122                </div>
123            </div>
124        </div>
125    </body>
126</html>
Note: See TracBrowser for help on using the repository browser.