diff options
| -rw-r--r-- | src/client/views/collections/collectionFreeForm/PropertiesView.scss | 12 | ||||
| -rw-r--r-- | src/client/views/collections/collectionFreeForm/PropertiesView.tsx | 119 |
2 files changed, 108 insertions, 23 deletions
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss index 0701f3b96..856f8e7f2 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss @@ -170,6 +170,8 @@ .propertiesView-fields-title-name { font-size: 12.5px; font-weight: bold; + white-space: nowrap; + width: 35px; } .propertiesView-fields-title-checkbox { @@ -206,6 +208,16 @@ padding-left: 3px; } + .uneditable-field { + display: flex; + overflow-y: visible; + margin-bottom: 2px; + + &:hover { + cursor: auto; + } + } + .propertiesView-layout { padding: 8.5px; diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx index 0f59e2f79..be024b772 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx @@ -7,7 +7,7 @@ import { DocumentView } from "../../nodes/DocumentView"; import { ComputedField } from "../../../../fields/ScriptField"; import { EditableView } from "../../EditableView"; import { KeyValueBox } from "../../nodes/KeyValueBox"; -import { Cast, StrCast, NumCast } from "../../../../fields/Types"; +import { Cast, NumCast, StrCast } from "../../../../fields/Types"; import { listSpec } from "../../../../fields/Schema"; import { ContentFittingDocumentView } from "../../nodes/ContentFittingDocumentView"; import { returnFalse, returnOne, emptyFunction, emptyPath, returnTrue, returnZero, returnEmptyFilter, Utils } from "../../../../Utils"; @@ -94,42 +94,113 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { const ids: { [key: string]: string } = {}; const doc = this.layoutFields ? Doc.Layout(this.selectedDoc) : this.dataDoc; doc && Object.keys(doc).forEach(key => !(key in ids) && doc[key] !== ComputedField.undefined && (ids[key] = key)); - const rows: JSX.Element[] = []; for (const key of Object.keys(ids).slice().sort()) { const contents = doc[key]; - let contentElement: (JSX.Element | null)[] | JSX.Element = []; - contentElement = <EditableView key="editableView" - contents={contents !== undefined ? Field.toString(contents as Field) : "null"} + if (contents === "UNDEFINED") { + rows.push(<div style={{ display: "flex", overflowY: "visible", marginBottom: "2px" }} key={key}> + <span style={{ fontWeight: "bold", whiteSpace: "nowrap" }}>{key}</span> + + </div>); + } else { + let contentElement: (JSX.Element | null)[] | JSX.Element = []; + contentElement = <EditableView key="editableView" + contents={contents !== undefined ? Field.toString(contents as Field) : "null"} + height={13} + fontSize={10} + GetValue={() => Field.toKeyValueString(doc, key)} + SetValue={(value: string) => KeyValueBox.SetField(doc, key, value, true)} + />; + rows.push(<div style={{ display: "flex", overflowY: "visible", marginBottom: "-1px" }} key={key}> + <span style={{ fontWeight: "bold", whiteSpace: "nowrap" }}>{key + ":"}</span> + + {contentElement} + </div>); + } + } + rows.push(<div className="field" key={"newKeyValue"} style={{ marginTop: "3px" }}> + <EditableView + key="editableView" + contents={"add key:value or #tags"} height={13} fontSize={10} - GetValue={() => Field.toKeyValueString(doc, key)} - SetValue={(value: string) => KeyValueBox.SetField(doc, key, value, true)} - />; + GetValue={() => ""} + SetValue={this.setKeyValue} /> + </div>); + return rows; + } + } - rows.push(<div style={{ display: "flex", overflowY: "visible", marginBottom: "-1px" }} key={key}> - <span style={{ fontWeight: "bold", whiteSpace: "nowrap" }}>{key + ":"}</span> + @computed get noviceFields() { + if (this.dataDoc && this.selectedDoc) { + const ids: { [key: string]: string } = {}; + const doc = this.dataDoc; + doc && Object.keys(doc).forEach(key => !(key in ids) && doc[key] !== ComputedField.undefined && (ids[key] = key)); + const rows: JSX.Element[] = []; + for (const key of Object.keys(ids).slice().sort()) { + if (key[0] === key[0].toUpperCase() || key[0] === "#" || key === "author" || key === "creationDate" || key.indexOf("lastModified") !== -1) { + const contents = doc[key]; + if (contents === "UNDEFINED") { + rows.push(<div className="uneditable-field" key={key}> + <span style={{ fontWeight: "bold", whiteSpace: "nowrap" }}>{key}</span> - {contentElement} </div>); - } + } else { + const value = Field.toString(contents as Field); + if (key === "author" || key === "creationDate" || key.indexOf("lastModified") !== -1) { + rows.push(<div className="uneditable-field" key={key}> + <span style={{ fontWeight: "bold", whiteSpace: "nowrap" }}>{key + ": "}</span> + <div style={{ whiteSpace: "nowrap", overflowX: "hidden" }}>{value}</div> + </div>); + } else { + let contentElement: (JSX.Element | null)[] | JSX.Element = []; + contentElement = <EditableView key="editableView" + contents={contents !== undefined ? Field.toString(contents as Field) : "null"} + height={13} + fontSize={10} + GetValue={() => Field.toKeyValueString(doc, key)} + SetValue={(value: string) => KeyValueBox.SetField(doc, key, value, true)} + />; - rows.push(<div className="field" key={"newKeyValue"}> + rows.push(<div style={{ display: "flex", overflowY: "visible", marginBottom: "-1px" }} key={key}> + <span style={{ fontWeight: "bold", whiteSpace: "nowrap" }}>{key + ":"}</span> + + {contentElement} + </div>); + } + } + } + } + rows.push(<div className="field" key={"newKeyValue"} style={{ marginTop: "3px" }}> <EditableView key="editableView" - contents={"add key:value"} + contents={"add key:value or #tags"} height={13} - fontSize={12} + fontSize={10} 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; - }} /> + SetValue={this.setKeyValue} /> </div>); return rows; } } + + setKeyValue = (value: string) => { + if (this.selectedDoc && this.dataDoc) { + const doc = this.layoutFields ? Doc.Layout(this.selectedDoc) : this.dataDoc; + if (value.indexOf(":") !== -1) { + const newVal = value[0].toUpperCase() + value.substring(1, value.length); + 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'"; + KeyValueBox.SetField(doc, newVal.substring(0, newVal.indexOf(":")), newVal.substring(newVal.indexOf(":") + 1, newVal.length), true); + return true; + } + } + return false; + } + @computed get layoutPreview() { if (this.selectedDoc) { const layoutDoc = Doc.Layout(this.selectedDoc); @@ -252,6 +323,8 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { </div> </div>; } + const novice = Doc.UserDoc().noviceMode; + return <div className="propertiesView" > <div className="propertiesView-title"> <div className="propertiesView-title-name">Properties </div> @@ -277,14 +350,14 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { <div className="propertiesView-fields"> <div className="propertiesView-fields-title"> <div className="propertiesView-fields-title-name"> - Fields + Fields {"&"} Tags </div> - <div className="propertiesView-fields-title-checkbox"> + {!novice ? <div className="propertiesView-fields-title-checkbox"> {this.fieldsCheckbox} <div className="propertiesView-fields-title-checkbox-text">Layout</div> - </div> + </div> : null} </div> - <div className="propertiesView-fields-content"> {this.expandedField} </div> + <div className="propertiesView-fields-content"> {novice ? this.noviceFields : this.expandedField} </div> </div> <div className="propertiesView-layout"> <div className="propertiesView-layout-title" >Layout</div> |