From e1ad098f0756f7a11d4a43bdc47499c8cb4b0842 Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Thu, 6 Aug 2020 01:30:41 -0500
Subject: scrolling bugs for properties

---
 .../collectionFreeForm/PropertiesView.scss         | 60 +++++++++++-----------
 .../collectionFreeForm/PropertiesView.tsx          | 28 +++++-----
 2 files changed, 43 insertions(+), 45 deletions(-)

(limited to 'src/client/views/collections/collectionFreeForm')

diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss
index 5b41db90e..ce0eee744 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss
@@ -23,8 +23,9 @@
             height: 20px;
             padding-left: 38px;
             margin-top: -5px;
-            right: 19;
-            position: absolute;
+            align-items: flex-end;
+            margin-left: auto;
+            margin-right: 10px;
 
             &:hover {
                 color: grey;
@@ -66,9 +67,9 @@
 
             .propertiesView-settings-title-icon {
                 float: right;
-                right: 0;
-                position: absolute;
-                margin-left: 2px;
+                justify-items: right;
+                align-items: flex-end;
+                margin-left: auto;
                 margin-right: 9px;
 
                 &:hover {
@@ -104,9 +105,9 @@
 
             .propertiesView-sharing-title-icon {
                 float: right;
-                right: 0;
-                position: absolute;
-                margin-left: 2px;
+                justify-items: right;
+                align-items: flex-end;
+                margin-left: auto;
                 margin-right: 9px;
 
                 &:hover {
@@ -141,9 +142,9 @@
 
             .propertiesView-appearance-title-icon {
                 float: right;
-                right: 0;
-                position: absolute;
-                margin-left: 2px;
+                justify-items: right;
+                align-items: flex-end;
+                margin-left: auto;
                 margin-right: 9px;
 
                 &:hover {
@@ -178,9 +179,9 @@
 
             .propertiesView-transform-title-icon {
                 float: right;
-                right: 0;
-                position: absolute;
-                margin-left: 2px;
+                justify-items: right;
+                align-items: flex-end;
+                margin-left: auto;
                 margin-right: 9px;
 
                 &:hover {
@@ -266,9 +267,8 @@
 
             .propertiesView-sharingTable-item-permission {
                 display: flex;
-                right: 34;
-                float: right;
-                position: absolute;
+                align-items: flex-end;
+                margin-left: auto;
 
                 .permissions-select {
                     z-index: 1;
@@ -307,25 +307,18 @@
                 cursor: pointer;
             }
 
-            .propertiesView-fields-title-name {
-                font-size: 12.5px;
-                font-weight: bold;
-                white-space: nowrap;
-                width: 35px;
-                display: flex;
-            }
-
             .propertiesView-fields-title-icon {
                 float: right;
-                right: 0;
-                position: absolute;
-                margin-left: 2px;
+                justify-items: right;
+                align-items: flex-end;
+                margin-left: auto;
                 margin-right: 9px;
 
                 &:hover {
                     cursor: pointer;
                 }
             }
+
         }
 
         .propertiesView-fields-checkbox {
@@ -388,9 +381,9 @@
 
             .propertiesView-layout-title-icon {
                 float: right;
-                right: 0;
-                position: absolute;
-                margin-left: 2px;
+                justify-items: right;
+                align-items: flex-end;
+                margin-left: auto;
                 margin-right: 9px;
 
                 &:hover {
@@ -674,4 +667,9 @@
     &:hover {
         border: 0.75px solid rgb(122, 28, 28);
     }
+}
+
+
+.properties-flyout {
+    grid-column: 2/4;
 }
\ No newline at end of file
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
index 89f48fc65..3b449d941 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
@@ -598,16 +598,18 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
     set colorStk(value) { value && (this._lastLine = value); this.selectedDoc && (this.selectedDoc.color = value ? value : undefined); }
 
     colorButton(value: string, type: string, setter: () => {}) {
-        return <Flyout anchorPoint={anchorPoints.LEFT_TOP}
-            content={type === "fill" ? this.fillPicker : this.linePicker}>
-            <div className="color-button" key="color" onPointerDown={undoBatch(action(e => setter()))}>
-                <div className="color-button-preview" style={{
-                    backgroundColor: value ?? "121212", width: 15, height: 15,
-                    display: value === "" || value === "transparent" ? "none" : ""
-                }} />
-                {value === "" || value === "transparent" ? <p style={{ fontSize: 25, color: "red", marginTop: -14, position: "fixed" }}>☒</p> : ""}
-            </div>
-        </Flyout>;
+        return <div className="properties-flyout">
+            <Flyout anchorPoint={anchorPoints.LEFT_TOP}
+                content={type === "fill" ? this.fillPicker : this.linePicker}>
+                <div className="color-button" key="color" onPointerDown={undoBatch(action(e => setter()))}>
+                    <div className="color-button-preview" style={{
+                        backgroundColor: value ?? "121212", width: 15, height: 15,
+                        display: value === "" || value === "transparent" ? "none" : ""
+                    }} />
+                    {value === "" || value === "transparent" ? <p style={{ fontSize: 25, color: "red", marginTop: -14, position: "fixed" }}>☒</p> : ""}
+                </div>
+            </Flyout>
+        </div>;
 
     }
 
@@ -844,11 +846,9 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                         <div className="propertiesView-fields-title"
                             onPointerDown={() => runInAction(() => { this.openFields = !this.openFields; })}
                             style={{ backgroundColor: this.openFields ? "black" : "" }}>
-                            <div className="propertiesView-fields-title-name">
-                                Fields {"&"} Tags
+                            Fields {"&"} Tags
                             <div className="propertiesView-fields-title-icon">
-                                    <FontAwesomeIcon icon={this.openFields ? "caret-down" : "caret-right"} size="lg" color="white" />
-                                </div>
+                                <FontAwesomeIcon icon={this.openFields ? "caret-down" : "caret-right"} size="lg" color="white" />
                             </div>
                         </div>
                         {!novice && this.openFields ? <div className="propertiesView-fields-checkbox">
-- 
cgit v1.2.3-70-g09d2


From ecadf91fa662a45b7e0c2302f9423a2032589909 Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Thu, 6 Aug 2020 11:21:33 -0500
Subject: ink fix

---
 src/client/util/SettingsManager.tsx                |  2 +-
 .../collectionFreeForm/PropertiesView.tsx          | 37 ++++++++++++++--------
 2 files changed, 24 insertions(+), 15 deletions(-)

(limited to 'src/client/views/collections/collectionFreeForm')

diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx
index 155c7f60c..8124b7676 100644
--- a/src/client/util/SettingsManager.tsx
+++ b/src/client/util/SettingsManager.tsx
@@ -257,7 +257,7 @@ export default class SettingsManager extends React.Component<{}> {
                         </option>;
                     })}
                 </select>
-            </div>;
+            </div>
         </div>;
 
         return preferencesContent;
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
index 3b449d941..8aeb80ace 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
@@ -83,6 +83,8 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
 
     @computed get isInk() { return this.selectedDoc?.type === DocumentType.INK; }
 
+    @observable scrolling: boolean = true;
+
     @action
     rtfWidth = () => {
         if (this.selectedDoc) {
@@ -598,21 +600,28 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
     set colorStk(value) { value && (this._lastLine = value); this.selectedDoc && (this.selectedDoc.color = value ? value : undefined); }
 
     colorButton(value: string, type: string, setter: () => {}) {
-        return <div className="properties-flyout">
-            <Flyout anchorPoint={anchorPoints.LEFT_TOP}
-                content={type === "fill" ? this.fillPicker : this.linePicker}>
-                <div className="color-button" key="color" onPointerDown={undoBatch(action(e => setter()))}>
-                    <div className="color-button-preview" style={{
-                        backgroundColor: value ?? "121212", width: 15, height: 15,
-                        display: value === "" || value === "transparent" ? "none" : ""
-                    }} />
-                    {value === "" || value === "transparent" ? <p style={{ fontSize: 25, color: "red", marginTop: -14, position: "fixed" }}>☒</p> : ""}
-                </div>
-            </Flyout>
+        // return <div className="properties-flyout" onPointerEnter={e => this.changeScrolling(false)}
+        //     onPointerLeave={e => this.changeScrolling(true)}>
+        //     <Flyout anchorPoint={anchorPoints.LEFT_TOP}
+        //         content={type === "fill" ? this.fillPicker : this.linePicker}>
+        return <div className="color-button" key="color" onPointerDown={undoBatch(action(e => setter()))}>
+            <div className="color-button-preview" style={{
+                backgroundColor: value ?? "121212", width: 15, height: 15,
+                display: value === "" || value === "transparent" ? "none" : ""
+            }} />
+            {value === "" || value === "transparent" ? <p style={{ fontSize: 25, color: "red", marginTop: -14 }}>☒</p> : ""}
         </div>;
+        //     </Flyout>
+        // </div>;
 
     }
 
+    @action
+    changeScrolling = (scroll: boolean) => {
+        console.log(scroll);
+        this.scrolling = scroll;
+    }
+
     @undoBatch
     @action
     switchStk = (color: ColorState) => {
@@ -654,8 +663,8 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                     <div className="stroke-button">{this.lineButton}</div>
                 </div>
             </div>
-            {/* {this._fillBtn ? this.fillPicker : ""}
-            {this._lineBtn ? this.linePicker : ""} */}
+            {this._fillBtn ? this.fillPicker : ""}
+            {this._lineBtn ? this.linePicker : ""}
         </div>;
     }
 
@@ -771,7 +780,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
             if (this.selectedDoc && !this.isPres) {
                 return <div className="propertiesView" style={{
                     width: this.props.width,
-                    // overflowY: this.inActions ? "visible" : "scroll"
+                    overflowY: this.scrolling ? "scroll" : "visible"
                 }} >
                     <div className="propertiesView-title" style={{ width: this.props.width }}>
                         Properties
-- 
cgit v1.2.3-70-g09d2


From 4b48414585910fc83e1599913f8a23672f895995 Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Thu, 6 Aug 2020 11:29:42 -0500
Subject: last ink fix

---
 .../views/collections/collectionFreeForm/PropertiesView.tsx    | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

(limited to 'src/client/views/collections/collectionFreeForm')

diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
index 8aeb80ace..6dcfdf161 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
@@ -83,8 +83,6 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
 
     @computed get isInk() { return this.selectedDoc?.type === DocumentType.INK; }
 
-    @observable scrolling: boolean = true;
-
     @action
     rtfWidth = () => {
         if (this.selectedDoc) {
@@ -616,12 +614,6 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
 
     }
 
-    @action
-    changeScrolling = (scroll: boolean) => {
-        console.log(scroll);
-        this.scrolling = scroll;
-    }
-
     @undoBatch
     @action
     switchStk = (color: ColorState) => {
@@ -780,7 +772,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
             if (this.selectedDoc && !this.isPres) {
                 return <div className="propertiesView" style={{
                     width: this.props.width,
-                    overflowY: this.scrolling ? "scroll" : "visible"
+                    //overflowY: this.scrolling ? "scroll" : "visible"
                 }} >
                     <div className="propertiesView-title" style={{ width: this.props.width }}>
                         Properties
-- 
cgit v1.2.3-70-g09d2


From 1e84a64ffb1f1933eb7e506fa133835fdb1a0972 Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Thu, 6 Aug 2020 23:39:53 -0500
Subject: finished all properties UI changes

---
 src/client/views/collections/CollectionView.tsx                    | 2 +-
 .../views/collections/collectionFreeForm/PropertiesView.scss       | 6 +++---
 src/client/views/collections/collectionFreeForm/PropertiesView.tsx | 7 ++-----
 3 files changed, 6 insertions(+), 9 deletions(-)

(limited to 'src/client/views/collections/collectionFreeForm')

diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index 4d1cb670c..837ae7e86 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -594,7 +594,7 @@ export class CollectionView extends Touchable<FieldViewProps & CollectionViewCus
                     ""))}
             {(Doc.UserDoc()?.noviceMode || !this.props.isSelected() && !this.props.Document.forceActive) || this.props.Document.hideFilterView ? (null) :
                 <div className="collectionView-filterDragger" title="library View Dragger" onPointerDown={this.onPointerDown}
-                    style={{ right: this.facetWidth() - 1, top: this.props.Document._viewType === CollectionViewType.Docking ? "25%" : "55%" }} />
+                    style={{ right: this.facetWidth() - 1, top: this.props.Document._viewType === CollectionViewType.Docking ? "25%" : "60%" }} />
             }
             {Doc.UserDoc()?.noviceMode || this.facetWidth() < 10 ? (null) : this.filterView}
         </div>);
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss
index c952dc358..aee28366a 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss
@@ -437,9 +437,9 @@
 
             .propertiesView-presTrails-title-icon {
                 float: right;
-                right: 0;
-                position: absolute;
-                margin-left: 2px;
+                justify-items: right;
+                align-items: flex-end;
+                margin-left: auto;
                 margin-right: 9px;
 
                 &:hover {
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
index 4610c0143..2d76e109c 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
@@ -950,12 +950,9 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
             }
             if (this.isPres) {
                 const selectedItem: boolean = PresBox.Instance._selectedArray.length > 0;
-                return <div className="propertiesView" style={{ width: this.props.width }} >
-                    <div className="propertiesView-title" style={{ width: this.props.width }}>
+                return <div className="propertiesView">
+                    <div className="propertiesView-title">
                         Presentation
-                    <div className="propertiesView-title-icon" onPointerDown={this.props.onDown}>
-                            <FontAwesomeIcon icon="times" color="black" size="sm" />
-                        </div>
                     </div>
                     <div className="propertiesView-name">
                         {this.editableTitle}
-- 
cgit v1.2.3-70-g09d2


From 625882842ca6af7563983c52a22543469a0fa319 Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Fri, 7 Aug 2020 00:58:58 -0500
Subject: smaller buttons and bug fix

---
 src/client/views/PropertiesButtons.scss                | 18 +++++++++---------
 src/client/views/PropertiesButtons.tsx                 |  2 +-
 .../collections/collectionFreeForm/PropertiesView.tsx  |  2 +-
 src/client/views/nodes/FontIconBox.scss                |  2 +-
 src/client/views/nodes/PresBox.tsx                     |  3 ++-
 5 files changed, 14 insertions(+), 13 deletions(-)

(limited to 'src/client/views/collections/collectionFreeForm')

diff --git a/src/client/views/PropertiesButtons.scss b/src/client/views/PropertiesButtons.scss
index 6199d34d0..8d9d56c9e 100644
--- a/src/client/views/PropertiesButtons.scss
+++ b/src/client/views/PropertiesButtons.scss
@@ -20,8 +20,8 @@ $linkGap : 3px;
 
 .propertiesButtons-linkButton-empty,
 .propertiesButtons-linkButton-nonempty {
-    height: 30px;
-    width: 32px;
+    height: 25px;
+    width: 29px;
     border-radius: 6px;
     pointer-events: auto;
     background-color: #121721;
@@ -35,7 +35,7 @@ $linkGap : 3px;
     justify-content: center;
     align-items: center;
     margin-right: 10px;
-    margin-left: 3.5px;
+    margin-left: 4px;
 
     &:hover {
         background: $main-accent;
@@ -68,7 +68,7 @@ $linkGap : 3px;
     padding-right: 5px;
     width: 25px;
     border-radius: 5px;
-    margin-right: 22px;
+    margin-right: 20px;
     margin-bottom: 8px;
 }
 
@@ -76,9 +76,9 @@ $linkGap : 3px;
     background: #121721;
     color: white;
     font-size: 6px;
-    width: 40px;
+    width: 37px;
     padding: 3px;
-    height: 13px;
+    height: 12px;
     border-radius: 7px;
     text-transform: uppercase;
     text-align: center;
@@ -86,8 +86,8 @@ $linkGap : 3px;
 }
 
 .propertiesButtons-linker {
-    height: 30px;
-    width: 32px;
+    height: 25px;
+    width: 29px;
     text-align: center;
     border-radius: 6px;
     pointer-events: auto;
@@ -96,7 +96,7 @@ $linkGap : 3px;
     transition: 0.2s ease all;
     margin-right: 5px;
     padding-top: 5px;
-    margin-left: 3.5px;
+    margin-left: 4px;
 
     &:hover {
         background: $main-accent;
diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index a905dc1e7..4255e5caa 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -259,7 +259,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
                         }
                     }}>
                     <FontAwesomeIcon className="documentdecorations-icon" size="lg" icon="map-pin" />
-                    <div style={{ position: 'relative', fontSize: 25, fontWeight: 700, transform: 'translate(0, -20px)', color: 'rgba(250,250,250,0.5)' }}>V</div>
+                    <div style={{ position: 'relative', fontSize: 25, fontWeight: 700, transform: 'translate(0, -28px)', color: 'rgba(250,250,250,0.55)' }}>V</div>
                 </div>
 
                 <div className="propertiesButtons-title">{"View"}</div>
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
index 2d76e109c..5e9159dc2 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
@@ -52,7 +52,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
     @computed get selectedDocumentView() {
         if (SelectionManager.SelectedDocuments().length) {
             return SelectionManager.SelectedDocuments()[0];
-        } else if (PresBox.Instance._selectedArray.length) {
+        } else if (PresBox.Instance && PresBox.Instance._selectedArray.length) {
             return DocumentManager.Instance.getDocumentView(PresBox.Instance.rootDoc);
         } else { return undefined; }
     }
diff --git a/src/client/views/nodes/FontIconBox.scss b/src/client/views/nodes/FontIconBox.scss
index 9709e1dbd..6a540269e 100644
--- a/src/client/views/nodes/FontIconBox.scss
+++ b/src/client/views/nodes/FontIconBox.scss
@@ -60,7 +60,7 @@
 
     .menuButton-icon-square {
         width: auto;
-        height: 32px;
+        height: 29px;
         padding: 4px;
     }
 
diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx
index 502fd51f3..b7af4683e 100644
--- a/src/client/views/nodes/PresBox.tsx
+++ b/src/client/views/nodes/PresBox.tsx
@@ -34,7 +34,8 @@ const PresBoxDocument = makeInterface(documentSchema);
 @observer
 export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>(PresBoxDocument) {
     public static LayoutString(fieldKey: string) { return FieldView.LayoutString(PresBox, fieldKey); }
-    static Instance: PresBox;
+
+    public static Instance: PresBox;
 
     @observable _isChildActive = false;
     @observable _moveOnFromAudio: boolean = true;
-- 
cgit v1.2.3-70-g09d2