From 077e4ba816afd35bba4622e53d4dca62b74bf292 Mon Sep 17 00:00:00 2001
From: geireann <geireann.lindfield@gmail.com>
Date: Thu, 19 Aug 2021 21:56:57 -0400
Subject: menu UI updates

---
 src/client/views/StyleProvider.tsx                 |  8 ++-----
 src/client/views/collections/TabDocView.tsx        |  2 ++
 .../collectionLinearView/CollectionLinearView.scss | 28 ++++++++++++----------
 .../collectionLinearView/CollectionLinearView.tsx  |  4 ++--
 src/client/views/nodes/button/FontIconBox.scss     | 21 +++++++++-------
 src/client/views/nodes/button/FontIconBox.tsx      |  2 +-
 6 files changed, 36 insertions(+), 29 deletions(-)

(limited to 'src/client/views')

diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx
index 85520f6b3..470ae7c77 100644
--- a/src/client/views/StyleProvider.tsx
+++ b/src/client/views/StyleProvider.tsx
@@ -21,6 +21,7 @@ import "./nodes/FilterBox.scss";
 import "./StyleProvider.scss";
 import React = require("react");
 import Color = require('color');
+import { lightOrDark } from '../../Utils';
 
 export enum StyleLayers {
     Background = "background"
@@ -101,12 +102,7 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<DocumentViewProps
             if (docColor) return docColor;
             const backColor = backgroundCol();
             if (!backColor) return undefined;
-            const nonAlphaColor = backColor.startsWith("#") ? (backColor as string).substring(0, 7) :
-                backColor.startsWith("rgba") ? backColor.replace(/,.[^,]*\)/, ")").replace("rgba", "rgb") : backColor;
-            const col = Color(nonAlphaColor).rgb();
-            const colsum = (col.red() + col.green() + col.blue());
-            if (colsum / col.alpha() > 400 || col.alpha() < 0.25) return Colors.DARK_GRAY;
-            return Colors.WHITE;
+            return lightOrDark(backColor)
         case StyleProp.Hidden: return BoolCast(doc?._hidden);
         case StyleProp.BorderRounding: return StrCast(doc?.[fieldKey + "borderRounding"], doc?._viewType === CollectionViewType.Pile ? "50%" : "");
         case StyleProp.TitleHeight: return 15;
diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx
index 1969d728c..9ff1a0f61 100644
--- a/src/client/views/collections/TabDocView.tsx
+++ b/src/client/views/collections/TabDocView.tsx
@@ -124,6 +124,8 @@ export class TabDocView extends React.Component<TabDocViewProps> {
                 tab.element[0].prepend(iconWrap);
                 tab._disposers.layerDisposer = reaction(() => ({ layer: tab.DashDoc.activeLayer, color: this.tabColor }),
                     ({ layer, color }) => {
+                        console.log("TabDocView: " + this.tabColor);
+                        console.log("lightOrDark: " + lightOrDark(this.tabColor));
                         const textColor = lightOrDark(this.tabColor); //not working with StyleProp.Color
                         titleEle.style.color = textColor;
                         titleEle.style.backgroundColor = "transparent";
diff --git a/src/client/views/collections/collectionLinearView/CollectionLinearView.scss b/src/client/views/collections/collectionLinearView/CollectionLinearView.scss
index 9c766e03f..b37233892 100644
--- a/src/client/views/collections/collectionLinearView/CollectionLinearView.scss
+++ b/src/client/views/collections/collectionLinearView/CollectionLinearView.scss
@@ -5,12 +5,16 @@
     overflow: visible;
     height: 100%;
     pointer-events: none;
-    // background-color: rgba(0, 0, 0, 0.2);
     
     &.true {
         padding-left: 5px;
         padding-right: 5px;
         border-left: $standard-border;
+        background-color: #4476f780;
+    }
+
+    >input:not(:checked)~&.true {
+        background-color: transparent;
     }
 
     .collectionLinearView {
@@ -78,24 +82,25 @@
         }
 
         >label {
-            background: $dark-gray;
+            pointer-events: all;
+            cursor: pointer;
+            background-color: $medium-blue;
+            padding: 5;
+            border-radius: 2px;
+            height: 25;
+
+            margin: 0;
             color: $white;
             display: flex;
-            border-radius: 18px;
-            font-size: 12.5px;
-            font-weight:100;
+            font-weight: 100;
             width: fit-content;
-            height: 100%;
-            margin-top: auto;
-            margin-bottom: auto;
-            margin-right: 3px;
-            cursor: pointer;
             transition: transform 0.2s;
             align-items: center;
             justify-content: center;
+            transition:0.1s;
 
             &:hover {
-                background: $medium-gray;
+                transform: scale(1.05);
             }
         }
 
@@ -122,7 +127,6 @@
             .collectionLinearView-docBtn-scalable {
                 position: relative;
                 margin: auto;
-                margin-left: 3px;
                 transform-origin: center 80%;
             }
 
diff --git a/src/client/views/collections/collectionLinearView/CollectionLinearView.tsx b/src/client/views/collections/collectionLinearView/CollectionLinearView.tsx
index a8846fd45..5d89d82b4 100644
--- a/src/client/views/collections/collectionLinearView/CollectionLinearView.tsx
+++ b/src/client/views/collections/collectionLinearView/CollectionLinearView.tsx
@@ -114,12 +114,12 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) {
         const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
         const icon: string = StrCast(this.props.Document.icon);
 
-        const menuOpener = <label htmlFor={`${guid}`} style={{ pointerEvents: "all", cursor: "pointer", background: backgroundColor === color ? "black" : backgroundColor, }}
+        const menuOpener = <label htmlFor={`${guid}`} style={{ pointerEvents: "all", cursor: "pointer", background: backgroundColor === color ? "black" : undefined, }}
             onPointerDown={e => e.stopPropagation()} >
             <p>{BoolCast(this.layoutDoc.linearViewIsExpanded) ? icon ? icon : "–" : icon ? icon : "+"}</p>
         </label>;
 
-        return <div className={`collectionLinearView-outer ${this.layoutDoc.linearViewSubMenu}`}>
+        return <div className={`collectionLinearView-outer ${this.layoutDoc.linearViewSubMenu}`} style={{backgroundColor: BoolCast(this.layoutDoc.linearViewIsExpanded) ? undefined : "transparent"}}>
             <div className="collectionLinearView" ref={this.createDashEventsTarget} >
                 {!expandable ? (null) : <Tooltip title={<><div className="dash-tooltip">{BoolCast(this.props.Document.linearViewIsExpanded) ? "Close menu" : "Open menu"}</div></>} placement="top">
                     {menuOpener}
diff --git a/src/client/views/nodes/button/FontIconBox.scss b/src/client/views/nodes/button/FontIconBox.scss
index 72fab74d9..8dfb66e30 100644
--- a/src/client/views/nodes/button/FontIconBox.scss
+++ b/src/client/views/nodes/button/FontIconBox.scss
@@ -6,7 +6,11 @@
     justify-content: center;
     align-items: center;
     font-size: 80%;
-    border-radius: 7px;
+    border-radius: 2px;
+
+    &:hover {
+        background-color: rgba(0,0,0,0.3) !important;
+    }
 
     .menuButton-wrap {
         grid-column: 1;
@@ -94,8 +98,7 @@
         width: 100px;
         display: grid;
         grid-auto-columns: 80px 20px;
-        justify-items: flex-start;
-        padding-left: 10px;
+        justify-items: center;
         font-family: 'Roboto';
         white-space: nowrap;
         text-overflow: ellipsis;
@@ -113,14 +116,15 @@
             height: fit-content;
             top: 100%;
             z-index: 21;
-            background-color: #e3e3e3;
-            box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.3);
-            border-radius: 3px;
+            background-color: $white;
+            box-shadow: 0px 3px 4px rgba(0,0,0,0.3);
+            padding: 1px;
 
             .list-item {
-                color: black;
+                color: $black;
                 width: 100%;
                 height: 25px;
+                font-weight: 400;
                 display: flex;
                 justify-content: left;
                 align-items: center;
@@ -169,7 +173,8 @@
     .menuButton-dropdown-header{
         width: 100%;
         font-weight: 300;
-        overflow:hidden;
+        padding: 5px;
+        overflow: hidden;
         font-size: 12px;
         white-space: nowrap;
         text-overflow: ellipsis;
diff --git a/src/client/views/nodes/button/FontIconBox.tsx b/src/client/views/nodes/button/FontIconBox.tsx
index 9a54579dc..84ad03fa2 100644
--- a/src/client/views/nodes/button/FontIconBox.tsx
+++ b/src/client/views/nodes/button/FontIconBox.tsx
@@ -169,7 +169,7 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
         
         return (
             <div className={`menuButton ${this.type} ${active}`}
-                style={{ display: show ? undefined : "none", backgroundColor: this.rootDoc.dropDownOpen ? Colors.LIGHT_BLUE : backgroundColor, color: this.rootDoc.dropDownOpen ? Colors.BLACK : color, borderBottomLeftRadius: this.dropdown ? 0 : undefined }}
+                style={{ display: show ? undefined : "none", backgroundColor: this.rootDoc.dropDownOpen ? Colors.MEDIUM_BLUE : backgroundColor, color: color, borderBottomLeftRadius: this.dropdown ? 0 : undefined }}
                 onClick={dropdown ? () => this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen : undefined}>
                 <div className="menuButton-dropdown-header">
                     {text && text[0].toUpperCase() + text.slice(1)}
-- 
cgit v1.2.3-70-g09d2