Ignore:
Timestamp:
03/23/12 17:26:55 (13 years ago)
Author:
hendrikvanantwerpen
Message:

Mockup included.

File:
1 copied

Legend:

Unmodified
Added
Removed

  • Dev/branches/rest-dojo-ui/client/mockup.html

    r315 r316  
    1010        <link rel="stylesheet" type="text/css" href="rft/css/main.css" />
    1111        <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" src="rft/run.js"></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/TitleGroup',
     43                'dojo/domReady!'
     44            ],function(parser){
     45                parser.parse();
     46            });
     47        </script>
     48        <style>
     49            .dijitTab {
     50                width: 120px;
     51                white-space: normal;
     52            }
     53
     54            .rftLineWithButtons {
     55                display: table;
     56                width: 100%;
     57                border: 1px gray solid;
     58                margin: 2px;
     59            }
     60            .rftLineWithButtons.includedQuestion {
     61                background-color: lightgreen;
     62            }
     63            .rftLineWithButtons.conflictedQuestion {
     64                background-color: lightcoral;
     65            }
     66            .rftLineWithButtons.dijitSelected {
     67                background-color: lightblue;
     68            }
     69            .rftLineWithButtonsTitle {
     70                display: table-cell;
     71                padding-left: 4px;
     72            }
     73            .rftLineWithButtonsButtons {
     74                display: table-cell;
     75                text-align: right;
     76            }
     77        </style>
    1378    </head>
    14     <body class="claro">
    15         <div id="header" class="mainHeader">
    16             <div id="menu" class="mainMenu"  data-dojo-type="rft.ui.MainMenu">
     79    <body class="dijitReset claro">
     80        <div class="header">
     81            <div data-dojo-type="dijit.MenuBar">
     82                <div data-dojo-type="dijit.MenuBarItem">Research tool</div>
     83                <div data-dojo-type="dijit.MenuBarItem">Sessions</div>
     84                <div data-dojo-type="dijit.MenuBarItem">Content</div>
     85                <div data-dojo-type="dijit.MenuBarItem">Results</div>
     86                <div data-dojo-type="dijit.MenuBarItem">Log out</div>
    1787            </div>
     88            <div class="breadcrumbs">Home > Sessions > Session A > Survey 123 [Editing]</div>
    1889        </div>
    19         <div id="content" data-dojo-type="dijit.layout.ContentPane" style="width: 100%; height: 100%;">
    20         </div>
    21         <div id="toaster" data-dojo-type="rft.ui.Notifications">
     90        <div class="content" data-dojo-type="dijit.layout.ContentPane">
     91            <div class="title">
     92                <span class="titleIcon"></span><span class="titleText">Survey 123 [Editing]</span>
     93            </div>
     94            <div data-dojo-type="dijit.layout.BorderContainer" style="width: 100%; height: 500px;">
     95                <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center'">
     96                    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
     97                        <span>Load preset</span>
     98                        <select data-dojo-type="dijit.form.ComboBox">
     99                            <option>Preset A</option>
     100                            <option>Preset B</option>
     101                        </select>
     102                    </div>
     103                    <div data-dojo-type="dijit.layout.TabContainer" data-dojo-props="region:'center',tabPosition:'left-h'">
     104                        <div title="Emotional, moral and relational attitudes" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Emotional, moral and relational attitudes'"></div>
     105                        <div title="The professional as a participant" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="selected:true">
     106                            <div data-dojo-type="rft.ui.Selector" data-dojo-props="title:'Intrinsic motivation'"></div>
     107                            <div data-dojo-type="rft.ui.Selector" data-dojo-props="title:'Extrinsic motivation'"></div>
     108                            <div data-dojo-type="rft.ui.Selector" data-dojo-props="title:'Motivation to participate'"></div>
     109                            <div data-dojo-type="rft.ui.Selector" data-dojo-props="title:'Experience with games'"></div>
     110                            <div data-dojo-type="rft.ui.Selector" data-dojo-props="title:'Participant context'"></div>
     111                        </div>
     112                        <div title="Declarative, procedural and stragegic knowledge" data-dojo-type="dijit.layout.ContentPane"></div>
     113                        <div title="Motoric, cognitive and social skills" data-dojo-type="dijit.layout.ContentPane"></div>
     114                        <div title="Scientific, competitive and commercial acchievements" data-dojo-type="dijit.layout.ContentPane"></div>
     115                    </div>
     116                    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'">
     117                        <div>Legend</div>
     118                        <div>Selected question is included in survey.</div>
     119                        <div>Selected question is not yet in survey. These van be included in the survey.</div>
     120                        <div>Selected question conflicts with an included question. You can only swap these.</div>
     121                    </div>
     122                </div>
     123                <div title="Included questions" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'right',splitter:true">
     124                    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
     125                        <span>Included questions</span>
     126                        <div data-dojo-type="rft.ui.List">
     127                            <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>
     128                            <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>
     129                            <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>
     130                        </div>
     131                    </div>
     132                    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'">
     133                        <button data-dojo-type="dijit.form.Button" data-dojo-props="iconClass:'dijitIconConfigure'">Properties</button>
     134                        <button data-dojo-type="dijit.form.Button" data-dojo-props="iconClass:'dijitIconSample'">Preview</button>
     135                        <button data-dojo-type="dijit.form.Button" data-dojo-props="iconClass:'dijitIconUndo'">Discard</button>
     136                        <button data-dojo-type="dijit.form.Button" data-dojo-props="iconClass:'dijitIconSave'">Save</button>
     137                    </div>
     138                </div>
     139            </div>
    22140        </div>
    23141    </body>
Note: See TracChangeset for help on using the changeset viewer.