From 015a08f56f9dda8b63ab139750a9ade6a964eff6 Mon Sep 17 00:00:00 2001 From: bobzel Date: Mon, 24 Aug 2020 20:43:07 -0400 Subject: added lozenges to distinguish user & dashboard at top of workspace --- src/client/views/search/SearchBox.scss | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) (limited to 'src/client/views/search/SearchBox.scss') diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss index 3f06ba7d3..b5557e0d9 100644 --- a/src/client/views/search/SearchBox.scss +++ b/src/client/views/search/SearchBox.scss @@ -11,7 +11,19 @@ line-height: 1; overflow-y: auto; overflow-x: visible; - background: lightgrey, + background: lightgrey; + + .searchBox-lozenge { + background-color: #313131; + border-radius: 5px; + height: 15px; + padding: 4px; + box-shadow: lightgrey 0.15em 0.15em 0.1em; + margin: 2px; + margin-bottom: 4px; + border-top: dimgrey 1px solid; + border-left: dimgrey 1px solid; + } } .searchBox-bar { -- cgit v1.2.3-70-g09d2 From 022e36458815b9fd4ce79bea3ac1ae158a0c9463 Mon Sep 17 00:00:00 2001 From: bobzel Date: Wed, 26 Aug 2020 10:25:37 -0400 Subject: added dropdown dashboards input at top left + new & snapshot --- src/client/util/CurrentUserUtils.ts | 89 +++++++++++++++++++++- src/client/util/History.ts | 4 +- src/client/views/MainView.tsx | 89 ++-------------------- .../views/collections/CollectionDockingView.tsx | 8 +- .../views/collections/CollectionTreeView.tsx | 4 +- src/client/views/search/SearchBox.scss | 50 +++++++++++- src/client/views/search/SearchBox.tsx | 28 +++++-- 7 files changed, 171 insertions(+), 101 deletions(-) (limited to 'src/client/views/search/SearchBox.scss') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 435944a74..a76aa0dee 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -1,4 +1,4 @@ -import { computed, observable, reaction } from "mobx"; +import { computed, observable, reaction, action } from "mobx"; import * as rp from 'request-promise'; import { Utils } from "../../Utils"; import { DocServer } from "../DocServer"; @@ -24,6 +24,8 @@ import { DimUnit } from "../views/collections/collectionMulticolumn/CollectionMu import { LabelBox } from "../views/nodes/LabelBox"; import { LinkManager } from "./LinkManager"; import { Id } from "../../fields/FieldSymbols"; +import { HistoryUtil } from "./History"; +import { CollectionDockingView } from "../views/collections/CollectionDockingView"; export class CurrentUserUtils { private static curr_id: string; @@ -730,7 +732,7 @@ export class CurrentUserUtils { treeViewTruncateTitleWidth: 150, hideFilterView: true, treeViewPreventOpen: false, lockedPosition: true, boxShadow: "0 0", dontRegisterChildViews: true, targetDropAction: "same", system: true })); - const newDashboard = ScriptField.MakeScript(`createNewDashboard()`); + const newDashboard = ScriptField.MakeScript(`createNewDashboard(Doc.UserDoc())`); (doc.myDashboards as any as Doc).contextMenuScripts = new List([newDashboard!]); (doc.myDashboards as any as Doc).contextMenuLabels = new List(["Create New Dashboard"]); } @@ -976,9 +978,90 @@ export class CurrentUserUtils { } }); } + + public static _urlState: HistoryUtil.DocUrl; + + public static openDashboard = (userDoc: Doc, doc: Doc, fromHistory = false) => { + CurrentUserUtils.MainDocId = doc[Id]; + + if (doc) { // this has the side-effect of setting the main container since we're assigning the active/guest dashboard + !("presentationView" in doc) && (doc.presentationView = new List([Docs.Create.TreeDocument([], { title: "Presentation" })])); + userDoc ? (userDoc.activeDashboard = doc) : (CurrentUserUtils.GuestDashboard = doc); + } + const state = CurrentUserUtils._urlState; + if (state.sharing === true && !userDoc) { + DocServer.Control.makeReadOnly(); + } else { + fromHistory || HistoryUtil.pushState({ + type: "doc", + docId: doc[Id], + readonly: state.readonly, + nro: state.nro, + sharing: false, + }); + if (state.readonly === true || state.readonly === null) { + DocServer.Control.makeReadOnly(); + } else if (state.safe) { + if (!state.nro) { + DocServer.Control.makeReadOnly(); + } + CollectionView.SetSafeMode(true); + } else if (state.nro || state.nro === null || state.readonly === false) { + } else if (doc.readOnly) { + DocServer.Control.makeReadOnly(); + } else { + DocServer.Control.makeEditable(); + } + } + + return true; + } + + public static snapshotDashboard = (userDoc: Doc) => { + const activeDashboard = Cast(userDoc.activeDashboard, Doc, null); + CollectionDockingView.Copy(activeDashboard).then(copy => { + Doc.AddDocToList(Cast(userDoc.myDashboards, Doc, null), "data", copy); + // bcz: strangely, we need a timeout to prevent exceptions/issues initializing GoldenLayout (the rendering engine for Main Container) + setTimeout(() => CurrentUserUtils.openDashboard(userDoc, copy), 0); + }); + } + + public static createNewDashboard = async (userDoc: Doc, id?: string) => { + const myPresentations = userDoc.myPresentations as Doc; + const presentation = Doc.MakeCopy(userDoc.emptyPresentation as Doc, true); + const dashboards = Cast(userDoc.myDashboards, Doc) as Doc; + const dashboardCount = DocListCast(dashboards.data).length + 1; + const emptyPane = Cast(userDoc.emptyPane, Doc, null); + emptyPane["dragFactory-count"] = NumCast(emptyPane["dragFactory-count"]) + 1; + const freeformOptions: DocumentOptions = { + x: 0, + y: 400, + _width: 1500, + _height: 1000, + title: `Untitled Tab ${NumCast(emptyPane["dragFactory-count"])}`, + }; + const freeformDoc = CurrentUserUtils.GuestTarget || Docs.Create.FreeformDocument([], freeformOptions); + const dashboardDoc = Docs.Create.StandardCollectionDockingDocument([{ doc: freeformDoc, initialWidth: 600 }], { title: `Dashboard ${dashboardCount}` }, id, "row"); + Doc.AddDocToList(myPresentations, "data", presentation); + userDoc.activePresentation = presentation; + const toggleTheme = ScriptField.MakeScript(`self.darkScheme = !self.darkScheme`); + const toggleComic = ScriptField.MakeScript(`toggleComicMode()`); + const snapshotDashboard = ScriptField.MakeScript(`snapshotDashboard()`); + const createDashboard = ScriptField.MakeScript(`createNewDashboard()`); + dashboardDoc.contextMenuScripts = new List([toggleTheme!, toggleComic!, snapshotDashboard!, createDashboard!]); + dashboardDoc.contextMenuLabels = new List(["Toggle Theme Colors", "Toggle Comic Mode", "Snapshot Dashboard", "Create Dashboard"]); + + Doc.AddDocToList(dashboards, "data", dashboardDoc); + // bcz: strangely, we need a timeout to prevent exceptions/issues initializing GoldenLayout (the rendering engine for Main Container) + setTimeout(() => { + CurrentUserUtils.openDashboard(userDoc, dashboardDoc); + }, 0); + } } -Scripting.addGlobal(function createNewDashboard() { return MainView.Instance.createNewDashboard(); }, +Scripting.addGlobal(function snapshotDashboard() { CurrentUserUtils.snapshotDashboard(Doc.UserDoc()); }, + "creates a snapshot copy of a dashboard"); +Scripting.addGlobal(function createNewDashboard() { return CurrentUserUtils.createNewDashboard(Doc.UserDoc()); }, "creates a new dashboard when called"); Scripting.addGlobal(function createNewPresentation() { return MainView.Instance.createNewPresentation(); }, "creates a new presentation when called"); diff --git a/src/client/util/History.ts b/src/client/util/History.ts index cab682ac7..cbe36b401 100644 --- a/src/client/util/History.ts +++ b/src/client/util/History.ts @@ -1,8 +1,8 @@ import { Doc } from "../../fields/Doc"; import { DocServer } from "../DocServer"; -import { MainView } from "../views/MainView"; import * as qs from 'query-string'; import { Utils, OmitKeys } from "../../Utils"; +import { CurrentUserUtils } from "./CurrentUserUtils"; export namespace HistoryUtil { export interface DocInitializerList { @@ -197,7 +197,7 @@ export namespace HistoryUtil { await Promise.all(Object.keys(init).map(id => initDoc(id, init[id]))); } if (field instanceof Doc) { - MainView.Instance.openDashboard(field, true); + CurrentUserUtils.openDashboard(Doc.UserDoc(), field, true); } } diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index cfa2534c9..d107b74f0 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -70,7 +70,6 @@ import "./MainView.scss"; export class MainView extends React.Component { public static Instance: MainView; private _buttonBarHeight = 36; - private _urlState: HistoryUtil.DocUrl; private _docBtnRef = React.createRef(); private _mainViewRef = React.createRef(); @@ -145,7 +144,7 @@ export class MainView extends React.Component { super(props); MainView.Instance = this; this.sidebarContent.proto = undefined; - this._urlState = HistoryUtil.parseUrl(window.location) || {} as any; + CurrentUserUtils._urlState = HistoryUtil.parseUrl(window.location) || {} as any; // causes errors to be generated when modifying an observable outside of an action CurrentUserUtils.propertiesWidth = 0; @@ -233,11 +232,11 @@ export class MainView extends React.Component { if (received && !this.userDoc) { reaction( () => CurrentUserUtils.GuestTarget, - target => target && this.createNewDashboard(), + target => target && CurrentUserUtils.createNewDashboard(Doc.UserDoc()), { fireImmediately: true } ); } else { - if (received && this._urlState.sharing) { + if (received && CurrentUserUtils._urlState.sharing) { reaction(() => CollectionDockingView.Instance && CollectionDockingView.Instance.initialized, initialized => initialized && received && DocServer.GetRefField(received).then(docField => { if (docField instanceof Doc && docField._viewType !== CollectionViewType.Docking) { @@ -248,9 +247,9 @@ export class MainView extends React.Component { } const doc = this.userDoc && await Cast(this.userDoc.activeDashboard, Doc); if (doc) { - this.openDashboard(doc); + CurrentUserUtils.openDashboard(Doc.UserDoc(), doc); } else { - this.createNewDashboard(); + CurrentUserUtils.createNewDashboard(Doc.UserDoc()); } } } @@ -271,73 +270,6 @@ export class MainView extends React.Component { Doc.AddDocToList(myPresentations, "data", pres); } - @action - createNewDashboard = async (id?: string) => { - const myPresentations = Doc.UserDoc().myPresentations as Doc; - const presentation = Doc.MakeCopy(Doc.UserDoc().emptyPresentation as Doc, true); - const dashboards = Cast(this.userDoc.myDashboards, Doc) as Doc; - const dashboardCount = DocListCast(dashboards.data).length + 1; - const emptyPane = Cast(this.userDoc.emptyPane, Doc, null); - emptyPane["dragFactory-count"] = NumCast(emptyPane["dragFactory-count"]) + 1; - const freeformOptions: DocumentOptions = { - x: 0, - y: 400, - _width: this._panelWidth * .7 - this.propertiesWidth() * 0.7, - _height: this._panelHeight, - title: `Untitled Tab ${NumCast(emptyPane["dragFactory-count"])}`, - }; - const freeformDoc = CurrentUserUtils.GuestTarget || Docs.Create.FreeformDocument([], freeformOptions); - const dashboardDoc = Docs.Create.StandardCollectionDockingDocument([{ doc: freeformDoc, initialWidth: 600 }], { title: `Dashboard ${dashboardCount}` }, id, "row"); - Doc.AddDocToList(myPresentations, "data", presentation); - Doc.UserDoc().activePresentation = presentation; - const toggleTheme = ScriptField.MakeScript(`self.darkScheme = !self.darkScheme`); - const toggleComic = ScriptField.MakeScript(`toggleComicMode()`); - const copyDashboard = ScriptField.MakeScript(`copyDashboard()`); - const createDashboard = ScriptField.MakeScript(`createDashboard()`); - dashboardDoc.contextMenuScripts = new List([toggleTheme!, toggleComic!, copyDashboard!, createDashboard!]); - dashboardDoc.contextMenuLabels = new List(["Toggle Theme Colors", "Toggle Comic Mode", "Snapshot Dashboard", "Create Dashboard"]); - - Doc.AddDocToList(dashboards, "data", dashboardDoc); - // bcz: strangely, we need a timeout to prevent exceptions/issues initializing GoldenLayout (the rendering engine for Main Container) - setTimeout(() => this.openDashboard(dashboardDoc), 0); - } - - @action - openDashboard = (doc: Doc, fromHistory = false) => { - CurrentUserUtils.MainDocId = doc[Id]; - - if (doc) { // this has the side-effect of setting the main container since we're assigning the active/guest dashboard - !("presentationView" in doc) && (doc.presentationView = new List([Docs.Create.TreeDocument([], { title: "Presentation" })])); - this.userDoc ? (this.userDoc.activeDashboard = doc) : (CurrentUserUtils.GuestDashboard = doc); - } - const state = this._urlState; - if (state.sharing === true && !this.userDoc) { - DocServer.Control.makeReadOnly(); - } else { - fromHistory || HistoryUtil.pushState({ - type: "doc", - docId: doc[Id], - readonly: state.readonly, - nro: state.nro, - sharing: false, - }); - if (state.readonly === true || state.readonly === null) { - DocServer.Control.makeReadOnly(); - } else if (state.safe) { - if (!state.nro) { - DocServer.Control.makeReadOnly(); - } - CollectionView.SetSafeMode(true); - } else if (state.nro || state.nro === null || state.readonly === false) { - } else if (doc.readOnly) { - DocServer.Control.makeReadOnly(); - } else { - DocServer.Control.makeEditable(); - } - } - - return true; - } onDrop = (e: React.DragEvent) => { e.preventDefault(); @@ -454,7 +386,7 @@ export class MainView extends React.Component { flyoutWidthFunc = () => this.flyoutWidth; addDocTabFunc = (doc: Doc, where: string, libraryPath?: Doc[]): boolean => { return where === "close" ? CollectionDockingView.CloseRightSplit(doc) : - doc.dockingConfig ? this.openDashboard(doc) : + doc.dockingConfig ? CurrentUserUtils.openDashboard(Doc.UserDoc(), doc) : CollectionDockingView.AddRightSplit(doc, libraryPath); } sidebarScreenToLocal = () => new Transform(0, (CollectionMenu.Instance.Pinned ? -35 : 0) - Number(SEARCH_PANEL_HEIGHT.replace("px", "")), 1); @@ -998,14 +930,5 @@ export class MainView extends React.Component { } Scripting.addGlobal(function selectMainMenu(doc: Doc, title: string) { MainView.Instance.selectMenu(doc); }); Scripting.addGlobal(function toggleComicMode() { Doc.UserDoc().fontFamily = "Comic Sans MS"; Doc.UserDoc().renderStyle = Doc.UserDoc().renderStyle === "comic" ? undefined : "comic"; }); -Scripting.addGlobal(function copyDashboard() { - const activeDashboard = Cast(Doc.UserDoc().activeDashboard, Doc, null); - CollectionDockingView.Copy(activeDashboard).then(copy => { - Doc.AddDocToList(Cast(Doc.UserDoc().myDashboards, Doc, null), "data", copy); - // bcz: strangely, we need a timeout to prevent exceptions/issues initializing GoldenLayout (the rendering engine for Main Container) - setTimeout(() => MainView.Instance.openDashboard(copy), 0); - }); -}); -Scripting.addGlobal(function createDashboard() { MainView.Instance.createNewDashboard(); }); Scripting.addGlobal(function importDocument() { return MainView.Instance.importDocument(); }, "imports files from device directly into the import sidebar"); diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index e7f54ff86..dfefd645a 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -25,7 +25,6 @@ import { SelectionManager } from '../../util/SelectionManager'; import { SnappingManager } from '../../util/SnappingManager'; import { Transform } from '../../util/Transform'; import { undoBatch } from "../../util/UndoManager"; -import { MainView } from '../MainView'; import { DocumentView } from "../nodes/DocumentView"; import { PresBox } from '../nodes/PresBox'; import "./CollectionDockingView.scss"; @@ -34,6 +33,7 @@ import { SubCollectionViewProps, CollectionSubView } from "./CollectionSubView"; import { CollectionViewType } from './CollectionView'; import { DockingViewButtonSelector } from './ParentDocumentSelector'; import React = require("react"); +import { CurrentUserUtils } from '../../util/CurrentUserUtils'; const _global = (window /* browser */ || global /* node */) as any; @observer @@ -87,7 +87,7 @@ export class CollectionDockingView extends CollectionSubView(doc => doc) { @action public OpenFullScreen(docView: DocumentView, libraryPath?: Doc[]) { if (docView.props.Document._viewType === CollectionViewType.Docking && docView.props.Document.layoutKey === "layout") { - return MainView.Instance.openDashboard(docView.props.Document); + return CurrentUserUtils.openDashboard(Doc.UserDoc(), docView.props.Document); } const document = Doc.MakeAlias(docView.props.Document); const newItemStackConfig = { @@ -188,7 +188,7 @@ export class CollectionDockingView extends CollectionSubView(doc => doc) { @action public static AddRightSplit(document: Doc, libraryPath?: Doc[]) { if (!CollectionDockingView.Instance) return false; - if (document._viewType === CollectionViewType.Docking) return MainView.Instance.openDashboard(document); + if (document._viewType === CollectionViewType.Docking) return CurrentUserUtils.openDashboard(Doc.UserDoc(), document); const instance = CollectionDockingView.Instance; const newItemStackConfig = { type: 'stack', @@ -864,7 +864,7 @@ export class DockedFrameRenderer extends React.Component { addDocTab = (doc: Doc, location: string, libraryPath?: Doc[]) => { SelectionManager.DeselectAll(); if (doc._viewType === CollectionViewType.Docking) { - return MainView.Instance.openDashboard(doc); + return CurrentUserUtils.openDashboard(Doc.UserDoc(), doc); } else if (location === "onRight") { return CollectionDockingView.AddRightSplit(doc, libraryPath); } else if (location === "close") { diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index 5099f0022..d7f0f8e14 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -20,7 +20,6 @@ import { undoBatch, UndoManager } from '../../util/UndoManager'; import { ContextMenu } from '../ContextMenu'; import { ContextMenuProps } from '../ContextMenuItem'; import { EditableView } from "../EditableView"; -import { MainView } from '../MainView'; import { ContentFittingDocumentView } from '../nodes/ContentFittingDocumentView'; import { DocumentView } from '../nodes/DocumentView'; import { ImageBox } from '../nodes/ImageBox'; @@ -32,6 +31,7 @@ import { CollectionViewType } from './CollectionView'; import React = require("react"); import { makeTemplate } from '../../util/DropConverter'; import { TraceMobx } from '../../../fields/util'; +import { CurrentUserUtils } from '../../util/CurrentUserUtils'; export interface TreeViewProps { document: Doc; @@ -739,7 +739,7 @@ export class CollectionTreeView extends CollectionSubView { // need to test if propagation has stopped because GoldenLayout forces a parallel react hierarchy to be created for its top-level layout if (!e.isPropagationStopped() && this.doc === Doc.UserDoc().myDashboards) { - ContextMenu.Instance.addItem({ description: "Create Dashboard", event: () => MainView.Instance.createNewDashboard(), icon: "plus" }); + ContextMenu.Instance.addItem({ description: "Create Dashboard", event: () => CurrentUserUtils.createNewDashboard(Doc.UserDoc()), icon: "plus" }); ContextMenu.Instance.addItem({ description: "Delete Dashboard", event: () => this.remove(this.doc), icon: "minus" }); e.stopPropagation(); e.preventDefault(); diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss index b5557e0d9..aa5180c96 100644 --- a/src/client/views/search/SearchBox.scss +++ b/src/client/views/search/SearchBox.scss @@ -6,23 +6,69 @@ flex-direction: column; width: 100%; height: 100%; - position: absolute; + position: relative; font-size: 10px; line-height: 1; overflow-y: auto; overflow-x: visible; background: lightgrey; + overflow: visible; + z-index: 10000; + .searchBox-lozenge-user, + .searchBox-lozenge-dashboard, .searchBox-lozenge { background-color: #313131; border-radius: 5px; - height: 15px; + height: 18px; padding: 4px; box-shadow: lightgrey 0.15em 0.15em 0.1em; margin: 2px; margin-bottom: 4px; border-top: dimgrey 1px solid; border-left: dimgrey 1px solid; + display: flex; + .searchBox-logoff, + .searchBox-dashboards { + border-radius: 3px; + background: olivedrab; + color: white; + position: relative; + display: none; + margin-left: 3px; + padding-left: 2px; + padding-right: 2px; + padding-bottom: 11px; + cursor: default; + } + .searchBox-logoff { + background: red; + } + + .searchBox-dashSelect{ + background-color: black; + color: white; + font-size: 9; + margin-right: 6; + border-radius: 5px; + position: relative; + height: 15px; + transform: translate(0,-3px); + + &:hover { + cursor: pointer; + } + } + } + .searchBox-lozenge-user:hover { + .searchBox-logoff { + display:inline-block; + } + } + .searchBox-lozenge-dashboard:hover { + .searchBox-dashboards { + display:inline-block; + } } } diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index 5739c2a67..7e233ecbb 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -5,14 +5,15 @@ import { observer } from 'mobx-react'; import * as React from 'react'; import { Doc, DocListCast, Field, Opt } from '../../../fields/Doc'; import { documentSchema } from "../../../fields/documentSchemas"; -import { Id, Copy } from '../../../fields/FieldSymbols'; +import { Copy, Id } from '../../../fields/FieldSymbols'; import { List } from '../../../fields/List'; import { createSchema, listSpec, makeInterface } from '../../../fields/Schema'; import { SchemaHeaderField } from '../../../fields/SchemaHeaderField'; import { Cast, NumCast, StrCast } from '../../../fields/Types'; -import { returnFalse, returnZero, setupMoveUpEvents, emptyFunction } from '../../../Utils'; +import { emptyFunction, returnFalse, returnZero, setupMoveUpEvents, Utils } from '../../../Utils'; import { Docs } from '../../documents/Documents'; import { DocumentType } from "../../documents/DocumentTypes"; +import { CurrentUserUtils } from "../../util/CurrentUserUtils"; import { SetupDrag } from '../../util/DragManager'; import { SearchUtil } from '../../util/SearchUtil'; import { Transform } from '../../util/Transform'; @@ -22,6 +23,7 @@ import { CollectionViewType } from '../collections/CollectionView'; import { ViewBoxBaseComponent } from "../DocComponent"; import { FieldView, FieldViewProps } from '../nodes/FieldView'; import "./SearchBox.scss"; +import { undoBatch } from "../../util/UndoManager"; export const searchSchema = createSchema({ Document: Doc }); @@ -485,19 +487,35 @@ export class SearchBox extends ViewBoxBaseComponent(docsForFilter) : undefined; collectionView.props.Document._docFilters = docsForFilter?.length && docFilters?.length ? new List(docFilters) : undefined; } + } + showLogout = () => { + } render() { + const myDashboards = DocListCast(Cast(Doc.UserDoc().myDashboards, Doc, null).data); return (
-
+
{`${Doc.CurrentUserEmail}`} +
window.location.assign(Utils.prepend("/logout"))}> + Logoff +
{`UI project`}
-
- {`➱ ${Cast(Doc.UserDoc().activeDashboard, Doc, null)?.title}`} +
+ +
CurrentUserUtils.createNewDashboard(Doc.UserDoc()))}> + New +
+
CurrentUserUtils.snapshotDashboard(Doc.UserDoc()))}> + Snapshot +
-- cgit v1.2.3-70-g09d2 From 33a6f17c7fcc0549c4e0e8cfaae7d0c0b11ced76 Mon Sep 17 00:00:00 2001 From: bobzel Date: Mon, 31 Aug 2020 12:03:19 -0400 Subject: major overhaul of mainView --- src/Utils.ts | 4 +- src/client/views/GlobalKeyHandler.ts | 1 - src/client/views/MainView.scss | 55 ++-- src/client/views/MainView.tsx | 201 +++++------- src/client/views/PropertiesView.scss | 4 +- src/client/views/PropertiesView.tsx | 5 +- src/client/views/globalCssVariables.scss | 6 + src/client/views/globalCssVariables.scss.d.ts | 1 + src/client/views/search/SearchBox.scss | 442 ++++++-------------------- src/client/views/search/SearchBox.tsx | 42 +-- 10 files changed, 248 insertions(+), 513 deletions(-) (limited to 'src/client/views/search/SearchBox.scss') diff --git a/src/Utils.ts b/src/Utils.ts index 5b5a06839..6582e43ef 100644 --- a/src/Utils.ts +++ b/src/Utils.ts @@ -549,8 +549,8 @@ export function setupMoveUpEvents( target: object, e: React.PointerEvent, moveEvent: (e: PointerEvent, down: number[], delta: number[]) => boolean, - upEvent: (e: PointerEvent, movement: number[]) => void, - clickEvent: (e: PointerEvent, doubleTap?: boolean) => void, + upEvent: (e: PointerEvent, movement: number[]) => any, + clickEvent: (e: PointerEvent, doubleTap?: boolean) => any, stopPropagation: boolean = true, stopMovePropagation: boolean = true ) { diff --git a/src/client/views/GlobalKeyHandler.ts b/src/client/views/GlobalKeyHandler.ts index 40353b1b7..a79973aee 100644 --- a/src/client/views/GlobalKeyHandler.ts +++ b/src/client/views/GlobalKeyHandler.ts @@ -193,7 +193,6 @@ export class KeyManager { break; case "t": PromiseValue(Cast(Doc.UserDoc()["tabs-button-tools"], Doc)).then(pv => pv && (pv.onClick as ScriptField).script.run({ this: pv })); - MainView.Instance.flyoutWidth = MainView.Instance.flyoutWidth === 240 ? 0 : 240; break; case "f": SearchBox.Instance._searchFullDB = "My Stuff"; diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss index 6cec5995c..43264d2e0 100644 --- a/src/client/views/MainView.scss +++ b/src/client/views/MainView.scss @@ -1,6 +1,7 @@ @import "globalCssVariables"; @import "nodeModuleOverrides"; + .dash-tooltip { font-size: 11px; padding: 2px; @@ -14,11 +15,15 @@ margin-top: 10px; } +.mainContent-div-flyout, .mainContent-div { position: relative; width: 100%; height: 100%; } +.mainContent-div-flyout { + left: calc(-1 * var(--flyoutHandleWidth)); +} // add nodes menu. Note that the + button is actually an input label, not an actual button. .mainView-docButtons { @@ -116,7 +121,10 @@ border-top-left-radius: 10px; border-bottom-left-radius: 10px; border-right: unset; - z-index: 2; + z-index: 1; + display: flex; + align-items: center; + padding: 4px; .mainView-propertiesDragger-icon { width: 10px; @@ -158,16 +166,26 @@ background: lightgrey; } } + .propertiesView { + right: 0; + position: absolute; + z-index: 2; + } } .mainView-menuPanel { - - width: 60px; + min-width: var(--menuPanelWidth); background-color: #121721; height: calc(100% - $searchpanel-height); //overflow-y: scroll; //overflow-x: hidden; + .collectionStackingView { + scrollbar-width: none; + } + ::-webkit-scrollbar { + width:0; + } .mainView-menuPanel-button { padding: 7px; @@ -274,7 +292,7 @@ .mainView-libraryFlyout { height: 100%; width: 100%; - position: absolute; + position: relative; display: flex; flex-direction: column; z-index: 2; @@ -296,39 +314,26 @@ } } .mainView-libraryFlyout-out { - transition: width .5s; + transition: width .25s; box-shadow: rgb(156, 147, 150) 0.2vw 0.2vw 0.2vw; } -.mainView-expandFlyoutButton { - position: absolute; - top: 120px; - right: 55px; - cursor: pointer; -} .mainView-libraryHandle { - width: 28px; - left: calc(100% - 10px); + width: var(--flyoutHandleWidth); height: 55px; top: 50%; + left: -10px; border: 1px solid black; border-radius: 8px; - position: absolute; - z-index: 2; + position: relative; + z-index: 1; touch-action: none; background-color: lightgrey; cursor: grab; - - .mainView-libraryDragger { - width: 100%; - position: absolute; - } - .mainView-libraryDragger-out { - width: 3vw; - position: fixed; - top: 0; - } + display: flex; + align-items: center; + padding: 12px; .mainView-libraryHandle-icon { width: 10px; diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 52c598d7d..d30179f1c 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -39,7 +39,7 @@ import { DictationOverlay } from './DictationOverlay'; import { DocumentDecorations } from './DocumentDecorations'; import { FormatShapePane } from "./FormatShapePane"; import { GestureOverlay } from './GestureOverlay'; -import { SEARCH_PANEL_HEIGHT } from './globalCssVariables.scss'; +import { SEARCH_PANEL_HEIGHT, MENU_PANEL_WIDTH } from './globalCssVariables.scss'; import { KeyManager } from './GlobalKeyHandler'; import { LinkMenu } from './linking/LinkMenu'; import "./MainView.scss"; @@ -61,17 +61,15 @@ import { SearchBox } from './search/SearchBox'; @observer export class MainView extends React.Component { public static Instance: MainView; - private _buttonBarHeight = 36; private _docBtnRef = React.createRef(); private _mainViewRef = React.createRef(); private _lastButton: Doc | undefined; @observable private _panelWidth: number = 0; @observable private _panelHeight: number = 0; - @observable private _flyoutTranslate: boolean = false; - @observable private _sidebarContent: any = this.userDoc?.sidebar; @observable private _panelContent: string = "none"; - @observable public flyoutWidth: number = 0; + @observable private _sidebarContent: any = this.userDoc?.sidebar; + @observable private _flyoutWidth: number = 0; @computed private get topOffset() { return (CollectionMenu.Instance?.Pinned ? 35 : 0) + Number(SEARCH_PANEL_HEIGHT.replace("px", "")); } @computed private get userDoc() { return Doc.UserDoc(); } @@ -79,6 +77,7 @@ export class MainView extends React.Component { @computed private get mainContainer() { return this.userDoc ? CurrentUserUtils.ActiveDashboard : CurrentUserUtils.GuestDashboard; } @computed public get mainFreeform(): Opt { return (docs => (docs && docs.length > 1) ? docs[1] : undefined)(DocListCast(this.mainContainer!.data)); } + menuPanelWidth = () => Number(MENU_PANEL_WIDTH.replace("px", "")); propertiesWidth = () => Math.max(0, Math.min(this._panelWidth - 50, CurrentUserUtils.propertiesWidth || 0)); componentDidMount() { @@ -165,7 +164,7 @@ export class MainView extends React.Component { } if (SearchBox.Instance._searchbarOpen) { const check = targets.some((thing) => - (thing.className === "collectionSchemaView-searchContainer" || (thing as any)?.dataset["icon"] === "filter" || + (thing.className === "collectionSchemaView-searchContainer" || (thing as any)?.dataset.icon === "filter" || thing.className === "collectionSchema-header-menuOptions")); !check && SearchBox.Instance.resetSearch(true); } @@ -221,16 +220,9 @@ export class MainView extends React.Component { e.preventDefault(); e.stopPropagation(); } - - @action - onResize = (r: any) => { - this._panelWidth = r.offset.width; - this._panelHeight = r.offset.height; - } - getPWidth = () => this._panelWidth - this.propertiesWidth(); getPHeight = () => this._panelHeight; - getContentsHeight = () => this._panelHeight - this._buttonBarHeight; + getContentsHeight = () => this._panelHeight - Number(SEARCH_PANEL_HEIGHT.replace("px", "")); defaultBackgroundColors = (doc: Opt, renderDepth: number) => { if (doc?.type === DocumentType.COL) { @@ -292,39 +284,29 @@ export class MainView extends React.Component { @computed get dockingContent() { TraceMobx(); - const width = this.flyoutWidth + this.propertiesWidth(); - return
+ return
{!this.mainContainer ? (null) : this.mainDocView}
; } @action onPropertiesPointerDown = (e: React.PointerEvent) => { - setupMoveUpEvents(this, e, action((e: PointerEvent, down: number[], delta: number[]) => { - CurrentUserUtils.propertiesWidth = this._panelWidth - e.clientX; - return false; - }), returnFalse, action(() => CurrentUserUtils.propertiesWidth = this.propertiesWidth() < 15 ? Math.min(this._panelWidth - 50, 250) : 0), false); + setupMoveUpEvents(this, e, + action(e => (CurrentUserUtils.propertiesWidth = Math.max(0, this._panelWidth - e.clientX)) ? false : false), + action(() => CurrentUserUtils.propertiesWidth < 5 && (CurrentUserUtils.propertiesWidth = 0)), + action(() => CurrentUserUtils.propertiesWidth = this.propertiesWidth() < 15 ? Math.min(this._panelWidth - 50, 250) : 0), false); } @action onFlyoutPointerDown = (e: React.PointerEvent) => { - if (this._flyoutTranslate) { - setupMoveUpEvents(this, e, action((e: PointerEvent) => { - this.flyoutWidth = Math.max(e.clientX - 58, 0); - if (this.flyoutWidth < 5) { - this._panelContent = "none"; - this._lastButton && (this._lastButton.color = "white"); - this._lastButton && (this._lastButton._backgroundColor = ""); - } - return false; - }), emptyFunction, action(() => { - if (this.flyoutWidth < 15) this.expandFlyout(); - else this.closeFlyout(); - })); - } + setupMoveUpEvents(this, e, + action(e => (this._flyoutWidth = Math.max(e.clientX - 58, 0)) ? false : false), + () => this._flyoutWidth < 5 && this.closeFlyout(), + this.toggleFlyout); } - flyoutWidthFunc = () => this.flyoutWidth; + flyoutWidthFunc = () => this._flyoutWidth; addDocTabFunc = (doc: Doc, where: string, libraryPath?: Doc[]): boolean => { return where === "close" ? CollectionDockingView.CloseSplit(doc) : doc.dockingConfig ? CurrentUserUtils.openDashboard(Doc.UserDoc(), doc) : CollectionDockingView.AddSplit(doc, "right"); @@ -333,41 +315,41 @@ export class MainView extends React.Component { mainContainerXf = () => this.sidebarScreenToLocal().translate(-58, 0); @computed get flyout() { - if (!this._sidebarContent) return null; - return
-
- "lightgrey"} - /> -
- {this.docButtons} -
; + return !this._sidebarContent || !this._flyoutWidth ? (null) : +
+
+ "lightgrey"} + /> +
+ {this.docButtons} +
; } @computed get menuPanel() { @@ -386,7 +368,7 @@ export class MainView extends React.Component { onClick={undefined} ScreenToLocalTransform={this.sidebarScreenToLocal} ContentScaling={returnOne} - PanelWidth={() => 60} + PanelWidth={this.menuPanelWidth} PanelHeight={this.getContentsHeight} renderDepth={0} focus={emptyFunction} @@ -404,34 +386,22 @@ export class MainView extends React.Component {
; } - - @action - closeFlyout = () => { - this._lastButton && (this._lastButton.color = "white"); - this._lastButton && (this._lastButton._backgroundColor = ""); - this._panelContent = "none"; - this.flyoutWidth = 0; - } - @action selectMenu = (button: Doc) => { const title = StrCast(Doc.GetProto(button).title); - this._lastButton && (this._lastButton.color = "white"); - this._lastButton && (this._lastButton._backgroundColor = ""); - if (this._panelContent === title && this.flyoutWidth !== 0) { - this._panelContent = "none"; - this.flyoutWidth = 0; + if (this._panelContent === title && this._flyoutWidth) { + this.closeFlyout(); } else { switch (this._panelContent = title) { case "Settings": SettingsManager.Instance.open(); - this.flyoutWidth = 0; + this.closeFlyout(); break; case "Catalog": SearchBox.Instance._searchFullDB = "My Stuff"; SearchBox.Instance.newsearchstring = ""; SearchBox.Instance.enter(undefined); - this.flyoutWidth = 0; + this.closeFlyout(); break; default: this._sidebarContent.proto = button.target as any; @@ -446,38 +416,26 @@ export class MainView extends React.Component { @computed get propertiesView() { TraceMobx(); - return
- CurrentUserUtils.propertiesWidth = 0)} /> -
; + return ; } @computed get mainInnerContent() { return <> {this.menuPanel}
-
- {this.flyoutWidth === 0 ? (null) : -
- -
- -
-
} -
- {this.flyout} - {this.expandButton} -
+ {this.flyout} +
+
+ {this.dockingContent} +
-
- -
+
{this.propertiesWidth() < 10 ? (null) : this.propertiesView}
@@ -489,12 +447,15 @@ export class MainView extends React.Component { const pinned = FormatShapePane.Instance?.Pinned; const innerContent = this.mainInnerContent; return !this.userDoc ? (null) : ( - + { + this._panelWidth = r.offset.width; + this._panelHeight = r.offset.height; + })}> {({ measureRef }) =>
{innerContent}
@@ -502,15 +463,15 @@ export class MainView extends React.Component { ); } - expandFlyout = action(() => { - this._flyoutTranslate = true; - this.flyoutWidth = (this.flyoutWidth || 250); + expandFlyout = action(() => this._flyoutWidth = (this._flyoutWidth || 250)); + toggleFlyout = action(() => this._flyoutWidth < 15 ? this.expandFlyout() : this.closeFlyout()); + closeFlyout = action(() => { + this._lastButton && (this._lastButton.color = "white"); + this._lastButton && (this._lastButton._backgroundColor = ""); + this._panelContent = "none"; + this._flyoutWidth = 0; }); - @computed get expandButton() { - return !this._flyoutTranslate ? (
) : (null); - } - addButtonDoc = (doc: Doc | Doc[]) => (doc instanceof Doc ? [doc] : doc).reduce((flg: boolean, doc) => { const ret = flg && Doc.AddDocToList(Doc.UserDoc().dockedBtns as Doc, "data", doc); ret && (doc._stayInCollection = undefined); @@ -728,7 +689,7 @@ export class MainView extends React.Component {
; , ele); - var success = false; + let success = false; const onSuccess = () => { success = true; clearTimeout(interval); diff --git a/src/client/views/PropertiesView.scss b/src/client/views/PropertiesView.scss index 254afeb0a..80f116029 100644 --- a/src/client/views/PropertiesView.scss +++ b/src/client/views/PropertiesView.scss @@ -6,7 +6,7 @@ cursor: auto; overflow-x: hidden; - overflow-y: scroll; + overflow-y: auto; .propertiesView-title { background-color: rgb(159, 159, 159); @@ -271,7 +271,7 @@ // display: inline-table; background-color: #ececec; max-height: 130px; - overflow-y: scroll; + overflow-y: auto; width: 92%; .propertiesView-sharingTable-item { diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx index 792db3e85..2df367502 100644 --- a/src/client/views/PropertiesView.tsx +++ b/src/client/views/PropertiesView.tsx @@ -37,7 +37,6 @@ interface PropertiesViewProps { height: number; renderDepth: number; ScreenToLocalTransform: () => Transform; - onDown: (event: any) => void; } @observer @@ -867,13 +866,11 @@ export class PropertiesView extends React.Component { if (this.selectedDoc && !this.isPres) { return
Properties - {/*
- -
*/}
{this.editableTitle} diff --git a/src/client/views/globalCssVariables.scss b/src/client/views/globalCssVariables.scss index 70a7946ba..d0c90edcb 100644 --- a/src/client/views/globalCssVariables.scss +++ b/src/client/views/globalCssVariables.scss @@ -37,6 +37,11 @@ $COLLECTION_BORDER_WIDTH: 1; $MINIMIZED_ICON_SIZE:25; $MAX_ROW_HEIGHT: 44px; $DFLT_IMAGE_NATIVE_DIM: 900px; +$MENU_PANEL_WIDTH: 60px; +:root { + --flyoutHandleWidth: 28px; + --menuPanelWidth: 60px; +} :export { contextMenuZindex: $contextMenu-zindex; @@ -47,4 +52,5 @@ $DFLT_IMAGE_NATIVE_DIM: 900px; ANTIMODEMENU_HEIGHT: $antimodemenu-height; SEARCH_PANEL_HEIGHT: $searchpanel-height; DFLT_IMAGE_NATIVE_DIM: $DFLT_IMAGE_NATIVE_DIM; + MENU_PANEL_WIDTH: $MENU_PANEL_WIDTH; } \ No newline at end of file diff --git a/src/client/views/globalCssVariables.scss.d.ts b/src/client/views/globalCssVariables.scss.d.ts index 531b38d68..fb3a327d0 100644 --- a/src/client/views/globalCssVariables.scss.d.ts +++ b/src/client/views/globalCssVariables.scss.d.ts @@ -8,6 +8,7 @@ interface IGlobalScss { ANTIMODEMENU_HEIGHT: string; SEARCH_PANEL_HEIGHT: string; DFLT_IMAGE_NATIVE_DIM: string; + MENU_PANEL_WIDTH: string; } declare const globalCssVariables: IGlobalScss; diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss index aa5180c96..13d4a6d5a 100644 --- a/src/client/views/search/SearchBox.scss +++ b/src/client/views/search/SearchBox.scss @@ -15,120 +15,123 @@ overflow: visible; z-index: 10000; - .searchBox-lozenge-user, - .searchBox-lozenge-dashboard, - .searchBox-lozenge { - background-color: #313131; - border-radius: 5px; - height: 18px; - padding: 4px; - box-shadow: lightgrey 0.15em 0.15em 0.1em; - margin: 2px; - margin-bottom: 4px; - border-top: dimgrey 1px solid; - border-left: dimgrey 1px solid; + .searchBox-bar { + height: $searchpanel-height; display: flex; - .searchBox-logoff, - .searchBox-dashboards { - border-radius: 3px; - background: olivedrab; - color: white; - position: relative; - display: none; - margin-left: 3px; - padding-left: 2px; - padding-right: 2px; - padding-bottom: 11px; - cursor: default; - } - .searchBox-logoff { - background: red; - } + justify-content: center; + align-items: center; + background-color: black; - .searchBox-dashSelect{ - background-color: black; - color: white; - font-size: 9; - margin-right: 6; - border-radius: 5px; - position: relative; - height: 15px; - transform: translate(0,-3px); + .searchBox-lozenges { + position: absolute; + left: 15; + display: flex; - &:hover { - cursor: pointer; + .searchBox-lozenge-user, + .searchBox-lozenge-dashboard, + .searchBox-lozenge { + background-color: #313131; + border-radius: 5px; + height: 18px; + padding: 4px; + box-shadow: lightgrey 0.15em 0.15em 0.1em; + margin: 2px; + margin-bottom: 4px; + border-top: dimgrey 1px solid; + border-left: dimgrey 1px solid; + display: flex; + .searchBox-logoff, + .searchBox-dashboards { + border-radius: 3px; + background: olivedrab; + color: white; + position: relative; + display: none; + margin-left: 3px; + padding-left: 2px; + padding-right: 2px; + padding-bottom: 11px; + cursor: default; + } + .searchBox-logoff { + background: red; + } + + .searchBox-dashSelect{ + background-color: black; + color: white; + font-size: 9; + margin-right: 6; + border-radius: 5px; + position: relative; + height: 15px; + transform: translate(0,-3px); + + &:hover { + cursor: pointer; + } + } + } + .searchBox-lozenge-user:hover { + .searchBox-logoff { + display:inline-block; + } + } + .searchBox-lozenge-dashboard:hover { + .searchBox-dashboards { + display:inline-block; + } } } - } - .searchBox-lozenge-user:hover { - .searchBox-logoff { - display:inline-block; - } - } - .searchBox-lozenge-dashboard:hover { - .searchBox-dashboards { - display:inline-block; - } - } -} - -.searchBox-bar { - height: 32px; - display: flex; - justify-content: center; - align-items: center; - background-color: black; - .searchBox-barChild { - - &.searchBox-collection { - flex: 0 1 auto; - margin-left: 2px; - margin-right: 2px - } - - &.searchBox-input { - margin:5px; - border-radius:20px; - border:black; - display: block; - width: 130px; - -webkit-transition: width 0.4s; - transition: width 0.4s; - align-self: stretch; - outline:none; + .searchBox-query { + position: relative; + display: flex; + width: 450; } + .searchBox-barChild { - .searchBox-input:focus { - width: 500px; - outline:none; - } + &.searchBox-collection { + flex: 0 1 auto; + margin-left: 2px; + margin-right: 2px + } - &.searchBox-filter { - align-self: stretch; - button{ - transform:none; + &.searchBox-input { + margin:5px; + border-radius:20px; + border:black; + display: block; + width: 130px; + -webkit-transition: width 0.4s; + transition: width 0.4s; + align-self: stretch; + outline:none; + &:focus { + width: 500px; + outline:none; + } } - button:hover{ - transform:none; + &.searchBox-filter { + align-self: stretch; + button{ + transform:none; + &:hover { + transform: none; + } + } } - } - &.searchBox-submit { - margin-left: 2px; - margin-right: 2px - } + &.searchBox-submit { + margin-left: 2px; + margin-right: 2px + } - &.searchBox-close { - color: $light-color; - max-height: 32px; + &.searchBox-close { + color: $light-color; + max-height: $searchpanel-height; + } } - } -} - -.searchBox-quickFilter { - width: 100%; - height: 40px; - margin-top: 10px; + } } .searchBox-results { @@ -149,241 +152,4 @@ text-align: left; font-weight: bold; } -} - -.filter-form { - position: relative; - background: #121721; - flex-direction: column; - transform-origin: top; - transition: height 0.3s ease, display 0.6s ease, overflow 0.6s ease; - height:0px; - overflow:hidden; - - - .filter-header { - //display: flex; - position: relative; - //flex-wrap:wrap; - right: 1px; - color: grey; - //flex-direction: row-reverse; - transform-origin: top; - //justify-content: space-evenly; - margin-bottom: 5px; - overflow:hidden; - transition:height 0.3s ease-out; - - - - .filter-item { - position: relative; - border:1px solid grey; - border-radius: 16px; - - } - } - - .filter-body { - position: relative; - right: 1px; - color: grey; - transform-origin: top; - border-top: 0px; - - overflow:hidden; - transition:height 0.3s ease-out; - height:0px; - - } - .filter-key { - position: relative; - right: 1px; - color: grey; - transform-origin: top; - border-top: 0px; - overflow:hidden; - transition:height 0.3s ease-out; - height:0px; - - // .filter-keybar { - // display: flex; - // flex-wrap: wrap; - // justify-content: space-evenly; - // height: auto; - // width: 100%; - // flex-direction: row-reverse; - // margin-top:5px; - - // .filter-item { - // position: relative; - // border:1px solid grey; - // border-radius: 16px; - // } - // } - } -} - -// .top-filter-header { - -// #header { -// text-transform: uppercase; -// letter-spacing: 2px; -// font-size: 13; -// width: 80%; -// } - -// .close-icon { -// width: 20%; -// opacity: .6; -// position: relative; -// display: block; - -// .line { -// display: block; -// background: $alt-accent; -// width: 20; -// height: 3; -// position: absolute; -// right: 0; -// border-radius: ($height-line / 2); - -// &.line-1 { -// transform: rotate(45deg); -// top: 45%; -// } - -// &.line-2 { -// transform: rotate(-45deg); -// top: 45%; -// } -// } -// } - -// .close-icon:hover { -// opacity: 1; -// } - -// } - -// .filter-options { - -// .filter-div { -// margin-top: 10px; -// margin-bottom: 10px; -// display: inline-block; -// width: 100%; -// border-color: rgba(178, 206, 248, .2); // $darker-alt-accent -// border-top-style: solid; - -// .filter-header { -// display: flex; -// align-items: center; -// margin-bottom: 10px; -// letter-spacing: 2px; - -// .filter-title { -// font-size: 13; -// text-transform: uppercase; -// margin-top: 10px; -// margin-bottom: 10px; -// -webkit-transition: all 0.2s ease-in-out; -// -moz-transition: all 0.2s ease-in-out; -// -o-transition: all 0.2s ease-in-out; -// transition: all 0.2s ease-in-out; -// } -// } - -// .filter-header:hover .filter-title { -// transform: scale(1.05); -// } - -// .filter-panel { -// max-height: 0px; -// width: 100%; -// overflow: hidden; -// opacity: 0; -// transform-origin: top; -// -webkit-transition: all 0.2s ease-in-out; -// -moz-transition: all 0.2s ease-in-out; -// -o-transition: all 0.2s ease-in-out; -// transition: all 0.2s ease-in-out; -// text-align: center; -// } -// } -// } - -// .filter-buttons { -// border-color: rgba(178, 206, 248, .2); // $darker-alt-accent -// border-top-style: solid; -// padding-top: 10px; -// } - - -.active-filters { - display: flex; - flex-direction: row-reverse; - justify-content: flex-end; - width: 100%; - margin-right: 30px; - position: relative; - - .active-icon { - max-width: 40px; - flex: initial; - - &.icon { - width: 40px; - text-align: center; - margin-bottom: 5px; - position: absolute; - } - - &.container { - display: flex; - flex-direction: column; - width: 40px; - } - - &.description { - text-align: center; - top: 40px; - position: absolute; - width: 40px; - font-size: 9px; - opacity: 0; - -webkit-transition: all 0.2s ease-in-out; - -moz-transition: all 0.2s ease-in-out; - -o-transition: all 0.2s ease-in-out; - transition: all 0.2s ease-in-out; - } - - &.icon:hover+.description { - opacity: 1; - } - } - - .col-icon { - height: 35px; - margin-left: 5px; - width: 35px; - background-color: black; - color: white; - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - - .save-filter, - .reset-filter, - .all-filter { - background-color: gray; - } - - .save-filter:hover, - .reset-filter:hover, - .all-filter:hover { - background-color: $darker-alt-accent; - } - } } \ No newline at end of file diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index 3926208ae..ee38046be 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -495,31 +495,31 @@ export class SearchBox extends ViewBoxBaseComponent -
-
- {`${Doc.CurrentUserEmail}`} -
window.location.assign(Utils.prepend("/logout"))}> - Logoff +
+
+
+ {`${Doc.CurrentUserEmail}`} +
window.location.assign(Utils.prepend("/logout"))}> + Logoff
-
-
- {`UI project`} -
-
- -
CurrentUserUtils.createNewDashboard(Doc.UserDoc()))}> - New
-
CurrentUserUtils.snapshotDashboard(Doc.UserDoc()))}> - Snapshot +
+ {`UI project`} +
+
+ +
CurrentUserUtils.createNewDashboard(Doc.UserDoc()))}> + New +
+
CurrentUserUtils.snapshotDashboard(Doc.UserDoc()))}> + Snapshot +
-
-
-
+
-- cgit v1.2.3-70-g09d2