Merge pull request #15 from oetiker/tree

style the tree
ITISFoundation · Oct 12, 2018 · 21a9939 · 21a9939
2 parents 9676832 + 4cd7d78
commit 21a9939
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 28 deletions.
diff --git a/Manifest.json b/Manifest.json
@@ -14,7 +14,7 @@
         "email": "[email protected]"
       }
     ],
-    "version" : "0.0.7",
+    "version" : "0.1.0",
     "qooxdoo-range": "6.0.0-alpha-20180529 - 6.x"
   },
 

diff --git a/compile.json b/compile.json
@@ -28,14 +28,14 @@
   "applications": [
     {
       "class": "widgetbrowser.Application",
-      "theme": "qx.theme.Classic",
+      "theme": "osparc.theme.OSparcDark",
       "name": "widgetbrowser",
       "writeIndexHtmlToRoot": true,
       "include": [
         "qx.theme.Indigo",
         "qx.theme.Modern",
         "qx.theme.Simple",
-        "osparc.theme.OSparcDark"
+        "qx.theme.Classic"
       ],
       "parts": {
         "boot": {
@@ -112,4 +112,4 @@
     "./components/formdemo",
     "."
   ]
-}
+}
diff --git a/contrib.json b/contrib.json
@@ -1,18 +1,18 @@
 {
   "libraries": [
+    {
+      "library_name": "qx-iconfont-material",
+      "library_version": "0.1.0",
+      "repo_name": "ITISFoundation/qx-iconfont-material",
+      "repo_tag": "v0.1.0",
+      "path": "contrib/ITISFoundation_qx-iconfont-material_v0.1.0"
+    },
     {
       "library_name": "qx-iconfont-fontawesome5",
       "library_version": "0.0.4",
       "repo_name": "ITISFoundation/qx-iconfont-fontawesome5",
       "repo_tag": "v0.0.4",
       "path": "contrib/ITISFoundation_qx-iconfont-fontawesome5_v0.0.4"
-    },
-    {
-      "library_name": "qx-iconfont-material",
-      "library_version": "0.0.5",
-      "repo_name": "ITISFoundation/qx-iconfont-material",
-      "repo_tag": "v0.0.5",
-      "path": "contrib/ITISFoundation_qx-iconfont-material_v0.0.5"
     }
   ]
 }
diff --git a/source/class/osparc/theme/osparcdark/Appearance.js b/source/class/osparc/theme/osparcdark/Appearance.js
@@ -643,6 +643,7 @@ qx.Theme.define("osparc.theme.osparcdark.Appearance", {
         style: function (states) {
           return {
             icon: (states.opened ?
+              // the old treevirtual code can not use fonticons
               "icon/16/places/folder-open.png" : "icon/16/places/folder.png"),
             opacity: states.drag ? 0.5 : undefined
           };
@@ -1076,7 +1077,7 @@ qx.Theme.define("osparc.theme.osparcdark.Appearance", {
       },
 
     "virtual-tree-folder": "tree-folder",
-    "virtual-tree-file":   "tree-file",
+    "virtual-tree-file": "tree-file",
 
     "cell":
       {
@@ -1676,7 +1677,8 @@ qx.Theme.define("osparc.theme.osparcdark.Appearance", {
           return {
             source: states.opened ?
               osparc.theme.osparcdark.Image.URLS["tree-minus"] :
-              osparc.theme.osparcdark.Image.URLS["tree-plus"]
+              osparc.theme.osparcdark.Image.URLS["tree-plus"],
+              textColor:  states.selected ? "text-selected" : "text",
           };
         }
       },
@@ -1694,9 +1696,12 @@ qx.Theme.define("osparc.theme.osparcdark.Appearance", {
           }
           return {
             padding:         [2, 8, 2, 5],
-            icon:            states.opened ? "icon/16/places/folder-open.png" : "icon/16/places/folder.png",
+            icon:            states.opened ?
+              osparc.theme.osparcdark.Image.URLS["folder-open"] :
+              osparc.theme.osparcdark.Image.URLS["folder"],
             backgroundColor: backgroundColor,
-            iconOpened:      "icon/16/places/folder-open.png",
+            textColor:       states.selected ? "text-selected" : "text",
+            iconOpened:      osparc.theme.osparcdark.Image.URLS["folder-open"],
             opacity:         states.drag ? 0.5 : undefined
           };
         }
@@ -1706,7 +1711,10 @@ qx.Theme.define("osparc.theme.osparcdark.Appearance", {
       {
         include: "image",
         style:   function (states) {
-          return {padding: [0, 4, 0, 0]};
+          return {
+            padding: [0, 4, 0, 0],
+            textColor:       states.selected ? "text-selected" : "text",
+          };
         }
       },
 
@@ -1715,7 +1723,7 @@ qx.Theme.define("osparc.theme.osparcdark.Appearance", {
         style: function (states) {
           return {
             padding:   [1, 2],
-            textColor: states.selected && !states.disabled ? "text-selected" : undefined
+            textColor: states.selected ? "text-selected" : "text",
           };
         }
       },
@@ -1727,8 +1735,7 @@ qx.Theme.define("osparc.theme.osparcdark.Appearance", {
 
         style: function (states) {
           return {
-            icon:    "icon/16/mimetypes/text-plain.png",
-            opacity: states.drag ? 0.5 : undefined
+            icon:    osparc.theme.osparcdark.Image.URLS["file"],
           };
         }
       },

diff --git a/source/class/osparc/theme/osparcdark/Color.js b/source/class/osparc/theme/osparcdark/Color.js
@@ -89,7 +89,7 @@ qx.Theme.define("osparc.theme.osparcdark.Color", {
     // text
     "text":             "#bfbfbf",
     "text-disabled":    "#808080",
-    "text-selected":    "#e0e0e0",
+    "text-selected":    "#f0f0f0",
     "text-placeholder": "#404040",
 
     // tooltip
@@ -98,17 +98,19 @@ qx.Theme.define("osparc.theme.osparcdark.Color", {
 
     // table
     "table-header":          "#333",
-    "table-focus-indicator": "#252525",
+    "table-focus-indicator": "#757575",
 
     // used in table code
     "table-header-cell":                     "#202020",
-    "table-row-background-focused-selected": "#232323",
-    "table-row-background-focused":          "#353535",
-    "table-row-background-selected":         "#262626",
+    "table-row-background-focused-selected": "#565656",
+    "table-row-background-focused":          "#454545",
+    "table-row-background-selected":         "#565656",
     "table-row-background-even":             "#202020",
     "table-row-background-odd":              "#303030",
-    "table-row-selected":                    "#000000",
-    "table-row":                             "#ddd",
+    // foreground
+    "table-row-selected":                    "#f0f0f0",
+    "table-row":                             "#bfbfbf",
+    // table grid color
     "table-row-line":                        "#222",
     "table-column-line":                     "#222",
 

diff --git a/source/class/osparc/theme/osparcdark/Image.js b/source/class/osparc/theme/osparcdark/Image.js
@@ -77,8 +77,8 @@ qx.Class.define("osparc.theme.osparcdark.Image",
       "knob-vertical" : "decoration/splitpane/knob-vertical.png",
 
       // tree
-      "tree-minus" : "decoration/tree/minus.gif",
-      "tree-plus" : "decoration/tree/plus.gif",
+      "tree-minus" : "@MaterialIcons/arrow_drop_down/16",
+      "tree-plus" : "@MaterialIcons/arrow_right/16",
 
       // table
       "select-column-order" : "decoration/table/select-column-order.png",
@@ -97,6 +97,9 @@ qx.Class.define("osparc.theme.osparcdark.Image",
       "treevirtual-plus-cross" : "decoration/treevirtual/cross_plus.gif",
       "treevirtual-end" : "decoration/treevirtual/end.gif",
       "treevirtual-cross" : "decoration/treevirtual/cross.gif",
+      "folder-open": "@MaterialIcons/folder_open/15",
+      "folder": "@MaterialIcons/folder/15",
+      "file": "@MaterialIcons/insert_drive_file/15",
 
       // menu
       "menu-checkbox" : "decoration/menu/checkbox.gif",