From b7296dc3bfb9ad0842a4c0298152f2023d47e1b3 Mon Sep 17 00:00:00 2001 From: anika Date: Sun, 27 Dec 2020 14:19:01 -0600 Subject: rough UI restructure --- src/client/views/MainView.tsx | 2 +- src/client/views/nodes/FilterBox.scss | 128 ++++++++++++++++++++++++++++++---- src/client/views/nodes/FilterBox.tsx | 97 +++++++++++++++++++++++--- 3 files changed, 206 insertions(+), 21 deletions(-) (limited to 'src') diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 5eb8429f0..b05346d4c 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -163,7 +163,7 @@ export class MainView extends React.Component { fa.faWindowMinimize, fa.faWindowRestore, fa.faTextWidth, fa.faTextHeight, fa.faClosedCaptioning, fa.faInfoCircle, fa.faTag, fa.faSyncAlt, fa.faPhotoVideo, fa.faArrowAltCircleDown, fa.faArrowAltCircleUp, fa.faArrowAltCircleLeft, fa.faArrowAltCircleRight, fa.faStopCircle, fa.faCheckCircle, fa.faGripVertical, fa.faSortUp, fa.faSortDown, fa.faTable, fa.faTh, fa.faThList, fa.faProjectDiagram, fa.faSignature, fa.faColumns, fa.faChevronCircleUp, fa.faUpload, fa.faBorderAll, - fa.faBraille, fa.faChalkboard, fa.faPencilAlt, fa.faEyeSlash, fa.faSmile, fa.faIndent, fa.faOutdent, fa.faChartBar, fa.faBan, fa.faPhoneSlash, fa.faGripLines); + fa.faBraille, fa.faChalkboard, fa.faPencilAlt, fa.faEyeSlash, fa.faSmile, fa.faIndent, fa.faOutdent, fa.faChartBar, fa.faBan, fa.faPhoneSlash, fa.faGripLines, fa.faBookmark); this.initAuthenticationRouters(); } diff --git a/src/client/views/nodes/FilterBox.scss b/src/client/views/nodes/FilterBox.scss index d32cc0d2b..9843c4b1c 100644 --- a/src/client/views/nodes/FilterBox.scss +++ b/src/client/views/nodes/FilterBox.scss @@ -1,17 +1,124 @@ - - .filterBox-flyout { - width: 400px; display: block; text-align: left; + .filterBox-flyout-facet { - background-color: lightgray; - text-align: left; - display: inline-block; - position: relative; - width: 100%; + background-color: lightgray; + text-align: left; + display: inline-block; + position: relative; + width: 100%; + } +} + + +.filter-bookmark { + //display: flex; + + .filter-bookmark-icon { + float: right; + margin-right: 10px; + margin-top: 7px; + } +} + + +.filterBox-saveBookmark { + width: 105px; + background-color: rgb(216, 214, 214); + border-radius: 6px; + padding: 5px; + margin: 5px; + display: flex; + font-size: 17px; + + &:hover { + background-color: white; + } + + .filterBox-saveBookmark-icon { + margin-right: 10px; + margin-top: 4px; + margin-left: 10px; } + } + +.filterBox-title { + + justify-content: center; + text-align: center; + padding-bottom: 13px; + font-size: 20px; + font-weight: bold; + + .filterBox-span { + margin-right: 15px; + } + +} + +.filterBox-select-scope, +.filterBox-select-bool, +.filterBox-addWrapper, +.filterBox-select-matched, +.filterBox-saveWrapper { + font-size: 12px; + justify-content: center; + justify-items: center; + padding-bottom: 10px; + display: flex; +} + +.filterBox-addWrapper { + font-size: 15px; + width: 100%; +} + +.filterBox-saveWrapper { + width: 100%; +} + +.filterBox-select-scope { + margin-bottom: 5px; + // border-bottom: 1px solid black; +} + +.filterBox-select-text { + margin-right: 8px; + margin-left: 8px; +} + +.filterBox-select-box { + margin-right: 2px; + font-size: 30px; + border: none; +} + +.filterBox-selection { + border-radius: 6px; + border: none; + background-color: rgb(216, 214, 214); + padding: 2px; + + &:hover { + background-color: white; + } +} + +.filterBox-addFilter { + width: 100px; + background-color: rgb(216, 214, 214); + border-radius: 6px; + padding: 5px; + margin: 5px; + display: flex; + + &:hover { + background-color: white; + } +} + .filterBox-treeView { display: flex; flex-direction: column; @@ -22,6 +129,7 @@ top: 0; border-left: solid 1px; z-index: 1; + background-color: darkGray; .filterBox-addfacet { display: inline-block; @@ -34,10 +142,6 @@ display: flex; margin: auto; cursor: pointer; - - .filterBox-span { - margin-right: 15px; - } } >div, diff --git a/src/client/views/nodes/FilterBox.tsx b/src/client/views/nodes/FilterBox.tsx index 730ae8f10..7c03b0835 100644 --- a/src/client/views/nodes/FilterBox.tsx +++ b/src/client/views/nodes/FilterBox.tsx @@ -1,6 +1,6 @@ import React = require("react"); import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { computed } from "mobx"; +import { action, computed } from "mobx"; import { observer } from "mobx-react"; import { DataSym, Doc, DocListCast, Field, Opt } from "../../../fields/Doc"; import { documentSchema } from "../../../fields/documentSchemas"; @@ -20,6 +20,7 @@ import { FieldView, FieldViewProps } from './FieldView'; import './FilterBox.scss'; import { Scripting } from "../../util/Scripting"; import { values } from "lodash"; +import { tokenToString } from "typescript"; const higflyout = require("@hig/flyout"); export const { anchorPoints } = higflyout; export const Flyout = higflyout.default; @@ -31,6 +32,11 @@ const FilterBoxDocument = makeInterface(documentSchema); export class FilterBox extends ViewBoxBaseComponent(FilterBoxDocument) { public static LayoutString(fieldKey: string) { return FieldView.LayoutString(FilterBox, fieldKey); } + public _filterBoolean = "AND"; + public _filterScope = "Current Dashboard"; + public _filterSelected = false; + public _filterMatch = "matched"; + @computed get allDocs() { const allDocs = new Set(); if (CollectionDockingView.Instance) { @@ -159,6 +165,37 @@ export class FilterBox extends ViewBoxBaseComponent script : undefined; } + @action + changeBool = (e: any) => { + this._filterBoolean = e.currentTarget.value; + console.log(this._filterBoolean); + } + + @action + changeScope = (e: any) => { + this._filterScope = e.currentTarget.value; + console.log(this._filterScope); + } + + @action + changeMatch = (e: any) => { + this._filterMatch = e.currentTarget.value; + console.log(this._filterMatch); + } + + + @action + changeSelected = (e: any) => { + if (this._filterSelected) { + this._filterSelected = false; + // helper method to deselect all documents + } else { + this._filterSelected = true; + // helper method to select specified docs + } + console.log(this._filterSelected); + } + render() { const facetCollection = this.props.Document; const flyout =
e.stopPropagation()}> @@ -170,14 +207,35 @@ export class FilterBox extends ViewBoxBaseComponent; return this.props.dontRegisterView ? (null) :
-
e.stopPropagation()}> - -
- - Choose Facets -
- +
+
+ + {/*
e.stopPropagation()}> +
*/} +
+ Choose Filters +
+ {/*
+
*/} + +
+ +
specified filters
+
+ +
+
Scope:
+ +
+
+ +
+
+ add a filter
+
+ + +
+ this.changeSelected(e)} /> +
select
+ +
documents
+
+ +
+
+ +
SAVE
+
+
; } } -- cgit v1.2.3-70-g09d2 From 4c572c61dabf9032853019a9287ddf5f1dd5863b Mon Sep 17 00:00:00 2001 From: anika Date: Mon, 28 Dec 2020 20:14:48 -0600 Subject: finishing overall structure of the UI --- src/client/views/nodes/FilterBox.scss | 29 ++++++++++++++------ src/client/views/nodes/FilterBox.tsx | 50 +++++++++++++++++++++-------------- 2 files changed, 51 insertions(+), 28 deletions(-) (limited to 'src') diff --git a/src/client/views/nodes/FilterBox.scss b/src/client/views/nodes/FilterBox.scss index 9843c4b1c..62f972218 100644 --- a/src/client/views/nodes/FilterBox.scss +++ b/src/client/views/nodes/FilterBox.scss @@ -22,10 +22,16 @@ } } +.filterBox-bottom { + position: fixed; + bottom: 0; + width: 100%; +} + .filterBox-saveBookmark { width: 105px; - background-color: rgb(216, 214, 214); + background-color: #f5f5f5; border-radius: 6px; padding: 5px; margin: 5px; @@ -79,9 +85,17 @@ width: 100%; } +// .filterBox-top { +// padding-bottom: 20px; +// border-bottom: 2px solid black; +// position: fixed; +// top: 0; +// width: 100%; +// } + .filterBox-select-scope { - margin-bottom: 5px; - // border-bottom: 1px solid black; + padding-bottom: 20px; + border-bottom: 2px solid black; } .filterBox-select-text { @@ -98,7 +112,7 @@ .filterBox-selection { border-radius: 6px; border: none; - background-color: rgb(216, 214, 214); + background-color: #f5f5f5; padding: 2px; &:hover { @@ -108,7 +122,7 @@ .filterBox-addFilter { width: 100px; - background-color: rgb(216, 214, 214); + background-color: #f5f5f5; border-radius: 6px; padding: 5px; margin: 5px; @@ -129,13 +143,12 @@ top: 0; border-left: solid 1px; z-index: 1; - background-color: darkGray; + background-color: #D3D3D3; .filterBox-addfacet { display: inline-block; width: 200px; height: 30px; - background: darkGray; text-align: left; .filterBox-addFacetButton { @@ -154,6 +167,6 @@ .filterBox-tree { display: inline-block; width: 100%; - height: calc(100% - 30px); + //height: calc(100% - 30px); } } \ No newline at end of file diff --git a/src/client/views/nodes/FilterBox.tsx b/src/client/views/nodes/FilterBox.tsx index 7c03b0835..95ffc6f8c 100644 --- a/src/client/views/nodes/FilterBox.tsx +++ b/src/client/views/nodes/FilterBox.tsx @@ -21,6 +21,7 @@ import './FilterBox.scss'; import { Scripting } from "../../util/Scripting"; import { values } from "lodash"; import { tokenToString } from "typescript"; +import { SelectionManager } from "../../util/SelectionManager"; const higflyout = require("@hig/flyout"); export const { anchorPoints } = higflyout; export const Flyout = higflyout.default; @@ -158,7 +159,7 @@ export class FilterBox extends ViewBoxBaseComponent "rgba(105, 105, 105, 0.432)"; + filterBackground = () => "#d3d3d3"; @computed get scriptField() { const scriptText = "setDocFilter(this?.target, heading, this.title, checked)"; const script = ScriptField.MakeScript(scriptText, { this: Doc.name, heading: "string", checked: "string", containingTreeView: Doc.name }); @@ -188,7 +189,7 @@ export class FilterBox extends ViewBoxBaseComponent { if (this._filterSelected) { this._filterSelected = false; - // helper method to deselect all documents + SelectionManager.DeselectAll(); } else { this._filterSelected = true; // helper method to select specified docs @@ -206,18 +207,24 @@ export class FilterBox extends ViewBoxBaseComponent)}
; + const newFlyout =
e.stopPropagation()}> + {this._allFacets.map(facet => )} +
+ return this.props.dontRegisterView ? (null) :
+ + {/*
*/}
- {/*
e.stopPropagation()}> -
*/}
Choose Filters
- {/*
-
*/}
+ {/*
*/}
-
- this.changeSelected(e)} /> -
select
- -
documents
-
+
+
+ this.changeSelected(e)} /> +
select
+ +
documents
+
-
-
- -
SAVE
+
+
+ +
SAVE
+
; -- cgit v1.2.3-70-g09d2 From 6b211be7c96a3d7f275509d094d9e96dd6dff6ba Mon Sep 17 00:00:00 2001 From: anika Date: Mon, 28 Dec 2020 22:01:58 -0600 Subject: more cleaning --- src/client/views/collections/TreeView.scss | 22 ++++++++++++++++++---- src/client/views/nodes/FilterBox.scss | 6 ++++-- src/client/views/nodes/FilterBox.tsx | 4 ++-- 3 files changed, 24 insertions(+), 8 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/TreeView.scss b/src/client/views/collections/TreeView.scss index 7a654c7cf..7a719b4a4 100644 --- a/src/client/views/collections/TreeView.scss +++ b/src/client/views/collections/TreeView.scss @@ -8,6 +8,7 @@ width: 100%; overflow: hidden; } + .treeView-container, .treeView-container-active { .bullet-outline { @@ -20,21 +21,26 @@ .treeView-bulletIcons { width: 15px; + .treeView-expandIcon { display: none; left: -10px; position: absolute; } + .treeView-checkIcon { - left: -10px; + left: 3px; + top: 2px; position: absolute; } + &:hover { .treeView-expandIcon { display: unset; } } } + .bullet { position: relative; width: $TREE_BULLET_WIDTH; @@ -45,9 +51,11 @@ border-radius: 4px; } } + .treeView-container-active { z-index: 100; position: relative; + .formattedTextbox-sidebar { background-color: #ffff001f !important; height: 500px !important; @@ -70,7 +78,8 @@ display: flex; overflow: hidden; } -.treeView-border{ + +.treeView-border { border-left: dashed 1px #00000042; } @@ -78,15 +87,20 @@ .treeView-header { border: transparent 1px solid; display: flex; + //align-items: center; ::-webkit-scrollbar { - display: none; + display: none; } + .formattedTextBox-cont { - .formattedTextbox-sidebar, .formattedTextbox-sidebar-inking { + + .formattedTextbox-sidebar, + .formattedTextbox-sidebar-inking { overflow: visible !important; border-left: unset; } + overflow: visible !important; } diff --git a/src/client/views/nodes/FilterBox.scss b/src/client/views/nodes/FilterBox.scss index 62f972218..6d72af679 100644 --- a/src/client/views/nodes/FilterBox.scss +++ b/src/client/views/nodes/FilterBox.scss @@ -3,7 +3,7 @@ text-align: left; .filterBox-flyout-facet { - background-color: lightgray; + background-color: white; text-align: left; display: inline-block; position: relative; @@ -106,7 +106,8 @@ .filterBox-select-box { margin-right: 2px; font-size: 30px; - border: none; + border: 0; + background: transparent; } .filterBox-selection { @@ -167,6 +168,7 @@ .filterBox-tree { display: inline-block; width: 100%; + margin-bottom: 10px; //height: calc(100% - 30px); } } \ No newline at end of file diff --git a/src/client/views/nodes/FilterBox.tsx b/src/client/views/nodes/FilterBox.tsx index 95ffc6f8c..dec6f67d8 100644 --- a/src/client/views/nodes/FilterBox.tsx +++ b/src/client/views/nodes/FilterBox.tsx @@ -207,7 +207,7 @@ export class FilterBox extends ViewBoxBaseComponent)}
; - const newFlyout =
e.stopPropagation()}> + const newFlyout =
e.stopPropagation()}> {this._allFacets.map(facet =>
- +
+ add a filter
-- cgit v1.2.3-70-g09d2 From 7174328702fe6b350780728db890141f50ceec5b Mon Sep 17 00:00:00 2001 From: anika Date: Thu, 31 Dec 2020 10:29:20 -0600 Subject: last add b efore pull --- src/client/views/StyleProvider.tsx | 6 ++++++ src/client/views/collections/TreeView.tsx | 6 +++++- src/client/views/nodes/FilterBox.scss | 5 +++++ src/client/views/nodes/FilterBox.tsx | 14 +++----------- 4 files changed, 19 insertions(+), 12 deletions(-) (limited to 'src') diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx index 312cfc73e..35fe30a56 100644 --- a/src/client/views/StyleProvider.tsx +++ b/src/client/views/StyleProvider.tsx @@ -23,6 +23,7 @@ export enum StyleLayers { } export enum StyleProp { + TreeViewIcon = "treeViewIcon", DocContents = "docContents", // when specified, the JSX returned will replace the normal rendering of the document view Opacity = "opacity", // opacity of the document view Hidden = "hidden", // whether the document view should not be isplayed @@ -64,11 +65,14 @@ export function DefaultStyleProvider(doc: Opt, props: Opt StrListCast(doc?.layers).includes(StyleLayers.Background); const backgroundCol = () => props?.styleProvider?.(doc, props, StyleProp.BackgroundColor); const opacity = () => props?.styleProvider?.(doc, props, StyleProp.Opacity); switch (property.split(":")[0]) { + case StyleProp.TreeViewIcon: return doc && Doc.toIcon(doc); case StyleProp.DocContents: return undefined; case StyleProp.WidgetColor: return darkScheme() ? "lightgrey" : "dimgrey"; case StyleProp.Opacity: return Cast(doc?._opacity, "number", Cast(doc?.opacity, "number", null)); @@ -152,6 +156,8 @@ export function DefaultStyleProvider(doc: Opt, props: Opt 0 && ((doc.type === DocumentType.COL && doc._viewType !== CollectionViewType.Pile) || [DocumentType.RTF, DocumentType.IMG, DocumentType.INK].includes(doc.type as DocumentType)) ? diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx index 93d3be1fc..b5e498503 100644 --- a/src/client/views/collections/TreeView.tsx +++ b/src/client/views/collections/TreeView.tsx @@ -441,7 +441,11 @@ export class TreeView extends React.Component { @computed get renderBullet() { TraceMobx(); - const iconType = Doc.toIcon(this.doc); + const iconType = this.titleStyleProvider?.(this.doc, this.props.treeView.props, StyleProp.TreeViewIcon); + + + // const footerDecoration = this.titleStyleProvider?.(this.doc, this.props.treeView.props, StyleProp.Decoration + ":footer"); + const checked = this.onCheckedClick ? (this.doc.treeViewChecked ?? "unchecked") : undefined; return
e.stopPropagation()}> + const flyout =
e.stopPropagation()}> {this._allFacets.map(facet => )}
; - const newFlyout =
e.stopPropagation()}> - {this._allFacets.map(facet => )} -
- return this.props.dontRegisterView ? (null) :
{/*
*/} @@ -279,7 +271,7 @@ export class FilterBox extends ViewBoxBaseComponent
- +
+ add a filter
-- cgit v1.2.3-70-g09d2 From a70a224d40ed511e8278ce01a74fb0a8a012b075 Mon Sep 17 00:00:00 2001 From: anika Date: Thu, 31 Dec 2020 11:32:41 -0600 Subject: small merge fixes --- src/client/views/MainView.tsx | 5 ++-- src/client/views/StyleProvider.tsx | 40 ++++++++++++++++++++++++++++++ src/client/views/collections/TreeView.scss | 21 +++++++++++----- src/client/views/collections/TreeView.tsx | 5 +++- 4 files changed, 62 insertions(+), 9 deletions(-) (limited to 'src') diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index e43b8baf1..d17b72639 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -44,6 +44,7 @@ import { KeyManager } from './GlobalKeyHandler'; import { InkStrokeProperties } from './InkStrokeProperties'; import { LinkMenu } from './linking/LinkMenu'; import "./MainView.scss"; +import "./collections/TreeView.scss"; import { AudioBox } from './nodes/AudioBox'; import { DocumentLinksButton } from './nodes/DocumentLinksButton'; import { DocumentView, DocumentViewProps } from './nodes/DocumentView'; @@ -58,7 +59,7 @@ import { PDFMenu } from './pdf/PDFMenu'; import { PreviewCursor } from './PreviewCursor'; import { PropertiesView } from './PropertiesView'; import { SearchBox } from './search/SearchBox'; -import { DefaultStyleProvider, StyleProp } from './StyleProvider'; +import { DefaultStyleProvider, DashboardStyleProvider, StyleProp } from './StyleProvider'; import { FieldViewProps } from './nodes/FieldView'; const _global = (window /* browser */ || global /* node */) as any; @@ -342,7 +343,7 @@ export class MainView extends React.Component { PanelHeight={this.getContentsHeight} renderDepth={0} focus={emptyFunction} - styleProvider={this._sidebarContent.proto === Doc.UserDoc().myDashboards ? this.DashboardStyleProvider : DefaultStyleProvider} + styleProvider={this._sidebarContent.title === "My Dashboards" ? DashboardStyleProvider : DefaultStyleProvider} parentActive={returnTrue} whenActiveChanged={emptyFunction} bringToFront={emptyFunction} diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx index a6e3516ed..c9eedb85d 100644 --- a/src/client/views/StyleProvider.tsx +++ b/src/client/views/StyleProvider.tsx @@ -15,6 +15,7 @@ import { MainView } from './MainView'; import { DocumentViewProps } from "./nodes/DocumentView"; import { FieldViewProps } from './nodes/FieldView'; import "./StyleProvider.scss"; +import "./collections/TreeView.scss"; import React = require("react"); import Color = require('color'); @@ -169,6 +170,45 @@ export function DefaultStyleProvider(doc: Opt, props: Opt runInAction(() => { + e.stopPropagation(); + doc.hidden = doc.hidden ? undefined : true; + }), "toggleHidden"); +} + +function toggleLock(e: React.MouseEvent, doc: Doc) { + UndoManager.RunInBatch(() => runInAction(() => { + e.stopPropagation(); + doc.lockedPosition = doc.lockedPosition ? undefined : true; + }), "toggleHidden"); +} + +/** + * add lock and hide button decorations for the "Dashboards" flyout TreeView + */ +export function DashboardStyleProvider(doc: Opt, props: Opt, property: string) { + switch (property.split(":")[0]) { + case StyleProp.Decorations: + if (doc) { + const hidden = doc.hidden; + const locked = doc.lockedPosition; + return doc._viewType === CollectionViewType.Docking || (Doc.IsSystem(doc) && Doc.UserDoc().noviceMode) ? (null) : + <> +
toggleHidden(e, doc)}> + +
+
toggleLock(e, doc)}> + +
+ ; + } + default: return DefaultStyleProvider(doc, props, property); + + } +} + // // a preliminary semantic-"layering/grouping" mechanism for determining interactive properties of documents // currently, the provider tests whether the docuemnt's layer field matches the activeLayer field of the tab. diff --git a/src/client/views/collections/TreeView.scss b/src/client/views/collections/TreeView.scss index 1208fa07d..2f74a49bb 100644 --- a/src/client/views/collections/TreeView.scss +++ b/src/client/views/collections/TreeView.scss @@ -29,7 +29,7 @@ } .treeView-checkIcon { - left: 3px; + left: 3.5px; top: 2px; position: absolute; } @@ -118,12 +118,18 @@ margin-left: 0.25rem; opacity: 0.75; - >svg, .styleProvider-treeView-lock, .styleProvider-treeView-hide, .styleProvider-treeView-lock-active, .styleProvider-treeView-hide-active { + >svg, + .styleProvider-treeView-lock, + .styleProvider-treeView-hide, + .styleProvider-treeView-lock-active, + .styleProvider-treeView-hide-active { margin-left: 0.25rem; - margin-right: 0.25rem; + margin-right: 0.25rem; } - - >svg, .styleProvider-treeView-lock, .styleProvider-treeView-hide { + + >svg, + .styleProvider-treeView-lock, + .styleProvider-treeView-hide { display: none; } } @@ -148,7 +154,10 @@ } .right-buttons-container { - >svg, .styleProvider-treeView-lock, .styleProvider-treeView-hide { + + >svg, + .styleProvider-treeView-lock, + .styleProvider-treeView-hide { display: inherit; } } diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx index 2f9a2f3eb..a297ad708 100644 --- a/src/client/views/collections/TreeView.tsx +++ b/src/client/views/collections/TreeView.tsx @@ -590,7 +590,10 @@ export class TreeView extends React.Component { }} > {view}
- {this.headerElements} +
+ {this.props.styleProvider?.(this.doc, this.props.treeView.props, StyleProp.Decorations)} {/* hide and lock buttons */} + {this.headerElements} +
; } -- cgit v1.2.3-70-g09d2