Merge pull request #243 from browngraphicslab/toggle_claire

disabled does not show ADD NEW / GROUP buttons

3 files changed, 22 insertions, 21 deletions

diff --git a/src/client/views/collections/CollectionStackingView.scss b/src/client/views/collections/CollectionStackingView.scss
index 14c7f5edd..015955816 100644
--- a/src/client/views/collections/CollectionStackingView.scss
+++ b/src/client/views/collections/CollectionStackingView.scss
@@ -141,7 +141,7 @@
 
             .collectionStackingView-colorPicker {
                 width: 78px;
-                
+
                 .colorOptions {
                     display: flex;
                     flex-wrap: wrap;
@@ -153,7 +153,7 @@
                     height: 20px;
                     border-radius: 10px;
                     margin: 3px;
-        
+
                     &.active {
                         border: 2px solid white;
                         box-shadow: 0 0 0 2px lightgray;
@@ -225,19 +225,20 @@
     .rc-switch {
         position: absolute;
         display: inline-block;
-        bottom: 15px;
-        right: 15px;
-        width: 125px;
-        height: 54px;
+        bottom: 4px;
+        right: 4px;
+        width: 70px;
+        height: 30px;
         border-radius: 40px 40px;
+        background-color: lightslategrey;
     }
 
     .rc-switch:after {
         position: absolute;
-        width: 36px;
-        height: 36px;
-        left: 7px;
-        top: 9px;
+        width: 22px;
+        height: 22px;
+        left: 3px;
+        top: 4px;
         border-radius: 50% 50%;
         background-color: #fff;
         content: " ";
@@ -253,19 +254,19 @@
     }
 
     .rc-switch-checked:after {
-        left: 80px;
+        left: 44px;
     }
 
     .rc-switch-inner {
         color: #fff;
-        font-size: 22px;
+        font-size: 12px;
         position: absolute;
-        left: 50px;
-        top: 14px;
+        left: 28px;
+        top: 8px;
     }
 
     .rc-switch-checked .rc-switch-inner {
-        left: 17px;
+        left: 8px;
     }
 
 
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index 5cfcc3d4b..9741b9e89 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -301,9 +301,9 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
                 {this.props.Document.sectionFilter ? Array.from(this.Sections.entries()).sort(this.sortFunc).
                     map(section => this.section(section[0], section[1])) :
                     this.section(undefined, this.filteredChildren)}
-                {(this.props.Document.sectionFilter && this.props.CollectionView.props.Document.chromeStatus !== 'view-mode') ?
+                {(this.props.Document.sectionFilter && (this.props.CollectionView.props.Document.chromeStatus !== 'view-mode' && this.props.CollectionView.props.Document.chromeStatus !== 'disabled')) ?
                     <div key={`${this.props.Document[Id]}-addGroup`} className="collectionStackingView-addGroupButton"
-                        style={{ width: (this.columnWidth / (headings.length + (this.props.CollectionView.props.Document.chromeStatus !== 'view-mode' ? 1 : 0))) - 10, marginTop: 10 }}>
+                        style={{ width: (this.columnWidth / (headings.length + ((this.props.CollectionView.props.Document.chromeStatus !== 'view-mode' && this.props.CollectionView.props.Document.chromeStatus !== 'disabled') ? 1 : 0))) - 10, marginTop: 10 }}>
                         <EditableView {...editableViewProps} />
                     </div> : null}
                 {this.props.CollectionView.props.Document.chromeStatus !== 'disabled' ? <Switch
diff --git a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
index 460359908..df03da376 100644
--- a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
+++ b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
@@ -297,7 +297,7 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC
                 style={{
                     width: (style.columnWidth) /
                         ((uniqueHeadings.length +
-                            (this.props.parent.props.CollectionView.props.Document.chromeStatus !== 'view-mode' ? 1 : 0)) || 1)
+                            ((this.props.parent.props.CollectionView.props.Document.chromeStatus !== 'view-mode' && this.props.parent.props.CollectionView.props.Document.chromeStatus !== 'disabled') ? 1 : 0)) || 1)
                 }}>
                 {/* the default bucket (no key value) has a tooltip that describes what it is.
                     Further, it does not have a color and cannot be deleted. */}
@@ -328,7 +328,7 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC
             </div> : (null);
         for (let i = 0; i < cols; i++) templatecols += `${style.columnWidth}px `;
         return (
-            <div key={heading} style={{ width: `${100 / ((uniqueHeadings.length + (this.props.parent.props.CollectionView.props.Document.chromeStatus !== 'view-mode' ? 1 : 0)) || 1)}%`, background: this._background }}
+            <div key={heading} style={{ width: `${100 / ((uniqueHeadings.length + ((this.props.parent.props.CollectionView.props.Document.chromeStatus !== 'view-mode' && this.props.parent.props.CollectionView.props.Document.chromeStatus !== 'disabled') ? 1 : 0)) || 1)}%`, background: this._background }}
                 ref={this.createColumnDropRef} onPointerEnter={this.pointerEntered} onPointerLeave={this.pointerLeave}>
                 {headingView}
                 <div key={`${heading}-stack`} className={`collectionStackingView-masonry${singleColumn ? "Single" : "Grid"}`}
@@ -346,9 +346,9 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC
                     {this.children(this.props.docList)}
                     {singleColumn ? (null) : this.props.parent.columnDragger}
                 </div>
-                {(this.props.parent.props.CollectionView.props.Document.chromeStatus !== 'view-mode') ?
+                {(this.props.parent.props.CollectionView.props.Document.chromeStatus !== 'view-mode' && this.props.parent.props.CollectionView.props.Document.chromeStatus !== 'disabled') ?
                     <div key={`${heading}-add-document`} className="collectionStackingView-addDocumentButton"
-                        style={{ width: style.columnWidth / (uniqueHeadings.length + (this.props.parent.props.CollectionView.props.Document.chromeStatus !== 'view-mode' ? 1 : 0)) }}>
+                        style={{ width: style.columnWidth / (uniqueHeadings.length + 1) }}>
                         <EditableView {...newEditableViewProps} />
                     </div> : null}
             </div>