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.
Location:
Dev/branches/rest-dojo-ui/client
Files:
5 added
2 deleted
12 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>

  • Dev/branches/rest-dojo-ui/client/rft/css/layout.css

    r346 r349  
    275275    width: 100px !important;
    276276}
     277
     278
     279/* Question editor/Survey Advanced editor */
     280.claro .QuestionEditor .PreviewWindow {
     281    /* Nothing yet, put preview window styling options here after we've decided on a format to follow! */
     282}
     283
     284.claro .dijitAccordionContainer {
     285    /* No styling for now, use this for margins and other layout-related business. This class does not affect the look of the AccordionContainer currently! */
     286}
     287.claro .dijitAccordionInnerContainer {
     288    /* This contains a title and a childWrapper. The two of these make up one "item" in the Accordion element */
     289    border: none;
     290    border-color: #333333;
     291    background-color: #0072bc;
     292    margin-bottom: 0;
     293}
     294.claro .dijitAccordionInnerContainer {
     295    background-color: transparent;
     296}
     297.claro .dijitAccordionTitle, .claro .dijitAccordionTitleSelected {
     298    background-color: #0072bc;
     299    background-image: none;
     300    color: #ffffff;
     301}
     302.claro .dijitAccordionTitle .rftIcon {
     303    width: 16px;
     304    height: 16px;
     305    background-image: url('images/icons/rftIcons16b.png');
     306    margin: 0 4px 2px 0;
     307}
     308.claro .dijitAccordionTitleSelected .rftIcon {
     309    background-image: url('images/icons/rftIcons16.png');
     310}
     311.claro .dijitAccordionContainer.blue .dijitAccordionTitle, .claro .dijitAccordionContainer.blue .dijitAccordionTitleSelected {
     312    background-color: #0072bc;
     313}
     314.claro .dijitAccordionContainer.blue .dijitAccordionTitleHover {
     315    background-color: #0794d1;
     316}
     317.claro .dijitAccordionContainer.orange .dijitAccordionTitle, .claro .dijitAccordionContainer.orange .dijitAccordionTitleSelected {
     318    background-color: #ff5b12;
     319}
     320.claro .dijitAccordionContainer.orange .dijitAccordionTitleHover {
     321    background-color: #ff9140;
     322}
     323.claro .dijitAccordionText {
     324    color: #ffffff;
     325}
     326.claro .dijitAccordionContainer .dijitAccordionChildWrapper {
     327    background-color: #444444;
     328    border: none !important;
     329    padding: 0;
     330    margin: 0;
     331}
     332.claro .dijitAccordionContainer .dijitAccordionInnerContainerSelectedHover .dijitAccordionChildWrapper,
     333.claro .dijitAccordionContainer .dijitAccordionInnerContainerSelectedActive .dijitAccordionChildWrapper {
     334    border: none;
     335    box-shadow: none;
     336    -moz-box-shadow: none;
     337    -webkit-box-shadow: none;
     338    /* Override the box shadow and offset on hover */
     339}
     340
     341
     342/* THIS IS AN EXPERIMENT !
     343 * This will allow to set one top colour, then all the "objectBgColor" or "objectHlColor" objects below it will inherit that colour, and apply it to the relevant CSS property.
     344 * Not applying these classes to an object will make it bypass the background settings.
     345*/
     346
     347.claro div.blue.objectBgColor,
     348.claro .blue .objectBgColor {
     349    background-color: #0072bc;
     350}
     351.claro div.lblue.objectBgColor,
     352.claro .lblue .objectBgColor {
     353    background-color: #0794d1;
     354}
     355.claro div.orange.objectBgColor,
     356.claro .orange .objectBgColor {
     357    background-color: #ff5b12;
     358}
     359.claro div.lorange.objectBgColor,
     360.claro .lorange .objectBgColor {
     361    background-color: #ff9140;
     362}
     363.claro div.green.objectBgColor,
     364.claro .green .objectBgColor {
     365    background-color: #3aa605;
     366}
     367.claro div.lgreen.objectBgColor,
     368.claro .lgreen .objectBgColor {
     369    background-color: #79ca0a;
     370}
     371.claro div.purple.objectBgColor,
     372.claro .purple .objectBgColor {
     373    background-color: #6529b7;
     374}
     375.claro div.lpurple.objectBgColor,
     376.claro .lpurple .objectBgColor {
     377    background-color: #993dec;
     378}
     379.claro div.red.objectBgColor,
     380.claro .red .objectBgColor {
     381    background-color: #8c0310;
     382}
     383.claro div.lred.objectBgColor,
     384.claro .lred .objectBgColor {
     385    background-color: #bd0013;
     386}
     387/* TODO: Apply these classes to display elements that need to inherit the interface's object colour!
     388    Remove/disable other references to these colours from files like rftButtons, rftLineWithButtons, etc to make sure it works properly.
     389    Put these settings in a separate "colours.css" file to separate the concern of styling these objects from other layout-oriented properties.
     390    When we add things like highlightColours, borders, etc, the list could become quite long, especially if more colours are added to the colour scheme in time.
     391 */
     392
     393
     394
     395
     396
     397 /* Dropdown menu on MenuBar*/
     398.claro .dijitMenuPopup {
     399
     400}
     401.claro .dijitMenuPopup .dijitMenu {
     402border: none;
     403background-color: #333333;
     404background-image: none;
     405color: #999999;   
     406}
     407.claro .dijitMenuPopup .dijitMenu .dijitMenuItem {
     408    color: #999999;
     409    background-image: none;
     410    background-color: transparent;
     411}
     412.claro .dijitMenuPopup .dijitMenu .dijitMenuItemHover.blue,
     413.claro .dijitMenuPopup .dijitMenu .dijitMenuItemSelected.blue {
     414    background-color: #0072bc;
     415}
     416.claro .dijitMenuPopup .dijitMenu .dijitMenuItemHover.orange,
     417.claro .dijitMenuPopup .dijitMenu .dijitMenuItemSelected.orange {
     418    background-color: #ff5b12;
     419}
     420.claro .dijitMenuPopup .dijitMenu .dijitMenuItemHover.purple,
     421.claro .dijitMenuPopup .dijitMenu .dijitMenuItemSelected.purple {
     422    background-color: #6529b7;
     423}
     424.claro .dijitMenuPopup .dijitMenu .dijitMenuItemHover.green,
     425.claro .dijitMenuPopup .dijitMenu .dijitMenuItemSelected.green {
     426    background-color: #3aa605;
     427}
     428.claro .dijitMenuPopup .dijitMenu .dijitMenuItemHover.red,
     429.claro .dijitMenuPopup .dijitMenu .dijitMenuItemSelected.red {
     430    background-color: #8c0310;
     431}
     432.claro .dijitMenuPopup .dijitMenu .dijitMenuItemHover .dijitMenuItemLabel,
     433.claro .dijitMenuPopup .dijitMenu .dijitMenuItemActive .dijitMenuItemLabel,
     434.claro .dijitMenuPopup .dijitMenu .dijitMenuItemSelected .dijitMenuItemLabel {
     435    color: #ffffff;
     436}
     437.claro .dijitMenuPopup .dijitMenu .dijitMenuItem .rftIcon {
     438    height: 16px;
     439    width: 16px;
     440    margin: 0;
     441    margin-right: 4px;
     442    background-image: url('images/icons/rftIcons16.png');
     443}
     444.claro .dijitMenuPopup .dijitMenu .dijitMenuItemActive .rftIcon {
     445    background-image: url('images/icons/rftIcons16b.png');
     446}

  • Dev/branches/rest-dojo-ui/client/rft/css/rftButtons.css

    r346 r349  
    2222    background-image: url('images/icons/rftIcons24.png');
    2323}
     24.claro .rftLargeButton.black .rftIcon {
     25    background-image: url('images/icons/rftIcons24b.png');
     26}
    2427.claro .rftLargeButton .dijitButtonText {
    2528    line-height: 24px;
    … …  
    6669    width: 16px !important;
    6770    background-image: url('images/icons/rftIcons16.png') !important;
    68     margin-right: 4px !important;
     71}
     72.claro .rftBlockButton .rftIcon.black {
     73    background-image: url('images/icons/rftIcons16b.png') !important;
    6974}
    7075.claro .rftBlockButton.rftBlockButtonHover .rftIcon {
    71     background-image: url('images/icons/rftIcons16black.png') !important;
     76    background-image: url('images/icons/rftIcons16b.png') !important;
    7277}
    7378.claro .rftBlockButton.rftBlockButtonHover .dijitButtonNode {
    … …  
    145150}
    146151.claro .rftInlineButton.black .rftIcon {
    147     background-image: url('images/icons/rftIcons16black.png');
     152    background-image: url('images/icons/rftIcons16b.png');
     153}
     154.claro .rftInlineButton .rftIcon.black {
     155    background-image: url('images/icons/rftIcons16b.png');
     156}
     157.claro .rftInlineButton .rftIcon.white {
     158    background-image: url('images/icons/rftIcons16.png');
    148159}
    149160.claro .rftInlineButton.rftInlineButtonHover .rftIcon {

  • Dev/branches/rest-dojo-ui/client/rft/css/rftIcons.css

    r344 r349  
    1 /* 
     1\/* 
    22    The icon's parent element class decides the icon size and url. (.rftLargeButton .rftIcon / .rftInlineButton .rftIcon, for example)
    33    The icon gets two classes: .rftIcon (which sets general spacing/positioning, etc),
    … …  
    2525    Also, if possible put common/shared icons at the start of the list to prevent excessively large spritesheets.
    2626*/
     27
     28/* Types */
    2729.rftIconApplication {
    2830    background-position: 0px 0px;
    … …  
    6466    background-position: -384px 0px;
    6567}
     68/* Actions */
    6669.rftIconAccept {
    6770    background-position: -416px 0px;
    … …  
    97100    background-position: -736px 0px;
    98101}
    99 .rftIconSettings {
     102.rftIconProperties {
    100103    background-position: -768px 0px;
    101104}
    … …  
    121124    background-position: -992px 0px;
    122125}
    123 .rftIconFullArrowUp {
     126.rftIconTag {
    124127    background-position: -1024px 0px;
    125128}
    126 .rftIconFullArrowDown {
     129.rftIconImage {
    127130    background-position: -1056px 0px;
    128131}
    129 .rftIconFullArrowLeft {
     132.rftIconEdit {
    130133    background-position: -1088px 0px;
    131134}
    132 .rftIconFullArrowRight {
     135.rftIconLock {
    133136    background-position: -1120px 0px;
    134137}
    135 .rftIconHalfArrowUp {
     138.rftIconUnlock {
    136139    background-position: -1152px 0px;
    137140}
    138 .rftIconHalfArrowDown {
     141.rftIconPreset {
    139142    background-position: -1184px 0px;
    140143}
    141 .rftIconHalfArrowLeft {
     144.rftIconTextBlock {
    142145    background-position: -1216px 0px;
    143146}
     147.rftIconPageBreak {
     148    background-position: -1248px 0px;
     149}
     150.rftIconExternal {
     151    background-position: -1280px 0px;
     152}
     153.rftIconInput {
     154    background-position: -1312px 0px;
     155}
     156.rftIconPublish {
     157    background-position: -1344px 0px;
     158}
     159
     160/* Arrows */
     161.rftIconFullArrowUp {
     162    background-position: -1696px 0px;
     163}
     164.rftIconFullArrowDown {
     165    background-position: -1728px 0px;
     166}
     167.rftIconFullArrowLeft {
     168    background-position: -1760px 0px;
     169}
     170.rftIconFullArrowRight {
     171    background-position: -1792px 0px;
     172}
     173.rftIconHalfArrowUp {
     174    background-position: -1824px 0px;
     175}
     176.rftIconHalfArrowDown {
     177    background-position: -1856px 0px;
     178}
     179.rftIconHalfArrowLeft {
     180    background-position: -1888px 0px;
     181}
    144182.rftIconHalfArrowRight {
    145     background-position: -1248px 0px;
     183    background-position: -1920px 0px;
    146184}
    147185

  • Dev/branches/rest-dojo-ui/client/rft/css/rftLineWithButtons.css

    r344 r349  
    4444}
    4545.claro div.orange.rftLineWithButtons,
    46 .claro .orange .ftLineWithButtons {
     46.claro *.orange .rftLineWithButtons {
    4747    background-color: #ff5b12;
    4848    color: #ffffff;

  • Dev/branches/rest-dojo-ui/client/rft/pages/survey.html

    r347 r349  
    4747            </div>
    4848            <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'bottom'">
    49                 <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconSettings'">Settings</button>
     49                <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconProperties'">Properties</button>
    5050                <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconAccept'">Save Changes</button>
    5151                <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconCancel'">Discard changes</button>

  • Dev/branches/rest-dojo-ui/client/rft/ui/LineWithActionsWidgetThijs.js

    r342 r349  
    1 define(['dojo/_base/declare','dojo/_base/lang','dojo/on','dojo/dom', 'dojo/dom-class', 'dijit/form/Button',
    2     'dijit/_WidgetBase','dijit/_TemplatedMixin','dijit/_WidgetsInTemplateMixin',
     1define([
     2    'dojo/_base/declare',
     3    'dojo/_base/lang',
     4    'dojo/on',
     5    'dojo/dom',
     6    'dojo/dom-class',
     7    'dijit/form/Button',
     8    'dijit/_WidgetBase',
     9    'dijit/_TemplatedMixin',
     10    'dijit/_WidgetsInTemplateMixin',
    311    'dojo/text!./templates/LineWithActionsWidget.html'
    412    ],
    5     function(declare,lang,on,dom,domClass,Button,_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin,templateString){
     13    function(
     14        declare,
     15        lang,
     16        on,
     17        dom,
     18        domClass,
     19        Button,
     20        _WidgetBase,
     21        _TemplatedMixin,
     22        _WidgetsInTemplateMixin,
     23        templateString) {
    624        return declare('rft.ui.LineWithActionsWidgetThijs',[_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin],{
     25
    726            templateString: templateString,
    827            baseClass: 'rftLineWithButtons',
    928            title: '',
    10             modifiers: "blue",
     29            modifiers: "",
    1130            userObject: null,
    1231            actions: {},
     32           
    1333            postCreate: function() {
    1434                dom.setSelectable(this.domNode, false);
    … …  
    2343            _setupActions: function() {
    2444                for (var action in this.actions) {
    25                    
     45
    2646                    if (this.actions[action].properties.blockButton == true) {  // BlockButton
    2747                        var properties = lang.mixin({
    … …  
    5171            },
    5272            refresh: function() {
     73
    5374                this.titleNode.innerHTML = this.title;
    5475            },
    … …  
    6687            }
    6788        });
    68     });
     89});

  • Dev/branches/rest-dojo-ui/client/rft/ui/ObjectBox.js

    r346 r349  
    6060                            label: "Edit/View",
    6161                            modifiers: "trans",
    62                             icon: "Settings"
     62                            icon: "Edit"
    6363                        }
    6464                    };
    … …  
    9393            _setObjectReference: function(identifier) {
    9494            // TODO: Set this ObjectBox to refer to a certain database object
    95             },
    96             _getObjectInfo: function() {
     95        },
     96        _getObjectInfo: function() {
    9797            // TODO: Query the database and retrieve a JSON array of object properties
    98             },
    99             _inspectObject: function() {
     98        },
     99        _inspectObject: function() {
    100100            // TODO: Get object information (or retrieve from cache), then display in popup
    101             },
    102             _editObject: function(customFunction) {
     101        },
     102        _editObject: function(customFunction) {
    103103                // TODO: Pass an edit call to the page script, along with reference to the object contained in this ObjectBox
    104104                alert("Default edit code");
    … …  
    138138             * TODO: Check with Hendrik if I should do this or not!
    139139             * */
    140             CreateNew: function(arguments, reference, location) {
     140             CreateNew: function(arguments, reference, location) {
    141141                var newBox = new rft.ui.ObjectBox(arguments);
    142142                newBox.startup();
    … …  
    144144            }
    145145        });
    146     });
     146});

  • Dev/branches/rest-dojo-ui/client/rft/ui/templates/MainMenu.html

    r344 r349  
    55            <span>Content</span>
    66            <div data-dojo-type="dijit.DropDownMenu">
    7                 <div data-dojo-type="rft.ui.MenuLink" data-dojo-props="pageId:'surveys'">Surveys</div>
    8                 <div data-dojo-type="rft.ui.MenuLink" data-dojo-props="pageId:'questions'">Questions</div>
    9                 <div data-dojo-type="rft.ui.MenuLink" data-dojo-props="pageId:'applications'">Applications</div>
    10                 <div data-dojo-type="rft.ui.MenuLink" data-dojo-props="pageId:'dashboards'">Dashboards</div>
     7                <div data-dojo-type="rft.ui.MenuLink" class="blue" data-dojo-props="pageId:'surveys', iconClass:'rftIcon rftIconSurvey'">Surveys</div>
     8                <div data-dojo-type="rft.ui.MenuLink" class="orange" data-dojo-props="pageId:'questions', iconClass:'rftIcon rftIconQuestion'">Questions</div>
     9                <div data-dojo-type="rft.ui.MenuLink" class="purple" data-dojo-props="pageId:'applications', iconClass: 'rftIcon rftIconApplication'">Applications</div>
     10                <div data-dojo-type="rft.ui.MenuLink" class="red" data-dojo-props="pageId:'dashboards', iconClass: 'rftIcon rftIconDashboard'">Dashboards</div>
    1111            </div>
    1212        </div>
Note: See TracChangeset for help on using the changeset viewer.