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 =