From 8dcc7bff9430fe3cca8271501595ff89b36f7005 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Thu, 30 Apr 2020 23:20:13 -0400 Subject: cleaned up presbox and preselementbox --- src/client/views/MainView.tsx | 9 +- src/client/views/nodes/PresBox.scss | 29 +++- src/client/views/nodes/PresBox.tsx | 167 ++++++++++----------- .../views/nodes/formattedText/RichTextMenu.scss | 40 ++--- .../views/presentationview/PresElementBox.scss | 43 +++--- .../views/presentationview/PresElementBox.tsx | 106 ++++++------- 6 files changed, 200 insertions(+), 194 deletions(-) (limited to 'src') diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 72dfdf75c..65e4eb036 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -1,5 +1,5 @@ import { library } from '@fortawesome/fontawesome-svg-core'; -import { faTerminal, faCalculator, faWindowMaximize, faAddressCard, faQuestionCircle, faArrowDown, faArrowUp, faBolt, faBullseye, faCaretUp, faCat, faCheck, faChevronRight, faClipboard, faClone, faCloudUploadAlt, faCommentAlt, faCompressArrowsAlt, faCut, faEllipsisV, faEraser, faExclamation, faFileAlt, faFileAudio, faFilePdf, faFilm, faFilter, faFont, faGlobeAsia, faHighlighter, faLongArrowAltRight, faMicrophone, faMousePointer, faMusic, faObjectGroup, faPause, faPen, faPenNib, faPhone, faPlay, faPortrait, faRedoAlt, faStamp, faStickyNote, faThumbtack, faTree, faTv, faUndoAlt, faVideo } from '@fortawesome/free-solid-svg-icons'; +import { faTerminal, faFile as fileSolid, faLocationArrow, faSearch, faFileDownload, faStop, faCalculator, faWindowMaximize, faAddressCard, faQuestionCircle, faArrowLeft, faArrowRight, faArrowDown, faArrowUp, faBolt, faBullseye, faCaretUp, faCat, faCheck, faChevronRight, faClipboard, faClone, faCloudUploadAlt, faCommentAlt, faCompressArrowsAlt, faCut, faEllipsisV, faEraser, faExclamation, faFileAlt, faFileAudio, faFilePdf, faFilm, faFilter, faFont, faGlobeAsia, faHighlighter, faLongArrowAltRight, faMicrophone, faMousePointer, faMusic, faObjectGroup, faPause, faPen, faPenNib, faPhone, faPlay, faPortrait, faRedoAlt, faStamp, faStickyNote, faThumbtack, faTree, faTv, faUndoAlt, faVideo } 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'; @@ -104,6 +104,11 @@ export class MainView extends React.Component { } library.add(faTerminal); + library.add(faLocationArrow); + library.add(faSearch); + library.add(fileSolid); + library.add(faFileDownload); + library.add(faStop); library.add(faCalculator); library.add(faWindowMaximize); library.add(faFileAlt); @@ -142,6 +147,8 @@ export class MainView extends React.Component { library.add(faCaretUp); library.add(faFilter); library.add(faBullseye); + library.add(faArrowLeft); + library.add(faArrowRight); library.add(faArrowDown); library.add(faArrowUp); library.add(faCloudUploadAlt); diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss index 78c19f351..d48000e16 100644 --- a/src/client/views/nodes/PresBox.scss +++ b/src/client/views/nodes/PresBox.scss @@ -1,10 +1,10 @@ .presBox-cont { position: absolute; + pointer-events: inherit; z-index: 2; box-shadow: #AAAAAA .2vw .2vw .4vw; - bottom: 0; width: 100%; - min-width: 120px; + min-width: 20px; height: 100%; min-height: 41px; letter-spacing: 2px; @@ -17,17 +17,36 @@ width: 100%; } .presBox-buttons { - padding: 10px; width: 100%; background: gray; - padding-right: 10px; padding-top: 5px; padding-bottom: 5px; + display: grid; + grid-column-end: 4; + grid-column-start: 1; + .presBox-viewPicker { + height: 25; + position: relative; + display: inline-block; + grid-column: 1/2; + min-width: 15px; + } + select { + background: #323232; + color: white; + } .presBox-button { margin-right: 2.5%; margin-left: 2.5%; - width: 20%; + height: 25px; border-radius: 5px; + display: flex; + align-items: center; + background: #323232; + color: white; + svg { + margin: auto; + } } .collectionViewBaseChrome-viewPicker { min-width: 50; diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index 80d043db1..f91a809bb 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -1,12 +1,10 @@ import React = require("react"); -import { library } from '@fortawesome/fontawesome-svg-core'; -import { faArrowLeft, faArrowRight, faEdit, faMinus, faPlay, faPlus, faStop, faHandPointLeft, faTimes } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { action, computed, IReactionDisposer, observable, reaction, runInAction } from "mobx"; import { observer } from "mobx-react"; import { Doc, DocListCast, DocCastAsync } from "../../../new_fields/Doc"; import { InkTool } from "../../../new_fields/InkField"; -import { BoolCast, Cast, FieldValue, NumCast, StrCast } from "../../../new_fields/Types"; +import { BoolCast, Cast, NumCast, StrCast } from "../../../new_fields/Types"; import { returnFalse } from "../../../Utils"; import { documentSchema } from "../../../new_fields/documentSchemas"; import { DocumentManager } from "../../util/DocumentManager"; @@ -19,38 +17,30 @@ import "./PresBox.scss"; import { ViewBoxBaseComponent } from "../DocComponent"; import { makeInterface } from "../../../new_fields/Schema"; -library.add(faArrowLeft); -library.add(faArrowRight); -library.add(faPlay); -library.add(faStop); -library.add(faHandPointLeft); -library.add(faPlus); -library.add(faTimes); -library.add(faMinus); -library.add(faEdit); - type PresBoxSchema = makeInterface<[typeof documentSchema]>; const PresBoxDocument = makeInterface(documentSchema); @observer export class PresBox extends ViewBoxBaseComponent(PresBoxDocument) { public static LayoutString(fieldKey: string) { return FieldView.LayoutString(PresBox, fieldKey); } - _childReaction: IReactionDisposer | undefined; + private _childReaction: IReactionDisposer | undefined; @observable _isChildActive = false; + @computed get childDocs() { return DocListCast(this.dataDoc[this.fieldKey]); } + @computed get currentIndex() { return NumCast(this.rootDoc._itemIndex); } + componentDidMount() { - this.layoutDoc._forceRenderEngine = "timeline"; - this.layoutDoc._replacedChrome = "replaced"; + this.rootDoc._forceRenderEngine = "timeline"; + this.rootDoc._replacedChrome = "replaced"; this._childReaction = reaction(() => this.childDocs.slice(), (children) => children.forEach((child, i) => child.presentationIndex = i), { fireImmediately: true }); } componentWillUnmount() { this._childReaction?.(); } - @computed get childDocs() { return DocListCast(this.dataDoc[this.fieldKey]); } - @computed get currentIndex() { return NumCast(this.layoutDoc._itemIndex); } - - updateCurrentPresentation = action(() => Doc.UserDoc().activePresentation = this.rootDoc); + updateCurrentPresentation = () => Doc.UserDoc().activePresentation = this.rootDoc; + @undoBatch + @action next = () => { this.updateCurrentPresentation(); if (this.childDocs[this.currentIndex + 1] !== undefined) { @@ -66,6 +56,9 @@ export class PresBox extends ViewBoxBaseComponent } } } + + @undoBatch + @action back = () => { this.updateCurrentPresentation(); const docAtCurrent = this.childDocs[this.currentIndex]; @@ -83,10 +76,6 @@ export class PresBox extends ViewBoxBaseComponent } } - whenActiveChanged = action((isActive: boolean) => this.props.whenActiveChanged(this._isChildActive = isActive)); - active = (outsideReaction?: boolean) => ((InkingControl.Instance.selectedTool === InkTool.None && !this.layoutDoc.isBackground) && - (this.layoutDoc.forceActive || this.props.isSelected(outsideReaction) || this._isChildActive || this.props.renderDepth === 0) ? true : false) - /** * This is the method that checks for the actions that need to be performed * after the document has been presented, which involves 3 button options: @@ -95,15 +84,16 @@ export class PresBox extends ViewBoxBaseComponent showAfterPresented = (index: number) => { this.updateCurrentPresentation(); this.childDocs.forEach((doc, ind) => { + const presTargetDoc = doc.presentationTargetDoc as Doc; //the order of cases is aligned based on priority - if (doc.hideTillShownButton && ind <= index) { - (doc.presentationTargetDoc as Doc).opacity = 1; + if (doc.presHideTillShownButton && ind <= index) { + presTargetDoc.opacity = 1; } - if (doc.hideAfterButton && ind < index) { - (doc.presentationTargetDoc as Doc).opacity = 0; + if (doc.presHideAfterButton && ind < index) { + presTargetDoc.opacity = 0; } - if (doc.fadeButton && ind < index) { - (doc.presentationTargetDoc as Doc).opacity = 0.5; + if (doc.presFadeButton && ind < index) { + presTargetDoc.opacity = 0.5; } }); } @@ -117,15 +107,15 @@ export class PresBox extends ViewBoxBaseComponent this.updateCurrentPresentation(); this.childDocs.forEach((key, ind) => { //the order of cases is aligned based on priority - + const presTargetDoc = key.presentationTargetDoc as Doc; if (key.hideAfterButton && ind >= index) { - (key.presentationTargetDoc as Doc).opacity = 1; + presTargetDoc.opacity = 1; } if (key.fadeButton && ind >= index) { - (key.presentationTargetDoc as Doc).opacity = 1; + presTargetDoc.opacity = 1; } if (key.hideTillShownButton && ind > index) { - (key.presentationTargetDoc as Doc).opacity = 0; + presTargetDoc.opacity = 0; } }); } @@ -151,11 +141,11 @@ export class PresBox extends ViewBoxBaseComponent } currentDocGroups.forEach((doc: Doc, index: number) => { - if (doc.navButton) { + if (doc.presNavButton) { docToJump = doc; willZoom = false; } - if (doc.zoomButton) { + if (doc.presZoomButton) { docToJump = doc; willZoom = true; } @@ -167,9 +157,9 @@ export class PresBox extends ViewBoxBaseComponent if (docToJump === curDoc) { //checking if curDoc has navigation open const target = await DocCastAsync(curDoc.presentationTargetDoc); - if (curDoc.navButton && target) { + if (curDoc.presNavButton && target) { DocumentManager.Instance.jumpToDocument(target, false, undefined, srcContext); - } else if (curDoc.zoomButton && target) { + } else if (curDoc.presZoomButton && target) { //awaiting jump so that new scale can be found, since jumping is async await DocumentManager.Instance.jumpToDocument(target, true, undefined, srcContext); } @@ -181,18 +171,13 @@ export class PresBox extends ViewBoxBaseComponent } - @undoBatch - public removeDocument = (doc: Doc) => { - return Doc.RemoveDocFromList(this.dataDoc, this.fieldKey, doc); - } - //The function that is called when a document is clicked or reached through next or back. //it'll also execute the necessary actions if presentation is playing. public gotoDocument = (index: number, fromDoc: number) => { this.updateCurrentPresentation(); Doc.UnBrushAllDocs(); if (index >= 0 && index < this.childDocs.length) { - this.layoutDoc._itemIndex = index; + this.rootDoc._itemIndex = index; if (!this.layoutDoc.presStatus) { this.layoutDoc.presStatus = true; @@ -217,19 +202,12 @@ export class PresBox extends ViewBoxBaseComponent } } - addDocument = (doc: Doc) => { - const newPinDoc = Doc.MakeAlias(doc); - newPinDoc.presentationTargetDoc = doc; - return Doc.AddDocToList(this.dataDoc, this.fieldKey, newPinDoc); - } - - //The function that resets the presentation by removing every action done by it. It also //stops the presentaton. resetPresentation = () => { this.updateCurrentPresentation(); this.childDocs.forEach(doc => (doc.presentationTargetDoc as Doc).opacity = 1); - this.layoutDoc._itemIndex = 0; + this.rootDoc._itemIndex = 0; this.layoutDoc.presStatus = false; } @@ -238,84 +216,99 @@ export class PresBox extends ViewBoxBaseComponent startPresentation = (startIndex: number) => { this.updateCurrentPresentation(); this.childDocs.map(doc => { - if (doc.hideTillShownButton && this.childDocs.indexOf(doc) > startIndex) { - (doc.presentationTargetDoc as Doc).opacity = 0; + const presTargetDoc = doc.presentationTargetDoc as Doc; + if (doc.presHideTillShownButton && this.childDocs.indexOf(doc) > startIndex) { + presTargetDoc.opacity = 0; } - if (doc.hideAfterButton && this.childDocs.indexOf(doc) < startIndex) { - (doc.presentationTargetDoc as Doc).opacity = 0; + if (doc.presHideAfterButton && this.childDocs.indexOf(doc) < startIndex) { + presTargetDoc.opacity = 0; } - if (doc.fadeButton && this.childDocs.indexOf(doc) < startIndex) { - (doc.presentationTargetDoc as Doc).opacity = 0.5; + if (doc.presFadeButton && this.childDocs.indexOf(doc) < startIndex) { + presTargetDoc.opacity = 0.5; } }); } - updateMinimize = undoBatch(action((e: React.ChangeEvent, mode: CollectionViewType) => { + updateMinimize = action((e: React.ChangeEvent, mode: CollectionViewType) => { if (BoolCast(this.layoutDoc.inOverlay) !== (mode === CollectionViewType.Invalid)) { if (this.layoutDoc.inOverlay) { Doc.RemoveDocFromList((Doc.UserDoc().myOverlayDocuments as Doc), undefined, this.rootDoc); CollectionDockingView.AddRightSplit(this.rootDoc); this.layoutDoc.inOverlay = false; } else { - this.layoutDoc.x = this.props.ScreenToLocalTransform().inverse().transformPoint(0, 0)[0];// 500;//e.clientX + 25; - this.layoutDoc.y = this.props.ScreenToLocalTransform().inverse().transformPoint(0, 0)[1];////e.clientY - 25; + const pt = this.props.ScreenToLocalTransform().inverse().transformPoint(0, 0); + this.rootDoc.x = pt[0];// 500;//e.clientX + 25; + this.rootDoc.y = pt[1];////e.clientY - 25; this.props.addDocTab?.(this.rootDoc, "close"); Doc.AddDocToList((Doc.UserDoc().myOverlayDocuments as Doc), undefined, this.rootDoc); } } - })); + }); initializeViewAliases = (docList: Doc[], viewtype: CollectionViewType) => { const hgt = (viewtype === CollectionViewType.Tree) ? 50 : 46; docList.forEach(doc => { doc.presBox = this.rootDoc; // give contained documents a reference to the presentation - doc.collapsedHeight = hgt; // set the collpased height for documents based on the type of view (Tree or Stack) they will be displaye din + doc.presCollapsedHeight = hgt; // set the collpased height for documents based on the type of view (Tree or Stack) they will be displaye din }); } - selectElement = (doc: Doc) => { - this.gotoDocument(this.childDocs.indexOf(doc), NumCast(this.layoutDoc._itemIndex)); + addDocument = (doc: Doc) => { + const newPinDoc = Doc.MakeAlias(doc); + newPinDoc.presentationTargetDoc = doc; + return Doc.AddDocToList(this.dataDoc, this.fieldKey, newPinDoc); } - getTransform = () => { - return this.props.ScreenToLocalTransform().translate(-5, -65);// listBox padding-left and pres-box-cont minHeight - } - panelHeight = () => { - return this.props.PanelHeight() - 20; - } + removeDocument = (doc: Doc) => Doc.RemoveDocFromList(this.dataDoc, this.fieldKey, doc); + + selectElement = (doc: Doc) => this.gotoDocument(this.childDocs.indexOf(doc), NumCast(this.rootDoc._itemIndex)); + + getTransform = () => this.props.ScreenToLocalTransform().translate(-5, -65);// listBox padding-left and pres-box-cont minHeight + + panelHeight = () => this.props.PanelHeight() - 20; + + active = (outsideReaction?: boolean) => ((InkingControl.Instance.selectedTool === InkTool.None && !this.layoutDoc.isBackground) && + (this.layoutDoc.forceActive || this.props.isSelected(outsideReaction) || this._isChildActive || this.props.renderDepth === 0) ? true : false); + + whenActiveChanged = action((isActive: boolean) => this.props.whenActiveChanged(this._isChildActive = isActive)); @undoBatch viewChanged = action((e: React.ChangeEvent) => { //@ts-ignore - this.layoutDoc._viewType = e.target.selectedOptions[0].value; - this.layoutDoc._viewType === CollectionViewType.Stacking && (this.layoutDoc._pivotField = undefined); // pivot field may be set by the user in timeline view (or some other way) -- need to reset it here - this.updateMinimize(e, StrCast(this.layoutDoc._viewType)); + const viewType = e.target.selectedOptions[0].value as CollectionViewType; + viewType === CollectionViewType.Stacking && (this.rootDoc._pivotField = undefined); // pivot field may be set by the user in timeline view (or some other way) -- need to reset it here + this.updateMinimize(e, this.rootDoc._viewType = viewType); }); - childLayoutTemplate = () => this.layoutDoc._viewType === CollectionViewType.Stacking ? Cast(Doc.UserDoc()["template-presentation"], Doc, null) : undefined; + childLayoutTemplate = () => this.rootDoc._viewType === CollectionViewType.Stacking ? Cast(Doc.UserDoc()["template-presentation"], Doc, null) : undefined; render() { - const mode = StrCast(this.layoutDoc._viewType) as CollectionViewType; + const mode = StrCast(this.rootDoc._viewType) as CollectionViewType; this.initializeViewAliases(this.childDocs, mode); - return
-
- e.stopPropagation()} onChange={this.viewChanged} value={mode}> - - - - + + + + - - - +
+
+ +
{mode !== CollectionViewType.Invalid ? ; @@ -48,16 +38,14 @@ export class PresElementBox extends ViewBoxBaseComponent [this.presElementDoc.expandInlineButton, this.presElementDoc.collapsedHeight], - params => this.presLayoutDoc._height = NumCast(params[1]) + (Number(params[0]) ? 100 : 0), { fireImmediately: true }); + this._heightDisposer = reaction(() => [this.rootDoc.presExpandInlineButton, this.rootDoc.presCollapsedHeight], + params => this.layoutDoc._height = NumCast(params[1]) + (Number(params[0]) ? 100 : 0), { fireImmediately: true }); } componentWillUnmount() { this._heightDisposer?.(); @@ -70,8 +58,8 @@ export class PresElementBox extends ViewBoxBaseComponent { e.stopPropagation(); - this.presElementDoc.hideTillShownButton = !this.presElementDoc.hideTillShownButton; - if (!this.presElementDoc.hideTillShownButton) { + this.rootDoc.presHideTillShownButton = !this.rootDoc.presHideTillShownButton; + if (!this.rootDoc.presHideTillShownButton) { if (this.indexInPres >= this.currentIndex && this.targetDoc) { this.targetDoc.opacity = 1; } @@ -90,13 +78,13 @@ export class PresElementBox extends ViewBoxBaseComponent { e.stopPropagation(); - this.presElementDoc.hideAfterButton = !this.presElementDoc.hideAfterButton; - if (!this.presElementDoc.hideAfterButton) { + this.rootDoc.presHideAfterButton = !this.rootDoc.presHideAfterButton; + if (!this.rootDoc.presHideAfterButton) { if (this.indexInPres <= this.currentIndex && this.targetDoc) { this.targetDoc.opacity = 1; } } else { - if (this.presElementDoc.fadeButton) this.presElementDoc.fadeButton = false; + if (this.rootDoc.presFadeButton) this.rootDoc.presFadeButton = false; if (this.presBoxDoc.presStatus && this.indexInPres < this.currentIndex && this.targetDoc) { this.targetDoc.opacity = 0; } @@ -111,13 +99,13 @@ export class PresElementBox extends ViewBoxBaseComponent { e.stopPropagation(); - this.presElementDoc.fadeButton = !this.presElementDoc.fadeButton; - if (!this.presElementDoc.fadeButton) { + this.rootDoc.presFadeButton = !this.rootDoc.presFadeButton; + if (!this.rootDoc.presFadeButton) { if (this.indexInPres <= this.currentIndex && this.targetDoc) { this.targetDoc.opacity = 1; } } else { - this.presElementDoc.hideAfterButton = false; + this.rootDoc.presHideAfterButton = false; if (this.presBoxDoc.presStatus && (this.indexInPres < this.currentIndex) && this.targetDoc) { this.targetDoc.opacity = 0.5; } @@ -130,11 +118,11 @@ export class PresElementBox extends ViewBoxBaseComponent { e.stopPropagation(); - this.presElementDoc.navButton = !this.presElementDoc.navButton; - if (this.presElementDoc.navButton) { - this.presElementDoc.zoomButton = false; + this.rootDoc.presNavButton = !this.rootDoc.presNavButton; + if (this.rootDoc.presNavButton) { + this.rootDoc.presZoomButton = false; if (this.currentIndex === this.indexInPres) { - this.props.focus(this.presElementDoc); + this.props.focus(this.rootDoc); } } } @@ -146,13 +134,11 @@ export class PresElementBox extends ViewBoxBaseComponent { e.stopPropagation(); - this.presElementDoc.zoomButton = !this.presElementDoc.zoomButton; - if (!this.presElementDoc.zoomButton) { - this.presElementDoc.viewScale = 1; - } else { - this.presElementDoc.navButton = false; + this.rootDoc.presZoomButton = !this.rootDoc.presZoomButton; + if (this.rootDoc.presZoomButton) { + this.rootDoc.presNavButton = false; if (this.currentIndex === this.indexInPres) { - this.props.focus(this.presElementDoc); + this.props.focus(this.rootDoc); } } } @@ -161,15 +147,15 @@ export class PresElementBox extends ViewBoxBaseComponent [xCord, yCord]; - embedHeight = () => this.props.PanelHeight() - NumCast(this.presElementDoc.collapsedHeight); + embedHeight = () => Math.min(this.props.PanelWidth() - 20, this.props.PanelHeight() - NumCast(this.rootDoc.presCollapsedHeight)); embedWidth = () => this.props.PanelWidth() - 20; /** * The function that is responsible for rendering the a preview or not for this * presentation element. */ - renderEmbeddedInline = () => { - return !this.presElementDoc.expandInlineButton || !this.targetDoc ? (null) : -
+ @computed get renderEmbeddedInline() { + return !this.rootDoc.presExpandInlineButton || !this.targetDoc ? (null) : +
{ this.props.focus(this.presElementDoc); e.stopPropagation(); }}> + onClick={e => { this.props.focus(this.rootDoc); e.stopPropagation(); }}> {treecontainer ? (null) : <> {`${this.indexInPres + 1}. ${this.targetDoc?.title}`} - +
} - - - - - - - - -
- {this.renderEmbeddedInline()} +
+ + + + + + + +
+ {this.renderEmbeddedInline}
); } -- cgit v1.2.3-70-g09d2