Treeview component cleanup

Adds disabled setting to treeview and field-treeview, switches target button to blue-shark

Author: joshuarule

ui/controls/field-treeview.info/sample/ui/main.reel/main.html

@@ -14,7 +14,7 @@
             }
         },
         "icons": {
-            "prototype": "gui/ui/icons.reel",
+            "prototype": "blue-shark/ui/icons.reel",
             "properties": {
                 "element": {"#": "icons"}
             }
@@ -24,6 +24,8 @@
             "properties": {
                 "element": {"#": "default"},
                 "label": "test",
+                "disabled": false,
+                "readOnly": false,
                 "currentNode": {
                     "name": "parentNode",
                     "path": "/parentNode"

ui/controls/field-treeview.reel/_field-treeview.css

@@ -1,32 +1,42 @@
 .FieldTreeview {}
 
-.FieldTreeview-pathButton {
+.FieldTreeview-pathButton[role="button"] {
     position: relative;
     display: flex;
     align-items: center;
+    font-size: 1em;
     line-height: 2em;
     height: 2em;
     padding: 0 .5em;
-    border: 1px solid currentColor;
-    border-radius: 4px;
-    cursor: pointer;
-    outline: none;
-    background-color: #242628;
-    transition-property: color, background-color;
+    background-image: none;
+    text-align: left;
+    width: 100%;
+    transition-property: color, background-color, opacity;
     transition-timing-function: ease-in-out;
     transition-duration: .25s;
-}
 
-.FieldTreeview-pathButton:hover {
-    color: #DFE4E4;
-    background: #2F3233;
-}
+    &:hover:not(.montage--disabled) {
+        color: #fff;
+        background: #7c7c7c;
+    }
 
+    &:active:not(.montage--disabled) {
+        color: #fff;
+        background: #7c7c7c;
+        background-image: none;
+    }
+}
 
 .FieldTreeview-icon {
     display: flex;
     align-items: center;
 
+    /* button overrides */
+    margin-top:     0 !important;
+    margin-right:   0 !important;
+    max-height: none !important;
+    max-width:  none !important;
+
     & svg {
         position: relative;
         z-index: 200;
@@ -37,32 +47,35 @@
     }
 }
 
-
 .FieldTreeview-treeView {
     position: absolute;
     visibility: hidden;
 }
 
-.FieldTreeview.isExpanded .FieldTreeview-treeView {
+.FieldTreeview.is-expanded .FieldTreeview-treeView {
     position: relative;
     visibility: visible;
     margin-bottom: 1em;
 }
 
-.FieldTreeview.isExpanded .FieldTreeview-pathButton {
-    visibility: hidden;
-}
+/* selected path */
 
-.FieldTreeview-selectedPath {
+.FieldTreeview .FieldTreeview-selectedPath {
     position: absolute;
     left: 1.5em;
     right: .5em;
-    top: 0;
-    bottom: 0;
+    height:         calc(2em - 2px);
+    line-height:    calc(2em - 2px);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: clip;
     background-color: inherit;
+
+    /* button overrides */
+    margin-top:     0 !important;
+    margin-right:   0 !important;
+    max-height: none !important;
+    max-width:  none !important;
 }
 
 .FieldTreeview-selectedPath:before {

ui/controls/field-treeview.reel/field-treeview.css

@@ -10,7 +10,7 @@
                 "element": {"#": "owner"}
             },
             "bindings": {
-                "classList.has('isExpanded')": {"<-": "@owner.isExpanded"}
+                "classList.has('is-expanded')": {"<-": "@owner.isExpanded"}
             }
         },
         "field": {
@@ -25,12 +25,12 @@
             }
         },
         "pathButton": {
-            "prototype": "montage/ui/button.reel",
+            "prototype": "blue-shark/ui/button.reel",
             "properties": {
                 "element": {"#": "pathButton"}
             },
             "bindings": {
-                "disabled": {"<-": "@owner.readOnly"}
+                "disabled": {"<-": "@owner.disabled || @owner.readOnly"}
             }
         },
         "selectedPath": {
@@ -52,7 +52,8 @@
                 "isExpanded": {"<->": "@owner.isExpanded"},
                 "selectedPath": {"<->": "@owner.selectedPath"},
                 "suffix": {"<-": "@owner.suffix"},
-                "removePrefix": {"<-": "@owner.removePrefix || ''"}
+                "removePrefix": {"<-": "@owner.removePrefix || ''"},
+                "disabled": {"<-": "@owner.disabled"}
             }
         },
         "iconSubstitution": {
@@ -70,14 +71,15 @@
 <body>
     <div data-montage-id="owner" class="FieldTreeview">
         <div data-montage-id="field">
-            <div data-montage-id="pathButton" class="FieldTreeview-pathButton">
+            <div data-montage-id="pathButton" class="FieldTreeview-pathButton" tabindex="0">
                 <div class="FieldTreeview-selectedPath">
                     <span data-montage-id="selectedPath"></span>
                 </div>
                 <div data-montage-id="iconSubstitution" class="FieldTreeview-icon">
                     <svg data-arg="FILE"><use xlink:href="#i-file"/></svg>
                     <svg data-arg="DATASET"><use xlink:href="#i-dataset"/></svg>
                     <svg data-arg="DIRECTORY"><use xlink:href="#i-folder"/></svg>
+                    <svg data-arg="ZVOL"><use xlink:href="#i-zvol"/></svg>
                 </div>
             </div>
         </div>

ui/controls/field-treeview.reel/field-treeview.html

@@ -2,6 +2,12 @@
     border: 1px solid #000;
     border-radius: 4px;
     background-color: #242628;
+    transition: opacity .25s ease-in-out;
+
+    &.is-disabled {
+        opacity: .5;
+        pointer-events: none;
+    }
 }
 
 .TreeView-header {

ui/controls/tree-view.reel/_tree-view.css

@@ -13,14 +13,14 @@
             "bindings": {
                 "entry": {"<-": "@owner.controller.entry"},
                 "type": {"<-": "@owner.controller.type"},
-                "isPathInvalid": {"<-": "@owner.controller.isPathInvalid"}
+                "isPathInvalid": {"<-": "@owner.controller.isPathInvalid"},
+                "classList.has('is-disabled')": {"<-": "@owner.disabled"}
             }
         },
         "currentPath": {
             "prototype": "blue-shark/ui/text-field.reel",
             "properties": {
-                "element": {"#": "currentPath"},
-                "enabled": false
+                "element": {"#": "currentPath"}
             },
             "bindings": {
                 "value": {"<-": "(@owner.entry.path + ([email protected] ? '/' + @owner.suffix : '')).replace(([email protected] ? @owner.removePrefix: ''), '')"}