switched mcview labels to editable views

4 files changed, 53 insertions, 17 deletions

diff --git a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.scss b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.scss
index 062b8ac11..f57ba438a 100644
--- a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.scss
+++ b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.scss
@@ -8,8 +8,10 @@
         display: flex;
         flex-direction: column;
 
-        .display {
-            text-align: center;
+        .label-wrapper {
+            display: flex;
+            flex-direction: row;
+            justify-content: center;
             height: 20px;
         }
 
diff --git a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx
index d2209224f..70e56183c 100644
--- a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx
+++ b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx
@@ -26,7 +26,12 @@ interface LayoutData {
     starSum: number;
 }
 
-const resolvedUnits = ["*", "px"];
+export const WidthUnit = {
+    Pixel: "px",
+    Ratio: "*"
+};
+
+const resolvedUnits = Object.values(WidthUnit);
 const resizerWidth = 4;
 
 @observer
@@ -38,7 +43,7 @@ export class CollectionMulticolumnView extends CollectionSubView(MulticolumnDocu
      */
     @computed
     private get ratioDefinedDocs() {
-        return this.childLayoutPairs.map(({ layout }) => layout).filter(({ widthUnit }) => StrCast(widthUnit) === "*");
+        return this.childLayoutPairs.map(({ layout }) => layout).filter(({ widthUnit }) => StrCast(widthUnit) === WidthUnit.Ratio);
     }
 
     /**
@@ -57,7 +62,7 @@ export class CollectionMulticolumnView extends CollectionSubView(MulticolumnDocu
             const unit = StrCast(widthUnit);
             const magnitude = NumCast(widthMagnitude);
             if (unit && magnitude && magnitude > 0 && resolvedUnits.includes(unit)) {
-                (unit === "*") && (starSum += magnitude);
+                (unit === WidthUnit.Ratio) && (starSum += magnitude);
                 widthSpecifiers.push({ magnitude, unit });
             }
             /**
@@ -74,7 +79,7 @@ export class CollectionMulticolumnView extends CollectionSubView(MulticolumnDocu
          */
         setTimeout(() => {
             const { ratioDefinedDocs } = this;
-            if (ratioDefinedDocs.length > 1) {
+            if (this.childLayoutPairs.length) {
                 const minimum = Math.min(...ratioDefinedDocs.map(({ widthMagnitude }) => NumCast(widthMagnitude)));
                 if (minimum !== 0) {
                     ratioDefinedDocs.forEach(layout => layout.widthMagnitude = NumCast(layout.widthMagnitude) / minimum);
@@ -96,7 +101,7 @@ export class CollectionMulticolumnView extends CollectionSubView(MulticolumnDocu
     @computed
     private get totalFixedAllocation(): number | undefined {
         return this.resolvedLayoutInformation?.widthSpecifiers.reduce(
-            (sum, { magnitude, unit }) => sum + (unit === "px" ? magnitude : 0), 0);
+            (sum, { magnitude, unit }) => sum + (unit === WidthUnit.Pixel ? magnitude : 0), 0);
     }
 
     /**
@@ -110,7 +115,7 @@ export class CollectionMulticolumnView extends CollectionSubView(MulticolumnDocu
      */
     @computed
     private get totalRatioAllocation(): number | undefined {
-        const layoutInfoLen = this.ratioDefinedDocs.length;
+        const layoutInfoLen = this.resolvedLayoutInformation.widthSpecifiers.length;
         if (layoutInfoLen > 0 && this.totalFixedAllocation !== undefined) {
             return this.props.PanelWidth() - (this.totalFixedAllocation + resizerWidth * (layoutInfoLen - 1));
         }
@@ -154,7 +159,7 @@ export class CollectionMulticolumnView extends CollectionSubView(MulticolumnDocu
             return 0; // we're still waiting on promises to resolve
         }
         let width = NumCast(layout.widthMagnitude);
-        if (StrCast(layout.widthUnit) === "*") {
+        if (StrCast(layout.widthUnit) === WidthUnit.Ratio) {
             width *= columnUnitLength;
         }
         return width;
diff --git a/src/client/views/collections/collectionMulticolumn/MulticolumnResizer.tsx b/src/client/views/collections/collectionMulticolumn/MulticolumnResizer.tsx
index aab98ecfd..11e210958 100644
--- a/src/client/views/collections/collectionMulticolumn/MulticolumnResizer.tsx
+++ b/src/client/views/collections/collectionMulticolumn/MulticolumnResizer.tsx
@@ -3,6 +3,7 @@ import { observer } from "mobx-react";
 import { observable, action } from "mobx";
 import { Doc } from "../../../../new_fields/Doc";
 import { NumCast, StrCast } from "../../../../new_fields/Types";
+import { WidthUnit } from "./CollectionMulticolumnView";
 
 interface ResizerProps {
     width: number;
@@ -46,12 +47,12 @@ export default class ResizeBar extends React.Component<ResizerProps> {
         if (unitLength) {
             if (toNarrow) {
                 const { widthUnit, widthMagnitude } = toNarrow;
-                const scale = widthUnit === "*" ? unitLength : 1;
+                const scale = widthUnit === WidthUnit.Ratio ? unitLength : 1;
                 toNarrow.widthMagnitude = NumCast(widthMagnitude) - Math.abs(movementX) / scale;
             }
             if (this.resizeMode === ResizeMode.Pinned && toWiden) {
                 const { widthUnit, widthMagnitude } = toWiden;
-                const scale = widthUnit === "*" ? unitLength : 1;
+                const scale = widthUnit === WidthUnit.Ratio ? unitLength : 1;
                 toWiden.widthMagnitude = NumCast(widthMagnitude) + Math.abs(movementX) / scale;
             }
         }
@@ -60,17 +61,17 @@ export default class ResizeBar extends React.Component<ResizerProps> {
     private get isActivated() {
         const { toLeft, toRight } = this.props;
         if (toLeft && toRight) {
-            if (StrCast(toLeft.widthUnit) === "px" && StrCast(toRight.widthUnit) === "px") {
+            if (StrCast(toLeft.widthUnit) === WidthUnit.Pixel && StrCast(toRight.widthUnit) === WidthUnit.Pixel) {
                 return false;
             }
             return true;
         } else if (toLeft) {
-            if (StrCast(toLeft.widthUnit) === "px") {
+            if (StrCast(toLeft.widthUnit) === WidthUnit.Pixel) {
                 return false;
             }
             return true;
         } else if (toRight) {
-            if (StrCast(toRight.widthUnit) === "px") {
+            if (StrCast(toRight.widthUnit) === WidthUnit.Pixel) {
                 return false;
             }
             return true;
diff --git a/src/client/views/collections/collectionMulticolumn/MulticolumnWidthLabel.tsx b/src/client/views/collections/collectionMulticolumn/MulticolumnWidthLabel.tsx
index e33d4c169..b394fed62 100644
--- a/src/client/views/collections/collectionMulticolumn/MulticolumnWidthLabel.tsx
+++ b/src/client/views/collections/collectionMulticolumn/MulticolumnWidthLabel.tsx
@@ -3,6 +3,8 @@ import { observer } from "mobx-react";
 import { computed } from "mobx";
 import { Doc } from "../../../../new_fields/Doc";
 import { NumCast, StrCast, BoolCast } from "../../../../new_fields/Types";
+import { EditableView } from "../../EditableView";
+import { WidthUnit } from "./CollectionMulticolumnView";
 
 interface WidthLabelProps {
     layout: Doc;
@@ -16,9 +18,35 @@ export default class WidthLabel extends React.Component<WidthLabelProps> {
     @computed
     private get contents() {
         const { layout, decimals } = this.props;
-        const magnitude = +NumCast(layout.widthMagnitude).toFixed(decimals ?? 3);
-        const unit = StrCast(layout.widthUnit);
-        return <span className={"display"}>{magnitude} {unit}</span>;
+        const getUnit = () => StrCast(layout.widthUnit);
+        const getMagnitude = () => String(+NumCast(layout.widthMagnitude).toFixed(decimals ?? 3));
+        return (
+            <div className={"label-wrapper"}>
+                <EditableView
+                    GetValue={getMagnitude}
+                    SetValue={value => {
+                        const converted = Number(value);
+                        if (!isNaN(converted) && converted > 0) {
+                            layout.widthMagnitude = converted;
+                            return true;
+                        }
+                        return false;
+                    }}
+                    contents={getMagnitude()}
+                />
+                <EditableView
+                    GetValue={getUnit}
+                    SetValue={value => {
+                        if (Object.values(WidthUnit).includes(value)) {
+                            layout.widthUnit = value;
+                            return true;
+                        }
+                        return false;
+                    }}
+                    contents={getUnit()}
+                />
+            </div>
+        );
     }
 
     render() {