From 45f4e8f821817e724fd2567ef05c178d7f7640ea Mon Sep 17 00:00:00 2001
From: Melissa Zhang <mzhang19096@gmail.com>
Date: Thu, 4 Jun 2020 16:33:45 -0700
Subject: added customizable scrollSpeed field in dropdown bar

---
 .../views/collections/CollectionViewChromes.scss   | 75 ++++++++++++++--------
 .../views/collections/CollectionViewChromes.tsx    | 36 +++++++++++
 2 files changed, 83 insertions(+), 28 deletions(-)

diff --git a/src/client/views/collections/CollectionViewChromes.scss b/src/client/views/collections/CollectionViewChromes.scss
index 03bd9a01a..b98dab707 100644
--- a/src/client/views/collections/CollectionViewChromes.scss
+++ b/src/client/views/collections/CollectionViewChromes.scss
@@ -3,7 +3,7 @@
 
 .collectionViewChrome-cont {
     position: absolute;
-    width:100%;
+    width: 100%;
     opacity: 0.9;
     z-index: 9001;
     transition: top .5s;
@@ -13,7 +13,7 @@
     .collectionViewChrome {
         display: flex;
         padding-bottom: 1px;
-        height:32px;
+        height: 32px;
         border-bottom: .5px solid rgb(180, 180, 180);
         overflow: hidden;
 
@@ -35,7 +35,7 @@
                 outline-color: black;
             }
 
-            .collectionViewBaseChrome-button{
+            .collectionViewBaseChrome-button {
                 font-size: 75%;
                 text-transform: uppercase;
                 letter-spacing: 2px;
@@ -46,6 +46,7 @@
                 padding: 12px 10px 11px 10px;
                 margin-left: 10px;
             }
+
             .collectionViewBaseChrome-cmdPicker {
                 margin-left: 3px;
                 margin-right: 0px;
@@ -54,15 +55,17 @@
                 border: none;
                 color: grey;
             }
+
             .commandEntry-outerDiv {
                 pointer-events: all;
                 background-color: gray;
                 display: flex;
                 flex-direction: row;
-                height:30px;
+                height: 30px;
+
                 .commandEntry-drop {
-                    color:white;
-                    width:25px;
+                    color: white;
+                    width: 25px;
                     margin-top: auto;
                     margin-bottom: auto;
                 }
@@ -76,15 +79,17 @@
                 pointer-events: all;
                 // margin-top: 10px;
             }
+
             .collectionViewBaseChrome-template,
             .collectionViewBaseChrome-viewModes {
                 display: grid;
                 background: rgb(238, 238, 238);
-                color:grey;
-                margin-top:auto;
-                margin-bottom:auto;
+                color: grey;
+                margin-top: auto;
+                margin-bottom: auto;
                 margin-left: 5px;
             }
+
             .collectionViewBaseChrome-viewModes {
                 margin-left: 25px;
             }
@@ -92,7 +97,7 @@
             .collectionViewBaseChrome-viewSpecs {
                 margin-left: 5px;
                 display: grid;
-                
+
                 .collectionViewBaseChrome-filterIcon {
                     position: relative;
                     display: flex;
@@ -165,7 +170,8 @@
 
 
         .collectionStackingViewChrome-cont,
-        .collectionTreeViewChrome-cont {
+        .collectionTreeViewChrome-cont,
+        .collection3DCarouselViewChrome-cont {
             display: flex;
             justify-content: space-between;
         }
@@ -189,23 +195,26 @@
 
 
         .collectionStackingViewChrome-pivotField-cont,
-        .collectionTreeViewChrome-pivotField-cont {
+        .collectionTreeViewChrome-pivotField-cont,
+        .collection3DCarouselViewChrome-scrollSpeed-cont {
             justify-self: right;
             display: flex;
             font-size: 75%;
             letter-spacing: 2px;
 
             .collectionStackingViewChrome-pivotField-label,
-            .collectionTreeViewChrome-pivotField-label {
+            .collectionTreeViewChrome-pivotField-label,
+            .collection3DCarouselViewChrome-scrollSpeed-label {
                 vertical-align: center;
                 padding-left: 10px;
-                margin:auto;
+                margin: auto;
             }
 
             .collectionStackingViewChrome-pivotField,
-            .collectionTreeViewChrome-pivotField {
+            .collectionTreeViewChrome-pivotField,
+            .collection3DCarouselViewChrome-scrollSpeed {
                 color: white;
-                width:100%;
+                width: 100%;
                 min-width: 100px;
                 display: flex;
                 align-items: center;
@@ -215,7 +224,7 @@
                 input,
                 .editableView-container-editing-oneLine,
                 .editableView-container-editing {
-                    margin:auto;
+                    margin: auto;
                     border: 0px;
                     color: grey;
                     text-align: center;
@@ -233,7 +242,8 @@
         }
 
         .collectionStackingViewChrome-pivotField:hover,
-        .collectionTreeViewChrome-pivotField:hover {
+        .collectionTreeViewChrome-pivotField:hover,
+        .collection3DCarouselViewChrome-scrollSpeed:hover {
             cursor: text;
         }
     }
@@ -244,7 +254,10 @@
     display: flex;
     position: relative;
     align-items: center;
-    .fwdKeyframe, .numKeyframe, .backKeyframe {
+
+    .fwdKeyframe,
+    .numKeyframe,
+    .backKeyframe {
         cursor: pointer;
         position: absolute;
         width: 20;
@@ -253,26 +266,31 @@
         background: gray;
         display: flex;
         align-items: center;
-        color:white;
+        color: white;
     }
+
     .backKeyframe {
-        left:0;
+        left: 0;
+
         svg {
-            display:block;
-            margin:auto;
+            display: block;
+            margin: auto;
         }
     }
+
     .numKeyframe {
-        left:20;
+        left: 20;
         display: flex;
         flex-direction: column;
         padding: 5px;
     }
+
     .fwdKeyframe {
-        left:40;
+        left: 40;
+
         svg {
-            display:block;
-            margin:auto;
+            display: block;
+            margin: auto;
         }
     }
 }
@@ -334,8 +352,9 @@
     flex-direction: column;
     height: 40px;
 }
+
 .commandEntry-inputArea {
-    display:flex;
+    display: flex;
     flex-direction: row;
     width: 150px;
     margin: auto auto auto auto;
diff --git a/src/client/views/collections/CollectionViewChromes.tsx b/src/client/views/collections/CollectionViewChromes.tsx
index 199902923..e17e86e05 100644
--- a/src/client/views/collections/CollectionViewChromes.tsx
+++ b/src/client/views/collections/CollectionViewChromes.tsx
@@ -202,6 +202,7 @@ export class CollectionViewBaseChrome extends React.Component<CollectionViewChro
             case CollectionViewType.Schema: return (<CollectionSchemaViewChrome key="collchrome" PanelWidth={this.props.PanelWidth} CollectionView={this.props.CollectionView} type={this.props.type} />);
             case CollectionViewType.Tree: return (<CollectionTreeViewChrome key="collchrome" PanelWidth={this.props.PanelWidth} CollectionView={this.props.CollectionView} type={this.props.type} />);
             case CollectionViewType.Masonry: return (<CollectionStackingViewChrome key="collchrome" PanelWidth={this.props.PanelWidth} CollectionView={this.props.CollectionView} type={this.props.type} />);
+            case CollectionViewType.Carousel3D: return (<Collection3DCarouselViewChrome key="collchrome" PanelWidth={this.props.PanelWidth} CollectionView={this.props.CollectionView} type={this.props.type} />);
             default: return null;
         }
     }
@@ -563,3 +564,38 @@ export class CollectionTreeViewChrome extends React.Component<CollectionViewChro
     }
 }
 
+@observer
+export class Collection3DCarouselViewChrome extends React.Component<CollectionViewChromeProps> {
+    @computed get scrollSpeed() {
+        return this.props.CollectionView.props.Document._autoScrollSpeed;
+    }
+
+    @action
+    setValue = (value: string) => {
+        const numValue = Number(StrCast(value));
+        if (numValue > 0) {
+            this.props.CollectionView.props.Document._autoScrollSpeed = numValue;
+            return true;
+        }
+        return false;
+    }
+
+    render() {
+        return (
+            <div className="collection3DCarouselViewChrome-cont">
+                <div className="collection3DCarouselViewChrome-scrollSpeed-cont">
+                    <div className="collectionStackingViewChrome-scrollSpeed-label">
+                        AUTOSCROLL SPEED:
+                    </div>
+                    <div className="collection3DCarouselViewChrome-scrollSpeed">
+                        <EditableView
+                            GetValue={() => StrCast(this.scrollSpeed)}
+                            oneLine
+                            SetValue={this.setValue}
+                            contents={this.scrollSpeed ? this.scrollSpeed : 1000} />
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
-- 
cgit v1.2.3-70-g09d2