Changeset 14104

Timestamp:

06/22/08 22:30:14 (5 months ago)

Author:

bill

Message:

Fix vertical alignment of tree icons by using <img> nodes rather than <div> nodes, thus making everything inline (w/vertical-align: middle) rather than inline-block.
Fixes #6475, refs #1728. !strict

Location:

dijit/trunk

Files:

• tests/css/dijitTests.css (modified) (1 diff)
• themes/dijit.css (modified) (1 diff)
• themes/nihilo/Tree.css (modified) (1 diff)
• themes/soria/Tree.css (modified) (2 diffs)
• themes/tundra/Tree.css (modified) (1 diff)
• Tree.js (modified) (3 diffs)
• _tree/Node.html (modified) (1 diff)
• _Widget.js (modified) (1 diff)

dijit/trunk/tests/css/dijitTests.css

@@ -56 +56 @@
 }
 
-.customFolderOpenedIcon, .customFolderClosedIcon {
+body .customFolderOpenedIcon, body .customFolderClosedIcon {
         background-image: url('../../demos/mail/icons.png'); /* mail icons sprite image */
         background-repeat: no-repeat;
-        width: 16px;
-        height: 16px;
-        text-align: center;
-        padding-right:4px;
+        width: 18px;
+        height: 18px;
     background-position: -44px;
 }

dijit/trunk/themes/dijit.css

@@ -1119 +1119 @@
 }
 
+.dijitTreeRow img {
+        /* make the expando and folder icons line up with the label */
+        vertical-align: middle;
+}
+
 .dijitTreeContent {
     cursor: default;

dijit/trunk/themes/nihilo/Tree.css

@@ -33 +33 @@
     min-height: 18px;
     min-width: 18px;
-    padding-top:3px;
     padding-left:1px;
 }

dijit/trunk/themes/soria/Tree.css

@@ -17 +17 @@
 .soria .dijitTreeLabel {
         font-weight: normal;
-        margin-left: 3px;       
+        margin-left: 3px;
 }
 
@@ -33 +33 @@
     min-height: 18px;
     min-width: 18px;
-    padding-top:3px;
     padding-left:1px;
 }

dijit/trunk/themes/tundra/Tree.css

@@ -28 +28 @@
     min-height: 18px;
     min-width: 18px;
-    padding-top:3px;
-}
-
+ }
 
 .tundra .dijitTreeExpand {

dijit/trunk/Tree.js

@@ -74 +74 @@
                         item = null;
                 }
-                this.iconNode.className = "dijitInline dijitTreeIcon " + tree.getIconClass(item, this.isExpanded);
+                this.iconNode.className = "dijitTreeIcon " + tree.getIconClass(item, this.isExpanded);
                 this.labelNode.className = "dijitTreeLabel " + tree.getLabelClass(item, this.isExpanded);
         },
@@ -120 +120 @@
                 dijit.setWaiState(this.labelNode, "expanded", "true");
                 dijit.setWaiRole(this.containerNode, "group");
-                this.contentNode.className = "dijitInline dijitTreeContent dijitTreeContentExpanded";
+                this.contentNode.className = "dijitTreeContent dijitTreeContentExpanded";
                 this._setExpando();
                 this._updateItemClasses(this.item);
@@ -135 +135 @@
                 this.isExpanded = false;
                 dijit.setWaiState(this.labelNode, "expanded", "false");
-                this.contentNode.className = "dijitInline dijitTreeContent";
+                this.contentNode.className = "dijitTreeContent";
                 this._setExpando();
                 this._updateItemClasses(this.item);

dijit/trunk/_tree/Node.html

@@ -1 +1 @@
 <div class="dijitTreeNode" waiRole="presentation"
         ><div dojoAttachPoint="rowNode" class="dijitTreeRow" waiRole="presentation"
-                ><span dojoAttachPoint="expandoNode" class="dijitInline dijitTreeExpando" waiRole="presentation"
-                ></span
+                ><img src="${_blankGif}" dojoAttachPoint="expandoNode" class="dijitTreeExpando" waiRole="presentation"
                 ><span dojoAttachPoint="expandoNodeText" class="dijitExpandoText" waiRole="presentation"
                 ></span
-                ><div dojoAttachPoint="contentNode" dojoAttachEvent="onmouseenter:_onMouseEnter, onmouseleave:_onMouseLeave"
-                        class="dijitInline dijitTreeContent" waiRole="presentation">
-                        <div dojoAttachPoint="iconNode" class="dijitInline dijitTreeIcon" waiRole="presentation"></div>
-                        <span dojoAttachPoint="labelNode" class="dijitTreeLabel" wairole="treeitem" tabindex="-1" waiState="selected-false" dojoAttachEvent="onfocus:_onNodeFocus"></span>
-                </div
+                ><span dojoAttachPoint="contentNode" dojoAttachEvent="onmouseenter:_onMouseEnter, onmouseleave:_onMouseLeave"
+                        class="dijitTreeContent" waiRole="presentation">
+                        <img src="${_blankGif}" dojoAttachPoint="iconNode" class="dijitTreeIcon" waiRole="presentation"
+                        ><span dojoAttachPoint="labelNode" class="dijitTreeLabel" wairole="treeitem" tabindex="-1" waiState="selected-false" dojoAttachEvent="onfocus:_onNodeFocus"></span>
+                </span
         ></div>
 </div>

dijit/trunk/_Widget.js

@@ -83 +83 @@
         //              Other node references can be specified as properties of 'this'
         attributeMap: {id:"", dir:"", lang:"", "class":"", style:"", title:""},  // TODO: add on* handlers?
+
+        // Constants used in templates
+        _blankGif: dojo.moduleUrl("dojo", "resources/blank.gif"),
 
         //////////// INITIALIZATION METHODS ///////////////////////////////////////