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/collections/CollectionMenu.tsx | 44 +++++++++++++++++-------- 1 file changed, 31 insertions(+), 13 deletions(-) (limited to 'src/client/views/collections/CollectionMenu.tsx') 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}
; } } -- 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/collections/CollectionMenu.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}
-
+
*/} {this.props.docView.props.ContainingCollectionDoc?._viewType !== CollectionViewType.Freeform ? (null) :
; } + inputBox = (key: string, value: any, setter: (val: string) => {}, title: string) => { + return
+
{title}
+ setter(e.target.value)} /> +
+
this.upDownButtons("up", key)))} > + +
+
this.upDownButtons("down", key)))} > + +
+
+
; + } + inputBoxDuo = (key: string, value: any, setter: (val: string) => {}, title1: string, key2: string, value2: any, setter2: (val: string) => {}, title2: string) => { + return
+ {this.inputBox(key, value, setter, title1)} + {title2 === "" ? (null) : this.inputBox(key2, value2, setter2, title2)} +
; + } + @action + upDownButtons = (dirs: string, field: string) => { + switch (field) { + case "rot": this.rotate((dirs === "up" ? .1 : -.1)); break; + // case "rot": this.selectedInk?.forEach(i => i.rootDoc.rotation = NumCast(i.rootDoc.rotation) + (dirs === "up" ? 0.1 : -0.1)); break; + case "Xps": this.selectedDoc && (this.selectedDoc.x = NumCast(this.selectedDoc?.x) + (dirs === "up" ? 10 : -10)); break; + case "Yps": this.selectedDoc && (this.selectedDoc.y = NumCast(this.selectedDoc?.y) + (dirs === "up" ? 10 : -10)); break; + case "stk": this.selectedDoc && (this.selectedDoc.strokeWidth = NumCast(this.selectedDoc?.strokeWidth) + (dirs === "up" ? .1 : -.1)); break; + case "wid": + const oldWidth = NumCast(this.selectedDoc?._width); + const oldHeight = NumCast(this.selectedDoc?._height); + const oldX = NumCast(this.selectedDoc?.x); + const oldY = NumCast(this.selectedDoc?.y); + this.selectedDoc && (this.selectedDoc._width = oldWidth + (dirs === "up" ? 10 : - 10)); + this._lock && this.selectedDoc && (this.selectedDoc._height = (NumCast(this.selectedDoc?._width) / oldWidth * NumCast(this.selectedDoc?._height))); + const doc = this.selectedDoc; + if (doc?.type === DocumentType.INK && doc.x && doc.y && doc._height && doc._width) { + console.log(doc.x, doc.y, doc._height, doc._width); + const ink = Cast(doc.data, InkField)?.inkData; + console.log(ink); + if (ink) { + const newPoints: { X: number, Y: number }[] = []; + for (var j = 0; j < ink.length; j++) { + // (new x — oldx) + (oldxpoint * newWidt)/oldWidth + const newX = (NumCast(doc.x) - oldX) + (ink[j].X * NumCast(doc._width)) / oldWidth; + const newY = (NumCast(doc.y) - oldY) + (ink[j].Y * NumCast(doc._height)) / oldHeight; + newPoints.push({ X: newX, Y: newY }); + } + doc.data = new InkField(newPoints); + } + } + break; + case "hgt": + const oWidth = NumCast(this.selectedDoc?._width); + const oHeight = NumCast(this.selectedDoc?._height); + const oX = NumCast(this.selectedDoc?.x); + const oY = NumCast(this.selectedDoc?.y); + this.selectedDoc && (this.selectedDoc._height = oHeight + (dirs === "up" ? 10 : - 10)); + this._lock && this.selectedDoc && (this.selectedDoc._width = (NumCast(this.selectedDoc?._height) / oHeight * NumCast(this.selectedDoc?._width))); + const docu = this.selectedDoc; + if (docu?.type === DocumentType.INK && docu.x && docu.y && docu._height && docu._width) { + console.log(docu.x, docu.y, docu._height, docu._width); + const ink = Cast(docu.data, InkField)?.inkData; + console.log(ink); + if (ink) { + const newPoints: { X: number, Y: number }[] = []; + for (var j = 0; j < ink.length; j++) { + // (new x — oldx) + (oldxpoint * newWidt)/oldWidth + const newX = (NumCast(docu.x) - oX) + (ink[j].X * NumCast(docu._width)) / oWidth; + const newY = (NumCast(docu.y) - oY) + (ink[j].Y * NumCast(docu._height)) / oHeight; + newPoints.push({ X: newX, Y: newY }); + } + docu.data = new InkField(newPoints); + } + } + break; + } + } + getField(key: string) { + //if (this.selectedDoc) { + return Field.toString(this.selectedDoc[key] as Field); + // } else { + // return undefined as Opt; + // } + } + @computed get shapeXps() { return this.getField("x"); } + @computed get shapeYps() { return this.getField("y"); } + @computed get shapeRot() { return this.getField("rotation"); } + @computed get shapeHgt() { return this.getField("_height"); } + @computed get shapeWid() { return this.getField("_width"); } + set shapeXps(value) { this.selectedDoc && (this.selectedDoc.x = Number(value)); } + set shapeYps(value) { this.selectedDoc && (this.selectedDoc.y = Number(value)); } + set shapeRot(value) { this.selectedDoc && (this.selectedDoc.rotation = Number(value)); } + set shapeWid(value) { + const oldWidth = NumCast(this.selectedDoc?._width); + this.selectedDoc && (this.selectedDoc._width = Number(value)); + this._lock && this.selectedDoc && (this.selectedDoc._height = (NumCast(this.selectedDoc?._width) * NumCast(this.selectedDoc?._height)) / oldWidth); + } + set shapeHgt(value) { + const oldHeight = NumCast(this.selectedDoc?._height); + this.selectedDoc && (this.selectedDoc._height = Number(value)); + this._lock && this.selectedDoc && (this.selectedDoc._width = (NumCast(this.selectedDoc?._height) * NumCast(this.selectedDoc?._width)) / oldHeight); + } - - - - - - - - - - - - - - - - + @computed get hgtInput() { return this.inputBoxDuo("hgt", this.shapeHgt, (val: string) => this.shapeHgt = val, "H:", "wid", this.shapeWid, (val: string) => this.shapeWid = val, "W:"); } + @computed get XpsInput() { return this.inputBoxDuo("Xps", this.shapeXps, (val: string) => this.shapeXps = val, "X:", "Yps", this.shapeYps, (val: string) => this.shapeYps = val, "Y:"); } + @computed get rotInput() { return this.inputBoxDuo("rot", this.shapeRot, (val: string) => { this.rotate(Number(val) - Number(this.shapeRot)); this.shapeRot = val; return true; }, "∠:", "rot", this.shapeRot, (val: string) => this.shapeRot = val, ""); } @@ -468,7 +570,14 @@ export class PropertiesView extends React.Component { @computed get appearanceEditor() { return "appearance" }; - @computed get transformEditor() { return this.controlPointsButton }; + @computed get transformEditor() { + return
+ {this.controlPointsButton} + {this.hgtInput} + {this.XpsInput} + {this.rotInput} +
; + }; render() { @@ -492,10 +601,11 @@ export class PropertiesView extends React.Component { {this.editableTitle}
-
+
runInAction(() => { this.openActions = !this.openActions; })} + style={{ backgroundColor: this.openActions ? "black" : "" }}> Actions -
runInAction(() => { this.openActions = !this.openActions; })}> +
@@ -504,10 +614,11 @@ export class PropertiesView extends React.Component {
: null}
-
+
runInAction(() => { this.openSharing = !this.openSharing; })} + style={{ backgroundColor: this.openSharing ? "black" : "" }}> Sharing {"&"} Permissions -
runInAction(() => { this.openSharing = !this.openSharing; })}> +
@@ -520,10 +631,11 @@ export class PropertiesView extends React.Component { {this.isInk ?
-
+
runInAction(() => { this.openAppearance = !this.openAppearance; })} + style={{ backgroundColor: this.openAppearance ? "black" : "" }}> Appearance -
runInAction(() => { this.openAppearance = !this.openAppearance; })}> +
@@ -533,10 +645,11 @@ export class PropertiesView extends React.Component {
: null} {this.isInk ?
-
+
runInAction(() => { this.openTransform = !this.openTransform; })} + style={{ backgroundColor: this.openTransform ? "black" : "" }}> Transform -
runInAction(() => { this.openTransform = !this.openTransform; })}> +
@@ -550,11 +663,12 @@ export class PropertiesView extends React.Component {
-
+
runInAction(() => { this.openFields = !this.openFields; })} + style={{ backgroundColor: this.openFields ? "black" : "" }}>
Fields {"&"} Tags -
runInAction(() => { this.openFields = !this.openFields; })}> +
@@ -569,7 +683,9 @@ export class PropertiesView extends React.Component {
: null}
-
+
runInAction(() => { this.openLayout = !this.openLayout; })} + style={{ backgroundColor: this.openLayout ? "black" : "" }}> Layout
runInAction(() => { this.openLayout = !this.openLayout; })}> -- cgit v1.2.3-70-g09d2 From b33e31e369aef6e0675219c96ba4b8a058a69b0c Mon Sep 17 00:00:00 2001 From: bobzel Date: Sat, 1 Aug 2020 09:39:38 -0400 Subject: fixed warnings --- src/client/views/DocumentDecorations.tsx | 8 +++---- src/client/views/MainView.tsx | 4 ++-- src/client/views/PreviewCursor.tsx | 6 +++--- src/client/views/PropertiesButtons.tsx | 2 +- .../views/collections/CollectionDockingView.tsx | 6 +++--- src/client/views/collections/CollectionMenu.tsx | 4 ++-- src/client/views/collections/CollectionSubView.tsx | 2 +- .../views/collections/CollectionTreeView.tsx | 2 +- .../views/collections/ParentDocumentSelector.tsx | 6 +++--- src/client/views/collections/SchemaTable.tsx | 2 +- .../collectionFreeForm/CollectionFreeFormView.tsx | 4 ++-- .../collectionFreeForm/FormatShapePane.tsx | 25 +++++++++++----------- .../collectionFreeForm/PropertiesView.tsx | 14 +++++------- src/client/views/nodes/DocumentView.tsx | 2 +- .../views/nodes/formattedText/RichTextMenu.tsx | 4 ++-- src/client/views/nodes/formattedText/nodes_rts.ts | 8 +++---- src/fields/Doc.ts | 6 +++--- src/server/ApiManagers/UtilManager.ts | 1 - 18 files changed, 50 insertions(+), 56 deletions(-) (limited to 'src/client/views/collections/CollectionMenu.tsx') diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index bdb25d460..ec6e2be7c 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -528,12 +528,12 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> const ink = Cast(doc.data, InkField)?.inkData; if (ink) { const newPoints: { X: number, Y: number }[] = []; - for (var i = 0; i < ink.length; i++) { + ink.forEach(i => { // (new x — oldx) + (oldxpoint * newWidt)/oldWidth - const newX = (doc.x - this._inkDocs[index].x) + (ink[i].X * doc._width) / this._inkDocs[index].width; - const newY = (doc.y - this._inkDocs[index].y) + (ink[i].Y * doc._height) / this._inkDocs[index].height; + const newX = ((doc.x || 0) - this._inkDocs[index].x) + (i.X * (doc._width || 0)) / this._inkDocs[index].width; + const newY = ((doc.y || 0) - this._inkDocs[index].y) + (i.Y * (doc._height || 0)) / this._inkDocs[index].height; newPoints.push({ X: newX, Y: newY }); - } + }); doc.data = new InkField(newPoints); } diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 85f695b85..67f1f5592 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -305,7 +305,7 @@ export class MainView extends React.Component { } @action - getPWidth = () => this._panelWidth - this.propertiesWidth(); + getPWidth = () => this._panelWidth - this.propertiesWidth() getPHeight = () => this._panelHeight; getContentsHeight = () => this._panelHeight - this._buttonBarHeight; @@ -406,7 +406,7 @@ export class MainView extends React.Component { //sidebarScreenToLocal = () => new Transform(0, (RichTextMenu.Instance.Pinned ? -35 : 0) + (CollectionMenu.Instance.Pinned ? -35 : 0), 1); mainContainerXf = () => this.sidebarScreenToLocal().translate(0, -this._buttonBarHeight); - @computed get closePosition() { return 55 + this.flyoutWidth } + @computed get closePosition() { return 55 + this.flyoutWidth; } @computed get flyout() { if (!this.sidebarContent) return null; return
diff --git a/src/client/views/PreviewCursor.tsx b/src/client/views/PreviewCursor.tsx index b4116e980..d7034fcfb 100644 --- a/src/client/views/PreviewCursor.tsx +++ b/src/client/views/PreviewCursor.tsx @@ -112,10 +112,10 @@ export class PreviewCursor extends React.Component<{}> { } else if (e.clipboardData.items.length) { const batch = UndoManager.StartBatch("collection view drop"); const files: File[] = []; - for (let i = 0; i < e.clipboardData.items.length; i++) { - const file = e.clipboardData.items[i].getAsFile(); + Array.from(e.clipboardData.items).forEach(item => { + const file = item.getAsFile(); file && files.push(file); - } + }); const generatedDocuments = await DocUtils.uploadFilesToDocs(files, { x: newPoint[0], y: newPoint[1] }); generatedDocuments.forEach(PreviewCursor._addDocument); batch.end(); diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx index bd5301629..59e7cc7c8 100644 --- a/src/client/views/PropertiesButtons.tsx +++ b/src/client/views/PropertiesButtons.tsx @@ -464,7 +464,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
{ if (this.selectedDocumentView) { - GooglePhotos.Export.CollectionToAlbum({ collection: this.selectedDocumentView.Document }).then(console.log) + GooglePhotos.Export.CollectionToAlbum({ collection: this.selectedDocumentView.Document }).then(console.log); } }}> { { const view = DocumentManager.Instance.getDocumentView(doc); view && SelectionManager.SelectDoc(view, false); - } + }; // shifts the focus to this tab when another tab is dragged over it tab.element[0].onmouseenter = (e: any) => { if (!this._isPointerDown || !SnappingManager.GetIsDragging()) return; @@ -747,10 +747,10 @@ export class DockedFrameRenderer extends React.Component { this.onActiveContentItemChanged(); this._tabReaction = reaction(() => ({ views: SelectionManager.SelectedDocuments(), color: StrCast(this._document?._backgroundColor, "white") }), (data) => { - const selected = data.views.some(v => Doc.AreProtosEqual(v.props.Document, this._document)) + const selected = data.views.some(v => Doc.AreProtosEqual(v.props.Document, this._document)); this._tab.style.backgroundColor = selected ? data.color : ""; } - ) + ); } componentWillUnmount() { diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx index e70a16da9..01374cfbb 100644 --- a/src/client/views/collections/CollectionMenu.tsx +++ b/src/client/views/collections/CollectionMenu.tsx @@ -49,7 +49,7 @@ export default class CollectionMenu extends AntimodeMenu { componentDidMount() { reaction(() => SelectionManager.SelectedDocuments().length && SelectionManager.SelectedDocuments()[0], - (doc) => doc && this.SetSelection(doc)) + (doc) => doc && this.SetSelection(doc)); } @action @@ -162,7 +162,7 @@ export class CollectionViewBaseChrome extends React.Component { button['target-docFilters'] = this.target._docFilters instanceof ObjectField ? ObjectField.MakeCopy(this.target._docFilters as any as ObjectField) : ""; }, }; - @computed get _freeform_commands() { return Doc.UserDoc().noviceMode ? [this._viewCommand, this._saveFilterCommand] : [this._viewCommand, this._saveFilterCommand, this._contentCommand, this._templateCommand, this._narrativeCommand] }; + @computed get _freeform_commands() { return Doc.UserDoc().noviceMode ? [this._viewCommand, this._saveFilterCommand] : [this._viewCommand, this._saveFilterCommand, this._contentCommand, this._templateCommand, this._narrativeCommand]; } _stacking_commands = [this._contentCommand, this._templateCommand]; _masonry_commands = [this._contentCommand, this._templateCommand]; diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx index 9f78c15eb..c90e85271 100644 --- a/src/client/views/collections/CollectionSubView.tsx +++ b/src/client/views/collections/CollectionSubView.tsx @@ -296,7 +296,7 @@ export function CollectionSubView(schemaCtor: (doc: Doc) => T, moreProps?: const reg = new RegExp(Utils.prepend(""), "g"); const modHtml = srcUrl ? html.replace(reg, srcUrl) : html; const htmlDoc = Docs.Create.HtmlDocument(modHtml, { ...options, title: "-web page-", _width: 300, _height: 300 }); - Doc.GetProto(htmlDoc)["data-text"] = Doc.GetProto(htmlDoc)["text"] = text; + Doc.GetProto(htmlDoc)["data-text"] = Doc.GetProto(htmlDoc).text = text; this.props.addDocument(htmlDoc); if (srcWeb) { const focusNode = (SelectionManager.SelectedDocuments()[0].ContentDiv?.getElementsByTagName("iframe")[0].contentDocument?.getSelection()?.focusNode as any); diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index d6203e7da..ca3ab8866 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -104,7 +104,7 @@ class TreeView extends React.Component { const layout = Doc.LayoutField(this.doc) instanceof Doc ? Doc.LayoutField(this.doc) as Doc : undefined; return ((this.props.dataDoc ? DocListCast(this.props.dataDoc[field]) : undefined) || // if there's a data doc for an expanded template, use it's data field (layout ? DocListCast(layout[field]) : undefined) || // else if there's a layout doc, display it's fields - DocListCast(this.doc[field])) as Doc[]; // otherwise use the document's data field + DocListCast(this.doc[field])); // otherwise use the document's data field } @computed get childDocs() { return this.childDocList(this.fieldKey); } @computed get childLinks() { return this.childDocList("links"); } diff --git a/src/client/views/collections/ParentDocumentSelector.tsx b/src/client/views/collections/ParentDocumentSelector.tsx index 8c0b8de9d..532dd6abc 100644 --- a/src/client/views/collections/ParentDocumentSelector.tsx +++ b/src/client/views/collections/ParentDocumentSelector.tsx @@ -42,14 +42,14 @@ export class SelectorContextMenu extends React.Component { async fetchDocuments() { const aliases = (await SearchUtil.GetAliasesOfDocument(this.props.Document)); const containerProtoSets = await Promise.all(aliases.map(async alias => - await Promise.all((await SearchUtil.Search("", true, { fq: `data_l:"${alias[Id]}"` })).docs))); + ((await SearchUtil.Search("", true, { fq: `data_l:"${alias[Id]}"` })).docs))); const containerProtos = containerProtoSets.reduce((p, set) => { set.map(s => p.add(s)); return p; }, new Set()); const containerSets = await Promise.all(Array.from(containerProtos.keys()).map(async container => { - return (await SearchUtil.GetAliasesOfDocument(container)); + return (SearchUtil.GetAliasesOfDocument(container)); })); const containers = containerSets.reduce((p, set) => { set.map(s => p.add(s)); return p; }, new Set()); const doclayoutSets = await Promise.all(Array.from(containers.keys()).map(async (dp) => { - return (await SearchUtil.GetAliasesOfDocument(dp)); + return (SearchUtil.GetAliasesOfDocument(dp)); })); const doclayouts = Array.from(doclayoutSets.reduce((p, set) => { set.map(s => p.add(s)); return p; }, new Set()).keys()); runInAction(() => { diff --git a/src/client/views/collections/SchemaTable.tsx b/src/client/views/collections/SchemaTable.tsx index 75e693f96..7e2840c2c 100644 --- a/src/client/views/collections/SchemaTable.tsx +++ b/src/client/views/collections/SchemaTable.tsx @@ -148,7 +148,7 @@ export class SchemaTable extends React.Component { } @action - changeTitleMode = () => this._showTitleDropdown = !this._showTitleDropdown; + changeTitleMode = () => this._showTitleDropdown = !this._showTitleDropdown @computed get borderWidth() { return Number(COLLECTION_BORDER_WIDTH); } @computed get tableColumns(): Column[] { diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index e0981d797..badbc48a1 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -1144,7 +1144,7 @@ export class CollectionFreeFormView extends CollectionSubView { TraceMobx(); return this.doLayoutComputation }, + this._layoutComputeReaction = reaction(() => this.doLayoutComputation, (elements) => this._layoutElements = elements || [], { fireImmediately: true, name: "doLayout" }); @@ -1292,7 +1292,7 @@ export class CollectionFreeFormView extends CollectionSubView { SearchUtil.Search(`{!join from=id to=proto_i}id:link*`, true, {}).then(docs => { docs.docs.forEach(d => LinkManager.Instance.addLink(d)); - }) + }); }, 2000); // need to give solr some time to update so that this query will find any link docs we've added. } } diff --git a/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx b/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx index eb6097acf..6263be261 100644 --- a/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx +++ b/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx @@ -13,7 +13,6 @@ import AntimodeMenu from "../../AntimodeMenu"; import "./FormatShapePane.scss"; import { undoBatch } from "../../../util/UndoManager"; import { ColorState, SketchPicker } from 'react-color'; -import { DocumentView } from "../../../views/nodes/DocumentView" @observer export default class FormatShapePane extends AntimodeMenu { @@ -124,12 +123,12 @@ export default class FormatShapePane extends AntimodeMenu { console.log(ink); if (ink) { const newPoints: { X: number, Y: number }[] = []; - for (var j = 0; j < ink.length; j++) { + ink.forEach(i => { // (new x — oldx) + (oldxpoint * newWidt)/oldWidth - const newX = (doc.x - oldX) + (ink[j].X * doc._width) / oldWidth; - const newY = (doc.y - oldY) + (ink[j].Y * doc._height) / oldHeight; + const newX = ((doc.x || 0) - oldX) + (i.X * (doc._width || 0)) / oldWidth; + const newY = ((doc.y || 0) - oldY) + (i.Y * (doc._height || 0)) / oldHeight; newPoints.push({ X: newX, Y: newY }); - } + }); doc.data = new InkField(newPoints); } } @@ -148,12 +147,12 @@ export default class FormatShapePane extends AntimodeMenu { console.log(ink); if (ink) { const newPoints: { X: number, Y: number }[] = []; - for (var j = 0; j < ink.length; j++) { + ink.forEach(i => { // (new x — oldx) + (oldxpoint * newWidt)/oldWidth - const newX = (doc.x - oldX) + (ink[j].X * doc._width) / oldWidth; - const newY = (doc.y - oldY) + (ink[j].Y * doc._height) / oldHeight; + const newX = ((doc.x || 0) - oldX) + (i.X * (doc._width || 0)) / oldWidth; + const newY = ((doc.y || 0) - oldY) + (i.Y * (doc._height || 0)) / oldHeight; newPoints.push({ X: newX, Y: newY }); - } + }); doc.data = new InkField(newPoints); } } @@ -191,11 +190,11 @@ export default class FormatShapePane extends AntimodeMenu { if (ink) { const newPoints: { X: number, Y: number }[] = []; - for (var i = 0; i < ink.length; i++) { - const newX = Math.cos(angle) * (ink[i].X - _centerPoints[index].X) - Math.sin(angle) * (ink[i].Y - _centerPoints[index].Y) + _centerPoints[index].X; - const newY = Math.sin(angle) * (ink[i].X - _centerPoints[index].X) + Math.cos(angle) * (ink[i].Y - _centerPoints[index].Y) + _centerPoints[index].Y; + ink.forEach(i => { + const newX = Math.cos(angle) * (i.X - _centerPoints[index].X) - Math.sin(angle) * (i.Y - _centerPoints[index].Y) + _centerPoints[index].X; + const newY = Math.sin(angle) * (i.X - _centerPoints[index].X) + Math.cos(angle) * (i.Y - _centerPoints[index].Y) + _centerPoints[index].Y; newPoints.push({ X: newX, Y: newY }); - } + }); doc.data = new InkField(newPoints); const xs = newPoints.map(p => p.X); const ys = newPoints.map(p => p.Y); diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx index a3c9516e1..ca81bf131 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx @@ -399,11 +399,11 @@ export class PropertiesView extends React.Component { if (ink) { const newPoints: { X: number, Y: number }[] = []; - for (var i = 0; i < ink.length; i++) { - const newX = Math.cos(angle) * (ink[i].X - _centerPoints[index].X) - Math.sin(angle) * (ink[i].Y - _centerPoints[index].Y) + _centerPoints[index].X; - const newY = Math.sin(angle) * (ink[i].X - _centerPoints[index].X) + Math.cos(angle) * (ink[i].Y - _centerPoints[index].Y) + _centerPoints[index].Y; + ink.forEach(i => { + const newX = Math.cos(angle) * (i.X - _centerPoints[index].X) - Math.sin(angle) * (i.Y - _centerPoints[index].Y) + _centerPoints[index].X; + const newY = Math.sin(angle) * (i.X - _centerPoints[index].X) + Math.cos(angle) * (i.Y - _centerPoints[index].Y) + _centerPoints[index].Y; newPoints.push({ X: newX, Y: newY }); - } + }); doc.data = new InkField(newPoints); const xs = newPoints.map(p => p.X); const ys = newPoints.map(p => p.Y); @@ -534,11 +534,7 @@ export class PropertiesView extends React.Component { } getField(key: string) { - //if (this.selectedDoc) { - return Field.toString(this.selectedDoc[key] as Field); - // } else { - // return undefined as Opt; - // } + return Field.toString(this.selectedDoc?.[key] as Field); } @computed get shapeXps() { return this.getField("x"); } diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 62a786a03..80db0e6db 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -325,7 +325,7 @@ export class DocumentView extends DocComponent(Docu thisContainer: this.props.ContainingCollectionDoc, shiftKey: e.shiftKey }, console.log); - if (this.props.Document !== Doc.UserDoc()["dockedBtn-undo"] && this.props.Document !== Doc.UserDoc()["dockedBtn-redo"]) { + if (!Doc.AreProtosEqual(this.props.Document, Doc.UserDoc()["dockedBtn-undo"] as Doc) && !Doc.AreProtosEqual(this.props.Document, Doc.UserDoc()["dockedBtn-redo"] as Doc)) { UndoManager.RunInBatch(func, "on click"); } else func(); } else if (this.Document["onClick-rawScript"] && !StrCast(Doc.LayoutField(this.layoutDoc))?.includes("ScriptingBox")) {// bcz: hack? don't edit a script if you're clicking on a scripting box itself diff --git a/src/client/views/nodes/formattedText/RichTextMenu.tsx b/src/client/views/nodes/formattedText/RichTextMenu.tsx index be8d3faeb..f76707a79 100644 --- a/src/client/views/nodes/formattedText/RichTextMenu.tsx +++ b/src/client/views/nodes/formattedText/RichTextMenu.tsx @@ -530,7 +530,7 @@ export default class RichTextMenu extends AntimodeMenu { indentParagraph(state: EditorState, dispatch: any) { var tr = state.tr; - let headin = false; + const heading = false; state.doc.nodesBetween(state.selection.from, state.selection.to, (node, pos, parent, index) => { if (node.type === schema.nodes.paragraph || node.type === schema.nodes.heading) { const nodeval = node.attrs.indent ? Number(node.attrs.indent) : undefined; @@ -540,7 +540,7 @@ export default class RichTextMenu extends AntimodeMenu { } return true; }); - !headin && dispatch?.(tr); + !heading && dispatch?.(tr); return true; } diff --git a/src/client/views/nodes/formattedText/nodes_rts.ts b/src/client/views/nodes/formattedText/nodes_rts.ts index 0eca6d753..1616500f6 100644 --- a/src/client/views/nodes/formattedText/nodes_rts.ts +++ b/src/client/views/nodes/formattedText/nodes_rts.ts @@ -79,14 +79,14 @@ export const nodes: { [index: string]: NodeSpec } = { { tag: "h5", attrs: { level: 5 } }, { tag: "h6", attrs: { level: 6 } }], toDOM(node) { - var dom = toParagraphDOM(node) as any; - var level = node.attrs.level || 1; + const dom = toParagraphDOM(node) as any; + const level = node.attrs.level || 1; dom[0] = 'h' + level; return dom; }, getAttrs(dom: any) { - var attrs = getParagraphNodeAttrs(dom) as any; - var level = Number(dom.nodeName.substring(1)) || 1; + const attrs = getParagraphNodeAttrs(dom) as any; + const level = Number(dom.nodeName.substring(1)) || 1; attrs.level = level; return attrs; } diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts index 267defa4b..383adccdc 100644 --- a/src/fields/Doc.ts +++ b/src/fields/Doc.ts @@ -524,10 +524,10 @@ export namespace Doc { const cfield = ComputedField.WithoutComputed(() => FieldValue(doc[key])); const field = ProxyField.WithoutProxy(() => doc[key]); const copyObjectField = async (field: ObjectField) => { - const list = await Cast(doc[key], listSpec(Doc)); + const list = Cast(doc[key], listSpec(Doc)); const docs = list && (await DocListCastAsync(list))?.filter(d => d instanceof Doc); if (docs !== undefined && docs.length) { - const clones = await Promise.all(docs.map(async d => await Doc.makeClone(d as Doc, cloneMap, rtfs, exclusions, dontCreate))); + const clones = await Promise.all(docs.map(async d => Doc.makeClone(d, cloneMap, rtfs, exclusions, dontCreate))); !dontCreate && assignKey(new List(clones)); } else if (doc[key] instanceof Doc) { assignKey(key.includes("layout[") ? undefined : key.startsWith("layout") ? doc[key] as Doc : await Doc.makeClone(doc[key] as Doc, cloneMap, rtfs, exclusions, dontCreate)); // reference documents except copy documents that are expanded teplate fields @@ -621,7 +621,7 @@ export namespace Doc { Array.from(map.entries()).forEach(f => docs[f[0]] = f[1]); const docString = JSON.stringify({ id: doc[Id], docs }, replacer); - var zip = new JSZip(); + const zip = new JSZip(); zip.file("doc.json", docString); diff --git a/src/server/ApiManagers/UtilManager.ts b/src/server/ApiManagers/UtilManager.ts index e2cd88726..e657866ce 100644 --- a/src/server/ApiManagers/UtilManager.ts +++ b/src/server/ApiManagers/UtilManager.ts @@ -6,7 +6,6 @@ import { exec } from 'child_process'; // const recommender = new Recommender(); // recommender.testModel(); -import executeImport from "../../scraping/buxton/final/BuxtonImporter"; export default class UtilManager extends ApiManager { -- cgit v1.2.3-70-g09d2 From 034e05b5bb587e361e9ab87160c9f3abddc9845b Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Sat, 1 Aug 2020 13:34:36 -0500 Subject: finished ink menu merge --- src/client/views/MainView.tsx | 4 +- src/client/views/PropertiesButtons.scss | 12 +-- src/client/views/collections/CollectionMenu.tsx | 11 +-- .../collectionFreeForm/PropertiesView.scss | 90 ++++++++++++++++++++-- .../collectionFreeForm/PropertiesView.tsx | 88 +++++++++++++-------- 5 files changed, 153 insertions(+), 52 deletions(-) (limited to 'src/client/views/collections/CollectionMenu.tsx') diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 74be36bda..993c6f4b6 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -378,7 +378,7 @@ export class MainView extends React.Component { setupMoveUpEvents(this, e, action((e: PointerEvent, down: number[], delta: number[]) => { this._propertiesWidth = this._panelWidth - e.clientX; return false; - }), returnFalse, action(() => this._propertiesWidth = this.propertiesWidth() < 15 ? Math.min(this._panelWidth - 50, 200) : 0), false); + }), returnFalse, action(() => this._propertiesWidth = this.propertiesWidth() < 15 ? Math.min(this._panelWidth - 50, 250) : 0), false); } @action @@ -464,7 +464,7 @@ export class MainView extends React.Component { onClick={undefined} ScreenToLocalTransform={this.mainContainerXf} ContentScaling={returnOne} - PanelWidth={() => 60} + PanelWidth={() => 70} PanelHeight={this.getContentsHeight} renderDepth={0} focus={emptyFunction} diff --git a/src/client/views/PropertiesButtons.scss b/src/client/views/PropertiesButtons.scss index 11265b413..e099122c4 100644 --- a/src/client/views/PropertiesButtons.scss +++ b/src/client/views/PropertiesButtons.scss @@ -20,8 +20,8 @@ $linkGap : 3px; .propertiesButtons-linkButton-empty, .propertiesButtons-linkButton-nonempty { - height: 25px; - width: 25px; + height: 30px; + width: 30px; border-radius: 5px; opacity: 0.9; pointer-events: auto; @@ -35,7 +35,7 @@ $linkGap : 3px; display: flex; justify-content: center; align-items: center; - margin-right: 5px; + margin-right: 10px; &:hover { background: $main-accent; @@ -68,12 +68,12 @@ $linkGap : 3px; padding-right: 5px; width: 25px; border-radius: 5px; - margin-right: 8px; + margin-right: 18px; } .propertiesButtons-linker { - height: 25px; - width: 25px; + height: 30px; + width: 30px; text-align: center; border-radius: 5px; pointer-events: auto; diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx index 01374cfbb..498030b71 100644 --- a/src/client/views/collections/CollectionMenu.tsx +++ b/src/client/views/collections/CollectionMenu.tsx @@ -554,11 +554,12 @@ export class CollectionFreeFormViewChrome extends React.Component FormatShapePane.Instance.Pinned = !FormatShapePane.Instance.Pinned)} - style={{ backgroundColor: this._fillBtn ? "121212" : "" }}> - - ; + // return ; + return null; } render() { diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss index 0b23d2325..8847fe89d 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss @@ -221,7 +221,8 @@ border: 1px solid black; padding: 5px; border-radius: 6px; - width: 170px; + /* width: 170px; */ + margin-right: 10px; background-color: #ececec; max-height: 130px; overflow-y: scroll; @@ -250,6 +251,9 @@ .propertiesView-sharingTable-item-permission { display: flex; + right: 34; + float: right; + position: absolute; .permissions-select { z-index: 1; @@ -392,7 +396,7 @@ width: 32; height: 32; padding-top: 9px; - margin-left: 5px; + margin-left: 18px; &:hover { background: rgb(131, 131, 131); @@ -505,14 +509,14 @@ } .strokeAndFill { - display: flex; + margin-top: 10px; .fill { - margin-right: 30px; + margin-right: 40px; display: flex; padding-bottom: 7px; - margin-left: 20px; + margin-left: 35px; .fill-title { font-size: 12px; @@ -538,4 +542,80 @@ margin-top: -1px; } } +} + +.widthAndDash { + + .width { + .width-top { + display: flex; + + .width-title { + font-size: 12; + margin-right: 20px; + margin-left: 35px; + text-align: center; + } + + .width-input { + margin-right: 30px; + margin-top: -10px; + } + } + + .width-range { + margin-right: 1px; + margin-bottom: 6; + } + } + + .arrows { + + display: flex; + margin-bottom: 3px; + + .arrows-head { + + display: flex; + margin-right: 35px; + + .arrows-head-title { + font-size: 12; + } + + .arrows-head-input { + margin-left: 6px; + margin-top: 2px; + } + } + + .arrows-tail { + display: flex; + + .arrows-tail-title { + font-size: 12; + } + + .arrows-tail-input { + margin-left: 6px; + margin-top: 2px; + } + } + } + + .dashed { + + display: flex; + margin-left: 74px; + margin-bottom: 6px; + + .dashed-title { + font-size: 12; + } + + .dashed-input { + margin-left: 6px; + margin-top: 2px; + } + } } \ No newline at end of file diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx index ca81bf131..f39a75b81 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx @@ -26,6 +26,7 @@ import { undoBatch } from "../../../util/UndoManager"; import { ColorState, SketchPicker } from "react-color"; import AntimodeMenu from "../../AntimodeMenu"; import "./FormatShapePane.scss"; +import { discovery_v1 } from "googleapis"; interface PropertiesViewProps { @@ -295,7 +296,7 @@ export class PropertiesView extends React.Component { } sharingItem(name: string, effectiveAcl: symbol, permission?: string) { - return
+ return
{name}
{name !== "Me" ? this.notifyIcon : null}
@@ -399,11 +400,11 @@ export class PropertiesView extends React.Component { if (ink) { const newPoints: { X: number, Y: number }[] = []; - ink.forEach(i => { - const newX = Math.cos(angle) * (i.X - _centerPoints[index].X) - Math.sin(angle) * (i.Y - _centerPoints[index].Y) + _centerPoints[index].X; - const newY = Math.sin(angle) * (i.X - _centerPoints[index].X) + Math.cos(angle) * (i.Y - _centerPoints[index].Y) + _centerPoints[index].Y; + for (var i = 0; i < ink.length; i++) { + const newX = Math.cos(angle) * (ink[i].X - _centerPoints[index].X) - Math.sin(angle) * (ink[i].Y - _centerPoints[index].Y) + _centerPoints[index].X; + const newY = Math.sin(angle) * (ink[i].X - _centerPoints[index].X) + Math.cos(angle) * (ink[i].Y - _centerPoints[index].Y) + _centerPoints[index].Y; newPoints.push({ X: newX, Y: newY }); - }); + } doc.data = new InkField(newPoints); const xs = newPoints.map(p => p.X); const ys = newPoints.map(p => p.Y); @@ -534,7 +535,11 @@ export class PropertiesView extends React.Component { } getField(key: string) { - return Field.toString(this.selectedDoc?.[key] as Field); + //if (this.selectedDoc) { + return Field.toString(this.selectedDoc[key] as Field); + // } else { + // return undefined as Opt; + // } } @computed get shapeXps() { return this.getField("x"); } @@ -565,7 +570,7 @@ export class PropertiesView extends React.Component { private _lastFill = "#D0021B"; private _lastLine = "#D0021B"; - private _lastDash = "2"; + private _lastDash: any = "2"; @computed get colorFil() { const ccol = this.getField("fillColor") || ""; ccol && (this._lastFill = ccol); return ccol; } @computed get colorStk() { const ccol = this.getField("color") || ""; ccol && (this._lastLine = ccol); return ccol; } @@ -629,7 +634,7 @@ export class PropertiesView extends React.Component { } @computed get solidStk() { return this.selectedDoc?.color && (!this.selectedDoc?.strokeDash || this.selectedDoc?.strokeDash === "0") ? true : false; } - @computed get dashdStk() { return !this.unStrokd && this.getField("strokeDash") || ""; } + @computed get dashdStk() { return this.selectedDoc?.strokeDash || ""; } @computed get unStrokd() { return this.selectedDoc?.color ? true : false; } @computed get widthStk() { return this.getField("strokeWidth") || "1"; } @computed get markHead() { return this.getField("strokeStartMarker") || ""; } @@ -667,35 +672,50 @@ export class PropertiesView extends React.Component { } @computed get widthAndDash() { - return
{(this.solidStk || this.dashdStk) ? "Width" : ""} - {(this.solidStk || this.dashdStk) ? this.stkInput : ""} - - - {(this.solidStk || this.dashdStk) ? this.widthStk = e.target.value))} /> : (null)} -
- {(this.solidStk || this.dashdStk) ? <> -

Arrow Head

- this.markHead = this.markHead ? "" : "arrow"))} - style={{ position: "absolute", right: 110, width: 20 }} /> -

Arrow End

- this.markTail = this.markTail ? "" : "arrow"))} - style={{ position: "absolute", right: 0, width: 20 }} /> -
- : ""} - Dash: - this.dashdStk = this.dashdStk === "2" ? "0" : "2"))} - style={{ position: "absolute", right: 110, width: 20 }} /> + return
+
+
+
Width:
+
{this.stkInput}
+
+ this.widthStk = e.target.value))} /> +
+ +
+
+
Arrow Head:
+ this.markHead = this.markHead ? "" : "arrow"))} /> +
+
+
Arrow End:
+ this.markTail = this.markTail ? "" : "arrow"))} /> +
+
+
+
Dash:
+ +
; } + @undoBatch @action + changeDash = () => { + const dash = this.dashdStk; + if (dash === "2") { + this.dashdStk = "0"; + } else { + this.dashdStk = "2"; + } + } + @computed get appearanceEditor() { return
{this.widthAndDash} -- cgit v1.2.3-70-g09d2 From b317845a0aa01319ba0b6d45a0f61d8fa2075e3f Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Sat, 1 Aug 2020 15:39:15 -0500 Subject: UI changes --- src/client/views/MainView.tsx | 2 +- src/client/views/collections/CollectionDockingView.scss | 14 +++++++++++--- src/client/views/collections/CollectionMenu.tsx | 1 + .../collections/collectionFreeForm/PropertiesView.scss | 17 ++++++++--------- .../collections/collectionFreeForm/PropertiesView.tsx | 8 ++++---- 5 files changed, 25 insertions(+), 17 deletions(-) (limited to 'src/client/views/collections/CollectionMenu.tsx') diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 993c6f4b6..d095a9836 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -172,7 +172,7 @@ export class MainView extends React.Component { fa.faFillDrip, fa.faLink, fa.faUnlink, fa.faBold, fa.faItalic, fa.faChevronLeft, fa.faUnderline, fa.faStrikethrough, fa.faSuperscript, fa.faSubscript, fa.faIndent, fa.faEyeDropper, fa.faPaintRoller, fa.faBars, fa.faBrush, fa.faShapes, fa.faEllipsisH, fa.faHandPaper, fa.faMap, fa.faUser, faHireAHelper, fa.faDesktop, fa.faTrashRestore, fa.faUsers, fa.faWrench, fa.faCog, fa.faMap, fa.faBellSlash, fa.faExpandAlt, fa.faArchive, fa.faBezierCurve, fa.faCircle, - fa.faLongArrowAltRight, fa.faPenFancy, fa.faAngleDoubleRight, faBuffer, fa.faExpand, fa.faUndo); + fa.faLongArrowAltRight, fa.faPenFancy, fa.faAngleDoubleRight, faBuffer, fa.faExpand, fa.faUndo, fa.faSlidersH); this.initEventListeners(); this.initAuthenticationRouters(); } diff --git a/src/client/views/collections/CollectionDockingView.scss b/src/client/views/collections/CollectionDockingView.scss index 6d894b56a..27d66f796 100644 --- a/src/client/views/collections/CollectionDockingView.scss +++ b/src/client/views/collections/CollectionDockingView.scss @@ -12,12 +12,14 @@ width: 100%; height: 100%; position: absolute; + .miniThumb { background: #25252525; position: absolute; } } } + .lm_title { margin-top: 3px; border-radius: 5px; @@ -27,6 +29,7 @@ transform: translate(0px, -3px); cursor: grab; } + .lm_title.focus-visible { cursor: text; } @@ -35,8 +38,9 @@ overflow: hidden; height: 19px; margin-top: -2px; - display:inline-block; + display: inline-block; } + .lm_active .lm_title { border: solid 1px lightgray; } @@ -47,11 +51,11 @@ } .lm_header .lm_tab { - padding-right : 20px; + padding-right: 20px; } .lm_popout { - display:none; + display: none; } .messageCounter { @@ -74,6 +78,7 @@ position: absolute; top: 0; left: 0; + // overflow: hidden; // bcz: menus don't show up when this is on (e.g., the parentSelectorMenu) .collectionDockingView-gear { padding-left: 5px; @@ -81,7 +86,10 @@ width: 18px; display: inline-block; margin: auto; + + display: none; } + .collectionDockingView-dragAsDocument { touch-action: none; position: absolute; diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx index 498030b71..fdd1b4e81 100644 --- a/src/client/views/collections/CollectionMenu.tsx +++ b/src/client/views/collections/CollectionMenu.tsx @@ -415,6 +415,7 @@ export class CollectionFreeFormViewChrome extends React.Component { this.document.hideMinimap = !this.document.hideMinimap; } + private _palette = ["#D0021B", "#F5A623", "#F8E71C", "#8B572A", "#7ED321", "#417505", "#9013FE", "#4A90E2", "#50E3C2", "#B8E986", "#000000", "#4A4A4A", "#9B9B9B", "#FFFFFF", ""]; private _width = ["1", "5", "10", "100"]; // private _draw = ["⎯", "→", "↔︎", "∿", "↝", "↭", "ロ", "O", "∆"]; diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss index 8847fe89d..74f32275a 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss @@ -14,18 +14,17 @@ padding-top: 12px; padding-bottom: 12px; display: flex; - - .propertiesView-title-name { - font-size: 18px; - font-weight: bold; - padding-left: 45px; - } + font-size: 18px; + font-weight: bold; + justify-content: center; .propertiesView-title-icon { width: 20px; height: 20px; padding-left: 38px; margin-top: -5px; + right: 19; + position: absolute; &:hover { color: grey; @@ -580,7 +579,7 @@ margin-right: 35px; .arrows-head-title { - font-size: 12; + font-size: 10; } .arrows-head-input { @@ -593,7 +592,7 @@ display: flex; .arrows-tail-title { - font-size: 12; + font-size: 10; } .arrows-tail-input { @@ -610,7 +609,7 @@ margin-bottom: 6px; .dashed-title { - font-size: 12; + font-size: 10; } .dashed-input { diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx index f39a75b81..3eb3ef8ab 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx @@ -115,7 +115,7 @@ export class PropertiesView extends React.Component { const rows: JSX.Element[] = []; for (const key of Object.keys(ids).slice().sort()) { const contents = doc[key]; - if (contents === "UNDEFINED") { + if (key[0] === "#") { rows.push(
{key}   @@ -158,7 +158,7 @@ export class PropertiesView extends React.Component { for (const key of Object.keys(ids).slice().sort()) { if (key[0] === key[0].toUpperCase() || key[0] === "#" || key === "author" || key === "creationDate" || key.indexOf("lastModified") !== -1) { const contents = doc[key]; - if (contents === "UNDEFINED") { + if (key[0] === "#") { rows.push(
{key}   @@ -211,7 +211,7 @@ export class PropertiesView extends React.Component { KeyValueBox.SetField(doc, newVal.substring(0, newVal.indexOf(":")), newVal.substring(newVal.indexOf(":") + 1, newVal.length), true); return true; } else if (value[0] === "#") { - const newVal = value + ":'UNDEFINED'"; + const newVal = value + `:'${value}'`; KeyValueBox.SetField(doc, newVal.substring(0, newVal.indexOf(":")), newVal.substring(newVal.indexOf(":") + 1, newVal.length), true); return true; } @@ -745,7 +745,7 @@ export class PropertiesView extends React.Component { return
-
Properties
+ Properties
-- cgit v1.2.3-70-g09d2 From a10db866ff80961e22bc794d51db95e8cb6d0f16 Mon Sep 17 00:00:00 2001 From: bobzel Date: Sun, 2 Aug 2020 14:50:10 -0400 Subject: keep filter view as a feature for expert users --- src/client/views/collections/CollectionMenu.tsx | 4 ++-- src/client/views/collections/CollectionView.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) (limited to 'src/client/views/collections/CollectionMenu.tsx') diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx index fdd1b4e81..59e6ac7ff 100644 --- a/src/client/views/collections/CollectionMenu.tsx +++ b/src/client/views/collections/CollectionMenu.tsx @@ -332,11 +332,11 @@ export class CollectionViewBaseChrome extends React.Component + {Doc.UserDoc().noviceMode ? (null) :
-
*/} +
} {this.props.docView.props.ContainingCollectionDoc?._viewType !== CollectionViewType.Freeform ? (null) :
); } } -- cgit v1.2.3-70-g09d2 From 8d1f4cdf924a4002f132886230eb85a40dfcae3f Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Mon, 3 Aug 2020 00:33:37 -0500 Subject: several UI changes to tooltips, menu, properties, buttons, and ink --- src/client/util/CurrentUserUtils.ts | 1 + src/client/util/SettingsManager.scss | 15 +- src/client/util/SettingsManager.tsx | 2 +- src/client/views/DocumentDecorations.tsx | 6 +- src/client/views/InkingStroke.tsx | 2 +- src/client/views/MainView.scss | 6 +- src/client/views/MainView.tsx | 20 +- src/client/views/PropertiesButtons.scss | 7 +- src/client/views/PropertiesButtons.tsx | 83 +++++--- src/client/views/collections/CollectionMenu.tsx | 227 ++++++++++++--------- src/client/views/globalCssVariables.scss | 4 +- .../views/nodes/formattedText/RichTextMenu.tsx | 39 ++-- 12 files changed, 243 insertions(+), 169 deletions(-) (limited to 'src/client/views/collections/CollectionMenu.tsx') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index a094ac5a6..c27290e74 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -49,6 +49,7 @@ export class CurrentUserUtils { @observable public static searchStack: any | undefined; @observable public static selectedPanel: string = "none"; + @observable public static propertiesWidth: number = 0; // sets up the default User Templates - slideView, queryView, descriptionView static setupUserTemplateButtons(doc: Doc) { diff --git a/src/client/util/SettingsManager.scss b/src/client/util/SettingsManager.scss index c1627e69f..6923fe879 100644 --- a/src/client/util/SettingsManager.scss +++ b/src/client/util/SettingsManager.scss @@ -7,7 +7,7 @@ height: 300px; button { - background: $lighter-alt-accent; + background: #315a96; outline: none; border-radius: 5px; border: 0px; @@ -29,8 +29,12 @@ button { width: 100%; align-self: center; - background: $darker-alt-accent; + background: #252b33; margin-top: 4px; + + &:hover { + background: $main-accent; + } } .delete-button { @@ -102,11 +106,12 @@ } h1 { - color: $dark-color; + color: #121721; text-transform: uppercase; letter-spacing: 2px; - font-size: 120%; + font-size: 19; margin-top: 0; + font-weight: bold; } .container { @@ -151,7 +156,7 @@ .settings-interface button { width: 100%; font-size: 30px; - background: #b2cef8; + background: #315a96; } .settings-interface .settings-heading { diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx index 207c78964..6276fae96 100644 --- a/src/client/util/SettingsManager.tsx +++ b/src/client/util/SettingsManager.tsx @@ -136,7 +136,7 @@ export default class SettingsManager extends React.Component<{}> { {this.errorText ?
{this.errorText}
: undefined} {this.successText ?
{this.successText}
: undefined} - forgot password? + forgot password?
: undefined} diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index b8670a1af..f16cb273b 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -619,9 +619,9 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
} : <> - {/* {minimal ? (null) :
Show context menu
} placement="top">
- -
} */} + {minimal ? (null) :
Show context menu
} placement="top">
+ +
}
{`${this.selectionTitle}`}
diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx index 5892e8346..8e3f72cee 100644 --- a/src/client/views/InkingStroke.tsx +++ b/src/client/views/InkingStroke.tsx @@ -178,7 +178,7 @@ export class InkingStroke extends ViewBoxBaseComponent diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss index 054a409df..a57d22afd 100644 --- a/src/client/views/MainView.scss +++ b/src/client/views/MainView.scss @@ -105,7 +105,7 @@ .mainView-propertiesDragger { background-color: rgb(140, 139, 139); height: 55px; - width: 15.5px; + width: 17px; position: absolute; top: 55%; border: 1px black solid; @@ -119,7 +119,7 @@ width: 10px; height: 10px; float: left; - margin-left: 3px; + margin-left: 5.5px; padding-top: 19px; } @@ -297,7 +297,7 @@ position: absolute; z-index: 2; touch-action: none; - cursor: ew-resize; + cursor: grab; .mainView-libraryHandle-icon { width: 10px; diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index c83aeee25..fdf4c1626 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -91,8 +91,7 @@ export class MainView extends React.Component { } else { return undefined; } } - @observable _propertiesWidth: number = 0; - propertiesWidth = () => Math.max(0, Math.min(this._panelWidth - 50, this._propertiesWidth)); + propertiesWidth = () => Math.max(0, Math.min(this._panelWidth - 50, CurrentUserUtils.propertiesWidth)); @computed get propertiesIcon() { if (this.propertiesWidth() < 10) { @@ -141,6 +140,9 @@ export class MainView extends React.Component { MainView.Instance = this; this._urlState = HistoryUtil.parseUrl(window.location) || {} as any; // causes errors to be generated when modifying an observable outside of an action + + CurrentUserUtils.propertiesWidth = 0; + configure({ enforceActions: "observed" }); if (window.location.pathname !== "/home") { const pathname = window.location.pathname.substr(1).split("/"); @@ -172,7 +174,7 @@ export class MainView extends React.Component { fa.faFillDrip, fa.faLink, fa.faUnlink, fa.faBold, fa.faItalic, fa.faChevronLeft, fa.faUnderline, fa.faStrikethrough, fa.faSuperscript, fa.faSubscript, fa.faIndent, fa.faEyeDropper, fa.faPaintRoller, fa.faBars, fa.faBrush, fa.faShapes, fa.faEllipsisH, fa.faHandPaper, fa.faMap, fa.faUser, faHireAHelper, fa.faDesktop, fa.faTrashRestore, fa.faUsers, fa.faWrench, fa.faCog, fa.faMap, fa.faBellSlash, fa.faExpandAlt, fa.faArchive, fa.faBezierCurve, fa.faCircle, - fa.faLongArrowAltRight, fa.faPenFancy, fa.faAngleDoubleRight, faBuffer, fa.faExpand, fa.faUndo, fa.faSlidersH); + fa.faLongArrowAltRight, fa.faPenFancy, fa.faAngleDoubleRight, faBuffer, fa.faExpand, fa.faUndo, fa.faSlidersH, fa.faAngleDoubleLeft); this.initEventListeners(); this.initAuthenticationRouters(); } @@ -376,9 +378,9 @@ export class MainView extends React.Component { @action onPropertiesPointerDown = (e: React.PointerEvent) => { setupMoveUpEvents(this, e, action((e: PointerEvent, down: number[], delta: number[]) => { - this._propertiesWidth = this._panelWidth - e.clientX; + CurrentUserUtils.propertiesWidth = this._panelWidth - e.clientX; return false; - }), returnFalse, action(() => this._propertiesWidth = this.propertiesWidth() < 15 ? Math.min(this._panelWidth - 50, 250) : 0), false); + }), returnFalse, action(() => CurrentUserUtils.propertiesWidth = this.propertiesWidth() < 15 ? Math.min(this._panelWidth - 50, 250) : 0), false); } @action @@ -419,7 +421,7 @@ export class MainView extends React.Component {
{this.flyoutWidth > 0 ?
- +
: null} { - this._propertiesWidth = 0; + CurrentUserUtils.propertiesWidth = 0; } @computed get propertiesView() { @@ -553,7 +555,7 @@ export class MainView extends React.Component {
{this.flyoutWidth !== 0 ?
+ style={{ backgroundColor: 'lightgrey' }}> + style={{ right: rightFlyout, top: "50%" }}>
diff --git a/src/client/views/PropertiesButtons.scss b/src/client/views/PropertiesButtons.scss index b3a317a6b..1cba252de 100644 --- a/src/client/views/PropertiesButtons.scss +++ b/src/client/views/PropertiesButtons.scss @@ -45,13 +45,13 @@ $linkGap : 3px; } .propertiesButtons { - margin-top: $linkGap; + margin-top: 3px; grid-column: 1/4; - width: max-content; + width: 100%; height: auto; display: flex; flex-direction: row; - overflow-x: visible; + flex-wrap: wrap; } .onClickFlyout-editScript { @@ -69,6 +69,7 @@ $linkGap : 3px; width: 25px; border-radius: 5px; margin-right: 18px; + margin-bottom: 8px; } .propertiesButtons-linker { diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx index d3f056a34..68969b413 100644 --- a/src/client/views/PropertiesButtons.tsx +++ b/src/client/views/PropertiesButtons.tsx @@ -29,6 +29,7 @@ import { ImageField } from '../../fields/URLField'; import { undoBatch, UndoManager } from '../util/UndoManager'; import { DocumentType } from '../documents/DocumentTypes'; import { CollectionFreeFormView } from './collections/collectionFreeForm/CollectionFreeFormView'; +import { InkField } from '../../fields/InkField'; const higflyout = require("@hig/flyout"); export const { anchorPoints } = higflyout; export const Flyout = higflyout.default; @@ -524,6 +525,32 @@ export class PropertiesButtons extends React.Component<{}, {}> { ; } + @undoBatch + @action + private makeMask = () => { + if (this.selectedDoc) { + this.selectedDoc._backgroundColor = "rgba(0,0,0,0.7)"; + this.selectedDoc.mixBlendMode = "hard-light"; + this.selectedDoc.color = "#9b9b9bff"; + this.selectedDoc.stayInCollection = true; + this.selectedDoc.isInkMask = true; + } + } + + @computed + get maskButton() { + const targetDoc = this.selectedDoc; + return !targetDoc ? (null) :
Make Mask
}> +
+ {} +
+ ; + } + + // @computed // get importButton() { // const targetDoc = this.selectedDoc; @@ -549,6 +576,7 @@ export class PropertiesButtons extends React.Component<{}, {}> { const considerPull = isText && this.considerGoogleDocsPull; const considerPush = isText && this.considerGoogleDocsPush; const isImage = this.selectedDoc[Doc.LayoutFieldKey(this.selectedDoc)] instanceof ImageField; + const isInk = this.selectedDoc[Doc.LayoutFieldKey(this.selectedDoc)] instanceof InkField; const isCollection = this.selectedDoc.type === DocumentType.COL ? true : false; const isFreeForm = this.selectedDoc._viewType === "freeform" ? true : false; @@ -571,39 +599,40 @@ export class PropertiesButtons extends React.Component<{}, {}> {
{this.downloadButton}
-
-
-
- {this.deleteButton} -
-
- {this.onClickButton} -
-
- {this.sharingButton} -
-
- {this.considerGoogleDocsPush} -
-
- {this.considerGoogleDocsPull} -
-
- {this.googlePhotosButton} -
- {/*
+
+ {this.deleteButton} +
+
+ {this.onClickButton} +
+
+ {this.sharingButton} +
+
+ {this.considerGoogleDocsPush} +
+
+ {this.considerGoogleDocsPull} +
+
+ {this.googlePhotosButton} +
+ {/*
{this.importButton}
*/} -
- {this.clustersButton} -
+
+ {this.clustersButton} +
-
- {this.fitContentButton} -
+
+ {this.fitContentButton} +
+
+ {this.maskButton}
+
; } } diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx index 59e6ac7ff..0a3f77888 100644 --- a/src/client/views/collections/CollectionMenu.tsx +++ b/src/client/views/collections/CollectionMenu.tsx @@ -30,6 +30,8 @@ import { RichTextField } from "../../../fields/RichTextField"; import { ScriptField } from "../../../fields/ScriptField"; import { IconProp } from '@fortawesome/fontawesome-svg-core'; import { DocUtils } from "../../documents/Documents"; +import { Tooltip } from "@material-ui/core"; +import { CurrentUserUtils } from "../../util/CurrentUserUtils"; @observer export default class CollectionMenu extends AntimodeMenu { @@ -65,16 +67,38 @@ export default class CollectionMenu extends AntimodeMenu { } } + @action + toggleProperties = () => { + if (CurrentUserUtils.propertiesWidth > 0) { + CurrentUserUtils.propertiesWidth = 0; + } else { + CurrentUserUtils.propertiesWidth = 250; + } + } + render() { - const button = ; + const button = Pin Menu
} placement="bottom"> + + ; + + const propIcon = CurrentUserUtils.propertiesWidth > 0 ? "angle-double-right" : "angle-double-left"; + const propTitle = CurrentUserUtils.propertiesWidth > 0 ? "Close Properties Panel" : "Open Properties Panel"; + + const prop = {propTitle}
} placement="bottom"> + + ; return this.getElement(!this.SelectedCollection ? [button] : [, + prop, button]); } } @@ -271,43 +295,47 @@ export class CollectionViewBaseChrome extends React.Component -
- - -
+ drop document to apply or drag to create button
} placement="bottom"> +
+ + +
+
; } @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 6ab1be67787779c8a6b26f9fbb058a8ccc973fa6 Mon Sep 17 00:00:00 2001 From: bobzel Date: Mon, 3 Aug 2020 02:30:28 -0400 Subject: cleaned up fonticonbox --- src/client/documents/DocumentTypes.ts | 1 - src/client/documents/Documents.ts | 2 +- src/client/util/CurrentUserUtils.ts | 42 +++++----- src/client/views/MainView.tsx | 51 ++++++------- .../views/collections/CollectionLinearView.tsx | 2 +- src/client/views/collections/CollectionMenu.tsx | 2 +- src/client/views/collections/CollectionSubView.tsx | 8 +- .../views/nodes/ContentFittingDocumentView.tsx | 3 - src/client/views/nodes/FontIconBox.scss | 89 +++++++++------------- src/client/views/nodes/FontIconBox.tsx | 60 ++++----------- 10 files changed, 101 insertions(+), 159 deletions(-) (limited to 'src/client/views/collections/CollectionMenu.tsx') diff --git a/src/client/documents/DocumentTypes.ts b/src/client/documents/DocumentTypes.ts index 659f78970..985fcce11 100644 --- a/src/client/documents/DocumentTypes.ts +++ b/src/client/documents/DocumentTypes.ts @@ -13,7 +13,6 @@ export enum DocumentType { INK = "ink", // ink stroke SCREENSHOT = "screenshot", // view of a desktop application FONTICON = "fonticonbox", // font icon - MENUICON = "menuiconbox", QUERY = "query", // search query LABEL = "label", // simple text label BUTTON = "button", // onClick button diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 300af4e50..92942bd58 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -151,7 +151,7 @@ export interface DocumentOptions { annotationOn?: Doc; removeDropProperties?: List; // list of properties that should be removed from a document when it is dropped. e.g., a creator button may be forceActive to allow it be dragged, but the forceActive property can be removed from the dropped document dbDoc?: Doc; - menuIcon?: boolean; // if the font icon box is in the menu + iconShape?: string; // shapes of the fonticon border linkRelationship?: string; // type of relatinoship a link represents ischecked?: ScriptField; // returns whether a font icon box is checked activeInkPen?: Doc; // which pen document is currently active (used as the radio button state for the 'unhecked' pen tool scripts) diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 7b6868f73..abedb2cd2 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -42,13 +42,11 @@ export class CurrentUserUtils { @observable public static libraryBtn: any | undefined; @observable public static searchBtn: any | undefined; - @observable public static toolsStack: any | undefined; - @observable public static workspaceStack: any | undefined; - @observable public static catalogStack: any | undefined; - @observable public static closedStack: any | undefined; - @observable public static searchStack: any | undefined; - - @observable public static selectedPanel: string = "none"; + @observable public static toolsStack: Doc | undefined; + @observable public static workspaceStack: Doc | undefined; + @observable public static catalogStack: Doc | undefined; + @observable public static closedStack: Doc | undefined; + @observable public static searchStack: Doc | undefined; // sets up the default User Templates - slideView, queryView, descriptionView static setupUserTemplateButtons(doc: Doc) { @@ -441,7 +439,7 @@ export class CurrentUserUtils { { toolTip: "Drag a collection", title: "Col", icon: "folder", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyCollection as Doc }, { toolTip: "Drag a web page", title: "Web", icon: "globe-asia", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyWebpage as Doc }, { toolTip: "Drag a cat image", title: "Image", icon: "cat", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyImage as Doc }, - { toolTip: "Drag a comparison box", title: "Comp", icon: "columns", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyComparison as Doc }, + { toolTip: "Drag a comparison box", title: "Compare", icon: "columns", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyComparison as Doc }, { toolTip: "Drag a screengrabber", title: "Grab", icon: "photo-video", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyScreenshot as Doc }, // { title: "Drag a webcam", title: "Cam", icon: "video", ignoreClick: true, drag: 'Docs.Create.WebCamDocument("", { _width: 400, _height: 400, title: "a test cam" })' }, { toolTip: "Drag a audio recorder", title: "Audio", icon: "microphone", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyAudio as Doc }, @@ -477,7 +475,7 @@ export class CurrentUserUtils { } const buttons = CurrentUserUtils.creatorBtnDescriptors(doc).filter(d => !alreadyCreatedButtons?.includes(d.title)); const creatorBtns = buttons.map(({ title, toolTip, icon, ignoreClick, drag, click, ischecked, activeInkPen, backgroundColor, dragFactory }) => Docs.Create.FontIconDocument({ - _nativeWidth: 100, _nativeHeight: 100, _width: 100, _height: 100, + _nativeWidth: 50, _nativeHeight: 50, _width: 50, _height: 50, icon, title, toolTip, @@ -508,14 +506,14 @@ export class CurrentUserUtils { title: string, icon: string, click: string, }[] { return [ - { title: "Workspace", icon: "desktop", click: 'scriptContext.selectMenu("Workspace")' }, - { title: "Catalog", icon: "file", click: 'scriptContext.selectMenu("Catalog")' }, - { title: "Archive", icon: "archive", click: 'scriptContext.selectMenu("Archive")' }, - { title: "Import", icon: "upload", click: 'scriptContext.selectMenu("Import")' }, - { title: "Sharing", icon: "users", click: 'scriptContext.selectMenu("Sharing")' }, - { title: "Tools", icon: "wrench", click: 'scriptContext.selectMenu("Tools")' }, - { title: "Help", icon: "question-circle", click: 'scriptContext.selectMenu("Help")' }, - { title: "Settings", icon: "cog", click: 'scriptContext.selectMenu("Settings")' }, + { title: "Workspace", icon: "desktop", click: 'scriptContext.selectMenu(self, "Workspace")' }, + { title: "Catalog", icon: "file", click: 'scriptContext.selectMenu(self, "Catalog")' }, + { title: "Archive", icon: "archive", click: 'scriptContext.selectMenu(self, "Archive")' }, + { title: "Import", icon: "upload", click: 'scriptContext.selectMenu(self, "Import")' }, + { title: "Sharing", icon: "users", click: 'scriptContext.selectMenu(self, "Sharing")' }, + { title: "Tools", icon: "wrench", click: 'scriptContext.selectMenu(self, "Tools")' }, + { title: "Help", icon: "question-circle", click: 'scriptContext.selectMenu(self, "Help")' }, + { title: "Settings", icon: "cog", click: 'scriptContext.selectMenu(self, "Settings")' }, ]; } @@ -524,10 +522,11 @@ export class CurrentUserUtils { const buttons = CurrentUserUtils.menuBtnDescriptions(); const menuBtns = buttons.map(({ title, icon, click }) => Docs.Create.FontIconDocument({ icon, - menuIcon: true, + iconShape: "square", title, _backgroundColor: "black", stayInCollection: true, + childDropAction: "same", _width: 60, _height: 60, onClick: ScriptField.MakeScript(click, { scriptContext: "any" }), @@ -535,6 +534,7 @@ export class CurrentUserUtils { doc.menuStack = new PrefetchProxy(Docs.Create.StackingDocument(menuBtns, { title: "menuItemPanel", + dropConverter: ScriptField.MakeScript("convertToButtons(dragData)", { dragData: DragManager.DocumentDragData.name }), _backgroundColor: "black", _gridGap: 0, _yMargin: 0, @@ -678,7 +678,7 @@ export class CurrentUserUtils { CurrentUserUtils.toolsStack = toolsStack; doc["tabs-button-tools"] = new PrefetchProxy(Docs.Create.ButtonDocument({ - _width: 35, _height: 25, title: "Tools", _fontSize: "10pt", + _width: 35, _height: 25, title: "Tools", _fontSize: "10pt", color: "black", letterSpacing: "0px", textTransform: "unset", borderRounding: "5px 5px 0px 0px", boxShadow: "3px 3px 0px rgb(34, 34, 34)", sourcePanel: toolsStack, onDragStart: ScriptField.MakeFunction('getCopy(this.dragFactory, true)'), @@ -773,7 +773,7 @@ export class CurrentUserUtils { lockedPosition: true, boxShadow: "0 0", dontRegisterChildViews: true, targetDropAction: "same" })) as any as Doc; doc["tabs-button-library"] = new PrefetchProxy(Docs.Create.ButtonDocument({ - _width: 50, _height: 25, title: "Library", _fontSize: "10pt", targetDropAction: "same", + _width: 50, _height: 25, title: "Library", _fontSize: "10pt", targetDropAction: "same", color: "black", letterSpacing: "0px", textTransform: "unset", borderRounding: "5px 5px 0px 0px", boxShadow: "3px 3px 0px rgb(34, 34, 34)", sourcePanel: libraryStack, onDragStart: ScriptField.MakeFunction('getCopy(this.dragFactory, true)'), @@ -792,7 +792,7 @@ export class CurrentUserUtils { doc["tabs-button-search"] = undefined; if (doc["tabs-button-search"] === undefined) { doc["tabs-button-search"] = new PrefetchProxy(Docs.Create.ButtonDocument({ - _width: 50, _height: 25, title: "Search", _fontSize: "10pt", + _width: 50, _height: 25, title: "Search", _fontSize: "10pt", color: "black", letterSpacing: "0px", textTransform: "unset", borderRounding: "5px 5px 0px 0px", boxShadow: "3px 3px 0px rgb(34, 34, 34)", sourcePanel: new PrefetchProxy(Docs.Create.QueryDocument({ title: "search stack", })) as any as Doc, searchFileTypes: new List([DocumentType.RTF, DocumentType.IMG, DocumentType.PDF, DocumentType.VID, DocumentType.WEB, DocumentType.SCRIPTING]), diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index c83aeee25..d535f0d1b 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -314,7 +314,7 @@ export class MainView extends React.Component { if (this.panelContent === doc?.title) return "lightgrey"; if (this.darkScheme) { switch (doc?.type) { - case DocumentType.MENUICON: return "white"; + case DocumentType.FONTICON: return "white"; case DocumentType.RTF || DocumentType.LABEL || DocumentType.BUTTON: return "#2d2d2d"; case DocumentType.LINK: case DocumentType.COL: { @@ -324,7 +324,7 @@ export class MainView extends React.Component { } } else { switch (doc?.type) { - case DocumentType.MENUICON: return "black"; + case DocumentType.FONTICON: return "black"; case DocumentType.RTF: return "#f1efeb"; case DocumentType.BUTTON: case DocumentType.LABEL: return "lightgray"; @@ -388,16 +388,10 @@ export class MainView extends React.Component { setupMoveUpEvents(this, e, action((e: PointerEvent) => { this.flyoutWidth = Math.max(e.clientX, 0); this.sidebarButtonsDoc._columnWidth = this.flyoutWidth / 3 - 30; - if (this.flyoutWidth === 0) { - CurrentUserUtils.selectedPanel = "none"; - } return false; }), emptyFunction, action(() => { this.flyoutWidth = this.flyoutWidth < 15 ? 250 : 0; this.flyoutWidth && (this.sidebarButtonsDoc._columnWidth = this.flyoutWidth / 3 - 30); - if (this.flyoutWidth === 0) { - CurrentUserUtils.selectedPanel = "none"; - } })); } } @@ -454,7 +448,7 @@ export class MainView extends React.Component { } @computed get menuPanel() { - + setTimeout(() => DocListCast((Doc.UserDoc().menuStack as Doc).data).forEach(action(doc => { doc.color = "white"; doc._backgroundColor = ""; })), 0); return
60} PanelHeight={this.getContentsHeight} @@ -490,37 +484,37 @@ export class MainView extends React.Component { @action @undoBatch closeFlyout = () => { - CurrentUserUtils.selectedPanel = "none"; this.panelContent = "none"; this.flyoutWidth = 0; } get groupManager() { return GroupManager.Instance; } + _lastButton: Doc | undefined; @action @undoBatch - selectMenu = (str: string) => { + selectMenu = (button: Doc, str: string) => { + this._lastButton && (this._lastButton.color = "white"); + this._lastButton && (this._lastButton._backgroundColor = ""); if (this.panelContent === str && this.flyoutWidth !== 0) { - CurrentUserUtils.selectedPanel = "none"; this.panelContent = "none"; this.flyoutWidth = 0; } else { - this.panelContent = str; - CurrentUserUtils.selectedPanel = str; - switch (this.panelContent) { - case "Tools": this.sidebarContent.proto = CurrentUserUtils.toolsStack; break; - case "Workspace": this.sidebarContent.proto = CurrentUserUtils.workspaceStack; break; - case "Catalog": this.sidebarContent.proto = CurrentUserUtils.catalogStack; break; - case "Archive": this.sidebarContent.proto = CurrentUserUtils.closedStack; break; - case "Settings": this.sidebarContent.proto = SettingsManager.Instance.open(); break; - case "Sharing": this.sidebarContent.proto = GroupManager.Instance.open(); break; + let panelDoc: Doc | undefined; + switch (this.panelContent = str) { + case "Tools": panelDoc = CurrentUserUtils.toolsStack; break; + case "Workspace": panelDoc = CurrentUserUtils.workspaceStack; break; + case "Catalog": panelDoc = CurrentUserUtils.catalogStack; break; + case "Archive": panelDoc = CurrentUserUtils.closedStack; break; + case "Settings": SettingsManager.Instance.open(); break; + case "Sharing": GroupManager.Instance.open(); break; } - if (str === "Settings" || str === "Sharing" || str === "Help" || str === "Import") { - CurrentUserUtils.selectedPanel = "none"; - this.panelContent = "none"; - this.flyoutWidth = 0; - } else { + this.sidebarContent.proto = panelDoc; + if (panelDoc) { MainView.expandFlyout(); - } + button._backgroundColor = "lightgrey"; + button.color = "black"; + this._lastButton = button; + } else this.flyoutWidth = 0; } return true; } @@ -640,6 +634,7 @@ export class MainView extends React.Component { fieldKey={"data"} dropAction={"alias"} annotationsKey={""} + backgroundColor={this.defaultBackgroundColors} rootSelected={returnTrue} bringToFront={emptyFunction} select={emptyFunction} diff --git a/src/client/views/collections/CollectionLinearView.tsx b/src/client/views/collections/CollectionLinearView.tsx index 3b31947f7..a9e812ad3 100644 --- a/src/client/views/collections/CollectionLinearView.tsx +++ b/src/client/views/collections/CollectionLinearView.tsx @@ -161,7 +161,7 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) { PanelHeight={nested ? pair.layout[HeightSym] : () => this.dimension()} renderDepth={this.props.renderDepth + 1} focus={emptyFunction} - backgroundColor={returnEmptyString} + backgroundColor={this.props.backgroundColor} parentActive={returnTrue} whenActiveChanged={emptyFunction} bringToFront={emptyFunction} diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx index 59e6ac7ff..47ff9ec40 100644 --- a/src/client/views/collections/CollectionMenu.tsx +++ b/src/client/views/collections/CollectionMenu.tsx @@ -331,7 +331,7 @@ export class CollectionViewBaseChrome extends React.Component {this.props.type === CollectionViewType.Invalid || this.props.type === CollectionViewType.Docking || this.isText ? (null) : this.viewModes} - {this.props.type === CollectionViewType.Docking || this.isText ? (null) : this.templateChrome} + {this.props.type === CollectionViewType.Docking || (this.isText && Doc.UserDoc().noviceMode) ? (null) : this.templateChrome} {Doc.UserDoc().noviceMode ? (null) :
; - - return menuBTN; - } else { - const referenceDoc = (this.layoutDoc.dragFactory instanceof Doc ? this.layoutDoc.dragFactory : this.layoutDoc); - const refLayout = Doc.Layout(referenceDoc); - const button = ; - return !this.layoutDoc.toolTip ? button : - {StrCast(this.layoutDoc.toolTip)}
}> - {button} - ; - } - + + ; + return !this.layoutDoc.toolTip ? button : + {StrCast(this.layoutDoc.toolTip)}}> + {button} + ; } } \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 1749944379d80acf0429a3662e3254f2e1e2f087 Mon Sep 17 00:00:00 2001 From: bobzel Date: Mon, 3 Aug 2020 02:44:46 -0400 Subject: fixed warnings about missing keys in colleciton Menu --- src/client/views/collections/CollectionMenu.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) (limited to 'src/client/views/collections/CollectionMenu.tsx') diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx index 05fe84f86..ec3b3dc0c 100644 --- a/src/client/views/collections/CollectionMenu.tsx +++ b/src/client/views/collections/CollectionMenu.tsx @@ -77,8 +77,8 @@ export default class CollectionMenu extends AntimodeMenu { } render() { - const button = Pin Menu} placement="bottom"> - ; @@ -86,7 +86,7 @@ export default class CollectionMenu extends AntimodeMenu { const propIcon = CurrentUserUtils.propertiesWidth > 0 ? "angle-double-right" : "angle-double-left"; const propTitle = CurrentUserUtils.propertiesWidth > 0 ? "Close Properties Panel" : "Open Properties Panel"; - const prop = {propTitle}} placement="bottom"> + const prop = {propTitle}} key="properties" placement="bottom"> ; @@ -372,7 +371,7 @@ export class CollectionViewBaseChrome extends React.ComponentToggle Overlay Layer} placement="bottom"> @@ -451,10 +450,6 @@ export class CollectionFreeFormViewChrome extends React.Component {this._draw.map((icon, i) => - {this._title[i]}} placement="bottom"> + {this._title[i]}} placement="bottom"> )} ; @@ -594,53 +587,55 @@ export class CollectionFreeFormViewChrome extends React.Component - {this.props.docView.props.renderDepth !== 0 || this.isText ? (null) : Toggle Mini Map} placement="bottom"> -
- -
- - } - {!!!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 ? - <> - {this.drawButtons} - {this.widthPicker} - {this.colorPicker} - {this.fillPicker} - : - (null) - } - {this.isText ? : null} - ; + return !this.props.docView.layoutDoc ? (null) : +
+ {this.props.docView.props.renderDepth !== 0 || this.isText ? (null) : + Toggle Mini Map
} placement="bottom"> +
+ +
+ + } + {!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 ? + <> + {this.drawButtons} + {this.widthPicker} + {this.colorPicker} + {this.fillPicker} + : + (null) + } + {this.isText ? : null} + ; } } @observer diff --git a/src/client/views/nodes/formattedText/RichTextMenu.tsx b/src/client/views/nodes/formattedText/RichTextMenu.tsx index d7b6da52e..6e268be48 100644 --- a/src/client/views/nodes/formattedText/RichTextMenu.tsx +++ b/src/client/views/nodes/formattedText/RichTextMenu.tsx @@ -800,7 +800,9 @@ export default class RichTextMenu extends AntimodeMenu { const link = this.currentLink ? this.currentLink : ""; const button = set hyperlink} placement="bottom"> -
+ ; const dropdownContent = @@ -1056,10 +1058,10 @@ export class ButtonDropdown extends React.Component { render() { return (
this.ref = node}> - +
+
{this.showDropdown ? this.props.dropdownContent : (null)} ); diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts index 6d01785aa..f4505d475 100644 --- a/src/fields/Doc.ts +++ b/src/fields/Doc.ts @@ -409,7 +409,7 @@ export namespace Doc { // and returns the document who's proto is undefined or whose proto is marked as a base prototype ('isPrototype'). export function GetProto(doc: Doc): Doc { if (doc instanceof Promise) { - console.log("GetProto: error: got Promise insead of Doc"); + console.log("GetProto: warning: got Promise insead of Doc"); } const proto = doc && (Doc.GetT(doc, "isPrototype", "boolean", true) ? doc : (doc.proto || doc)); return proto === doc ? proto : Doc.GetProto(proto); -- cgit v1.2.3-70-g09d2 From 642be6f52df6484f25fd7c1940e4e290a5b6d118 Mon Sep 17 00:00:00 2001 From: bobzel Date: Mon, 3 Aug 2020 11:55:09 -0400 Subject: fixed novice toolbar not to have buttonizablecommands for non-collections. --- src/client/views/collections/CollectionMenu.tsx | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) (limited to 'src/client/views/collections/CollectionMenu.tsx') diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx index 8c4118e89..660b9f4df 100644 --- a/src/client/views/collections/CollectionMenu.tsx +++ b/src/client/views/collections/CollectionMenu.tsx @@ -344,9 +344,11 @@ export class CollectionViewBaseChrome extends React.Component
- {this.props.type === CollectionViewType.Invalid || - this.props.type === CollectionViewType.Docking || this.isText ? (null) : this.viewModes} - {this.props.type === CollectionViewType.Docking || (this.isText && Doc.UserDoc().noviceMode) ? (null) : this.templateChrome} + {this.notACollection || this.props.type === CollectionViewType.Invalid ? (null) : this.viewModes} + {this.notACollection && Doc.UserDoc().noviceMode ? (null) : this.templateChrome} {Doc.UserDoc().noviceMode ? (null) : filter documents to show
} placement="bottom">
-- cgit v1.2.3-70-g09d2 From 1107c4eaeb3291c37ff3c6fb045aab3dbc4cc3c8 Mon Sep 17 00:00:00 2001 From: bobzel Date: Mon, 3 Aug 2020 12:03:00 -0400 Subject: removed some items from collectionMenu in novicemode. --- src/client/views/collections/CollectionMenu.tsx | 23 +++++++++++------------ 1 file changed, 11 insertions(+), 12 deletions(-) (limited to 'src/client/views/collections/CollectionMenu.tsx') diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx index 660b9f4df..a7d2c07fa 100644 --- a/src/client/views/collections/CollectionMenu.tsx +++ b/src/client/views/collections/CollectionMenu.tsx @@ -186,12 +186,11 @@ export class CollectionViewBaseChrome extends React.Component { - this._currentKey = this._currentKey || (this._buttonizableCommands.length ? this._buttonizableCommands[0]?.title : ""); + this._currentKey = this._currentKey || (this._buttonizableCommands?.length ? this._buttonizableCommands[0]?.title : ""); }); @undoBatch @@ -261,7 +260,7 @@ export class CollectionViewBaseChrome extends React.Component c.title === this._currentKey).map(c => c.immediate(docDragData.draggedDocuments || [])); + this._buttonizableCommands?.filter(c => c.title === this._currentKey).map(c => c.immediate(docDragData.draggedDocuments || [])); e.stopPropagation(); } return true; @@ -283,12 +282,12 @@ export class CollectionViewBaseChrome extends React.Component { setupMoveUpEvents(this, e, (e, down, delta) => { - this._buttonizableCommands.filter(c => c.title === this._currentKey).map(c => + this._buttonizableCommands?.filter(c => c.title === this._currentKey).map(c => DragManager.StartButtonDrag([this._commandRef.current!], c.script, c.title, { target: this.document }, c.params, c.initialize, e.clientX, e.clientY)); return true; }, emptyFunction, () => { - this._buttonizableCommands.filter(c => c.title === this._currentKey).map(c => c.immediate([])); + this._buttonizableCommands?.filter(c => c.title === this._currentKey).map(c => c.immediate([])); }); } @@ -302,7 +301,7 @@ export class CollectionViewBaseChrome extends React.Component )} @@ -359,7 +358,7 @@ export class CollectionViewBaseChrome extends React.Component
{this.notACollection || this.props.type === CollectionViewType.Invalid ? (null) : this.viewModes} - {this.notACollection && Doc.UserDoc().noviceMode ? (null) : this.templateChrome} + {!this._buttonizableCommands ? (null) : this.templateChrome} {Doc.UserDoc().noviceMode ? (null) : filter documents to show
} placement="bottom">
-- cgit v1.2.3-70-g09d2