diff options
| -rw-r--r-- | src/client/views/Main.scss | 7 | ||||
| -rw-r--r-- | src/client/views/MainView.tsx | 65 |
2 files changed, 62 insertions, 10 deletions
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 <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} @@ -356,6 +359,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); @@ -411,18 +431,34 @@ export class MainView extends React.Component { getScale={returnOne}> </DocumentView>; } + @computed get mainContent() { let sidebar = CurrentUserUtils.UserDocument.sidebar; if (!(sidebar instanceof Doc)) return (null); return <div className="mainContent" style={{ width: "100%", height: "100%", position: "absolute" }}> - <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 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>; @@ -478,7 +514,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> @@ -569,6 +605,15 @@ export class MainView extends React.Component { return !PresBox.CurrentPresentation || !PresBox.CurrentPresentation.presMode ? (null) : <PresModeMenu next={next} back={back} presStatus={PresBox.CurrentPresentation.presStatus} startOrResetPres={startOrResetPres} closePresMode={closePresMode} > </PresModeMenu>; } + @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); + } + render() { return ( <div id="main-div"> |