aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/Main.scss7
-rw-r--r--src/client/views/MainView.tsx76
-rw-r--r--src/client/views/collections/CollectionTreeView.scss2
-rw-r--r--src/client/views/search/SearchBox.scss9
-rw-r--r--src/client/views/search/SearchBox.tsx11
-rw-r--r--src/server/authentication/models/current_user_utils.ts22
6 files changed, 105 insertions, 22 deletions
diff --git a/src/client/views/Main.scss b/src/client/views/Main.scss
index 04249506a..4cd860da2 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 35d527c91..660b42290 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -1,4 +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, faEllipsisV } from '@fortawesome/free-solid-svg-icons';
import { 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, faTv, faUndoAlt } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { action, computed, configure, observable, reaction, runInAction } from 'mobx';
@@ -213,6 +214,8 @@ export class MainView extends React.Component {
library.add(faArrowUp);
library.add(faCloudUploadAlt);
library.add(faBolt);
+ library.add(faChevronRight);
+ library.add(faEllipsisV);
this.initEventListeners();
this.initAuthenticationRouters();
}
@@ -366,12 +369,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 <Measure offset onResize={this.onResize}>
{({ measureRef }) =>
- <div ref={measureRef} id="mainContent-div" style={{ width: `calc(100% - ${flyoutWidth}px`, transform: `translate(${flyoutWidth}px, 0px)` }} onDrop={this.onDrop}>
+ <div ref={measureRef} id="mainContent-div" style={{ width: `calc(100% - ${countWidth ? flyoutWidth : 0}px`, transform: `translate(${countWidth ? flyoutWidth : 0}px, 0px)` }} onDrop={this.onDrop}>
{!mainCont ? (null) :
<DocumentView Document={mainCont}
DataDoc={undefined}
@@ -411,6 +416,23 @@ export class MainView extends React.Component {
e.stopPropagation();
e.preventDefault();
}
+
+ @action
+ pointerOverDragger = () => {
+ 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);
@@ -467,26 +489,52 @@ export class MainView extends React.Component {
getScale={returnOne}>
</DocumentView>;
}
+
@computed
get mainContent() {
if (!this.userDoc) {
- return <div>{this.dockingContent}</div>;
+ return (<div>{this.dockingContent}</div>);
}
let sidebar = this.userDoc.sidebar;
if (!(sidebar instanceof Doc)) {
return (null);
}
- return <div>
- <div className="mainView-libraryHandle"
- style={{ cursor: "ew-resize", left: `${this.flyoutWidth - 10}px`, backgroundColor: `${StrCast(sidebar.backgroundColor, "lightGray")}` }}
- onPointerDown={this.onPointerDown}>
- <span title="library View Dragger" style={{ width: "100%", height: "100%", position: "absolute" }} />
- </div>
- <div className="mainView-libraryFlyout" style={{ width: `${this.flyoutWidth}px`, zIndex: 1 }}>
- {this.flyout}
- </div>
- {this.dockingContent}
- </div>;
+ return (
+ <div className="mainContent" style={{ width: "100%", height: "100%", position: "absolute" }}>
+ <div onPointerLeave={this.pointerLeaveDragger}>
+ <div className="mainView-libraryHandle"
+ style={{ cursor: "ew-resize", left: `${(this.flyoutWidth * (this.flyoutTranslate ? 1 : 0)) - 10}px`, backgroundColor: `${StrCast(sidebar.backgroundColor, "lightGray")}` }}
+ onPointerDown={this.onPointerDown} onPointerOver={this.pointerOverDragger}>
+ <span title="library View Dragger" style={{
+ width: (this.flyoutWidth !== 0 && this.flyoutTranslate) ? "100%" : "5vw",
+ height: (this.flyoutWidth !== 0 && this.flyoutTranslate) ? "100%" : "30vh",
+ position: "absolute",
+ top: (this.flyoutWidth !== 0 && this.flyoutTranslate) ? "" : "-10vh"
+ }} />
+ </div>
+ <div className="mainView-libraryFlyout" style={{
+ width: `${this.flyoutWidth}px`,
+ zIndex: 1,
+ transformOrigin: this.flyoutTranslate ? "" : "left center",
+ transition: this.flyoutTranslate ? "" : "width .5s",
+ transform: `scale(${this.flyoutTranslate ? 1 : 0.8})`,
+ boxShadow: this.flyoutTranslate ? "" : "rgb(156, 147, 150) 0.2vw 0.2vw 0.8vw"
+ }}>
+ {this.flyout}
+ {this.expandButton}
+ </div>
+ </div>
+ {this.dockingContent}
+ </div>);
+ }
+
+ @computed get expandButton() {
+ return !this.flyoutTranslate ? (<div className="expandFlyoutButton" title="Re-attach sidebar" onPointerDown={() => {
+ runInAction(() => {
+ this.flyoutWidth = 250;
+ this.flyoutTranslate = true;
+ });
+ }}><FontAwesomeIcon icon="chevron-right" color="grey" size="lg" /></div>) : (null);
}
selected = (tool: InkTool) => {
@@ -550,7 +598,7 @@ export class MainView extends React.Component {
];
if (!ClientUtils.RELEASE) btns.unshift([React.createRef<HTMLDivElement>(), "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 }} >
<input type="checkbox" id="add-menu-toggle" ref={this.addMenuToggle} />
<label htmlFor="add-menu-toggle" style={{ marginTop: 2 }} title="Close Menu"><p>+</p></label>
diff --git a/src/client/views/collections/CollectionTreeView.scss b/src/client/views/collections/CollectionTreeView.scss
index ab01a1086..ca0c321b7 100644
--- a/src/client/views/collections/CollectionTreeView.scss
+++ b/src/client/views/collections/CollectionTreeView.scss
@@ -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/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 f53270c64..be75a29e0 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';
import { string } from 'prop-types';
library.add(faTimes);
@@ -236,7 +237,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();
@@ -342,12 +343,16 @@ export class SearchBox extends React.Component {
<FontAwesomeIcon icon="object-group" size="lg" />
</span>
<input value={this._searchString} onChange={this.onChange} type="text" placeholder="Search..." id="search-input" ref={this.inputRef}
- className="searchBox-barChild searchBox-input" onPointerDown={this.openSearch} onKeyPress={this.enter}
+ className="searchBox-barChild searchBox-input" onPointerDown={this.openSearch} onKeyPress={this.enter} onFocus={this.openSearch}
style={{ width: this._searchbarOpen ? "500px" : "100px" }} />
+ <button className="searchBox-barChild searchBox-filter" title="Advanced Filtering Options" onClick={FilterBox.Instance.openFilter} onPointerDown={FilterBox.Instance.stopProp}><FontAwesomeIcon icon="ellipsis-v" color="white" /></button>
<button className="searchBox-barChild searchBox-submit" onClick={this.submitSearch} onPointerDown={FilterBox.Instance.stopProp}>Submit</button>
- <button className="searchBox-barChild searchBox-filter" onClick={FilterBox.Instance.openFilter} onPointerDown={FilterBox.Instance.stopProp}>Filter</button>
<button className="searchBox-barChild searchBox-close" title={"Close Search Bar"} onPointerDown={MainView.Instance.toggleSearch}><FontAwesomeIcon icon={faTimes} size="lg" /></button>
</div>
+ {(this._numTotalResults > 0 || !this._searchbarOpen) ? (null) :
+ (<div className="searchBox-quickFilter" onPointerDown={this.openSearch}>
+ <div className="filter-panel"><IconBar /></div>
+ </div>)}
<div className="searchBox-results" onScroll={this.resultsScrolled} style={{
display: this._resultsOpen ? "flex" : "none",
height: this.resFull ? "560px" : this.resultHeight, overflow: this.resFull ? "auto" : "visible"
diff --git a/src/server/authentication/models/current_user_utils.ts b/src/server/authentication/models/current_user_utils.ts
index 24bad694d..b2509a4f1 100644
--- a/src/server/authentication/models/current_user_utils.ts
+++ b/src/server/authentication/models/current_user_utils.ts
@@ -46,15 +46,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";
+ }
}
});
@@ -71,15 +75,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";
+ }
}
});
@@ -97,10 +105,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" });
@@ -112,7 +124,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;
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 08:24:13 +0000