feat(columnDescription): show description textarea in right panel

This commit is contained in:
Camille 2023-01-17 11:39:23 +01:00
parent f1a4404a60
commit 66cb283075
2 changed files with 37 additions and 0 deletions

View File

@ -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<CursorPos>,
) {
const editedDescription = Observable.create(owner, '');
return [
cssLabel(t("DESCRIPTION")),
cssRow(
cssTextArea(editedDescription, {})
),
];
}
type SaveHandler = (column: ColumnRec, formula: string) => Promise<void>;
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};
}
`);

View File

@ -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,