Changeset 7347

Timestamp:

Apr 28, 2017, 9:51:14 AM (6 years ago)

Author:

Nicklas Nordborg

Message:

Fixes #2081: Improve visibility of child items in the "Item overview"

I have made two changes.

• A light gray background color is used to indicate all sub-child elements. This is applied both to the selected element and when hovering (using a slight darker gray).

• First-level child elements to the selected element are displayed in bold text.

Location:

trunk/www

Files:

• common/overview/ajax.jsp (modified) (1 diff)
• common/overview/tree.jsp (modified) (2 diffs)
• include/scripts/joust-2.js (modified) (1 diff)

trunk/www/common/overview/ajax.jsp

@@ -146 +146 @@
         jsonNode.put("icon", folderIcon);
         jsonNode.put("isLazy", numChildren == 0 ? 0 : 1);
+        jsonNode.put("className", n.getNodeType().name());
         jsonChildNodes.add(jsonNode);
       }

trunk/www/common/overview/tree.jsp

@@ -188 +188 @@
     JSONObject jsonChild = newJoustEntry(jsonParent, folderIcon, text, child.getId());
     jsonChild.put("tooltip", tooltip);
-    
+    jsonChild.put("className", child.getNodeType().name());
     if (!child.isChildrenLoaded())
     {
@@ -273 +273 @@
   {
     color: #E8E8E8;
+  }
+
+  /* The selected item and all children get a gray background */
+  .selected, .selected + .children
+  {
+    background-color: #F8F8F8;
+  }
+  
+  /* A slighly darker background when hovering */
+  .joustitem:hover, .joustitem:hover + .children .joustitem
+  {
+    background-color: #F0F0F0;
+  }
+  
+  /* First-level child items to the selected item get bold text */
+  .selected + .children > .joustitem, .selected + .children > .children.FOLDER > .joustitem
+  {
+    font-weight: bold;
   }
   </style>

trunk/www/include/scripts/joust-2.js

@@ -207 +207 @@
     // Create child <div> container
     var childElements = internal.makeDiv(menuItem.id+'-children', 'children ' + (menuItem.isOpen ? 'open' : 'closed'));
+    if (menuItem.className) childElements.className += ' ' + menuItem.className;
   
     var tree = menuItem.tree;