source: Dev/branches/rest-dojo-ui/client/mSurvey2.html @ 349

Last change on this file since 349 was 349, checked in by tjcschipper, 13 years ago
  • Finally fixed icon offsets and added a couple new icons for use in the Question/Survey? editors,as well as general purpose ones.
  • Styled the dropdown menu in the MainMenu?
  • Fixed a weird offset bug in the IndexMenu?
  • Included another way of colouring objects by their parent classes, not applied yet (in layout.css)
  • Styled the AccordionContainer?, to be used in Survey/Question? editors.
  • Removed default colour in LineWithActionsWidgetThijs?, this would override the colours inherited from parent elements (not desirable).
  • Drank a lot of coffee.
File size: 7.8 KB
RevLine 
[349]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/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" />
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<script>
51function goToPage(name) {
52    window.location = "http://localhost/RESEARCHTOOL/Dev/branches/rest-dojo-ui/client/"+name+".html";
53}
54</script>
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>
61            <div data-dojo-type="rft.ui.MainMenu"></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                        </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! -->
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>
115                    </div>
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'">Properties</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'">Design</button>
121
122                    </div>
123                </div>
124            </div>
125        </div>
126    </div>
127</body>
128</html>
Note: See TracBrowser for help on using the repository browser.