source: Dev/branches/rest-dojo-ui/client/mockup.html @ 335

Last change on this file since 335 was 335, checked in by tjcschipper, 13 years ago
  • Removed rft/ui/*Button classes, since they are not actually needed. All buttons use standard dijit.form.Button again.

(baseClass: 'rft*Button', color: 'lowercase *, iconClass: 'rftIcon rftIcon*')

  • Changed CSS color classes to be shorter and more organized. No more highlightRed, now just red.
  • Moved extra .css files from client/dojotoolkit/dijit/themes/gamelab folder to client/rft/css folder, so they are actually included. Same for icons. Gamelab theme now contains only original Claro theme with renamed base class. Part of an effort to make the gamelab style work with standard inclusions of Dojo toolkit. (Override instead of change!)
  • Changed rft/ui/LineWithActionsWidgetThijs.js to use the new Button format.
  • Changed rft/ui/LineWithActionsWidgetThijs.js and rft/ui/SelectorThijs.js to use a new way to add Actions to the LineWithActions?. Instead of {"action": function(){}}, you now pass {"action": {callback: function(){}, properties: {props}}}.

The properties object is used as a mixin during creation of the Buttons, so you can directly set properties on the resulting buttons here. Most important one: action.properties.blockButton (boolean), that determines whether the Button should be a blockButton or inlineButton.
File size: 8.1 KB
RevLine 
[256]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>
[319]6        <link rel="stylesheet" type="text/css" href="dojotoolkit/dijit/themes/gamelab/gamelab.css" />
[311]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" />
[281]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>
[316]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',
[333]42                'rft/ui/SelectorThijs',
43                'rft/ui/LineWithActionsWidgetThijs',
[316]44                'rft/ui/TitleGroup',
45                'dojo/domReady!'
46            ],function(parser){
47                parser.parse();
48            });
49        </script>
[319]50
[256]51    </head>
[319]52    <body class="dijitReset gamelab">
[316]53        <div class="header">
[319]54            <div class="mainLogo">Research Tool</div>
55
56            <div data-dojo-type="dijit.MenuBar" class="mainMenu">
57                <div data-dojo-type="dijit.MenuBarItem" >Sessions</div>
58                <div data-dojo-type="dijit.MenuBarItem" >Content</div>
59                <div data-dojo-type="dijit.MenuBarItem" >Results</div>
60                <div data-dojo-type="dijit.MenuBarItem" >Log out</div>
[256]61            </div>
[319]62            <div class="breadcrumbs">
63                <span class="breadcrumb">Home > </span>
64                <span class="breadcrumb">Sessions > </span>
65                <span class="breadcrumb">Session A > </span>
66                <span class="breadcrumb breadcrumbCurrent">Survey 123 [Editing]</span>
67            </div>
[256]68        </div>
[316]69        <div class="content" data-dojo-type="dijit.layout.ContentPane">
70            <div class="title">
[331]71                <div class="rftIcon rftMainIcon rftMainIconSurvey"></div><h2 class="titleText">Survey 123 [Editing]</h2>
[316]72            </div>
[331]73            <div data-dojo-type="dijit.layout.BorderContainer" style="height: 500px;">
[316]74                <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center'">
75                    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
76                        <span>Load preset</span>
77                        <select data-dojo-type="dijit.form.ComboBox">
78                            <option>Preset A</option>
79                            <option>Preset B</option>
80                        </select>
81                    </div>
82                    <div data-dojo-type="dijit.layout.TabContainer" data-dojo-props="region:'center',tabPosition:'left-h'">
83                        <div title="Emotional, moral and relational attitudes" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Emotional, moral and relational attitudes'"></div>
84                        <div title="The professional as a participant" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="selected:true">
[335]85                            <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="title:'Intrinsic motivation', color: 'blue'"></div>
86                            <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="title:'Extrinsic motivation', color: 'blue'"></div>
87                            <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="title:'Motivation to participate', color: 'blue'"></div>
88                            <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="title:'Experience with games', color: 'blue'"></div>
89                            <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="title:'Participant context', color: 'blue'"></div>
[316]90                        </div>
91                        <div title="Declarative, procedural and stragegic knowledge" data-dojo-type="dijit.layout.ContentPane"></div>
92                        <div title="Motoric, cognitive and social skills" data-dojo-type="dijit.layout.ContentPane"></div>
93                        <div title="Scientific, competitive and commercial acchievements" data-dojo-type="dijit.layout.ContentPane"></div>
94                    </div>
95                    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'">
96                        <div>Legend</div>
97                        <div>Selected question is included in survey.</div>
98                        <div>Selected question is not yet in survey. These van be included in the survey.</div>
99                        <div>Selected question conflicts with an included question. You can only swap these.</div>
[333]100                       
[335]101
[316]102                    </div>
103                </div>
104                <div title="Included questions" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'right',splitter:true">
105                    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
106                        <span>Included questions</span>
107                        <div data-dojo-type="rft.ui.List">
108                            <div class="includedQuestion" data-dojo-type="rft.ui.LineWithActionsWidget" data-dojo-props="title:'Why are you participating in this session?',actions:{'+':function(){ alert('Bah!'); }},onClick:function(evt){ alert('Buh!'); return false; }"></div>
109                            <div class="conflictedQuestion" data-dojo-type="rft.ui.LineWithActionsWidget" data-dojo-props="title:'Is this a long-term goal or immediate?',actions:{'+':function(){ alert('Bah!'); }},onClick:function(evt){ alert('Buh!'); return false; }"></div>
110                            <div class="includedQuestion" data-dojo-type="rft.ui.LineWithActionsWidget" data-dojo-props="title:'Have you played &quot;serious games&quot; before?',actions:{'+':function(){ alert('Bah!'); }},onClick:function(evt){ alert('Buh!'); return false; }"></div>
111                        </div>
112                    </div>
113                    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'">
[335]114                        <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass:'rftIcon rftIconSettings'">Properties</button>
115                        <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass:'rftIcon rftIconPreview'">Preview</button>
116                        <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass:'rftIcon rftIconCancel'">Discard</button>
117                        <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass:'rftIcon rftIconAccept'">Accept changes</button>
[316]118                    </div>
119                </div>
120            </div>
[256]121        </div>
122    </body>
123</html>
Note: See TracBrowser for help on using the repository browser.