From 82f319ddf3e70095b04473ecce8790f4524e8939 Mon Sep 17 00:00:00 2001 From: bobzel Date: Tue, 16 Mar 2021 12:03:20 -0400 Subject: cleaned up propertiesbuttons a bit. added lockTransform button. changed chromeStatus disabled to be undefined. --- src/client/views/PropertiesButtons.tsx | 300 +++++++++------------------------ 1 file changed, 79 insertions(+), 221 deletions(-) (limited to 'src/client/views/PropertiesButtons.tsx') diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx index 46d5b2f71..e93abb67a 100644 --- a/src/client/views/PropertiesButtons.tsx +++ b/src/client/views/PropertiesButtons.tsx @@ -3,10 +3,10 @@ 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 { Doc } from "../../fields/Doc"; +import { Doc, Opt } from "../../fields/Doc"; import { InkField } from '../../fields/InkField'; import { RichTextField } from '../../fields/RichTextField'; -import { Cast, NumCast, StrCast } from "../../fields/Types"; +import { BoolCast, Cast, NumCast, StrCast } from "../../fields/Types"; import { ImageField } from '../../fields/URLField'; import { GoogleAuthenticationManager } from '../apis/GoogleAuthenticationManager'; import { Pulls, Pushes } from '../apis/google_docs/GoogleApiClientUtils'; @@ -16,10 +16,11 @@ import { DocumentType } from '../documents/DocumentTypes'; import { SelectionManager } from '../util/SelectionManager'; import { undoBatch } from '../util/UndoManager'; import { CollectionDockingView } from './collections/CollectionDockingView'; +import { CollectionViewType } from './collections/CollectionView'; +import { DocumentView } from './nodes/DocumentView'; import { GoogleRef } from "./nodes/formattedText/FormattedTextBox"; import './PropertiesButtons.scss'; import React = require("react"); -import { CollectionViewType } from './collections/CollectionView'; const higflyout = require("@hig/flyout"); export const { anchorPoints } = higflyout; export const Flyout = higflyout.default; @@ -40,26 +41,19 @@ export class PropertiesButtons extends React.Component<{}, {}> { private _pushAnimating = false; private _pullColorAnimating = false; + public static hasPushedHack = false; + public static hasPulledHack = false; + + @observable public static Instance: PropertiesButtons; + @observable private openHover = UtilityButtonState.Default; @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; - - @computed get selectedDoc() { return SelectionManager.SelectedSchemaDoc() || this.selectedDocumentView?.rootDoc; } - @computed get selectedDocumentView() { - if (SelectionManager.Views().length) { - return SelectionManager.Views()[0]; - } else return undefined; - } - + @computed get selectedDocumentView() { return SelectionManager.Views().length ? SelectionManager.Views()[0] : undefined; } @computed get onClick() { return this.selectedDoc?.onClickBehavior ? this.selectedDoc?.onClickBehavior : "nothing"; } public startPullOutcome = action((success: boolean) => { @@ -185,27 +179,62 @@ export class PropertiesButtons extends React.Component<{}, {}> { ; } - @action @undoBatch - onLock = () => { - SelectionManager.Views().forEach(dv => dv.docView?.toggleLockPosition()); + @action + makeMask = (inkDoc: Doc) => { + inkDoc.isInkMask = !inkDoc.isInkMask; + inkDoc._backgroundColor = inkDoc.isInkMask ? "rgba(0,0,0,0.7)" : undefined; + inkDoc.mixBlendMode = inkDoc.isInkMask ? "hard-light" : undefined; + inkDoc.color = "#9b9b9bff"; + inkDoc._stayInCollection = inkDoc.isInkMask ? true : undefined; } - - @computed - get lockButton() { + propToggleBtn = (label: string, property: string, tooltip: (on?: any) => string, icon: (on: boolean) => string, onClick?: (dv: Opt, doc: Doc, property: string) => void) => { const targetDoc = this.selectedDoc; + const onPropToggle = (dv: Opt, doc: Doc, prop: string) => (dv?.layoutDoc || doc)[prop] = (dv?.layoutDoc || doc)[prop] ? undefined : true; return !targetDoc ? (null) : {`${this.selectedDoc?._lockedPosition ? "Unlock" : "Lock"} Position`}} placement="top"> + title={
{tooltip(targetDoc?.[property])}
} placement="top">
-
- +
{ + if (SelectionManager.Views().length) { + SelectionManager.Views().forEach(dv => (onClick ?? onPropToggle)(dv, dv.rootDoc, property)); + } else if (targetDoc) (onClick ?? onPropToggle)(undefined, targetDoc, property); + })} > +
-
Position
+
{label}
; } + @computed get lockButton() { + return this.propToggleBtn("Position", "_lockedPosition", on => `${on ? "Unlock" : "Lock"} XY location on freeform view`, on => on ? "unlock" : "lock"); + } + @computed get panButton() { + return this.propToggleBtn("Pan", "_lockedTransform", on => `${on ? "Unlock" : "Lock"} panning of view`, on => on ? "unlock" : "lock"); + } + @computed get dictationButton() { + return this.propToggleBtn("Dictate", "_showAudio", on => `${on ? "Hide" : "Show"} dictation/recording controls`, () => "microphone"); + } + @computed get maskButton() { + return this.propToggleBtn("Mask", "isInkMask", on => on ? "Make plain ink" : "Make highlight mask", () => "paint-brush", (dv, doc) => this.makeMask(dv?.layoutDoc || doc)); + } + @computed get clustersButton() { + return this.propToggleBtn("Clusters", "_useClusters", on => `${on ? "Hide" : "Show"} clusters`, () => "braille"); + } + @computed get fitContentButton() { + return this.propToggleBtn("Fit All", "_fitToBox", on => `${on ? "Don't" : ""} fit content to container visible area`, on => on ? "expand-arrows-alt" : "compress-arrows-alt"); + } + @computed get fitWidthButton() { + return this.propToggleBtn("Fit Wid", "_fitWidth", on => `${on ? "Don't" : ""} fit content to width of container`, on => on ? "arrows-alt-h" : "arrows-alt-h"); + } + @computed get captionButton() { + return this.propToggleBtn("Caption", "_showCaption", on => `${on ? "Hide" : "Show"} caption footer`, on => "closed-captioning", (dv, doc) => (dv?.rootDoc || doc)._showCaption = (dv?.rootDoc || doc)._showCaption === undefined ? "caption" : undefined); + } + @computed get chromeButton() { + return this.propToggleBtn("Controls", "_chromeStatus", on => `${on === "enabled" ? "Hide" : "Show"} editing UI`, on => "edit", (dv, doc) => (dv?.rootDoc || doc)._chromeStatus = (dv?.rootDoc || doc)._chromeStatus === undefined ? "enabled" : undefined); + } + @computed get titleButton() { + return this.propToggleBtn("Title", "_showTitle", on => "Switch between title styles", on => "text-width", (dv, doc) => (dv?.rootDoc || doc)._showTitle = !(dv?.rootDoc || doc)._showTitle ? "title" : (dv?.rootDoc || doc)._showTitle === "title" ? "title:hover" : undefined); + } @computed get downloadButton() { @@ -221,117 +250,35 @@ export class PropertiesButtons extends React.Component<{}, {}> { ; } - @undoBatch - setDictation = () => SelectionManager.Views().forEach(dv => dv.rootDoc._showAudio = !dv.rootDoc._showAudio) - - @computed - get dictationButton() { - const targetDoc = this.selectedDoc; - return !targetDoc ? (null) : {"Show Dictation Controls"}
} placement="top"> -
-
- -
-
Dictate
-
- ; - } - - - @undoBatch - @action - setTitle = () => { - SelectionManager.Views().forEach(dv => dv.rootDoc._showTitle = !dv.rootDoc._showTitle ? "title" : dv.rootDoc._showTitle === "title" ? "title:hover" : undefined); - } - - @computed - get titleButton() { - const targetDoc = this.selectedDoc; - return !targetDoc ? (null) : {"Show Title Header"}} placement="top"> -
-
- -
-
Title
-
- ; - } - - @undoBatch - @action - setCaption = () => { - SelectionManager.Views().forEach(dv => { - dv.rootDoc._showCaption = dv.rootDoc._showCaption === undefined ? "caption" : undefined; - console.log("caption = " + dv.rootDoc._showCaption); - }); - } - - @computed - get captionButton() { - const targetDoc = this.selectedDoc; - return !targetDoc ? (null) : {"Show Caption Footer"}} placement="top"> -
-
- -
-
Caption
-
- ; - } - - @undoBatch - @action - setChrome = () => { - SelectionManager.Views().forEach(dv => dv.rootDoc._chromeStatus = dv.rootDoc._chromeStatus === "disabled" ? "enabled" : "disabled"); - } - @computed - get chromeButton() { - const targetDoc = this.selectedDoc; - return !targetDoc ? (null) : {"Show Editing UI"}} placement="top"> + get onClickButton() { + return !this.selectedDoc ? (null) :
Choose onClick behavior
} placement="top">
-
- +
+ +
e.stopPropagation()} > + {} +
+
-
Controls
+
onclick
; } - @computed - get onClickButton() { - if (this.selectedDoc) { - return
Choose onClick behavior
} placement="top"> -
-
- -
e.stopPropagation()} > - {} -
- -
-
onclick
-
- ; - } else { - return null; - } - } - @undoBatch @action handleOptionChange = (e: any) => { - const value = e.target.value; this.selectedDoc && (this.selectedDoc.onClickBehavior = e.target.value); - SelectionManager.Views().forEach(dv => { - dv.docView?.noOnClick(); - switch (value) { - case "enterPortal": dv.docView?.makeIntoPortal(); break; - case "toggleDetail": dv.docView?.toggleDetail(); break; - case "linkInPlace": dv.docView?.toggleFollowLink("inPlace", true, false); break; - case "linkOnRight": dv.docView?.toggleFollowLink("add:right", false, false); break; + SelectionManager.Views().filter(dv => dv.docView).map(dv => dv.docView!).forEach(docView => { + docView.noOnClick(); + switch (e.target.value) { + case "enterPortal": docView.makeIntoPortal(); break; + case "toggleDetail": docView.toggleDetail(); break; + case "linkInPlace": docView.toggleFollowLink("inPlace", true, false); break; + case "linkOnRight": docView.toggleFollowLink("add:right", false, false); break; } }); } @@ -407,98 +354,6 @@ export class PropertiesButtons extends React.Component<{}, {}> { ; } - @computed - get clustersButton() { - const targetDoc = this.selectedDoc; - return !targetDoc ? (null) :
{this.selectedDoc?._useClusters ? "Stop Showing Clusters" : "Show Clusters"}
} placement="top"> -
-
- -
-
clusters
-
- ; - } - - @action @undoBatch - changeFitToBox = () => { - if (this.selectedDoc) { - if (SelectionManager.Views().length) SelectionManager.Views().forEach(dv => dv.rootDoc._fitToBox = !dv.rootDoc._fitToBox); - else this.selectedDoc._fitToBox = !this.selectedDoc._fitToBox; - } - } - - @action @undoBatch - changeFitWidth = () => { - if (this.selectedDoc) { - if (SelectionManager.Views().length) SelectionManager.Views().forEach(dv => dv.rootDoc._fitWidth = !dv.rootDoc._fitWidth); - else this.selectedDoc._fitWidth = !this.selectedDoc._fitWidth; - } - } - - @action @undoBatch - changeClusters = () => { - if (this.selectedDoc) { - if (SelectionManager.Views().length) SelectionManager.Views().forEach(dv => dv.rootDoc._useClusters = !dv.rootDoc._useClusters); - else this.selectedDoc._useClusters = !this.selectedDoc._useClusters; - } - } - - @computed - get fitContentButton() { - const targetDoc = this.selectedDoc; - return !targetDoc ? (null) :
{this.selectedDoc?._fitToBox ? "Stop Fitting Content" : "Fit Content"}
} placement="top"> -
-
- -
-
{this.selectedDoc?._fitToBox ? "unfit" : "fit"}
-
- ; - } - - @computed - get fitWidthButton() { - const targetDoc = this.selectedDoc; - return !targetDoc ? (null) :
{this.selectedDoc?._fitWidth ? "Stop Fitting Width" : "Fit Width"}
} placement="top"> -
-
- -
-
{this.selectedDoc?._fitWidth ? "unfit" : "fit"}
-
- ; - } - - @undoBatch - @action - private makeMask = () => { - if (this.selectedDoc) { - this.selectedDoc._backgroundColor = "rgba(0,0,0,0.7)"; - this.selectedDoc.mixBlendMode = "hard-light"; - this.selectedDoc.color = "#9b9b9bff"; - this.selectedDoc._stayInCollection = true; - this.selectedDoc.isInkMask = true; - } - } - - @computed - get maskButton() { - const targetDoc = this.selectedDoc; - return !targetDoc ? (null) :
Make Mask
} placement="top"> -
-
- -
-
mask
-
- ; - } - render() { if (!this.selectedDoc) return (null); @@ -524,6 +379,9 @@ export class PropertiesButtons extends React.Component<{}, {}> {
{this.lockButton}
+
+ {this.panButton} +
{this.dictationButton}
@@ -554,4 +412,4 @@ export class PropertiesButtons extends React.Component<{}, {}> {
; } -} +} \ No newline at end of file -- cgit v1.2.3-70-g09d2