changed css, fixed flickering bug for boolean sorts

3 files changed, 69 insertions, 14 deletions

diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index cfd4df9fc..1f19437be 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -27,6 +27,7 @@ import "./CollectionTreeView.scss";
 import React = require("react");
 import { ComputedField, ScriptField } from '../../../new_fields/ScriptField';
 import { KeyValueBox } from '../nodes/KeyValueBox';
+import { exportNamedDeclaration } from 'babel-types';
 
 
 export interface TreeViewProps {
@@ -428,9 +429,9 @@ class TreeView extends React.Component<TreeViewProps> {
                 return first > second ? 1 : -1;
             }
             if (typeof first === 'boolean' && typeof second === 'boolean') {
-                // if (first === second) { // bugfixing?: otherwise, the list "flickers" because the list is resorted during every load
-                //     return Number(descA.x) > Number(descB.y) ? 1 : -1;
-                // }
+                if (first === second) { // bugfixing?: otherwise, the list "flickers" because the list is resorted during every load
+                    return Number(descA.x) > Number(descB.x) ? 1 : -1;
+                }
                 return first > second ? 1 : -1;
             }
             return descending ? 1 : -1;
@@ -579,10 +580,6 @@ export class CollectionTreeView extends CollectionSubView(Document) {
                 {this.props.Document.allowClear ? this.renderClearButton : (null)}
                 <ul className="no-indent" style={{ width: "max-content" }} >
                     {
-                        // this.props.Document.sectionFilter ?
-                        //     TreeView.GetChildElements(this.childDocs, this.props.Document[Id], this.props.Document, this.props.DataDoc, this.props.fieldKey, addDoc, this.remove,
-                        //         moveDoc, dropAction, this.props.addDocTab, this.props.ScreenToLocalTransform, this.outerXf, this.props.active, this.props.PanelWidth, this.props.renderDepth)
-                        //     :
                         TreeView.GetChildElements(this.childDocs, this.props.Document[Id], this.props.Document, this.props.DataDoc, this.props.fieldKey, addDoc, this.remove,
                             moveDoc, dropAction, this.props.addDocTab, this.props.ScreenToLocalTransform, this.outerXf, this.props.active, this.props.PanelWidth, this.props.renderDepth)
                     }
diff --git a/src/client/views/collections/CollectionViewChromes.scss b/src/client/views/collections/CollectionViewChromes.scss
index 793cb7a8b..d02daa366 100644
--- a/src/client/views/collections/CollectionViewChromes.scss
+++ b/src/client/views/collections/CollectionViewChromes.scss
@@ -220,4 +220,62 @@
             margin-left: 50px;
         }
     }
+}
+
+.collectionTreeViewChrome-cont {
+    display: flex;
+    justify-content: space-between;
+}
+
+.collectionTreeViewChrome-sort {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .collectionTreeViewChrome-sortIcon {
+        transition: transform .5s;
+        margin-left: 10px;
+    }
+}
+
+.collectionTreeViewChrome-sectionFilter-cont {
+    justify-self: right;
+    display: flex;
+    font-size: 75%;
+    letter-spacing: 2px;
+
+    .collectionTreeViewChrome-sectionFilter-label {
+        vertical-align: center;
+        padding: 10px;
+    }
+
+    .collectionTreeViewChrome-sectionFilter {
+        color: white;
+        width: 100px;
+        text-align: center;
+        background: rgb(238, 238, 238);
+
+        .editable-view-input,
+        input,
+        .editableView-container-editing-oneLine,
+        .editableView-container-editing {
+            padding: 12px 10px 11px 10px;
+            border: 0px;
+            color: grey;
+            text-align: center;
+            letter-spacing: 2px;
+            outline-color: black;
+            height: 100%;
+        }
+
+        .react-autosuggest__container {
+            margin: 0;
+            color: grey;
+            padding: 0px;
+        }
+    }
+}
+
+.collectionTreeViewChrome-sectionFilter:hover {
+    cursor: text;
 }
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionViewChromes.tsx b/src/client/views/collections/CollectionViewChromes.tsx
index 7787a8eed..1de2f060e 100644
--- a/src/client/views/collections/CollectionViewChromes.tsx
+++ b/src/client/views/collections/CollectionViewChromes.tsx
@@ -534,20 +534,20 @@ export class CollectionTreeViewChrome extends React.Component<CollectionViewChro
 
     render() {
         return (
-            <div className="collectionStackingViewChrome-cont">
-                <button className="collectionStackingViewChrome-sort" onClick={this.toggleSort}>
-                    <div className="collectionStackingViewChrome-sortLabel">
+            <div className="collectionTreeViewChrome-cont">
+                <button className="collectionTreeViewChrome-sort" onClick={this.toggleSort}>
+                    <div className="collectionTreeViewChrome-sortLabel">
                         Sort
                         </div>
-                    <div className="collectionStackingViewChrome-sortIcon" style={{ transform: `rotate(${this.descending ? "180" : "0"}deg)` }}>
+                    <div className="collectionTreeViewChrome-sortIcon" style={{ transform: `rotate(${this.descending ? "180" : "0"}deg)` }}>
                         <FontAwesomeIcon icon="caret-up" size="2x" color="white" />
                     </div>
                 </button>
-                <div className="collectionStackingViewChrome-sectionFilter-cont">
-                    <div className="collectionStackingViewChrome-sectionFilter-label">
+                <div className="collectionTreeViewChrome-sectionFilter-cont">
+                    <div className="collectionTreeViewChrome-sectionFilter-label">
                         GROUP ITEMS BY:
                         </div>
-                    <div className="collectionStackingViewChrome-sectionFilter">
+                    <div className="collectionTreeViewChrome-sectionFilter">
                         <EditableView
                             GetValue={() => this.sectionFilter}
                             autosuggestProps={