Show
Ignore:
Timestamp:
06/28/07 03:49:50 (19 months ago)
Author:
bill
Message:

Specify icons in buttons via CSS rather than <img> tag.
The CSS for icons is either in tundra.css (for the editor icons),
or in the customer's css file (for custom icons).

Toolbar buttons have an icon and text defined but you can control which shows up
via CSS rules (the text needs to show up if dijit_a11y is set). Haven't created
those rules yet though, so for now both icon and text show up.

Need to doublecheck a11y stuff; I think I might have broken it.

Refs #3455.

When MenuItem? is converted to extend Button it will inherit this method of
setting icons.

Files:
1 modified

Legend:

Unmodified
Added
Removed

  • dijit/trunk/tests/form/test_Button.html

    r9347 r9350  
    4343                                color: ThreeDHighlight; 
    4444                        } 
    45  
    4645                </style> 
    4746        </head> 
    … …  
    5958                </p> 
    6059                <div class="box"> 
    61                         <button id="1465" dojoType="dijit.form.Button" onClick='logMessage("clicked simple")'> 
    62                                 <img src="../images/plus.gif" width="16" height="16"> Create 
     60                        <button id="1465" dojoType="dijit.form.Button" onClick='logMessage("clicked simple")' iconClass="plusIcon"> 
     61                                Create 
    6362                        </button> 
    6463                        <span dojoType="dijit.Tooltip" connectId="1465">tooltip on button</span> 
    65                         <button dojoType="dijit.form.Button" onclick='logMessage("clicked simple")'> 
    66                                 <img src="../images/plus.gif" width="16" height="16"><br>Create 
    67                         </button> 
    68                         <button dojoType="dijit.form.DropDownButton" dropDownId='editMenu'> 
    69                                 <img src="../images/note.gif" width="20" height="20"> Edit 
    70                         </button> 
    71                         <button dojoType="dijit.form.DropDownButton" dropDownId='editMenu'> 
    72                                 <img src="../images/note.gif" width="20" height="20"><br>Edit 
    73                         </button> 
    74                         <button dojoType="dijit.form.DropDownButton" dropDownId='colorPalette'> 
    75                                 <img src="../images/note.gif" width="20" height="20"> Color 
    76                         </button> 
    77                         <button dojoType="dijit.form.ComboButton" optionsTitle='save options' dropDownId='saveMenu' onClick='logMessage("clicked combo save")'> 
    78                                 <img src="../images/note.gif" width="20" height="20"> Save 
    79                         </button> 
    80                         <button dojoType="dijit.form.ComboButton" optionsTitle='save options' dropDownId='saveMenu' onclick='logMessage("clicked combo save")'> 
    81                                 <img src="../images/note.gif" width="20" height="20"><br>Save 
    82                         </button> 
    83                         <button dojoType="dijit.form.Button" onClick='logMessage("clicked simple")' disabled='true'> 
    84                                 <img src="../images/plus.gif" width="16" height="16"> Disabled 
    85                         </button> 
    86                         <button dojoType="dijit.form.ToggleButton" onChange="console.log('toggled button selected='+arguments[0]);"> 
    87                                 <img src="../images/plus.gif" width="16" height="16"> Toggle me 
     64                        <button dojoType="dijit.form.DropDownButton" dropDownId='editMenu' iconClass="noteIcon"> 
     65                                Edit 
     66                        </button> 
     67                        <button dojoType="dijit.form.DropDownButton" dropDownId='colorPalette' iconClass="noteIcon"> 
     68                                Color 
     69                        </button> 
     70                        <button dojoType="dijit.form.ComboButton" optionsTitle='save options' dropDownId='saveMenu' onClick='logMessage("clicked combo save")' 
     71                                        iconClass="plusBlockIcon"> 
     72                                Save 
     73                        </button> 
     74                        <button dojoType="dijit.form.Button" onClick='logMessage("clicked simple")' disabled='true' iconClass="plusIcon"> 
     75                                Disabled 
     76                        </button> 
     77                </div> 
     78                <br clear=both> 
     79                <h2>Toggle buttons</h2> 
     80                <p>The button CSS as well as the icon CSS can change on toggle </p> 
     81                <div class="box"> 
     82                        <button dojoType="dijit.form.ToggleButton" onChange="console.log('toggled button selected='+arguments[0]);" iconClass="dijitCheckboxIcon"> 
     83                                Toggle me 
     84                        </button> 
     85                        <button dojoType="dijit.form.ToggleButton" onChange="console.log('toggled button selected='+arguments[0]);" iconClass="dijitRadioIcon"> 
     86                                Toggle me 
    8887                        </button> 
    8988                </div> 
    … …  
    9493                These buttons size to their content (just like &lt;button&gt;).</p> 
    9594                <div class="box"> 
    96                         <button dojoType="dijit.form.Button" onclick='logMessage("big");'> 
    97                                 <img src="../images/flatScreen.gif" width="32" height="32"> 
     95                        <button dojoType="dijit.form.Button" onclick='logMessage("big");' iconClass="flatScreenIcon"> 
    9896                                <span style="font-size:xx-large">big</span> 
    9997                        </button> 
    … …  
    166164                </div> 
    167165                <div class="box" style="display:none;" id="hiddenNode"> 
    168                         <button dojoType="dijit.form.Button" onclick='logMessage("clicked simple")'> 
    169                                 <img src="../images/plus.gif" width="16" height="16"> Create 
    170                         </button> 
    171                         <button dojoType="dijit.form.Button" onclick='logMessage("clicked simple")'> 
    172                                 <img src="../images/plus.gif" width="16" height="16"> Create 
     166                        <button dojoType="dijit.form.Button" onclick='logMessage("clicked simple")' iconClass="plusIcon"> 
     167                                Create 
     168                        </button> 
     169                        <button dojoType="dijit.form.Button" onclick='logMessage("clicked simple")' iconClass="plusIcon"> 
     170                                Create 
    173171                        </button> 
    174172                </div>