diff options
| -rw-r--r-- | src/client/views/collections/CollectionTreeView.tsx | 11 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionViewChromes.scss | 58 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionViewChromes.tsx | 14 |
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={ |