diff options
Diffstat (limited to 'src/client/views/MainView.tsx')
| -rw-r--r-- | src/client/views/MainView.tsx | 256 |
1 files changed, 181 insertions, 75 deletions
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index aadfdef21..7c991c42a 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -8,7 +8,7 @@ import { faLongArrowAltRight, faMicrophone, faMousePointer, faMusic, faObjectGroup, faPause, faPen, faPenNib, faPhone, faPlay, faPortrait, faRedoAlt, faStamp, faStickyNote, faTimesCircle, faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faArrowsAlt, faQuoteLeft, faSortAmountDown, faAlignLeft, faAlignCenter, faAlignRight, faHeading, faRulerCombined, faFillDrip, faLink, faUnlink, faBold, faItalic, faChevronLeft, faUnderline, faStrikethrough, faSuperscript, faSubscript, faIndent, faEyeDropper, - faPaintRoller, faBars, faBrush, faShapes, faEllipsisH, faHandPaper + faPaintRoller, faBars, faBrush, faShapes, faEllipsisH, faHandPaper, faDesktop, faTrashRestore, faUsers, faWrench, faCog } from '@fortawesome/free-solid-svg-icons'; import { ANTIMODEMENU_HEIGHT } from './globalCssVariables.scss'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; @@ -66,6 +66,7 @@ import { LinkDescriptionPopup } from './nodes/LinkDescriptionPopup'; import FormatShapePane from "./collections/collectionFreeForm/FormatShapePane"; import HypothesisAuthenticationManager from '../apis/HypothesisAuthenticationManager'; import CollectionMenu from './collections/CollectionMenu'; +import { Tooltip } from '@material-ui/core'; @observer export class MainView extends React.Component { @@ -78,7 +79,7 @@ export class MainView extends React.Component { @observable private _panelWidth: number = 0; @observable private _panelHeight: number = 0; - @observable private _flyoutTranslate: boolean = true; + @observable private _flyoutTranslate: boolean = false; @observable public flyoutWidth: number = 250; private get darkScheme() { return BoolCast(Cast(this.userDoc?.activeWorkspace, Doc, null)?.darkScheme); } @@ -87,6 +88,9 @@ export class MainView extends React.Component { @computed public get mainFreeform(): Opt<Doc> { return (docs => (docs && docs.length > 1) ? docs[1] : undefined)(DocListCast(this.mainContainer!.data)); } @computed public get sidebarButtonsDoc() { return Cast(this.userDoc["tabs-buttons"], Doc) as Doc; } + @observable public sidebarContent: any = this.userDoc?.["tabs-panelContainer"]; + @observable public panelContent: string = "none"; + public isPointerDown = false; componentDidMount() { @@ -150,7 +154,7 @@ export class MainView extends React.Component { faLongArrowAltRight, faMicrophone, faMousePointer, faMusic, faObjectGroup, faPause, faPen, faPenNib, faPhone, faPlay, faPortrait, faRedoAlt, faStamp, faStickyNote, faTrashAlt, faAngleRight, faBell, faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faArrowsAlt, faQuoteLeft, faSortAmountDown, faAlignLeft, faAlignCenter, faAlignRight, faHeading, faRulerCombined, faFillDrip, faLink, faUnlink, faBold, faItalic, faChevronLeft, faUnderline, faStrikethrough, faSuperscript, faSubscript, faIndent, faEyeDropper, - faPaintRoller, faBars, faBrush, faShapes, faEllipsisH, faHandPaper); + faPaintRoller, faBars, faBrush, faShapes, faEllipsisH, faHandPaper, faDesktop, faTrashRestore, faUsers, faWrench, faCog); this.initEventListeners(); this.initAuthenticationRouters(); } @@ -395,107 +399,200 @@ export class MainView extends React.Component { mainContainerXf = () => this.sidebarScreenToLocal().translate(0, -this._buttonBarHeight); @computed get flyout() { - const sidebarContent = this.userDoc?.["tabs-panelContainer"]; - if (!(sidebarContent instanceof Doc)) { + if (!(this.sidebarContent instanceof Doc)) { return (null); } - return <div className="mainView-flyoutContainer" > - <div className="mainView-tabButtons" style={{ height: `${this._buttonBarHeight - 10/*margin-top*/}px`, backgroundColor: StrCast(this.sidebarButtonsDoc.backgroundColor) }}> - <DocumentView - Document={this.sidebarButtonsDoc} - DataDoc={undefined} - LibraryPath={emptyPath} - addDocument={undefined} - rootSelected={returnTrue} - addDocTab={this.addDocTabFunc} - pinToPres={emptyFunction} - removeDocument={undefined} - onClick={undefined} - ScreenToLocalTransform={this.sidebarScreenToLocal} - ContentScaling={returnOne} - NativeHeight={returnZero} - NativeWidth={returnZero} - PanelWidth={this.flyoutWidthFunc} - PanelHeight={this.getPHeight} - renderDepth={0} - focus={emptyFunction} - backgroundColor={this.defaultBackgroundColors} - parentActive={returnTrue} - whenActiveChanged={emptyFunction} - bringToFront={emptyFunction} - docFilters={returnEmptyFilter} - ContainingCollectionView={undefined} - ContainingCollectionDoc={undefined} /> - </div> - <div className="mainView-contentArea" style={{ position: "relative", height: `calc(100% - ${this._buttonBarHeight}px)`, width: "100%", overflow: "visible" }}> - <DocumentView - Document={sidebarContent} - DataDoc={undefined} - LibraryPath={emptyPath} - addDocument={undefined} - addDocTab={this.addDocTabFunc} - pinToPres={emptyFunction} - NativeHeight={returnZero} - NativeWidth={returnZero} - rootSelected={returnTrue} - removeDocument={returnFalse} - onClick={undefined} - ScreenToLocalTransform={this.mainContainerXf} - ContentScaling={returnOne} - PanelWidth={this.flyoutWidthFunc} - PanelHeight={this.getContentsHeight} - renderDepth={0} - focus={emptyFunction} - backgroundColor={this.defaultBackgroundColors} - parentActive={returnTrue} - whenActiveChanged={emptyFunction} - bringToFront={emptyFunction} - docFilters={returnEmptyFilter} - ContainingCollectionView={undefined} - ContainingCollectionDoc={undefined} /> - <div className="buttonContainer" > - <button className="mainView-settings" key="settings" onClick={() => SettingsManager.Instance.open()}> - <FontAwesomeIcon icon="cog" size="lg" /> - </button> - </div> - </div> - {this.docButtons} + return <div className="mainView-contentArea" style={{ position: "relative", height: `100%`, width: "100%", overflow: "visible" }}> + <DocumentView + Document={this.sidebarContent} + DataDoc={undefined} + LibraryPath={emptyPath} + addDocument={undefined} + addDocTab={this.addDocTabFunc} + pinToPres={emptyFunction} + NativeHeight={returnZero} + NativeWidth={returnZero} + rootSelected={returnTrue} + removeDocument={returnFalse} + onClick={undefined} + ScreenToLocalTransform={this.mainContainerXf} + ContentScaling={returnOne} + PanelWidth={this.flyoutWidthFunc} + PanelHeight={this.getContentsHeight} + renderDepth={0} + focus={emptyFunction} + backgroundColor={this.defaultBackgroundColors} + parentActive={returnTrue} + whenActiveChanged={emptyFunction} + bringToFront={emptyFunction} + docFilters={returnEmptyFilter} + ContainingCollectionView={undefined} + ContainingCollectionDoc={undefined} /> + </div>; + {/* <div className="buttonContainer" > + <button className="mainView-settings" key="settings" onClick={() => SettingsManager.Instance.open()}> + <FontAwesomeIcon icon="cog" size="lg" /> + </button> + <button className="mainView-settings" key="groups" onClick={() => GroupManager.Instance.open()}> + <FontAwesomeIcon icon="columns" size="lg" /> + </button> + </div> */} + {/* {this.docButtons} */ } + } + + @computed get menuPanel() { + return <div className="mainView-menuPanel"> + <button className="mainView-menuPanel-button" + onPointerDown={e => this.selectPanel("workspace")} + style={{ + padding: "5px", + background: "black", + boxShadow: "4px 4px 12px black" + }}> + <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="desktop" color="white" size="lg" /> + <div className="mainView-menuPanel-button-label"> Workspace </div> + </button> + + <button className="mainView-menuPanel-button" + onPointerDown={e => this.selectPanel("catalog")} + style={{ + padding: "5px", + background: "black", + boxShadow: "4px 4px 12px black" + }}> + <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="file" color="white" size="lg" /> + <div className="mainView-menuPanel-button-label"> Catalog </div> + </button> + + <button className="mainView-menuPanel-button" + onPointerDown={e => this.selectPanel("deleted")} + style={{ + padding: "5px", + background: "black", + boxShadow: "4px 4px 12px black", + marginBottom: "30px" + }}> + <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="trash-alt" color="white" size="lg" /> + <div className="mainView-menuPanel-button-label"> Recently Closed </div> + </button> + + <button className="mainView-menuPanel-button" + onPointerDown={e => this.selectPanel("upload")} + style={{ + padding: "5px", + background: "black", + boxShadow: "4px 4px 12px black", + }}> + <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="upload" color="white" size="lg" /> + <div className="mainView-menuPanel-button-label"> Import </div> + </button> + + <button className="mainView-menuPanel-button" + onPointerDown={e => this.selectPanel("sharing")} + style={{ + padding: "5px", + background: "black", + boxShadow: "4px 4px 12px black" + }}> + <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="users" color="white" size="lg" /> + <div className="mainView-menuPanel-button-label"> Sharing </div> + </button> + + <button className="mainView-menuPanel-button" + onPointerDown={e => this.selectPanel("tools")} + style={{ + padding: "5px", + background: "black", + boxShadow: "4px 4px 12px black", + marginBottom: "45px" + }}> + <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="wrench" color="white" size="lg" /> + <div className="mainView-menuPanel-button-label"> Tools </div> + </button> + + <button className="mainView-menuPanel-bottomButton" + onPointerDown={e => this.selectPanel("help")} + style={{ + padding: "5px", + background: "dimgrey", + }}> + <FontAwesomeIcon className="mainView-menuPanel-bottomButton-icon" icon="question-circle" color="white" size="lg" /> + <div className="mainView-menuPanel-bottomButton-label"> Help </div> + </button> + + <button className="mainView-menuPanel-bottomButton" + // onPointerDown={e => this.selectPanel("settings")} + onClick={() => SettingsManager.Instance.open()} + style={{ + padding: "5px", + background: "dimgrey", + }}> + <FontAwesomeIcon className="mainView-menuPanel-bottomButton-icon" icon="cog" color="white" size="lg" /> + <div className="mainView-menuPanel-bottomButton-label"> Settings </div> + </button> </div>; } + @action + selectPanel = (str: string) => { + + if (this.panelContent === str) { + this.sidebarContent = null; + this.panelContent = "none"; + MainView.Instance._flyoutTranslate = false; + } else { + MainView.expandFlyout(); + if (str === "tools") { + CurrentUserUtils.toolsBtn; + this.sidebarContent.proto = CurrentUserUtils.toolsStack; + } else if (str === "workspace") { + this.sidebarContent.proto = CurrentUserUtils.workspaceStack; + } else if (str === "catalog") { + this.sidebarContent.proto = CurrentUserUtils.catalogStack; + } else if (str === "deleted") { + this.sidebarContent.proto = CurrentUserUtils.closedStack; + } else if (str === "upload") { + this.sidebarContent.proto = "uploads"; + } else if (str === "sharing") { + this.sidebarContent.proto = "sharing"; + } + } + } + @computed get mainContent() { - const sidebar = this.userDoc?.["tabs-panelContainer"]; const n = (RichTextMenu.Instance?.Pinned ? 1 : 0) + (CollectionMenu.Instance?.Pinned ? 1 : 0); const height = `calc(100% - ${n * Number(ANTIMODEMENU_HEIGHT.replace("px", ""))}px)`; - return !this.userDoc || !(sidebar instanceof Doc) ? (null) : ( + return !this.userDoc || !(this.sidebarContent instanceof Doc) ? (null) : ( <div className="mainView-mainContent" style={{ color: this.darkScheme ? "rgb(205,205,205)" : "black", //change to times 2 for both pinned height, width: (FormatShapePane.Instance?.Pinned) ? `calc(100% - 200px)` : "100%" }} > + {this.menuPanel} <div style={{ display: "contents", flexDirection: "row", position: "relative" }}> <div className="mainView-flyoutContainer" onPointerLeave={this.pointerLeaveDragger} style={{ width: this.flyoutWidth }}> - <div className="mainView-libraryHandle" onPointerDown={this.onPointerDown} - style={{ backgroundColor: this.defaultBackgroundColors(sidebar) }}> + {MainView.Instance._flyoutTranslate ? <div className="mainView-libraryHandle" + onPointerDown={this.onPointerDown} + style={{ backgroundColor: this.defaultBackgroundColors(this.sidebarContent) }}> <span title="library View Dragger" style={{ width: (this.flyoutWidth !== 0 && this._flyoutTranslate) ? "100%" : "3vw", //height: (this.flyoutWidth !== 0 && this._flyoutTranslate) ? "100%" : "100vh", position: (this.flyoutWidth !== 0 && this._flyoutTranslate) ? "absolute" : "fixed", top: (this.flyoutWidth !== 0 && this._flyoutTranslate) ? "" : "0" }} /> - </div> + </div> : null} <div className="mainView-libraryFlyout" style={{ //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" + boxShadow: this._flyoutTranslate ? "" : "rgb(156, 147, 150) 0.2vw 0.2vw 0.2vw" }}> {this.flyout} - {this.expandButton} + {MainView.Instance._flyoutTranslate ? this.expandButton : null} </div> </div> - {this.dockingContent} + {/* {this.dockingContent} */} </div> </div>); } @@ -507,7 +604,7 @@ export class MainView extends React.Component { }); @computed get expandButton() { - return !this._flyoutTranslate ? (<div className="mainView-expandFlyoutButton" title="Re-attach sidebar" onPointerDown={MainView.expandFlyout}><FontAwesomeIcon icon="chevron-right" color="grey" size="lg" /></div>) : (null); + return !this._flyoutTranslate ? (<div className="mainView-expandFlyoutButton" title="Re-attach sidebar" onPointerDown={MainView.expandFlyout}><FontAwesomeIcon icon="chevron-right" color="black" size="lg" /></div>) : (null); } addButtonDoc = (doc: Doc | Doc[]) => (doc instanceof Doc ? [doc] : doc).reduce((flg: boolean, doc) => flg && Doc.AddDocToList(Doc.UserDoc().dockedBtns as Doc, "data", doc), true); @@ -601,8 +698,16 @@ export class MainView extends React.Component { </svg>; } + @computed get search() { + return <div className="mainView-searchPanel"> + <div style={{ float: "left", marginLeft: "10px" }}>{Doc.CurrentUserEmail}</div> + <div>SEARCH GOES HERE</div> + </div>; + } + render() { return (<div className={"mainView-container" + (this.darkScheme ? "-dark" : "")} ref={this._mainViewRef}> + {this.inkResources} <DictationOverlay /> <SharingManager /> @@ -611,6 +716,7 @@ export class MainView extends React.Component { <GoogleAuthenticationManager /> <HypothesisAuthenticationManager /> <DocumentDecorations /> + {/* {this.search} */} <CollectionMenu /> <FormatShapePane /> <RichTextMenu key="rich" /> |