source: Dev/branches/rest-dojo-ui/client/mSessions.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.9 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>
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                'dojo/_base/array',
16                'dijit/DropDownMenu',
17                'dijit/layout/AccordionContainer',
18                'dijit/layout/BorderContainer',
19                'dijit/layout/ContentPane',
20                'dijit/layout/TabContainer',
21                'dijit/layout/SplitContainer',
22                'dijit/MenuBar',
23                'dijit/MenuBarItem',
24                'dijit/form/Button',
25                'dijit/form/ComboBox',
26                'dijit/form/Form',
27                'dijit/form/Select',
28                'dijit/form/SimpleTextarea',
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 createNew(){
53                /* There is no way this should be handled as such. Create an rftSessionBar templated widget for this! */
54               
55                require([
56                    'dojo/_base/array',
57                    'dojo/query',
58                    'dojo/dom-construct'
59                ], function(array, query, domConstruct){
60                    var props1 = {
61                        title: 'Session name',
62                        modifiers: 'purple',
63                        actions: {
64                            "Inspect": {
65                                callback: function(){alert("Info display!");},
66                                properties: {
67                                    modifiers: 'trans',
68                                    blockButton: false
69                                }
70                            }
71                        }
72                    };
73                    var props2 = {
74                        modifiers: 'purple',
75                        title: 'Creator and creation date'
76                    };
77                    var props3 = {
78                        modifiers: 'purple',
79                        actions: {
80                            "FullArrowUp": {
81                                callback: function(){alert("Moving up...");},
82                                properties: {
83                                    modifiers: 'trans',
84                                    blockButton: true}
85                            },
86                            "FullArrowDown": {
87                                callback: function(){alert("Moving down...");},
88                                properties: {
89                                    blockButton: true,
90                                    modifiers: 'trans'
91                                }
92                            }
93                        }
94                    };
95                    // Tab container div
96                    var container = array.filter(query(".dijitContentPane"), function(item){
97                        return item.id.toLowerCase() == "mainOne".toLowerCase();
98                    })[0];
99                    // rftSessionBar root node
100                    var root = domConstruct.create("div", {
101                        className: "rftSessionBar"
102                    }, container);
103                    // Icon
104                    domConstruct.create("div", {
105                        className: "rftIcon typeIcon rftIconSession"
106                    }, root);
107                    var line1 = new rft.ui.LineWithActionsWidgetThijs(props1).placeAt(root);
108                    var line2 = new rft.ui.LineWithActionsWidgetThijs(props2).placeAt(root);
109                    var line3 = new rft.ui.LineWithActionsWidgetThijs(props3).placeAt(root);
110                    line1.startup();
111                    line2.startup();
112                    line3.startup();
113                   
114                });
115            }
116           
117           
118        </script>
119
120
121    </head>
122    <body class="dijitReset claro">
123        <div class="page" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
124            <!-- Top menu bar -->
125            <div class="topbar" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
126                <h1>ResearchTool</h1>
127                <div data-dojo-type="dijit.MenuBar">
128                    <div data-dojo-type="dijit.MenuBarItem" class="rftMainMenuButton">Sessions</div>
129                    <div data-dojo-type="dijit.MenuBarItem" class="rftMainMenuButton">Content</div>
130                    <div data-dojo-type="dijit.MenuBarItem" class="rftMainMenuButton">Results</div>
131                    <div data-dojo-type="dijit.MenuBarItem" class="rftMainMenuButton">Log out</div>
132                </div>
133                <div class="breadcrumbs">
134                    <span class="breadcrumb">User > </span>
135                    <span class="breadcrumbCurrent">Sessions</span>
136                </div>
137            </div>
138            <!-- Main content window -->
139            <div class="content" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
140                <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center'" style="height: 500px;">
141                    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
142                        <h2>
143                            <span class="rftIcon rftIconSession"></span>
144                            <span class="headerText">Sessions</span>
145                        </h2>
146                    </div>
147                    <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center'">
148                        <div data-dojo-type="dijit.layout.TabContainer" class="green" data-dojo-props="tabPosition:'left-h',region:'center'">
149                            <div data-dojo-type="dijit.layout.ContentPane" title="Templates" id="mainOne">
150
151                                <div class="rftSessionBar">
152                                    <div class="rftIcon typeIcon rftIconSession"></div>
153                                    <div style="font-weight: bold;" data-dojo-type="rft.ui.LineWithActionsWidgetThijs" title="Teamup 25-5-2012" data-dojo-props="modifiers: 'green', actions: {'Inspect':{callback: function(){}, properties: {blockButton: false, modifiers: 'white', showLabel: false}}}"></div>
154                                    <div data-dojo-type="rft.ui.LineWithActionsWidgetThijs" title="Created by Arne Bezuijen on 25-01-2012 15:19" data-dojo-props="modifiers: 'green', actions: {}"></div>
155                                    <div data-dojo-type="rft.ui.LineWithActionsWidgetThijs" title="" data-dojo-props="modifiers: 'green', actions: {'FullArrowUp':{callback: function(){}, properties: {blockButton: true, modifiers: 'trans', label: 'Publish'}}, 'Cancel':{callback: function(){}, properties: {blockButton: true, modifiers: 'trans', label: 'Delete'}},'Accept':{callback: function(){this.set('title','NEW TITLE YO');}, properties: {blockButton: true, modifiers: 'trans', label:'Edit/View'}}}"></div>
156                                </div>
157
158                                <div data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconSession', onClick: createNew">Create new session</div>
159
160                            </div>
161                            <div data-dojo-type="dijit.layout.ContentPane" title="Sessions">
162
163                            </div>
164                        </div>
165                    </div>
166                </div>
167            </div>
168        </div>
169    </body>
170</html>
Note: See TracBrowser for help on using the repository browser.