diff options
Diffstat (limited to 'src')
3 files changed, 45 insertions, 22 deletions
diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx index 1f13d0b07..336cd6ff9 100644 --- a/src/client/views/PropertiesButtons.tsx +++ b/src/client/views/PropertiesButtons.tsx @@ -206,7 +206,7 @@ export class PropertiesButtons extends React.Component<{}, {}> { const isPinned = targetDoc && Doc.isDocPinned(targetDoc); return !targetDoc ? (null) : <Tooltip title={<><div className="dash-tooltip">{Doc.isDocPinned(targetDoc) ? "Unpin from presentation" : "Pin to presentation"}</div></>}> <div className="propertiesButtons-linker" - style={{ backgroundColor: isPinned ? "black" : "white", color: isPinned ? "white" : "black" }} + style={{ backgroundColor: isPinned ? "white" : "#121721", color: isPinned ? "black" : "white" }} onClick={e => DockedFrameRenderer.PinDoc(targetDoc, isPinned)}> <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="map-pin" /> @@ -261,10 +261,10 @@ export class PropertiesButtons extends React.Component<{}, {}> { templates.set(template, views.reduce((checked, doc) => checked || doc?.props.Document["_show" + template.Name] ? true : false, false as boolean))); return !docView ? (null) : <Tooltip title={<><div className="dash-tooltip">Tap: Customize layout. Drag: Create alias</div></>}> - <div className="documentButtonBar-linkFlyout" ref={this._dragRef}> + <div className="propertiesButtons-linkFlyout" ref={this._dragRef}> <Flyout anchorPoint={anchorPoints.LEFT_TOP} onOpen={action(() => this._aliasDown = true)} onClose={action(() => this._aliasDown = false)} content={!this._aliasDown ? (null) : <TemplateMenu docViews={views.filter(v => v).map(v => v as DocumentView)} templates={templates} />}> - <div className={"documentButtonBar-linkButton-empty"} ref={this._dragRef} onPointerDown={this.onAliasButtonDown} > + <div className={"propertiesButtons-linkButton-empty"} ref={this._dragRef} onPointerDown={this.onAliasButtonDown} > {<FontAwesomeIcon className="documentdecorations-icon" icon="edit" size="sm" />} </div> </Flyout> @@ -284,7 +284,7 @@ export class PropertiesButtons extends React.Component<{}, {}> { get copyButton() { const targetDoc = this.selectedDoc; return !targetDoc ? (null) : <Tooltip title={<><div className="dash-tooltip">{"Create an Alias"}</div></>}> - <div className={"documentButtonBar-linkButton-empty"} + <div className={"propertiesButtons-linkButton-empty"} onPointerDown={this.onCopy} > {<FontAwesomeIcon className="documentdecorations-icon" icon="copy" size="sm" />} </div> @@ -302,7 +302,7 @@ export class PropertiesButtons extends React.Component<{}, {}> { return !targetDoc ? (null) : <Tooltip title={<><div className="dash-tooltip">{this.selectedDoc?.lockedPosition ? "Unlock Position" : "Lock Position"}</div></>}> - <div className={"documentButtonBar-linkButton-empty"} + <div className={"propertiesButtons-linkButton-empty"} onPointerDown={this.onLock} > {<FontAwesomeIcon className="documentdecorations-icon" icon={BoolCast(this.selectedDoc?.lockedPosition) ? "unlock" : "lock"} size="sm" />} @@ -315,13 +315,13 @@ export class PropertiesButtons extends React.Component<{}, {}> { const targetDoc = this.selectedDoc; return !targetDoc ? (null) : <Tooltip title={<><div className="dash-tooltip">{"Download Document"}</div></>}> - <div className={"documentButtonBar-linkButton-empty"} + <div className={"propertiesButtons-linkButton-empty"} onPointerDown={async () => { if (this.selectedDocumentView?.props.Document) { Doc.Zip(this.selectedDocumentView?.props.Document); } }}> - {<FontAwesomeIcon className="documentdecorations-icon" + {<FontAwesomeIcon className="propertiesButtons-icon" icon="download" size="sm" />} </div> </Tooltip>; @@ -332,11 +332,11 @@ export class PropertiesButtons extends React.Component<{}, {}> { const targetDoc = this.selectedDoc; return !targetDoc ? (null) : <Tooltip title={<><div className="dash-tooltip">{"Delete Document"}</div></>}> - <div className={"documentButtonBar-linkButton-empty"} + <div className={"propertiesButtons-linkButton-empty"} onPointerDown={() => { this.selectedDocumentView?.props.ContainingCollectionView?.removeDocument(this.selectedDocumentView?.props.Document); }}> - {<FontAwesomeIcon className="documentdecorations-icon" + {<FontAwesomeIcon className="propertiesButtons-icon" icon="trash-alt" size="sm" />} </div> </Tooltip>; @@ -347,13 +347,13 @@ export class PropertiesButtons extends React.Component<{}, {}> { const targetDoc = this.selectedDoc; return !targetDoc ? (null) : <Tooltip title={<><div className="dash-tooltip">{"Share Document"}</div></>}> - <div className={"documentButtonBar-linkButton-empty"} + <div className={"propertiesButtons-linkButton-empty"} onPointerDown={() => { if (this.selectedDocumentView) { SharingManager.Instance.open(this.selectedDocumentView); } }}> - {<FontAwesomeIcon className="documentdecorations-icon" + {<FontAwesomeIcon className="propertiesButtons-icon" icon="users" size="sm" />} </div> </Tooltip>; @@ -379,21 +379,21 @@ export class PropertiesButtons extends React.Component<{}, {}> { @action handleOptionChange = (e: any) => { const value = e.target.value; - this.selectedDoc?.onClickBehavior = e.target.value; + this.selectedDoc && (this.selectedDoc.onClickBehavior = e.target.value); if (value === "nothing") { - this.selectedDocumentView?.noOnClick; + this.selectedDocumentView?.noOnClick(); } else if (value === "enterPortal") { - //this.selectedDocumentView?.noOnClick; - this.selectedDocumentView?.makeIntoPortal; + this.selectedDocumentView?.noOnClick(); + this.selectedDocumentView?.makeIntoPortal(); } else if (value === "toggleDetail") { - //this.selectedDocumentView?.noOnClick; - this.selectedDocumentView?.toggleDetail; + this.selectedDocumentView?.noOnClick(); + this.selectedDocumentView?.toggleDetail(); } else if (value === "linkInPlace") { - //this.selectedDocumentView?.noOnClick; - this.selectedDocumentView?.toggleFollowInPlace; + this.selectedDocumentView?.noOnClick(); + this.selectedDocumentView?.toggleFollowInPlace(); } else if (value === "linkOnRight") { - //this.selectedDocumentView?.noOnClick; - this.selectedDocumentView?.toggleFollowOnRight; + this.selectedDocumentView?.noOnClick(); + this.selectedDocumentView?.toggleFollowOnRight(); } } @@ -457,7 +457,7 @@ export class PropertiesButtons extends React.Component<{}, {}> { const targetDoc = this.selectedDoc; return !targetDoc ? (null) : <Tooltip title={<><div className="dash-tooltip">{"Export to Google Photos"}</div></>}> - <div className={"documentButtonBar-linkButton-empty"} + <div className={"propertiesButtons-linkButton-empty"} onPointerDown={() => { if (this.selectedDocumentView) { GooglePhotos.Export.CollectionToAlbum({ collection: this.selectedDocumentView.Document }).then(console.log) diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss index 8cc591875..0701f3b96 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss @@ -196,6 +196,16 @@ } } + .field { + display: flex; + font-size: 7px; + background-color: #e8e8e8; + padding-right: 3px; + border: 0.5px solid grey; + border-radius: 5px; + padding-left: 3px; + } + .propertiesView-layout { padding: 8.5px; diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx index 3b8d782aa..0f59e2f79 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx @@ -113,6 +113,19 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { {contentElement} </div>); } + + rows.push(<div className="field" key={"newKeyValue"}> + <EditableView + key="editableView" + contents={"add key:value"} + height={13} + fontSize={12} + GetValue={() => ""} + SetValue={(value: string) => { + value.indexOf(":") !== -1 && KeyValueBox.SetField(doc, value.substring(0, value.indexOf(":")), value.substring(value.indexOf(":") + 1, value.length), true); + return true; + }} /> + </div>); return rows; } } |