ui updates + progressivize features

3 files changed, 119 insertions, 59 deletions

diff --git a/src/client/views/collections/CollectionMenu.scss b/src/client/views/collections/CollectionMenu.scss
index 348b9e6ea..929c22c35 100644
--- a/src/client/views/collections/CollectionMenu.scss
+++ b/src/client/views/collections/CollectionMenu.scss
@@ -312,44 +312,44 @@
     align-items: center;
 
     .fwdKeyframe,
-    .numKeyframe,
-    .backKeyframe {
-        cursor: pointer;
-        position: absolute;
-        width: 20;
-        height: 30;
-        bottom: 0;
-        background: #121721;
-        display: flex;
-        align-items: center;
-        color: white;
-    }
+.numKeyframe,
+.backKeyframe {
+    cursor: pointer;
+    position: absolute;
+    width: 20;
+    height: 30;
+    bottom: 0;
+    background: #121721;
+    display: flex;
+    align-items: center;
+    color: white;
+}
 
-    .backKeyframe {
-        left: 0;
+.backKeyframe {
+    left: 0;
 
-        svg {
-            display: block;
-            margin: auto;
-        }
+    svg {
+        display: block;
+        margin: auto;
     }
+}
 
-    .numKeyframe {
-        left: 20;
-        display: flex;
-        flex-direction: column;
-        padding: 5px;
-    }
+.numKeyframe {
+    left: 20;
+    display: flex;
+    flex-direction: column;
+    padding: 5px;
+}
 
-    .fwdKeyframe {
-        left: 40;
+.fwdKeyframe {
+    left: 40;
 
-        svg {
-            display: block;
-            margin: auto;
-        }
+    svg {
+        display: block;
+        margin: auto;
     }
 }
+}
 
 .collectionSchemaViewChrome-cont {
     display: flex;
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
index fad90ca32..b50a93775 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
@@ -46,21 +46,69 @@
     }
 }
 
+.pathOrder {
+    position: absolute;
+    z-index: 200000;
+
+    .pathOrder-frame {
+        position: absolute;
+        width: 40;
+        text-align: center;
+        font-size: 30;
+        background-color: #69a6db;
+        font-family: Roboto;
+        font-weight: 300;
+    }
+}
+
 .progressivizeButton {
     position: absolute;
-    display: flex;
+    display: grid;
+    grid-template-columns: auto 20px auto;
     transform: translate(-105%, 0);
     align-items: center;
     border: black solid 1px;
     border-radius: 3px;
     justify-content: center;
-    width: 30;
+    width: 40;
+    z-index: 30000;
     height: 20;
-    background-color: #c8c8c8;
+    overflow: hidden;
+    background-color: #d5dce2;
+    transition: all 1s;
+
+    .progressivizeButton-prev:hover {
+        color: #5a9edd;
+    }
+
+    .progressivizeButton-frame {
+        justify-self: center;
+        text-align: center;
+        width: 15px;
+    }
+
+    .progressivizeButton-next:hover {
+        color: #5a9edd;
+    }
+}
+
+.progressivizeMove-frame {
+    width: 40px;
+    border-radius: 2px;
+    z-index: 100000;
+    color: white;
+    text-align: center;
+    background-color: #5a9edd;
+    transform: translate(-105%, -110%);
 }
 
 .progressivizeButton:hover {
-    background-color: #aedef8;
+    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.5);
+
+    .progressivizeButton-frame {
+        background-color: #5a9edd;
+        color: white;
+    }
 }
 
 .collectionFreeform-customText {
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 45c5c6a40..953b218b2 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -1408,7 +1408,7 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
                     centeringShiftX={this.centeringShiftX}
                     centeringShiftY={this.centeringShiftY}
                     presPaths={BoolCast(this.Document.presPathView)}
-                    // progressivize={BoolCast(this.Document.editProgressivize)}
+                    progressivize={BoolCast(this.Document.editProgressivize)}
                     transition={Cast(this.layoutDoc._viewTransition, "string", null)}
                     viewDefDivClick={this.props.viewDefDivClick}
                     zoomScaling={this.zoomScaling} panX={this.panX} panY={this.panY}>
@@ -1493,44 +1493,56 @@ interface CollectionFreeFormViewPannableContentsProps {
     children: () => JSX.Element[];
     transition?: string;
     presPaths?: boolean;
-    // progressivize?: boolean;
+    progressivize?: boolean;
 }
 
 @observer
 class CollectionFreeFormViewPannableContents extends React.Component<CollectionFreeFormViewPannableContentsProps>{
-    // @computed get progressivize() {
-    //     if (this.props.progressivize) {
-    //         console.log("should render");
-    //         return (
-    //             <>
-    //                 {PresBox.Instance.progressivizeChildDocs}
-    //             </>
-    //         );
-    //     }
-    // }
+    @computed get progressivize() {
+        if (this.props.progressivize) {
+            console.log("should render");
+            return (
+                <>
+                    {PresBox.Instance.progressivizeChildDocs}
+                </>
+            );
+        }
+    }
 
     @computed get presPaths() {
         const presPaths = "presPaths" + (this.props.presPaths ? "" : "-hidden");
         if (this.props.presPaths) {
             return (
-                <svg className={presPaths}>
-                    <defs>
-                        <marker id="arrow" markerWidth="5" overflow="visible" markerHeight="3" refX="0" refY="3" orient="auto" markerUnits="strokeWidth">
-                            <path d="M0,0 L0,6 L9,3 z" fill="#40B3D8" />
-                        </marker>
-                        <marker id="square" markerWidth="3" markerHeight="3"
-                            refX="5" refY="5" orient="auto">
-                            <path d="M 5,1 L 9,5 5,9 1,5 z" fill="#40B3D8" />
-                        </marker>
-                    </defs>;
+                <>
+                    <div>{PresBox.Instance.order}</div>
+                    <svg className={presPaths}>
+                        <defs>
+                            <marker id="arrow" markerWidth="3" overflow="visible" markerHeight="3" refX="5" refY="5" orient="auto" markerUnits="strokeWidth">
+                                <path d="M0,0 L0,6 L9,3 z" fill="#69a6db" />
+                            </marker>
+                            <marker id="square" markerWidth="3" markerHeight="3" overflow="visible"
+                                refX="5" refY="5" orient="auto" markerUnits="strokeWidth">
+                                <path d="M 5,1 L 9,5 5,9 1,5 z" fill="#69a6db" />
+                            </marker>
+                            <marker id="markerSquare" markerWidth="7" markerHeight="7" refX="4" refY="4"
+                                orient="auto" overflow="visible">
+                                <rect width="3" height="3" fill="#69a6db" />
+                            </marker>
+
+                            <marker id="markerArrow" markerWidth="5" markerHeight="5" refX="2" refY="3"
+                                orient="auto" overflow="visible">
+                                <path d="M2,2 L2,13 L8,7 L2,2" fill="#69a6db" />
+                            </marker>
+                        </defs>;
                     {PresBox.Instance.paths}
-                </svg>
+                    </svg>
+                </>
             );
         }
     }
 
     render() {
-        trace();
+        // trace();
         const freeformclass = "collectionfreeformview" + (this.props.viewDefDivClick ? "-viewDef" : "-none");
         const cenx = this.props.centeringShiftX();
         const ceny = this.props.centeringShiftY();
@@ -1544,7 +1556,7 @@ class CollectionFreeFormViewPannableContents extends React.Component<CollectionF
             }}>
             {this.props.children()}
             {this.presPaths}
-            {/* {this.progressivize} */}
+            {this.progressivize}
         </div>;
     }
 }