source: Dev/branches/rest-dojo-ui/client/mSession.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: 7.7 KB
RevLine 
[346]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/DateTextBox',
29                'dijit/form/TextBox',
30                'dijit/form/Textarea',
31                'dijit/PopupMenuBarItem',
32                'dijit/TitlePane',
33                'dojox/grid/DataGrid',
34                'dojox/widget/TitleGroup',
35                'rft/ui/List',
36                'rft/ui/MainMenu',
37                'rft/ui/MenuBarLink',
38                'rft/ui/MenuLink',
39                'rft/ui/Notifications',
40                'rft/ui/LineWithActionsWidget',
41                'rft/ui/QuestionWidget',
42                'rft/ui/Selector',
43                'rft/ui/SelectorThijs',
44                'rft/ui/LineWithActionsWidgetThijs',
45                'rft/ui/TitleGroup',
46                'dojo/domReady!'
47            ],function(parser){
48                parser.parse();
49            });
50        </script>
51        <script>
52            function goToPage(name) {
53                window.location = "http://localhost/RESEARCHTOOL/Dev/branches/rest-dojo-ui/client/"+name+".html";
54            }
55        </script>
56    </head>
57    <body class="dijitReset claro">
58        <div class="page" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
59            <!-- Top menu bar -->
60            <div class="topbar" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
61                <h1>ResearchTool</h1>
62                <div data-dojo-type="rft.ui.MainMenu"></div>
63                <div class="breadcrumbs">
64                    <span class="breadcrumb">User > </span>
65                    <span class="breadcrumbCurrent">Team session 15-5-2012 [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">Teamup Session 15-5-2012 [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.TabContainer" class="green" data-dojo-props="tabPosition:'left-h',region:'center'">
79                            <div data-dojo-type="dijit.layout.ContentPane" title="Properties">
80                                <!--PROPERTIES-->
81                                <h3>Basic</h3>
82                                <fieldset class="align">
83                                    <label for="titleInput">Title:</label>
84                                    <input type="text" id="titleInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="placeHolder: 'Enter title here'" />
85                                    <br/>
86                                    <label for="descriptionInput">Description:</label>
87                                    <textarea id="descriptionInput" rows="3" cols="54" data-dojo-type="dijit.form.SimpleTextarea" data-dojo-props="selectOnClick: true">This is the description in the info popups!</textarea>
88                                    <br/>
89                                    <label for="dateInput">Planned date:</label>
90                                    <input type="text" id="dateInput" data-dojo-type="dijit.form.DateTextBox" required="true" />
91                                </fieldset>
92
93                                <h3>Accounts</h3>
94                                <fieldset class="align">
95                                    <label for="accountsInput">Add new</label>
96                                    <input type="text" data-dojo-type="dijit.form.TextBox" data-dojo-props="placeHolder: 'Enter email address here...'" />
97                                    <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftBlockButton', class: 'green', iconClass: 'rftIcon rftIconPlus'">Invite</button>
98                                    <br/><br/>
99                                    <div data-dojo-type="rft.ui.List" data-dojo-props="region:'center'" style="width: 500px;">
100                                        <div data-dojo-type="rft.ui.LineWithActionsWidgetThijs" data-dojo-props="title:'a.bezuijen@tudelft.nl', modifiers: 'green', actions: {'Cancel':{callback: function(){}, properties: {blockButton: false, icon: 'Delete', modifiers:'white'}}}"></div>
101                                        <div data-dojo-type="rft.ui.LineWithActionsWidgetThijs" data-dojo-props="title:'i.mayer@tudelft.nl', modifiers: 'green', actions: {'Cancel':{callback: function(){}, properties: {blockButton: false, icon: 'Delete', modifiers:'white'}}}"></div>
102                                    </div>
103                                </fieldset>
104
105                                <button id="btnPropertiesDiscard" data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconCancel'">Discard changes</button>
106                                <button id="btnPropertiesSave" data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconAccept'">Save changes</button>
107
108
109                            </div>
110                            <div data-dojo-type="dijit.layout.ContentPane" title="Design">
111                                <!--DESIGN-->
112
113                                <div class="rftSessionObject green">
114                                    <div class="rftIcon rftIconSurvey"></div>
115                                    <label>Survey name</label>
116                                </div>
117                                <div class="rftSessionObject green">
118                                    <div class="rftIcon rftIconSurvey"></div>
119                                    <label>Survey name, this one is really long.</label>
120                                </div>
121
122                            </div>
123                        </div>
124                    </div>
125                </div>
126            </div>
127        </div>
128    </body>
129</html>
Note: See TracBrowser for help on using the repository browser.