diff options
5 files changed, 154 insertions, 5 deletions
diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss index 9454b0c78..9c04458fe 100644 --- a/src/client/views/MainView.scss +++ b/src/client/views/MainView.scss @@ -142,7 +142,7 @@ margin-left: -13px; border-radius: 8px; width: 65px; - position: absolute; + position: relative; text-align: center; font-size: 9.5px; margin-top: 4px; @@ -290,7 +290,8 @@ width: 10px; height: 10px; float: right; - margin-right: 1px; + margin-right: 3px; + padding-top: 19px; } } diff --git a/src/client/views/collections/CollectionView.scss b/src/client/views/collections/CollectionView.scss index b630f9cf8..585f6865e 100644 --- a/src/client/views/collections/CollectionView.scss +++ b/src/client/views/collections/CollectionView.scss @@ -24,6 +24,41 @@ border-right: unset; z-index: 2; } + + .collectionView-propertiesDragger { + background-color: rgb(140, 139, 139); + height: 55px; + width: 15.5px; + position: absolute; + top: 55%; + border: 1px black solid; + border-radius: 0; + border-top-left-radius: 10px; + border-bottom-left-radius: 10px; + border-right: unset; + z-index: 2; + + .collectionView-propertiesDragger-icon { + width: 10px; + height: 10px; + float: left; + margin-left: 3px; + padding-top: 19px; + } + } + + .collectionView-propertiesView { + display: flex; + flex-direction: column; + width: 200px; + height: 100%; + position: absolute; + right: 0; + top: 0; + border-left: solid 1px; + z-index: 10; + } + .collectionTimeView-treeView { display: flex; flex-direction: column; diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 8b09281d5..44d22dd5d 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -49,6 +49,7 @@ import { CollectionTreeView } from "./CollectionTreeView"; import './CollectionView.scss'; import CollectionMenu from './CollectionMenu'; import { SharingPermissions } from '../../util/SharingManager'; +import { PropertiesView } from './collectionFreeForm/PropertiesView'; const higflyout = require("@hig/flyout"); export const { anchorPoints } = higflyout; export const Flyout = higflyout.default; @@ -367,9 +368,22 @@ export class CollectionView extends Touchable<FieldViewProps & CollectionViewCus get _facetWidth() { return NumCast(this.props.Document._facetWidth); } set _facetWidth(value) { this.props.Document._facetWidth = value; } - bodyPanelWidth = () => this.props.PanelWidth() - this.facetWidth(); + get _propertiesWidth() { return NumCast(this.props.Document._propertiesWidth); } + set _propertiesWidth(value) { this.props.Document._propertiesWidth = value; } + + bodyPanelWidth = () => this.props.PanelWidth() - this.propertiesWidth(); facetWidth = () => Math.max(0, Math.min(this.props.PanelWidth() - 25, this._facetWidth)); + propertiesWidth = () => Math.max(0, Math.min(this.props.PanelWidth() - 25, this._propertiesWidth)); + + @computed get propertiesIcon() { + if (this.propertiesWidth() < 10) { + return "chevron-left"; + } else { + return "chevron-right"; + } + } + @computed get dataDoc() { return (this.props.DataDoc && this.props.Document.isTemplateForField ? Doc.GetProto(this.props.DataDoc) : this.props.Document.resolvedDataDoc ? this.props.Document : Doc.GetProto(this.props.Document)); // if the layout document has a resolvedDataDoc, then we don't want to get its parent which would be the unexpanded template @@ -489,6 +503,14 @@ export class CollectionView extends Touchable<FieldViewProps & CollectionViewCus return false; }), returnFalse, action(() => this._facetWidth = this.facetWidth() < 15 ? Math.min(this.props.PanelWidth() - 25, 200) : 0), false); } + + onDown = (e: React.PointerEvent) => { + setupMoveUpEvents(this, e, action((e: PointerEvent, down: number[], delta: number[]) => { + this._propertiesWidth = this.props.PanelWidth() - Math.max(this.props.ScreenToLocalTransform().transformPoint(e.clientX, 0)[0], 0); + return false; + }), returnFalse, action(() => this._propertiesWidth = this.propertiesWidth() < 15 ? Math.min(this.props.PanelWidth() - 25, 200) : 0), false); + } + filterBackground = () => "rgba(105, 105, 105, 0.432)"; get ignoreFields() { return ["_docFilters", "_docRangeFilters"]; } // this makes the tree view collection ignore these filters (otherwise, the filters would filter themselves) @computed get scriptField() { @@ -558,6 +580,18 @@ export class CollectionView extends Touchable<FieldViewProps & CollectionViewCus </div> </div>; } + + @computed get propertiesView() { + TraceMobx(); + return !this._propertiesWidth || this.props.dontRegisterView ? (null) : + <div className="collectionView-propertiesView" style={{ + width: `${this.propertiesWidth()}px`, + overflow: this.propertiesWidth() < 15 ? "hidden" : undefined + }}> + <PropertiesView /> + </div>; + } + childLayoutTemplate = () => this.props.childLayoutTemplate?.() || Cast(this.props.Document.childLayoutTemplate, Doc, null); childLayoutString = this.props.childLayoutString || StrCast(this.props.Document.childLayoutString); @@ -588,11 +622,20 @@ export class CollectionView extends Touchable<FieldViewProps & CollectionViewCus Utils.CorsProxy(Cast(d.data, ImageField)!.url.href) : Cast(d.data, ImageField)!.url.href : ""))} - {this.props.hideFilter || this.props.Document.hideFilterView || !this.props.isSelected() && !this.props.Document.forceActive ? (null) : + {/* {this.props.hideFilter || this.props.Document.hideFilterView || !this.props.isSelected() && !this.props.Document.forceActive ? (null) : <div className="collectionView-filterDragger" title="library View Dragger" onPointerDown={this.onPointerDown} style={{ right: this.facetWidth() - 1, top: this.props.Document._viewType === CollectionViewType.Docking ? "25%" : "55%" }} /> } - {this.facetWidth() < 10 ? (null) : this.filterView} + {this.facetWidth() < 10 ? (null) : this.filterView} */} + + {this.props.hideFilter || this.props.Document.hideFilterView || !this.props.isSelected() && !this.props.Document.forceActive ? (null) : + <div className="collectionView-propertiesDragger" title="Properties View Dragger" onPointerDown={this.onDown} + style={{ right: this.propertiesWidth() - 1, top: this.props.Document._viewType === CollectionViewType.Docking ? "25%" : "55%" }}> + <div className="collectionView-propertiesDragger-icon"> + <FontAwesomeIcon icon={this.propertiesIcon} color="white" size="sm" /> </div> + </div> + } + {this.propertiesWidth() < 10 ? (null) : this.propertiesView} </div>); } } diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss new file mode 100644 index 000000000..d4cc53bfa --- /dev/null +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss @@ -0,0 +1,32 @@ +.propertiesView { + + background-color: rgb(168, 168, 168); + height: 100%; + z-index: 1; + + .propertiesView-title { + background-color: rgb(134, 134, 134); + border-top: 1px solid black; + border-bottom: 1px solid black; + } + + .propertiesView-name { + border-top: 1px solid black; + border-bottom: 1px solid black; + } + + .propertiesView-settings { + border-top: 1px solid black; + border-bottom: 1px solid black; + } + + .propertiesView-fields { + border-top: 1px solid black; + border-bottom: 1px solid black; + } + + .propertiesView-layout { + border-top: 1px solid black; + border-bottom: 1px solid black; + } +}
\ No newline at end of file diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx new file mode 100644 index 000000000..4306453ea --- /dev/null +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx @@ -0,0 +1,38 @@ +import React = require("react"); +import { observer } from "mobx-react"; +import "./PropertiesView.scss"; +import { observable, action } from "mobx"; +import { Doc } from "../../../../fields/Doc"; +import { DocumentView } from "../../nodes/DocumentView"; + + +// interface PropertiesViewProps { +// document: Doc; +// dataDoc: Doc; +// docView: DocumentView; +// width: number; +// } + +@observer +export class PropertiesView extends React.Component<{}> { + + render() { + return <div className="propertiesView" > + <div className="propertiesView-title"> + Properties + </div> + <div className="propertiesView-name"> + Properties + </div> + <div className="propertiesView-settings"> + Settings + </div> + <div className="propertiesView-fields"> + Fields + </div> + <div className="propertiesView-layout"> + Layout + </div> + </div>; + } +}
\ No newline at end of file |