new UI for collapsing

3 files changed, 64 insertions, 36 deletions

diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index 95d0df14e..eecf670e6 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -206,7 +206,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
         const isPinned = targetDoc && Doc.isDocPinned(targetDoc);
         return !targetDoc ? (null) : <Tooltip title={<><div className="dash-tooltip">{Doc.isDocPinned(targetDoc) ? "Unpin from presentation" : "Pin to presentation"}</div></>}>
             <div className="propertiesButtons-linker"
-                style={{ backgroundColor: isPinned ? "white" : "#121721", color: isPinned ? "black" : "white" }}
+                style={{ backgroundColor: isPinned ? "white" : "rgb(37, 43, 51)", color: isPinned ? "black" : "white" }}
                 onClick={e => DockedFrameRenderer.PinDoc(targetDoc, isPinned)}>
                 <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="map-pin"
                 />
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss
index 1fda8e5a2..cb4b7375b 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss
@@ -48,20 +48,26 @@
 
     .propertiesView-settings {
         border-bottom: 1px solid black;
-        padding: 8.5px;
+        //padding: 8.5px;
         font-size: 12.5px;
         font-weight: bold;
 
         .propertiesView-settings-title {
             font-weight: bold;
             font-size: 12.5px;
-            padding-bottom: 7px;
+            padding: 4px;
             display: flex;
             width: 200px;
+            color: white;
+            padding-left: 8px;
+            background-color: rgb(51, 51, 51);
 
             .propertiesView-settings-title-icon {
+                float: right;
+                right: 0;
+                position: absolute;
                 margin-left: 2px;
-                margin-right: 7px;
+                margin-right: 9px;
 
                 &:hover {
                     cursor: pointer;
@@ -70,25 +76,33 @@
         }
 
         .propertiesView-settings-content {
-            margin-left: 5px;
+            margin-left: 12px;
             padding-bottom: 10px;
+            padding-top: 8px;
         }
 
     }
 
     .propertiesView-sharing {
         border-bottom: 1px solid black;
-        padding: 8.5px;
+        //padding: 8.5px;
 
         .propertiesView-sharing-title {
-            font-size: 12.5px;
             font-weight: bold;
-            padding-bottom: 7px;
+            font-size: 12.5px;
+            padding: 4px;
             display: flex;
+            width: 200px;
+            color: white;
+            padding-left: 8px;
+            background-color: rgb(51, 51, 51);
 
             .propertiesView-sharing-title-icon {
+                float: right;
+                right: 0;
+                position: absolute;
                 margin-left: 2px;
-                margin-right: 7px;
+                margin-right: 9px;
 
                 &:hover {
                     cursor: pointer;
@@ -98,6 +112,7 @@
 
         .propertiesView-sharing-content {
             font-size: 10px;
+            padding: 10px;
             margin-left: 5px;
         }
     }
@@ -165,9 +180,6 @@
 
                 .permissions-select {
                     z-index: 1;
-                    //border: 0.5px solid grey;
-                    //border-radius: 4px;
-                    //outline: none;
                     border: none;
                     background-color: inherit;
                     width: 75px;
@@ -186,11 +198,17 @@
 
     .propertiesView-fields {
         border-bottom: 1px solid black;
-        padding: 8.5px;
+        //padding: 8.5px;
 
         .propertiesView-fields-title {
-            padding-bottom: 7px;
+            font-weight: bold;
+            font-size: 12.5px;
+            padding: 4px;
             display: flex;
+            width: 200px;
+            color: white;
+            padding-left: 8px;
+            background-color: rgb(51, 51, 51);
 
             .propertiesView-fields-title-name {
                 font-size: 12.5px;
@@ -201,8 +219,11 @@
             }
 
             .propertiesView-fields-title-icon {
+                float: right;
+                right: 0;
+                position: absolute;
                 margin-left: 2px;
-                margin-right: 7px;
+                margin-right: 9px;
 
                 &:hover {
                     cursor: pointer;
@@ -225,7 +246,8 @@
 
         .propertiesView-fields-content {
             font-size: 10px;
-            margin-left: 5px;
+            margin-left: 2px;
+            padding: 10px;
 
             &:hover {
                 cursor: pointer;
@@ -254,17 +276,23 @@
     }
 
     .propertiesView-layout {
-        padding: 8.5px;
 
         .propertiesView-layout-title {
             font-weight: bold;
             font-size: 12.5px;
-            padding-bottom: 7px;
+            padding: 4px;
             display: flex;
+            width: 200px;
+            color: white;
+            padding-left: 8px;
+            background-color: rgb(51, 51, 51);
 
             .propertiesView-layout-title-icon {
+                float: right;
+                right: 0;
+                position: absolute;
                 margin-left: 2px;
-                margin-right: 7px;
+                margin-right: 9px;
 
                 &:hover {
                     cursor: pointer;
@@ -273,8 +301,8 @@
         }
 
         .propertiesView-layout-content {
-            margin-left: 5px;
             overflow: hidden;
+            padding: 10px;
         }
 
     }
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
index 91d407eea..d5317efcb 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
@@ -360,55 +360,55 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                 {this.editableTitle}
             </div>
             <div className="propertiesView-settings">
-                <div className="propertiesView-settings-title">
+                <div className="propertiesView-settings-title" style={{ backgroundColor: this.openActions ? "black" : "" }}>
+                    Document Actions
                     <div className="propertiesView-settings-title-icon"
                         onPointerDown={() => runInAction(() => { this.openActions = !this.openActions; })}>
-                        <FontAwesomeIcon icon={this.openActions ? "caret-down" : "caret-right"} size="lg" color="black" />
+                        <FontAwesomeIcon icon={this.openActions ? "caret-down" : "caret-right"} size="lg" color="white" />
                     </div>
-                    Document Actions
                 </div>
                 {this.openActions ? <div className="propertiesView-settings-content">
                     <PropertiesButtons />
                 </div> : null}
             </div>
             <div className="propertiesView-sharing">
-                <div className="propertiesView-sharing-title">
+                <div className="propertiesView-sharing-title" style={{ backgroundColor: this.openSharing ? "black" : "" }}>
+                    Sharing {"&"} Permissions
                     <div className="propertiesView-sharing-title-icon"
                         onPointerDown={() => runInAction(() => { this.openSharing = !this.openSharing; })}>
-                        <FontAwesomeIcon icon={this.openSharing ? "caret-down" : "caret-right"} size="lg" color="black" />
+                        <FontAwesomeIcon icon={this.openSharing ? "caret-down" : "caret-right"} size="lg" color="white" />
                     </div>
-                    Sharing {"&"} Permissions
                 </div>
                 {this.openSharing ? <div className="propertiesView-sharing-content">
                     {this.sharingTable}
                 </div> : null}
             </div>
             <div className="propertiesView-fields">
-                <div className="propertiesView-fields-title">
+                <div className="propertiesView-fields-title" style={{ backgroundColor: this.openFields ? "black" : "" }}>
                     <div className="propertiesView-fields-title-name">
+                        Fields {"&"} Tags
                         <div className="propertiesView-fields-title-icon"
                             onPointerDown={() => runInAction(() => { this.openFields = !this.openFields; })}>
-                            <FontAwesomeIcon icon={this.openFields ? "caret-down" : "caret-right"} size="lg" color="black" />
+                            <FontAwesomeIcon icon={this.openFields ? "caret-down" : "caret-right"} size="lg" color="white" />
                         </div>
-                        Fields {"&"} Tags
                     </div>
-                    {!novice && this.openFields ? <div className="propertiesView-fields-title-checkbox">
-                        {this.fieldsCheckbox}
-                        <div className="propertiesView-fields-title-checkbox-text">Layout</div>
-                    </div> : null}
                 </div>
+                {!novice && this.openFields ? <div className="propertiesView-fields-title-checkbox">
+                    {this.fieldsCheckbox}
+                    <div className="propertiesView-fields-title-checkbox-text">Layout</div>
+                </div> : null}
                 {this.openFields ?
                     <div className="propertiesView-fields-content">
                         {novice ? this.noviceFields : this.expandedField}
                     </div> : null}
             </div>
             <div className="propertiesView-layout">
-                <div className="propertiesView-layout-title" >
+                <div className="propertiesView-layout-title" style={{ backgroundColor: this.openLayout ? "black" : "" }}>
+                    Layout
                     <div className="propertiesView-layout-title-icon"
                         onPointerDown={() => runInAction(() => { this.openLayout = !this.openLayout; })}>
-                        <FontAwesomeIcon icon={this.openLayout ? "caret-down" : "caret-right"} size="lg" color="black" />
+                        <FontAwesomeIcon icon={this.openLayout ? "caret-down" : "caret-right"} size="lg" color="white" />
                     </div>
-                    Layout
                 </div>
                 {this.openLayout ? <div className="propertiesView-layout-content">{this.layoutPreview}</div> : null}
             </div>