Ignore:
Timestamp:
05/22/12 18:40:16 (13 years ago)
Author:
tjcschipper
Message:
  • Added two custom Button classes inheriting from dijit/form/Button. These automatically set CSS classes to properly style these buttons. Both classes take an iconType property (to set icon, null if no icon) and highlightColor property (to set the base/highlight color for the button).

-Proper styling for these classes and the rest of the mockup depends on the dijit/themes/gamelab folder and dijit/icons folder. These are marked as external references, so cannot be committed at this time.

Location:
Dev/branches/rest-dojo-ui/client
Files:
2 added
1 edited

Legend:

Unmodified
Added
Removed

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

    r319 r331  
    4141                'rft/ui/Selector',
    4242                'rft/ui/TitleGroup',
     43                'rft/ui/LargeButton',
     44                'rft/ui/BlockButton',
    4345                'dojo/domReady!'
    4446            ],function(parser){
    … …  
    4648            });
    4749        </script>
    48         <!--
    49         <style>
    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             */
    5550
    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 
    140             .dijitTab {
    141                 width: 190px;
    142                 white-space: normal;
    143             }
    144 
    145             .claro .dijitContentPane.content {
    146                 background-color: #444444;
    147             }
    148 
    149 
    150 
    151 
    152 
    153 
    154 
    155 
    156 
    157 
    158             .rftLineWithButtons {
    159                 display: table;
    160                 width: 100%;
    161                 height: 24px;
    162                 background-color: #0072bc;
    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             }
    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 
    193         </style>
    194         -->
    19551    </head>
    19652    <body class="dijitReset gamelab">
    … …  
    21369        <div class="content" data-dojo-type="dijit.layout.ContentPane">
    21470            <div class="title">
    215                 <span class="titleIcon"><img style="width: 32px; height: 32px; background-color: #ff00ff;" /></span><h2 class="titleText">Survey 123 [Editing]</h2>
     71                <div class="rftIcon rftMainIcon rftMainIconSurvey"></div><h2 class="titleText">Survey 123 [Editing]</h2>
    21672            </div>
    217             <div data-dojo-type="dijit.layout.BorderContainer" style="width: 100%; height: 500px;">
     73            <div data-dojo-type="dijit.layout.BorderContainer" style="height: 500px;">
    21874                <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center'">
    21975                    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
    … …  
    22783                        <div title="Emotional, moral and relational attitudes" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Emotional, moral and relational attitudes'"></div>
    22884                        <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>
     85                            <div data-dojo-type="rft.ui.Selector" class="survey" data-dojo-props="title:'Intrinsic motivation'"></div>
     86                            <div data-dojo-type="rft.ui.Selector" class="survey" data-dojo-props="title:'Extrinsic motivation'"></div>
     87                            <div data-dojo-type="rft.ui.Selector" class="survey" data-dojo-props="title:'Motivation to participate'"></div>
     88                            <div data-dojo-type="rft.ui.Selector" class="survey" data-dojo-props="title:'Experience with games'"></div>
     89                            <div data-dojo-type="rft.ui.Selector" class="survey" data-dojo-props="title:'Participant context'"></div>
    23490                        </div>
    23591                        <div title="Declarative, procedural and stragegic knowledge" data-dojo-type="dijit.layout.ContentPane"></div>
    … …  
    24298                        <div>Selected question is not yet in survey. These van be included in the survey.</div>
    24399                        <div>Selected question conflicts with an included question. You can only swap these.</div>
     100                        --BUTTON TESTS--
     101                        <button data-dojo-type="rft.ui.LargeButton" data-dojo-props="iconType: 'Save'">Save</button>
     102                        <button data-dojo-type="rft.ui.LargeButton" data-dojo-props="iconType: 'Cancel'">Cancel</button>
     103                        <button data-dojo-type="rft.ui.BlockButton" data-dojo-props="highlightColor: 'Orange', iconType: null">Add to survey</button>
    244104                    </div>
    245105                </div>
    … …  
    254114                    </div>
    255115                    <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>
     116                        Nothing here! yet....
     117
     118                        //sooooooon......
     119
    260120                    </div>
    261121                </div>
Note: See TracChangeset for help on using the changeset viewer.