From a55c1ef0211cef68bebdb83b7ee8723c7bcf6edc Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Tue, 1 Sep 2020 12:25:34 -0400
Subject: fixed tabs to never select/switch on hover unless dragging. fixed
 display of highlight icons in menu bar.  fixed placement of docDecorations
 level selector.

---
 src/client/views/nodes/DocumentContentsView.tsx |  3 +-
 src/client/views/nodes/FontIconBox.scss         | 17 +++++++--
 src/client/views/nodes/FontIconBox.tsx          |  7 ++--
 src/client/views/nodes/MenuIconBox.scss         | 49 -------------------------
 src/client/views/nodes/MenuIconBox.tsx          | 33 -----------------
 5 files changed, 18 insertions(+), 91 deletions(-)
 delete mode 100644 src/client/views/nodes/MenuIconBox.scss
 delete mode 100644 src/client/views/nodes/MenuIconBox.tsx

(limited to 'src/client/views/nodes')

diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx
index dc9b7c98f..5d5a1f7f3 100644
--- a/src/client/views/nodes/DocumentContentsView.tsx
+++ b/src/client/views/nodes/DocumentContentsView.tsx
@@ -18,7 +18,6 @@ import { DocHolderBox } from "./DocHolderBox";
 import { DocumentViewProps } from "./DocumentView";
 import "./DocumentView.scss";
 import { FontIconBox } from "./FontIconBox";
-import { MenuIconBox } from "./MenuIconBox";
 import { FieldView, FieldViewProps } from "./FieldView";
 import { FormattedTextBox, FormattedTextBoxProps } from "./formattedText/FormattedTextBox";
 import { ImageBox } from "./ImageBox";
@@ -190,7 +189,7 @@ export class DocumentContentsView extends React.Component<DocumentViewProps & Fo
                 blacklistedAttrs={[]}
                 renderInWrapper={false}
                 components={{
-                    FormattedTextBox, ImageBox, DirectoryImportBox, FontIconBox, MenuIconBox, LabelBox, SliderBox, FieldView,
+                    FormattedTextBox, ImageBox, DirectoryImportBox, FontIconBox, LabelBox, SliderBox, FieldView,
                     CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, WebBox, KeyValueBox,
                     PDFBox, VideoBox, AudioBox, PresBox, YoutubeBox, PresElementBox, SearchBox,
                     ColorBox, DashWebRTCVideo, LinkAnchorBox, InkingStroke, DocHolderBox, LinkBox, ScriptingBox,
diff --git a/src/client/views/nodes/FontIconBox.scss b/src/client/views/nodes/FontIconBox.scss
index 75bc90d7a..d7c5e9c92 100644
--- a/src/client/views/nodes/FontIconBox.scss
+++ b/src/client/views/nodes/FontIconBox.scss
@@ -37,9 +37,10 @@
 .menuButton-round {
     border-radius: 100%;
     background-color: black;
+    padding: 0;
 
     .fontIconBox-label {
-        margin-left: -10px; // button padding is 10px;
+        //margin-left: -10px; // button padding is 10px;
         bottom: 0;
         position: absolute;
     }
@@ -52,7 +53,6 @@
 .menuButton-square {
     padding-top: 3px;
     padding-bottom: 3px;
-    padding-left: 5px;
 
     .fontIconBox-label {
         border-radius: 0px;
@@ -64,7 +64,8 @@
 .menuButton,
 .menuButton-round,
 .menuButton-square {
-    width: 100%;
+    margin-left: -5%;
+    width: 110%;
     height: 100%;
     pointer-events: all;
     touch-action: none;
@@ -72,6 +73,7 @@
     .menuButton-wrap {
         touch-action: none;
         border-radius: 8px;
+        width: 100%;
 
         // &:hover {
         //     background: rgb(61, 61, 61);
@@ -89,4 +91,13 @@
         width: 95% !important;
         height: 95%;
     }
+}
+.menuButton-round {
+    width: 100%;
+    svg {
+        width: 50% !important;
+        height: 50%;
+        position: relative;
+        bottom: 2px;
+    }
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/FontIconBox.tsx b/src/client/views/nodes/FontIconBox.tsx
index 87142babd..c55b9d9f2 100644
--- a/src/client/views/nodes/FontIconBox.tsx
+++ b/src/client/views/nodes/FontIconBox.tsx
@@ -65,10 +65,9 @@ export class FontIconBox extends DocComponent<FieldViewProps, FontIconDocument>(
         const backgroundColor = StrCast(this.layoutDoc._backgroundColor, StrCast(this.rootDoc.backgroundColor, this.props.backgroundColor?.(this.rootDoc, this.props.renderDepth)));
         const shape = StrCast(this.layoutDoc.iconShape, "round");
         const icon = StrCast(this.dataDoc.icon, "user") as any;
-        const presTrailsIcon = <img
-            style={{ width: shape === 'round' ? 25 : 30, height: shape === 'round' ? 25 : 30, filter: color === 'white' ? 'invert(100%)' : 'invert(0%)', transform: shape === 'round' ? 'translate(-5px, -7px)' : undefined }}
-            id={"pres-icon"}
-            src={`/assets/${"presTrails.png"}`} />;
+        const presSize = shape === 'round' ? 25 : 30;
+        const presTrailsIcon = <img src={`/assets/${"presTrails.png"}`}
+            style={{ width: presSize, height: presSize, filter: `invert(${color === "white" ? "100%" : "0%"})`, marginBottom: "5px" }} />;
         const button = <button className={`menuButton-${shape}`} ref={this._ref} onContextMenu={this.specificContextMenu}
             style={{
                 boxShadow: this.layoutDoc.ischecked ? `4px 4px 12px black` : undefined,
diff --git a/src/client/views/nodes/MenuIconBox.scss b/src/client/views/nodes/MenuIconBox.scss
deleted file mode 100644
index 1b72f5a8f..000000000
--- a/src/client/views/nodes/MenuIconBox.scss
+++ /dev/null
@@ -1,49 +0,0 @@
-.menuButton {
-    //padding: 7px;
-    padding-left: 7px;
-    width: 100%;
-    width: 60px;
-    height: 70px;
-
-    .menuButton-wrap {
-        width: 45px;
-        /* padding: 5px; */
-        touch-action: none;
-        background: black;
-        transform-origin: top left;
-        /* margin-bottom: 5px; */
-        margin-top: 5px;
-        margin-right: 25px;
-        border-radius: 8px;
-
-        &:hover {
-            background: rgb(61, 61, 61);
-            cursor: pointer;
-        }
-    }
-
-    .menuButton-label {
-        color: white;
-        margin-right: 4px;
-        border-radius: 8px;
-        width: 42px;
-        position: relative;
-        text-align: center;
-        font-size: 8px;
-        margin-top: 1px;
-        letter-spacing: normal;
-        padding: 3px;
-        background-color: inherit;
-    }
-
-    .menuButton-icon {
-        width: auto;
-        height: 35px;
-        padding: 5px;
-    }
-
-    svg {
-        width: 95% !important;
-        height: 95%;
-    }
-}
\ No newline at end of file
diff --git a/src/client/views/nodes/MenuIconBox.tsx b/src/client/views/nodes/MenuIconBox.tsx
deleted file mode 100644
index 5ed8a9b78..000000000
--- a/src/client/views/nodes/MenuIconBox.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { observer } from 'mobx-react';
-import * as React from 'react';
-import { createSchema, makeInterface } from '../../../fields/Schema';
-import { StrCast } from '../../../fields/Types';
-import { DocComponent } from '../DocComponent';
-import { FieldView, FieldViewProps } from './FieldView';
-import './MenuIconBox.scss';
-const MenuIconSchema = createSchema({
-    icon: "string"
-});
-
-type MenuIconDocument = makeInterface<[typeof MenuIconSchema]>;
-const MenuIconDocument = makeInterface(MenuIconSchema);
-@observer
-export class MenuIconBox extends DocComponent<FieldViewProps, MenuIconDocument>(MenuIconDocument) {
-    public static LayoutString(fieldKey: string) { return FieldView.LayoutString(MenuIconBox, fieldKey); }
-    _ref: React.RefObject<HTMLButtonElement> = React.createRef();
-
-    render() {
-
-        const color = this.props.backgroundColor?.(this.props.Document, this.props.renderDepth) === "lightgrey" ? "black" : "white";
-        const menuBTN = <div className="menuButton" style={{ backgroundColor: this.props.backgroundColor?.(this.props.Document, this.props.renderDepth) }}>
-            <div className="menuButton-wrap"
-                style={{ backgroundColor: this.props.backgroundColor?.(this.props.Document, this.props.renderDepth) }} >
-                <FontAwesomeIcon className="menuButton-icon" icon={StrCast(this.dataDoc.icon, "user") as any} color={color} size="lg" />
-                <div className="menuButton-label" style={{ color: color }}> {this.dataDoc.title} </div>
-            </div>
-        </div>;
-
-        return menuBTN;
-    }
-}
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2