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

Last change on this file since 346 was 346, checked in by tjcschipper, 13 years ago
  • Made mSession.html Session Editor for demo.
  • Matching stylesheet
  • Changes to all screens resulting from feedback and/or demonstration purposes.
  • global goToPage() function included in all mockups is temporary! Do not use this for actual production code.
File size: 8.4 KB
RevLine 
[342]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>
[344]6        <link rel="stylesheet" type="text/css" href="dojotoolkit/dijit/themes/claro/claro.css" />
[342]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>
[346]50        <script>
51            function goToPage(name) {
52                window.location = "http://localhost/RESEARCHTOOL/Dev/branches/rest-dojo-ui/client/"+name+".html";
53            }
54        </script>
[342]55    </head>
56    <body class="dijitReset claro">
57        <div class="page" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
58            <!-- Top menu bar -->
59            <div class="topbar" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
60                <h1>ResearchTool</h1>
[344]61                <div data-dojo-type="rft.ui.MainMenu"></div>
[342]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                            </div>
104                        </div>
105                    </div>
106                    <!-- "Shopping cart" -->
107                    <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'right'" style="width: 300px">
108                        <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'top'">
109                            <h3>Included questions</h3>
110                        </div>
111                        <div data-dojo-type="rft.ui.List" data-dojo-props="region:'center'">
112                            <!-- These would have to be dynamically generated instead of declared here! -->
[344]113                            <div data-dojo-type="rft.ui.LineWithActionsWidgetThijs" data-dojo-props="title:'Question one', actions: {'Cancel':{callback: function(){}, properties: {blockButton: false, icon: 'Delete', modifiers:'white'}}}"></div>
114                            <div data-dojo-type="rft.ui.LineWithActionsWidgetThijs" data-dojo-props="title:'Question two', actions: {'Cancel':{callback: function(){}, properties: {blockButton: false, icon: 'Delete', modifiers:'white'}}}"></div>
[342]115                        </div>
[346]116                        <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'bottom'">
117                            <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconSettings'">Settings</button>
118                            <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconAccept'">Save Changes</button>
119                            <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconCancel'">Discard changes</button>
120                                                        <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconPreview'">Preview</button>
121
122                        </div>
[342]123                    </div>
124                </div>
125            </div>
126        </div>
127    </body>
128</html>
Note: See TracBrowser for help on using the repository browser.