Context Navigation

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

Last change on this file since 319 was 319, checked in by tjcschipper, 13 years ago

File size: 11.8 KB

Rev	Line
[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',
	42	'rft/ui/TitleGroup',
	43	'dojo/domReady!'
	44	],function(parser){
	45	parser.parse();
	46	});
	47	</script>
[319]	48	<!--
[316]	49	<style>
[319]	50	/*
	51	CLARO EXTEND STYLE for researchtool
	52	Note: Possibly overwrites important claro properties, so instead of altering standard elements, try to add a new class for them.
	53	This also has the effect of ensuring that the new rules will overwrite the rules specified in claro.css!
	54	*/
	55
	56	body, html {
	57	font-family: 'Segoe UI', Verdana, sans-serif;
	58	font-size: 13px;
	59	background-color: #333333;
	60	}
	61
	62	.claro .header {
	63	background-color: #333;
	64	height: 80px;
	65	}
	66
	67	.claro .header .mainLogo {
	68	float: left;
	69	height: 54px;
	70	font-size: 48px;
	71	margin: 0 0 0 50px;
	72	}
	73
	74	.claro .header .mainMenu {
	75	margin: 10px 0 17px 500px;
	76	font-size: 20px;
	77	line-height: 30px;
	78	width: 370px;
	79	height: 30px;
	80	float: left;
	81	}
	82
	83	.claro .header .mainMenu.dijitMenuPassive .dijitMenuItem {
	84	color: #999999;
	85	font-size: 20px;
	86	line-height: 30px;
	87	margin: 0;
	88	padding:0;
	89	}
	90
	91	.claro .header .mainMenu.dijitMenuPassive .dijitMenuItemSelected {
	92	background: none;
	93	background-color: transparent;
	94	border: none;
	95	margin: 0;
	96	color: #ffffff;
	97	font-size: 30px;
	98	}
	99
	100	.claro .header .mainMenu.dijitMenuPassive .dijitMenuItemHover {
	101	background: none;
	102	background-color: transparent;
	103	border: none;
	104	margin: 0;
	105	color: #ffffff;
	106	}
	107
	108
	109
	110
	111
	112	.claro .header .dijitMenuBar {
	113	border: none;
	114	background: transparent;
	115	}
	116
	117	.claro .header .breadcrumbs {
	118	height: 14px;
	119	text-align: center;
	120	clear: both;
	121	margin: 0;
	122	}
	123
	124	.claro .header .breadcrumbs .breadcrumb {
	125	padding: 3px 0;
	126	font-size: 14px;
	127	line-height: 16px;
	128	color: #999999;
	129	}
	130
	131	.claro .header .breadcrumbs .breadcrumb:hover {
	132	color: #ffffff;
	133	}
	134
	135	.claro .header .breadcrumbs .breadcrumb.current {
	136	font-size: 16px;
	137	color: #ffffff;
	138	}
	139
[316]	140	.dijitTab {
[319]	141	width: 190px;
[316]	142	white-space: normal;
	143	}
	144
[319]	145	.claro .dijitContentPane.content {
	146	background-color: #444444;
	147	}
	148
	149
	150
	151
	152
	153
	154
	155
	156
	157
[316]	158	.rftLineWithButtons {
	159	display: table;
	160	width: 100%;
[319]	161	height: 24px;
	162	background-color: #0072bc;
[316]	163	border: 1px gray solid;
	164	margin: 2px;
	165	}
	166	.rftLineWithButtons.includedQuestion {
	167	background-color: lightgreen;
	168	}
	169	.rftLineWithButtons.conflictedQuestion {
	170	background-color: lightcoral;
	171	}
	172	.rftLineWithButtons.dijitSelected {
	173	background-color: lightblue;
	174	}
	175	.rftLineWithButtonsTitle {
	176	display: table-cell;
	177	padding-left: 4px;
	178	}
	179	.rftLineWithButtonsButtons {
	180	display: table-cell;
	181	text-align: right;
	182	}
[319]	183
	184	/* Softbutton is the type of button/element that is 50% 'transparent' in idle state (#Disabled), and opaque (#White) on active/hover/select. Icon is always opaque */
	185	.softButton {
	186	color: #999999;
	187	}
	188
	189	.softButton.softButtonOn {
	190	color: #fff;
	191	}
	192
[316]	193	</style>
[319]	194	-->
[256]	195	</head>
[319]	196	<body class="dijitReset gamelab">
[316]	197	<div class="header">
[319]	198	<div class="mainLogo">Research Tool</div>
	199
	200	<div data-dojo-type="dijit.MenuBar" class="mainMenu">
	201	<div data-dojo-type="dijit.MenuBarItem" >Sessions</div>
	202	<div data-dojo-type="dijit.MenuBarItem" >Content</div>
	203	<div data-dojo-type="dijit.MenuBarItem" >Results</div>
	204	<div data-dojo-type="dijit.MenuBarItem" >Log out</div>
[256]	205	</div>
[319]	206	<div class="breadcrumbs">
	207	<span class="breadcrumb">Home > </span>
	208	<span class="breadcrumb">Sessions > </span>
	209	<span class="breadcrumb">Session A > </span>
	210	<span class="breadcrumb breadcrumbCurrent">Survey 123 [Editing]</span>
	211	</div>
[256]	212	</div>
[316]	213	<div class="content" data-dojo-type="dijit.layout.ContentPane">
	214	<div class="title">
[319]	215	<span class="titleIcon"><img style="width: 32px; height: 32px; background-color: #ff00ff;" /></span><h2 class="titleText">Survey 123 [Editing]</h2>
[316]	216	</div>
	217	<div data-dojo-type="dijit.layout.BorderContainer" style="width: 100%; height: 500px;">
	218	<div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center'">
	219	<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
	220	<span>Load preset</span>
	221	<select data-dojo-type="dijit.form.ComboBox">
	222	<option>Preset A</option>
	223	<option>Preset B</option>
	224	</select>
	225	</div>
	226	<div data-dojo-type="dijit.layout.TabContainer" data-dojo-props="region:'center',tabPosition:'left-h'">
	227	<div title="Emotional, moral and relational attitudes" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Emotional, moral and relational attitudes'"></div>
	228	<div title="The professional as a participant" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="selected:true">
	229	<div data-dojo-type="rft.ui.Selector" data-dojo-props="title:'Intrinsic motivation'"></div>
	230	<div data-dojo-type="rft.ui.Selector" data-dojo-props="title:'Extrinsic motivation'"></div>
	231	<div data-dojo-type="rft.ui.Selector" data-dojo-props="title:'Motivation to participate'"></div>
	232	<div data-dojo-type="rft.ui.Selector" data-dojo-props="title:'Experience with games'"></div>
	233	<div data-dojo-type="rft.ui.Selector" data-dojo-props="title:'Participant context'"></div>
	234	</div>
	235	<div title="Declarative, procedural and stragegic knowledge" data-dojo-type="dijit.layout.ContentPane"></div>
	236	<div title="Motoric, cognitive and social skills" data-dojo-type="dijit.layout.ContentPane"></div>
	237	<div title="Scientific, competitive and commercial acchievements" data-dojo-type="dijit.layout.ContentPane"></div>
	238	</div>
	239	<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'">
	240	<div>Legend</div>
	241	<div>Selected question is included in survey.</div>
	242	<div>Selected question is not yet in survey. These van be included in the survey.</div>
	243	<div>Selected question conflicts with an included question. You can only swap these.</div>
	244	</div>
	245	</div>
	246	<div title="Included questions" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'right',splitter:true">
	247	<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
	248	<span>Included questions</span>
	249	<div data-dojo-type="rft.ui.List">
	250	<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>
	251	<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>
	252	<div class="includedQuestion" data-dojo-type="rft.ui.LineWithActionsWidget" data-dojo-props="title:'Have you played "serious games" before?',actions:{'+':function(){ alert('Bah!'); }},onClick:function(evt){ alert('Buh!'); return false; }"></div>
	253	</div>
	254	</div>
	255	<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'">
	256	<button data-dojo-type="dijit.form.Button" data-dojo-props="iconClass:'dijitIconConfigure'">Properties</button>
	257	<button data-dojo-type="dijit.form.Button" data-dojo-props="iconClass:'dijitIconSample'">Preview</button>
	258	<button data-dojo-type="dijit.form.Button" data-dojo-props="iconClass:'dijitIconUndo'">Discard</button>
	259	<button data-dojo-type="dijit.form.Button" data-dojo-props="iconClass:'dijitIconSave'">Save</button>
	260	</div>
	261	</div>
	262	</div>
[256]	263	</div>
	264	</body>
	265	</html>

Note: See TracBrowser for help on using the repository browser.

Download in other formats: