Merge pull request #890 from finos/workspace-focus-style

Style fixes for `perspective-workspace`
finos · Feb 1, 2020 · 0dda731 · 0dda731
2 parents 4504cd6 + ce009b9
commit 0dda731
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 25 deletions.
diff --git a/packages/perspective-workspace/src/js/workspace/workspace.js b/packages/perspective-workspace/src/js/workspace/workspace.js
@@ -287,12 +287,26 @@ export class PerspectiveWorkspace extends DiscreteSplitPanel {
         tabbar && tabbar.node.classList.add("p-ContextFocus");
         this.element.classList.add("p-ContextMenu");
         this.addClass("p-ContextMenu");
+        if (widget.viewer.classList.contains("p-Master")) {
+            menu.node.classList.add("p-Master");
+        } else {
+            menu.node.classList.remove("p-Master");
+        }
+        this._menu_opened = true;
 
         menu.aboutToClose.connect(() => {
             widget.removeClass("p-ContextFocus");
             tabbar && tabbar.node.classList.remove("p-ContextFocus");
-            this.element.classList.remove("p-ContextMenu");
-            this.removeClass("p-ContextMenu");
+
+            // Delay to absorb opacity "bounce" due to animation technically
+            // being reset, when right click is made twice in succession.
+            this._menu_opened = false;
+            setTimeout(() => {
+                if (!this._menu_opened) {
+                    this.element.classList.remove("p-ContextMenu");
+                    this.removeClass("p-ContextMenu");
+                }
+            });
         });
 
         menu.open(event.clientX, event.clientY);

diff --git a/packages/perspective-workspace/src/less/menu.less b/packages/perspective-workspace/src/less/menu.less
@@ -18,7 +18,16 @@
     border-top-width: 0px;
     border-right-width: 1px;
     font: 12px Helvetica, Arial, sans-serif;
-    box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.1);
+    box-shadow: 
+        rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, 
+        rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, 
+        rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;
+}
+
+.p-Menu.p-Master {
+    background: rgb(42, 47, 54);
+    color: #ccc;
+    border: 1px solid rgb(85, 94, 107);;
 }
 
 .p-Menu-item.p-mod-active {

diff --git a/packages/perspective-workspace/src/less/tabbar.less b/packages/perspective-workspace/src/less/tabbar.less
@@ -35,19 +35,21 @@
     pointer-events: all;
 }
 
-
-
 .p-mod-current {
     .p-TabBar-tabConfigIcon, .p-TabBar-tabCloseIcon {
-        color: #999;
+        color: #CCC;
+        transition: color 0.2s ease-out;
+    }
+    .p-TabBar-tabConfigIcon:hover, .p-TabBar-tabCloseIcon:hover {
+        color: #1a7da1;
+        transition: color 0.2s ease-out;
     }
 }
 
 .p-BoxPanel {
     overflow: scroll !important;
 }
 
-
 .p-TabBar,
 .p-TabBar-tab {
     position: relative;
@@ -70,11 +72,11 @@
 
 
 .divider {
-    left: 12px;
+    left: 14px;
     bottom: 0;
     position: absolute;
     // background: #ccc;
-    right: 12px;
+    right: 14px;
     display: none;
     transition: background-color 0.2s ease-out, width 0.2s ease-out;
 
@@ -181,8 +183,8 @@
         height: 1px;
         background-color: @blue800;
         margin-bottom: 0px;
-        left: 18px;
-        right: 18px;
+        left: 10px;
+        right: 10px;
     }
     &:last-child:first-child .divider {
        background: none;
@@ -225,6 +227,10 @@
 }
 
 .p-TabBar-content > .p-TabBar-tab {
+    color: #CCC;
+}
+
+.p-TabBar-content > .p-TabBar-tab .p-TabBar-tabLabel {
     color: #666;
 }
 
@@ -236,11 +242,6 @@
     color: #666;
 }
 
- .p-TabBar-content > .p-TabBar-tab:hover {
-    color: #666;
-    transition: none;
-}
-
  .p-TabBar-tab.p-mod-current .p-TabBar-tabLabel {
     white-space: nowrap !important;
 }
@@ -294,12 +295,12 @@
     background-color: #ccc;
 }
 
-
 .p-PerspectiveWorkspace.p-ContextMenu * .p-TabBar.p-ContextFocus{
-    opacity: 1
+    opacity: 1;
 }
 
-.p-PerspectiveWorkspace.p-ContextMenu  * .p-TabBar{
-    opacity: 0.2
+.p-PerspectiveWorkspace.p-ContextMenu  * .p-TabBar {
+    opacity: 0.2;
+    transition: opacity 0.2s ease-out;
 }
 
diff --git a/packages/perspective-workspace/src/less/viewer.less b/packages/perspective-workspace/src/less/viewer.less
@@ -39,7 +39,7 @@ perspective-viewer.p-Blur{
    opacity: 1;
 }
 
-.p-ContextMenu > perspective-viewer{
+.p-ContextMenu > perspective-viewer {
    opacity: 0.2;
 }
 
@@ -56,4 +56,5 @@ perspective-viewer {
       bottom: 0px;
       overflow: visible !important;
       font-family: "Open Sans", Arial, sans-serif;
+      transition: opacity 0.2s ease-out;
     }
diff --git a/packages/perspective-workspace/src/less/widget.less b/packages/perspective-workspace/src/less/widget.less
@@ -17,7 +17,7 @@
     --settings-button--content: var(--close-settings-button--content, "\1F527");
 }
 
- .p-Detail{
+.p-Detail{
     min-width: 300px;
     min-height: 200px;
     --settings-button--content: "";

diff --git a/packages/perspective-workspace/src/less/workspace.less b/packages/perspective-workspace/src/less/workspace.less
@@ -31,6 +31,10 @@
       background-color: var(--master-divider--background-color);
     }
 
+    .p-MasterPanel {
+        background-color: rgb(47, 49, 54);
+    }
+
     .p-PerspectiveWorkspace.p-ContextMenu * .p-SplitPanel-handle{
         opacity: 0.2;
     }

diff --git a/packages/perspective-workspace/test/results/linux.docker.json b/packages/perspective-workspace/test/results/linux.docker.json
@@ -1,6 +1,6 @@
 {
-    "index.html/restore workspace with detail only": "1c987bacb119a69dac2a28d05b31c14a",
+    "index.html/restore workspace with detail only": "944c3f5c4d8303e3d5c667f463709759",
     "index.html/restore workspace with master only": "13ff739449bf9745d43f9af8bfc67c7c",
-    "index.html/restore workspace with master and detail": "81da893304844b2b3c2459b80d428e13",
-    "__GIT_COMMIT__": "d12b1d620a3be9dbd9e244989d011a515e1ac9d5"
+    "index.html/restore workspace with master and detail": "1ec20152c45e0fd7188996f74faac623",
+    "__GIT_COMMIT__": "c35440b76de956bd7a0a12fa5ee10f82f6ca07a3"
 }