diff --git a/app/client/ui/FieldConfig.ts b/app/client/ui/FieldConfig.ts index 626ac49e..bba473a0 100644 --- a/app/client/ui/FieldConfig.ts +++ b/app/client/ui/FieldConfig.ts @@ -18,6 +18,7 @@ import {sanitizeIdent} from 'app/common/gutil'; import {bundleChanges, Computed, dom, DomContents, DomElementArg, fromKo, MultiHolder, Observable, styled} from 'grainjs'; import * as ko from 'knockout'; +import { textarea } from './inputs'; const t = makeT('FieldConfig'); @@ -88,6 +89,22 @@ export function buildNameConfig( ]; } +export function buildDescriptionConfig( + owner: MultiHolder, + origColumn: ColumnRec, + cursor: ko.Computed, +) { + const editedDescription = Observable.create(owner, ''); + + return [ + cssLabel(t("DESCRIPTION")), + cssRow( + cssTextArea(editedDescription, {}) + ), + + ]; +} + type SaveHandler = (column: ColumnRec, formula: string) => Promise; type BuildEditor = ( cellElem: Element, @@ -494,3 +511,19 @@ const cssInput = styled(textInput, ` color: ${theme.inputDisabledFg}; } `); + +const cssTextArea = styled(textarea, ` + color: ${theme.inputFg}; + background-color: ${theme.mainPanelBg}; + border: 1px solid ${theme.inputBorder}; + width: 100%; + + &::placeholder { + color: ${theme.inputPlaceholderFg}; + } + + &[readonly] { + background-color: ${theme.inputDisabledBg}; + color: ${theme.inputDisabledFg}; + } +`); diff --git a/app/client/ui/RightPanel.ts b/app/client/ui/RightPanel.ts index 8aceb998..04778f1a 100644 --- a/app/client/ui/RightPanel.ts +++ b/app/client/ui/RightPanel.ts @@ -43,6 +43,7 @@ import {bundleChanges, Computed, Disposable, dom, domComputed, DomContents, DomElementArg, DomElementMethod, IDomComponent} from 'grainjs'; import {MultiHolder, Observable, styled, subscribe} from 'grainjs'; import * as ko from 'knockout'; +import { buildDescriptionConfig } from './FieldConfig'; const t = makeT('RightPanel'); @@ -235,6 +236,9 @@ export class RightPanel extends Disposable { cssSection( dom.create(buildNameConfig, origColumn, cursor, isMultiSelect), ), + cssSection( + dom.create(buildDescriptionConfig, origColumn, cursor, isMultiSelect), + ), cssSeparator(), cssSection( dom.create(buildFormulaConfig,