Ignore:
Timestamp:
08/08/12 18:06:21 (13 years ago)
Author:
tjcschipper
Message:
  • Fixed inheritBgColor CSS classes. Now works for buttons as well. LineWithActions? and the classes that use it still need some changes. LWA needs to get rid of colour "modifier" property and always pass "inheritBgColor (light, optionally) to the buttons". Classes that use LWA need to stop passing modifiers to them;)
  • Improved SurveyEditorPreviewItem? design, less of an eyesore, and can now use the correct button colors.
Location:
Dev/branches/rest-dojo-ui/client/rft
Files:
7 edited

Legend:

Unmodified
Added
Removed

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

    r387 r395  
    342342}
    343343
     344/* DojoX.TitleGroup, replacement of AccordionContainer in Question Editor */
     345.claro .dojoxTitleGroup {
     346    /* No styling yet */
     347}
     348.claro .dojoxTitleGroup .dijitTitlePane {
     349    margin: 0;
     350}
     351.claro .orange .dojoxTitleGroup .dijitTitlePaneTitle {
     352    background-color: #ff5b12;
     353    background-image: none;
     354    border: none;
     355    padding: 0 4px;
     356    height: 24px;
     357    margin: 0;
     358}
     359.claro .orange .dojoxTitleGroup .dijitTitlePaneTitleHover,
     360.claro .ornage .dojoxTitleGroup .dijitTitlePanelTitleFocused {
     361    background-color: #ff9140;
     362}
     363.claro .dojoxTitleGroup .dijitTitlePaneTextNode {
     364    color: #ffffff;
     365    font-size: 13px;
     366    line-height: 24px;
     367}
     368.claro .dojoxTitleGroup .dijitTitlePaneContentOuter {
     369    background-color: #444;
     370    border: none;
     371}
     372.claro .dojoxTitleGroup .dijitTitlePaneTitleFocus {
     373    margin: 0;
     374}
     375
    344376/* Experimental background colour inheritance */
    345377.claro div.blue.inheritBgColor,
     378.claro span.blue.inheritBgColor,
    346379.claro .blue .inheritBgColor {
    347380    background-color: #0072bc;
    … …  
    349382}
    350383.claro div.green.inheritBgColor,
     384.claro span.green.inheritBgColor,
    351385.claro .green .inheritBgColor {
    352386    background-color: #3aa605;
    … …  
    354388}
    355389.claro div.orange.inheritBgColor,
     390.claro span.orange.inheritBgColor,
    356391.claro .orange .inheritBgColor {
    357392    background-color: #ff5b12;
    … …  
    359394}
    360395.claro div.purple.inheritBgColor,
     396.claro span.purple.inheritBgColor,
    361397.claro .purple .inheritBgColor {
    362398    background-color: #6529b7;
    … …  
    364400}
    365401.claro div.red.inheritBgColor,
     402.claro span.red.inheritBgColor,
    366403.claro .red .inheritBgColor {
    367404    background-color: #8c0310;
    … …  
    369406}
    370407.claro div.trans.inheritBgColor,
     408.claro span.trans.inheritBgColor,
    371409.claro .trans .inheritBgColor {
    372410    background-color: transparent;
    … …  
    374412}
    375413.claro div.blue.inheritBgColor.light,
     414.claro span.blue.inheritBgColor.light,
    376415.claro .blue .inheritBgColor.light {
    377416    background-color: #0794d1;
    … …  
    379418}
    380419.claro div.green.inheritBgColor.light,
     420.claro span.green.inheritBgColor.light,
    381421.claro .green .inheritBgColor.light {
    382422    background-color: #79ca0a;
    … …  
    384424}
    385425.claro div.orange.inheritBgColor.light,
     426.claro span.orange.inheritBgColor.light,
    386427.claro .orange .inheritBgColor.light {
    387428    background-color: #ff9140;
    … …  
    389430}
    390431.claro div.purple.inheritBgColor.light,
     432.claro span.purple.inheritBgColor.light,
    391433.claro .purple .inheritBgColor.light {
    392434    background-color: #993dec;
    … …  
    394436}
    395437.claro div.red.inheritBgColor.light,
     438.claro span.red.inheritBgColor.light,
    396439.claro .red .inheritBgColor.light {
    397440    background-color: #bd0013;

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

    r366 r395  
    1 /* And now for the RFT specific stuff! */
    21/*LargeButton*/
    32.claro .rftLargeButton,
    … …  
    8281    background-image: url('images/icons/rftIcons16b.png') !important;
    8382}
     83.claro .rftBlockButton.rftBlockButtonActive .rftIcon {
     84    background-image: url('images/icons/rftIcons16b.png') !important;
     85}
    8486.claro .rftBlockButton.rftBlockButtonHover .dijitButtonNode {
    8587    /*background: #999999 !important;*/
    … …  
    9092    -o-transition: background-color 0.1s;
    9193}
    92 .claro .rftBlockButton.blue .dijitButtonNode {
    93     background: #0794d1;
    94 }
    95 .claro .rftBlockButton.blue.rftBlockButtonHover .dijitButtonNode {
    96     background: #ffffff !important; /* This should be changed to an appropriate color once it is defined in the colour scheme! */
    97     color: #0794d1;
    98 }
    99 .claro .rftBlockButton.red .dijitButtonNode {
    100     background: #bd0013;
    101 }
    102 .claro .rftBlockButton.red.rftBlockButtonHover .dijitButtonNode {
    103     background: #ffffff !important; /* This should be changed to an appropriate color once it is defined in the colour scheme! */
    104     color: #bd0013;
    105 }
    106 .claro .rftBlockButton.green .dijitButtonNode {
    107     background: #79ca0a;
    108 }
    109 .claro .rftBlockButton.green.rftBlockButtonHover .dijitButtonNode {
    110     background: #ffffff !important; /* This should be changed to an appropriate color once it is defined in the colour scheme! */
    111     color: #79ca0a;
    112 }
    113 .claro .rftBlockButton.orange .dijitButtonNode {
    114     background: #ff9140;
    115 }
    116 .claro .rftBlockButton.orange.rftBlockButtonHover .dijitButtonNode {
    117     background: #ffffff !important; /* This should be changed to an appropriate color once it is defined in the colour scheme! */
    118     color: #ff9140;
    119 }
    120 .claro .rftBlockButton.purple .dijitButtonNode {
    121     background: #993dec;
    122 }
    123 .claro .rftBlockButton.purple.rftBlockButtonHover .dijitButtonNode {
    124     background: #ffffff !important; /* This should be changed to an appropriate color once it is defined in the colour scheme! */
    125     color: #993dec;
    126 }
    127 .claro .rftBlockButton.trans .dijitButtonNode {
    128     background: transparent;
    129 }
    130 .claro .rftBlockButton.trans.rftBlockButtonHover .dijitButtonNode {
    131     background: #ffffff !important;
     94
     95/* Color hovers */
     96/* These pertain to the 'normal' blockButtons - those that are placed on an empty background (gray) */
     97.claro span.orange.inheritBgColor.rftBlockButtonHover,
     98.claro .orange .inheritBgColor.rftBlockButtonHover {
     99    background-color: #ff9140 !important;
     100}
     101.claro span.orange.inheritBgColor.rftBlockButtonActive .dijitButtonNode,
     102.claro .orange .inheritBgColor.rftBlockButtonActive .dijitButtonNode {
     103    color: #ff5b12;
     104}
     105.claro span.blue.inheritBgColor.rftBlockButtonHover,
     106.claro .blue .inheritBgColor.rftBlockButtonHover {
     107    background-color: #0794d1 !important;
     108}
     109.claro span.blue.inheritBgColor.rftBlockButtonActive .dijitButtonNode,
     110.claro .blue .inheritBgColor.rftBlockButtonActive .dijitButtonNode {
     111    color: #0072bc;
     112}
     113.claro span.green.inheritBgColor.rftBlockButtonHover,
     114.claro .green .inheritBgColor.rftBlockButtonHover {
     115    background-color: #79ca0a !important;
     116}
     117.claro span.green.inheritBgColor.rftBlockButtonActive .dijitButtonNode,
     118.claro .green .inheritBgColor.rftBlockButtonActive .dijitButtonNode {
     119    color: #3aa605;
     120}
     121.claro span.red.inheritBgColor.rftBlockButtonHover,
     122.claro .red .inheritBgColor.rftBlockButtonHover {
     123    background-color: #bd0013 !important;
     124}
     125.claro span.red.inheritBgColor.rftBlockButtonActive .dijitButtonNode,
     126.claro .red .inheritBgColor.rftBlockButtonActive .dijitButtonNode {
     127    color: #8c0310;
     128}
     129.claro span.purple.inheritBgColor.rftBlockButtonHover,
     130.claro .purple .inheritBgColor.rftBlockButtonHover {
     131    background-color: #993dec !important;
     132}
     133.claro span.purple.inheritBgColor.rftBlockButtonActive .dijitButtonNode,
     134.claro .purple .inheritBgColor.rftBlockButtonActive .dijitButtonNode {
     135    color: #6529b7;
     136}
     137.claro .inheritBgColor.rftBlockButtonActive {
     138    background-color: #ffffff !important;
     139}
     140
     141/* These pertain to 'docked' BlockButtons, those on a coloured background, identified by the class "light" */
     142.claro span.light.inheritBgColor.rftBlockButtonHover,
     143.claro .light .inheritBgColor.rftBlockButtonHover {
     144    background-color: #ffffff !important;
     145}
     146.claro span.light.inheritBgColor.rftBlockButtonHover .dijitButtonNode,
     147.claro .light .inheritBgColor.rftBlockButtonHover .dijitButtonNode {
    132148    color: #000000;
    133149}
     150.claro span.light.inheritBgColor.rftBlockButtonActive .dijitButtonNode,
     151.claro .light .inheritBgColor.rftBlockButtonActive .dijitButtonNode {
     152    color: #ffffff;
     153}
     154/* colour specific ones*/
     155.claro span.orange.light.inheritBgColor.rftBlockButtonActive .dijitButtonNode,
     156.claro .orange .light.inheritBgColor.rftBlockButtonActive .dijitButtonNode {
     157    background-color: #ff5b12 !important;
     158}
     159.claro span.green.light.inheritBgColor.rftBlockButtonActive,
     160.claro .green .light.inheritBgColor.rftBlockButtonActive {
     161    background-color: #3aa605 !important;
     162}
     163.claro span.red.light.inheritBgColor.rftBlockButtonActive,
     164.claro .red .light.inheritBgColor.rftBlockButtonActive {
     165    background-color: #8c0310 !important;
     166}
     167.claro span.purple.light.inheritBgColor.rftBlockButtonActive,
     168.claro .purple .light.inheritBgColor.rftBlockButtonActive {
     169    background-color: #6529b7 !important;
     170}
     171.claro span.blue.light.inheritBgColor.rftBlockButtonActive,
     172.claro .blue .light.inheritBgColor.rftBlockButtonActive {
     173    background-color: #0072bc !important;
     174}
     175
    134176
    135177/* InlineButton */

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

    r355 r395  
    2020    float: left;
    2121    margin: 0 8px 0 8px;
     22    overflow: hidden;
    2223}
    2324

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

    r355 r395  
    3939    background-color: #00ff00;
    4040}
    41 
    42 .claro .rftSelector .rftSelectorOptions .rftLineWithButtons.selected {
    43    
    44 }

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

    r388 r395  
    1414.claro .surveyEditorPreviewItem .topBorder .title {
    1515        margin: 0 16px 0 16px;
     16        font-weight: bold;
    1617}
    1718
    … …  
    3132        padding: 8px;
    3233        border: 1px solid #ffffff;
     34        border-top-width: 0;
     35        color: #ffffff;
    3336}
     37
     38.claro div.orange .surveyEditorPreviewItemContent {
     39        border-color: #ff5b12;
     40}
     41
     42.claro div.blue .surveyEditorPreviewItemContent {
     43        border-color: #0794d1;
     44}
     45
     46.claro div.orange .surveyEditorPreviewItem.dojoDndItemAnchor .inheritBgColor {
     47        background-color: #FF9140;
     48}
     49.claro div.blue .surveyEditorPreviewItem.dojoDndItemAnchor .inheritBgColor {
     50        background-color: #0794D1;
     51}
     52.claro div.green .surveyEditorPreviewItem.dojoDndItemAnchor .inheritBgColor {
     53        background-color: #79CA0A;
     54}
     55.claro div.red .surveyEditorPreviewItem.dojoDndItemAnchor .inheritBgColor {
     56        background-color: #BD0013;
     57}
     58.claro div.purple .surveyEditorPreviewItem.dojoDndItemAnchor .inheritBgColor {
     59        background-color: #993DEC;
     60}

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

    r392 r395  
    1 <div class="inheritBgColor light">
    2         <div class="topBorder inheritBgColor light dojoDndHandle" data-dojo-attach-point="topBorderNode">
     1<div>
     2        <div class="topBorder inheritBgColor dojoDndHandle">
    33                <span class="title" data-dojo-attach-point="titleNode">Default title</span>
    4                 <span class="floatRight">
    5                         <button class="blue" data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftBlockButton', showLabel: false, iconClass: 'rftIcon rftIconHalfArrowUp'" data-dojo-attach-point="foldButtonNode">Fold</button>
    6                         <button class="blue" data-dojo-type="dijit.form.Button" data-dojo-attach-point="removeButtonNode" data-dojo-props="baseClass: 'rftBlockButton', showLabel: false, iconClass: 'rftIcon rftIconDelete'">Remove</button>
     4                <span class="floatRight" data-dojo-attach-point="buttonsNode">
     5                        <button class="trans" data-dojo-type="dijit.form.Button" data-dojo-attach-point="editButtonNode" data-dojo-props="baseClass: 'rftBlockButton', iconClass: 'rftIcon rftIconEdit'">Edit</button>
     6                        <button class="trans" data-dojo-type="dijit.form.Button" data-dojo-attach-point="foldButtonNode" data-dojo-props="baseClass: 'rftBlockButton', showLabel: false, iconClass: 'rftIcon rftIconHalfArrowUp'">Fold</button>
     7                        <button class="trans" data-dojo-type="dijit.form.Button" data-dojo-attach-point="removeButtonNode" data-dojo-props="baseClass: 'rftBlockButton', showLabel: false, iconClass: 'rftIcon rftIconDelete'">Remove</button>
    78                </span>
    89        </div>
    910       
    1011        <div class="surveyEditorPreviewItemInner" data-dojo-attach-point="innerNode">
    11                 <div class="surveyEditorPreviewItemContent inheritBgColor" data-dojo-attach-point="containerNode">
     12                <div class="surveyEditorPreviewItemContent" data-dojo-attach-point="containerNode">
    1213                </div>
    1314        </div>
    14        
    15         <div class="bottomBorder inheritBgColor light" data-dojo-attach-point="bottomBorderNode">
    16                 <span class="floatRight">
    17                         <button class="trans" data-dojo-type="dijit.form.Button" data-dojo-attach-point="editButtonNode" data-dojo-props="baseClass: 'rftBlockButton', iconClass: 'rftIcon rftIconEdit'">Edit</button>
    18                 </span>
    19         </div>
    2015</div>

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

    r390 r395  
    99                                        <div data-dojo-attach-point="listNode" class="rftLineListView"></div>
    1010                                        <div data-dojo-attach-point="categoriesBoxNode"></div>
    11                                         <button data-dojo-type="dijit.form.Button" data-dojo-attach-event="onClick:onCategoryAdd" data-dojo-props="baseClass:'rftBlockButton', class:'orange', iconClass: 'rftIcon rftIconPlus'">Add</button><br>
     11                                        <button class="inheritBgColor light" data-dojo-type="dijit.form.Button" data-dojo-attach-event="onClick:onCategoryAdd" data-dojo-props="baseClass:'rftBlockButton', iconClass: 'rftIcon rftIconPlus'">Add</button><br>
    1212                                        <label>Topic:</label>
    1313                                        <div data-dojo-attach-point="topicBoxNode"></div>
Note: See TracChangeset for help on using the changeset viewer.