Ignore:
Timestamp:
06/29/12 19:56:22 (13 years ago)
Author:
tjcschipper
Message:
  • Finally fixed icon offsets and added a couple new icons for use in the Question/Survey? editors,as well as general purpose ones.
  • Styled the dropdown menu in the MainMenu?
  • Fixed a weird offset bug in the IndexMenu?
  • Included another way of colouring objects by their parent classes, not applied yet (in layout.css)
  • Styled the AccordionContainer?, to be used in Survey/Question? editors.
  • Removed default colour in LineWithActionsWidgetThijs?, this would override the colours inherited from parent elements (not desirable).
  • Drank a lot of coffee.
File:
1 edited

Legend:

Unmodified
Added
Removed

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

    r346 r349  
    11<!DOCTYPE html>
    22<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/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/SelectorThijs',
    43                 'rft/ui/LineWithActionsWidgetThijs',
    44                 'rft/ui/TitleGroup',
    45                 'dojo/domReady!'
    46             ],function(parser){
    47                 parser.parse();
    48             });
    49         </script>
    50         <script>
    51             function goToPage(name) {
    52                 window.location = "http://localhost/RESEARCHTOOL/Dev/branches/rest-dojo-ui/client/"+name+".html";
    53             }
    54         </script>
    55     </head>
    56     <body class="dijitReset claro">
    57         <div class="page" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
    58             <!-- Top menu bar -->
    59             <div class="topbar" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
    60                 <h1>ResearchTool</h1>
    61                 <div data-dojo-type="rft.ui.MainMenu"></div>
    62                 <div class="breadcrumbs">
    63                     <span class="breadcrumb">User > </span>
    64                     <span class="breadcrumb">Session > </span>
    65                     <span class="breadcrumbCurrent">Survey A [editing]</span>
     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/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/SelectorThijs',
     43        'rft/ui/LineWithActionsWidgetThijs',
     44        'rft/ui/TitleGroup',
     45        'dojo/domReady!'
     46        ],function(parser){
     47            parser.parse();
     48        });
     49</script>
     50<script>
     51function goToPage(name) {
     52    window.location = "http://localhost/RESEARCHTOOL/Dev/branches/rest-dojo-ui/client/"+name+".html";
     53}
     54</script>
     55</head>
     56<body class="dijitReset claro">
     57    <div class="page" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
     58        <!-- Top menu bar -->
     59        <div class="topbar" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
     60            <h1>ResearchTool</h1>
     61            <div data-dojo-type="rft.ui.MainMenu"></div>
     62            <div class="breadcrumbs">
     63                <span class="breadcrumb">User > </span>
     64                <span class="breadcrumb">Session > </span>
     65                <span class="breadcrumbCurrent">Survey A [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">Survey A [editing]</span>
     75                    </h2>
    6676                </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;">
     77                <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center'">
    7178                    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
    72                         <h2>
    73                             <span class="rftIcon rftIconSurvey"></span>
    74                             <span class="headerText">Survey A [editing]</span>
    75                         </h2>
     79                        Presets
    7680                    </div>
    77                     <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center'">
    78                         <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
    79                             Presets
     81                    <div data-dojo-type="dijit.layout.TabContainer" class="blue" data-dojo-props="tabPosition:'left-h',region:'center'">
     82                        <div data-dojo-type="dijit.layout.ContentPane" title="Category One, this is a very long title to see how overflow works. This part is cut off because it passes two lines at 200px wide.">
     83                            <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat one'"></div>
     84                            <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat two'"></div>
    8085                        </div>
    81                         <div data-dojo-type="dijit.layout.TabContainer" class="blue" data-dojo-props="tabPosition:'left-h',region:'center'">
    82                             <div data-dojo-type="dijit.layout.ContentPane" title="Category One, this is a very long title to see how overflow works. This part is cut off because it passes two lines at 200px wide.">
    83                                 <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat one'"></div>
    84                                 <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat two'"></div>
    85                             </div>
    86                             <div data-dojo-type="dijit.layout.ContentPane" title="Category Two">
    87                                 <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat one'"></div>
    88                                 <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat two'"></div>
    89                             </div>
    90                             <div data-dojo-type="dijit.layout.ContentPane" title="Category Three">
    91                                 <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat one'"></div>
    92                             </div>
    93                             <div data-dojo-type="dijit.layout.ContentPane" title="Category Four">
    94                                 <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Green Question Subcat one'"></div>
    95                                 <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat two'"></div>
    96                                 <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat three'"></div>
    97                             </div>
    98                             <div data-dojo-type="dijit.layout.ContentPane" title="Category Five">
    99                                 <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat one'"></div>
    100                                 <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat two'"></div>
    101                                 <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat three'"></div>
    102                                 <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat four'"></div>
    103                             </div>
     86                        <div data-dojo-type="dijit.layout.ContentPane" title="Category Two">
     87                            <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat one'"></div>
     88                            <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat two'"></div>
     89                        </div>
     90                        <div data-dojo-type="dijit.layout.ContentPane" title="Category Three">
     91                            <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat one'"></div>
     92                        </div>
     93                        <div data-dojo-type="dijit.layout.ContentPane" title="Category Four">
     94                            <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Green Question Subcat one'"></div>
     95                            <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat two'"></div>
     96                            <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat three'"></div>
     97                        </div>
     98                        <div data-dojo-type="dijit.layout.ContentPane" title="Category Five">
     99                            <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat one'"></div>
     100                            <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat two'"></div>
     101                            <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat three'"></div>
     102                            <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat four'"></div>
    104103                        </div>
    105104                    </div>
    106                     <!-- "Shopping cart" -->
    107                     <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'right'" style="width: 300px">
    108                         <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'top'">
    109                             <h3>Included questions</h3>
    110                         </div>
    111                         <div data-dojo-type="rft.ui.List" data-dojo-props="region:'center'">
    112                             <!-- These would have to be dynamically generated instead of declared here! -->
    113                             <div data-dojo-type="rft.ui.LineWithActionsWidgetThijs" data-dojo-props="title:'Question one', actions: {'Cancel':{callback: function(){}, properties: {blockButton: false, icon: 'Delete', modifiers:'white'}}}"></div>
    114                             <div data-dojo-type="rft.ui.LineWithActionsWidgetThijs" data-dojo-props="title:'Question two', actions: {'Cancel':{callback: function(){}, properties: {blockButton: false, icon: 'Delete', modifiers:'white'}}}"></div>
    115                         </div>
    116                         <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'bottom'">
    117                             <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconSettings'">Settings</button>
    118                             <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconAccept'">Save Changes</button>
    119                             <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconCancel'">Discard changes</button>
    120                                                         <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconPreview'">Preview</button>
     105                </div>
     106                <!-- "Shopping cart" -->
     107                <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'right'" style="width: 300px">
     108                    <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'top'">
     109                        <h3>Included questions</h3>
     110                    </div>
     111                    <div data-dojo-type="rft.ui.List" data-dojo-props="region:'center'">
     112                        <!-- These would have to be dynamically generated instead of declared here! -->
     113                        <div data-dojo-type="rft.ui.LineWithActionsWidgetThijs" data-dojo-props="title:'Question one', actions: {'Cancel':{callback: function(){}, properties: {blockButton: false, icon: 'Delete', modifiers:'white'}}}"></div>
     114                        <div data-dojo-type="rft.ui.LineWithActionsWidgetThijs" data-dojo-props="title:'Question two', actions: {'Cancel':{callback: function(){}, properties: {blockButton: false, icon: 'Delete', modifiers:'white'}}}"></div>
     115                    </div>
     116                    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'bottom'">
     117                        <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconProperties'">Properties</button>
     118                        <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconAccept'">Save Changes</button>
     119                        <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconCancel'">Discard changes</button>
     120                        <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconPreview'">Design</button>
    121121
    122                         </div>
    123122                    </div>
    124123                </div>
    125124            </div>
    126125        </div>
    127     </body>
     126    </div>
     127</body>
    128128</html>
Note: See TracChangeset for help on using the changeset viewer.