Changes between Initial Version and Version 1 of Ticket #3545


Ignore:
Timestamp:
Jun 27, 2007, 9:58:33 PM (12 years ago)
Author:
bill
Comment:

Legend:

Unmodified
Added
Removed
Modified
  • Ticket #3545 – Description

    initial v1  
    11Button basically takes an icon and text (like swing buttons), but the icon is specified as a CSS background image, so the interface will look like this:
    22{{{
    3 <button dojotype=dijit.form.Button labelClass=saveIcon> Save </button>
     3<button dojotype=dijit.form.Button iconClass=saveIcon> Save </button>
    44}}}
    55where the template is:
    66{{{
    77<button>
    8    <div dojoAttachPoint=containerNode class=${labelClass}>
    9        <span>${label}</span>
     8   <div class="buttonIcon ${iconClass}"></div>
     9   <div dojoAttachPoint=containerNode class=buttonLabel>
     10       ${label}
    1011  </div>
    1112</button>
    1213}}}
    13 and the CSS for saveIcon displays the icon and then the text to the right:
     14and the CSS for saveIcon displays the icon from a sprite
    1415{{{
    1516.saveIcon {
    16    background-image: url(...)
    17    padding-left: 20px;
     17   background-image: url(...) 0 -16 ...
    1818}
    1919}}}
     
    2121For toolbar buttons, in normal mode the text won't show up, just the icon, but in high contrast mode the text will show up instead (and won't be limited to 16x16).
    2222{{{
    23 .toolbarButton { width: 16px; height: 16px; }
    24 .toolbarButton span { display: none; }
    25 .dijit_a11y .toolbarButton { width: auto; height: auto; }
    26 .dijit_a11y .toolbarButton span { display: inline }
     23.toolbarButton .buttonLabel { display: none; }
     24.dijit_a11y .toolbarButton .buttonIcon { display: none; }
     25.dijit_a11y .toolbarButton .buttonLabel { display: inline }
    2726}}}
    2827