From ca5ba45ffeebfca4c600c55268202672ff55775c Mon Sep 17 00:00:00 2001 From: yipstanley Date: Sat, 28 Sep 2019 14:03:01 -0400 Subject: library updates --- .../views/collections/CollectionBaseView.scss | 5 +++-- .../views/collections/CollectionTreeView.scss | 6 +++--- .../authentication/models/current_user_utils.ts | 22 ++++++++++++++++++---- 3 files changed, 24 insertions(+), 9 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionBaseView.scss b/src/client/views/collections/CollectionBaseView.scss index 583e6f6ca..5ed593f5a 100644 --- a/src/client/views/collections/CollectionBaseView.scss +++ b/src/client/views/collections/CollectionBaseView.scss @@ -1,4 +1,5 @@ @import "../globalCssVariables"; + #collectionBaseView { border-width: 0; border-color: $light-color-secondary; @@ -6,7 +7,7 @@ border-radius: 0 0 $border-radius $border-radius; box-sizing: border-box; border-radius: inherit; - width:100%; - height:100%; + width: 100%; + height: 100%; overflow: auto; } \ No newline at end of file diff --git a/src/client/views/collections/CollectionTreeView.scss b/src/client/views/collections/CollectionTreeView.scss index 197e57808..f423788bd 100644 --- a/src/client/views/collections/CollectionTreeView.scss +++ b/src/client/views/collections/CollectionTreeView.scss @@ -7,9 +7,9 @@ border-radius: inherit; box-sizing: border-box; height: 100%; - width:100%; + width: 100%; position: absolute; - top:0; + top: 0; padding-top: 20px; padding-left: 10px; padding-right: 0px; @@ -51,7 +51,7 @@ .editableView-container-editing { display: block; text-overflow: ellipsis; - font-size: 24px; + font-size: 1vw; white-space: nowrap; } } diff --git a/src/server/authentication/models/current_user_utils.ts b/src/server/authentication/models/current_user_utils.ts index 1af36fccd..2840f0315 100644 --- a/src/server/authentication/models/current_user_utils.ts +++ b/src/server/authentication/models/current_user_utils.ts @@ -44,15 +44,19 @@ export class CurrentUserUtils { // setup workspaces library item if (doc.workspaces === undefined) { - const workspaces = Docs.Create.TreeDocument([], { title: "Workspaces", height: 100 }); + const workspaces = Docs.Create.TreeDocument([], { title: "Workspaces".toUpperCase(), height: 100 }); workspaces.boxShadow = "0 0"; doc.workspaces = workspaces; } PromiseValue(Cast(doc.workspaces, Doc)).then(workspaces => { if (workspaces) { + workspaces.backgroundColor = "#eeeeee"; workspaces.preventTreeViewOpen = true; workspaces.forceActive = true; workspaces.lockedPosition = true; + if (StrCast(workspaces.title) === "Workspaces") { + workspaces.title = "WORKSPACES"; + } } }); @@ -69,15 +73,19 @@ export class CurrentUserUtils { // setup Recently Closed library item if (doc.recentlyClosed === undefined) { - const recentlyClosed = Docs.Create.TreeDocument([], { title: "Recently Closed", height: 75 }); + const recentlyClosed = Docs.Create.TreeDocument([], { title: "Recently Closed".toUpperCase(), height: 75 }); recentlyClosed.boxShadow = "0 0"; doc.recentlyClosed = recentlyClosed; } PromiseValue(Cast(doc.recentlyClosed, Doc)).then(recent => { if (recent) { + recent.backgroundColor = "#eeeeee"; recent.preventTreeViewOpen = true; recent.forceActive = true; recent.lockedPosition = true; + if (StrCast(recent.title) === "Recently Closed") { + recent.title = "RECENTLY CLOSED"; + } } }); @@ -95,10 +103,14 @@ export class CurrentUserUtils { sidebar.gridGap = 5; sidebar.xMargin = 5; sidebar.yMargin = 5; - Doc.GetProto(sidebar).backgroundColor = "#aca3a6"; sidebar.boxShadow = "1 1 3"; doc.sidebar = sidebar; } + PromiseValue(Cast(doc.sidebar, Doc)).then(sidebar => { + if (sidebar) { + sidebar.backgroundColor = "lightgrey"; + } + }) if (doc.overlays === undefined) { const overlays = Docs.Create.FreeformDocument([], { title: "Overlays" }); @@ -110,7 +122,9 @@ export class CurrentUserUtils { PromiseValue(Cast(doc.overlays, Doc)).then(overlays => overlays && Doc.AddDocToList(overlays, "data", doc.linkFollowBox = Docs.Create.LinkFollowBoxDocument({ x: 250, y: 20, width: 500, height: 370, title: "Link Follower" }))); } - StrCast(doc.title).indexOf("@") !== -1 && (doc.title = StrCast(doc.title).split("@")[0] + "'s Library"); + StrCast(doc.title).indexOf("@") !== -1 && (doc.title = (StrCast(doc.title).split("@")[0] + "'s Library").toUpperCase()); + StrCast(doc.title).indexOf("'s Library") !== -1 && (doc.title = StrCast(doc.title).toUpperCase()); + doc.backgroundColor = "#eeeeee"; doc.width = 100; doc.preventTreeViewOpen = true; doc.forceActive = true; -- cgit v1.2.3-70-g09d2 From 78d9ea53fcf13a42445f2b2cd9b8a76fef0fdfea Mon Sep 17 00:00:00 2001 From: yipstanley Date: Sat, 28 Sep 2019 15:26:27 -0400 Subject: sidebar now flies out --- src/client/views/Main.scss | 7 +++++ src/client/views/MainView.tsx | 65 ++++++++++++++++++++++++++++++++++++------- 2 files changed, 62 insertions(+), 10 deletions(-) (limited to 'src') diff --git a/src/client/views/Main.scss b/src/client/views/Main.scss index bc0975c86..67bfe460f 100644 --- a/src/client/views/Main.scss +++ b/src/client/views/Main.scss @@ -238,6 +238,13 @@ ul#add-options-list { flex-direction: column; } +.expandFlyoutButton { + position: absolute; + top: 30px; + right: 30px; + cursor: pointer; +} + .mainView-libraryHandle { width: 20px; height: 40px; diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 244b217ed..afc3612f6 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -1,5 +1,5 @@ import { IconName, library } from '@fortawesome/fontawesome-svg-core'; -import { faLink, faArrowDown, faArrowUp, faBolt, faCaretUp, faCat, faCheck, faClone, faCloudUploadAlt, faCommentAlt, faCut, faExclamation, faFilePdf, faFilm, faFont, faGlobeAsia, faLongArrowAltRight, faMusic, faObjectGroup, faPause, faPenNib, faPlay, faPortrait, faRedoAlt, faThumbtack, faTree, faUndoAlt, faTv } from '@fortawesome/free-solid-svg-icons'; +import { faLink, faArrowDown, faArrowUp, faBolt, faCaretUp, faCat, faCheck, faClone, faCloudUploadAlt, faCommentAlt, faCut, faExclamation, faFilePdf, faFilm, faFont, faGlobeAsia, faLongArrowAltRight, faMusic, faObjectGroup, faPause, faPenNib, faPlay, faPortrait, faRedoAlt, faThumbtack, faTree, faUndoAlt, faTv, faChevronRight } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { action, computed, configure, observable, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; @@ -195,6 +195,7 @@ export class MainView extends React.Component { library.add(faArrowUp); library.add(faCloudUploadAlt); library.add(faBolt); + library.add(faChevronRight); this.initEventListeners(); this.initAuthenticationRouters(); } @@ -311,12 +312,14 @@ export class MainView extends React.Component { } @observable flyoutWidth: number = 250; + @observable flyoutTranslate: boolean = true; @computed get dockingContent() { let flyoutWidth = this.flyoutWidth; + let countWidth = this.flyoutTranslate; let mainCont = this.mainContainer; return {({ measureRef }) => -
+
{!mainCont ? (null) : { + if (this.flyoutWidth === 0) { + this.flyoutWidth = 250; + this.flyoutTranslate = false; + } + } + + @action + pointerLeaveDragger = () => { + if (!this.flyoutTranslate) { + this.flyoutWidth = 0; + this.flyoutTranslate = true; + } + } + @action onPointerMove = (e: PointerEvent) => { this.flyoutWidth = Math.max(e.clientX, 0); @@ -411,18 +431,34 @@ export class MainView extends React.Component { getScale={returnOne}> ; } + @computed get mainContent() { let sidebar = CurrentUserUtils.UserDocument.sidebar; if (!(sidebar instanceof Doc)) return (null); return
-
- -
-
- {this.flyout} +
+
+ +
+
+ {this.flyout} + {this.expandButton} +
{this.dockingContent}
; @@ -478,7 +514,7 @@ export class MainView extends React.Component { ]; if (!ClientUtils.RELEASE) btns.unshift([React.createRef(), "cat", "Add Cat Image", addImageNode]); - return < div id="add-nodes-menu" style={{ left: this.flyoutWidth + 20, bottom: 20 }} > + return < div id="add-nodes-menu" style={{ left: (this.flyoutTranslate ? this.flyoutWidth : 0) + 20, bottom: 20 }} > @@ -569,6 +605,15 @@ export class MainView extends React.Component { return !PresBox.CurrentPresentation || !PresBox.CurrentPresentation.presMode ? (null) : ; } + @computed get expandButton() { + return !this.flyoutTranslate ? (
{ + runInAction(() => { + this.flyoutWidth = 250; + this.flyoutTranslate = true; + }); + }}>
) : (null); + } + render() { return (
-- cgit v1.2.3-70-g09d2 From 2d3deb7291b7d98acf71566a67c4d648a90ef5af Mon Sep 17 00:00:00 2001 From: yipstanley Date: Sat, 28 Sep 2019 16:00:44 -0400 Subject: search bar filtering updatesA --- src/client/views/MainView.tsx | 3 ++- src/client/views/search/SearchBox.scss | 9 +++++++++ src/client/views/search/SearchBox.tsx | 11 ++++++++--- 3 files changed, 19 insertions(+), 4 deletions(-) (limited to 'src') diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index afc3612f6..ffbba3a20 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -1,5 +1,5 @@ import { IconName, library } from '@fortawesome/fontawesome-svg-core'; -import { faLink, faArrowDown, faArrowUp, faBolt, faCaretUp, faCat, faCheck, faClone, faCloudUploadAlt, faCommentAlt, faCut, faExclamation, faFilePdf, faFilm, faFont, faGlobeAsia, faLongArrowAltRight, faMusic, faObjectGroup, faPause, faPenNib, faPlay, faPortrait, faRedoAlt, faThumbtack, faTree, faUndoAlt, faTv, faChevronRight } from '@fortawesome/free-solid-svg-icons'; +import { faLink, faArrowDown, faArrowUp, faBolt, faCaretUp, faCat, faCheck, faClone, faCloudUploadAlt, faCommentAlt, faCut, faExclamation, faFilePdf, faFilm, faFont, faGlobeAsia, faLongArrowAltRight, faMusic, faObjectGroup, faPause, faPenNib, faPlay, faPortrait, faRedoAlt, faThumbtack, faTree, faUndoAlt, faTv, faChevronRight, faEllipsisV } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { action, computed, configure, observable, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; @@ -196,6 +196,7 @@ export class MainView extends React.Component { library.add(faCloudUploadAlt); library.add(faBolt); library.add(faChevronRight); + library.add(faEllipsisV); this.initEventListeners(); this.initAuthenticationRouters(); } diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss index 5ed33a596..0dd4d3dc5 100644 --- a/src/client/views/search/SearchBox.scss +++ b/src/client/views/search/SearchBox.scss @@ -34,6 +34,9 @@ &.searchBox-filter { align-self: stretch; + } + + &.searchBox-submit { margin-left: 2px; margin-right: 2px } @@ -45,6 +48,12 @@ } } +.searchBox-quickFilter { + width: 500px; + margin-left: 25px; + margin-top: 10px; +} + .searchBox-results { margin-right: 136px; top: 300px; diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index 0d50124dd..1b8177842 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -18,6 +18,7 @@ import { FilterBox } from './FilterBox'; import "./FilterBox.scss"; import "./SearchBox.scss"; import { SearchItem } from './SearchItem'; +import { IconBar } from './IconBar'; library.add(faTimes); @@ -231,7 +232,7 @@ export class SearchBox extends React.Component { } @action.bound - openSearch(e: React.PointerEvent) { + openSearch(e: React.SyntheticEvent) { e.stopPropagation(); this._openNoResults = false; FilterBox.Instance.closeFilter(); @@ -337,12 +338,16 @@ export class SearchBox extends React.Component { + -
+ {(this._numTotalResults > 0 || !this._searchbarOpen) ? (null) : + (
+
+
)}