diff options
Diffstat (limited to 'src/client/views')
| -rw-r--r-- | src/client/views/DocumentButtonBar.tsx | 2 | ||||
| -rw-r--r-- | src/client/views/MainView.tsx | 20 | ||||
| -rw-r--r-- | src/client/views/MarqueeAnnotator.tsx | 2 | ||||
| -rw-r--r-- | src/client/views/collections/TreeView.tsx | 8 | ||||
| -rw-r--r-- | src/client/views/nodes/AudioBox.scss | 364 | ||||
| -rw-r--r-- | src/client/views/nodes/AudioBox.tsx | 134 | ||||
| -rw-r--r-- | src/client/views/nodes/DocumentView.tsx | 5 | ||||
| -rw-r--r-- | src/client/views/nodes/button/FontIconBox.scss | 16 | ||||
| -rw-r--r-- | src/client/views/nodes/button/FontIconBox.tsx | 23 | ||||
| -rw-r--r-- | src/client/views/nodes/formattedText/FormattedTextBox.scss | 1 | ||||
| -rw-r--r-- | src/client/views/nodes/formattedText/RichTextMenu.tsx | 14 | ||||
| -rw-r--r-- | src/client/views/nodes/trails/PresBox.tsx | 8 |
12 files changed, 320 insertions, 277 deletions
diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx index 5640e5132..7f428a881 100644 --- a/src/client/views/DocumentButtonBar.tsx +++ b/src/client/views/DocumentButtonBar.tsx @@ -203,7 +203,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV <div className="dash-tooltip">{SelectionManager.Views().length > 1 ? "Pin multiple documents to presentation" : "Pin to presentation"}</div>}> <div className="documentButtonBar-icon" style={{ color: "white" }} - onClick={undoBatch(e => this.props.views().map(view => view && TabDocView.PinDoc(view.props.Document, { setPosition: e.shiftKey ? true : undefined })))}> + onClick={undoBatch(e => this.props.views().map(view => view && this.pinWithView(view.props.Document)))}> <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="map-pin" /> </div> </Tooltip>; diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 5c1a51052..68ec97523 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -63,6 +63,7 @@ import { PropertiesView } from './PropertiesView'; import { DashboardStyleProvider, DefaultStyleProvider } from './StyleProvider'; import { TopBar } from './topbar/TopBar'; import { RichTextMenu } from './nodes/formattedText/RichTextMenu'; +import { ScriptField } from '../../fields/ScriptField'; const _global = (window /* browser */ || global /* node */) as any; @observer @@ -239,6 +240,25 @@ export class MainView extends React.Component { Doc.AddDocToList(this.userDoc.myTrails as Doc, "data", pres); } + @action + createNewFolder = async () => { + if (!await this.userDoc.myFilesystem) { + this.userDoc.myFileOrphans = Docs.Create.TreeDocument([], { title: "Unfiled", _stayInCollection: true, system: true, isFolder: true }); + const newFolder = ScriptField.MakeFunction(`createNewFolder()`, { scriptContext: "any" })!; + const newFolderButton:Doc = Docs.Create.FontIconDocument({ onClick: newFolder, _forceActive: true, toolTip: "New folder", _stayInCollection: true, _hideContextMenu: true, title: "New folder", btnType: ButtonType.ClickButton, _width: 30, _height: 30, buttonText: "New folder", icon: "folder-plus", system: true }); + this.userDoc.myFilesystem = new PrefetchProxy(Docs.Create.TreeDocument([this.userDoc.myFileOrphans as Doc], { + title: "My Documents", _showTitle: "title", buttonMenu: true, buttonMenuDoc: newFolderButton, _height: 100, + treeViewHideTitle: true, _xMargin: 5, _yMargin: 5, _gridGap: 5, _forceActive: true, childDropAction: "alias", + treeViewTruncateTitleWidth: 150, ignoreClick: true, + isFolder: true, treeViewType: "fileSystem", childHideLinkButton: true, + _lockedPosition: true, boxShadow: "0 0", childDontRegisterViews: true, targetDropAction: "proto", system: true, + explainer: "This is your file manager where you can create folders to keep track of documents independently of your dashboard." + })); + } + const folder = Docs.Create.TreeDocument([], { title: "Untitled folder", _stayInCollection: true, isFolder: true }); + Doc.AddDocToList(this.userDoc.myFilesystem as Doc, "data", folder); + } + getPWidth = () => this._panelWidth - this.propertiesWidth(); getPHeight = () => this._panelHeight - (CollectionMenu.Instance?.Pinned ? 35 : 0); getContentsHeight = () => this._panelHeight; diff --git a/src/client/views/MarqueeAnnotator.tsx b/src/client/views/MarqueeAnnotator.tsx index eee365ed8..26e76090a 100644 --- a/src/client/views/MarqueeAnnotator.tsx +++ b/src/client/views/MarqueeAnnotator.tsx @@ -81,7 +81,7 @@ export class MarqueeAnnotator extends React.Component<MarqueeAnnotatorProps> { return annoDoc; }; const targetCreator = (annotationOn: Doc | undefined) => { - const target = CurrentUserUtils.GetNewTextDoc("Note linked to " + this.props.rootDoc.title, 0, 0, 100, 100, undefined, annotationOn); + const target = CurrentUserUtils.GetNewTextDoc("Note linked to " + this.props.rootDoc.title, 0, 0, 100, 100, undefined, annotationOn, undefined, "yellow"); FormattedTextBox.SelectOnLoad = target[Id]; return target; }; diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx index 8cf34ddcc..2727a0af5 100644 --- a/src/client/views/collections/TreeView.tsx +++ b/src/client/views/collections/TreeView.tsx @@ -240,7 +240,7 @@ export class TreeView extends React.Component<TreeViewProps> { } makeFolder = () => { - const folder = Docs.Create.TreeDocument([], { title: "-folder-", _stayInCollection: true, isFolder: true }); + const folder = Docs.Create.TreeDocument([], { title: "Untitled folder", _stayInCollection: true, isFolder: true }); TreeView._editTitleOnLoad = { id: folder[Id], parent: this.props.parentTreeView }; return this.props.addDocument(folder); } @@ -512,9 +512,9 @@ export class TreeView extends React.Component<TreeViewProps> { DocumentViewInternal.SelectAfterContextMenu = true; } contextMenuItems = () => { - const makeFolder = { script: ScriptField.MakeFunction(`scriptContext.makeFolder()`, { scriptContext: "any" })!, label: "New Folder" }; - const openAlias = { script: ScriptField.MakeFunction(`openOnRight(getAlias(self))`)!, label: "Open Alias" }; - const focusDoc = { script: ScriptField.MakeFunction(`DocFocusOrOpen(self)`)!, label: "Focus or Open" }; + const makeFolder = { script: ScriptField.MakeFunction(`scriptContext.makeFolder()`, { scriptContext: "any" })!, icon: "folder-plus", label: "New Folder" }; + const openAlias = { script: ScriptField.MakeFunction(`openOnRight(getAlias(self))`)!, icon: "copy", label: "Open Alias" }; + const focusDoc = { script: ScriptField.MakeFunction(`DocFocusOrOpen(self)`)!, icon: "eye", label: "Focus or Open" }; return [...this.props.contextMenuItems.filter(mi => !mi.filter ? true : mi.filter.script.run({ doc: this.doc })?.result), ... (this.doc.isFolder ? [makeFolder] : Doc.IsSystem(this.doc) ? [] : this.props.treeView.fileSysMode && this.doc === Doc.GetProto(this.doc) ? diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss index ac2b19fd6..a6494e540 100644 --- a/src/client/views/nodes/AudioBox.scss +++ b/src/client/views/nodes/AudioBox.scss @@ -3,202 +3,220 @@ .audiobox-container, .audiobox-container-interactive { - width: 100%; - height: 100%; - position: inherit; - display: flex; - position: relative; - cursor: default; - - .audiobox-buttons { - display: flex; - width: 100%; - align-items: center; - height: 100%; - - .audiobox-dictation { - position: relative; - width: 30px; - height: 100%; - align-items: center; - display: inherit; - background: $medium-gray; - left: 0px; - color: $dark-gray; - &:hover { - color: $black; - cursor: pointer; - } - } - } - - .audiobox-control, - .audiobox-control-interactive { - top: 0; - max-height: 32px; - width: 100%; - display: inline-block; - pointer-events: none; - } - - .audiobox-control-interactive { - pointer-events: all; - } - - .audiobox-record-interactive, - .audiobox-record { - pointer-events: all; width: 100%; height: 100%; + position: inherit; + display: flex; position: relative; - } + cursor: default; - .audiobox-record { - pointer-events: none; - } + .audiobox-buttons { + display: flex; + width: 100%; + align-items: center; + height: 100%; + + .audiobox-dictation { + position: relative; + width: 30px; + height: 100%; + align-items: center; + display: inherit; + background: $medium-gray; + left: 0px; + color: $dark-gray; + + &:hover { + color: $black; + cursor: pointer; + } + } + } - .recording { - margin-top: auto; - margin-bottom: auto; - width: 100%; - height: 100%; - position: relative; - padding-right: 5px; - display: flex; - background-color: $medium-blue; - - .time { - position: relative; - height: 100%; - width: 100%; - font-size: $large-header; - text-align: center; - top: 5; + .audiobox-control, + .audiobox-control-interactive { + top: 0; + max-height: 32px; + width: 100%; + display: inline-block; + pointer-events: none; } - .buttons { - position: relative; - margin-top: auto; - margin-bottom: auto; - width: 25px; - width: 25px; - padding: 5px; - color: $dark-gray; - &:hover { - color: $black; - } + .audiobox-control-interactive { + pointer-events: all; } - } - .audiobox-controls { - width: 100%; - height: 100%; - position: relative; - display: flex; - background: $dark-gray; + .audiobox-record-interactive, + .audiobox-record { + pointer-events: all; + cursor: pointer; + width: 100%; + height: 100%; + position: relative; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + gap: 10px; + color: white; + font-weight: bold; + } - .audiobox-dictation { - position: absolute; - width: 40px; - height: 100%; - align-items: center; - display: inherit; - background: $medium-gray; - left: 0px; + .audiobox-record { + pointer-events: none; } - .audiobox-player { - margin-top: auto; - margin-bottom: auto; - width: 100%; - position: relative; - padding-right: 5px; - display: flex; - flex-direction: column; - justify-content: center; - - .audiobox-buttons { - position: relative; + .recording { margin-top: auto; margin-bottom: auto; - width: 30px; - height: 30px; - border-radius: 50%; - background-color: $dark-gray; - color: $white; + width: 100%; + height: 100%; + position: relative; + padding-right: 5px; display: flex; - align-items: center; + flex-direction: row; justify-content: center; - left: 5px; - &:hover { - background-color: $black; + align-items: center; + gap: 7px; + background-color: $medium-blue; + padding: 10px; + + .time { + position: relative; + height: 100%; + width: 100%; + font-size: 16px; + text-align: center; + display: flex; + justify-content: center; + align-items: center; + font-weight: bold; } - svg { - width: 100%; - position: absolute; - border-width: "thin"; - border-color: "white"; + .buttons { + cursor: pointer; + position: relative; + margin-top: auto; + margin-bottom: auto; + width: 25px; + width: 25px; + padding: 5px; + color: $dark-gray; + + &:hover { + color: $black; + } } - } + } - .audiobox-dictation { + .audiobox-controls { + width: 100%; + height: 100%; position: relative; - margin-top: auto; - margin-bottom: auto; - width: 25px; - align-items: center; - display: inherit; - background: $medium-gray; - } + display: flex; + background: $dark-gray; + + .audiobox-dictation { + position: absolute; + width: 40px; + height: 100%; + align-items: center; + display: inherit; + background: $medium-gray; + left: 0px; + } - .audiobox-timeline { - position: absolute; - width: 100%; - z-index: 1000; - overflow: hidden; - border-right: 5px solid black; - } - - .audioBox-total-time, - .audioBox-current-time { - position: absolute; - font-size: $small-text; - top: 100%; - color: $white; - } - .audioBox-current-time { - left: 42px; - } - - .audioBox-total-time { - right: 2px; - } + .audiobox-player { + margin-top: auto; + margin-bottom: auto; + width: 100%; + position: relative; + padding-right: 5px; + display: flex; + flex-direction: column; + justify-content: center; + + .audiobox-buttons { + position: relative; + margin-top: auto; + margin-bottom: auto; + width: 30px; + height: 30px; + border-radius: 50%; + background-color: $dark-gray; + color: $white; + display: flex; + align-items: center; + justify-content: center; + left: 5px; + + &:hover { + background-color: $black; + } + + svg { + width: 100%; + position: absolute; + border-width: "thin"; + border-color: "white"; + } + } + + .audiobox-dictation { + position: relative; + margin-top: auto; + margin-bottom: auto; + width: 25px; + align-items: center; + display: inherit; + background: $medium-gray; + } + + .audiobox-timeline { + position: absolute; + width: 100%; + z-index: 1000; + overflow: hidden; + border-right: 5px solid black; + } + + .audioBox-total-time, + .audioBox-current-time { + position: absolute; + font-size: $small-text; + top: 100%; + color: $white; + } + + .audioBox-current-time { + left: 42px; + } + + .audioBox-total-time { + right: 2px; + } + } } - } } @media only screen and (max-device-width: 480px) { - .audiobox-dictation { - font-size: 5em; - display: flex; - width: 100; - justify-content: center; - flex-direction: column; - align-items: center; - } - - .audiobox-container .audiobox-record, - .audiobox-container-interactive .audiobox-record { - font-size: 3em; - } - - .audiobox-container .audiobox-controls .audiobox-player .audiobox-buttons, - .audiobox-container .audiobox-controls .audiobox-player .audiobox-dictation, - .audiobox-container-interactive - .audiobox-controls - .audiobox-player - .audiobox-buttons { - width: 70px; - } -} + .audiobox-dictation { + font-size: 5em; + display: flex; + width: 100; + justify-content: center; + flex-direction: column; + align-items: center; + } + + .audiobox-container .audiobox-record, + .audiobox-container-interactive .audiobox-record { + font-size: 3em; + } + + .audiobox-container .audiobox-controls .audiobox-player .audiobox-buttons, + .audiobox-container .audiobox-controls .audiobox-player .audiobox-dictation, + .audiobox-container-interactive .audiobox-controls .audiobox-player .audiobox-buttons { + width: 70px; + } +}
\ No newline at end of file diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index 8962d29f0..cdb37bf92 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -336,8 +336,8 @@ export class AudioBox extends ViewBoxAnnotatableComponent< (this.layoutDoc.dontAutoPlayFollowedLinks ? "" : "Don't") + " play when link is selected", event: () => - (this.layoutDoc.dontAutoPlayFollowedLinks = - !this.layoutDoc.dontAutoPlayFollowedLinks), + (this.layoutDoc.dontAutoPlayFollowedLinks = + !this.layoutDoc.dontAutoPlayFollowedLinks), icon: "expand-arrows-alt", }); funcs.push({ @@ -605,10 +605,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent< <div className="audiobox-dictation" onClick={this.onFile}> <FontAwesomeIcon style={{ - width: "30px", - background: !this.layoutDoc.dontAutoPlayFollowedLinks - ? Colors.LIGHT_BLUE - : "rgba(0,0,0,0)", + width: "30px" }} icon="file-alt" size={this.props.PanelHeight() < 36 ? "1x" : "2x"} @@ -638,76 +635,77 @@ export class AudioBox extends ViewBoxAnnotatableComponent< </div> </div> ) : ( - <div - className={`audiobox-record${interactive}`} - style={{ backgroundColor: Colors.DARK_GRAY }} - > - RECORD - </div> - )} + <div + className={`audiobox-record${interactive}`} + style={{ backgroundColor: Colors.DARK_GRAY }} + > + <FontAwesomeIcon icon="microphone" /> + RECORD + </div> + )} </div> ) : ( + <div + className="audiobox-controls" + style={{ + pointerEvents: + this._isAnyChildContentActive || this.props.isContentActive() + ? "all" + : "none", + }} + > + <div className="audiobox-dictation" /> <div - className="audiobox-controls" - style={{ - pointerEvents: - this._isAnyChildContentActive || this.props.isContentActive() - ? "all" - : "none", - }} + className="audiobox-player" + style={{ height: `${AudioBox.heightPercent}%` }} > - <div className="audiobox-dictation" /> <div - className="audiobox-player" - style={{ height: `${AudioBox.heightPercent}%` }} + className="audiobox-buttons" + title={this.mediaState === "paused" ? "play" : "pause"} + onClick={this.mediaState === "paused" ? this.Play : this.Pause} > - <div - className="audiobox-buttons" - title={this.mediaState === "paused" ? "play" : "pause"} - onClick={this.mediaState === "paused" ? this.Play : this.Pause} - > - {" "} - <FontAwesomeIcon - icon={this.mediaState === "paused" ? "play" : "pause"} - size={"1x"} - /> - </div> - <div - className="audiobox-buttons" - title={this._trimming ? "finish" : "trim"} - onClick={this._trimming ? this.finishTrim : this.startTrim} - > - <FontAwesomeIcon - icon={this._trimming ? "check" : "cut"} - size={"1x"} - /> - </div> - <div - className="audiobox-timeline" - style={{ - top: 0, - height: `100%`, - left: AudioBox.playheadWidth, - width: `calc(100% - ${AudioBox.playheadWidth}px)`, - background: "white", - }} - > - {this.renderTimeline} - </div> - {this.audio} - <div className="audioBox-current-time"> - {this._trimming ? - formatTime(Math.round(NumCast(this.layoutDoc._currentTimecode))) - : formatTime(Math.round(NumCast(this.layoutDoc._currentTimecode) - NumCast(this._trimStart)))} - </div> - <div className="audioBox-total-time"> - {this._trimming || !this._trimEnd ? - formatTime(Math.round(NumCast(this.duration))) - : formatTime(Math.round(NumCast(this.trimDuration)))} - </div> + {" "} + <FontAwesomeIcon + icon={this.mediaState === "paused" ? "play" : "pause"} + size={"1x"} + /> + </div> + <div + className="audiobox-buttons" + title={this._trimming ? "finish" : "trim"} + onClick={this._trimming ? this.finishTrim : this.startTrim} + > + <FontAwesomeIcon + icon={this._trimming ? "check" : "cut"} + size={"1x"} + /> + </div> + <div + className="audiobox-timeline" + style={{ + top: 0, + height: `100%`, + left: AudioBox.playheadWidth, + width: `calc(100% - ${AudioBox.playheadWidth}px)`, + background: "white", + }} + > + {this.renderTimeline} + </div> + {this.audio} + <div className="audioBox-current-time"> + {this._trimming ? + formatTime(Math.round(NumCast(this.layoutDoc._currentTimecode))) + : formatTime(Math.round(NumCast(this.layoutDoc._currentTimecode) - NumCast(this._trimStart)))} + </div> + <div className="audioBox-total-time"> + {this._trimming || !this._trimEnd ? + formatTime(Math.round(NumCast(this.duration))) + : formatTime(Math.round(NumCast(this.trimDuration)))} </div> </div> - )} + </div> + )} </div> ); } diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index a2d2f17b6..5de4c2c4e 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -49,6 +49,7 @@ import { RadialMenu } from './RadialMenu'; import { ScriptingBox } from "./ScriptingBox"; import { PresBox } from './trails/PresBox'; import React = require("react"); +import { IconProp } from "@fortawesome/fontawesome-svg-core"; const { Howl } = require('howler'); interface Window { @@ -153,7 +154,7 @@ export interface DocumentViewProps extends DocumentViewSharedProps { NativeWidth?: () => number; NativeHeight?: () => number; LayoutTemplate?: () => Opt<Doc>; - contextMenuItems?: () => { script: ScriptField, label: string }[]; + contextMenuItems?: () => { script: ScriptField, label: string, icon: string }[]; onClick?: () => ScriptField; onDoubleClick?: () => ScriptField; onPointerDown?: () => ScriptField; @@ -673,7 +674,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps StrListCast(this.Document.contextMenuLabels).forEach((label, i) => cm.addItem({ description: label, event: () => customScripts[i]?.script.run({ documentView: this, this: this.layoutDoc, scriptContext: this.props.scriptContext, self: this.rootDoc }), icon: "sticky-note" })); this.props.contextMenuItems?.().forEach(item => - item.label && cm.addItem({ description: item.label, event: () => item.script.script.run({ this: this.layoutDoc, scriptContext: this.props.scriptContext, self: this.rootDoc }), icon: "sticky-note" })); + item.label && cm.addItem({ description: item.label, event: () => item.script.script.run({ this: this.layoutDoc, scriptContext: this.props.scriptContext, self: this.rootDoc }), icon: item.icon as IconProp })); if (!this.props.Document.isFolder) { const templateDoc = Cast(this.props.Document[StrCast(this.props.Document.layoutKey)], Doc, null); diff --git a/src/client/views/nodes/button/FontIconBox.scss b/src/client/views/nodes/button/FontIconBox.scss index a2da35fe1..079c767b9 100644 --- a/src/client/views/nodes/button/FontIconBox.scss +++ b/src/client/views/nodes/button/FontIconBox.scss @@ -342,14 +342,18 @@ } &.editableText { - cursor: pointer; - background: transparent; + cursor: text; + display: flex; + flex-direction: row; + gap: 5px; + padding-left: 10px; + justify-content: flex-start; + color: black; + background-color: $light-gray; + padding: 5px; + padding-left: 10px; width: 100%; height: 100%; - - &:hover { - background-color: $close-red; - } } &.drpDownBtn { diff --git a/src/client/views/nodes/button/FontIconBox.tsx b/src/client/views/nodes/button/FontIconBox.tsx index b1d74261b..fb96969c5 100644 --- a/src/client/views/nodes/button/FontIconBox.tsx +++ b/src/client/views/nodes/button/FontIconBox.tsx @@ -522,7 +522,6 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon // button = <TextButton {...buttonProps}></TextButton> break; case ButtonType.EditableText: - console.log("Editable text"); button = this.editableText; break; case ButtonType.NumberButton: @@ -592,7 +591,6 @@ Scripting.addGlobal(function setBackgroundColor(color?: string, checkResult?: bo const selected = SelectionManager.Docs().lastElement(); if (checkResult) { if (selected) { - console.log("[Background] (selected): " + StrCast(selected._backgroundColor)); return selected._backgroundColor; } else { return "#FFFFFF"; @@ -685,14 +683,12 @@ Scripting.addGlobal(function setBulletList(mapStyle: "bullet" | "decimal", check const editorView = RichTextMenu.Instance?.TextView?.EditorView; if (checkResult) { const active = editorView?.state && RichTextMenu.Instance.getActiveListStyle(); - console.log(active, mapStyle); if (active === mapStyle) return Colors.MEDIUM_BLUE; else return "transparent"; } if (editorView) { const active = editorView?.state && RichTextMenu.Instance.getActiveListStyle(); if (active === mapStyle) { - console.log("set bullet list"); editorView?.state && RichTextMenu.Instance.changeListType(editorView.state.schema.nodes.ordered_list.create({ mapStyle: "" })); } else { editorView?.state && RichTextMenu.Instance.changeListType(editorView.state.schema.nodes.ordered_list.create({ mapStyle: mapStyle })); @@ -707,10 +703,8 @@ Scripting.addGlobal(function setFontColor(color?: string, checkResult?: boolean) if (checkResult) { if (selected) { - console.log("[Font color] (selected): " + StrCast(selected._fontColor)); return selected._fontColor; } else { - console.log("[Font color] (global): " + StrCast(Doc.UserDoc()._fontColor)); return Doc.UserDoc()._fontColor; } } @@ -760,12 +754,16 @@ Scripting.addGlobal(function setFontSize(size: string, checkResult?: boolean) { Scripting.addGlobal(function toggleBold(checkResult?: boolean) { if (checkResult) { - if (Doc.UserDoc().bold) return Colors.MEDIUM_BLUE; + const editorView = RichTextMenu.Instance.TextView?.EditorView; + if (editorView) { + const bold: boolean = editorView?.state && RichTextMenu.Instance.getBoldStatus(); + if (bold) return Colors.MEDIUM_BLUE; + else return "transparent"; + } else return "transparent"; } const editorView = RichTextMenu.Instance.TextView?.EditorView; if (editorView) { - console.log("editorView"); editorView?.state && RichTextMenu.Instance.toggleBold(editorView, true); } SelectionManager.Docs().filter(doc => StrCast(doc.type) === DocumentType.RTF).map(doc => doc.bold = !doc.bold); @@ -775,12 +773,10 @@ Scripting.addGlobal(function toggleBold(checkResult?: boolean) { Scripting.addGlobal(function toggleUnderline(checkResult?: boolean) { if (checkResult) { - if (Doc.UserDoc().underline) return Colors.MEDIUM_BLUE; - else return "transparent"; + return "transparent"; } const editorView = RichTextMenu.Instance.TextView?.EditorView; if (editorView) { - console.log("editorView"); editorView?.state && RichTextMenu.Instance.toggleUnderline(editorView, true); } SelectionManager.Docs().filter(doc => StrCast(doc.type) === DocumentType.RTF).map(doc => doc.underline = !doc.underline); @@ -790,12 +786,10 @@ Scripting.addGlobal(function toggleUnderline(checkResult?: boolean) { Scripting.addGlobal(function toggleItalic(checkResult?: boolean) { if (checkResult) { - if (Doc.UserDoc().italic) return Colors.MEDIUM_BLUE; - else return "transparent"; + return "transparent"; } const editorView = RichTextMenu.Instance.TextView?.EditorView; if (editorView) { - console.log("editorView"); editorView?.state && RichTextMenu.Instance.toggleItalic(editorView, true); } SelectionManager.Docs().filter(doc => StrCast(doc.type) === DocumentType.RTF).map(doc => doc.italic = !doc.italic); @@ -909,7 +903,6 @@ Scripting.addGlobal(function webBack() { **/ Scripting.addGlobal(function toggleSchemaPreview(checkResult?: boolean) { const selected = SelectionManager.Docs().lastElement(); - console.log(selected && selected.title); if (checkResult && selected) { const result: boolean = NumCast(selected.schemaPreviewWidth) > 0; if (result) return Colors.MEDIUM_BLUE; diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.scss b/src/client/views/nodes/formattedText/FormattedTextBox.scss index 4134e3c67..27817f317 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.scss +++ b/src/client/views/nodes/formattedText/FormattedTextBox.scss @@ -71,6 +71,7 @@ audiotag:hover { //top: calc(50% - 17.5px); // use this to center vertically -- make sure it looks okay for slide views width: 17px; height: 17px; + font-size: 11px; border-radius: 3px; color: white; background: $medium-gray; diff --git a/src/client/views/nodes/formattedText/RichTextMenu.tsx b/src/client/views/nodes/formattedText/RichTextMenu.tsx index 3919fbf94..86f2810ab 100644 --- a/src/client/views/nodes/formattedText/RichTextMenu.tsx +++ b/src/client/views/nodes/formattedText/RichTextMenu.tsx @@ -142,6 +142,18 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> { } } + getBoldStatus() { + if (this.view && this.TextView.props.isSelected(true)) { + const path = (this.view.state.selection.$from as any).path; + for (let i = path.length - 3; i < path.length && i >= 0; i -= 3) { + if (path[i]?.type === this.view.state.schema.nodes.paragraph || path[i]?.type === this.view.state.schema.nodes.heading) { + console.log(path[i].attrs); + return path[i].attrs.strong; + } + } + } + } + // finds font sizes and families in selection getActiveAlignment() { if (this.view && this.TextView.props.isSelected(true)) { @@ -208,7 +220,6 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> { const found = new Set<Mark>(); const { from, to } = state.selection as TextSelection; state.doc.nodesBetween(from, to, (node) => node.marks.forEach(m => found.add(m))); - console.log("Marks: " + found); return found; } @@ -590,7 +601,6 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> { @undoBatch makeLinkToURL = (target: string, lcoation: string) => { ((this.view as any)?.TextView as FormattedTextBox).makeLinkAnchor(undefined, "onRadd:rightight", target, target); - console.log((this.view as any)?.TextView); } @undoBatch diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx index 1abe26c20..add84ff83 100644 --- a/src/client/views/nodes/trails/PresBox.tsx +++ b/src/client/views/nodes/trails/PresBox.tsx @@ -401,11 +401,11 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema> LightboxView.SetLightboxDoc(targetDoc); } else if (curDoc.presMovement === PresMovement.Pan && targetDoc) { LightboxView.SetLightboxDoc(undefined); - await DocumentManager.Instance.jumpToDocument(targetDoc, false, openInTab, srcContext, undefined, undefined, undefined, includesDoc || tab ? undefined : resetSelection); // documents open in new tab instead of on right + await DocumentManager.Instance.jumpToDocument(targetDoc, false, openInTab, srcContext, undefined, undefined, undefined, includesDoc || tab ? undefined : resetSelection, undefined, true); // documents open in new tab instead of on right } else if ((curDoc.presMovement === PresMovement.Zoom || curDoc.presMovement === PresMovement.Jump) && targetDoc) { LightboxView.SetLightboxDoc(undefined); //awaiting jump so that new scale can be found, since jumping is async - await DocumentManager.Instance.jumpToDocument(targetDoc, true, openInTab, srcContext, undefined, undefined, undefined, includesDoc || tab ? undefined : resetSelection); // documents open in new tab instead of on right + await DocumentManager.Instance.jumpToDocument(targetDoc, true, openInTab, srcContext, undefined, undefined, undefined, includesDoc || tab ? undefined : resetSelection, undefined, true); // documents open in new tab instead of on right } // After navigating to the document, if it is added as a presPinView then it will // adjust the pan and scale to that of the pinView when it was added. @@ -413,8 +413,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema> // if targetDoc is not displayed but one of its aliases is, then we need to modify that alias, not the original target this.navigateToView(targetDoc, activeItem); } - // TODO: Add progressivize for navigating web (storing websites for given frames) - } /** @@ -1220,7 +1218,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema> <input className="presBox-input" type="number" value={duration} onChange={action((e) => this.setDurationTime(e.target.value))} /> s - </div> + </div> <div className="ribbon-propertyUpDown"> <div className="ribbon-propertyUpDownItem" onClick={undoBatch(() => this.setDurationTime(String(duration), 1000))}> <FontAwesomeIcon icon={"caret-up"} /> |
