diff options
| -rw-r--r-- | src/client/views/MainView.tsx | 4 | ||||
| -rw-r--r-- | src/client/views/PropertiesButtons.scss | 9 | ||||
| -rw-r--r-- | src/client/views/PropertiesButtons.tsx | 99 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionMenu.tsx | 44 | ||||
| -rw-r--r-- | src/client/views/collections/collectionFreeForm/PropertiesView.scss | 21 | ||||
| -rw-r--r-- | src/client/views/collections/collectionFreeForm/PropertiesView.tsx | 31 | ||||
| -rw-r--r-- | src/client/views/nodes/DocumentView.tsx | 13 | ||||
| -rw-r--r-- | src/client/views/nodes/formattedText/RichTextMenu.tsx | 47 |
8 files changed, 192 insertions, 76 deletions
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} */} <CollectionMenu /> <FormatShapePane /> - <RichTextMenu key="rich" /> + {/* <RichTextMenu key="rich" /> */} {LinkDescriptionPopup.descriptionPopup ? <LinkDescriptionPopup /> : null} {DocumentLinksButton.EditLink ? <LinkMenu location={DocumentLinksButton.EditLinkLoc} docView={DocumentLinksButton.EditLink} addDocTab={DocumentLinksButton.EditLink.props.addDocTab} changeFlyout={emptyFunction} /> : (null)} {LinkDocPreview.LinkInfo ? <LinkDocPreview location={LinkDocPreview.LinkInfo.Location} backgroundColor={this.defaultBackgroundColors} diff --git a/src/client/views/PropertiesButtons.scss b/src/client/views/PropertiesButtons.scss index 305688bdb..c3fea5e29 100644 --- a/src/client/views/PropertiesButtons.scss +++ b/src/client/views/PropertiesButtons.scss @@ -53,6 +53,15 @@ $linkGap : 3px; overflow-x: visible; } +.onClickFlyout-editScript { + text-align: center; + border: 0.5px solid grey; + background-color: rgb(230, 230, 230); + border-radius: 9px; + padding: 4px; +} + + .propertiesButtons-button { pointer-events: auto; padding-right: 5px; diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx index a512b3232..f1cb24425 100644 --- a/src/client/views/PropertiesButtons.tsx +++ b/src/client/views/PropertiesButtons.tsx @@ -26,6 +26,7 @@ import { SelectionManager } from '../util/SelectionManager'; import SharingManager from '../util/SharingManager'; import { GooglePhotos } from '../apis/google_docs/GooglePhotosClientUtils'; import { ImageField } from '../../fields/URLField'; +import { undoBatch, UndoManager } from '../util/UndoManager'; const higflyout = require("@hig/flyout"); export const { anchorPoints } = higflyout; export const Flyout = higflyout.default; @@ -80,6 +81,8 @@ export class PropertiesButtons extends React.Component<{}, {}> { @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 <div><form> <div className="radio"> <label> - <input type="radio" value="option1" checked={true} /> - Enter Portal - </label> + <input type="radio" value="nothing" + checked={this.onClick === 'nothing'} + onChange={this.handleOptionChange} /> + Select Document + </label> </div> <div className="radio"> <label> - <input type="radio" value="option2" /> - Toggle Detail - </label> + <input type="radio" value="enterPortal" + checked={this.onClick === 'enterPortal'} + onChange={this.handleOptionChange} /> + Enter Portal + </label> </div> <div className="radio"> <label> - <input type="radio" value="option3" /> - Do Nothing - </label> + <input type="radio" value="toggleDetail" + checked={this.onClick === 'toggleDetail'} + onChange={this.handleOptionChange} /> + Toggle Detail + </label> </div> <div className="radio"> <label> - <input type="radio" value="option3" /> - Follow Link in Place - </label> + <input type="radio" value="linkInPlace" + checked={this.onClick === 'linkInPlace'} + onChange={this.handleOptionChange} /> + Follow Link + </label> </div> <div className="radio"> <label> - <input type="radio" value="option3" /> - Follow Link on Right - </label> + <input type="radio" value="linkOnRight" + checked={this.onClick === 'linkOnRight'} + onChange={this.handleOptionChange} /> + Open Link on Right + </label> </div> - <div className="radio"> - <label> - <input type="radio" value="option3" /> - Edit onClick Script - </label> - </div> - </form> </div>; - - // 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" }); + </form> + <div onPointerDown={this.editOnClickScript} className="onClickFlyout-editScript"> Edit onClick Script</div> + </div>; } @computed @@ -452,9 +481,9 @@ export class PropertiesButtons extends React.Component<{}, {}> { <div className="propertiesButtons-button"> {this.templateButton} </div> - <div className="propertiesButtons-button"> + {/* <div className="propertiesButtons-button"> {this.metadataButton} - </div> + </div> */} <div className="propertiesButtons-button"> {this.pinButton} </div> @@ -470,14 +499,14 @@ export class PropertiesButtons extends React.Component<{}, {}> { <div className="propertiesButtons-button"> {this.deleteButton} </div> + <div className="propertiesButtons-button"> + {this.onClickButton} + </div> </div> <div className="propertiesButtons"> <div className="propertiesButtons-button"> {this.sharingButton} </div> - <div className="propertiesButtons-button"> - {this.onClickButton} - </div> <div className="propertiesButtons-button" style={{ display: !considerPush ? "none" : "" }}> {this.considerGoogleDocsPush} </div> 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<CollectionMenu @computed get childDocs() { return DocListCast(this.dataField); } + + @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; + } + @undoBatch @action nextKeyframe = (): void => { @@ -469,25 +485,27 @@ export class CollectionFreeFormViewChrome extends React.Component<CollectionMenu render() { return this.Document.isAnnotationOverlay ? (null) : <div className="collectionFreeFormMenu-cont"> - <div key="map" title="mini map" className="backKeyframe" onClick={this.miniMap}> + {!!!this.isText ? <div key="map" title="mini map" className="backKeyframe" onClick={this.miniMap}> <FontAwesomeIcon icon={"map"} size={"lg"} /> - </div> - <div key="back" title="back frame" className="backKeyframe" onClick={this.prevKeyframe}> + </div> : null} + {!!!this.isText ? <div key="back" title="back frame" className="backKeyframe" onClick={this.prevKeyframe}> <FontAwesomeIcon icon={"caret-left"} size={"lg"} /> - </div> - <div key="num" title="toggle view all" className="numKeyframe" style={{ backgroundColor: this.Document.editing ? "#759c75" : "#c56565" }} + </div> : null} + {!!!this.isText ? <div key="num" title="toggle view all" className="numKeyframe" style={{ backgroundColor: this.Document.editing ? "#759c75" : "#c56565" }} onClick={action(() => this.Document.editing = !this.Document.editing)} > {NumCast(this.Document.currentFrame)} - </div> - <div key="fwd" title="forward frame" className="fwdKeyframe" onClick={this.nextKeyframe}> + </div> : null} + {!!!this.isText ? <div key="fwd" title="forward frame" className="fwdKeyframe" onClick={this.nextKeyframe}> <FontAwesomeIcon icon={"caret-right"} size={"lg"} /> - </div> + </div> : 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 ? <RichTextMenu key="rich" /> : null} - {this.widthPicker} - {this.colorPicker} - {this.fillPicker} - {this.drawButtons} - {this.formatPane} </div>; } } 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<PropertiesViewProps> { @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<PropertiesViewProps> { } @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<PropertiesViewProps> { </div>; } + @computed get fieldsCheckbox() { + return <Checkbox + color="primary" + onChange={this.toggleCheckbox} + checked={this.layoutFields} + />; + } + + @action + toggleCheckbox = () => { + this.layoutFields = !this.layoutFields; + } + render() { if (!this.selectedDoc) { @@ -247,7 +262,15 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { </div> </div> <div className="propertiesView-fields"> - <div className="propertiesView-fields-title"> Fields</div> + <div className="propertiesView-fields-title"> + <div className="propertiesView-fields-title-name"> + Fields + </div> + <div className="propertiesView-fields-title-checkbox"> + {this.fieldsCheckbox} + <div className="propertiesView-fields-title-checkbox-text">Layout</div> + </div> + </div> <div className="propertiesView-fields-content"> {this.expandedField} </div> </div> <div className="propertiesView-layout"> 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<DocumentViewProps, Document>(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<DocumentViewProps, Document>(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 = <div className="antimodeMenu-row" key="row 1" style={{ display: this.collapsed ? "none" : undefined }}>{[ - !this.collapsed ? this.getDragger() : (null), - !this.Pinned ? (null) : <div key="frag1"> {[ - 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)), - <div className="richTextMenu-divider" key="divider" /> - ]}</div>, + //!this.collapsed ? this.getDragger() : (null), + // !this.Pinned ? (null) : <div key="frag1"> {[ + // 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)), + // <div className="richTextMenu-divider" key="divider" /> + // ]}</div>, + 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(), <div className="richTextMenu-divider" key="divider 2" />, 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), ]}</div>; const row2 = <div className="antimodeMenu-row row-2" key="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)), <div className="richTextMenu-divider" key="divider 4" />, 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), <div className="richTextMenu-divider" key="divider 5" />,]} </div> - <div key="collapser"> - {/* <div key="collapser"> + {/* <div key="collapser"> + {<div key="collapser"> <button className="antimodeMenu-button" key="collapse menu" title="Collapse menu" onClick={this.toggleCollapse} style={{ backgroundColor: this.collapsed ? "#121212" : "", width: 25 }}> <FontAwesomeIcon icon="chevron-left" size="lg" style={{ transitionProperty: "transform", transitionDuration: "0.3s", transform: `rotate(${this.collapsed ? 180 : 0}deg)` }} /> </button> - </div> */} + </div> } <button className="antimodeMenu-button" key="pin menu" title="Pin menu" onClick={this.toggleMenuPin} style={{ backgroundColor: this.Pinned ? "#121212" : "", display: this.collapsed ? "none" : undefined }}> <FontAwesomeIcon icon="thumbtack" size="lg" style={{ transitionProperty: "transform", transitionDuration: "0.1s", transform: `rotate(${this.Pinned ? 45 : 0}deg)` }} /> </button> - </div> + </div> */} </div>; return ( |