From 66bcfb6364ca5d8b4a0fd26139966ea9d6c12f87 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Wed, 22 Jul 2020 18:07:45 -0500 Subject: adding buttons --- src/client/views/PropertiesButtons.tsx | 296 +++++++++++++++++++++++++++++++++ 1 file changed, 296 insertions(+) create mode 100644 src/client/views/PropertiesButtons.tsx (limited to 'src/client/views/PropertiesButtons.tsx') diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx new file mode 100644 index 000000000..842d0320f --- /dev/null +++ b/src/client/views/PropertiesButtons.tsx @@ -0,0 +1,296 @@ +import { IconProp, library } from '@fortawesome/fontawesome-svg-core'; +import { faArrowAltCircleDown, faArrowAltCircleRight, faArrowAltCircleUp, faCheckCircle, faCloudUploadAlt, faLink, faPhotoVideo, faShare, faStopCircle, faSyncAlt, faTag, faTimes } from '@fortawesome/free-solid-svg-icons'; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { action, computed, observable, runInAction } from "mobx"; +import { observer } from "mobx-react"; +import { Doc, DocListCast } from "../../fields/Doc"; +import { RichTextField } from '../../fields/RichTextField'; +import { Cast, NumCast } from "../../fields/Types"; +import { emptyFunction, setupMoveUpEvents } from "../../Utils"; +import GoogleAuthenticationManager from '../apis/GoogleAuthenticationManager'; +import { Pulls, Pushes } from '../apis/google_docs/GoogleApiClientUtils'; +import { Docs, DocUtils } from '../documents/Documents'; +import { DragManager } from '../util/DragManager'; +import { CollectionDockingView, DockedFrameRenderer } from './collections/CollectionDockingView'; +import { ParentDocSelector } from './collections/ParentDocumentSelector'; +import './collections/ParentDocumentSelector.scss'; +import './PropertiesButtons.scss'; +import { MetadataEntryMenu } from './MetadataEntryMenu'; +import { DocumentView } from './nodes/DocumentView'; +import { GoogleRef } from "./nodes/formattedText/FormattedTextBox"; +import { TemplateMenu } from "./TemplateMenu"; +import { Template, Templates } from "./Templates"; +import React = require("react"); +import { Tooltip } from '@material-ui/core'; +const higflyout = require("@hig/flyout"); +export const { anchorPoints } = higflyout; +export const Flyout = higflyout.default; + +library.add(faLink); +library.add(faTag); +library.add(faTimes); +library.add(faArrowAltCircleDown); +library.add(faArrowAltCircleUp); +library.add(faArrowAltCircleRight); +library.add(faStopCircle); +library.add(faCheckCircle); +library.add(faCloudUploadAlt); +library.add(faSyncAlt); +library.add(faShare); +library.add(faPhotoVideo); + +const cloud: IconProp = "cloud-upload-alt"; +const fetch: IconProp = "sync-alt"; + +enum UtilityButtonState { + Default, + OpenRight, + OpenExternally +} + +@observer +export class PropertiesButtons extends React.Component<{ doc: Doc }, {}> { + private _dragRef = React.createRef(); + private _pullAnimating = false; + private _pushAnimating = false; + private _pullColorAnimating = false; + + @observable private pushIcon: IconProp = "arrow-alt-circle-up"; + @observable private pullIcon: IconProp = "arrow-alt-circle-down"; + @observable private pullColor: string = "white"; + @observable public isAnimatingFetch = false; + @observable public isAnimatingPulse = false; + + @observable private openHover: UtilityButtonState = UtilityButtonState.Default; + + @observable public static Instance: PropertiesButtons; + public static hasPushedHack = false; + public static hasPulledHack = false; + + public startPullOutcome = action((success: boolean) => { + if (!this._pullAnimating) { + this._pullAnimating = true; + this.pullIcon = success ? "check-circle" : "stop-circle"; + setTimeout(() => runInAction(() => { + this.pullIcon = "arrow-alt-circle-down"; + this._pullAnimating = false; + }), 1000); + } + }); + + public startPushOutcome = action((success: boolean) => { + this.isAnimatingPulse = false; + if (!this._pushAnimating) { + this._pushAnimating = true; + this.pushIcon = success ? "check-circle" : "stop-circle"; + setTimeout(() => runInAction(() => { + this.pushIcon = "arrow-alt-circle-up"; + this._pushAnimating = false; + }), 1000); + } + }); + + public setPullState = action((unchanged: boolean) => { + this.isAnimatingFetch = false; + if (!this._pullColorAnimating) { + this._pullColorAnimating = true; + this.pullColor = unchanged ? "lawngreen" : "red"; + setTimeout(this.clearPullColor, 1000); + } + }); + + private clearPullColor = action(() => { + this.pullColor = "white"; + this._pullColorAnimating = false; + }); + + //get view0() { return this.props.views()?.[0]; } + + @computed + get considerGoogleDocsPush() { + const targetDoc = this.props.doc; + const published = targetDoc && Doc.GetProto(targetDoc)[GoogleRef] !== undefined; + const animation = this.isAnimatingPulse ? "shadow-pulse 1s linear infinite" : "none"; + return !targetDoc ? (null) :
{`${published ? "Push" : "Publish"} to Google Docs`}
}> +
{ + await GoogleAuthenticationManager.Instance.fetchOrGenerateAccessToken(); + !published && runInAction(() => this.isAnimatingPulse = true); + PropertiesButtons.hasPushedHack = false; + targetDoc[Pushes] = NumCast(targetDoc[Pushes]) + 1; + }}> + +
; + } + + @computed + get considerGoogleDocsPull() { + const targetDoc = this.props.doc; + const dataDoc = targetDoc && Doc.GetProto(targetDoc); + const animation = this.isAnimatingFetch ? "spin 0.5s linear infinite" : "none"; + + const title = (() => { + switch (this.openHover) { + default: + case UtilityButtonState.Default: return `${!dataDoc?.unchanged ? "Pull from" : "Fetch"} Google Docs`; + case UtilityButtonState.OpenRight: return "Open in Right Split"; + case UtilityButtonState.OpenExternally: return "Open in new Browser Tab"; + } + })(); + + return !targetDoc || !dataDoc || !dataDoc[GoogleRef] ? (null) :
{title}
}> +
{ + if (e.altKey) { + this.openHover = UtilityButtonState.OpenExternally; + } else if (e.shiftKey) { + this.openHover = UtilityButtonState.OpenRight; + } + })} + onPointerLeave={action(() => this.openHover = UtilityButtonState.Default)} + onClick={async e => { + const googleDocUrl = `https://docs.google.com/document/d/${dataDoc[GoogleRef]}/edit`; + if (e.shiftKey) { + e.preventDefault(); + let googleDoc = await Cast(dataDoc.googleDoc, Doc); + if (!googleDoc) { + const options = { _width: 600, _nativeWidth: 960, _nativeHeight: 800, isAnnotating: false, UseCors: false }; + googleDoc = Docs.Create.WebDocument(googleDocUrl, options); + dataDoc.googleDoc = googleDoc; + } + CollectionDockingView.AddRightSplit(googleDoc); + } else if (e.altKey) { + e.preventDefault(); + window.open(googleDocUrl); + } else { + this.clearPullColor(); + PropertiesButtons.hasPulledHack = false; + targetDoc[Pulls] = NumCast(targetDoc[Pulls]) + 1; + dataDoc.unchanged && runInAction(() => this.isAnimatingFetch = true); + } + }}> + { + switch (this.openHover) { + default: + case UtilityButtonState.Default: return dataDoc.unchanged === false ? (this.pullIcon as any) : fetch; + case UtilityButtonState.OpenRight: return "arrow-alt-circle-right"; + case UtilityButtonState.OpenExternally: return "share"; + } + })()} + /> +
; + } + @computed + get pinButton() { + const targetDoc = this.props.doc; + const isPinned = targetDoc && Doc.isDocPinned(targetDoc); + return !targetDoc ? (null) :
{Doc.isDocPinned(targetDoc) ? "Unpin from presentation" : "Pin to presentation"}
}> +
DockedFrameRenderer.PinDoc(targetDoc, isPinned)}> + +
; + } + + @computed + get metadataButton() { + //const view0 = this.view0; + return
Show metadata panel
}> +
+ /* tfs: @bcz This might need to be the data document? */}> +
e.stopPropagation()} > + {} +
+ +
; + } + + // @computed + // get contextButton() { + // return { + // where === "onRight" ? CollectionDockingView.AddRightSplit(doc) : + // this.props.doc.props.addDocTab(doc, "onRight"); + // return true; + // }} />; + // } + + @observable _aliasDown = false; + onAliasButtonDown = (e: React.PointerEvent): void => { + //setupMoveUpEvents(this, e, this.onAliasButtonMoved, emptyFunction, emptyFunction); + + } + + // onAliasButtonMoved = () => { + // if (this._dragRef.current) { + // const dragDocView = this.props.doc!; + // if (dragDocView.props){ + // const dragData = new DragManager.DocumentDragData([dragDocView.props.Document]); + // const [left, top] = dragDocView.props.ScreenToLocalTransform().inverse().transformPoint(0, 0); + // dragData.dropAction = "alias"; + // DragManager.StartDocumentDrag([dragDocView.ContentDiv!], dragData, left, top, { + // offsetX: dragData.offset[0], + // offsetY: dragData.offset[1], + // hideSource: false + // }); + // return true; + // } + + // } + // return false; + // } + + // @computed + // get templateButton() { + // //const view0 = this.view0; + // const templates: Map = new Map(); + // //const views = this.props.views(); + // Array.from(Object.values(Templates.TemplateList)).map(template => + // templates.set(template, views.reduce((checked, doc) => checked || doc?.props.Document["_show" + template.Name] ? true : false, false as boolean))); + // return !this.props.doc ? (null) : + //
Tap: Customize layout. Drag: Create alias
}> + //
+ // this._aliasDown = true)} onClose={action(() => this._aliasDown = false)} + // content={!this._aliasDown ? (null) : v).map(v => v as DocumentView)} templates={templates} />}> + //
+ // {} + //
+ // + //
; + // } + + render() { + if (!this.props.doc) return (null); + + const isText = this.props.doc[Doc.LayoutFieldKey(this.props.doc)] instanceof RichTextField; + const considerPull = isText && this.considerGoogleDocsPull; + const considerPush = isText && this.considerGoogleDocsPush; + return
+ {/*
+ {this.templateButton} +
*/} +
+ {this.metadataButton} +
+ {/*
+ {this.contextButton} +
*/} +
+ {this.pinButton} +
+
+ {this.considerGoogleDocsPush} +
+
+ {this.considerGoogleDocsPull} +
+
; + } +} -- cgit v1.2.3-70-g09d2 From 831fbc76ec1c6e9829da547cdef791ac087677d9 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Thu, 23 Jul 2020 11:08:54 -0500 Subject: moved right panel into mainview --- src/client/util/SelectionManager.ts | 24 +++ src/client/views/MainView.scss | 38 ++++ src/client/views/MainView.tsx | 65 ++++++- src/client/views/PropertiesButtons.tsx | 39 +++-- src/client/views/collections/CollectionView.scss | 34 ---- src/client/views/collections/CollectionView.tsx | 49 +----- .../collectionFreeForm/PropertiesView.tsx | 193 +++++++++++++-------- 7 files changed, 262 insertions(+), 180 deletions(-) (limited to 'src/client/views/PropertiesButtons.tsx') diff --git a/src/client/util/SelectionManager.ts b/src/client/util/SelectionManager.ts index 9a968aeda..6fb758eac 100644 --- a/src/client/util/SelectionManager.ts +++ b/src/client/util/SelectionManager.ts @@ -12,9 +12,14 @@ export namespace SelectionManager { @observable IsDragging: boolean = false; SelectedDocuments: ObservableMap = new ObservableMap(); + + @observable public lastSelection: DocumentView | undefined; + @action SelectDoc(docView: DocumentView, ctrlPressed: boolean): void { + this.lastSelection = docView; + // if doc is not in SelectedDocuments, add it if (!manager.SelectedDocuments.get(docView)) { if (!ctrlPressed) { @@ -33,6 +38,15 @@ export namespace SelectionManager { } @action DeselectDoc(docView: DocumentView): void { + + if (this.lastSelection === docView) { + const list = Array.from(manager.SelectedDocuments.keys()); + if (list.length > 0) { + this.lastSelection = list[list.length - 1]; + } else { + this.lastSelection = undefined; + } + } if (manager.SelectedDocuments.get(docView)) { manager.SelectedDocuments.delete(docView); docView.props.whenActiveChanged(false); @@ -41,10 +55,16 @@ export namespace SelectionManager { } @action DeselectAll(): void { + this.lastSelection = undefined; Array.from(manager.SelectedDocuments.keys()).map(dv => dv.props.whenActiveChanged(false)); manager.SelectedDocuments.clear(); Doc.UserDoc().activeSelection = new List([]); } + + @action + getLast(): DocumentView | undefined { + return this.lastSelection; + } } const manager = new Manager(); @@ -56,6 +76,10 @@ export namespace SelectionManager { manager.SelectDoc(docView, ctrlPressed); } + export function LastSelection(): DocumentView | undefined { + return manager.getLast(); + } + // computed functions, such as used in IsSelected generate errors if they're called outside of a // reaction context. Specifying the context with 'outsideReaction' allows an efficiency feature // to avoid unnecessary mobx invalidations when running inside a reaction. diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss index 55280b231..f64129600 100644 --- a/src/client/views/MainView.scss +++ b/src/client/views/MainView.scss @@ -102,6 +102,44 @@ user-select: none; } +.mainView-propertiesDragger { + background-color: rgb(140, 139, 139); + height: 55px; + width: 15.5px; + position: absolute; + top: 55%; + border: 1px black solid; + border-radius: 0; + border-top-left-radius: 10px; + border-bottom-left-radius: 10px; + border-right: unset; + z-index: 2; + + .mainView-propertiesDragger-icon { + width: 10px; + height: 10px; + float: left; + margin-left: 3px; + padding-top: 19px; + } + + &:hover { + cursor: pointer; + } +} + +.mainiView-propertiesView { + display: flex; + flex-direction: column; + width: 200px; + height: 100%; + position: absolute; + right: 0; + top: 0; + border-left: solid 1px; + z-index: 10; +} + .mainView-flyoutContainer { display: flex; flex-direction: column; diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 766626a82..88f072493 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -21,10 +21,10 @@ import { Doc, DocListCast, Field, Opt } from '../../fields/Doc'; import { Id } from '../../fields/FieldSymbols'; import { List } from '../../fields/List'; import { listSpec } from '../../fields/Schema'; -import { BoolCast, Cast, FieldValue, StrCast } from '../../fields/Types'; +import { BoolCast, Cast, FieldValue, StrCast, NumCast } from '../../fields/Types'; import { TraceMobx } from '../../fields/util'; import { CurrentUserUtils } from '../util/CurrentUserUtils'; -import { emptyFunction, emptyPath, returnFalse, returnOne, returnZero, returnTrue, Utils, returnEmptyFilter } from '../../Utils'; +import { emptyFunction, emptyPath, returnFalse, returnOne, returnZero, returnTrue, Utils, returnEmptyFilter, setupMoveUpEvents } from '../../Utils'; import GoogleAuthenticationManager from '../apis/GoogleAuthenticationManager'; import { DocServer } from '../DocServer'; import { Docs, DocumentOptions } from '../documents/Documents'; @@ -66,7 +66,9 @@ 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'; +import { Tooltip, AccordionActions } from '@material-ui/core'; +import { PropertiesView } from './collections/collectionFreeForm/PropertiesView'; +import { SelectionManager } from '../util/SelectionManager'; @observer export class MainView extends React.Component { @@ -90,9 +92,24 @@ export class MainView extends React.Component { @observable public sidebarContent: any = this.userDoc?.["tabs-panelContainer"]; @observable public panelContent: string = "none"; + @observable public showProperties: boolean = false; + @computed get selectedDocumentView() { return SelectionManager.LastSelection(); } + @observable selectedDoc: Doc | undefined = this.selectedDocumentView?.props.Document; + @observable selectedDataDoc: Doc | undefined = this.selectedDocumentView?.props.DataDoc ? this.selectedDocumentView.props.DataDoc : this.selectedDoc; public isPointerDown = false; + @observable _propertiesWidth: number = 0; + propertiesWidth = () => Math.max(0, Math.min(this._panelWidth - 50, this._propertiesWidth)); + + @computed get propertiesIcon() { + if (this.propertiesWidth() < 10) { + return "chevron-left"; + } else { + return "chevron-right"; + } + } + componentDidMount() { DocServer.setPlaygroundFields(["dataTransition", "_viewTransition", "_panX", "_panY", "_viewScale", "_viewType", "_chromeStatus"]); // can play with these fields on someone else's @@ -216,7 +233,7 @@ export class MainView extends React.Component { const freeformOptions: DocumentOptions = { x: 0, y: 400, - _width: this._panelWidth * .7, + _width: this._panelWidth * .7 - this._propertiesWidth, _height: this._panelHeight, title: "Collection " + workspaceCount, }; @@ -282,10 +299,13 @@ export class MainView extends React.Component { @action onResize = (r: any) => { - this._panelWidth = r.offset.width; + this._panelWidth = r.offset.width - this._propertiesWidth; this._panelHeight = r.offset.height; } - getPWidth = () => this._panelWidth; + + @action + getPWidth = () => this._panelWidth - this._propertiesWidth; + getPHeight = () => this._panelHeight; getContentsHeight = () => this._panelHeight - this._buttonBarHeight; @@ -329,7 +349,6 @@ export class MainView extends React.Component { NativeWidth={returnZero} PanelWidth={this.getPWidth} PanelHeight={this.getPHeight} - renderDepth={0} focus={emptyFunction} parentActive={returnTrue} whenActiveChanged={emptyFunction} @@ -570,6 +589,30 @@ export class MainView extends React.Component { } } + @action + onDown = (e: React.PointerEvent) => { + setupMoveUpEvents(this, e, action((e: PointerEvent, down: number[], delta: number[]) => { + this._propertiesWidth = this._panelWidth - Math.max(Transform.Identity().transformPoint(e.clientX, 0)[0], 0); + return false; + }), returnFalse, action(() => this._propertiesWidth = this.propertiesWidth() < 15 ? Math.min(this._panelWidth - 50, 200) : 0), false); + } + + @computed get propertiesView() { + TraceMobx(); + return this._propertiesWidth === 0 ? (null) : +
+ +
; + } + @computed get mainContent() { const n = (RichTextMenu.Instance?.Pinned ? 1 : 0) + (CollectionMenu.Instance?.Pinned ? 1 : 0); const height = `calc(100% - ${n * Number(ANTIMODEMENU_HEIGHT.replace("px", ""))}px)`; @@ -606,6 +649,14 @@ export class MainView extends React.Component { {this.dockingContent} + {this.showProperties ? (null) : +
+
+
+
+ } + {this.propertiesWidth() < 10 ? (null) : this.propertiesView} ); } diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx index 842d0320f..1b06a41fa 100644 --- a/src/client/views/PropertiesButtons.tsx +++ b/src/client/views/PropertiesButtons.tsx @@ -22,6 +22,7 @@ import { TemplateMenu } from "./TemplateMenu"; import { Template, Templates } from "./Templates"; import React = require("react"); import { Tooltip } from '@material-ui/core'; +import { SelectionManager } from '../util/SelectionManager'; const higflyout = require("@hig/flyout"); export const { anchorPoints } = higflyout; export const Flyout = higflyout.default; @@ -49,7 +50,7 @@ enum UtilityButtonState { } @observer -export class PropertiesButtons extends React.Component<{ doc: Doc }, {}> { +export class PropertiesButtons extends React.Component<{}, {}> { private _dragRef = React.createRef(); private _pullAnimating = false; private _pushAnimating = false; @@ -67,6 +68,9 @@ export class PropertiesButtons extends React.Component<{ doc: Doc }, {}> { public static hasPushedHack = false; public static hasPulledHack = false; + @observable selectedDocumentView: DocumentView | undefined = SelectionManager.LastSelection(); + @observable selectedDoc: Doc | undefined = this.selectedDocumentView?.props.Document; + public startPullOutcome = action((success: boolean) => { if (!this._pullAnimating) { this._pullAnimating = true; @@ -108,7 +112,7 @@ export class PropertiesButtons extends React.Component<{ doc: Doc }, {}> { @computed get considerGoogleDocsPush() { - const targetDoc = this.props.doc; + const targetDoc = this.selectedDoc; const published = targetDoc && Doc.GetProto(targetDoc)[GoogleRef] !== undefined; const animation = this.isAnimatingPulse ? "shadow-pulse 1s linear infinite" : "none"; return !targetDoc ? (null) :
{`${published ? "Push" : "Publish"} to Google Docs`}
}> @@ -127,7 +131,7 @@ export class PropertiesButtons extends React.Component<{ doc: Doc }, {}> { @computed get considerGoogleDocsPull() { - const targetDoc = this.props.doc; + const targetDoc = this.selectedDoc; const dataDoc = targetDoc && Doc.GetProto(targetDoc); const animation = this.isAnimatingFetch ? "spin 0.5s linear infinite" : "none"; @@ -188,7 +192,7 @@ export class PropertiesButtons extends React.Component<{ doc: Doc }, {}> { } @computed get pinButton() { - const targetDoc = this.props.doc; + const targetDoc = this.selectedDoc; const isPinned = targetDoc && Doc.isDocPinned(targetDoc); return !targetDoc ? (null) :
{Doc.isDocPinned(targetDoc) ? "Unpin from presentation" : "Pin to presentation"}
}>
{ @computed get metadataButton() { //const view0 = this.view0; - return
Show metadata panel
}> -
- /* tfs: @bcz This might need to be the data document? */}> -
e.stopPropagation()} > - {} -
- -
; + if (this.selectedDoc) { + return
Show metadata panel
}> +
+ /* tfs: @bcz This might need to be the data document? */}> +
e.stopPropagation()} > + {} +
+ +
; + } else { + return null; + } + } // @computed @@ -267,9 +276,9 @@ export class PropertiesButtons extends React.Component<{ doc: Doc }, {}> { // } render() { - if (!this.props.doc) return (null); + if (!this.selectedDoc) return (null); - const isText = this.props.doc[Doc.LayoutFieldKey(this.props.doc)] instanceof RichTextField; + const isText = this.selectedDoc[Doc.LayoutFieldKey(this.selectedDoc)] instanceof RichTextField; const considerPull = isText && this.considerGoogleDocsPull; const considerPush = isText && this.considerGoogleDocsPush; return
diff --git a/src/client/views/collections/CollectionView.scss b/src/client/views/collections/CollectionView.scss index 585f6865e..a5aef86de 100644 --- a/src/client/views/collections/CollectionView.scss +++ b/src/client/views/collections/CollectionView.scss @@ -25,40 +25,6 @@ z-index: 2; } - .collectionView-propertiesDragger { - background-color: rgb(140, 139, 139); - height: 55px; - width: 15.5px; - position: absolute; - top: 55%; - border: 1px black solid; - border-radius: 0; - border-top-left-radius: 10px; - border-bottom-left-radius: 10px; - border-right: unset; - z-index: 2; - - .collectionView-propertiesDragger-icon { - width: 10px; - height: 10px; - float: left; - margin-left: 3px; - padding-top: 19px; - } - } - - .collectionView-propertiesView { - display: flex; - flex-direction: column; - width: 200px; - height: 100%; - position: absolute; - right: 0; - top: 0; - border-left: solid 1px; - z-index: 10; - } - .collectionTimeView-treeView { display: flex; flex-direction: column; diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 853321d3c..19a82a113 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -49,7 +49,6 @@ import { CollectionTreeView } from "./CollectionTreeView"; import './CollectionView.scss'; import CollectionMenu from './CollectionMenu'; import { SharingPermissions } from '../../util/SharingManager'; -import { PropertiesView } from './collectionFreeForm/PropertiesView'; import { DocumentView } from '../nodes/DocumentView'; const higflyout = require("@hig/flyout"); export const { anchorPoints } = higflyout; @@ -369,22 +368,9 @@ export class CollectionView extends Touchable this.props.PanelWidth() - this.propertiesWidth(); + bodyPanelWidth = () => this.props.PanelWidth(); facetWidth = () => Math.max(0, Math.min(this.props.PanelWidth() - 25, this._facetWidth)); - propertiesWidth = () => Math.max(0, Math.min(this.props.PanelWidth() - 25, this._propertiesWidth)); - - @computed get propertiesIcon() { - if (this.propertiesWidth() < 10) { - return "chevron-left"; - } else { - return "chevron-right"; - } - } - @computed get dataDoc() { return (this.props.DataDoc && this.props.Document.isTemplateForField ? Doc.GetProto(this.props.DataDoc) : this.props.Document.resolvedDataDoc ? this.props.Document : Doc.GetProto(this.props.Document)); // if the layout document has a resolvedDataDoc, then we don't want to get its parent which would be the unexpanded template @@ -505,13 +491,6 @@ export class CollectionView extends Touchable this._facetWidth = this.facetWidth() < 15 ? Math.min(this.props.PanelWidth() - 25, 200) : 0), false); } - onDown = (e: React.PointerEvent) => { - setupMoveUpEvents(this, e, action((e: PointerEvent, down: number[], delta: number[]) => { - this._propertiesWidth = this.props.PanelWidth() - Math.max(this.props.ScreenToLocalTransform().transformPoint(e.clientX, 0)[0], 0); - return false; - }), returnFalse, action(() => this._propertiesWidth = this.propertiesWidth() < 15 ? Math.min(this.props.PanelWidth() - 25, 200) : 0), false); - } - filterBackground = () => "rgba(105, 105, 105, 0.432)"; get ignoreFields() { return ["_docFilters", "_docRangeFilters"]; } // this makes the tree view collection ignore these filters (otherwise, the filters would filter themselves) @computed get scriptField() { @@ -582,23 +561,6 @@ export class CollectionView extends Touchable; } - @computed get propertiesView() { - TraceMobx(); - return !this._propertiesWidth || this.props.dontRegisterView ? (null) : -
- -
; - } - childLayoutTemplate = () => this.props.childLayoutTemplate?.() || Cast(this.props.Document.childLayoutTemplate, Doc, null); childLayoutString = this.props.childLayoutString || StrCast(this.props.Document.childLayoutString); @@ -634,15 +596,6 @@ export class CollectionView extends Touchable } {this.facetWidth() < 10 ? (null) : this.filterView} */} - - {this.props.hideFilter || this.props.Document.hideFilterView || !this.props.isSelected() && !this.props.Document.forceActive ? (null) : -
-
-
-
- } - {this.propertiesWidth() < 10 ? (null) : this.propertiesView}
); } } diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx index 5242aa8fd..5aa0066d2 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx @@ -14,121 +14,162 @@ import { returnFalse, returnOne, emptyFunction, emptyPath, returnTrue, returnZer import { Id } from "../../../../fields/FieldSymbols"; import { Transform } from "../../../util/Transform"; import { PropertiesButtons } from "../../PropertiesButtons"; +import { SelectionManager } from "../../../util/SelectionManager"; interface PropertiesViewProps { - dataDoc: Doc; - Document: Doc; width: number; height: number; renderDepth: number; ScreenToLocalTransform: () => Transform; - docView: DocumentView; } @observer export class PropertiesView extends React.Component { @computed get MAX_EMBED_HEIGHT() { return 200; } + @observable numSelected: number = SelectionManager.SelectedDocuments().length; + @computed get selectedDocumentView() { return SelectionManager.LastSelection(); } + @observable selectedDoc: Doc | undefined = this.selectedDocumentView?.props.Document; + @observable dataDoc: Doc | undefined = this.selectedDocumentView?.props.DataDoc ? this.selectedDocumentView.props.DataDoc : this.selectedDoc; - rtfWidth = () => Math.min(this.props.Document?.[WidthSym](), this.props.width - 20); - rtfHeight = () => this.rtfWidth() <= this.props.Document?.[WidthSym]() ? Math.min(this.props.Document?.[HeightSym](), this.MAX_EMBED_HEIGHT) : this.MAX_EMBED_HEIGHT; + @action + rtfWidth = () => { + if (this.selectedDoc) { + return Math.min(this.selectedDoc?.[WidthSym](), this.props.width - 20); + } else { + return 0; + } + } + @action + rtfHeight = () => { + if (this.selectedDoc) { + return this.rtfWidth() <= this.selectedDoc?.[WidthSym]() ? Math.min(this.selectedDoc?.[HeightSym](), this.MAX_EMBED_HEIGHT) : this.MAX_EMBED_HEIGHT; + } else { + return 0; + } + } + @action docWidth = () => { - const layoutDoc = this.props.Document; - const aspect = NumCast(layoutDoc._nativeHeight, layoutDoc._fitWidth ? 0 : layoutDoc[HeightSym]()) / NumCast(layoutDoc._nativeWidth, layoutDoc._fitWidth ? 1 : layoutDoc[WidthSym]()); - if (aspect) return Math.min(layoutDoc[WidthSym](), Math.min(this.MAX_EMBED_HEIGHT / aspect, this.props.width - 20)); - return NumCast(layoutDoc._nativeWidth) ? Math.min(layoutDoc[WidthSym](), this.props.width - 20) : this.props.width - 20; + if (this.selectedDoc) { + const layoutDoc = this.selectedDoc; + const aspect = NumCast(layoutDoc._nativeHeight, layoutDoc._fitWidth ? 0 : layoutDoc[HeightSym]()) / NumCast(layoutDoc._nativeWidth, layoutDoc._fitWidth ? 1 : layoutDoc[WidthSym]()); + if (aspect) return Math.min(layoutDoc[WidthSym](), Math.min(this.MAX_EMBED_HEIGHT / aspect, this.props.width - 20)); + return NumCast(layoutDoc._nativeWidth) ? Math.min(layoutDoc[WidthSym](), this.props.width - 20) : this.props.width - 20; + } else { + return 0; + } } + + @action docHeight = () => { - const layoutDoc = this.props.Document; - return Math.max(70, Math.min(this.MAX_EMBED_HEIGHT, (() => { - const aspect = NumCast(layoutDoc._nativeHeight, layoutDoc._fitWidth ? 0 : layoutDoc[HeightSym]()) / NumCast(layoutDoc._nativeWidth, layoutDoc._fitWidth ? 1 : layoutDoc[WidthSym]()); - if (aspect) return this.docWidth() * aspect; - return layoutDoc._fitWidth ? (!this.props.dataDoc._nativeHeight ? NumCast(this.props.height) : - Math.min(this.docWidth() * NumCast(layoutDoc.scrollHeight, NumCast(layoutDoc._nativeHeight)) / NumCast(layoutDoc._nativeWidth, - NumCast(this.props.height)))) : - NumCast(layoutDoc._height) ? NumCast(layoutDoc._height) : 50; - })())); + if (this.selectedDoc && this.dataDoc) { + const layoutDoc = this.selectedDoc; + return Math.max(70, Math.min(this.MAX_EMBED_HEIGHT, (() => { + const aspect = NumCast(layoutDoc._nativeHeight, layoutDoc._fitWidth ? 0 : layoutDoc[HeightSym]()) / NumCast(layoutDoc._nativeWidth, layoutDoc._fitWidth ? 1 : layoutDoc[WidthSym]()); + if (aspect) return this.docWidth() * aspect; + return layoutDoc._fitWidth ? (!this.dataDoc._nativeHeight ? NumCast(this.props.height) : + Math.min(this.docWidth() * NumCast(layoutDoc.scrollHeight, NumCast(layoutDoc._nativeHeight)) / NumCast(layoutDoc._nativeWidth, + NumCast(this.props.height)))) : + NumCast(layoutDoc._height) ? NumCast(layoutDoc._height) : 50; + })())); + } else { + return 0; + } } @computed get expandedField() { - const ids: { [key: string]: string } = {}; - const doc = this.props.dataDoc; - doc && Object.keys(doc).forEach(key => !(key in ids) && doc[key] !== ComputedField.undefined && (ids[key] = key)); + if (this.dataDoc) { + const ids: { [key: string]: string } = {}; + const doc = this.dataDoc; + doc && Object.keys(doc).forEach(key => !(key in ids) && doc[key] !== ComputedField.undefined && (ids[key] = key)); - const rows: JSX.Element[] = []; - for (const key of Object.keys(ids).slice().sort()) { - const contents = doc[key]; - let contentElement: (JSX.Element | null)[] | JSX.Element = []; - contentElement = Field.toKeyValueString(doc, key)} - SetValue={(value: string) => KeyValueBox.SetField(doc, key, value, true)} - />; + const rows: JSX.Element[] = []; + for (const key of Object.keys(ids).slice().sort()) { + const contents = doc[key]; + let contentElement: (JSX.Element | null)[] | JSX.Element = []; + contentElement = Field.toKeyValueString(doc, key)} + SetValue={(value: string) => KeyValueBox.SetField(doc, key, value, true)} + />; - rows.push(
- {key + ":"} -   - {contentElement} -
); + rows.push(
+ {key + ":"} +   + {contentElement} +
); + } + return rows; } - return rows; } @computed get layoutPreview() { - const layoutDoc = Doc.Layout(this.props.Document); - const panelHeight = StrCast(Doc.LayoutField(layoutDoc)).includes("FormattedTextBox") ? this.rtfHeight : this.docHeight; - const panelWidth = StrCast(Doc.LayoutField(layoutDoc)).includes("FormattedTextBox") ? this.rtfWidth : this.docWidth; - return
- "lightgrey"} - fitToBox={false} - FreezeDimensions={true} - NativeWidth={layoutDoc.type === - StrCast(Doc.LayoutField(layoutDoc)).includes("FormattedTextBox") ? this.rtfWidth : returnZero} - NativeHeight={layoutDoc.type === - StrCast(Doc.LayoutField(layoutDoc)).includes("FormattedTextBox") ? this.rtfHeight : returnZero} - PanelWidth={panelWidth} - PanelHeight={panelHeight} - focus={returnFalse} - ScreenToLocalTransform={this.props.ScreenToLocalTransform} - docFilters={returnEmptyFilter} - ContainingCollectionDoc={undefined} - ContainingCollectionView={undefined} - addDocument={returnFalse} - moveDocument={undefined} - removeDocument={returnFalse} - parentActive={() => false} - whenActiveChanged={emptyFunction} - addDocTab={returnFalse} - pinToPres={emptyFunction} - bringToFront={returnFalse} - ContentScaling={returnOne} - /> -
; + if (this.selectedDoc) { + const layoutDoc = Doc.Layout(this.selectedDoc); + const panelHeight = StrCast(Doc.LayoutField(layoutDoc)).includes("FormattedTextBox") ? this.rtfHeight : this.docHeight; + const panelWidth = StrCast(Doc.LayoutField(layoutDoc)).includes("FormattedTextBox") ? this.rtfWidth : this.docWidth; + return
+ "lightgrey"} + fitToBox={false} + FreezeDimensions={true} + NativeWidth={layoutDoc.type === + StrCast(Doc.LayoutField(layoutDoc)).includes("FormattedTextBox") ? this.rtfWidth : returnZero} + NativeHeight={layoutDoc.type === + StrCast(Doc.LayoutField(layoutDoc)).includes("FormattedTextBox") ? this.rtfHeight : returnZero} + PanelWidth={panelWidth} + PanelHeight={panelHeight} + focus={returnFalse} + ScreenToLocalTransform={this.props.ScreenToLocalTransform} + docFilters={returnEmptyFilter} + ContainingCollectionDoc={undefined} + ContainingCollectionView={undefined} + addDocument={returnFalse} + moveDocument={undefined} + removeDocument={returnFalse} + parentActive={() => false} + whenActiveChanged={emptyFunction} + addDocTab={returnFalse} + pinToPres={emptyFunction} + bringToFront={returnFalse} + ContentScaling={returnOne} + /> +
; + } else { + return null; + } } render() { + + if (!this.selectedDocumentView || !this.selectedDoc || !this.dataDoc) { + return
+
+ No Document Selected +
; + } + return
Properties
- Collection + {this.dataDoc.title}
Settings
- +
-- cgit v1.2.3-70-g09d2 From feb86078832da5f7207bc5775a61d7dd93681e98 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Thu, 23 Jul 2020 14:40:57 -0400 Subject: fixes for gettin new sidebar to work --- src/client/views/MainView.tsx | 6 +----- src/client/views/PropertiesButtons.tsx | 10 ++++++++-- .../views/collections/collectionFreeForm/PropertiesView.tsx | 10 +++++----- 3 files changed, 14 insertions(+), 12 deletions(-) (limited to 'src/client/views/PropertiesButtons.tsx') diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 8113ad698..d3bdeda9e 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -95,10 +95,6 @@ export class MainView extends React.Component { @observable public sidebarContent: any = this.userDoc?.["tabs-panelContainer"]; @observable public panelContent: string = "none"; @observable public showProperties: boolean = false; - - @computed get selectedDocumentView() { return SelectionManager.LastSelection(); } - @observable selectedDoc: Doc | undefined = this.selectedDocumentView?.props.Document; - @observable selectedDataDoc: Doc | undefined = this.selectedDocumentView?.props.DataDoc ? this.selectedDocumentView.props.DataDoc : this.selectedDoc; public isPointerDown = false; @observable _propertiesWidth: number = 0; @@ -359,7 +355,7 @@ export class MainView extends React.Component { docFilters={returnEmptyFilter} ContainingCollectionView={undefined} ContainingCollectionDoc={undefined} - renderDepth={1} + renderDepth={0} />; } @computed get dockingContent() { diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx index 1b06a41fa..b55593b11 100644 --- a/src/client/views/PropertiesButtons.tsx +++ b/src/client/views/PropertiesButtons.tsx @@ -68,8 +68,14 @@ export class PropertiesButtons extends React.Component<{}, {}> { public static hasPushedHack = false; public static hasPulledHack = false; - @observable selectedDocumentView: DocumentView | undefined = SelectionManager.LastSelection(); - @observable selectedDoc: Doc | undefined = this.selectedDocumentView?.props.Document; + + @computed get selectedDocumentView() { + if (SelectionManager.SelectedDocuments().length) { + return SelectionManager.SelectedDocuments()[0]; + } else { return undefined; } + } + @computed get selectedDoc() { return this.selectedDocumentView?.props.Document; } + @computed get dataDoc() { return this.selectedDocumentView?.props.DataDoc; } public startPullOutcome = action((success: boolean) => { if (!this._pullAnimating) { diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx index 11609b1c0..1954a11bf 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx @@ -30,12 +30,12 @@ export class PropertiesView extends React.Component { @computed get MAX_EMBED_HEIGHT() { return 200; } @computed get selectedDocumentView() { - if (SelectionManger.SelectedDocuments().length) { + if (SelectionManager.SelectedDocuments().length) { return SelectionManager.SelectedDocuments()[0]; } else { return undefined; } } - @computed get selectedDoc() { return this.selectedDocumentView?.props.Document; } - @computed get dataDoc() { return this.selectedDocumentView?.props.DataDoc; } + @computed get selectedDoc() { return this.selectedDocumentView?.rootDoc; } + @computed get dataDoc() { return this.selectedDocumentView?.dataDoc; } @action rtfWidth = () => { @@ -156,7 +156,7 @@ export class PropertiesView extends React.Component { render() { - if (!this.selectedDocumentView || !this.selectedDoc || !this.dataDoc) { + if (!this.selectedDoc) { return
No Document Selected @@ -168,7 +168,7 @@ export class PropertiesView extends React.Component { Properties
- {this.dataDoc.title} + {this.selectedDoc.title}
Settings
-- cgit v1.2.3-70-g09d2 From 3c83787b8c55663484bee4b6fb03a6bc86d7fc49 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Fri, 24 Jul 2020 00:08:21 -0500 Subject: added universal settings options --- src/client/views/DocumentButtonBar.tsx | 8 +- src/client/views/PropertiesButtons.tsx | 188 ++++++++++++++++++++++----------- 2 files changed, 132 insertions(+), 64 deletions(-) (limited to 'src/client/views/PropertiesButtons.tsx') diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx index c99034d81..2eabea8ef 100644 --- a/src/client/views/DocumentButtonBar.tsx +++ b/src/client/views/DocumentButtonBar.tsx @@ -281,7 +281,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV {DocumentLinksButton.StartLink ?
: null} -
+ {/*
{this.templateButton}
@@ -289,16 +289,16 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
{this.contextButton} -
+
*/}
{this.pinButton}
-
+ {/*
{this.considerGoogleDocsPush}
{this.considerGoogleDocsPull} -
+
*/}
; } } diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx index b55593b11..52e46147a 100644 --- a/src/client/views/PropertiesButtons.tsx +++ b/src/client/views/PropertiesButtons.tsx @@ -5,7 +5,7 @@ import { action, computed, observable, runInAction } from "mobx"; import { observer } from "mobx-react"; import { Doc, DocListCast } from "../../fields/Doc"; import { RichTextField } from '../../fields/RichTextField'; -import { Cast, NumCast } from "../../fields/Types"; +import { Cast, NumCast, BoolCast } from "../../fields/Types"; import { emptyFunction, setupMoveUpEvents } from "../../Utils"; import GoogleAuthenticationManager from '../apis/GoogleAuthenticationManager'; import { Pulls, Pushes } from '../apis/google_docs/GoogleApiClientUtils'; @@ -74,8 +74,8 @@ export class PropertiesButtons extends React.Component<{}, {}> { return SelectionManager.SelectedDocuments()[0]; } else { return undefined; } } - @computed get selectedDoc() { return this.selectedDocumentView?.props.Document; } - @computed get dataDoc() { return this.selectedDocumentView?.props.DataDoc; } + @computed get selectedDoc() { return this.selectedDocumentView?.rootDoc; } + @computed get dataDoc() { return this.selectedDocumentView?.dataDoc; } public startPullOutcome = action((success: boolean) => { if (!this._pullAnimating) { @@ -114,8 +114,6 @@ export class PropertiesButtons extends React.Component<{}, {}> { this._pullColorAnimating = false; }); - //get view0() { return this.props.views()?.[0]; } - @computed get considerGoogleDocsPush() { const targetDoc = this.selectedDoc; @@ -228,58 +226,116 @@ export class PropertiesButtons extends React.Component<{}, {}> { } - // @computed - // get contextButton() { - // return { - // where === "onRight" ? CollectionDockingView.AddRightSplit(doc) : - // this.props.doc.props.addDocTab(doc, "onRight"); - // return true; - // }} />; - // } - @observable _aliasDown = false; onAliasButtonDown = (e: React.PointerEvent): void => { - //setupMoveUpEvents(this, e, this.onAliasButtonMoved, emptyFunction, emptyFunction); + setupMoveUpEvents(this, e, this.onAliasButtonMoved, emptyFunction, emptyFunction); + } + onAliasButtonMoved = () => { + if (this._dragRef.current) { + const dragDocView = this.selectedDocumentView!; + const dragData = new DragManager.DocumentDragData([dragDocView.props.Document]); + const [left, top] = dragDocView.props.ScreenToLocalTransform().inverse().transformPoint(0, 0); + dragData.dropAction = "alias"; + DragManager.StartDocumentDrag([dragDocView.ContentDiv!], dragData, left, top, { + offsetX: dragData.offset[0], + offsetY: dragData.offset[1], + hideSource: false + }); + return true; + } + return false; + } + + @computed + get templateButton() { + const docView = this.selectedDocumentView; + const templates: Map = new Map(); + const views = [this.selectedDocumentView]; + Array.from(Object.values(Templates.TemplateList)).map(template => + templates.set(template, views.reduce((checked, doc) => checked || doc?.props.Document["_show" + template.Name] ? true : false, false as boolean))); + return !docView ? (null) : +
Tap: Customize layout. Drag: Create alias
}> +
+ this._aliasDown = true)} onClose={action(() => this._aliasDown = false)} + content={!this._aliasDown ? (null) : v).map(v => v as DocumentView)} templates={templates} />}> +
+ {} +
+ +
; + } + onCopy = () => { + if (this.selectedDoc && this.selectedDocumentView) { + const copy = Doc.MakeCopy(this.selectedDoc, true); + copy.x = NumCast(this.selectedDoc.x) + NumCast(this.selectedDoc._width); + copy.y = NumCast(this.selectedDoc.y) + 30; + this.selectedDocumentView.props.addDocument?.(copy); + } + } + + @computed + get copyButton() { + const targetDoc = this.selectedDoc; + return !targetDoc ? (null) :
{"Create a copy"}
}> +
+ {} +
+ ; + } + + @action + onLock = () => { + this.selectedDocumentView?.toggleLockPosition(); + } + + @computed + get lockButton() { + const targetDoc = this.selectedDoc; + return !targetDoc ? (null) :
{this.selectedDoc?.lockedPosition ? + "Unlock Position" : "Lock Position"}
}> +
+ {} +
+ ; } - // onAliasButtonMoved = () => { - // if (this._dragRef.current) { - // const dragDocView = this.props.doc!; - // if (dragDocView.props){ - // const dragData = new DragManager.DocumentDragData([dragDocView.props.Document]); - // const [left, top] = dragDocView.props.ScreenToLocalTransform().inverse().transformPoint(0, 0); - // dragData.dropAction = "alias"; - // DragManager.StartDocumentDrag([dragDocView.ContentDiv!], dragData, left, top, { - // offsetX: dragData.offset[0], - // offsetY: dragData.offset[1], - // hideSource: false - // }); - // return true; - // } + @computed + get downloadButton() { + const targetDoc = this.selectedDoc; + return !targetDoc ? (null) :
{"Download Document"}
}> +
{ + if (this.selectedDocumentView?.props.Document) { + Doc.Zip(this.selectedDocumentView?.props.Document); + } + }}> + {} +
+ ; + } - // } - // return false; - // } + @computed + get deleteButton() { + const targetDoc = this.selectedDoc; + return !targetDoc ? (null) :
{"Delete Document"}
}> +
{ + this.selectedDocumentView?.props.ContainingCollectionView?.removeDocument(this.selectedDocumentView?.props.Document); + }}> + {} +
+ ; + } - // @computed - // get templateButton() { - // //const view0 = this.view0; - // const templates: Map = new Map(); - // //const views = this.props.views(); - // Array.from(Object.values(Templates.TemplateList)).map(template => - // templates.set(template, views.reduce((checked, doc) => checked || doc?.props.Document["_show" + template.Name] ? true : false, false as boolean))); - // return !this.props.doc ? (null) : - //
Tap: Customize layout. Drag: Create alias
}> - //
- // this._aliasDown = true)} onClose={action(() => this._aliasDown = false)} - // content={!this._aliasDown ? (null) : v).map(v => v as DocumentView)} templates={templates} />}> - //
- // {} - //
- // - //
; - // } render() { if (!this.selectedDoc) return (null); @@ -287,24 +343,36 @@ export class PropertiesButtons extends React.Component<{}, {}> { const isText = this.selectedDoc[Doc.LayoutFieldKey(this.selectedDoc)] instanceof RichTextField; const considerPull = isText && this.considerGoogleDocsPull; const considerPush = isText && this.considerGoogleDocsPush; - return
- {/*
+ return
+
{this.templateButton} -
*/} +
{this.metadataButton}
- {/*
- {this.contextButton} -
*/}
{this.pinButton}
-
- {this.considerGoogleDocsPush} +
+ {this.copyButton} +
+
+ {this.lockButton} +
+
+ {this.downloadButton} +
+
+ {this.deleteButton}
-
- {this.considerGoogleDocsPull} +
+
+
+ {this.considerGoogleDocsPush} +
+
+ {this.considerGoogleDocsPull} +
; } -- cgit v1.2.3-70-g09d2 From 7d0778a9dd1d5e70bf5e4f51e264dcf2f86829d3 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Fri, 24 Jul 2020 00:25:30 -0500 Subject: two rows in settings and adjusting context menu --- src/client/views/PropertiesButtons.tsx | 25 +++++++++++++++++++++++-- src/client/views/nodes/DocumentView.tsx | 4 ++-- 2 files changed, 25 insertions(+), 4 deletions(-) (limited to 'src/client/views/PropertiesButtons.tsx') diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx index 52e46147a..8488b553f 100644 --- a/src/client/views/PropertiesButtons.tsx +++ b/src/client/views/PropertiesButtons.tsx @@ -23,6 +23,7 @@ import { Template, Templates } from "./Templates"; import React = require("react"); import { Tooltip } from '@material-ui/core'; import { SelectionManager } from '../util/SelectionManager'; +import SharingManager from '../util/SharingManager'; const higflyout = require("@hig/flyout"); export const { anchorPoints } = higflyout; export const Flyout = higflyout.default; @@ -267,7 +268,7 @@ export class PropertiesButtons extends React.Component<{}, {}> { onCopy = () => { if (this.selectedDoc && this.selectedDocumentView) { - const copy = Doc.MakeCopy(this.selectedDoc, true); + const copy = Doc.MakeCopy(this.selectedDocumentView.props.Document, true); copy.x = NumCast(this.selectedDoc.x) + NumCast(this.selectedDoc._width); copy.y = NumCast(this.selectedDoc.y) + 30; this.selectedDocumentView.props.addDocument?.(copy); @@ -336,6 +337,23 @@ export class PropertiesButtons extends React.Component<{}, {}> { ; } + @computed + get sharingButton() { + const targetDoc = this.selectedDoc; + return !targetDoc ? (null) :
{"Share Document"}
}> +
{ + if (this.selectedDocumentView) { + SharingManager.Instance.open(this.selectedDocumentView); + } + }}> + {} +
+ ; + } + render() { if (!this.selectedDoc) return (null); @@ -343,7 +361,7 @@ export class PropertiesButtons extends React.Component<{}, {}> { const isText = this.selectedDoc[Doc.LayoutFieldKey(this.selectedDoc)] instanceof RichTextField; const considerPull = isText && this.considerGoogleDocsPull; const considerPush = isText && this.considerGoogleDocsPush; - return
+ return
{this.templateButton}
@@ -367,6 +385,9 @@ export class PropertiesButtons extends React.Component<{}, {}> {
+
+ {this.sharingButton} +
{this.considerGoogleDocsPush}
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 02fe60255..30582a287 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -809,7 +809,7 @@ export class DocumentView extends DocComponent(Docu moreItems.push({ description: "Copy ID", event: () => Utils.CopyText(Utils.prepend("/doc/" + this.props.Document[Id])), icon: "fingerprint" }); } GetEffectiveAcl(this.props.Document) === AclEdit && moreItems.push({ description: "Delete", event: this.deleteClicked, icon: "trash" }); - moreItems.push({ description: "Share", event: () => SharingManager.Instance.open(this), icon: "external-link-alt" }); + //moreItems.push({ description: "Share", event: () => SharingManager.Instance.open(this), icon: "external-link-alt" }); !more && cm.addItem({ description: "More...", subitems: moreItems, icon: "hand-point-right" }); cm.moveAfter(cm.findByDescription("More...")!, cm.findByDescription("OnClick...")!); @@ -817,7 +817,7 @@ export class DocumentView extends DocComponent(Docu const helpItems: ContextMenuProps[] = help && "subitems" in help ? help.subitems : []; //!Doc.UserDoc().novice && helpItems.push({ description: "Text Shortcuts Ctrl+/", event: () => this.props.addDocTab(Docs.Create.PdfDocument(Utils.prepend("/assets/cheat-sheet.pdf"), { _width: 300, _height: 300 }), "onRight"), icon: "keyboard" }); !Doc.UserDoc().novice && helpItems.push({ description: "Show Fields ", event: () => this.props.addDocTab(Docs.Create.KVPDocument(this.props.Document, { _width: 300, _height: 300 }), "onRight"), icon: "layer-group" }); - cm.addItem({ description: "Help...", noexpand: true, subitems: helpItems, icon: "question" }); + //cm.addItem({ description: "Help...", noexpand: true, subitems: helpItems, icon: "question" }); // const existingAcls = cm.findByDescription("Privacy..."); // const aclItems: ContextMenuProps[] = existingAcls && "subitems" in existingAcls ? existingAcls.subitems : []; -- cgit v1.2.3-70-g09d2 From 649470762c722eea1067e30d2f35aedcf84a369c Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Fri, 24 Jul 2020 13:40:24 -0500 Subject: sally UI changes --- src/client/views/DocumentDecorations.tsx | 5 +-- src/client/views/MainView.tsx | 4 +-- src/client/views/PropertiesButtons.tsx | 2 +- .../collectionFreeForm/PropertiesView.scss | 13 +++++++ .../collectionFreeForm/PropertiesView.tsx | 42 +++++++++------------- src/client/views/linking/LinkMenuItem.tsx | 2 +- src/client/views/nodes/DocumentView.tsx | 12 ++++++- 7 files changed, 47 insertions(+), 33 deletions(-) (limited to 'src/client/views/PropertiesButtons.tsx') diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index fec4ad9e0..d30adc5a2 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -1,5 +1,5 @@ import { IconProp, library } from '@fortawesome/fontawesome-svg-core'; -import { faCaretUp, faFilePdf, faFilm, faImage, faObjectGroup, faStickyNote, faTextHeight, faArrowAltCircleDown, faArrowAltCircleUp, faCheckCircle, faCloudUploadAlt, faLink, faShare, faStopCircle, faSyncAlt, faTag, faTimes, faAngleLeft, faAngleRight, faAngleDoubleLeft, faAngleDoubleRight, faPause } from '@fortawesome/free-solid-svg-icons'; +import { faCaretUp, faFilePdf, faFilm, faImage, faObjectGroup, faStickyNote, faTextHeight, faArrowAltCircleDown, faArrowAltCircleUp, faCheckCircle, faCloudUploadAlt, faLink, faShare, faStopCircle, faSyncAlt, faTag, faTimes, faAngleLeft, faAngleRight, faAngleDoubleLeft, faAngleDoubleRight, faPause, faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { action, computed, observable, reaction, runInAction } from "mobx"; import { observer } from "mobx-react"; @@ -44,6 +44,7 @@ library.add(faAngleDoubleRight); library.add(faAngleLeft); library.add(faAngleRight); library.add(faPause); +library.add(faExternalLinkAlt); @observer export class DocumentDecorations extends React.Component<{}, { value: string }> { @@ -617,7 +618,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> {"_"}
}
Open Document In Tab
} placement="top">
- {SelectionManager.SelectedDocuments().length === 1 ? DocumentDecorations.DocumentIcon(StrCast(seldoc.props.Document.layout, "...")) : "..."} + {SelectionManager.SelectedDocuments().length === 1 ? : "..."}
⟲
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index f43eca468..4a80f57b3 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, faMap, faDesktop, faTrashRestore, faUsers, faWrench, faCog, faBellSlash + faPaintRoller, faBars, faBrush, faShapes, faEllipsisH, faHandPaper, faMap, faDesktop, faTrashRestore, faUsers, faWrench, faCog, faBellSlash, faExpandAlt } from '@fortawesome/free-solid-svg-icons'; import { ANTIMODEMENU_HEIGHT } from './globalCssVariables.scss'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; @@ -174,7 +174,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, faDesktop, faTrashRestore, faUsers, faWrench, faCog, faMap, faBellSlash); + faPaintRoller, faBars, faBrush, faShapes, faEllipsisH, faHandPaper, faDesktop, faTrashRestore, faUsers, faWrench, faCog, faMap, faBellSlash, faExpandAlt); this.initEventListeners(); this.initAuthenticationRouters(); } diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx index 8488b553f..32a98b072 100644 --- a/src/client/views/PropertiesButtons.tsx +++ b/src/client/views/PropertiesButtons.tsx @@ -278,7 +278,7 @@ export class PropertiesButtons extends React.Component<{}, {}> { @computed get copyButton() { const targetDoc = this.selectedDoc; - return !targetDoc ? (null) :
{"Create a copy"}
}> + return !targetDoc ? (null) :
{"Create an Alias"}
}>
{} diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss index e025c7e87..e6bc3f15a 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss @@ -79,6 +79,17 @@ } } + .expansion-button-icon { + width: 11px; + height: 11px; + color: black; + margin-left: 27px; + + &:hover { + color: rgb(131, 131, 131); + } + } + .propertiesView-sharingTable { border: 1px solid black; @@ -103,6 +114,8 @@ .propertiesView-sharingTable-item-permission { + display: flex; + .permissions-select { z-index: 1; //border: 0.5px solid grey; diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx index 9af4bd276..e911c7a9f 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx @@ -17,6 +17,7 @@ import { PropertiesButtons } from "../../PropertiesButtons"; import { SelectionManager } from "../../../util/SelectionManager"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { Tooltip } from "@material-ui/core"; +import SharingManager from "../../../util/SharingManager"; interface PropertiesViewProps { @@ -174,19 +175,32 @@ export class PropertiesView extends React.Component { } @computed get notifyIcon() { - return
{"Notify user or group of permissions change"}
}> + return
{"Notify group of permissions change"}
}>
; } + @computed get expansionIcon() { + return
{"Show more permissions"}
}> +
{ + if (this.selectedDocumentView) { + SharingManager.Instance.open(this.selectedDocumentView); + } + }}> + +
+ ; + } + sharingItem(name: string, notify: boolean, editable: boolean, permission?: string) { return
{name}
{notify ? this.notifyIcon : null}
{editable ? this.permissionsSelect : permission} + {permission === "Owner" ? this.expansionIcon : null}
; } @@ -197,30 +211,6 @@ export class PropertiesView extends React.Component { {this.sharingItem("Public", false, true)} {this.sharingItem("Group 1", true, true)} {this.sharingItem("Group 2", true, true)} - {/*
-
Me:
-
Owner
-
-
-
Public:
-
- {this.permissionsSelect} -
-
-
-
Group 1:
-
-
- {this.permissionsSelect} -
-
-
-
Another group:
-
-
- {this.permissionsSelect} -
-
*/}
; } @@ -241,7 +231,7 @@ export class PropertiesView extends React.Component { {this.selectedDoc.title}
-
Settings
+
Document Actions
diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx index d1c839c3b..8084d96ae 100644 --- a/src/client/views/linking/LinkMenuItem.tsx +++ b/src/client/views/linking/LinkMenuItem.tsx @@ -182,7 +182,7 @@ export class LinkMenuItem extends React.Component { switch (this.props.destinationDoc.type) { case DocumentType.IMG: destinationIcon = "image"; break; case DocumentType.COMPARISON: destinationIcon = "columns"; break; - case DocumentType.RTF: destinationIcon = "font"; break; + case DocumentType.RTF: destinationIcon = "sticky-note"; break; case DocumentType.COL: destinationIcon = "folder"; break; case DocumentType.WEB: destinationIcon = "globe-asia"; break; case DocumentType.SCREENSHOT: destinationIcon = "photo-video"; break; diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 30582a287..ed3a9a4f3 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -726,6 +726,14 @@ export class DocumentView extends DocComponent(Docu }); } + @action + onCopy = () => { + const copy = Doc.MakeCopy(this.props.Document, true); + copy.x = NumCast(this.props.Document.x) + NumCast(this.props.Document._width); + copy.y = NumCast(this.props.Document.y) + 30; + this.props.addDocument?.(copy); + } + @action onContextMenu = async (e: React.MouseEvent | Touch): Promise => { // the touch onContextMenu is button 0, the pointer onContextMenu is button 2 @@ -787,6 +795,8 @@ export class DocumentView extends DocComponent(Docu const more = cm.findByDescription("More..."); const moreItems = more && "subitems" in more ? more.subitems : []; + moreItems.push({ description: "Share", event: () => SharingManager.Instance.open(this), icon: "users" }); + moreItems.push({ description: "Create an Alias", event: () => this.onCopy(), icon: "copy" }); moreItems.push({ description: "Download document", icon: "download", event: async () => { Doc.Zip(this.props.Document); @@ -809,7 +819,7 @@ export class DocumentView extends DocComponent(Docu moreItems.push({ description: "Copy ID", event: () => Utils.CopyText(Utils.prepend("/doc/" + this.props.Document[Id])), icon: "fingerprint" }); } GetEffectiveAcl(this.props.Document) === AclEdit && moreItems.push({ description: "Delete", event: this.deleteClicked, icon: "trash" }); - //moreItems.push({ description: "Share", event: () => SharingManager.Instance.open(this), icon: "external-link-alt" }); + !more && cm.addItem({ description: "More...", subitems: moreItems, icon: "hand-point-right" }); cm.moveAfter(cm.findByDescription("More...")!, cm.findByDescription("OnClick...")!); -- cgit v1.2.3-70-g09d2 From eab29b953a24659f16901fa10522f3787212ccc0 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Sun, 26 Jul 2020 11:25:48 -0500 Subject: merge fix again --- src/client/views/MainView.scss | 2 +- src/client/views/PropertiesButtons.tsx | 70 ++++++++++++++++++++++++++++++++++ 2 files changed, 71 insertions(+), 1 deletion(-) (limited to 'src/client/views/PropertiesButtons.tsx') diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss index 51548bf58..792cb5b1f 100644 --- a/src/client/views/MainView.scss +++ b/src/client/views/MainView.scss @@ -137,7 +137,7 @@ right: 0; top: 0; border-left: solid 1px; - z-index: 10000; + z-index: 100000; cursor: auto; } diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx index 32a98b072..d2f6b1155 100644 --- a/src/client/views/PropertiesButtons.tsx +++ b/src/client/views/PropertiesButtons.tsx @@ -354,6 +354,73 @@ export class PropertiesButtons extends React.Component<{}, {}> { ; } + @computed + get onClickButton() { + if (this.selectedDoc) { + return
Choose onClick behavior
}> +
+ +
e.stopPropagation()} > + {} +
+ +
; + } else { + return null; + } + } + + @computed + get onClickFlyout() { + return
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
; + + // onClicks.push({ description: "Enter Portal", event: this.makeIntoPortal, icon: "window-restore" }); + // onClicks.push({ description: "Toggle Detail", event: () => this.Document.onClick = ScriptField.MakeScript(`toggleDetail(self, "${this.Document.layoutKey}")`), icon: "window-restore" }); + // onClicks.push({ description: this.Document.ignoreClick ? "Select" : "Do Nothing", event: () => this.Document.ignoreClick = !this.Document.ignoreClick, icon: this.Document.ignoreClick ? "unlock" : "lock" }); + // onClicks.push({ description: this.Document.isLinkButton ? "Remove Follow Behavior" : "Follow Link in Place", event: this.toggleFollowInPlace, icon: "concierge-bell" }); + // onClicks.push({ description: this.Document.isLinkButton ? "Remove Follow Behavior" : "Follow Link on Right", event: this.toggleFollowOnRight, icon: "concierge-bell" }); + // onClicks.push({ description: this.Document.isLinkButton || this.onClickHandler ? "Remove Click Behavior" : "Follow Link", event: this.toggleLinkButtonBehavior, icon: "concierge-bell" }); + // onClicks.push({ description: "Edit onClick Script", event: () => UndoManager.RunInBatch(() => DocUtils.makeCustomViewClicked(this.props.Document, undefined, "onClick"), "edit onClick"), icon: "edit" }); + } + render() { if (!this.selectedDoc) return (null); @@ -388,6 +455,9 @@ export class PropertiesButtons extends React.Component<{}, {}> {
{this.sharingButton}
+
+ {this.onClickButton} +
{this.considerGoogleDocsPush}
-- cgit v1.2.3-70-g09d2 From a607928d563520fc0a07c559334ea7039d269d3a Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Sun, 26 Jul 2020 16:19:23 -0500 Subject: overflow, open in tab bug fixes --- src/client/views/DocumentDecorations.tsx | 2 +- src/client/views/MainView.scss | 1 + src/client/views/MainView.tsx | 9 +++++---- src/client/views/PropertiesButtons.scss | 1 + src/client/views/PropertiesButtons.tsx | 23 ++++++++++++++++++++++ .../collectionFreeForm/PropertiesView.scss | 5 +++-- src/client/views/nodes/DocumentView.tsx | 2 ++ 7 files changed, 36 insertions(+), 7 deletions(-) (limited to 'src/client/views/PropertiesButtons.tsx') diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index 87222e942..c889557ba 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -619,7 +619,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
{"_"}
} -
Open Document In Tab
} placement="top">
+
Open Document In Tab
} placement="top">
{SelectionManager.SelectedDocuments().length === 1 ? : "..."}
//
; // } @@ -519,10 +520,10 @@ export class MainView extends React.Component {
this.selectPanel("deleted")}> -
Recently Closed
+ style={{ color: this.panelContent === "deleted" ? "black" : "white" }}> Recently Used
{ // onClicks.push({ description: "Edit onClick Script", event: () => UndoManager.RunInBatch(() => DocUtils.makeCustomViewClicked(this.props.Document, undefined, "onClick"), "edit onClick"), icon: "edit" }); } + @computed + get googlePhotosButton() { + const targetDoc = this.selectedDoc; + return !targetDoc ? (null) :
{"Export to Google Photos"}
}> +
{ + if (this.selectedDocumentView) { + GooglePhotos.Export.CollectionToAlbum({ collection: this.selectedDocumentView.Document }).then(console.log) + } + }}> + {} +
+ ; + } + render() { if (!this.selectedDoc) return (null); @@ -428,6 +447,7 @@ export class PropertiesButtons extends React.Component<{}, {}> { const isText = this.selectedDoc[Doc.LayoutFieldKey(this.selectedDoc)] instanceof RichTextField; const considerPull = isText && this.considerGoogleDocsPull; const considerPush = isText && this.considerGoogleDocsPush; + const isImage = this.selectedDoc[Doc.LayoutFieldKey(this.selectedDoc)] instanceof ImageField; return
{this.templateButton} @@ -464,6 +484,9 @@ export class PropertiesButtons extends React.Component<{}, {}> {
{this.considerGoogleDocsPull}
+
+ {this.googlePhotosButton} +
; } diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss index 7b8f116b7..99db0022e 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss @@ -5,7 +5,8 @@ font-family: "Noto Sans"; cursor: auto; - overflow-y: scroll; + overflow-x: visible; + overflow-y: visible; .propertiesView-title { background-color: rgb(159, 159, 159); @@ -23,7 +24,7 @@ .propertiesView-title-icon { width: 20px; height: 20px; - padding-left: 32px; + padding-left: 38px; margin-top: -5px; &:hover { diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 0cfb12f95..6aceec90e 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -101,6 +101,7 @@ export interface DocumentViewProps { radialMenu?: String[]; display?: string; relative?: boolean; + scriptContext?: any; } @observer @@ -323,6 +324,7 @@ export class DocumentView extends DocComponent(Docu const func = () => this.onClickHandler.script.run({ this: this.layoutDoc, self: this.rootDoc, + scriptContext: this.props.scriptContext, thisContainer: this.props.ContainingCollectionDoc, shiftKey: e.shiftKey }, console.log); if (this.props.Document !== Doc.UserDoc()["dockedBtn-undo"] && this.props.Document !== Doc.UserDoc()["dockedBtn-redo"]) { -- cgit v1.2.3-70-g09d2 From e93058822d2b997b48fb711f49bb14357a61143c Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Sun, 26 Jul 2020 22:54:10 -0500 Subject: layout check in properties, rich text menu to top --- src/client/views/MainView.tsx | 4 +- src/client/views/PropertiesButtons.scss | 9 ++ src/client/views/PropertiesButtons.tsx | 99 ++++++++++++++-------- src/client/views/collections/CollectionMenu.tsx | 44 +++++++--- .../collectionFreeForm/PropertiesView.scss | 21 ++++- .../collectionFreeForm/PropertiesView.tsx | 31 ++++++- src/client/views/nodes/DocumentView.tsx | 13 +++ .../views/nodes/formattedText/RichTextMenu.tsx | 47 +++++----- 8 files changed, 192 insertions(+), 76 deletions(-) (limited to 'src/client/views/PropertiesButtons.tsx') diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 4f85ef333..153df7d9d 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -628,7 +628,7 @@ export class MainView extends React.Component { } @computed get mainContent() { - const n = (RichTextMenu.Instance?.Pinned ? 1 : 0) + (CollectionMenu.Instance?.Pinned ? 1 : 0); + const n = (RichTextMenu.Instance?.Pinned ? 0 : 0) + (CollectionMenu.Instance?.Pinned ? 1 : 0); const height = `calc(100% - ${n * Number(ANTIMODEMENU_HEIGHT.replace("px", ""))}px)`; const rightFlyout = this.selectedDocumentView ? this._propertiesWidth - 1 : this.propertiesWidth() > 10 ? 151.5 : 0; @@ -799,7 +799,7 @@ export class MainView extends React.Component { {/* {this.search} */} - + {/* */} {LinkDescriptionPopup.descriptionPopup ? : null} {DocumentLinksButton.EditLink ? : (null)} {LinkDocPreview.LinkInfo ? { @computed get selectedDoc() { return this.selectedDocumentView?.rootDoc; } @computed get dataDoc() { return this.selectedDocumentView?.dataDoc; } + @observable public onClick = this.selectedDoc?.onClickBehavior ? this.selectedDoc?.onClickBehavior : "nothing"; + public startPullOutcome = action((success: boolean) => { if (!this._pullAnimating) { this._pullAnimating = true; @@ -373,54 +376,80 @@ export class PropertiesButtons extends React.Component<{}, {}> { } } + @action + handleOptionChange = (e: any) => { + const value = e.target.value; + this.onClick = e.target.value; + if (value === "nothing") { + this.selectedDocumentView?.noOnClick; + } else if (value === "enterPortal") { + //this.selectedDocumentView?.noOnClick; + this.selectedDocumentView?.makeIntoPortal; + } else if (value === "toggleDetail") { + //this.selectedDocumentView?.noOnClick; + this.selectedDocumentView?.toggleDetail; + } else if (value === "linkInPlace") { + //this.selectedDocumentView?.noOnClick; + this.selectedDocumentView?.toggleFollowInPlace; + } else if (value === "linkOnRight") { + //this.selectedDocumentView?.noOnClick; + this.selectedDocumentView?.toggleFollowOnRight; + } + } + + @undoBatch @action + editOnClickScript = () => { + if (this.selectedDoc) { + DocUtils.makeCustomViewClicked(this.selectedDoc, undefined, "onClick"); + } + } + @computed get onClickFlyout() { return
+ + Select Document +
+ + Enter Portal +
+ + Toggle Detail +
+ + Follow Link +
+ + Open Link on Right +
-
- -
-
; - - // onClicks.push({ description: "Enter Portal", event: this.makeIntoPortal, icon: "window-restore" }); - // onClicks.push({ description: "Toggle Detail", event: () => this.Document.onClick = ScriptField.MakeScript(`toggleDetail(self, "${this.Document.layoutKey}")`), icon: "window-restore" }); - // onClicks.push({ description: this.Document.ignoreClick ? "Select" : "Do Nothing", event: () => this.Document.ignoreClick = !this.Document.ignoreClick, icon: this.Document.ignoreClick ? "unlock" : "lock" }); - // onClicks.push({ description: this.Document.isLinkButton ? "Remove Follow Behavior" : "Follow Link in Place", event: this.toggleFollowInPlace, icon: "concierge-bell" }); - // onClicks.push({ description: this.Document.isLinkButton ? "Remove Follow Behavior" : "Follow Link on Right", event: this.toggleFollowOnRight, icon: "concierge-bell" }); - // onClicks.push({ description: this.Document.isLinkButton || this.onClickHandler ? "Remove Click Behavior" : "Follow Link", event: this.toggleLinkButtonBehavior, icon: "concierge-bell" }); - // onClicks.push({ description: "Edit onClick Script", event: () => UndoManager.RunInBatch(() => DocUtils.makeCustomViewClicked(this.props.Document, undefined, "onClick"), "edit onClick"), icon: "edit" }); + +
Edit onClick Script
+
; } @computed @@ -452,9 +481,9 @@ export class PropertiesButtons extends React.Component<{}, {}> {
{this.templateButton}
-
+ {/*
{this.metadataButton} -
+
*/}
{this.pinButton}
@@ -470,14 +499,14 @@ export class PropertiesButtons extends React.Component<{}, {}> {
{this.deleteButton}
+
+ {this.onClickButton} +
{this.sharingButton}
-
- {this.onClickButton} -
{this.considerGoogleDocsPush}
diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx index 24be69050..5a7c98f46 100644 --- a/src/client/views/collections/CollectionMenu.tsx +++ b/src/client/views/collections/CollectionMenu.tsx @@ -25,6 +25,8 @@ import { SelectionManager } from "../../util/SelectionManager"; import { DocumentView } from "../nodes/DocumentView"; import { ColorState } from "react-color"; import { ObjectField } from "../../../fields/ObjectField"; +import RichTextMenu from "../nodes/formattedText/RichTextMenu"; +import { RichTextField } from "../../../fields/RichTextField"; @observer export default class CollectionMenu extends AntimodeMenu { @@ -300,6 +302,20 @@ export class CollectionFreeFormViewChrome extends React.Component { @@ -469,25 +485,27 @@ export class CollectionFreeFormViewChrome extends React.Component -
+ {!!!this.isText ?
-
-
+
: null} + {!!!this.isText ?
-
-
: null} + {!!!this.isText ?
this.Document.editing = !this.Document.editing)} > {NumCast(this.Document.currentFrame)} -
-
+
: null} + {!!!this.isText ?
-
+
: null} + + {!!!this.isText ? this.widthPicker : null} + {!!!this.isText ? this.colorPicker : null} + {!!!this.isText ? this.fillPicker : null} + {!!!this.isText ? this.drawButtons : null} + {!!!this.isText ? this.formatPane : null} + {this.isText ? : null} - {this.widthPicker} - {this.colorPicker} - {this.fillPicker} - {this.drawButtons} - {this.formatPane}
; } } diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss index 99db0022e..8cc591875 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss @@ -164,9 +164,26 @@ padding: 8.5px; .propertiesView-fields-title { - font-size: 12.5px; - font-weight: bold; padding-bottom: 7px; + display: flex; + + .propertiesView-fields-title-name { + font-size: 12.5px; + font-weight: bold; + } + + .propertiesView-fields-title-checkbox { + float: right; + height: 20px; + margin-top: -13px; + margin-left: 115px; + + .propertiesView-fields-title-checkbox-text { + font-size: 7px; + margin-top: -10px; + margin-left: 6px; + } + } } .propertiesView-fields-content { diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx index a75ad13e5..3b8d782aa 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx @@ -16,7 +16,7 @@ import { Transform } from "../../../util/Transform"; import { PropertiesButtons } from "../../PropertiesButtons"; import { SelectionManager } from "../../../util/SelectionManager"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { Tooltip } from "@material-ui/core"; +import { Tooltip, Checkbox } from "@material-ui/core"; import SharingManager from "../../../util/SharingManager"; @@ -41,6 +41,8 @@ export class PropertiesView extends React.Component { @computed get selectedDoc() { return this.selectedDocumentView?.rootDoc; } @computed get dataDoc() { return this.selectedDocumentView?.dataDoc; } + @observable layoutFields: boolean = false; + @action rtfWidth = () => { if (this.selectedDoc) { @@ -88,9 +90,9 @@ export class PropertiesView extends React.Component { } @computed get expandedField() { - if (this.dataDoc) { + if (this.dataDoc && this.selectedDoc) { const ids: { [key: string]: string } = {}; - const doc = this.dataDoc; + const doc = this.layoutFields ? Doc.Layout(this.selectedDoc) : this.dataDoc; doc && Object.keys(doc).forEach(key => !(key in ids) && doc[key] !== ComputedField.undefined && (ids[key] = key)); const rows: JSX.Element[] = []; @@ -215,6 +217,19 @@ export class PropertiesView extends React.Component {
; } + @computed get fieldsCheckbox() { + return ; + } + + @action + toggleCheckbox = () => { + this.layoutFields = !this.layoutFields; + } + render() { if (!this.selectedDoc) { @@ -247,7 +262,15 @@ export class PropertiesView extends React.Component {
-
Fields
+
+
+ Fields +
+
+ {this.fieldsCheckbox} +
Layout
+
+
{this.expandedField}
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 6aceec90e..884104f62 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -622,6 +622,18 @@ export class DocumentView extends DocComponent(Docu } } + + @undoBatch + noOnClick = (): void => { + this.Document.ignoreClick = false; + this.Document.isLinkButton = false; + } + + @undoBatch + toggleDetail = (): void => { + this.Document.onClick = ScriptField.MakeScript(`toggleDetail(self, "${this.Document.layoutKey}")`); + } + @undoBatch @action drop = async (e: Event, de: DragManager.DropEvent) => { @@ -673,6 +685,7 @@ export class DocumentView extends DocComponent(Docu @undoBatch @action makeIntoPortal = async () => { + console.log("into portal"); const portalLink = DocListCast(this.Document.links).find(d => d.anchor1 === this.props.Document); if (!portalLink) { const portal = Docs.Create.FreeformDocument([], { _width: NumCast(this.layoutDoc._width) + 10, _height: NumCast(this.layoutDoc._height), title: StrCast(this.props.Document.title) + ".portal" }); diff --git a/src/client/views/nodes/formattedText/RichTextMenu.tsx b/src/client/views/nodes/formattedText/RichTextMenu.tsx index 47a4911b8..98c786566 100644 --- a/src/client/views/nodes/formattedText/RichTextMenu.tsx +++ b/src/client/views/nodes/formattedText/RichTextMenu.tsx @@ -77,7 +77,8 @@ export default class RichTextMenu extends AntimodeMenu { super(props); RichTextMenu.Instance = this; this._canFade = false; - this.Pinned = BoolCast(Doc.UserDoc()["menuRichText-pinned"]); + //this.Pinned = BoolCast(Doc.UserDoc()["menuRichText-pinned"]); + this.Pinned = true; this.fontSizeOptions = [ { mark: schema.marks.pFontSize.create({ fontSize: 7 }), title: "Set font size", label: "7pt", command: this.changeFontSize }, @@ -918,28 +919,34 @@ export default class RichTextMenu extends AntimodeMenu { render() { TraceMobx(); const row1 =
{[ - !this.collapsed ? this.getDragger() : (null), - !this.Pinned ? (null) :
{[ - this.createButton("bold", "Bold", this.boldActive, toggleMark(schema.marks.strong)), - this.createButton("italic", "Italic", this.italicsActive, toggleMark(schema.marks.em)), - this.createButton("underline", "Underline", this.underlineActive, toggleMark(schema.marks.underline)), - this.createButton("strikethrough", "Strikethrough", this.strikethroughActive, toggleMark(schema.marks.strikethrough)), - this.createButton("superscript", "Superscript", this.superscriptActive, toggleMark(schema.marks.superscript)), - this.createButton("subscript", "Subscript", this.subscriptActive, toggleMark(schema.marks.subscript)), -
- ]}
, + //!this.collapsed ? this.getDragger() : (null), + // !this.Pinned ? (null) :
{[ + // this.createButton("bold", "Bold", this.boldActive, toggleMark(schema.marks.strong)), + // this.createButton("italic", "Italic", this.italicsActive, toggleMark(schema.marks.em)), + // this.createButton("underline", "Underline", this.underlineActive, toggleMark(schema.marks.underline)), + // this.createButton("strikethrough", "Strikethrough", this.strikethroughActive, toggleMark(schema.marks.strikethrough)), + // this.createButton("superscript", "Superscript", this.superscriptActive, toggleMark(schema.marks.superscript)), + // this.createButton("subscript", "Subscript", this.subscriptActive, toggleMark(schema.marks.subscript)), + //
+ // ]}
, + this.createButton("bold", "Bold", this.boldActive, toggleMark(schema.marks.strong)), + this.createButton("italic", "Italic", this.italicsActive, toggleMark(schema.marks.em)), + this.createButton("underline", "Underline", this.underlineActive, toggleMark(schema.marks.underline)), + this.createButton("strikethrough", "Strikethrough", this.strikethroughActive, toggleMark(schema.marks.strikethrough)), + this.createButton("superscript", "Superscript", this.superscriptActive, toggleMark(schema.marks.superscript)), + this.createButton("subscript", "Subscript", this.subscriptActive, toggleMark(schema.marks.subscript)), this.createColorButton(), this.createHighlighterButton(), - this.createLinkButton(), - this.createBrushButton(), + //this.createLinkButton(), + //this.createBrushButton(),
, this.createButton("align-left", "Align Left", this.activeAlignment === "left", this.alignLeft), this.createButton("align-center", "Align Center", this.activeAlignment === "center", this.alignCenter), this.createButton("align-right", "Align Right", this.activeAlignment === "right", this.alignRight), this.createButton("indent", "Inset More", undefined, this.insetParagraph), this.createButton("outdent", "Inset Less", undefined, this.outsetParagraph), - this.createButton("hand-point-left", "Hanging Indent", undefined, this.hangingIndentParagraph), - this.createButton("hand-point-right", "Indent", undefined, this.indentParagraph), + //this.createButton("hand-point-left", "Hanging Indent", undefined, this.hangingIndentParagraph), + //this.createButton("hand-point-right", "Indent", undefined, this.indentParagraph), ]}
; const row2 =
@@ -950,21 +957,21 @@ export default class RichTextMenu extends AntimodeMenu { this.createMarksDropdown(this.activeFontFamily, this.fontFamilyOptions, "font family", action((val: string) => this.activeFontFamily = val)),
, this.createNodesDropdown(this.activeListType, this.listTypeOptions, "list type", action((val: string) => this.activeListType = val)), - this.createButton("sort-amount-down", "Summarize", undefined, this.insertSummarizer), + //this.createButton("sort-amount-down", "Summarize", undefined, this.insertSummarizer), this.createButton("quote-left", "Blockquote", undefined, this.insertBlockquote), this.createButton("minus", "Horizontal Rule", undefined, this.insertHorizontalRule),
,]}
-
- {/*
+ {/*
+ {
-
*/} +
} -
+
*/}
; return ( -- cgit v1.2.3-70-g09d2 From f58fb7428f6eeca6b41beb59df244c7c50c876fa Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Mon, 27 Jul 2020 13:37:01 -0500 Subject: bug fixes and adding to menu UI --- src/client/views/MainView.scss | 165 +++++++++++---------- src/client/views/MainView.tsx | 137 ++++++++--------- src/client/views/PropertiesButtons.scss | 5 +- src/client/views/PropertiesButtons.tsx | 4 +- .../views/nodes/formattedText/FormattedTextBox.tsx | 2 +- 5 files changed, 162 insertions(+), 151 deletions(-) (limited to 'src/client/views/PropertiesButtons.tsx') diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss index f1042ff50..7318d451b 100644 --- a/src/client/views/MainView.scss +++ b/src/client/views/MainView.scss @@ -139,7 +139,6 @@ border-left: solid 1px; z-index: 100000; cursor: auto; - overflow-x: visible; } .mainView-flyoutContainer { @@ -156,99 +155,105 @@ .mainView-menuPanel { - max-width: 95px; + max-width: 60px; background-color: black; - padding: 15px; - /* padding-right: 50px; */ - overflow-y: scroll; - overflow-x: hidden; + //overflow-y: scroll; + //overflow-x: hidden; + .mainView-menuPanel-button { - width: 60px; - padding: 7.5px; + padding: 7px; + padding-left: 7px; + width: 100%; + .mainView-menuPanel-button-wrap { + width: 45px; + /* padding: 5px; */ touch-action: none; background: black; transform-origin: top left; - margin-bottom: 5px; + /* margin-bottom: 5px; */ margin-top: 5px; margin-right: 25px; border-radius: 8px; + + &:hover { + background: rgb(61, 61, 61); + cursor: pointer; + } + } + } + + .mainView-menuPanel-button-label { + color: white; + margin-left: px; + margin-right: 4px; + border-radius: 8px; + width: 42px; + position: relative; + text-align: center; + font-size: 8px; + margin-top: 1px; + letter-spacing: normal; + padding: 3px; + background-color: inherit; + } - .mainView-menuPanel-button-label { - color: white; - margin-left: -6px; - border-radius: 8px; - width: 55px; - position: relative; - text-align: center; - font-size: 9.5px; - margin-top: 1px; - letter-spacing: normal; - padding: 3px; - background-color: inherit; - } - - .mainView-menuPanel-button-icon { - width: auto; - height: 35px; - padding: 5px; - } - - svg { - width: 95% !important; - height: 95%; - } - - &:hover { - background: rgb(61, 61, 61); - cursor: pointer; - } + .mainView-menuPanel-button-icon { + width: auto; + height: 35px; + padding: 5px; } - // .mainView-menuPanel-bottomButton { - // width: 45px; - // height: 45px; - // padding: 10px; - // pointer-events: all; - // touch-action: none; - // //border-radius: inherit; - // background: black; - // background-color: black; - // //border-radius: 100%; - // transform-origin: top left; - // margin-bottom: 20px; - // margin-top: 5px; - - // margin-right: 25px; - - // .mainView-menuPanel-bottomButton-label { - // background: black; - // color: white; - // margin-left: -10px; - // border-radius: 8px; - // width: 65px; - // position: absolute; - // text-align: center; - // font-size: 9.5px; - // margin-top: 2px; - // letter-spacing: normal; - // padding: 3px; - // //margin-bottom: 23px; - // } - - // .mainView-menuPanel-bottomButton-icon { - // width: 50px; - // height: 50px; - // color: white; - // } - - // svg { - // width: 95% !important; - // height: 95%; - // } - // } + svg { + width: 95% !important; + height: 95%; + } } +// .mainView-menuPanel-bottomButton { +// width: 45px; +// height: 45px; +// padding: 10px; +// pointer-events: all; +// touch-action: none; +// //border-radius: inherit; +// background: black; +// background-color: black; +// //border-radius: 100%; +// transform-origin: top left; +// margin-bottom: 20px; +// margin-top: 5px; + +// margin-right: 25px; + +// .mainView-menuPanel-bottomButton-label { +// background: black; +// color: white; +// margin-left: -10px; +// border-radius: 8px; +// width: 65px; +// position: absolute; +// text-align: center; +// font-size: 9.5px; +// margin-top: 2px; +// letter-spacing: normal; +// padding: 3px; +// //margin-bottom: 23px; +// } + +// .mainView-menuPanel-bottomButton-icon { +// width: 50px; +// height: 50px; +// color: white; +// } + +// svg { +// width: 95% !important; +// height: 95%; +// } +// } + + .mainView-searchPanel { width: 100%; height: 33px; diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 153df7d9d..e06bfd0b0 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -423,7 +423,8 @@ export class MainView extends React.Component { doc.dockingConfig ? this.openWorkspace(doc) : CollectionDockingView.AddRightSplit(doc, libraryPath); } - sidebarScreenToLocal = () => new Transform(0, (RichTextMenu.Instance.Pinned ? -35 : 0) + (CollectionMenu.Instance.Pinned ? -35 : 0), 1); + sidebarScreenToLocal = () => new Transform(0, (CollectionMenu.Instance.Pinned ? -35 : 0), 1); + //sidebarScreenToLocal = () => new Transform(0, (RichTextMenu.Instance.Pinned ? -35 : 0) + (CollectionMenu.Instance.Pinned ? -35 : 0), 1); mainContainerXf = () => this.sidebarScreenToLocal().translate(0, -this._buttonBarHeight); @computed get flyout() { @@ -499,82 +500,85 @@ export class MainView extends React.Component { @computed get menuPanel() { return
-
this.selectPanel("workspace")}> - -
Workspace
+
+
this.selectPanel("workspace")}> + +
Workspace
+
-
this.selectPanel("catalog")}> - -
Catalog
+
+
this.selectPanel("catalog")}> + +
Catalog
+
-
this.selectPanel("deleted")}> - -
Recently Used
+
+
this.selectPanel("deleted")}> + +
Recently Used
+
-
this.selectPanel("upload")}> - -
Import
+
+
this.selectPanel("upload")}> + +
Import
+
-
this.selectPanel("sharing")} - onClick={() => GroupManager.Instance.open()}> - -
Sharing
+
+
this.selectPanel("sharing")} + onClick={() => GroupManager.Instance.open()}> + +
Sharing
+
-
this.selectPanel("tools")} - style={{ - backgroundColor: this.panelContent === "tools" ? "lightgrey" : "", - marginBottom: "70px" - }}> - -
Tools
+
+
this.selectPanel("tools")} + style={{ + backgroundColor: this.panelContent === "tools" ? "lightgrey" : "", + }}> + +
Tools
+
- {/* */} - -
this.selectPanel("help")} > - -
Help
+
+
this.selectPanel("help")} > + +
Help
+
-
this.selectPanel("settings")} - onClick={() => SettingsManager.Instance.open()}> - -
Settings
+
+
this.selectPanel("settings")} + onClick={() => SettingsManager.Instance.open()}> + +
Settings
+
; } @@ -628,7 +632,8 @@ export class MainView extends React.Component { } @computed get mainContent() { - const n = (RichTextMenu.Instance?.Pinned ? 0 : 0) + (CollectionMenu.Instance?.Pinned ? 1 : 0); + //const n = (RichTextMenu.Instance?.Pinned ? 1 : 0) + (CollectionMenu.Instance?.Pinned ? 1 : 0); + const n = (CollectionMenu.Instance?.Pinned ? 1 : 0); const height = `calc(100% - ${n * Number(ANTIMODEMENU_HEIGHT.replace("px", ""))}px)`; const rightFlyout = this.selectedDocumentView ? this._propertiesWidth - 1 : this.propertiesWidth() > 10 ? 151.5 : 0; @@ -684,7 +689,7 @@ export class MainView extends React.Component { }); @computed get expandButton() { - return !this._flyoutTranslate ? (
) : (null); + return !this._flyoutTranslate ? (
) : (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); @@ -799,7 +804,7 @@ export class MainView extends React.Component { {/* {this.search} */} - {/* */} +
{LinkDescriptionPopup.descriptionPopup ? : null} {DocumentLinksButton.EditLink ? : (null)} {LinkDocPreview.LinkInfo ? { @computed get selectedDoc() { return this.selectedDocumentView?.rootDoc; } @computed get dataDoc() { return this.selectedDocumentView?.dataDoc; } - @observable public onClick = this.selectedDoc?.onClickBehavior ? this.selectedDoc?.onClickBehavior : "nothing"; + @computed get onClick() { return this.selectedDoc?.onClickBehavior ? this.selectedDoc?.onClickBehavior : "nothing"; } public startPullOutcome = action((success: boolean) => { if (!this._pullAnimating) { @@ -379,7 +379,7 @@ export class PropertiesButtons extends React.Component<{}, {}> { @action handleOptionChange = (e: any) => { const value = e.target.value; - this.onClick = e.target.value; + this.selectedDoc?.onClickBehavior = e.target.value; if (value === "nothing") { this.selectedDocumentView?.noOnClick; } else if (value === "enterPortal") { diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index 6b6fc5da2..974dabd5c 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -1268,7 +1268,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp this.doLinkOnDeselect(); // move the richtextmenu offscreen - if (!RichTextMenu.Instance.Pinned) RichTextMenu.Instance.delayHide(); + //if (!RichTextMenu.Instance.Pinned) RichTextMenu.Instance.delayHide(); } _lastTimedMark: Mark | undefined = undefined; -- cgit v1.2.3-70-g09d2 From d4f416ef5715c8f03132244831094f8485c5e6bf Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Mon, 27 Jul 2020 16:57:51 -0500 Subject: onClick functionality and pin change --- src/client/views/PropertiesButtons.tsx | 44 +++++++++++----------- .../collectionFreeForm/PropertiesView.scss | 10 +++++ .../collectionFreeForm/PropertiesView.tsx | 13 +++++++ 3 files changed, 45 insertions(+), 22 deletions(-) (limited to 'src/client/views/PropertiesButtons.tsx') diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx index 1f13d0b07..336cd6ff9 100644 --- a/src/client/views/PropertiesButtons.tsx +++ b/src/client/views/PropertiesButtons.tsx @@ -206,7 +206,7 @@ export class PropertiesButtons extends React.Component<{}, {}> { const isPinned = targetDoc && Doc.isDocPinned(targetDoc); return !targetDoc ? (null) :
{Doc.isDocPinned(targetDoc) ? "Unpin from presentation" : "Pin to presentation"}
}>
DockedFrameRenderer.PinDoc(targetDoc, isPinned)}> @@ -261,10 +261,10 @@ export class PropertiesButtons extends React.Component<{}, {}> { templates.set(template, views.reduce((checked, doc) => checked || doc?.props.Document["_show" + template.Name] ? true : false, false as boolean))); return !docView ? (null) :
Tap: Customize layout. Drag: Create alias
}> -
+
this._aliasDown = true)} onClose={action(() => this._aliasDown = false)} content={!this._aliasDown ? (null) : v).map(v => v as DocumentView)} templates={templates} />}> -
+
{}
@@ -284,7 +284,7 @@ export class PropertiesButtons extends React.Component<{}, {}> { get copyButton() { const targetDoc = this.selectedDoc; return !targetDoc ? (null) :
{"Create an Alias"}
}> -
{}
@@ -302,7 +302,7 @@ export class PropertiesButtons extends React.Component<{}, {}> { return !targetDoc ? (null) :
{this.selectedDoc?.lockedPosition ? "Unlock Position" : "Lock Position"}
}> -
{} @@ -315,13 +315,13 @@ export class PropertiesButtons extends React.Component<{}, {}> { const targetDoc = this.selectedDoc; return !targetDoc ? (null) :
{"Download Document"}
}> -
{ if (this.selectedDocumentView?.props.Document) { Doc.Zip(this.selectedDocumentView?.props.Document); } }}> - {}
; @@ -332,11 +332,11 @@ export class PropertiesButtons extends React.Component<{}, {}> { const targetDoc = this.selectedDoc; return !targetDoc ? (null) :
{"Delete Document"}
}> -
{ this.selectedDocumentView?.props.ContainingCollectionView?.removeDocument(this.selectedDocumentView?.props.Document); }}> - {}
; @@ -347,13 +347,13 @@ export class PropertiesButtons extends React.Component<{}, {}> { const targetDoc = this.selectedDoc; return !targetDoc ? (null) :
{"Share Document"}
}> -
{ if (this.selectedDocumentView) { SharingManager.Instance.open(this.selectedDocumentView); } }}> - {}
; @@ -379,21 +379,21 @@ export class PropertiesButtons extends React.Component<{}, {}> { @action handleOptionChange = (e: any) => { const value = e.target.value; - this.selectedDoc?.onClickBehavior = e.target.value; + this.selectedDoc && (this.selectedDoc.onClickBehavior = e.target.value); if (value === "nothing") { - this.selectedDocumentView?.noOnClick; + this.selectedDocumentView?.noOnClick(); } else if (value === "enterPortal") { - //this.selectedDocumentView?.noOnClick; - this.selectedDocumentView?.makeIntoPortal; + this.selectedDocumentView?.noOnClick(); + this.selectedDocumentView?.makeIntoPortal(); } else if (value === "toggleDetail") { - //this.selectedDocumentView?.noOnClick; - this.selectedDocumentView?.toggleDetail; + this.selectedDocumentView?.noOnClick(); + this.selectedDocumentView?.toggleDetail(); } else if (value === "linkInPlace") { - //this.selectedDocumentView?.noOnClick; - this.selectedDocumentView?.toggleFollowInPlace; + this.selectedDocumentView?.noOnClick(); + this.selectedDocumentView?.toggleFollowInPlace(); } else if (value === "linkOnRight") { - //this.selectedDocumentView?.noOnClick; - this.selectedDocumentView?.toggleFollowOnRight; + this.selectedDocumentView?.noOnClick(); + this.selectedDocumentView?.toggleFollowOnRight(); } } @@ -457,7 +457,7 @@ export class PropertiesButtons extends React.Component<{}, {}> { const targetDoc = this.selectedDoc; return !targetDoc ? (null) :
{"Export to Google Photos"}
}> -
{ if (this.selectedDocumentView) { GooglePhotos.Export.CollectionToAlbum({ collection: this.selectedDocumentView.Document }).then(console.log) diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss index 8cc591875..0701f3b96 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss @@ -196,6 +196,16 @@ } } + .field { + display: flex; + font-size: 7px; + background-color: #e8e8e8; + padding-right: 3px; + border: 0.5px solid grey; + border-radius: 5px; + padding-left: 3px; + } + .propertiesView-layout { padding: 8.5px; diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx index 3b8d782aa..0f59e2f79 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx @@ -113,6 +113,19 @@ export class PropertiesView extends React.Component { {contentElement}
); } + + rows.push(
+ ""} + SetValue={(value: string) => { + value.indexOf(":") !== -1 && KeyValueBox.SetField(doc, value.substring(0, value.indexOf(":")), value.substring(value.indexOf(":") + 1, value.length), true); + return true; + }} /> +
); return rows; } } -- cgit v1.2.3-70-g09d2 From be70f604c9a0a9e623e34826de19455ab8855f5b Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Tue, 28 Jul 2020 11:34:13 -0500 Subject: button redo --- src/client/views/PropertiesButtons.scss | 15 +++++++----- src/client/views/PropertiesButtons.tsx | 28 ++++++++++++---------- src/client/views/collections/CollectionMenu.tsx | 17 +++++++++++-- src/client/views/nodes/DocumentView.tsx | 1 - .../views/nodes/formattedText/RichTextMenu.tsx | 10 ++++---- 5 files changed, 44 insertions(+), 27 deletions(-) (limited to 'src/client/views/PropertiesButtons.tsx') diff --git a/src/client/views/PropertiesButtons.scss b/src/client/views/PropertiesButtons.scss index 037b6b155..11265b413 100644 --- a/src/client/views/PropertiesButtons.scss +++ b/src/client/views/PropertiesButtons.scss @@ -20,13 +20,13 @@ $linkGap : 3px; .propertiesButtons-linkButton-empty, .propertiesButtons-linkButton-nonempty { - height: 20px; - width: 20px; + height: 25px; + width: 25px; border-radius: 5px; opacity: 0.9; pointer-events: auto; - background-color: $dark-color; - color: $light-color; + background-color: #121721; + color: #fcfbf7; text-transform: uppercase; letter-spacing: 2px; font-size: 75%; @@ -35,6 +35,7 @@ $linkGap : 3px; display: flex; justify-content: center; align-items: center; + margin-right: 5px; &:hover { background: $main-accent; @@ -67,17 +68,19 @@ $linkGap : 3px; padding-right: 5px; width: 25px; border-radius: 5px; + margin-right: 8px; } .propertiesButtons-linker { - height: 20px; - width: 20px; + height: 25px; + width: 25px; text-align: center; border-radius: 5px; pointer-events: auto; color: $dark-color; border: $dark-color 1px solid; transition: 0.2s ease all; + margin-right: 5px; } .propertiesButtons-linker:hover { diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx index 336cd6ff9..95d0df14e 100644 --- a/src/client/views/PropertiesButtons.tsx +++ b/src/client/views/PropertiesButtons.tsx @@ -260,11 +260,11 @@ export class PropertiesButtons extends React.Component<{}, {}> { Array.from(Object.values(Templates.TemplateList)).map(template => templates.set(template, views.reduce((checked, doc) => checked || doc?.props.Document["_show" + template.Name] ? true : false, false as boolean))); return !docView ? (null) : -
Tap: Customize layout. Drag: Create alias
}> -
- this._aliasDown = true)} onClose={action(() => this._aliasDown = false)} - content={!this._aliasDown ? (null) : v).map(v => v as DocumentView)} templates={templates} />}> -
+
Customize layout
}> +
+ this._aliasDown = true)} onClose={action(() => this._aliasDown = false)} + content={ v).map(v => v as DocumentView)} templates={templates} />}> +
{}
@@ -283,9 +283,11 @@ export class PropertiesButtons extends React.Component<{}, {}> { @computed get copyButton() { const targetDoc = this.selectedDoc; - return !targetDoc ? (null) :
{"Create an Alias"}
}> + return !targetDoc ? (null) :
{"Tap or Drag to create an alias"}
}>
+ ref={this._dragRef} + onPointerDown={this.onAliasButtonDown} + onClick={this.onCopy}> {}
; @@ -496,14 +498,14 @@ export class PropertiesButtons extends React.Component<{}, {}> {
{this.downloadButton}
-
- {this.deleteButton} -
-
- {this.onClickButton} -
+
+ {this.deleteButton} +
+
+ {this.onClickButton} +
{this.sharingButton}
diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx index 5a7c98f46..1fbaaa08a 100644 --- a/src/client/views/collections/CollectionMenu.tsx +++ b/src/client/views/collections/CollectionMenu.tsx @@ -268,13 +268,26 @@ export class CollectionViewBaseChrome extends React.Component; } + @computed get selectedDocumentView() { + if (SelectionManager.SelectedDocuments().length) { + return SelectionManager.SelectedDocuments()[0]; + } else { return undefined; } + } + @computed get selectedDoc() { return this.selectedDocumentView?.rootDoc; } + @computed get isText() { + if (this.selectedDoc) { + return this.selectedDoc[Doc.LayoutFieldKey(this.selectedDoc)] instanceof RichTextField; + } + else return false; + } + render() { return (
- {this.viewModes} - {this.templateChrome} + {!(this.isText && this.props.type === CollectionViewType.Freeform) ? this.viewModes : null} + {!(this.isText && this.props.type === CollectionViewType.Freeform) ? this.templateChrome : null}
+ +
+
; } @computed get viewModes() { return
-
- - -
+ drop document to apply or drag to create button
} placement="bottom"> +
+ + +
+
; } @@ -332,18 +360,23 @@ export class CollectionViewBaseChrome extends React.Component - -
} - - {this.props.docView.props.ContainingCollectionDoc?._viewType !== CollectionViewType.Freeform ? (null) : } + {Doc.UserDoc().noviceMode ? (null) : + filter documents to show
} placement="bottom"> +
+ +
+ } + + {this.props.docView.props.ContainingCollectionDoc?._viewType !== CollectionViewType.Freeform ? (null) : + Toggle Overlay Layer
} placement="bottom"> + + }
{this.subChrome}
@@ -491,22 +524,26 @@ export class CollectionFreeFormViewChrome extends React.Component {this._draw.map((icon, i) => - )} + {this._title[i]}
} placement="bottom"> + + )}
; } toggleButton = (key: string, value: boolean, setter: () => {}, icon: FontAwesomeIconProps["icon"], ele: JSX.Element | null) => { - return ; + return {key}
} placement="bottom"> + + ; } @computed get widthPicker() { @@ -515,11 +552,13 @@ export class CollectionFreeFormViewChrome extends React.Component {widthPicker} {this._width.map((wid, i) => - )} + change width
} placement="bottom"> + + )}
; } @@ -554,43 +593,42 @@ export class CollectionFreeFormViewChrome extends React.Component; } - @computed get formatPane() { - // return ; - return null; - } - render() { return !this.props.docView.layoutDoc ? (null) :
- {this.props.docView.props.renderDepth !== 0 || this.isText ? (null) : -
+ {this.props.docView.props.renderDepth !== 0 || this.isText ? (null) : Toggle Mini Map
} placement="bottom"> +
+ } - {!!!this.isText ?
- -
: null} - {!!!this.isText ?
this.document.editing = !this.document.editing)} > - {NumCast(this.document.currentFrame)} -
: null} - {!!!this.isText ?
- -
: null} + {!!!this.isText ? Back Frame
} placement="bottom"> +
+ +
+ : null} + {!!!this.isText ? Toggle View All
} placement="bottom"> +
this.document.editing = !this.document.editing)} > + {NumCast(this.document.currentFrame)} +
+ : null} + {!!!this.isText ? Forward Frame
} placement="bottom"> +
+ +
+ : null} {!this.props.isOverlay || this.document.type !== DocumentType.WEB || this.isText ? (null) : - + Use Hypothesis
} placement="bottom"> + + } {(!this.props.isOverlay || this.props.docView.layoutDoc.isAnnotating) && !this.isText ? <> @@ -598,7 +636,6 @@ export class CollectionFreeFormViewChrome extends React.Component : (null) } diff --git a/src/client/views/globalCssVariables.scss b/src/client/views/globalCssVariables.scss index 3e54d001b..4c79a7c2f 100644 --- a/src/client/views/globalCssVariables.scss +++ b/src/client/views/globalCssVariables.scss @@ -9,10 +9,10 @@ $main-accent: #aaaaa3; //$alt-accent: #59dff7; $alt-accent: #c2c2c5; $lighter-alt-accent: rgb(207, 220, 240); -$darker-alt-accent: rgb(178, 206, 248); +$darker-alt-accent: #b2cef8; $intermediate-color: #9c9396; $dark-color: #121721; -$link-color: lightBlue; +$link-color: #add8e6; $antimodemenu-height: 35px; // fonts $sans-serif: "Noto Sans", diff --git a/src/client/views/nodes/formattedText/RichTextMenu.tsx b/src/client/views/nodes/formattedText/RichTextMenu.tsx index 85cc5c1a1..d7eb73bb4 100644 --- a/src/client/views/nodes/formattedText/RichTextMenu.tsx +++ b/src/client/views/nodes/formattedText/RichTextMenu.tsx @@ -617,8 +617,11 @@ export default class RichTextMenu extends AntimodeMenu { label = "No marks are currently stored"; } + //onPointerDown={onBrushClick} + const button = style brush
} placement="bottom"> - ; @@ -631,7 +634,7 @@ export default class RichTextMenu extends AntimodeMenu {
; return ( - + ); } @@ -690,8 +693,9 @@ export default class RichTextMenu extends AntimodeMenu { self.TextView.EditorView!.focus(); } + // onPointerDown={onColorClick} const button = set font color
} placement="bottom"> - @@ -712,7 +716,7 @@ export default class RichTextMenu extends AntimodeMenu {
; return ( - + ); } @@ -744,8 +748,9 @@ export default class RichTextMenu extends AntimodeMenu { UndoManager.RunInBatch(() => self.view && self.insertHighlight(self.activeHighlightColor, self.view.state, self.view.dispatch), "rt highlighter"); } + //onPointerDown={onHighlightClick} const button = set highlight color
} placement="bottom"> - @@ -766,7 +771,7 @@ export default class RichTextMenu extends AntimodeMenu {
; return ( - + ); } @@ -789,7 +794,7 @@ export default class RichTextMenu extends AntimodeMenu { const link = this.currentLink ? this.currentLink : ""; const button = set hyperlink
} placement="bottom"> -
+
; const dropdownContent = @@ -801,7 +806,8 @@ export default class RichTextMenu extends AntimodeMenu {
; - return ; + return ; } async getTextLinkTargetTitle() { @@ -1001,6 +1007,7 @@ interface ButtonDropdownProps { button: JSX.Element; dropdownContent: JSX.Element; openDropdownOnButton?: boolean; + link?: boolean; } @observer @@ -1043,18 +1050,10 @@ export class ButtonDropdown extends React.Component { render() { return (
this.ref = node}> - {this.props.openDropdownOnButton ? - : - <> - {this.props.button} - - } - + {this.showDropdown ? this.props.dropdownContent : (null)}
); -- cgit v1.2.3-70-g09d2 From f4940b063a512e15723d62671b8e11619b1bfcd7 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Mon, 3 Aug 2020 10:19:39 -0500 Subject: fix double click on left pane --- src/client/util/CurrentUserUtils.ts | 1 + src/client/views/PropertiesButtons.tsx | 20 ++++++++++++++++++++ .../views/collections/CollectionDockingView.scss | 2 -- .../views/collections/ParentDocumentSelector.scss | 15 +++++++++++---- src/client/views/nodes/FontIconBox.tsx | 3 ++- 5 files changed, 34 insertions(+), 7 deletions(-) (limited to 'src/client/views/PropertiesButtons.tsx') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index c27290e74..3aa13d535 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -531,6 +531,7 @@ export class CurrentUserUtils { stayInCollection: true, _width: 60, _height: 60, + onDoubleClick: ScriptField.MakeScript('console.log("hi")', { scriptContext: "any" }), onClick: ScriptField.MakeScript(click, { scriptContext: "any" }), })); diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx index 68969b413..d46c03470 100644 --- a/src/client/views/PropertiesButtons.tsx +++ b/src/client/views/PropertiesButtons.tsx @@ -550,6 +550,23 @@ export class PropertiesButtons extends React.Component<{}, {}> { ; } + @computed + get contextButton() { + if (this.selectedDoc) { + return
Show Context
}> +
+ { + where === "onRight" ? CollectionDockingView.AddRightSplit(doc) : + this.selectedDocumentView?.props.addDocTab(doc, "onRight"); + return true; + }} /> +
+ ; + } else { + return false; + } + + } // @computed // get importButton() { @@ -605,6 +622,9 @@ export class PropertiesButtons extends React.Component<{}, {}> {
{this.onClickButton}
+ {/*
+ {this.contextButton} +
*/}
{this.sharingButton}
diff --git a/src/client/views/collections/CollectionDockingView.scss b/src/client/views/collections/CollectionDockingView.scss index 27d66f796..4ec1c51cf 100644 --- a/src/client/views/collections/CollectionDockingView.scss +++ b/src/client/views/collections/CollectionDockingView.scss @@ -86,8 +86,6 @@ width: 18px; display: inline-block; margin: auto; - - display: none; } .collectionDockingView-dragAsDocument { diff --git a/src/client/views/collections/ParentDocumentSelector.scss b/src/client/views/collections/ParentDocumentSelector.scss index 4e704b58f..bc9cf4848 100644 --- a/src/client/views/collections/ParentDocumentSelector.scss +++ b/src/client/views/collections/ParentDocumentSelector.scss @@ -2,11 +2,13 @@ div { overflow: visible !important; } + .metadataEntry-outerDiv { overflow: hidden !important; pointer-events: all; } } + .parentDocumentSelector-flyout { position: relative; z-index: 9999; @@ -31,26 +33,31 @@ border-left: 0px; } } + .parentDocumentSelector-button { - pointer-events: all; + pointer-events: all; position: relative; display: inline-block; + svg { - width:20px !important; - height:20px; + // width:20px !important; + //height:20px; } } + .parentDocumentSelector-metadata { pointer-events: auto; padding-right: 5px; width: 25px; display: inline-block; } + .buttonSelector { div { overflow: visible !important; } - display: inline-block; + + display: inline-block; width:100%; height:100%; } \ No newline at end of file diff --git a/src/client/views/nodes/FontIconBox.tsx b/src/client/views/nodes/FontIconBox.tsx index 7c538df92..48f9d7cc6 100644 --- a/src/client/views/nodes/FontIconBox.tsx +++ b/src/client/views/nodes/FontIconBox.tsx @@ -6,7 +6,7 @@ import { DocComponent } from '../DocComponent'; import './FontIconBox.scss'; import { FieldView, FieldViewProps } from './FieldView'; import { StrCast, Cast, NumCast } from '../../../fields/Types'; -import { Utils } from "../../../Utils"; +import { Utils, emptyFunction } from "../../../Utils"; import { runInAction, observable, reaction, IReactionDisposer } from 'mobx'; import { Doc } from '../../../fields/Doc'; import { ContextMenu } from '../ContextMenu'; @@ -75,6 +75,7 @@ export class FontIconBox extends DocComponent( const color = CurrentUserUtils.selectedPanel === this.dataDoc.title ? "black" : "white"; const menuBTN =
Date: Mon, 3 Aug 2020 18:10:55 -0500 Subject: menu buttons and other UI changes --- src/client/views/MainView.scss | 3 +- src/client/views/MainView.tsx | 4 +- src/client/views/PropertiesButtons.scss | 30 +- src/client/views/PropertiesButtons.tsx | 351 ++++++++++++--------- .../collectionFreeForm/PropertiesView.scss | 2 +- .../collectionFreeForm/PropertiesView.tsx | 176 ++++++----- 6 files changed, 320 insertions(+), 246 deletions(-) (limited to 'src/client/views/PropertiesButtons.tsx') diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss index a57d22afd..e9e700ba8 100644 --- a/src/client/views/MainView.scss +++ b/src/client/views/MainView.scss @@ -155,7 +155,7 @@ .mainView-menuPanel { width: 60px; - background-color: black; + background-color: #121721; height: 100%; //overflow-y: scroll; //overflow-x: hidden; @@ -165,6 +165,7 @@ padding: 7px; padding-left: 7px; width: 100%; + background: black; .mainView-menuPanel-button-wrap { width: 45px; diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index ca5154ef7..93cc95ba4 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -415,10 +415,10 @@ export class MainView extends React.Component { if (!this.sidebarContent) return null; return
- {this.flyoutWidth > 0 ?
0 ?
-
: null} +
: null} */} { const targetDoc = this.selectedDoc; const published = targetDoc && Doc.GetProto(targetDoc)[GoogleRef] !== undefined; const animation = this.isAnimatingPulse ? "shadow-pulse 1s linear infinite" : "none"; - return !targetDoc ? (null) :
{`${published ? "Push" : "Publish"} to Google Docs`}
}> -
{ - await GoogleAuthenticationManager.Instance.fetchOrGenerateAccessToken(); - !published && runInAction(() => this.isAnimatingPulse = true); - PropertiesButtons.hasPushedHack = false; - targetDoc[Pushes] = NumCast(targetDoc[Pushes]) + 1; - }}> - -
; + return !targetDoc ? (null) :
{`${published ? "Push" : "Publish"} to Google Docs`}
} placement="top"> +
+
{ + await GoogleAuthenticationManager.Instance.fetchOrGenerateAccessToken(); + !published && runInAction(() => this.isAnimatingPulse = true); + PropertiesButtons.hasPushedHack = false; + targetDoc[Pushes] = NumCast(targetDoc[Pushes]) + 1; + }}> + +
+
Google
+
+ ; } @computed @@ -158,74 +162,88 @@ export class PropertiesButtons extends React.Component<{}, {}> { })(); return !targetDoc || !dataDoc || !dataDoc[GoogleRef] ? (null) :
{title}
}> -
{ - if (e.altKey) { - this.openHover = UtilityButtonState.OpenExternally; - } else if (e.shiftKey) { - this.openHover = UtilityButtonState.OpenRight; - } - })} - onPointerLeave={action(() => this.openHover = UtilityButtonState.Default)} - onClick={async e => { - const googleDocUrl = `https://docs.google.com/document/d/${dataDoc[GoogleRef]}/edit`; - if (e.shiftKey) { - e.preventDefault(); - let googleDoc = await Cast(dataDoc.googleDoc, Doc); - if (!googleDoc) { - const options = { _width: 600, _nativeWidth: 960, _nativeHeight: 800, isAnnotating: false, UseCors: false }; - googleDoc = Docs.Create.WebDocument(googleDocUrl, options); - dataDoc.googleDoc = googleDoc; + title={<>
{title}
} placement="top"> +
+
{ + if (e.altKey) { + this.openHover = UtilityButtonState.OpenExternally; + } else if (e.shiftKey) { + this.openHover = UtilityButtonState.OpenRight; } - CollectionDockingView.AddRightSplit(googleDoc); - } else if (e.altKey) { - e.preventDefault(); - window.open(googleDocUrl); - } else { - this.clearPullColor(); - PropertiesButtons.hasPulledHack = false; - targetDoc[Pulls] = NumCast(targetDoc[Pulls]) + 1; - dataDoc.unchanged && runInAction(() => this.isAnimatingFetch = true); - } - }}> - { - switch (this.openHover) { - default: - case UtilityButtonState.Default: return dataDoc.unchanged === false ? (this.pullIcon as any) : fetch; - case UtilityButtonState.OpenRight: return "arrow-alt-circle-right"; - case UtilityButtonState.OpenExternally: return "share"; + })} + onPointerLeave={action(() => this.openHover = UtilityButtonState.Default)} + onClick={async e => { + const googleDocUrl = `https://docs.google.com/document/d/${dataDoc[GoogleRef]}/edit`; + if (e.shiftKey) { + e.preventDefault(); + let googleDoc = await Cast(dataDoc.googleDoc, Doc); + if (!googleDoc) { + const options = { _width: 600, _nativeWidth: 960, _nativeHeight: 800, isAnnotating: false, UseCors: false }; + googleDoc = Docs.Create.WebDocument(googleDocUrl, options); + dataDoc.googleDoc = googleDoc; + } + CollectionDockingView.AddRightSplit(googleDoc); + } else if (e.altKey) { + e.preventDefault(); + window.open(googleDocUrl); + } else { + this.clearPullColor(); + PropertiesButtons.hasPulledHack = false; + targetDoc[Pulls] = NumCast(targetDoc[Pulls]) + 1; + dataDoc.unchanged && runInAction(() => this.isAnimatingFetch = true); } - })()} - /> -
; + }}> + { + switch (this.openHover) { + default: + case UtilityButtonState.Default: return dataDoc.unchanged === false ? (this.pullIcon as any) : fetch; + case UtilityButtonState.OpenRight: return "arrow-alt-circle-right"; + case UtilityButtonState.OpenExternally: return "share"; + } + })()} + /> +
+
Fetch
+
+ ; } @computed get pinButton() { const targetDoc = this.selectedDoc; const isPinned = targetDoc && Doc.isDocPinned(targetDoc); - return !targetDoc ? (null) :
{Doc.isDocPinned(targetDoc) ? "Unpin from presentation" : "Pin to presentation"}
}> -
DockedFrameRenderer.PinDoc(targetDoc, isPinned)}> - -
; + return !targetDoc ? (null) :
{Doc.isDocPinned(targetDoc) ? "Unpin from presentation" : + "Pin to presentation"}
} placement="top"> +
+
DockedFrameRenderer.PinDoc(targetDoc, isPinned)}> + +
+ +
{Doc.isDocPinned(targetDoc) ? "Unpin" : "Pin"}
+
+ ; } @computed get metadataButton() { //const view0 = this.view0; if (this.selectedDoc) { - return
Show metadata panel
}> + return
Show metadata panel
} placement="top">
/* tfs: @bcz This might need to be the data document? */}> -
e.stopPropagation()} > - {} +
+
e.stopPropagation()} > + {} +
+
Metadata
; @@ -264,12 +282,15 @@ export class PropertiesButtons extends React.Component<{}, {}> { Array.from(Object.values(Templates.TemplateList)).map(template => templates.set(template, views.reduce((checked, doc) => checked || doc?.props.Document["_show" + template.Name] ? true : false, false as boolean))); return !docView ? (null) : -
Customize layout
}> +
Customize layout
} placement="top">
this._aliasDown = true)} onClose={action(() => this._aliasDown = false)} content={ v).map(v => v as DocumentView)} templates={templates} />}> -
- {} +
+
+ {} +
+
Layout
; @@ -292,12 +313,15 @@ export class PropertiesButtons extends React.Component<{}, {}> { @computed get copyButton() { const targetDoc = this.selectedDoc; - return !targetDoc ? (null) :
{"Tap or Drag to create an alias"}
}> -
- {} + return !targetDoc ? (null) :
{"Tap or Drag to create an alias"}
} placement="top"> +
+
+ {} +
+
Alias
; } @@ -312,11 +336,14 @@ export class PropertiesButtons extends React.Component<{}, {}> { const targetDoc = this.selectedDoc; return !targetDoc ? (null) :
{this.selectedDoc?.lockedPosition ? - "Unlock Position" : "Lock Position"}
}> -
- {} + "Unlock Position" : "Lock Position"}
} placement="top"> +
+
+ {} +
+
Position
; } @@ -325,15 +352,18 @@ export class PropertiesButtons extends React.Component<{}, {}> { get downloadButton() { const targetDoc = this.selectedDoc; return !targetDoc ? (null) :
{"Download Document"}
}> -
{ - if (this.selectedDocumentView?.props.Document) { - Doc.Zip(this.selectedDocumentView?.props.Document); - } - }}> - {} + title={<>
{"Download Document"}
} placement="top"> +
+
{ + if (this.selectedDocumentView?.props.Document) { + Doc.Zip(this.selectedDocumentView?.props.Document); + } + }}> + {} +
+
downld
; } @@ -342,11 +372,14 @@ export class PropertiesButtons extends React.Component<{}, {}> { get deleteButton() { const targetDoc = this.selectedDoc; return !targetDoc ? (null) :
{"Delete Document"}
}> -
- {} + title={<>
{"Delete Document"}
} placement="top"> +
+
+ {} +
+
delete
; } @@ -361,15 +394,18 @@ export class PropertiesButtons extends React.Component<{}, {}> { get sharingButton() { const targetDoc = this.selectedDoc; return !targetDoc ? (null) :
{"Share Document"}
}> -
{ - if (this.selectedDocumentView) { - SharingManager.Instance.open(this.selectedDocumentView); - } - }}> - {} + title={<>
{"Share Document"}
} placement="top"> +
+
{ + if (this.selectedDocumentView) { + SharingManager.Instance.open(this.selectedDocumentView); + } + }}> + {} +
+
share
; } @@ -377,15 +413,19 @@ export class PropertiesButtons extends React.Component<{}, {}> { @computed get onClickButton() { if (this.selectedDoc) { - return
Choose onClick behavior
}> -
- -
e.stopPropagation()} > - {} -
- -
; + return
Choose onClick behavior
} placement="top"> +
+
+ +
e.stopPropagation()} > + {} +
+ +
+
onclick
+
+ ; } else { return null; } @@ -472,15 +512,18 @@ export class PropertiesButtons extends React.Component<{}, {}> { get googlePhotosButton() { const targetDoc = this.selectedDoc; return !targetDoc ? (null) :
{"Export to Google Photos"}
}> -
{ - if (this.selectedDocumentView) { - GooglePhotos.Export.CollectionToAlbum({ collection: this.selectedDocumentView.Document }).then(console.log); - } - }}> - {} + title={<>
{"Export to Google Photos"}
} placement="top"> +
+
{ + if (this.selectedDocumentView) { + GooglePhotos.Export.CollectionToAlbum({ collection: this.selectedDocumentView.Document }).then(console.log); + } + }}> + {} +
+
google
; } @@ -489,13 +532,16 @@ export class PropertiesButtons extends React.Component<{}, {}> { get clustersButton() { const targetDoc = this.selectedDoc; return !targetDoc ? (null) :
{this.selectedDoc?.useClusters ? "Stop Showing Clusters" : "Show Clusters"}
}> -
- {} + title={<>
{this.selectedDoc?.useClusters ? "Stop Showing Clusters" : "Show Clusters"}
} placement="top"> +
+
+ {} +
+
clusters
; } @@ -514,13 +560,16 @@ export class PropertiesButtons extends React.Component<{}, {}> { get fitContentButton() { const targetDoc = this.selectedDoc; return !targetDoc ? (null) :
{this.selectedDoc?._fitToBox ? "Stop Fitting Content" : "Fit Content"}
}> -
- {} + title={<>
{this.selectedDoc?._fitToBox ? "Stop Fitting Content" : "Fit Content"}
} placement="top"> +
+
+ {} +
+
{this.selectedDoc?._fitToBox ? "unfit" : "fit"}
; } @@ -541,11 +590,14 @@ export class PropertiesButtons extends React.Component<{}, {}> { get maskButton() { const targetDoc = this.selectedDoc; return !targetDoc ? (null) :
Make Mask
}> -
- {} + title={<>
Make Mask
} placement="top"> +
+
+ {} +
+
mask
; } @@ -553,13 +605,16 @@ export class PropertiesButtons extends React.Component<{}, {}> { @computed get contextButton() { if (this.selectedDoc) { - return
Show Context
}> -
- { - where === "onRight" ? CollectionDockingView.AddRightSplit(doc) : - this.selectedDocumentView?.props.addDocTab(doc, "onRight"); - return true; - }} /> + return
Show Context
} placement="top"> +
+
+ { + where === "onRight" ? CollectionDockingView.AddRightSplit(doc) : + this.selectedDocumentView?.props.addDocTab(doc, "onRight"); + return true; + }} /> +
+
context
; } else { @@ -622,9 +677,6 @@ export class PropertiesButtons extends React.Component<{}, {}> {
{this.onClickButton}
- {/*
- {this.contextButton} -
*/}
{this.sharingButton}
@@ -652,6 +704,9 @@ export class PropertiesButtons extends React.Component<{}, {}> {
{this.maskButton}
+
+ {this.contextButton} +
; } diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss index 7df56115f..aede3842e 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss @@ -41,7 +41,7 @@ font-size: 12.5px; &:hover { - cursor: pointer; + cursor: text; } } diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx index f5e0cd077..9c5b8f81d 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx @@ -59,6 +59,8 @@ export class PropertiesView extends React.Component { @observable openAppearance: boolean = true; @observable openTransform: boolean = true; + @observable inActions: boolean = false; + @computed get isInk() { return this.selectedDoc?.type === DocumentType.INK; } @action @@ -736,115 +738,119 @@ export class PropertiesView extends React.Component { return
No Document Selected -
- -
-
+
; - } - const novice = Doc.UserDoc().noviceMode; + } else { + + const novice = Doc.UserDoc().noviceMode; - return
-
- Properties -
+ return
+
+ Properties + {/*
+
*/}
-
-
- {this.editableTitle} -
-
-
runInAction(() => { this.openActions = !this.openActions; })} - style={{ backgroundColor: this.openActions ? "black" : "" }}> - Actions +
+ {this.editableTitle} +
+
runInAction(() => { this.inActions = true; })} + onPointerLeave={() => runInAction(() => { this.inActions = false; })}> +
runInAction(() => { this.openActions = !this.openActions; })} + style={{ backgroundColor: this.openActions ? "black" : "" }}> + Actions
- + +
+ {!this.openActions ? (null) : +
+ +
}
- {!this.openActions ? (null) : -
- -
} -
-
-
runInAction(() => { this.openSharing = !this.openSharing; })} - style={{ backgroundColor: this.openSharing ? "black" : "" }}> - Sharing {"&"} Permissions +
+
runInAction(() => { this.openSharing = !this.openSharing; })} + style={{ backgroundColor: this.openSharing ? "black" : "" }}> + Sharing {"&"} Permissions
- + +
+ {!this.openSharing ? (null) : +
+ {this.sharingTable} +
}
- {!this.openSharing ? (null) : -
- {this.sharingTable} -
} -
- {!this.isInk ? (null) : -
-
runInAction(() => { this.openAppearance = !this.openAppearance; })} - style={{ backgroundColor: this.openAppearance ? "black" : "" }}> - Appearance + {!this.isInk ? (null) : +
+
runInAction(() => { this.openAppearance = !this.openAppearance; })} + style={{ backgroundColor: this.openAppearance ? "black" : "" }}> + Appearance
- + +
-
- {!this.openAppearance ? (null) : -
- {this.appearanceEditor} -
} -
} + {!this.openAppearance ? (null) : +
+ {this.appearanceEditor} +
} +
} - {this.isInk ?
-
runInAction(() => { this.openTransform = !this.openTransform; })} - style={{ backgroundColor: this.openTransform ? "black" : "" }}> - Transform + {this.isInk ?
+
runInAction(() => { this.openTransform = !this.openTransform; })} + style={{ backgroundColor: this.openTransform ? "black" : "" }}> + Transform
- + +
-
- {this.openTransform ?
- {this.transformEditor} + {this.openTransform ?
+ {this.transformEditor} +
: null}
: null} -
: null} - -
-
runInAction(() => { this.openFields = !this.openFields; })} - style={{ backgroundColor: this.openFields ? "black" : "" }}> -
- Fields {"&"} Tags + +
+
runInAction(() => { this.openFields = !this.openFields; })} + style={{ backgroundColor: this.openFields ? "black" : "" }}> +
+ Fields {"&"} Tags
- + +
+ {!novice && this.openFields ?
+ {this.fieldsCheckbox} +
Layout
+
: null} + {!this.openFields ? (null) : +
+ {novice ? this.noviceFields : this.expandedField} +
}
- {!novice && this.openFields ?
- {this.fieldsCheckbox} -
Layout
-
: null} - {!this.openFields ? (null) : -
- {novice ? this.noviceFields : this.expandedField} -
} -
-
-
runInAction(() => { this.openLayout = !this.openLayout; })} - style={{ backgroundColor: this.openLayout ? "black" : "" }}> - Layout +
+
runInAction(() => { this.openLayout = !this.openLayout; })} + style={{ backgroundColor: this.openLayout ? "black" : "" }}> + Layout
runInAction(() => { this.openLayout = !this.openLayout; })}> - + +
+ {this.openLayout ?
{this.layoutPreview}
: null}
- {this.openLayout ?
{this.layoutPreview}
: null} -
-
; +
; + + } } } \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 4051758f3cef5e353cb24c699f4594fa4be81758 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Tue, 4 Aug 2020 13:10:13 -0500 Subject: several UI changes and consistency updates around the system --- src/client/views/ContextMenu.scss | 5 ++++- src/client/views/DocumentButtonBar.scss | 8 ++++++-- src/client/views/DocumentButtonBar.tsx | 2 +- src/client/views/MainView.tsx | 4 ++-- src/client/views/PropertiesButtons.tsx | 2 +- src/client/views/collections/CollectionLinearView.scss | 2 +- src/client/views/collections/CollectionMenu.tsx | 2 +- src/client/views/collections/CollectionTreeView.scss | 15 +++++++++++---- .../collections/collectionFreeForm/PropertiesView.scss | 11 +++++++++++ .../collections/collectionFreeForm/PropertiesView.tsx | 4 ++-- src/client/views/linking/LinkEditor.scss | 3 ++- src/client/views/linking/LinkEditor.tsx | 6 +++--- src/client/views/nodes/DocumentLinksButton.scss | 8 +++++++- src/client/views/nodes/DocumentLinksButton.tsx | 8 ++++---- src/client/views/nodes/FontIconBox.scss | 5 +++++ src/client/views/nodes/FontIconBox.tsx | 18 ++++++++---------- 16 files changed, 69 insertions(+), 34 deletions(-) (limited to 'src/client/views/PropertiesButtons.tsx') diff --git a/src/client/views/ContextMenu.scss b/src/client/views/ContextMenu.scss index 86e0a568a..7467bc043 100644 --- a/src/client/views/ContextMenu.scss +++ b/src/client/views/ContextMenu.scss @@ -7,7 +7,7 @@ box-shadow: $intermediate-color 0.2vw 0.2vw 0.4vw; flex-direction: column; background: whitesmoke; - padding-top: 10px; + padding-top: 10px; padding-bottom: 10px; border-radius: 15px; border: solid #BBBBBBBB 1px; @@ -72,6 +72,7 @@ margin-left: 5px; } } + .contextMenu-description { // width: 11vw; //10vw background: whitesmoke; @@ -100,6 +101,8 @@ border-color: $intermediate-color; // rgb(187, 186, 186); border-bottom-style: solid; border-top-style: solid; + + cursor: pointer; } .contextMenu-itemSelected { diff --git a/src/client/views/DocumentButtonBar.scss b/src/client/views/DocumentButtonBar.scss index c2ca93900..09ae14016 100644 --- a/src/client/views/DocumentButtonBar.scss +++ b/src/client/views/DocumentButtonBar.scss @@ -64,9 +64,13 @@ $linkGap : 3px; text-align: center; border-radius: 50%; pointer-events: auto; - color: $dark-color; - border: $dark-color 1px solid; + background-color: $dark-color; + border: none; transition: 0.2s ease all; + + &:hover { + background-color: $main-accent; + } } .documentButtonBar-linker:hover { diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx index d45531b76..8748b1880 100644 --- a/src/client/views/DocumentButtonBar.tsx +++ b/src/client/views/DocumentButtonBar.tsx @@ -198,7 +198,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV const isPinned = targetDoc && Doc.isDocPinned(targetDoc); return !targetDoc ? (null) :
{Doc.isDocPinned(targetDoc) ? "Unpin from presentation" : "Pin to presentation"}
}>
DockedFrameRenderer.PinDoc(targetDoc, isPinned)}> diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index a544c52d2..e9b9be49d 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -553,7 +553,7 @@ export class MainView extends React.Component {
{this.flyoutWidth !== 0 ?
+ style={{ backgroundColor: '#8c8b8b' }}>
- +
: null}
{ title={<>
{this.selectedDoc?._fitToBox ? "Stop Fitting Content" : "Fit Content"}
} placement="top">
{ { button['target-docFilters'] = this.target._docFilters instanceof ObjectField ? ObjectField.MakeCopy(this.target._docFilters as any as ObjectField) : ""; }, }; - @computed get _freeform_commands() { return Doc.UserDoc().noviceMode ? [this._viewCommand, this._saveFilterCommand] : [this._viewCommand, this._saveFilterCommand, this._contentCommand, this._templateCommand, this._narrativeCommand]; } + @computed get _freeform_commands() { return Doc.UserDoc().noviceMode ? [this._viewCommand] : [this._viewCommand, this._saveFilterCommand, this._contentCommand, this._templateCommand, this._narrativeCommand]; } @computed get _stacking_commands() { return Doc.UserDoc().noviceMode ? undefined : [this._contentCommand, this._templateCommand]; } @computed get _masonry_commands() { return Doc.UserDoc().noviceMode ? undefined : [this._contentCommand, this._templateCommand]; } @computed get _schema_commands() { return Doc.UserDoc().noviceMode ? undefined : [this._templateCommand, this._narrativeCommand]; } diff --git a/src/client/views/collections/CollectionTreeView.scss b/src/client/views/collections/CollectionTreeView.scss index 50f0534bd..c9bf82406 100644 --- a/src/client/views/collections/CollectionTreeView.scss +++ b/src/client/views/collections/CollectionTreeView.scss @@ -22,7 +22,7 @@ ul { list-style: none; padding-left: 20px; - margin-bottom: 1px;// otherwise vertical scrollbars may pop up for no apparent reason.... + margin-bottom: 1px; // otherwise vertical scrollbars may pop up for no apparent reason.... } @@ -35,7 +35,7 @@ width: 15px; color: $intermediate-color; margin-top: 3px; - transform: scale(1.3, 1.3); + transform: scale(1.3, 1.3); border: #80808030 1px solid; border-radius: 4px; } @@ -67,8 +67,10 @@ margin-left: 3px; display: none; } + .collectionTreeView-keyHeader:hover { background: #797777; + cursor: pointer; } .collectionTreeView-subtitle { @@ -89,8 +91,10 @@ height: 17px; width: 15px; } + .treeViewItem-openRight:hover { background: #797777; + cursor: pointer; } .treeViewItem-border { @@ -106,10 +110,12 @@ .editableView-container-editing-oneLine { min-width: 15px; } + .documentView-node-topmost { width: unset; } - > svg { + + >svg { display: none; } @@ -119,7 +125,8 @@ .collectionTreeView-keyHeader { display: inherit; } - > svg { + + >svg { display: inherit; } diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss index aede3842e..9560de2f5 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss @@ -641,4 +641,15 @@ margin-top: 2px; } } +} + +.editable-title { + border: none; + padding: 6px; + padding-bottom: 2px; + + + &:hover { + border: 0.75px solid rgb(122, 28, 28); + } } \ No newline at end of file diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx index f04c5159c..e2e026ca2 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx @@ -358,13 +358,13 @@ export class PropertiesView extends React.Component { } @computed get editableTitle() { - return StrCast(this.selectedDoc?.title)} - SetValue={this.setTitle} />; + SetValue={this.setTitle} />
; } @undoBatch diff --git a/src/client/views/linking/LinkEditor.scss b/src/client/views/linking/LinkEditor.scss index d26b7920a..7e6999cdc 100644 --- a/src/client/views/linking/LinkEditor.scss +++ b/src/client/views/linking/LinkEditor.scss @@ -89,7 +89,7 @@ /* float: right; */ border-radius: 7px; font-size: 9px; - background-color: black; + background: black; /* padding: 3px; */ padding-top: 4px; padding-left: 7px; @@ -100,6 +100,7 @@ &:hover { cursor: pointer; + background: grey; } } } diff --git a/src/client/views/linking/LinkEditor.tsx b/src/client/views/linking/LinkEditor.tsx index 660afd4b9..75fc8bf85 100644 --- a/src/client/views/linking/LinkEditor.tsx +++ b/src/client/views/linking/LinkEditor.tsx @@ -287,7 +287,7 @@ export class LinkEditor extends React.Component { @observable openDropdown: boolean = false; @observable showInfo: boolean = false; @computed get infoIcon() { if (this.showInfo) { return "chevron-up"; } return "chevron-down"; } - @observable private buttonColor: string = "black"; + @observable private buttonColor: string = ""; //@observable description = this.props.linkDoc.description ? StrCast(this.props.linkDoc.description) : "DESCRIPTION"; @@ -303,7 +303,7 @@ export class LinkEditor extends React.Component { if (LinkManager.currentLink) { LinkManager.currentLink.description = value; this.buttonColor = "rgb(62, 133, 55)"; - setTimeout(action(() => this.buttonColor = "black"), 750); + setTimeout(action(() => this.buttonColor = ""), 750); return true; } } @@ -345,7 +345,7 @@ export class LinkEditor extends React.Component { >
Set
; } diff --git a/src/client/views/nodes/DocumentLinksButton.scss b/src/client/views/nodes/DocumentLinksButton.scss index 97e714cd5..9328fb96b 100644 --- a/src/client/views/nodes/DocumentLinksButton.scss +++ b/src/client/views/nodes/DocumentLinksButton.scss @@ -28,7 +28,13 @@ } .documentLinksButton { - background-color: $link-color; + background-color: black; + + &:hover { + background: $main-accent; + transform: scale(1.05); + cursor: pointer; + } } .documentLinksButton-endLink { diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx index 4713ce447..7899ff0f0 100644 --- a/src/client/views/nodes/DocumentLinksButton.tsx +++ b/src/client/views/nodes/DocumentLinksButton.tsx @@ -181,7 +181,7 @@ export class DocumentLinksButton extends React.Component
- {DocumentLinksButton.StartLink && this.props.InMenu && !this.props.StartLink && - DocumentLinksButton.StartLink !== this.props.View ?
; return (!links.length) && !this.props.AlwaysOn ? (null) : - this.props.InMenu ? + this.props.InMenu && (DocumentLinksButton.StartLink || this.props.StartLink) ?
{title}
}> {linkButton} : !!!DocumentLinksButton.EditLink && !this.props.InMenu ? diff --git a/src/client/views/nodes/FontIconBox.scss b/src/client/views/nodes/FontIconBox.scss index 5bdafd857..9709e1dbd 100644 --- a/src/client/views/nodes/FontIconBox.scss +++ b/src/client/views/nodes/FontIconBox.scss @@ -15,12 +15,17 @@ .menuButton-round { border-radius: 100%; + background-color: black; .fontIconBox-label { margin-left: -10px; // button padding is 10px; bottom: 0; position: absolute; } + + &:hover { + background-color: #aaaaa3; + } } .menuButton-square { diff --git a/src/client/views/nodes/FontIconBox.tsx b/src/client/views/nodes/FontIconBox.tsx index eff5a4160..c0eb78d98 100644 --- a/src/client/views/nodes/FontIconBox.tsx +++ b/src/client/views/nodes/FontIconBox.tsx @@ -63,16 +63,14 @@ export class FontIconBox extends DocComponent( const color = StrCast(this.layoutDoc.color, this._foregroundColor); const backgroundColor = StrCast(this.layoutDoc._backgroundColor, StrCast(this.rootDoc.backgroundColor, this.props.backgroundColor?.(this.rootDoc))); const shape = StrCast(this.layoutDoc.iconShape, "round"); - const button = <> - - ; + const button = ; return !this.layoutDoc.toolTip ? button : {StrCast(this.layoutDoc.toolTip)}
}> {button} -- cgit v1.2.3-70-g09d2 From 217bb86beceed8f48ffe81cea0dbc578cb57a431 Mon Sep 17 00:00:00 2001 From: bobzel Date: Wed, 5 Aug 2020 10:31:11 -0400 Subject: fixed some warnings/errors. added tooltip for filter icon. --- .../apis/HypothesisAuthenticationManager.tsx | 2 +- src/client/views/PropertiesButtons.tsx | 28 +++---- src/client/views/collections/CollectionMenu.tsx | 48 ++++++------ .../collectionGrid/CollectionGridView.tsx | 2 +- src/client/views/nodes/WebBox.tsx | 2 +- src/client/views/search/SearchBox.tsx | 85 +++++++++------------- src/server/websocket.ts | 3 +- 7 files changed, 77 insertions(+), 93 deletions(-) (limited to 'src/client/views/PropertiesButtons.tsx') diff --git a/src/client/apis/HypothesisAuthenticationManager.tsx b/src/client/apis/HypothesisAuthenticationManager.tsx index c3e8d2fff..bc95b5f9a 100644 --- a/src/client/apis/HypothesisAuthenticationManager.tsx +++ b/src/client/apis/HypothesisAuthenticationManager.tsx @@ -18,7 +18,7 @@ export default class HypothesisAuthenticationManager extends React.Component<{}> @observable private showPasteTargetState = false; @observable private success: Opt = undefined; @observable private displayLauncher = true; - @observable private credentials: string; + @observable private credentials: string = ""; private disposer: Opt; private set isOpen(value: boolean) { diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx index d46c03470..033bd7791 100644 --- a/src/client/views/PropertiesButtons.tsx +++ b/src/client/views/PropertiesButtons.tsx @@ -28,7 +28,6 @@ import { GooglePhotos } from '../apis/google_docs/GooglePhotosClientUtils'; import { ImageField } from '../../fields/URLField'; import { undoBatch, UndoManager } from '../util/UndoManager'; import { DocumentType } from '../documents/DocumentTypes'; -import { CollectionFreeFormView } from './collections/collectionFreeForm/CollectionFreeFormView'; import { InkField } from '../../fields/InkField'; const higflyout = require("@hig/flyout"); export const { anchorPoints } = higflyout; @@ -128,18 +127,19 @@ export class PropertiesButtons extends React.Component<{}, {}> { const targetDoc = this.selectedDoc; const published = targetDoc && Doc.GetProto(targetDoc)[GoogleRef] !== undefined; const animation = this.isAnimatingPulse ? "shadow-pulse 1s linear infinite" : "none"; - return !targetDoc ? (null) :
{`${published ? "Push" : "Publish"} to Google Docs`}
}> -
{ - await GoogleAuthenticationManager.Instance.fetchOrGenerateAccessToken(); - !published && runInAction(() => this.isAnimatingPulse = true); - PropertiesButtons.hasPushedHack = false; - targetDoc[Pushes] = NumCast(targetDoc[Pushes]) + 1; - }}> - -
; + return !targetDoc ? (null) : +
{`${published ? "Push" : "Publish"} to Google Docs`}
}> +
{ + await GoogleAuthenticationManager.Instance.fetchOrGenerateAccessToken(); + !published && runInAction(() => this.isAnimatingPulse = true); + PropertiesButtons.hasPushedHack = false; + targetDoc[Pushes] = NumCast(targetDoc[Pushes]) + 1; + }}> + +
+ ; } @computed @@ -377,7 +377,7 @@ export class PropertiesButtons extends React.Component<{}, {}> { @computed get onClickButton() { if (this.selectedDoc) { - return
Choose onClick behavior
}> + return Choose onClick behavior
}>
diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx index a7d2c07fa..4eb0088f6 100644 --- a/src/client/views/collections/CollectionMenu.tsx +++ b/src/client/views/collections/CollectionMenu.tsx @@ -1,37 +1,35 @@ import React = require("react"); +import { IconProp } from '@fortawesome/fontawesome-svg-core'; import { FontAwesomeIcon, FontAwesomeIconProps } from "@fortawesome/react-fontawesome"; -import { action, computed, observable, reaction, runInAction, Lambda } from "mobx"; +import { Tooltip } from "@material-ui/core"; +import { action, computed, Lambda, observable, reaction, runInAction } from "mobx"; import { observer } from "mobx-react"; -import { Doc, DocListCast, Opt, Field } from "../../../fields/Doc"; -import { BoolCast, Cast, StrCast, NumCast } from "../../../fields/Types"; -import AntimodeMenu from "../AntimodeMenu"; -import "./CollectionMenu.scss"; -import { undoBatch } from "../../util/UndoManager"; -import { CollectionViewType, CollectionView, COLLECTION_BORDER_WIDTH } from "./CollectionView"; -import { emptyFunction, setupMoveUpEvents, Utils } from "../../../Utils"; -import { DragManager } from "../../util/DragManager"; -import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView"; -import { List } from "../../../fields/List"; -import { EditableView } from "../EditableView"; +import { ColorState } from "react-color"; +import { Doc, DocListCast, Opt } from "../../../fields/Doc"; +import { Document } from "../../../fields/documentSchemas"; import { Id } from "../../../fields/FieldSymbols"; -import { listSpec } from "../../../fields/Schema"; -import FormatShapePane from "./collectionFreeForm/FormatShapePane"; -import { ActiveFillColor, SetActiveInkWidth, ActiveInkColor, SetActiveBezierApprox, SetActiveArrowEnd, SetActiveArrowStart, SetActiveFillColor, SetActiveInkColor } from "../InkingStroke"; -import GestureOverlay from "../GestureOverlay"; import { InkTool } from "../../../fields/InkField"; -import { DocumentType } from "../../documents/DocumentTypes"; -import { Document } from "../../../fields/documentSchemas"; -import { SelectionManager } from "../../util/SelectionManager"; -import { DocumentView } from "../nodes/DocumentView"; -import { ColorState } from "react-color"; +import { List } from "../../../fields/List"; import { ObjectField } from "../../../fields/ObjectField"; -import RichTextMenu from "../nodes/formattedText/RichTextMenu"; import { RichTextField } from "../../../fields/RichTextField"; +import { listSpec } from "../../../fields/Schema"; import { ScriptField } from "../../../fields/ScriptField"; -import { IconProp } from '@fortawesome/fontawesome-svg-core'; -import { DocUtils } from "../../documents/Documents"; -import { Tooltip } from "@material-ui/core"; +import { BoolCast, Cast, NumCast, StrCast } from "../../../fields/Types"; +import { emptyFunction, setupMoveUpEvents, Utils } from "../../../Utils"; +import { DocumentType } from "../../documents/DocumentTypes"; import { CurrentUserUtils } from "../../util/CurrentUserUtils"; +import { DragManager } from "../../util/DragManager"; +import { SelectionManager } from "../../util/SelectionManager"; +import { undoBatch } from "../../util/UndoManager"; +import AntimodeMenu from "../AntimodeMenu"; +import { EditableView } from "../EditableView"; +import GestureOverlay from "../GestureOverlay"; +import { ActiveFillColor, ActiveInkColor, SetActiveArrowEnd, SetActiveArrowStart, SetActiveBezierApprox, SetActiveFillColor, SetActiveInkColor, SetActiveInkWidth } from "../InkingStroke"; +import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView"; +import { DocumentView } from "../nodes/DocumentView"; +import RichTextMenu from "../nodes/formattedText/RichTextMenu"; +import "./CollectionMenu.scss"; +import { CollectionViewType, COLLECTION_BORDER_WIDTH } from "./CollectionView"; @observer export default class CollectionMenu extends AntimodeMenu { diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx index 21f77e47b..e6ac7021a 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx +++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx @@ -240,7 +240,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { w: Math.min(w, this.numCols), // reduces width if greater than numCols static: BoolCast(this.childLayoutPairs.find(({ layout }) => layout[Id] === i)?.layout.lockedPosition, false) // checks if the lock position item has been selected in the context menu })) : - this.savedLayoutList.map((layout, index) => Object.assign(layout, this.unflexedPosition(index))); + this.savedLayoutList.map((layout, index) => { Object.assign(layout, this.unflexedPosition(index)); return layout; }); } /** diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx index 646a94aa7..3283f568a 100644 --- a/src/client/views/nodes/WebBox.tsx +++ b/src/client/views/nodes/WebBox.tsx @@ -536,7 +536,7 @@ export class WebBox extends ViewBoxAnnotatableComponent { // creates annotation documents for current highlights const effectiveAcl = GetEffectiveAcl(this.props.Document); - const annotationDoc = [AclAddonly, AclEdit, AclAdmin].includes(effectiveAcl) && this.makeAnnotationDocument(color); + const annotationDoc = [AclAddonly, AclEdit, AclAdmin].includes(effectiveAcl) ? this.makeAnnotationDocument(color) : undefined; annotationDoc && this.addDocument?.(annotationDoc); return annotationDoc ?? undefined; } diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index 097e6c4d9..812658b32 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -1,4 +1,5 @@ -import * as _ from "lodash"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { Tooltip } from '@material-ui/core'; import { action, computed, observable, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; @@ -15,7 +16,6 @@ import { Docs } from '../../documents/Documents'; import { DocumentType } from "../../documents/DocumentTypes"; import { CurrentUserUtils } from '../../util/CurrentUserUtils'; import { SetupDrag } from '../../util/DragManager'; -import { Scripting, _scriptingGlobals } from '../../util/Scripting'; import { SearchUtil } from '../../util/SearchUtil'; import { SelectionManager } from '../../util/SelectionManager'; import { Transform } from '../../util/Transform'; @@ -24,7 +24,6 @@ import { ViewBoxBaseComponent } from "../DocComponent"; import { DocumentView } from '../nodes/DocumentView'; import { FieldView, FieldViewProps } from '../nodes/FieldView'; import "./SearchBox.scss"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; export const searchSchema = createSchema({ id: "string", @@ -771,57 +770,43 @@ export class SearchBox extends ViewBoxBaseComponent StrCast(this.layoutDoc._searchString) ? this.startDragCollection() : undefined)} icon={"search"} size="lg" style={{ color: "black", padding: 1, left: 35, position: "relative" }} /> - { e.stopPropagation(); SetupDrag(this.collectionRef, () => StrCast(this.layoutDoc._searchString) ? this.startDragCollection() : undefined); }} - onClick={action(() => { - this.filter = !this.filter && !this.searchFullDB; - if (this.filter === true && this.currentSelectedCollection !== undefined) { - this.currentSelectedCollection.props.Document._searchDocs = new List(this.docsforfilter); - let newarray: Doc[] = []; - let docs: Doc[] = []; - docs = DocListCast(this.currentSelectedCollection.dataDoc[Doc.LayoutFieldKey(this.currentSelectedCollection.dataDoc)]); - while (docs.length > 0) { - newarray = []; - docs.forEach((d) => { - if (d.data !== undefined) { - d._searchDocs = new List(this.docsforfilter); - const newdocs = DocListCast(d.data); - newdocs.forEach((newdoc) => { - newarray.push(newdoc); +
+ only display documents matching search
} >
+ { e.stopPropagation(); SetupDrag(this.collectionRef, () => StrCast(this.layoutDoc._searchString) ? this.startDragCollection() : undefined); }} + onClick={action(() => { + const dofilter = (currentSelectedCollection: DocumentView) => { + let docs = DocListCast(currentSelectedCollection.dataDoc[Doc.LayoutFieldKey(currentSelectedCollection.dataDoc)]); + while (docs.length > 0) { + const newarray: Doc[] = []; + docs.filter(d => d.data !== undefined).forEach((d) => { + d._searchDocs = new List(this.docsforfilter); + newarray.push(...DocListCast(d.data)); }); + docs = newarray; } - }); - docs = newarray; - } + }; + this.filter = !this.filter && !this.searchFullDB; + if (this.filter === true && this.currentSelectedCollection !== undefined) { + this.currentSelectedCollection.props.Document._searchDocs = new List(this.docsforfilter); - this.currentSelectedCollection.props.Document._docFilters = new List(Cast(this.props.Document._docFilters, listSpec("string"), [])); - this.props.Document.selectedDoc = this.currentSelectedCollection.props.Document; - } - else if (this.filter === false && this.currentSelectedCollection !== undefined) { - let newarray: Doc[] = []; - let docs: Doc[] = []; - docs = DocListCast(this.currentSelectedCollection.dataDoc[Doc.LayoutFieldKey(this.currentSelectedCollection.dataDoc)]); - while (docs.length > 0) { - newarray = []; - docs.forEach((d) => { - if (d.data !== undefined) { - d._searchDocs = new List(); - const newdocs = DocListCast(d.data); - newdocs.forEach((newdoc) => { - newarray.push(newdoc); - }); - } - }); - docs = newarray; - } + dofilter(this.currentSelectedCollection); - this.currentSelectedCollection.props.Document._searchDocs = new List([]); - this.currentSelectedCollection.props.Document._docFilters = undefined; - this.props.Document.selectedDoc = undefined; - } - } - )} /> + this.currentSelectedCollection.props.Document._docFilters = new List(Cast(this.props.Document._docFilters, listSpec("string"), [])); + this.props.Document.selectedDoc = this.currentSelectedCollection.props.Document; + } + else if (this.filter === false && this.currentSelectedCollection !== undefined) { + + dofilter(this.currentSelectedCollection); + + this.currentSelectedCollection.props.Document._searchDocs = new List([]); + this.currentSelectedCollection.props.Document._docFilters = undefined; + this.props.Document.selectedDoc = undefined; + } + } + )} /> +
diff --git a/src/server/websocket.ts b/src/server/websocket.ts index 2c8ec090a..24371a997 100644 --- a/src/server/websocket.ts +++ b/src/server/websocket.ts @@ -16,6 +16,7 @@ import { DocumentsCollection } from "./IDatabase"; import { Diff, GestureContent, MessageStore, MobileDocumentUploadContent, MobileInkOverlayContent, Transferable, Types, UpdateMobileInkOverlayPositionContent, YoutubeQueryInput, YoutubeQueryTypes } from "./Message"; import { Search } from "./Search"; import { resolvedPorts } from './server_Initialization'; +import { Opt } from "../fields/Doc"; export namespace WebSocket { @@ -31,7 +32,7 @@ export namespace WebSocket { if (socketPort) { resolvedPorts.socket = Number(socketPort); } - let socketEndpoint: Server; + let socketEndpoint: Opt; await new Promise(resolve => socketEndpoint = createServer(SSL.Credentials, app).listen(resolvedPorts.socket, resolve)); io = sio(socketEndpoint!, SSL.Credentials as any); } else { -- cgit v1.2.3-70-g09d2 From 0d6a6991ae39406f80530bcaaa6e5b328bd64b67 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Wed, 5 Aug 2020 12:59:07 -0500 Subject: UI changes and bug fixes found with UV --- src/client/util/CurrentUserUtils.ts | 3 ++- src/client/util/SettingsManager.scss | 20 ++++++++++++---- src/client/util/SettingsManager.tsx | 13 +++++----- src/client/views/MainView.tsx | 7 ++++++ src/client/views/MainViewModal.tsx | 6 +---- src/client/views/PropertiesButtons.tsx | 28 +++++++++++++++++----- src/client/views/collections/CollectionMenu.tsx | 9 +++---- .../collectionFreeForm/PropertiesView.tsx | 3 +-- 8 files changed, 60 insertions(+), 29 deletions(-) (limited to 'src/client/views/PropertiesButtons.tsx') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 95e02b5fd..630952ccf 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -8,7 +8,7 @@ import { Doc, DocListCast, DocListCastAsync, DataSym } from "../../fields/Doc"; import { List } from "../../fields/List"; import { listSpec } from "../../fields/Schema"; import { ScriptField, ComputedField } from "../../fields/ScriptField"; -import { Cast, PromiseValue, StrCast, NumCast } from "../../fields/Types"; +import { Cast, PromiseValue, StrCast, NumCast, BoolCast } from "../../fields/Types"; import { nullAudio } from "../../fields/URLField"; import { DragManager } from "./DragManager"; import { Scripting } from "./Scripting"; @@ -891,6 +891,7 @@ export class CurrentUserUtils { doc.fontColor = StrCast(doc.fontColor, "black"); doc.fontHighlight = StrCast(doc.fontHighlight, ""); doc.defaultColor = StrCast(doc.defaultColor, "white"); + doc.noviceMode = BoolCast(doc.noviceMode, true); doc["constants-snapThreshold"] = NumCast(doc["constants-snapThreshold"], 10); // doc["constants-dragThreshold"] = NumCast(doc["constants-dragThreshold"], 4); // Utils.DRAG_THRESHOLD = NumCast(doc["constants-dragThreshold"]); diff --git a/src/client/util/SettingsManager.scss b/src/client/util/SettingsManager.scss index 2a4a4241c..41bce8a1b 100644 --- a/src/client/util/SettingsManager.scss +++ b/src/client/util/SettingsManager.scss @@ -25,8 +25,15 @@ .settings-title { font-size: 25px; font-weight: bold; + padding-right: 10px; + color: black; +} + +.settings-username { + font-size: 14px; padding-right: 15px; color: black; + margin-top: 10px; } .settings-section { @@ -94,7 +101,7 @@ color: black; border-radius: 5px; - &:hover{ + &:hover { cursor: pointer; } } @@ -104,7 +111,8 @@ .playground-check { margin-right: 5px; - &:hover{ + + &:hover { cursor: pointer; } } @@ -119,7 +127,7 @@ margin-top: 2px; margin-right: 25px; - &:hover{ + &:hover { cursor: pointer; } @@ -162,7 +170,8 @@ font-size: 9; margin-right: 6; border-radius: 5px; - &:hover{ + + &:hover { cursor: pointer; } } @@ -172,7 +181,8 @@ color: black; font-size: 9; border-radius: 5px; - &:hover{ + + &:hover { cursor: pointer; } } diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx index a12cc2cb6..fce28a466 100644 --- a/src/client/util/SettingsManager.tsx +++ b/src/client/util/SettingsManager.tsx @@ -147,9 +147,9 @@ export default class SettingsManager extends React.Component<{}> { const passwordContent =
- - - + + +
{this.errorText ?
{this.errorText}
: undefined} @@ -233,7 +233,9 @@ export default class SettingsManager extends React.Component<{}> { return (
Settings
-
@@ -268,8 +270,7 @@ export default class SettingsManager extends React.Component<{}> { isDisplayed={this.isOpen} interactive={true} closeOnExternalClick={this.close} - width={600} - height={340} + dialogueBoxStyle={{ width: "600px", height: "340px" }} /> ); } diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index bbf36a04f..4bbcddd79 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -315,6 +315,12 @@ export class MainView extends React.Component { if (this.panelContent === doc?.title) return "lightgrey"; if (doc?.type === DocumentType.COL) { + if (doc.title === "Basic Item Creators" || doc.title === "sidebar-tools" + || doc.title === "sidebar-recentlyClosed" || doc.title === "sidebar-catalog" + || doc.title === "Mobile Uploads" || doc.title === "COLLECTION_PROTO" + || doc.title === "Advanced Item Prototypes" || doc.title === "all Creators") { + return "lightgrey"; + } return StrCast(Doc.UserDoc().defaultColor); } if (this.darkScheme) { @@ -450,6 +456,7 @@ export class MainView extends React.Component { ContainingCollectionView={undefined} ContainingCollectionDoc={undefined} relative={true} + forcedBackgroundColor={() => "lightgrey"} />
{this.docButtons}
; diff --git a/src/client/views/MainViewModal.tsx b/src/client/views/MainViewModal.tsx index c7b752b60..19387f619 100644 --- a/src/client/views/MainViewModal.tsx +++ b/src/client/views/MainViewModal.tsx @@ -10,8 +10,6 @@ export interface MainViewOverlayProps { overlayStyle?: React.CSSProperties; dialogueBoxDisplayedOpacity?: number; overlayDisplayedOpacity?: number; - width?: number; - height?: number; closeOnExternalClick?: () => void; // the close method of a MainViewModal, triggered if there is a click on the overlay (closing the modal) } @@ -31,9 +29,7 @@ export default class MainViewModal extends React.Component style={{ borderColor: "black", ...(p.dialogueBoxStyle || {}), - opacity: p.isDisplayed ? dialogueOpacity : 0, - width: this.props.width ? this.props.width : "auto", - height: this.props.height ? this.props.height : "auto" + opacity: p.isDisplayed ? dialogueOpacity : 0 }} >{p.contents}
{ } }}> { switch (this.openHover) { @@ -207,7 +208,7 @@ export class PropertiesButtons extends React.Component<{}, {}> { })()} />
-
Fetch
+
Fetch
; } @@ -226,7 +227,11 @@ export class PropertiesButtons extends React.Component<{}, {}> { />
-
{Doc.isDocPinned(targetDoc) ? "Unpin" : "Pin"}
+
{Doc.isDocPinned(targetDoc) ? "Unpin" : "Pin"}
; } @@ -339,11 +344,16 @@ export class PropertiesButtons extends React.Component<{}, {}> { "Unlock Position" : "Lock Position"}
} placement="top">
{}
-
Position
+
Position
; } @@ -535,13 +545,16 @@ export class PropertiesButtons extends React.Component<{}, {}> { title={<>
{this.selectedDoc?.useClusters ? "Stop Showing Clusters" : "Show Clusters"}
} placement="top">
{}
-
clusters
+
clusters
; } @@ -569,7 +582,10 @@ export class PropertiesButtons extends React.Component<{}, {}> { color={this.selectedDoc?._fitToBox ? "black" : "white"} icon="expand" size="lg" />}
-
{this.selectedDoc?._fitToBox ? "unfit" : "fit"}
+
{this.selectedDoc?._fitToBox ? "unfit" : "fit"}
; } diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx index 511735f2d..6eed4eba1 100644 --- a/src/client/views/collections/CollectionMenu.tsx +++ b/src/client/views/collections/CollectionMenu.tsx @@ -673,15 +673,16 @@ export class CollectionStackingViewChrome extends React.Component key.indexOf("title") >= 0 || key.indexOf("author") >= 0 || key.indexOf("creationDate") >= 0 || key.indexOf("lastModified") >= 0 || - (key[0].toUpperCase() === key[0] && key.substring(0, 3) !== "ACL")); - return keys.filter(key => key.toLowerCase().startsWith(value)); + (key[0].toUpperCase() === key[0] && key.substring(0, 3) !== "ACL" && key !== "UseCors" && key[0] !== "_")); + return keys.filter(key => key.toLowerCase().indexOf(value.toLowerCase()) > -1); } else { const keys = new Set(); docs.forEach(doc => Doc.allKeys(doc).forEach(key => keys.add(key))); const noviceKeys = Array.from(keys).filter(key => key.indexOf("title") >= 0 || key.indexOf("author") >= 0 || key.indexOf("creationDate") >= 0 || - key.indexOf("lastModified") >= 0 || (key[0].toUpperCase() === key[0] && key.substring(0, 3) !== "ACL")); - return noviceKeys.filter(key => key.toLowerCase().startsWith(value)); + key.indexOf("lastModified") >= 0 || (key[0].toUpperCase() === key[0] && + key.substring(0, 3) !== "ACL" && key !== "UseCors" && key[0] !== "_")); + return noviceKeys.filter(key => key.toLowerCase().indexOf(value.toLowerCase()) > -1); } } diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx index a6b1849b1..7f21c63da 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx @@ -161,7 +161,7 @@ export class PropertiesView extends React.Component { doc && Object.keys(doc).forEach(key => !(key in ids) && doc[key] !== ComputedField.undefined && (ids[key] = key)); const rows: JSX.Element[] = []; for (const key of Object.keys(ids).slice().sort()) { - if ((key[0] === key[0].toUpperCase() && key.substring(0, 3) !== "ACL") + if ((key[0] === key[0].toUpperCase() && key.substring(0, 3) !== "ACL" && key !== "UseCors") || key[0] === "#" || key === "author" || key === "creationDate" || key.indexOf("lastModified") !== -1) { @@ -354,7 +354,6 @@ export class PropertiesView extends React.Component { />; } - @undoBatch @action toggleCheckbox = () => { this.layoutFields = !this.layoutFields; -- cgit v1.2.3-70-g09d2 From fa0b28c300416621dec25407484fc2606a736e2a Mon Sep 17 00:00:00 2001 From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com> Date: Thu, 6 Aug 2020 05:11:18 +0800 Subject: automatic text progressivize, ui changes, bug fixes --- src/client/documents/Documents.ts | 2 + src/client/views/PropertiesButtons.tsx | 37 ++- .../views/collections/CollectionDockingView.scss | 8 +- .../views/collections/CollectionDockingView.tsx | 2 +- .../views/collections/CollectionStackingView.tsx | 12 +- .../collectionFreeForm/CollectionFreeFormView.tsx | 4 +- .../collectionFreeForm/PropertiesView.tsx | 4 +- .../views/nodes/CollectionFreeFormDocumentView.tsx | 20 +- src/client/views/nodes/PresBox.scss | 56 +++- src/client/views/nodes/PresBox.tsx | 337 ++++++++------------- .../views/nodes/formattedText/FormattedTextBox.tsx | 65 ++++ .../views/presentationview/PresElementBox.scss | 35 ++- .../views/presentationview/PresElementBox.tsx | 49 ++- 13 files changed, 386 insertions(+), 245 deletions(-) (limited to 'src/client/views/PropertiesButtons.tsx') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 539341b62..57fcf3a00 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -129,6 +129,7 @@ export interface DocumentOptions { isLinkButton?: boolean; _columnWidth?: number; _fontSize?: string; + _fontWeight?: number; _fontFamily?: string; curPage?: number; currentTimecode?: number; // the current timecode of a time-based document (e.g., current time of a video) value is in seconds @@ -139,6 +140,7 @@ export interface DocumentOptions { appearFrame?: number; // the frame in which the document appears presTransition?: number; //the time taken for the transition TO a document presDuration?: number; //the duration of the slide in presentation view + presProgressivize?: boolean; // xArray?: number[]; // yArray?: number[]; borderRounding?: string; diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx index d46c03470..7d8a75dda 100644 --- a/src/client/views/PropertiesButtons.tsx +++ b/src/client/views/PropertiesButtons.tsx @@ -30,6 +30,7 @@ import { undoBatch, UndoManager } from '../util/UndoManager'; import { DocumentType } from '../documents/DocumentTypes'; import { CollectionFreeFormView } from './collections/collectionFreeForm/CollectionFreeFormView'; import { InkField } from '../../fields/InkField'; +import { PresBox } from './nodes/PresBox'; const higflyout = require("@hig/flyout"); export const { anchorPoints } = higflyout; export const Flyout = higflyout.default; @@ -209,13 +210,44 @@ export class PropertiesButtons extends React.Component<{}, {}> { const isPinned = targetDoc && Doc.isDocPinned(targetDoc); return !targetDoc ? (null) :
{Doc.isDocPinned(targetDoc) ? "Unpin from presentation" : "Pin to presentation"}
}>
DockedFrameRenderer.PinDoc(targetDoc, isPinned)}>
; } + @computed + get pinWithViewButton() { + const targetDoc = this.selectedDoc; + const isPinned = targetDoc && Doc.isDocPinned(targetDoc); + if (targetDoc) { + const x = targetDoc._panX; + const y = targetDoc._panY; + const scale = targetDoc._viewScale; + } + return !targetDoc ? (null) :
{"Pin with this view"}
}> +
{ + if (targetDoc) { + DockedFrameRenderer.PinDoc(targetDoc, false); + const activeDoc = PresBox.Instance.childDocs[PresBox.Instance.childDocs.length - 1]; + const x = targetDoc._panX; + const y = targetDoc._panY; + const scale = targetDoc._viewScale; + activeDoc.presPinView = true; + activeDoc.presPinViewX = x; + activeDoc.presPinViewY = y; + activeDoc.presPinViewScale = scale; + } + }}> +
V
+ +
; + } + + @computed get metadataButton() { //const view0 = this.view0; @@ -607,6 +639,9 @@ export class PropertiesButtons extends React.Component<{}, {}> {
{this.pinButton}
+
+ {this.pinWithViewButton} +
{this.copyButton}
diff --git a/src/client/views/collections/CollectionDockingView.scss b/src/client/views/collections/CollectionDockingView.scss index 857f751d3..98babc3d2 100644 --- a/src/client/views/collections/CollectionDockingView.scss +++ b/src/client/views/collections/CollectionDockingView.scss @@ -45,7 +45,7 @@ .miniPres-button-text { display: flex; - height: 30; + height: 20; font-weight: 400; min-width: 100%; border-radius: 5px; @@ -55,15 +55,15 @@ } .miniPres-divider { - width: 1px; + width: 0.5px; height: 80%; border-right: solid 2px #5a5a5a; } .miniPres-button { display: flex; - height: 30; - min-width: 30; + height: 20; + min-width: 20; border-radius: 100%; align-items: center; justify-content: center; diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 9c85bd0a2..bc88236dd 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -871,7 +871,7 @@ export class DockedFrameRenderer extends React.Component { } renderMiniPres() { return
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index e00bdb065..fe3d57bdb 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -184,7 +184,7 @@ export class CollectionStackingView extends CollectionSubView(StackingDocument) if (found) { const top = found.getBoundingClientRect().top; const localTop = this.props.ScreenToLocalTransform().transformPoint(0, top); - smoothScroll(doc.presTransition ? Number(doc.presTransition) : 500, this._mainCont!, localTop[1] + this._mainCont!.scrollTop); + smoothScroll(doc.presTransition || doc.presTransition === 0 ? NumCast(doc.presTransition) : 500, this._mainCont!, localTop[1] + this._mainCont!.scrollTop); } afterFocus && setTimeout(() => { if (afterFocus?.()) { } @@ -291,20 +291,19 @@ export class CollectionStackingView extends CollectionSubView(StackingDocument) const docs = this.childDocList; if (docs) { newDocs.map((doc, i) => { + console.log(doc.title); if (i === 0) { if (targInd === -1) targInd = docs.length; else targInd = docs.indexOf(this.filteredChildren[targInd]); const srcInd = docs.indexOf(doc); docs.splice(srcInd, 1); docs.splice((targInd > srcInd ? targInd - 1 : targInd) + plusOne, 0, doc); - } else { + } else if (i < (newDocs.length / 2)) { //glr: for some reason dragged documents are duplicated if (targInd === -1) targInd = docs.length; - else targInd = docs.indexOf(this.filteredChildren[targInd]); + else targInd = docs.indexOf(newDocs[0]) + 1; const srcInd = docs.indexOf(doc); - const firstInd = docs.indexOf(newDocs[0]); docs.splice(srcInd, 1); - // docs.splice((targInd > srcInd ? targInd - 1 : targInd) + plusOne, 0, doc); - docs.splice(firstInd + 1, 0, doc); + docs.splice((targInd > srcInd ? targInd - 1 : targInd) + plusOne, 0, doc); } }); } @@ -312,6 +311,7 @@ export class CollectionStackingView extends CollectionSubView(StackingDocument) } return false; } + @undoBatch @action onExternalDrop = async (e: React.DragEvent): Promise => { diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 109808956..65cd28742 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -911,8 +911,8 @@ export class CollectionFreeFormView extends CollectionSubView { if (this.isPres) { return
- Presentation Toolbar + Presentation
@@ -922,7 +922,7 @@ export class PropertiesView extends React.Component {
runInAction(() => { this.openSlideOptions = !this.openSlideOptions; })} style={{ backgroundColor: this.openSlideOptions ? "black" : "" }}> -   {PresBox.Instance.stringType} options +     {PresBox.Instance.stringType} options
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index c29547eac..35ed6c5a5 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -107,6 +107,15 @@ export class CollectionFreeFormDocumentView extends DocComponent(windexed); d["opacity-indexed"] = new List(oindexed); d["scroll-indexed"] = new List(scrollIndexed); + if (d.appearFrame) { + if (d.appearFrame === timecode + 1) { + d["text-color"] = "red"; + } else if (d.appearFrame < timecode + 1) { + d["text-color"] = "grey"; + } else { d["text-color"] = "black"; } + } else if (d.appearFrame === 0) { + d["text-color"] = "black"; + } } public static updateScrollframe(doc: Doc, time: number) { @@ -139,6 +148,15 @@ export class CollectionFreeFormDocumentView extends DocComponent docs.forEach(doc => doc.dataTransition = "inherit"), 1010); @@ -166,7 +184,7 @@ export class CollectionFreeFormDocumentView extends DocComponent { - if (!doc.appearFrame) doc.appearFrame = i; + if (doc.appearFrame === undefined) doc.appearFrame = i; const curTimecode = progressivize ? i : timecode; const xlist = new List(numberRange(timecode + 1).map(i => undefined) as any as number[]); const ylist = new List(numberRange(timecode + 1).map(i => undefined) as any as number[]); diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss index 089f69873..16821f5bc 100644 --- a/src/client/views/nodes/PresBox.scss +++ b/src/client/views/nodes/PresBox.scss @@ -754,8 +754,6 @@ } .presBox-button { - margin-right: 2.5px; - margin-left: 2.5px; height: 25px; border-radius: 5px; display: none; @@ -787,13 +785,65 @@ min-width: 100px; width: 100px; position: absolute; - right: 8px; + right: 10px; .present-icon { margin-right: 7px; } } + + .miniPresOverlay { + background-color: #323232; + color: white; + border-radius: 5px; + grid-template-rows: 100%; + height: 25; + width: 200; + justify-content: space-evenly; + align-items: center; + display: flex; + position: absolute; + right: 10px; + + .miniPres-button-text { + display: flex; + height: 20; + width: max-content; + font-family: Roboto; + font-weight: 400; + letter-spacing: normal; + border-radius: 5px; + align-items: center; + justify-content: center; + transition: all 0.3s; + } + + .miniPres-divider { + width: 0.5px; + height: 80%; + border-right: solid 1px #5a5a5a; + } + + .miniPres-button { + display: flex; + height: 20; + min-width: 20; + border-radius: 100%; + align-items: center; + justify-content: center; + transition: all 0.3s; + } + + .miniPres-button:hover { + background-color: #5a5a5a; + } + + .miniPres-button-text:hover { + background-color: #5a5a5a; + } + } + .collectionViewBaseChrome-viewPicker { diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index 2389d3875..1caefdc57 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -97,7 +97,10 @@ export class PresBox extends ViewBoxBaseComponent @action next = () => { this.updateCurrentPresentation(); + const activeNext = Cast(this.childDocs[this.itemIndex + 1], Doc, null); const presTargetDoc = Cast(this.childDocs[this.itemIndex].presentationTargetDoc, Doc, null); + const childDocs = DocListCast(presTargetDoc[Doc.LayoutFieldKey(presTargetDoc)]); + const currentFrame = Cast(presTargetDoc.currentFrame, "number", null); const lastFrame = Cast(presTargetDoc.lastFrame, "number", null); const curFrame = NumCast(presTargetDoc.currentFrame); let internalFrames: boolean = false; @@ -107,8 +110,10 @@ export class PresBox extends ViewBoxBaseComponent presTargetDoc._viewTransition = "all 1s"; setTimeout(() => presTargetDoc._viewTransition = undefined, 1010); presTargetDoc.currentFrame = curFrame + 1; + if (presTargetDoc.scrollProgressivize) CollectionFreeFormDocumentView.updateScrollframe(presTargetDoc, currentFrame); + if (presTargetDoc.presProgressivize) CollectionFreeFormDocumentView.updateKeyframe(childDocs, currentFrame || 0); if (presTargetDoc.zoomProgressivize) this.zoomProgressivizeNext(presTargetDoc); - // Case 2: No more frames in current doc and next slide is defined, therefore move to next slide + // Case 2: Audio or video therefore wait to play the audio or video before moving on } else if ((presTargetDoc.type === DocumentType.VID || presTargetDoc.type === DocumentType.AUDIO) && !this._moveOnFromAudio) { if (presTargetDoc.type === DocumentType.AUDIO) { AudioBox.Instance.playFrom(0); @@ -117,7 +122,15 @@ export class PresBox extends ViewBoxBaseComponent if (presTargetDoc.type === DocumentType.VID) { this._moveOnFromAudio = true; } - } else if (this.childDocs[this.itemIndex + 1] !== undefined) { + // Case 3: No more frames in current doc and next slide is defined, therefore move to next slide + } else if (activeNext !== undefined) { + if (!presTargetDoc.presProgressivize) { + const nextTagDoc = Cast(this.childDocs[this.itemIndex + 1].presentationTargetDoc, Doc, null); + const nextChildDocs = DocListCast(nextTagDoc[Doc.LayoutFieldKey(presTargetDoc)]); + nextChildDocs.forEach((doc, i) => { + doc.opacity = 1; + }) + } const nextSelected = this.itemIndex + 1; this.gotoDocument(nextSelected, this.itemIndex); this._moveOnFromAudio = false; @@ -130,15 +143,8 @@ export class PresBox extends ViewBoxBaseComponent this.updateCurrentPresentation(); const docAtCurrent = this.childDocs[this.itemIndex]; if (docAtCurrent) { - //check if any of the group members had used zooming in including the current document - //If so making sure to zoom out, which goes back to state before zooming action let prevSelected = this.itemIndex; - let didZoom = docAtCurrent.zoomButton; - // for (; !didZoom && prevSelected > 0 && this.childDocs[prevSelected].groupButton; prevSelected--) { - // didZoom = this.childDocs[prevSelected].zoomButton; - // } prevSelected = Math.max(0, prevSelected - 1); - this.gotoDocument(prevSelected, this.itemIndex); } } @@ -159,19 +165,11 @@ export class PresBox extends ViewBoxBaseComponent const panelWidth: number = srcDocView.props.PanelWidth(); const panelHeight: number = srcDocView.props.PanelHeight(); console.log("srcDocView: " + srcDocView.props.PanelWidth()); - // console.log("layoutdoc._width: " + layoutdoc._width); - // console.log("srcContext._width: " + srcContext._width); const newPanX = NumCast(presTargetDoc.x) + NumCast(layoutdoc._width) / 2; const newPanY = NumCast(presTargetDoc.y) + NumCast(layoutdoc._height) / 2; - // const newPanX = NumCast(presTargetDoc.x) + panelWidth / 2; - // const newPanY = NumCast(presTargetDoc.y) + panelHeight / 2; let newScale = 0.9 * Math.min(Number(panelWidth) / vfWidth, Number(panelHeight) / vfHeight); - // srcContext._panX = newPanX + (NumCast(presTargetDoc._viewScale) * this.checkList(presTargetDoc, presTargetDoc["viewfinder-left-indexed"]) + NumCast(presTargetDoc._panX) + (this.checkList(presTargetDoc, presTargetDoc["viewfinder-width-indexed"]) / 2)); - // srcContext._panY = newPanY + (NumCast(presTargetDoc._viewScale) * this.checkList(presTargetDoc, presTargetDoc["viewfinder-top-indexed"]) + NumCast(presTargetDoc._panY) + (this.checkList(presTargetDoc, presTargetDoc["viewfinder-height-indexed"]) / 2)); srcContext._panX = newPanX + (vfLeft + (vfWidth / 2)); srcContext._panY = newPanY + (vfTop + (vfHeight / 2)); - // srcContext._panX = newPanX - // srcContext._panY = newPanY srcContext._viewScale = newScale; console.log("X: " + srcContext._panX + ", Y: " + srcContext._panY + ", Scale: " + srcContext._viewScale); } @@ -203,9 +201,6 @@ export class PresBox extends ViewBoxBaseComponent const tagDoc = Cast(curDoc.presentationTargetDoc, Doc, null); if (tagDoc) tagDoc.opacity = 1; if (curDoc.presHideTillShownButton) { - console.log("-------------hide before---------------"); - console.log("this.itemIndex: " + this.itemIndex); - console.log("index: " + index) if (index > this.itemIndex) { tagDoc.opacity = 0; } else if (!curDoc.presHideAfterButton) { @@ -213,9 +208,6 @@ export class PresBox extends ViewBoxBaseComponent } } if (curDoc.presHideAfterButton) { - console.log("-------------hide after---------------"); - console.log("this.itemIndex: " + (this.itemIndex + 1)); - console.log("index: " + (index + 1)) if (index < this.itemIndex) { tagDoc.opacity = 0; } else if (!curDoc.presHideTillShownButton) { @@ -225,73 +217,6 @@ export class PresBox extends ViewBoxBaseComponent }); } - @action - onHideAfterPresClick = () => { - this.childDocs.forEach((doc, index) => { - const curDoc = Cast(doc, Doc, null); - const tagDoc = Cast(curDoc.presentationTargetDoc, Doc, null); - if (curDoc.presHideAfterButton) { - if (index < this.itemIndex) { - tagDoc.opacity = 0; - } else if (index = this.itemIndex) { - tagDoc.opacity = 1; - } - } - }); - } - - /** - * This is the method that checks for the actions that need to be performed - * before the document has been presented, which involves 3 button options: - * Hide Until Presented, Hide After Presented, Fade After Presented - */ - // @action - // hideDocumentInPres = () => { - // this.updateCurrentPresentation(); - // this.childDocs.forEach((doc, i) => { - // const tagDoc = Cast(doc.presentationTargetDoc, Doc, null); - // console.log("HB: " + doc.presHideTillShownButton); - // console.log("HA: " + doc.presHideAfterButton); - // if (doc.presHideTillShownButton) { - // if (i < this.itemIndex) { - // console.log(i + 1 + "hide before"); - // tagDoc.opacity = 0; - // console.log(tagDoc.opacity); - // } else { - // tagDoc.opacity = 1; - // } - // } - // if (doc.presHideAfterButton) { - // if (i > this.itemIndex) { - // console.log(i + 1 + "hide after"); - // tagDoc.opacity = 0; - // console.log(tagDoc.opacity); - // } else { - // tagDoc.opacity = 1; - // } - // } - // }); - // } - - /** - * 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: - * Hide Until Presented, Hide After Presented, Fade After Presented - */ - // 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.presHideTillShownButton && ind <= index) { - // presTargetDoc.opacity = 1; - // } - // if (doc.presHideAfterButton && ind < index) { - // presTargetDoc.opacity = 0; - // } - // }); - // } - /** * This method makes sure that cursor navigates to the element that * has the option open and last in the group. If not in the group, and it has @@ -310,24 +235,12 @@ export class PresBox extends ViewBoxBaseComponent if (srcContext) this.layoutDoc.presCollection = srcContext; } else if (targetDoc) this.layoutDoc.presCollection = targetDoc; } - if (srcContext) console.log("NC: " + srcContext.title); - if (presCollection) console.log("PC: " + presCollection.title); if (collectionDocView) { - if (activeItem.openDocument) { - collectionDocView.props.addDocTab(activeItem, "inPlace"); - } else if (srcContext && srcContext !== presCollection) { - if (activeItem.openDocument) { - collectionDocView.props.addDocTab(activeItem, "inPlace"); - } else { - console.log("Case 1: new srcContext inside of current collection so add a new tab to the current pres collection"); - console.log(collectionDocView); - collectionDocView.props.addDocTab(srcContext, "inPlace"); - } + if (srcContext && srcContext !== presCollection) { + // Case 1: new srcContext inside of current collection so add a new tab to the current pres collection + collectionDocView.props.addDocTab(srcContext, "inPlace"); } } - if (targetDoc.presWebsiteData) { - targetDoc.data = targetDoc.presWebsiteData; - } // else if (srcContext) { // console.log("Case 2: srcContext - not open and collection containing this document exists, so open collection that contains it and then await zooming in on document"); // this.props.addDocTab(srcContext, "onRight"); @@ -354,6 +267,17 @@ export class PresBox extends ViewBoxBaseComponent //awaiting jump so that new scale can be found, since jumping is async targetDoc && await DocumentManager.Instance.jumpToDocument(targetDoc, willZoom, undefined, srcContext); } + if (activeItem.presPinView) { + targetDoc._panX = activeItem.presPinViewX; + targetDoc._panY = activeItem.presPinViewY; + targetDoc._viewScale = activeItem.presPinViewScale; + } + if (collectionDocView && activeItem.openDocument) { + collectionDocView.props.addDocTab(activeItem, "inPlace"); + } + if (targetDoc.presWebsiteData) { + targetDoc.data = targetDoc.presWebsiteData; + } } //The function that is called when a document is clicked or reached through next or back. @@ -381,6 +305,7 @@ export class PresBox extends ViewBoxBaseComponent @observable _presTimer!: NodeJS.Timeout; //The function that starts or resets presentaton functionally, depending on status flag. + @undoBatch @action startOrResetPres = (startSlide: number) => { this.updateCurrentPresentation(); @@ -432,31 +357,15 @@ export class PresBox extends ViewBoxBaseComponent this.turnOffEdit(); if (srcContext) { if (srcContext.miniPres) { - document.removeEventListener("keydown", this.keyEvents, false); + document.removeEventListener("keydown", this.minimizeEvents, false); srcContext.miniPres = false; - // Doc.RemoveDocFromList((Doc.UserDoc().myOverlayDocuments as Doc), undefined, this.rootDoc); CollectionDockingView.AddRightSplit(this.rootDoc); - // this.layoutDoc.inOverlay = false; } else { - document.addEventListener("keydown", this.keyEvents, false); + document.addEventListener("keydown", this.minimizeEvents, false); srcContext.miniPres = true; this.props.addDocTab?.(this.rootDoc, "close"); - // Doc.AddDocToList((Doc.UserDoc().myOverlayDocuments as Doc), undefined, this.rootDoc); } } - // if (srcContext) { - // Doc.RemoveDocFromList((Doc.UserDoc().myOverlayDocuments as Doc), undefined, this.rootDoc); - // CollectionDockingView.AddRightSplit(this.rootDoc); - // this.layoutDoc.inOverlay = false; - // } - // else { - // 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); - // } - // } } @undoBatch @@ -464,7 +373,7 @@ export class PresBox extends ViewBoxBaseComponent //@ts-ignore 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(this.rootDoc._viewType = viewType); + this.rootDoc._viewType = viewType; if (viewType === CollectionViewType.Stacking) this.layoutDoc._gridGap = 5; }); @@ -485,7 +394,7 @@ export class PresBox extends ViewBoxBaseComponent } else if (movement === 'switch') { targetDoc.presTransition = 0; activeItem.presSwitchButton = !activeItem.presSwitchButton; - if (activeItem.presSwitchButton) activeItem.presMovement = 'Switch'; + if (activeItem.presSwitchButton) activeItem.presMovement = 'Jump cut'; else activeItem.presMovement = 'None'; } else { activeItem.presMovement = 'None'; @@ -496,12 +405,11 @@ export class PresBox extends ViewBoxBaseComponent }); whenActiveChanged = action((isActive: boolean) => this.props.whenActiveChanged(this._isChildActive = isActive)); + // For dragging documents into the presentation trail addDocumentFilter = (doc: Doc | Doc[]) => { const docs = doc instanceof Doc ? [doc] : doc; docs.forEach((doc, i) => { if (this.childDocs.includes(doc)) { - console.log(docs.length); - console.log(i + 1); if (docs.length === i + 1) return false; } else { doc.aliasOf instanceof Doc && (doc.presentationTargetDoc = doc.aliasOf); @@ -574,33 +482,45 @@ export class PresBox extends ViewBoxBaseComponent } } + @action + minimizeEvents = (e: KeyboardEvent) => { + e.stopPropagation(); + e.preventDefault(); + if (e.keyCode === 27) { // Escape key + this.layoutDoc.presStatus = "edit"; + } if (e.keyCode === 37) { // left(37) / a(65) / up(38) to go back + this.back(); + } if (e.keyCode === 39) { // right (39) / d(68) / down(40) to go to next + this.next(); + } + } + //Esc click @action keyEvents = (e: KeyboardEvent) => { e.stopPropagation(); e.preventDefault(); - // switch(e.keyCode) { - // case 27: console.log("escape"); - // case 65 && (e.metaKey || e.altKey): - // } - // Escape key - if (e.keyCode === 27) { + + if (e.keyCode === 27) { // Escape key if (this.layoutDoc.presStatus === "edit") this._selectedArray = []; else this.layoutDoc.presStatus = "edit"; - // Ctrl-A to select all - } if ((e.metaKey || e.altKey) && e.keyCode === 65) { + } if ((e.metaKey || e.altKey) && e.keyCode === 65) { // Ctrl-A to select all if (this.layoutDoc.presStatus === "edit") this._selectedArray = this.childDocs; - // left(37) / a(65) / up(38) to go back - } if (e.keyCode === 37) { + } if (e.keyCode === 37) { // left(37) / a(65) / up(38) to go back if (this.layoutDoc.presStatus !== "edit") this.back(); - // right (39) / d(68) / down(40) to go to next - } if (e.keyCode === 39) { - if (this.layoutDoc.presStatus !== "edit") this.next(); - // spacebar to 'present' or go to next slide - } if (e.keyCode === 32) { + } if (e.keyCode === 39) { // right (39) / d(68) / down(40) to go to next if (this.layoutDoc.presStatus !== "edit") this.next(); + } if (e.keyCode === 32) { // spacebar to 'present' or autoplay + if (this.layoutDoc.presStatus !== "edit") this.startOrResetPres(0); else this.layoutDoc.presStatus = "manual"; } + if (e.keyCode === 8) { // delete selected items + if (this.layoutDoc.presStatus === "edit") { + this._selectedArray.forEach((doc, i) => { + this.removeDocument(doc); + }); + } + } } @observable private transitionTools: boolean = false; @@ -617,7 +537,6 @@ export class PresBox extends ViewBoxBaseComponent viewPaths = async () => { const srcContext = Cast(this.rootDoc.presCollection, Doc, null); if (this.pathBoolean) { - console.log("true"); if (srcContext) { this.togglePath(); srcContext._fitToBox = false; @@ -625,7 +544,6 @@ export class PresBox extends ViewBoxBaseComponent srcContext.presPathView = false; } } else { - console.log("false"); if (srcContext) { this.togglePath(); srcContext._fitToBox = true; @@ -633,13 +551,8 @@ export class PresBox extends ViewBoxBaseComponent srcContext.presPathView = true; } } - console.log("view paths"); const viewType = srcContext?._viewType; const fit = srcContext?._fitToBox; - - // if (!DocumentManager.Instance.getDocumentView(curPres)) { - // CollectionDockingView.AddRightSplit(curPres); - // } } @computed get order() { @@ -664,7 +577,6 @@ export class PresBox extends ViewBoxBaseComponent @computed get paths() { let pathPoints = ""; - console.log(this.childDocs.length - 1); this.childDocs.forEach((doc, index) => { const targetDoc = Cast(doc.presentationTargetDoc, Doc, null); const srcContext = Cast(targetDoc.context, Doc, null); @@ -678,7 +590,6 @@ export class PresBox extends ViewBoxBaseComponent else pathPoints = pathPoints + " " + 0 + "," + 0; } }); - console.log(pathPoints); return ( } } + // WHAT IS THIS? @action dropdownToggle = (menu: string) => { - console.log('presBox' + menu + 'Dropdown'); const dropMenu = document.getElementById('presBox' + menu + 'Dropdown'); - console.log(dropMenu); - console.log(dropMenu?.style.display); if (dropMenu) dropMenu.style.display === 'none' ? dropMenu.style.display = 'block' : dropMenu.style.display = 'none'; } @@ -749,8 +658,6 @@ export class PresBox extends ViewBoxBaseComponent if (activeItem && targetDoc) { const transitionSpeed = targetDoc.presTransition ? String(Number(targetDoc.presTransition) / 1000) : 0.5; const duration = targetDoc.presDuration ? String(Number(targetDoc.presDuration) / 1000) : 2; - const transitionThumbLocation = String(-9.48 * Number(transitionSpeed) + 93); - const durationThumbLocation = String(9.48 * Number(duration)); const effect = targetDoc.presEffect ? targetDoc.presEffect : 'None'; activeItem.presMovement = activeItem.presMovement ? activeItem.presMovement : 'Zoom'; return ( @@ -767,7 +674,7 @@ export class PresBox extends ViewBoxBaseComponent
e.stopPropagation()} onClick={() => this.movementChanged('none')}>None
e.stopPropagation()} onClick={() => this.movementChanged('zoom')}>Pan and Zoom
e.stopPropagation()} onClick={() => this.movementChanged('nav')}>Pan
-
e.stopPropagation()} onClick={() => this.movementChanged('switch')}>Switch
+
e.stopPropagation()} onClick={() => this.movementChanged('switch')}>Jump cut
@@ -985,7 +892,6 @@ export class PresBox extends ViewBoxBaseComponent } createNewSlide = (layout?: string, title?: string, freeform?: boolean) => { - console.log("whats going on?"); let doc = undefined; if (layout) doc = this.createTemplate(layout); if (freeform && layout) doc = this.createTemplate(layout, title); @@ -1019,7 +925,7 @@ export class PresBox extends ViewBoxBaseComponent const content2 = Docs.Create.TextDocument("Click to change text", { title: "Column 2", _width: 185, _height: 140, x: 205, y: 80, _fontSize: "14pt" }); switch (layout) { case 'blank': - doc = Docs.Create.FreeformDocument([], { title: input ? input : "Blank slide", _width: 400, _height: 225, _fitToBox: true, x: x, y: y }); + doc = Docs.Create.FreeformDocument([], { title: input ? input : "Blank slide", _width: 400, _height: 225, x: x, y: y }); break; case 'title': doc = Docs.Create.FreeformDocument([title, subtitle], { title: input ? input : "Title slide", _width: 400, _height: 225, _fitToBox: true, x: x, y: y }); @@ -1084,14 +990,14 @@ export class PresBox extends ViewBoxBaseComponent CollectionFreeFormDocumentView.setupScroll(tagDoc, 0); CollectionFreeFormDocumentView.setupKeyframes(childDocs, 0); } - let lastFrame: number = 0; - childDocs.forEach((doc) => { - if (NumCast(doc.appearFrame) > lastFrame) lastFrame = NumCast(doc.appearFrame); - }); + // let lastFrame: number = 0; + // childDocs.forEach((doc) => { + // if (NumCast(doc.appearFrame) > lastFrame) lastFrame = NumCast(doc.appearFrame); + // }); CollectionFreeFormDocumentView.updateScrollframe(tagDoc, currentFrame); CollectionFreeFormDocumentView.updateKeyframe(childDocs, currentFrame || 0); tagDoc.currentFrame = Math.max(0, (currentFrame || 0) + 1); - tagDoc.lastFrame = Math.max(NumCast(tagDoc.currentFrame), lastFrame); + tagDoc.lastFrame = Math.max(NumCast(tagDoc.currentFrame), NumCast(tagDoc.lastFrame)); if (tagDoc.zoomProgressivize) { const resize = document.getElementById('resizable'); if (resize) { @@ -1153,20 +1059,20 @@ export class PresBox extends ViewBoxBaseComponent
e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}>
{this.stringType} selected -
+
Child documents
Edit
-
+
Internal zoom
Viewfinder
{/*
Snapshot
*/}
-
+
Text progressivize
Edit
-
+
Scroll progressivize
Edit
@@ -1188,7 +1094,7 @@ export class PresBox extends ViewBoxBaseComponent
{"Last frame"}
}>
{NumCast(targetDoc.lastFrame)}
-
console.log("play frames")}>Play
+
console.log(" TODO: play frames")}>Play
@@ -1298,9 +1204,7 @@ export class PresBox extends ViewBoxBaseComponent const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); const docs = DocListCast(targetDoc[Doc.LayoutFieldKey(targetDoc)]); targetDoc.presProgressivize = !targetDoc.presProgressivize; - console.log(targetDoc.presProgressivize); if (activeItem.presProgressivize) { - console.log("progressivize"); targetDoc.currentFrame = 0; CollectionFreeFormDocumentView.setupKeyframes(docs, docs.length, true); targetDoc.lastFrame = docs.length - 1; @@ -1350,9 +1254,6 @@ export class PresBox extends ViewBoxBaseComponent const y: List = ylist; const tags: JSX.Element[] = []; let pathPoints = ""; //List of all of the pathpoints that need to be added - // console.log(x); - // console.log(x.length); - // console.log(x[0]); for (let i = 0; i < x.length - 1; i++) { if (y[i] || x[i]) { if (i === 0) pathPoints = (x[i] - 11) + "," + (y[i] + 33); @@ -1630,7 +1531,6 @@ export class PresBox extends ViewBoxBaseComponent @undoBatch @action nextAppearFrame = (doc: Doc, i: number): void => { - console.log("next"); const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null); const appearFrame = Cast(doc.appearFrame, "number", null); @@ -1638,9 +1538,7 @@ export class PresBox extends ViewBoxBaseComponent doc.appearFrame = 0; } doc.appearFrame = appearFrame + 1; - const olist = new List(numberRange(NumCast(targetDoc.lastFrame)).map(t => targetDoc.presProgressivize && t < (doc.appearFrame ? doc.appearFrame : i) ? 0 : 1)); - doc["opacity-indexed"] = olist; - console.log(doc.appearFrame); + this.updateOpacityList(doc["opacity-indexed"], NumCast(doc.appearFrame)); } @undoBatch @@ -1654,9 +1552,32 @@ export class PresBox extends ViewBoxBaseComponent doc.appearFrame = 0; } doc.appearFrame = Math.max(0, appearFrame - 1); - const olist = new List(numberRange(NumCast(targetDoc.lastFrame)).map(t => targetDoc.presProgressivize && t < (doc.appearFrame ? doc.appearFrame : i) ? 0 : 1)); - doc["opacity-indexed"] = olist; - console.log(doc.appearFrame); + this.updateOpacityList(doc["opacity-indexed"], NumCast(doc.appearFrame)); + } + + @action + updateOpacityList = (list: any, frame: number) => { + const x: List = list; + if (x && x.length >= frame) { + for (let i = 0; i < x.length; i++) { + if (i < frame) { + x[i] = 0; + } else if (i >= frame) { + x[i] = 1; + } + } + list = x; + } else { + x.length = frame + 1; + for (let i = 0; i < x.length; i++) { + if (i < frame) { + x[i] = 0; + } else if (i >= frame) { + x[i] = 1; + } + } + list = x; + } } @computed get moreInfoDropdown() { @@ -1746,37 +1667,37 @@ export class PresBox extends ViewBoxBaseComponent onPointerDown={e => e.stopPropagation()} onChange={this.viewChanged} value={mode}> - {/* */} - {/* */}
- -
this.startOrResetPres(0)}> -   - -
-
{ e.stopPropagation; this.togglePlay(); }}> - - {this.playDropdown} -
- - +
this.layoutDoc.presStatus = "manual"}>   Present
{ e.stopPropagation; this.togglePresent(); }}> {this.presentDropdown}
-
- -
-
- -
-
this.layoutDoc.presStatus = "edit"}> - +
+ {/* +
this.startOrResetPres(0)}> +   + +
+
{ e.stopPropagation; this.togglePlay(); }}> + + {this.playDropdown} +
+ */} +
+
this.startOrResetPres(this.itemIndex)}>
+
+
+
Slide {this.itemIndex + 1} / {this.childDocs.length}
+
+
this.layoutDoc.presStatus = "edit"}> + +
@@ -1809,14 +1730,4 @@ Scripting.addGlobal(function lookupPresBoxField(container: Doc, field: string, d if (field === '_itemIndex') return container._itemIndex; if (field === 'presBox') return container; return undefined; -}); - - - -// console.log("render = " + this.layoutDoc.title + " " + this.layoutDoc.presStatus); -// const presOrderedDocs = DocListCast(activeItem.presOrderedDocs); -// if (presOrderedDocs.length != this.childDocs.length || presOrderedDocs.some((pd, i) => pd !== this.childDocs[i])) { -// this.rootDoc.presOrderedDocs = new List(this.childDocs.slice()); -// } - - +}); \ No newline at end of file diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index fc65f34eb..76d23ddfe 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -536,6 +536,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp Doc.AddDocToList(Cast(Doc.UserDoc()["template-notes"], Doc, null), "data", this.rootDoc); }, icon: "eye" }); + appearanceItems.push({ description: "Create progressivized slide...", event: this.progressivizeText, icon: "desktop" }); cm.addItem({ description: "Appearance...", subitems: appearanceItems, icon: "eye" }); const options = cm.findByDescription("Options..."); @@ -547,6 +548,69 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp this._downX = this._downY = Number.NaN; } + progressivizeText = () => { + const list = this.ProseRef?.getElementsByTagName("li"); + const mainBulletText: string[] = []; + const mainBulletList: Doc[] = []; + if (list) { + const newBullets: Doc[] = this.recursiveProgressivize(1, list); + mainBulletList.push.apply(mainBulletList, newBullets); + } + console.log(mainBulletList.length); + const title = Docs.Create.TextDocument(StrCast(this.rootDoc.title), { title: "Title", _width: 800, _height: 70, x: 20, y: -10, _fontSize: '20pt', backgroundColor: "rgba(0,0,0,0)", appearFrame: 0, _fontWeight: 700 }); + mainBulletList.push(title); + const doc = Docs.Create.FreeformDocument(mainBulletList, { + title: StrCast(this.rootDoc.title), + x: NumCast(this.props.Document.x), y: NumCast(this.props.Document.y) + NumCast(this.props.Document._height) + 10, + _width: 400, _height: 225, _fitToBox: true, + }); + this.props.addDocument?.(doc); + } + + recursiveProgressivize = (nestDepth: number, list: HTMLCollectionOf, d?: number, y?: number, before?: string): Doc[] => { + const mainBulletList: Doc[] = []; + let b = d ? d : 0; + let yLoc = y ? y : 0; + let nestCount = 0; + let count: string = before ? before : ''; + const fontSize: string = (16 - (nestDepth * 2)) + 'pt'; + const xLoc: number = (nestDepth * 20); + const width: number = 390 - xLoc; + const height: number = 55 - (nestDepth * 5); + for (let i = 0; i < list.length; i++) { + const mainBullets: number = Number(list[i].getAttribute("data-bulletstyle")); + if (mainBullets === nestDepth) { + if (list[i].childElementCount > 1) { + b++; + nestCount++; + count = before ? count + nestCount + "." : nestCount + "."; + yLoc += height; + const text = list[i].getElementsByTagName("p")[0].innerText; + const length = text.length; + console.log(yLoc); + const bullet1 = Docs.Create.TextDocument(count + " " + text, { title: "Slide text", _width: width, _height: height, x: xLoc, y: 10 + (yLoc), _fontSize: fontSize, backgroundColor: "rgba(0,0,0,0)", appearFrame: d ? d : b }); + mainBulletList.push(bullet1); + const newList = this.recursiveProgressivize(nestDepth + 1, list[i].getElementsByTagName("li"), b, yLoc, count); + mainBulletList.push.apply(mainBulletList, newList); + b += newList.length; + yLoc += newList.length * (55 - ((nestDepth + 1) * 5)); + } else { + b++; + nestCount++; + count = before ? count + nestCount + "." : nestCount + "."; + yLoc += height; + const text = list[i].innerText; + const length = text.length; + console.log(yLoc); + const bullet1 = Docs.Create.TextDocument(count + " " + text, { title: "Slide text", _width: width, _height: height, x: xLoc, y: 10 + (yLoc), _fontSize: fontSize, backgroundColor: "rgba(0,0,0,0)", appearFrame: d ? d : b }); + mainBulletList.push(bullet1); + } + } + } + console.log("b: " + b); + return mainBulletList; + } + recordDictation = () => { DictationManager.Controls.listen({ interimHandler: this.setCurrentBulletContent, @@ -1374,6 +1438,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp color: this.props.color ? this.props.color : StrCast(this.layoutDoc[this.props.fieldKey + "-color"], this.props.hideOnLeave ? "white" : "inherit"), pointerEvents: interactive ? undefined : "none", fontSize: Cast(this.layoutDoc._fontSize, "string", null), + fontWeight: Cast(this.layoutDoc._fontWeight, "number", null), fontFamily: StrCast(this.layoutDoc._fontFamily, "inherit"), transition: "opacity 1s" }} diff --git a/src/client/views/presentationview/PresElementBox.scss b/src/client/views/presentationview/PresElementBox.scss index 159cb5f8a..fa70b2a41 100644 --- a/src/client/views/presentationview/PresElementBox.scss +++ b/src/client/views/presentationview/PresElementBox.scss @@ -2,7 +2,8 @@ display: grid; grid-template-columns: max-content max-content max-content; background-color: #d5dce2; - // box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.25); + font-family: Roboto; + letter-spacing: normal; position: relative; pointer-events: all; width: 100%; @@ -21,13 +22,30 @@ .presElementBox-highlight { position: absolute; - transform: translate(-100px, -6px); + transform: translate(-100px, -4px); z-index: -1; width: calc(100% + 200px); - height: calc(100% + 12px); + height: calc(100% + 8px); background-color: #AEDDF8; } + .presElementBox-highlightTop { + position: absolute; + transform: translate(-100px, -4px); + z-index: -1; + width: calc(100% + 200px); + height: calc(50% + 4px); + } + + .presElementBox-highlightBottom { + position: absolute; + transform: translate(-100px, 0px); + z-index: -1; + top: 50%; + width: calc(100% + 200px); + height: calc(50% + 4px); + } + .documentView-node { position: absolute; z-index: 1; @@ -79,8 +97,12 @@ .presElementBox-number { font-size: 12px; + width: 20; font-weight: 700; - left: -15; + text-align: right; + justify-content: center; + align-content: center; + left: -20; position: absolute; display: inline-block; overflow: hidden; @@ -110,9 +132,8 @@ font-size: 10; font-weight: 300; font-family: Roboto; - /* font-style: italic; */ + z-index: 300; letter-spacing: normal; - /* left: 10px; */ } .presElementBox-embedded { @@ -174,7 +195,7 @@ bottom: 3px; width: 20px; height: 20px; - z-index: 200; + z-index: 300; display: flex; background-color: black; color: white; diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx index b3d8cca98..e035ed0b8 100644 --- a/src/client/views/presentationview/PresElementBox.tsx +++ b/src/client/views/presentationview/PresElementBox.tsx @@ -220,7 +220,7 @@ export class PresElementBox extends ViewBoxBaseComponent) => { + e.stopPropagation(); + e.preventDefault(); + DragManager.docsBeingDragged = []; + this._highlightTopRef.current!.style.borderBottom = "0px"; + this._highlightBottomRef.current!.style.borderBottom = "0px"; + } + startDrag = (e: PointerEvent, down: number[], delta: number[]) => { // const ele: HTMLElement[] = PresBox.Instance._eleArray.map(doc => doc); const activeItem = this.rootDoc; const dragData = new DragManager.DocumentDragData(PresBox.Instance.sortArray().map(doc => doc)); // let value = this.getValue(this._heading); // value = typeof value === "string" ? `"${value}"` : value; + let dragItem: HTMLElement[] = []; + PresBox.Instance._dragArray.map(ele => { + const drag = ele; + drag.style.backgroundColor = "#d5dce2"; + drag.style.borderRadius = '5px'; + dragItem.push(drag); + }); if (activeItem) { - DragManager.StartDocumentDrag(PresBox.Instance._dragArray.map(ele => ele), dragData, e.clientX, e.clientY); + DragManager.StartDocumentDrag(dragItem.map(ele => ele), dragData, e.clientX, e.clientY); activeItem.dragging = true; return true; } return false; } + private _highlightTopRef: React.RefObject = React.createRef(); + private _highlightBottomRef: React.RefObject = React.createRef(); + onPointerTop = (e: React.PointerEvent) => { + if (DragManager.docsBeingDragged.length > 0) { + this._highlightTopRef.current!.style.borderTop = "solid 2px #5B9FDD"; + } + } + + onPointerBottom = (e: React.PointerEvent) => { + if (DragManager.docsBeingDragged.length > 0) { + this._highlightBottomRef.current!.style.borderBottom = "solid 2px #5B9FDD"; + } + } + + onPointerLeave = (e: React.PointerEvent) => { + if (DragManager.docsBeingDragged.length > 0) { + this._highlightBottomRef.current!.style.borderBottom = "0px"; + this._highlightTopRef.current!.style.borderTop = "0px"; + } + } + render() { const treecontainer = this.props.ContainingCollectionDoc?._viewType === CollectionViewType.Tree; - const className = "presElementBox-item" + (this.itemIndex === this.indexInPres ? " presElementBox-active" : ""); + const className = "presElementBox-item" + (PresBox.Instance._selectedArray.includes(this.rootDoc) ? " presElementBox-active" : ""); const pbi = "presElementBox-interaction"; return !(this.rootDoc instanceof Doc) || this.targetDoc instanceof Promise ? (null) : (
<>
@@ -297,7 +334,7 @@ export class PresElementBox extends ViewBoxBaseComponent
{"Movement speed"}
}>
300 ? "block" : "none" }}>{this.transition}
 -
{"Duration of visibility"}
}>
300 ? "block" : "none" }}>{this.duration}
 +
{"Duration"}
}>
300 ? "block" : "none" }}>{this.duration}
{"Remove from presentation"}
}>
e.stopPropagation()} @@ -311,7 +348,9 @@ export class PresElementBox extends ViewBoxBaseComponent e.stopPropagation()} />
-
+
+
+
-- cgit v1.2.3-70-g09d2 From 6d788ba96d611d580605b87d0e3658f61c57f46e Mon Sep 17 00:00:00 2001 From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com> Date: Thu, 6 Aug 2020 14:36:48 +0800 Subject: small ui updates for uniformity --- src/client/views/PropertiesButtons.tsx | 9 +++++++-- src/client/views/collections/CollectionDockingView.tsx | 3 +-- 2 files changed, 8 insertions(+), 4 deletions(-) (limited to 'src/client/views/PropertiesButtons.tsx') diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx index 29afd447f..642476bc3 100644 --- a/src/client/views/PropertiesButtons.tsx +++ b/src/client/views/PropertiesButtons.tsx @@ -245,7 +245,7 @@ export class PropertiesButtons extends React.Component<{}, {}> { } return !targetDoc ? (null) :
{"Pin with this view"}
}>
{ if (targetDoc) { DockedFrameRenderer.PinDoc(targetDoc, false); @@ -259,8 +259,13 @@ export class PropertiesButtons extends React.Component<{}, {}> { activeDoc.presPinViewScale = scale; } }}> -
V
+
V
+
{"Pin with view"}
; } diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 6d4a7f311..af701bfdd 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -873,13 +873,12 @@ export class DockedFrameRenderer extends React.Component { return
-
+
document.addEventListener("keydown", PresBox.Instance.minimizeEvents, false)}>
PresBox.Instance.startOrResetPres(PresBox.Instance.itemIndex)}>
Slide {PresBox.Instance.itemIndex + 1} / {PresBox.Instance.childDocs.length}
- {/*
{this.getCurrentFrame}
*/}
EXIT
-- cgit v1.2.3-70-g09d2 From 0bd77219c2f470f5b2a8680cf9712f5947f22bd1 Mon Sep 17 00:00:00 2001 From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com> Date: Thu, 6 Aug 2020 15:13:43 +0800 Subject: pin with view button UI and other small changes --- src/client/views/PropertiesButtons.tsx | 46 ++++++++++++++++------------------ src/client/views/nodes/PresBox.scss | 10 +++++--- src/client/views/nodes/PresBox.tsx | 7 +++--- 3 files changed, 33 insertions(+), 30 deletions(-) (limited to 'src/client/views/PropertiesButtons.tsx') diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx index 642476bc3..002abc5a3 100644 --- a/src/client/views/PropertiesButtons.tsx +++ b/src/client/views/PropertiesButtons.tsx @@ -237,36 +237,34 @@ export class PropertiesButtons extends React.Component<{}, {}> { @computed get pinWithViewButton() { const targetDoc = this.selectedDoc; - const isPinned = targetDoc && Doc.isDocPinned(targetDoc); if (targetDoc) { const x = targetDoc._panX; const y = targetDoc._panY; const scale = targetDoc._viewScale; } return !targetDoc ? (null) :
{"Pin with this view"}
}> -
{ - if (targetDoc) { - DockedFrameRenderer.PinDoc(targetDoc, false); - const activeDoc = PresBox.Instance.childDocs[PresBox.Instance.childDocs.length - 1]; - const x = targetDoc._panX; - const y = targetDoc._panY; - const scale = targetDoc._viewScale; - activeDoc.presPinView = true; - activeDoc.presPinViewX = x; - activeDoc.presPinViewY = y; - activeDoc.presPinViewScale = scale; - } - }}> - -
V
-
{"Pin with view"}
-
; + <> +
{ + if (targetDoc) { + DockedFrameRenderer.PinDoc(targetDoc, false); + const activeDoc = PresBox.Instance.childDocs[PresBox.Instance.childDocs.length - 1]; + const x = targetDoc._panX; + const y = targetDoc._panY; + const scale = targetDoc._viewScale; + activeDoc.presPinView = true; + activeDoc.presPinViewX = x; + activeDoc.presPinViewY = y; + activeDoc.presPinViewScale = scale; + } + }}> + +
V
+
+
{"View"}
+ + ; } diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss index 16821f5bc..8ce71935c 100644 --- a/src/client/views/nodes/PresBox.scss +++ b/src/client/views/nodes/PresBox.scss @@ -30,7 +30,7 @@ transform: translate(8px, -5px); box-shadow: 1px 1px 4px 4px rgba(0, 0, 0, 0.25); z-index: 1000; - width: 315; + width: calc(100% - 50px); height: max-content; justify-self: center; letter-spacing: normal; @@ -583,6 +583,8 @@ align-items: center; justify-content: center; border-radius: 4px; + padding-left: 7px; + padding-right: 7px; border-bottom-right-radius: 0; border-top-right-radius: 0; } @@ -597,6 +599,8 @@ align-items: center; justify-content: center; border-radius: 4px; + padding-left: 7px; + padding-right: 7px; border-bottom-left-radius: 0; border-top-left-radius: 0; } @@ -722,6 +726,7 @@ position: relative; width: 100%; background: gray; + min-height: 35px; padding-top: 5px; padding-bottom: 5px; display: grid; @@ -782,8 +787,7 @@ .presBox-button.present { display: flex; - min-width: 100px; - width: 100px; + width: max-content; position: absolute; right: 10px; diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index ccf1fb8e3..c3b920b26 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -1064,10 +1064,10 @@ export class PresBox extends ViewBoxBaseComponent
Viewfinder
{/*
Snapshot
*/}
-
+ {/*
Text progressivize
Edit
-
+
*/}
Scroll progressivize
Edit
@@ -1657,6 +1657,7 @@ export class PresBox extends ViewBoxBaseComponent return
-
this.layoutDoc.presStatus = "manual"}>   Present
+
this.layoutDoc.presStatus = "manual"}>
200 ? "inline-flex" : "none" }}>  Present
{ e.stopPropagation; this.togglePresent(); }}> {this.presentDropdown} -- cgit v1.2.3-70-g09d2 From 557bcff59aaec470b045a01600b0c2a6e785c730 Mon Sep 17 00:00:00 2001 From: geireann <60007097+geireann@users.noreply.github.com> Date: Thu, 6 Aug 2020 18:05:24 +0800 Subject: ui changes and commenting code also removed _viewTransition and backgroundColor... --- src/client/util/DocumentManager.ts | 6 +- src/client/views/.DS_Store | Bin 6148 -> 6148 bytes src/client/views/PropertiesButtons.tsx | 4 +- src/client/views/nodes/PresBox.scss | 47 +- src/client/views/nodes/PresBox.tsx | 485 +++++++++++---------- .../views/presentationview/PresElementBox.scss | 8 +- .../views/presentationview/PresElementBox.tsx | 10 +- 7 files changed, 292 insertions(+), 268 deletions(-) (limited to 'src/client/views/PropertiesButtons.tsx') diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts index d18eac374..523dbfca0 100644 --- a/src/client/util/DocumentManager.ts +++ b/src/client/util/DocumentManager.ts @@ -127,10 +127,6 @@ export class DocumentManager { CollectionDockingView.AddRightSplit(doc); finished?.(); } - // static openInPlace = (doc: Doc, finished?: () => void) => { - // CollectionDockingView.AddTab(doc); - // finished?.(); - // } public jumpToDocument = async ( targetDoc: Doc, // document to display willZoom: boolean, // whether to zoom doc to take up most of screen @@ -180,7 +176,7 @@ export class DocumentManager { const targetDocContextView = getFirstDocView(targetDocContext); targetDocContext._scrollY = 0; // this will force PDFs to activate and load their annotations / allow scrolling if (targetDocContextView) { // we found a context view and aren't forced to create a new one ... focus on the context first.. - targetDocContext._viewTransition = "transform 10000ms"; + targetDocContext._viewTransition = "transform 500ms"; targetDocContextView.props.focus(targetDocContextView.props.Document, willZoom); // now find the target document within the context diff --git a/src/client/views/.DS_Store b/src/client/views/.DS_Store index 3ce88292c..7a8c419ee 100644 Binary files a/src/client/views/.DS_Store and b/src/client/views/.DS_Store differ diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx index 002abc5a3..3392371de 100644 --- a/src/client/views/PropertiesButtons.tsx +++ b/src/client/views/PropertiesButtons.tsx @@ -242,7 +242,7 @@ export class PropertiesButtons extends React.Component<{}, {}> { const y = targetDoc._panY; const scale = targetDoc._viewScale; } - return !targetDoc ? (null) :
{"Pin with this view"}
}> + return !targetDoc ? (null) :
{"Pin with this view"}
} placement="top"> <>
{ activeDoc.presPinViewScale = scale; } }}> - +
V
{"View"}
diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss index 8ce71935c..d5389da35 100644 --- a/src/client/views/nodes/PresBox.scss +++ b/src/client/views/nodes/PresBox.scss @@ -1,3 +1,7 @@ +$light-blue: #AEDDF8; +$dark-blue: #5B9FDD; +$light-background: #ececec; + .presBox-cont { position: absolute; display: block; @@ -20,10 +24,6 @@ margin-top: 3px; } - .presBox-toolbar { - display: none; - } - .presBox-toolbar-dropdown { border-radius: 5px; background-color: white; @@ -40,7 +40,7 @@ font-size: 13; } - .presBox-toolbar.active { + .presBox-toolbar { position: relative; display: inline-flex; align-items: center; @@ -59,7 +59,7 @@ } .toolbar-button.active { - color: #AEDDF8; + color: $light-blue; } .toolbar-transitionButtons { @@ -85,7 +85,6 @@ display: flex; width: max-content; height: 25px; - /* background-color: pink; */ justify-content: center; transform: rotate(90deg); align-items: center; @@ -120,7 +119,7 @@ .dropdown.active { transform: rotate(180deg); - color: #AEDDF8; + color: $light-blue; opacity: 0.8; } @@ -128,10 +127,7 @@ position: relative; display: inline; font-family: Roboto; - /* background-color: white; */ color: black; - width: 100%; - height: max-content; z-index: 100; transition: 0.7s; @@ -157,7 +153,6 @@ margin-left: 5px; margin-top: 5px; margin-bottom: 5px; - /* border-radius: 5px; */ margin-right: 5px; width: max-content; justify-content: center; @@ -176,7 +171,7 @@ // margin-top: 5px; // width: 100%; // max-width: 200px; - + // } // .toolbar-slider:focus { @@ -235,20 +230,20 @@ .toolbar-slider:focus { outline: none; } - + .toolbar-slider::-webkit-slider-runnable-track { - height: 10px; - -webkit-appearance: none; - margin-top: -1px; + height: 10px; + -webkit-appearance: none; + margin-top: -1px; } - + .toolbar-slider::-webkit-slider-thumb { - width: 10px; - -webkit-appearance: none; - height: 10px; - cursor: ew-resize; - background: #5b9ddd; - box-shadow: -100vw 0 0 100vw #aedef8; + width: 10px; + -webkit-appearance: none; + height: 10px; + cursor: ew-resize; + background: #5b9ddd; + box-shadow: -100vw 0 0 100vw #aedef8; } } @@ -751,7 +746,7 @@ min-width: 150px; } - + select { background: #323232; @@ -796,7 +791,7 @@ } } - + .miniPresOverlay { background-color: #323232; color: white; diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index c3b920b26..5d4cde382 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -20,17 +20,10 @@ import { Docs, DocUtils } from "../../documents/Documents"; import { PrefetchProxy } from "../../../fields/Proxy"; import { ScriptField } from "../../../fields/ScriptField"; import { Scripting } from "../../util/Scripting"; -import { InkingStroke } from "../InkingStroke"; -import { HighlightSpanKind } from "typescript"; -import { SearchUtil } from "../../util/SearchUtil"; import { CollectionFreeFormDocumentView } from "./CollectionFreeFormDocumentView"; -import { child } from "serializr"; import { List } from "../../../fields/List"; import { Tooltip } from "@material-ui/core"; import { CollectionFreeFormViewChrome } from "../collections/CollectionMenu"; -import { conformsTo } from "lodash"; -import { translate } from "googleapis/build/src/apis/translate"; -import { DragManager, dropActionType } from "../../util/DragManager"; import { actionAsync } from "mobx-utils"; import { SelectionManager } from "../../util/SelectionManager"; import { AudioBox } from "./AudioBox"; @@ -41,9 +34,26 @@ const PresBoxDocument = makeInterface(documentSchema); @observer export class PresBox extends ViewBoxBaseComponent(PresBoxDocument) { public static LayoutString(fieldKey: string) { return FieldView.LayoutString(PresBox, fieldKey); } - private treedropDisposer?: DragManager.DragDropDisposer; static Instance: PresBox; + @observable _isChildActive = false; + @observable _moveOnFromAudio: boolean = false; + @observable _presTimer!: NodeJS.Timeout; + + @observable _selectedArray: Doc[] = []; + @observable _sortedSelectedArray: Doc[] = []; + @observable _eleArray: HTMLElement[] = []; + @observable _dragArray: HTMLElement[] = []; + + @observable private transitionTools: boolean = false; + @observable private newDocumentTools: boolean = false; + @observable private progressivizeTools: boolean = false; + @observable private moreInfoTools: boolean = false; + @observable private playTools: boolean = false; + @observable private presentTools: boolean = false; + @observable private pathBoolean: boolean = false; + @observable private expandBoolean: boolean = false; + @computed get childDocs() { return DocListCast(this.dataDoc[this.fieldKey]); } @computed get itemIndex() { return NumCast(this.rootDoc._itemIndex); } @computed get presElement() { return Cast(Doc.UserDoc().presElement, Doc, null); } @@ -65,18 +75,12 @@ export class PresBox extends ViewBoxBaseComponent } - componentDidMount() { this.rootDoc.presBox = this.rootDoc; this.rootDoc._forceRenderEngine = "timeline"; this.rootDoc._replacedChrome = "replaced"; this.layoutDoc.presStatus = "edit"; this.layoutDoc._gridGap = 5; - // document.addEventListener("keydown", this.keyEvents, false); - } - - componentWillUnmount() { - this.treedropDisposer?.(); } onPointerOver = () => { @@ -91,8 +95,9 @@ export class PresBox extends ViewBoxBaseComponent Doc.UserDoc().activePresentation = this.rootDoc; } - @observable _moveOnFromAudio: boolean = false; - + /** + * Called when the user moves to the next slide in the presentation trail. + */ @undoBatch @action next = () => { @@ -137,6 +142,11 @@ export class PresBox extends ViewBoxBaseComponent } } + /** + * Called when the user moves back + * Design choice: If there are frames within the presentation, moving back will not + * got back through the frames but instead directly to the next point in the presentation. + */ @undoBatch @action back = () => { @@ -149,6 +159,93 @@ export class PresBox extends ViewBoxBaseComponent } } + //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 = action((index: number, fromDoc: number) => { + this.updateCurrentPresentation(); + Doc.UnBrushAllDocs(); + if (index >= 0 && index < this.childDocs.length) { + this.rootDoc._itemIndex = index; + const presTargetDoc = Cast(this.childDocs[this.itemIndex].presentationTargetDoc, Doc, null); + if (presTargetDoc?.lastFrame !== undefined) { + presTargetDoc.currentFrame = 0; + } + this.navigateToElement(this.childDocs[index]); //Handles movement to element + this._selectedArray = [this.childDocs[index]]; //Update selected array + this.onHideDocument(); //Handles hide after/before + } + }); + + /** + * This method makes sure that cursor navigates to the element that + * has the option open and last in the group. + * Design choice: If the next document is not in presCollection or + * presCollection itself then if there is a presCollection it will add + * a new tab. If presCollection is undefined it will open the document + * on the right. + */ + navigateToElement = async (curDoc: Doc) => { + const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); + const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); + const srcContext = await DocCastAsync(targetDoc.context); + const presCollection = Cast(this.layoutDoc.presCollection, Doc, null); + const collectionDocView = presCollection ? await DocumentManager.Instance.getDocumentView(presCollection) : undefined; + this.turnOffEdit(); + + if (this.itemIndex >= 0) { + if (targetDoc) { + if (srcContext) this.layoutDoc.presCollection = srcContext; + } else if (targetDoc) this.layoutDoc.presCollection = targetDoc; + } + if (collectionDocView) { + if (srcContext && srcContext !== presCollection) { + // Case 1: new srcContext inside of current collection so add a new tab to the current pres collection + collectionDocView.props.addDocTab(srcContext, "inPlace"); + } + } + this.updateCurrentPresentation(); + const docToJump = curDoc; + const willZoom = false; + + //docToJump stayed same meaning, it was not in the group or was the last element in the group + if (targetDoc.zoomProgressivize && this.rootDoc.presStatus !== 'edit') { + this.zoomProgressivizeNext(targetDoc); + } else if (docToJump === curDoc) { + //checking if curDoc has navigation open + if (curDoc.presNavButton && targetDoc) { + await DocumentManager.Instance.jumpToDocument(targetDoc, false, undefined, srcContext); + } else if (curDoc.presZoomButton && targetDoc) { + //awaiting jump so that new scale can be found, since jumping is async + await DocumentManager.Instance.jumpToDocument(targetDoc, true, undefined, srcContext); + } + } else { + //awaiting jump so that new scale can be found, since jumping is async + targetDoc && await DocumentManager.Instance.jumpToDocument(targetDoc, willZoom, undefined, srcContext); + } + // After navigating to the document, if it is added as a presPinView then it will + // adjust the pan and scale to that of the pinView when it was added. + // TODO: Add option to remove presPinView + if (activeItem.presPinView) { + targetDoc._panX = activeItem.presPinViewX; + targetDoc._panY = activeItem.presPinViewY; + targetDoc._viewScale = activeItem.presPinViewScale; + } + // If openDocument is selected then it should open the document for the user + if (collectionDocView && activeItem.openDocument) { + collectionDocView.props.addDocTab(activeItem, "inPlace"); + } + // If website and has presWebsite data associated then on click it should + // go back to that specific website + // TODO: Add progressivize for navigating web (storing websites for given frames) + if (targetDoc.presWebsiteData) { + targetDoc.data = targetDoc.presWebsiteData; + } + } + + /** + * Uses the viewfinder to progressivize through the different views of a single collection. + * @param presTargetDoc: document for which internal zoom is used + */ zoomProgressivizeNext = (presTargetDoc: Doc) => { const srcContext = Cast(presTargetDoc.context, Doc, null); const docView = DocumentManager.Instance.getDocumentView(presTargetDoc); @@ -190,6 +287,10 @@ export class PresBox extends ViewBoxBaseComponent } + /** + * For 'Hide Before' and 'Hide After' buttons making sure that + * they are hidden each time the presentation is updated. + */ @action onHideDocument = () => { this.childDocs.forEach((doc, index) => { @@ -213,97 +314,11 @@ export class PresBox extends ViewBoxBaseComponent }); } - /** - * This method makes sure that cursor navigates to the element that - * has the option open and last in the group. If not in the group, and it has - * the option open, navigates to that element. - */ - navigateToElement = async (curDoc: Doc) => { - const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); - const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); - const srcContext = await DocCastAsync(targetDoc.context); - const presCollection = Cast(this.layoutDoc.presCollection, Doc, null); - const collectionDocView = presCollection ? await DocumentManager.Instance.getDocumentView(presCollection) : undefined; - this.turnOffEdit(); - - if (this.itemIndex >= 0) { - if (targetDoc) { - if (srcContext) this.layoutDoc.presCollection = srcContext; - } else if (targetDoc) this.layoutDoc.presCollection = targetDoc; - } - if (collectionDocView) { - if (srcContext && srcContext !== presCollection) { - // Case 1: new srcContext inside of current collection so add a new tab to the current pres collection - collectionDocView.props.addDocTab(srcContext, "inPlace"); - } - } - // else if (srcContext) { - // console.log("Case 2: srcContext - not open and collection containing this document exists, so open collection that contains it and then await zooming in on document"); - // this.props.addDocTab(srcContext, "onRight"); - // } else if (!srcContext) { - // console.log("Case 3: !srcContext - no collection containing this document, therefore open document itself on right"); - // this.props.addDocTab(targetDoc, "onRight"); - // } - this.updateCurrentPresentation(); - const docToJump = curDoc; - const willZoom = false; - - //docToJump stayed same meaning, it was not in the group or was the last element in the group - if (targetDoc.zoomProgressivize && this.rootDoc.presStatus !== 'edit') { - this.zoomProgressivizeNext(targetDoc); - } else if (docToJump === curDoc) { - //checking if curDoc has navigation open - if (curDoc.presNavButton && targetDoc) { - await DocumentManager.Instance.jumpToDocument(targetDoc, false, undefined, srcContext); - } else if (curDoc.presZoomButton && targetDoc) { - //awaiting jump so that new scale can be found, since jumping is async - await DocumentManager.Instance.jumpToDocument(targetDoc, true, undefined, srcContext); - } - } else { - //awaiting jump so that new scale can be found, since jumping is async - targetDoc && await DocumentManager.Instance.jumpToDocument(targetDoc, willZoom, undefined, srcContext); - } - if (activeItem.presPinView) { - targetDoc._panX = activeItem.presPinViewX; - targetDoc._panY = activeItem.presPinViewY; - targetDoc._viewScale = activeItem.presPinViewScale; - } - if (collectionDocView && activeItem.openDocument) { - collectionDocView.props.addDocTab(activeItem, "inPlace"); - } - if (targetDoc.presWebsiteData) { - targetDoc.data = targetDoc.presWebsiteData; - } - } - - //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 = action((index: number, fromDoc: number) => { - this.updateCurrentPresentation(); - Doc.UnBrushAllDocs(); - if (index >= 0 && index < this.childDocs.length) { - this.rootDoc._itemIndex = index; - const presTargetDoc = Cast(this.childDocs[this.itemIndex].presentationTargetDoc, Doc, null); - if (presTargetDoc?.lastFrame !== undefined) { - presTargetDoc.currentFrame = 0; - } - this.navigateToElement(this.childDocs[index]); - this._selectedArray = [this.childDocs[index]]; - // this.hideIfNotPresented(index); - // this.showAfterPresented(index); - // this.hideDocumentInPres(); - this.onHideDocument(); - // this.onHideAfterPresClick(); - } - }); - - - @observable _presTimer!: NodeJS.Timeout; - //The function that starts or resets presentaton functionally, depending on status flag. + //The function that starts or resets presentaton functionally, depending on presStatus of the layoutDoc @undoBatch @action - startOrResetPres = (startSlide: number) => { + startPres = (startSlide: number) => { this.updateCurrentPresentation(); const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); @@ -326,15 +341,20 @@ export class PresBox extends ViewBoxBaseComponent //The function that resets the presentation by removing every action done by it. It also //stops the presentaton. + // TODO: Ensure resetPresentation is called when the presentation is closed resetPresentation = () => { this.updateCurrentPresentation(); - this.childDocs.forEach(doc => (doc.presentationTargetDoc as Doc).opacity = 1); this.rootDoc._itemIndex = 0; - // this.layoutDoc.presStatus = false; } - //The function that starts the presentation, also checking if actions should be applied - //directly at start. + @action togglePath = () => this.pathBoolean = !this.pathBoolean; + @action toggleExpand = () => this.expandBoolean = !this.expandBoolean; + + /** + * The function that starts the presentation at the given index, also checking if actions should be applied + * directly at start. + * @param startIndex: index that the presentation will start at + */ startPresentation = (startIndex: number) => { this.updateCurrentPresentation(); this.childDocs.map(doc => { @@ -348,6 +368,10 @@ export class PresBox extends ViewBoxBaseComponent }); } + /** + * The method called to open the presentation as a minimized view + * TODO: Look at old updateMinimize and compare... + */ updateMinimize = () => { const srcContext = Cast(this.rootDoc.presCollection, Doc, null); this.turnOffEdit(); @@ -364,39 +388,52 @@ export class PresBox extends ViewBoxBaseComponent } } + /** + * Called when the user changes the view type + * Either 'List' (stacking) or 'Slides' (carousel) + */ @undoBatch viewChanged = action((e: React.ChangeEvent) => { //@ts-ignore 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 + // pivot field may be set by the user in timeline view (or some other way) -- need to reset it here + viewType === CollectionViewType.Stacking && (this.rootDoc._pivotField = undefined); this.rootDoc._viewType = viewType; if (viewType === CollectionViewType.Stacking) this.layoutDoc._gridGap = 5; }); + /** + * When the movement dropdown is changes + */ @undoBatch movementChanged = action((movement: string) => { const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); - if (movement === 'zoom') { - activeItem.presZoomButton = !activeItem.presZoomButton; - if (activeItem.presZoomButton) activeItem.presMovement = 'Zoom'; - else activeItem.presMovement = 'None'; - activeItem.presNavButton = false; - } else if (movement === 'nav') { - activeItem.presZoomButton = false; - activeItem.presNavButton = !activeItem.presNavButton; - if (activeItem.presNavButton) activeItem.presMovement = 'Pan'; - else activeItem.presMovement = 'None'; - } else if (movement === 'switch') { - targetDoc.presTransition = 0; - activeItem.presSwitchButton = !activeItem.presSwitchButton; - if (activeItem.presSwitchButton) activeItem.presMovement = 'Jump cut'; - else activeItem.presMovement = 'None'; - } else { - activeItem.presMovement = 'None'; - activeItem.presZoomButton = false; - activeItem.presNavButton = false; - activeItem.presSwitchButton = false; + switch (movement) { + case 'zoom': //Pan and zoom + activeItem.presZoomButton = !activeItem.presZoomButton; + if (activeItem.presZoomButton) activeItem.presMovement = 'Zoom'; + else activeItem.presMovement = 'None'; + activeItem.presNavButton = false; + break; + case 'pan': //Pan + activeItem.presZoomButton = false; + activeItem.presNavButton = !activeItem.presNavButton; + if (activeItem.presNavButton) activeItem.presMovement = 'Pan'; + else activeItem.presMovement = 'None'; + break; + case 'jump': //Jump Cut + targetDoc.presTransition = 0; + activeItem.presSwitchButton = !activeItem.presSwitchButton; + if (activeItem.presSwitchButton) activeItem.presMovement = 'Jump cut'; + else activeItem.presMovement = 'None'; + break; + case 'none': default: + activeItem.presMovement = 'None'; + activeItem.presZoomButton = false; + activeItem.presNavButton = false; + activeItem.presSwitchButton = false; + break; } }); @@ -421,13 +458,9 @@ export class PresBox extends ViewBoxBaseComponent active = (outsideReaction?: boolean) => ((Doc.GetSelectedTool() === InkTool.None && !this.layoutDoc.isBackground) && (this.layoutDoc.forceActive || this.props.isSelected(outsideReaction) || this._isChildActive || this.props.renderDepth === 0) ? true : false) - // KEYS - @observable _selectedArray: Doc[] = []; - @observable _sortedSelectedArray: Doc[] = []; - @observable _eleArray: HTMLElement[] = []; - @observable _dragArray: HTMLElement[] = []; - - //TODO: Update to radix / quick sort + /** + * For sorting the array so that the order is maintained when it is dropped. + */ @action sortArray = (): Doc[] => { const sort: Doc[] = this._selectedArray; @@ -439,6 +472,9 @@ export class PresBox extends ViewBoxBaseComponent return sort; } + /** + * Method to get the list of selected items in the order in which they have been selected + */ @computed get listOfSelected() { const list = this._selectedArray.map((doc: Doc, index: any) => { const activeItem = Cast(doc, Doc, null); @@ -478,6 +514,7 @@ export class PresBox extends ViewBoxBaseComponent } } + // Key events when the minimized player is active @action minimizeEvents = (e: KeyboardEvent) => { e.stopPropagation(); @@ -491,7 +528,7 @@ export class PresBox extends ViewBoxBaseComponent } } - //Esc click + // Key for when the presentaiton is active (according to Selection Manager) @action keyEvents = (e: KeyboardEvent) => { e.stopPropagation(); @@ -507,7 +544,7 @@ export class PresBox extends ViewBoxBaseComponent } if (e.keyCode === 39) { // right (39) / d(68) / down(40) to go to next if (this.layoutDoc.presStatus !== "edit") this.next(); } if (e.keyCode === 32) { // spacebar to 'present' or autoplay - if (this.layoutDoc.presStatus !== "edit") this.startOrResetPres(0); + if (this.layoutDoc.presStatus !== "edit") this.startPres(0); else this.layoutDoc.presStatus = "manual"; } if (e.keyCode === 8) { // delete selected items @@ -519,15 +556,9 @@ export class PresBox extends ViewBoxBaseComponent } } - @observable private transitionTools: boolean = false; - @observable private newDocumentTools: boolean = false; - @observable private progressivizeTools: boolean = false; - @observable private moreInfoTools: boolean = false; - @observable private playTools: boolean = false; - @observable private presentTools: boolean = false; - @observable private pathBoolean: boolean = false; - @observable private expandBoolean: boolean = false; - + /** + * + */ @undoBatch @action viewPaths = async () => { @@ -551,16 +582,19 @@ export class PresBox extends ViewBoxBaseComponent const fit = srcContext?._fitToBox; } + // Adds the index in the pres path graphically @computed get order() { const order: JSX.Element[] = []; this.childDocs.forEach((doc, index) => { const targetDoc = Cast(doc.presentationTargetDoc, Doc, null); const srcContext = Cast(targetDoc.context, Doc, null); + // Case A: Document is contained within the colleciton if (this.rootDoc.presCollection === srcContext) { order.push(
{index + 1}
); + // Case B: Document is not inside of the collection } else { order.push(
@@ -571,6 +605,14 @@ export class PresBox extends ViewBoxBaseComponent return order; } + /** + * Method called for viewing paths which adds a single line with + * points at the center of each document added. + * Design choice: When this is called it sets _fitToBox as true so the + * user can have an overview of all of the documents in the collection. + * (Design needed for when documents in presentation trail are in another + * collection) + */ @computed get paths() { let pathPoints = ""; this.childDocs.forEach((doc, index) => { @@ -601,9 +643,6 @@ export class PresBox extends ViewBoxBaseComponent />); } - @action togglePath = () => this.pathBoolean = !this.pathBoolean; - @action toggleExpand = () => this.expandBoolean = !this.expandBoolean; - /** * The function that is called on click to turn fading document after presented option on/off. * It also makes sure that the option swithches from hide-after to this one, since both @@ -627,13 +666,7 @@ export class PresBox extends ViewBoxBaseComponent } } - // WHAT IS THIS? - @action - dropdownToggle = (menu: string) => { - const dropMenu = document.getElementById('presBox' + menu + 'Dropdown'); - if (dropMenu) dropMenu.style.display === 'none' ? dropMenu.style.display = 'block' : dropMenu.style.display = 'none'; - } - + // Converts seconds to ms and updates presTransition setTransitionTime = (number: String) => { const timeInMS = Number(number) * 1000; const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); @@ -641,6 +674,7 @@ export class PresBox extends ViewBoxBaseComponent if (targetDoc) targetDoc.presTransition = timeInMS; } + // Converts seconds to ms and updates presDuration setDurationTime = (number: String) => { const timeInMS = Number(number) * 1000; const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); @@ -648,6 +682,7 @@ export class PresBox extends ViewBoxBaseComponent if (targetDoc) targetDoc.presDuration = timeInMS; } + @computed get transitionDropdown() { const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null); @@ -660,17 +695,14 @@ export class PresBox extends ViewBoxBaseComponent
e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}>
Movement -
e.stopPropagation()} - // onClick={() => this.dropdownToggle('Movement')} - > +
e.stopPropagation()}> {activeItem.presMovement}
e.stopPropagation()}>
e.stopPropagation()} onClick={() => this.movementChanged('none')}>None
e.stopPropagation()} onClick={() => this.movementChanged('zoom')}>Pan and Zoom
-
e.stopPropagation()} onClick={() => this.movementChanged('nav')}>Pan
-
e.stopPropagation()} onClick={() => this.movementChanged('switch')}>Jump cut
+
e.stopPropagation()} onClick={() => this.movementChanged('pan')}>Pan
+
e.stopPropagation()} onClick={() => this.movementChanged('jump')}>Jump cut
@@ -783,8 +815,8 @@ export class PresBox extends ViewBoxBaseComponent
e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}>
-
Start automatically
-
Start manually
+
activeItem.playAuto = !activeItem.playAuto}>Play automatically
+
activeItem.playAuto = !activeItem.playAuto}>Play on next
activeItem.openDocument = !activeItem.openDocument}>Open document
@@ -838,12 +870,10 @@ export class PresBox extends ViewBoxBaseComponent
e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}>
Slide Title:

- {/*
*/} { e.stopPropagation(); runInAction(() => this.title = e.target.value); }}> - {/*
*/}
Choose type: @@ -941,40 +971,20 @@ export class PresBox extends ViewBoxBaseComponent return doc; } - // Dropdown that appears for autoplay - @computed get playDropdown() { - return ( -
e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}> -
this.startOrResetPres(this.itemIndex)}> - Present from current slide -
-
this.startOrResetPres(0)}> - Present from first slide -
-
- ); - } - // Dropdown that appears when the user wants to begin presenting (either minimize or sidebar view) @computed get presentDropdown() { return (
e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}> -
+
{ this.updateMinimize; this.layoutDoc.presStatus = "manual"; this.turnOffEdit(); }))}> Minimize
-
{ this.startOrResetPres(0); this.turnOffEdit(); }}> +
{ this.layoutDoc.presStatus = "manual"; this.turnOffEdit(); }))}> Sidebar view
); } - // For toggling the options when the user wants to select play - @action togglePlay = () => { this.playTools = !this.playTools; }; - - // For toggling the options when the user wants to select play - @action togglePresent = () => { this.presentTools = !this.presentTools; }; - // Case in which the document has keyframes to navigate to next key frame @undoBatch @action @@ -986,10 +996,6 @@ export class PresBox extends ViewBoxBaseComponent CollectionFreeFormDocumentView.setupScroll(tagDoc, 0); CollectionFreeFormDocumentView.setupKeyframes(childDocs, 0); } - // let lastFrame: number = 0; - // childDocs.forEach((doc) => { - // if (NumCast(doc.appearFrame) > lastFrame) lastFrame = NumCast(doc.appearFrame); - // }); CollectionFreeFormDocumentView.updateScrollframe(tagDoc, currentFrame); CollectionFreeFormDocumentView.updateKeyframe(childDocs, currentFrame || 0); tagDoc.currentFrame = Math.max(0, (currentFrame || 0) + 1); @@ -1027,6 +1033,9 @@ export class PresBox extends ViewBoxBaseComponent } } + /** + * Returns the collection type as a string for headers + */ @computed get stringType(): string { const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null); @@ -1587,7 +1596,7 @@ export class PresBox extends ViewBoxBaseComponent const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); if (activeItem) { return ( - <> +
{"Add new slide"}
}>
this.newDocumentTools = !this.newDocumentTools)}>
@@ -1624,7 +1633,7 @@ export class PresBox extends ViewBoxBaseComponent
*/} - +
); } else { return ( @@ -1648,13 +1657,14 @@ export class PresBox extends ViewBoxBaseComponent } } - render() { - this.childDocs.slice(); // needed to insure that the childDocs are loaded for looking up fields + /** + * Top panel containes: + * viewPicker: The option to choose between List and Slides view for the presentaiton trail + * presentPanel: The button to start the presentation / open minimized view of the presentation + */ + @computed get topPanel() { const mode = StrCast(this.rootDoc._viewType) as CollectionViewType; - // const addDocument = (doc: Doc | Doc[], relativeTo?: Doc, before?: boolean) => { - // return add(doc, relativeTo ? relativeTo : docs[i], before !== undefined ? before : false); - // }; - return
+ return (
-
this.layoutDoc.presStatus = "manual"}>
200 ? "inline-flex" : "none" }}>  Present
-
{ e.stopPropagation; this.togglePresent(); }}> +
this.layoutDoc.presStatus = "manual"}> + +
200 ? "inline-flex" : "none" }}>  Present
+
+
{ e.stopPropagation; this.presentTools = !this.presentTools; }}> {this.presentDropdown}
-
- {/* -
this.startOrResetPres(0)}> -   - -
-
{ e.stopPropagation; this.togglePlay(); }}> - - {this.playDropdown} -
- */} -
-
this.startOrResetPres(this.itemIndex)}>
-
-
-
Slide {this.itemIndex + 1} / {this.childDocs.length}
-
-
this.layoutDoc.presStatus = "edit"}> - -
-
+ {this.playButtons} +
+
+ ); + } + + @computed get playButtons() { + const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); + const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null); + // Case 1: There are still other frames and should go through all frames before going to next slide + return (
+ {/* +
this.startPres(0)}> +   + +
+
{ e.stopPropagation; this.togglePlay(); }}> + + {this.playDropdown}
+ */} +
+
this.startPres(this.itemIndex)}>
+
+
+
250 ? "inline-flex" : "none" }}> + Slide {this.itemIndex + 1} / {this.childDocs.length} + {targetDoc ?
= 0 ? "inline-flex" : "none" }}> +
{targetDoc.currentFrame}
+
{targetDoc.lastFrame}
+
: null}
-
{this.toolbar}
+
+
this.layoutDoc.presStatus = "edit"}> + +
+
); + } + + render() { + // needed to insure that the childDocs are loaded for looking up fields + this.childDocs.slice(); + const mode = StrCast(this.rootDoc._viewType) as CollectionViewType; + return
+ {this.topPanel} + {this.toolbar} {this.newDocumentToolbarDropdown}
{mode !== CollectionViewType.Invalid ? diff --git a/src/client/views/presentationview/PresElementBox.scss b/src/client/views/presentationview/PresElementBox.scss index fa70b2a41..3d730d7ac 100644 --- a/src/client/views/presentationview/PresElementBox.scss +++ b/src/client/views/presentationview/PresElementBox.scss @@ -1,3 +1,7 @@ +$light-blue: #AEDDF8; +$dark-blue: #5B9FDD; +$light-background: #ececec; + .presElementBox-item { display: grid; grid-template-columns: max-content max-content max-content; @@ -26,7 +30,7 @@ z-index: -1; width: calc(100% + 200px); height: calc(100% + 8px); - background-color: #AEDDF8; + background-color: $light-blue; } .presElementBox-highlightTop { @@ -69,7 +73,7 @@ .presElementBox-active { color: black; border-radius: 6px; - border: solid 2px #5B9FDD; + border: solid 2px $dark-blue; } .presElementBox-buttons { diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx index 11ffde9dd..092fd1fd3 100644 --- a/src/client/views/presentationview/PresElementBox.tsx +++ b/src/client/views/presentationview/PresElementBox.tsx @@ -189,7 +189,7 @@ export class PresElementBox extends ViewBoxBaseComponent "darkgrey"} + backgroundColor={this.props.backgroundColor} rootSelected={returnTrue} addDocument={returnFalse} removeDocument={returnFalse} @@ -254,11 +254,8 @@ export class PresElementBox extends ViewBoxBaseComponent { - // const ele: HTMLElement[] = PresBox.Instance._eleArray.map(doc => doc); const activeItem = this.rootDoc; const dragData = new DragManager.DocumentDragData(PresBox.Instance.sortArray().map(doc => doc)); - // let value = this.getValue(this._heading); - // value = typeof value === "string" ? `"${value}"` : value; const dragItem: HTMLElement[] = []; PresBox.Instance._dragArray.map(ele => { const drag = ele; @@ -337,7 +334,6 @@ export class PresElementBox extends ViewBoxBaseComponent
{"Duration"}
}>
300 ? "block" : "none" }}>{this.duration}
{"Remove from presentation"}
}>
e.stopPropagation()} onClick={e => { this.props.removeDocument?.(this.rootDoc); e.stopPropagation(); @@ -363,6 +359,4 @@ export class PresElementBox extends ViewBoxBaseComponent ); } -} - -// this.layoutDoc.title !== "pres element template" \ No newline at end of file +} \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 142011ffd5c9ca5aeed85ed8a74e5919e0e5a6dd Mon Sep 17 00:00:00 2001 From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com> Date: Thu, 6 Aug 2020 20:38:31 +0800 Subject: audio auto play bug fix && some more commenting --- src/client/views/.DS_Store | Bin 6148 -> 10244 bytes src/client/views/MainView.tsx | 6 +- src/client/views/PropertiesButtons.tsx | 8 +- .../views/collections/CollectionDockingView.scss | 15 ++ .../views/collections/CollectionDockingView.tsx | 30 ++-- src/client/views/nodes/PresBox.scss | 79 ++++------- src/client/views/nodes/PresBox.tsx | 151 ++++++++------------- 7 files changed, 127 insertions(+), 162 deletions(-) (limited to 'src/client/views/PropertiesButtons.tsx') diff --git a/src/client/views/.DS_Store b/src/client/views/.DS_Store index 7a8c419ee..c379549d0 100644 Binary files a/src/client/views/.DS_Store and b/src/client/views/.DS_Store differ diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 007d531c8..51137a080 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -175,10 +175,8 @@ export class MainView extends React.Component { fa.faFillDrip, fa.faLink, fa.faUnlink, fa.faBold, fa.faItalic, fa.faChevronLeft, fa.faUnderline, fa.faStrikethrough, fa.faSuperscript, fa.faSubscript, fa.faIndent, fa.faEyeDropper, fa.faPaintRoller, fa.faBars, fa.faBrush, fa.faShapes, fa.faEllipsisH, fa.faHandPaper, fa.faMap, fa.faUser, faHireAHelper, fa.faDesktop, fa.faTrashRestore, fa.faUsers, fa.faWrench, fa.faCog, fa.faMap, fa.faBellSlash, fa.faExpandAlt, fa.faArchive, fa.faBezierCurve, fa.faCircle, - fa.faLongArrowAltRight, fa.faPenFancy, fa.faAngleDoubleRight, faBuffer, fa.faExpand, fa.faUndo, fa.faSlidersH, fa.faAngleDoubleLeft); - //Pres trail icons (just for the sake of merging) - library.add(fa.faAngleUp, fa.faAngleDown, fa.faPlayCircle, fa.faClock, - fa.faRocket, fa.faExchangeAlt, faBuffer); + fa.faLongArrowAltRight, fa.faPenFancy, fa.faAngleDoubleRight, faBuffer, fa.faExpand, fa.faUndo, fa.faSlidersH, fa.faAngleDoubleLeft, fa.faAngleUp, + fa.faAngleDown, fa.faPlayCircle, fa.faClock, fa.faRocket, fa.faExchangeAlt, faBuffer); this.initEventListeners(); this.initAuthenticationRouters(); } diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx index 3392371de..55eb6c028 100644 --- a/src/client/views/PropertiesButtons.tsx +++ b/src/client/views/PropertiesButtons.tsx @@ -243,9 +243,8 @@ export class PropertiesButtons extends React.Component<{}, {}> { const scale = targetDoc._viewScale; } return !targetDoc ? (null) :
{"Pin with this view"}
} placement="top"> - <> +
{ if (targetDoc) { DockedFrameRenderer.PinDoc(targetDoc, false); @@ -262,8 +261,9 @@ export class PropertiesButtons extends React.Component<{}, {}> {
V
-
{"View"}
- + +
{"View"}
+
; } diff --git a/src/client/views/collections/CollectionDockingView.scss b/src/client/views/collections/CollectionDockingView.scss index 98babc3d2..4204ef5bb 100644 --- a/src/client/views/collections/CollectionDockingView.scss +++ b/src/client/views/collections/CollectionDockingView.scss @@ -54,6 +54,21 @@ transition: all 0.3s; } + .miniPres-button-frame { + justify-self: center; + align-self: center; + align-items: center; + display: grid; + grid-template-columns: auto auto auto; + justify-content: space-around; + font-size: 11; + margin-left: 7; + width: 30; + height: 85%; + background-color: rgba(91, 157, 221, 0.4); + border-radius: 5px; + } + .miniPres-divider { width: 0.5px; height: 80%; diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index af701bfdd..7bd79b2ef 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -870,19 +870,25 @@ export class DockedFrameRenderer extends React.Component { return currentFrame; } renderMiniPres() { - return
-
document.addEventListener("keydown", PresBox.Instance.minimizeEvents, false)}> -
-
PresBox.Instance.startOrResetPres(PresBox.Instance.itemIndex)}>
-
-
-
Slide {PresBox.Instance.itemIndex + 1} / {PresBox.Instance.childDocs.length}
-
-
EXIT
+ return ( +
document.addEventListener("keydown", PresBox.Instance.minimizeEvents, false)} + > + {
document.addEventListener("keydown", PresBox.Instance.minimizeEvents, false)}> +
+
PresBox.Instance.startAutoPres(PresBox.Instance.itemIndex)}>
+
+
+
+ Slide {PresBox.Instance.itemIndex + 1} / {PresBox.Instance.childDocs.length} + {PresBox.Instance.playButtonFrames} +
+
+
EXIT
+
}
-
; + ); } renderMiniMap() { return
; const PresBoxDocument = makeInterface(documentSchema); @@ -37,7 +38,7 @@ export class PresBox extends ViewBoxBaseComponent static Instance: PresBox; @observable _isChildActive = false; - @observable _moveOnFromAudio: boolean = false; + @observable _moveOnFromAudio: boolean = true; @observable _presTimer!: NodeJS.Timeout; @observable _selectedArray: Doc[] = []; @@ -103,7 +104,8 @@ export class PresBox extends ViewBoxBaseComponent next = () => { this.updateCurrentPresentation(); const activeNext = Cast(this.childDocs[this.itemIndex + 1], Doc, null); - const presTargetDoc = Cast(this.childDocs[this.itemIndex].presentationTargetDoc, Doc, null); + const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); + const presTargetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); const childDocs = DocListCast(presTargetDoc[Doc.LayoutFieldKey(presTargetDoc)]); const currentFrame = Cast(presTargetDoc.currentFrame, "number", null); const lastFrame = Cast(presTargetDoc.lastFrame, "number", null); @@ -119,26 +121,16 @@ export class PresBox extends ViewBoxBaseComponent if (presTargetDoc.presProgressivize) CollectionFreeFormDocumentView.updateKeyframe(childDocs, currentFrame || 0); if (presTargetDoc.zoomProgressivize) this.zoomProgressivizeNext(presTargetDoc); // Case 2: Audio or video therefore wait to play the audio or video before moving on - } else if ((presTargetDoc.type === DocumentType.VID || presTargetDoc.type === DocumentType.AUDIO) && !this._moveOnFromAudio) { - if (presTargetDoc.type === DocumentType.AUDIO) { - AudioBox.Instance.playFrom(0); - this._moveOnFromAudio = true; - } - if (presTargetDoc.type === DocumentType.VID) { - this._moveOnFromAudio = true; - } + } else if ((presTargetDoc.type === DocumentType.AUDIO) && !this._moveOnFromAudio) { + AudioBox.Instance.playFrom(0); + this._moveOnFromAudio = true; // Case 3: No more frames in current doc and next slide is defined, therefore move to next slide - } else if (activeNext !== undefined) { - if (!presTargetDoc.presProgressivize) { - const nextTagDoc = Cast(this.childDocs[this.itemIndex + 1].presentationTargetDoc, Doc, null); - const nextChildDocs = DocListCast(nextTagDoc[Doc.LayoutFieldKey(presTargetDoc)]); - nextChildDocs.forEach((doc, i) => { - doc.opacity = 1; - }); - } + } else if (this.childDocs[this.itemIndex + 1] !== undefined) { const nextSelected = this.itemIndex + 1; this.gotoDocument(nextSelected, this.itemIndex); - this._moveOnFromAudio = false; + const targetNext = Cast(activeNext.presentationTargetDoc, Doc, null); + if (activeNext && targetNext.type === DocumentType.AUDIO && activeNext.playAuto) { + } else { this._moveOnFromAudio = false }; } } @@ -318,7 +310,7 @@ export class PresBox extends ViewBoxBaseComponent //The function that starts or resets presentaton functionally, depending on presStatus of the layoutDoc @undoBatch @action - startPres = (startSlide: number) => { + startAutoPres = (startSlide: number) => { this.updateCurrentPresentation(); const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); @@ -377,13 +369,13 @@ export class PresBox extends ViewBoxBaseComponent this.turnOffEdit(); if (srcContext) { if (srcContext.miniPres) { - document.removeEventListener("keydown", this.minimizeEvents, false); srcContext.miniPres = false; CollectionDockingView.AddRightSplit(this.rootDoc); + document.removeEventListener("keydown", this.minimizeEvents, false); } else { - document.addEventListener("keydown", this.minimizeEvents, false); srcContext.miniPres = true; this.props.addDocTab?.(this.rootDoc, "close"); + document.addEventListener("keydown", this.minimizeEvents, false); } } } @@ -544,7 +536,7 @@ export class PresBox extends ViewBoxBaseComponent } if (e.keyCode === 39) { // right (39) / d(68) / down(40) to go to next if (this.layoutDoc.presStatus !== "edit") this.next(); } if (e.keyCode === 32) { // spacebar to 'present' or autoplay - if (this.layoutDoc.presStatus !== "edit") this.startPres(0); + if (this.layoutDoc.presStatus !== "edit") this.startAutoPres(0); else this.layoutDoc.presStatus = "manual"; } if (e.keyCode === 8) { // delete selected items @@ -688,7 +680,8 @@ export class PresBox extends ViewBoxBaseComponent const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null); if (activeItem && targetDoc) { const transitionSpeed = targetDoc.presTransition ? String(Number(targetDoc.presTransition) / 1000) : 0.5; - const duration = targetDoc.presDuration ? String(Number(targetDoc.presDuration) / 1000) : 2; + let duration = targetDoc.presDuration ? String(Number(targetDoc.presDuration) / 1000) : 2; + if (targetDoc.type === DocumentType.AUDIO) duration = NumCast(targetDoc.duration); const effect = targetDoc.presEffect ? targetDoc.presEffect : 'None'; activeItem.presMovement = activeItem.presMovement ? activeItem.presMovement : 'Zoom'; return ( @@ -726,8 +719,8 @@ export class PresBox extends ViewBoxBaseComponent
Slide Duration
{duration} s
- ) => { e.stopPropagation(); this.setDurationTime(e.target.value); }} /> -
+ ) => { e.stopPropagation(); this.setDurationTime(e.target.value); }} /> +
Short
Medium
Long
@@ -816,7 +809,7 @@ export class PresBox extends ViewBoxBaseComponent
activeItem.playAuto = !activeItem.playAuto}>Play automatically
-
activeItem.playAuto = !activeItem.playAuto}>Play on next
+
activeItem.playAuto = !activeItem.playAuto}>Play on next
activeItem.openDocument = !activeItem.openDocument}>Open document
@@ -923,12 +916,14 @@ export class PresBox extends ViewBoxBaseComponent if (freeform && layout) doc = this.createTemplate(layout, title); if (!freeform && !layout) doc = Docs.Create.TextDocument("", { _nativeWidth: 400, _width: 225, title: title }); const presCollection = Cast(this.layoutDoc.presCollection, Doc, null); - const data = Cast(presCollection.data, listSpec(Doc)); + const data = Cast(presCollection?.data, listSpec(Doc)); const presData = Cast(this.rootDoc.data, listSpec(Doc)); if (data && doc && presData) { data.push(doc); DockedFrameRenderer.PinDoc(doc, false); this.gotoDocument(this.childDocs.length, this.itemIndex); + } else { + this.props.addDocTab(doc as Doc, "onRight"); } } @@ -975,7 +970,7 @@ export class PresBox extends ViewBoxBaseComponent @computed get presentDropdown() { return (
e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}> -
{ this.updateMinimize; this.layoutDoc.presStatus = "manual"; this.turnOffEdit(); }))}> +
Minimize
{ this.layoutDoc.presStatus = "manual"; this.turnOffEdit(); }))}> @@ -1108,7 +1103,10 @@ export class PresBox extends ViewBoxBaseComponent } turnOffEdit = () => { - this.childDocs.forEach((doc, index) => { + this.childDocs.forEach((doc) => { + doc.editSnapZoomProgressivize = false; + doc.editZoomProgressivize = false; + doc.editScrollProgressivize = false; const targetDoc = Cast(doc.presentationTargetDoc, Doc, null); targetDoc.editSnapZoomProgressivize = false; targetDoc.editZoomProgressivize = false; @@ -1596,63 +1594,31 @@ export class PresBox extends ViewBoxBaseComponent const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); if (activeItem) { return ( -
-
{"Add new slide"}
}>
this.newDocumentTools = !this.newDocumentTools)}> +
+
{"Add new slide"}
}>
this.newDocumentTools = !this.newDocumentTools)}> +
{"View paths"}
}>
- + 1 ? this.viewPaths : undefined} />
{this.expandBoolean ? "Minimize all" : "Expand all"}
}>
{ this.toggleExpand(); this.childDocs.forEach((doc, ind) => { if (this.expandBoolean) doc.presExpandInlineButton = true; else doc.presExpandInlineButton = false; }); }}>
- {/*
*/} -
- {/*
{"Transitions"}
}>
- -
430 ? "block" : "none" }} className="toolbar-buttonText">  Transitions
- -
-
{"Progressivize"}
}>
- -
430 ? "block" : "none" }} className="toolbar-buttonText">  Progressivize
- -
-
*/} - {/*
- -
-
-
-
-
-
-
-
*/}
); } else { return ( - <> +
{"Add new slide"}
}>
this.newDocumentTools = !this.newDocumentTools)}>
- {/*
- -
-
-
-
-
-
-
-
*/} - +
); } } @@ -1674,13 +1640,16 @@ export class PresBox extends ViewBoxBaseComponent -
+
0 ? 1 : 0.3 }}> -
this.layoutDoc.presStatus = "manual"}> +
{ if (this.childDocs.length > 0) this.layoutDoc.presStatus = "manual" }}>
200 ? "inline-flex" : "none" }}>  Present
-
{ e.stopPropagation; this.presentTools = !this.presentTools; }}> +
{ + if (this.childDocs.length > 0) this.presentTools = !this.presentTools; + }))}> {this.presentDropdown}
@@ -1691,41 +1660,41 @@ export class PresBox extends ViewBoxBaseComponent ); } - @computed get playButtons() { + @computed get playButtonFrames() { const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null); + return ( + <> + {targetDoc ?
= 0 ? "inline-flex" : "none" }}> +
{targetDoc.currentFrame}
+
+
{targetDoc.lastFrame}
+
: null} + + ); + } + + @computed get playButtons() { // Case 1: There are still other frames and should go through all frames before going to next slide return (
- {/* -
this.startPres(0)}> -   - -
-
{ e.stopPropagation; this.togglePlay(); }}> - - {this.playDropdown} -
- */}
-
this.startPres(this.itemIndex)}>
+
this.startAutoPres(this.itemIndex)}>
250 ? "inline-flex" : "none" }}> Slide {this.itemIndex + 1} / {this.childDocs.length} - {targetDoc ?
= 0 ? "inline-flex" : "none" }}> -
{targetDoc.currentFrame}
-
{targetDoc.lastFrame}
-
: null} + {this.playButtonFrames}
-
this.layoutDoc.presStatus = "edit"}> - -
+ {this.props.PanelWidth() > 250 ?
this.layoutDoc.presStatus = "edit"}>EXIT
+ :
this.layoutDoc.presStatus = "edit"}> + +
}
); } render() { - // needed to insure that the childDocs are loaded for looking up fields + // needed to ensure that the childDocs are loaded for looking up fields this.childDocs.slice(); const mode = StrCast(this.rootDoc._viewType) as CollectionViewType; return
-- cgit v1.2.3-70-g09d2 From 33487aa34fd455acf5216cfee7913d6e36f390ed Mon Sep 17 00:00:00 2001 From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com> Date: Fri, 7 Aug 2020 01:35:46 +0800 Subject: presentaiton options slightly reformatted :pear: --- src/client/views/PropertiesButtons.tsx | 3 +- .../views/collections/CollectionDockingView.tsx | 3 +- .../collectionFreeForm/PropertiesView.scss | 37 +++++++++ .../collectionFreeForm/PropertiesView.tsx | 64 ++++++++-------- src/client/views/nodes/PresBox.scss | 8 +- src/client/views/nodes/PresBox.tsx | 89 ++++++++++------------ .../views/nodes/formattedText/FormattedTextBox.tsx | 19 ++--- .../views/presentationview/PresElementBox.scss | 4 +- .../views/presentationview/PresElementBox.tsx | 3 +- 9 files changed, 128 insertions(+), 102 deletions(-) (limited to 'src/client/views/PropertiesButtons.tsx') diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx index 55eb6c028..5c584d270 100644 --- a/src/client/views/PropertiesButtons.tsx +++ b/src/client/views/PropertiesButtons.tsx @@ -221,8 +221,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
DockedFrameRenderer.PinDoc(targetDoc, isPinned)}> - +
{ return (
document.addEventListener("keydown", PresBox.Instance.minimizeEvents, false)} > - {
document.addEventListener("keydown", PresBox.Instance.minimizeEvents, false)}> + {
PresBox.Instance.startAutoPres(PresBox.Instance.itemIndex)}>
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss index 5b41db90e..3ae94efb7 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss @@ -405,6 +405,43 @@ } } + + .propertiesView-presTrails { + border-bottom: 1px solid black; + //padding: 8.5px; + + .propertiesView-presTrails-title { + font-weight: bold; + font-size: 12.5px; + padding: 4px; + display: flex; + color: white; + padding-left: 8px; + background-color: rgb(51, 51, 51); + + &:hover { + cursor: pointer; + } + + .propertiesView-presTrails-title-icon { + float: right; + right: 0; + position: absolute; + margin-left: 2px; + margin-right: 9px; + + &:hover { + cursor: pointer; + } + } + } + + .propertiesView-presTrails-content { + font-size: 10px; + padding: 10px; + margin-left: 5px; + } + } } .inking-button { diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx index 89f48fc65..cef2241c9 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx @@ -71,11 +71,10 @@ export class PropertiesView extends React.Component { @observable openAppearance: boolean = true; @observable openTransform: boolean = true; //Pres Trails booleans: - @observable openAddSlide: boolean = true; - @observable openPresentationTools: boolean = true; - @observable openPresTransitions: boolean = true; - @observable openPresProgressivize: boolean = true; - @observable openSlideOptions: boolean = true; + @observable openPresTransitions: boolean = false; + @observable openPresProgressivize: boolean = false; + @observable openAddSlide: boolean = false; + @observable openSlideOptions: boolean = false; @observable inActions: boolean = false; @observable _controlBtn: boolean = false; @@ -874,6 +873,7 @@ export class PropertiesView extends React.Component {
; } if (this.isPres) { + const selectedItem: boolean = PresBox.Instance._selectedArray.length > 0; return
Presentation @@ -890,57 +890,57 @@ export class PropertiesView extends React.Component {
-
-
runInAction(() => { this.openAddSlide = !this.openAddSlide; })} - style={{ backgroundColor: this.openAddSlide ? "black" : "" }}> -     Add new slide -
- -
-
- {this.openAddSlide ?
- {PresBox.Instance.newDocumentDropdown} -
: null} -
-
-
+
runInAction(() => { this.openPresTransitions = !this.openPresTransitions; })} style={{ backgroundColor: this.openPresTransitions ? "black" : "" }}>     Transitions -
+
- {this.openPresTransitions ?
+ {this.openPresTransitions ?
{PresBox.Instance.transitionDropdown}
: null} -
-
-
} + {!selectedItem ? (null) :
+
runInAction(() => { this.openPresProgressivize = !this.openPresProgressivize; })} style={{ backgroundColor: this.openPresProgressivize ? "black" : "" }}>     Progressivize -
+
- {this.openPresProgressivize ?
+ {this.openPresProgressivize ?
{PresBox.Instance.progressivizeDropdown}
: null} -
-
-
} + {!selectedItem ? (null) :
+
runInAction(() => { this.openSlideOptions = !this.openSlideOptions; })} style={{ backgroundColor: this.openSlideOptions ? "black" : "" }}>     {PresBox.Instance.stringType} options -
+
- {this.openSlideOptions ?
+ {this.openSlideOptions ?
{PresBox.Instance.optionsDropdown}
: null} +
} +
+
runInAction(() => { this.openAddSlide = !this.openAddSlide; })} + style={{ backgroundColor: this.openAddSlide ? "black" : "" }}> +     Add new slide +
+ +
+
+ {this.openAddSlide ?
+ {PresBox.Instance.newDocumentDropdown} +
: null}
if (srcContext.miniPres) { srcContext.miniPres = false; CollectionDockingView.AddRightSplit(this.rootDoc); - document.removeEventListener("keydown", this.minimizeEvents, false); } else { srcContext.miniPres = true; this.props.addDocTab?.(this.rootDoc, "close"); - document.addEventListener("keydown", this.minimizeEvents, false); } } } @@ -506,20 +504,6 @@ export class PresBox extends ViewBoxBaseComponent } } - // Key events when the minimized player is active - @action - minimizeEvents = (e: KeyboardEvent) => { - e.stopPropagation(); - e.preventDefault(); - if (e.keyCode === 27) { // Escape key - this.layoutDoc.presStatus = "edit"; - } if (e.keyCode === 37) { // left(37) / a(65) / up(38) to go back - this.back(); - } if (e.keyCode === 39) { // right (39) / d(68) / down(40) to go to next - this.next(); - } - } - // Key for when the presentaiton is active (according to Selection Manager) @action keyEvents = (e: KeyboardEvent) => { @@ -531,10 +515,10 @@ export class PresBox extends ViewBoxBaseComponent else this.layoutDoc.presStatus = "edit"; } if ((e.metaKey || e.altKey) && e.keyCode === 65) { // Ctrl-A to select all if (this.layoutDoc.presStatus === "edit") this._selectedArray = this.childDocs; - } if (e.keyCode === 37) { // left(37) / a(65) / up(38) to go back - if (this.layoutDoc.presStatus !== "edit") this.back(); - } if (e.keyCode === 39) { // right (39) / d(68) / down(40) to go to next - if (this.layoutDoc.presStatus !== "edit") this.next(); + } if (e.keyCode === 37 || e.keyCode === 38) { // left(37) / a(65) / up(38) to go back + this.back(); + } if (e.keyCode === 39 || e.keyCode === 40) { // right (39) / d(68) / down(40) to go to next + this.next(); } if (e.keyCode === 32) { // spacebar to 'present' or autoplay if (this.layoutDoc.presStatus !== "edit") this.startAutoPres(0); else this.layoutDoc.presStatus = "manual"; @@ -720,7 +704,7 @@ export class PresBox extends ViewBoxBaseComponent
{duration} s
) => { e.stopPropagation(); this.setDurationTime(e.target.value); }} /> -
+
Short
Medium
Long
@@ -814,6 +798,20 @@ export class PresBox extends ViewBoxBaseComponent
activeItem.openDocument = !activeItem.openDocument}>Open document
+
+
{ + activeItem.presPinView = !activeItem.presPinView; + if (activeItem.presPinView) { + const x = targetDoc._panX; + const y = targetDoc._panY; + const scale = targetDoc._viewScale; + activeItem.presPinViewX = x; + activeItem.presPinViewY = y; + activeItem.presPinViewScale = scale; + } + }}>Presentation pin view
+
Store original website
@@ -1592,35 +1590,26 @@ export class PresBox extends ViewBoxBaseComponent @computed get toolbar() { const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); - if (activeItem) { - return ( -
-
{"Add new slide"}
}>
this.newDocumentTools = !this.newDocumentTools)}> - - -
-
-
{"View paths"}
}>
- 1 ? this.viewPaths : undefined} /> -
-
{this.expandBoolean ? "Minimize all" : "Expand all"}
}> -
{ this.toggleExpand(); this.childDocs.forEach((doc, ind) => { if (this.expandBoolean) doc.presExpandInlineButton = true; else doc.presExpandInlineButton = false; }); }}> - -
- -
-
- ); - } else { - return ( -
-
{"Add new slide"}
}>
this.newDocumentTools = !this.newDocumentTools)}> - - -
-
- ); - } + return ( +
+
{"Add new slide"}
}>
this.newDocumentTools = !this.newDocumentTools)}> + + +
+
+
{"View paths"}
}> +
1 ? 1 : 0.3 }} className={`toolbar-button ${this.pathBoolean ? "active" : ""}`} onClick={this.childDocs.length > 1 ? this.viewPaths : undefined}> + +
+ +
{this.expandBoolean ? "Minimize all" : "Expand all"}
}> +
0 ? 1 : 0.3 }} className={`toolbar-button ${this.expandBoolean ? "active" : ""}`} onClick={() => { if (this.childDocs.length > 0) this.toggleExpand(); this.childDocs.forEach((doc, ind) => { if (this.expandBoolean) doc.presExpandInlineButton = true; else doc.presExpandInlineButton = false; }); }}> + +
+ +
+
+ ); } /** diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index af4bd77c7..cc37cf586 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -577,7 +577,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp const mainBulletText: string[] = []; const mainBulletList: Doc[] = []; if (list) { - const newBullets: Doc[] = this.recursiveProgressivize(1, list); + const newBullets: Doc[] = this.recursiveProgressivize(1, list)[0]; mainBulletList.push.apply(mainBulletList, newBullets); } console.log(mainBulletList.length); @@ -591,7 +591,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp this.props.addDocument?.(doc); } - recursiveProgressivize = (nestDepth: number, list: HTMLCollectionOf, d?: number, y?: number, before?: string): Doc[] => { + recursiveProgressivize = (nestDepth: number, list: HTMLCollectionOf, d?: number, y?: number, before?: string): [Doc[], number] => { const mainBulletList: Doc[] = []; let b = d ? d : 0; let yLoc = y ? y : 0; @@ -607,29 +607,30 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp if (listItem.childElementCount > 1) { b++; nestCount++; - count = before ? count + nestCount + "." : nestCount + "."; yLoc += height; + count = before ? count + nestCount + "." : nestCount + "."; const text = listItem.getElementsByTagName("p")[0].innerText; const length = text.length; - const bullet1 = Docs.Create.TextDocument(count + " " + text, { title: "Slide text", _width: width, _height: height, x: xLoc, y: 10 + (yLoc), _fontSize: fontSize, backgroundColor: "rgba(0,0,0,0)", appearFrame: d ? d : b }); + const bullet1 = Docs.Create.TextDocument(count + " " + text, { title: "Slide text", _width: width, _autoHeight: true, x: xLoc, y: (yLoc), _fontSize: fontSize, backgroundColor: "rgba(0,0,0,0)", appearFrame: d ? d : b }); + // yLoc += NumCast(bullet1._height); mainBulletList.push(bullet1); const newList = this.recursiveProgressivize(nestDepth + 1, listItem.getElementsByTagName("li"), b, yLoc, count); - mainBulletList.push.apply(mainBulletList, newList); - b += newList.length; + mainBulletList.push.apply(mainBulletList, newList[0]); yLoc += newList.length * (55 - ((nestDepth + 1) * 5)); } else { b++; nestCount++; - count = before ? count + nestCount + "." : nestCount + "."; yLoc += height; + count = before ? count + nestCount + "." : nestCount + "."; const text = listItem.innerText; const length = text.length; - const bullet1 = Docs.Create.TextDocument(count + " " + text, { title: "Slide text", _width: width, _height: height, x: xLoc, y: 10 + (yLoc), _fontSize: fontSize, backgroundColor: "rgba(0,0,0,0)", appearFrame: d ? d : b }); + const bullet1 = Docs.Create.TextDocument(count + " " + text, { title: "Slide text", _width: width, _autoHeight: true, x: xLoc, y: (yLoc), _fontSize: fontSize, backgroundColor: "rgba(0,0,0,0)", appearFrame: d ? d : b }); + // yLoc += NumCast(bullet1._height); mainBulletList.push(bullet1); } } }); - return mainBulletList; + return [mainBulletList, yLoc]; } recordDictation = () => { diff --git a/src/client/views/presentationview/PresElementBox.scss b/src/client/views/presentationview/PresElementBox.scss index 3d730d7ac..1e776384a 100644 --- a/src/client/views/presentationview/PresElementBox.scss +++ b/src/client/views/presentationview/PresElementBox.scss @@ -4,7 +4,7 @@ $light-background: #ececec; .presElementBox-item { display: grid; - grid-template-columns: max-content max-content max-content; + grid-template-columns: max-content max-content max-content max-content; background-color: #d5dce2; font-family: Roboto; letter-spacing: normal; @@ -122,7 +122,7 @@ $light-background: #ececec; padding-left: 10px; padding-right: 10px; letter-spacing: normal; - max-width: max-content; + width: max-content; text-overflow: ellipsis; overflow: hidden; white-space: pre; diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx index 816577847..a6dbb76ef 100644 --- a/src/client/views/presentationview/PresElementBox.tsx +++ b/src/client/views/presentationview/PresElementBox.tsx @@ -326,11 +326,12 @@ export class PresElementBox extends ViewBoxBaseComponent {`${this.indexInPres + 1}.`}
-
+
{`${this.targetDoc?.title}`}
{"Movement speed"}
}>
300 ? "block" : "none" }}>{this.transition}
{"Duration"}
}>
300 ? "block" : "none" }}>{this.duration}
 +
{"Presentation pin view"}
}>
300 ? "block" : "none" }}>V
{"Remove from presentation"}
}>
{ -- cgit v1.2.3-70-g09d2