Archives/gristlabs_grist-core
1
0
Fork 0
mirror of https://github.com/gristlabs/grist-core.git synced 2026-03-02 04:09:24 +00:00
Code Issues Projects Releases Wiki Activity

(core) Polish ChoiceListEntry drag and drop

Browse Source 
Summary:
A green line indicating the insertion point is now shown in the
ChoiceListEntry component when dragging and dropping choices, similar
to the one shown in the choice list cell editor.

Test Plan: Tested manually.

Reviewers: jarek

Reviewed By: jarek

Differential Revision: https://phab.getgrist.com/D3529
This commit is contained in:
George Gevoian
2022-07-18 10:05:35 -07:00
parent 4b258ae0fa
commit 3e49fe9a50
5 changed files with 122 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
app/client/ui2018/breadcrumbs.ts
View File

@@ -140,10 +140,14 @@ export function docBreadcrumbs(
];
}
),
editableLabel(
docName, options.docNameSave, testId('bc-doc'), cssEditableName.cls(''),
dom.boolAttr('disabled', options.isDocNameReadOnly || false),
),
editableLabel(docName, {
save: options.docNameSave,
inputArgs: [
testId('bc-doc'),
cssEditableName.cls(''),
dom.boolAttr('disabled', options.isDocNameReadOnly || false),
],
}),
dom.maybe(options.isPublic, () => cssPublicIcon('PublicFilled', testId('bc-is-public'))),
dom.domComputed((use) => {
if (options.isSnapshot && use(options.isSnapshot)) {
@@ -175,10 +179,14 @@ export function docBreadcrumbs(
separator(' / ',
testId('bc-separator'),
cssHideForNarrowScreen.cls('')),
editableLabel(
pageName, options.pageNameSave, testId('bc-page'), cssEditableName.cls(''),
dom.boolAttr('disabled', options.isPageNameReadOnly || false),
dom.cls(cssHideForNarrowScreen.className),
),
editableLabel(pageName, {
save: options.pageNameSave,
inputArgs: [
testId('bc-page'),
cssEditableName.cls(''),
dom.boolAttr('disabled', options.isPageNameReadOnly || false),
dom.cls(cssHideForNarrowScreen.className),
],
}),
);
}

13
app/client/ui2018/editableLabel.ts
View File

@@ -64,12 +64,20 @@ enum Status { NORMAL, EDITING, SAVING }
type SaveFunc = (value: string) => Promise<void>;
export interface EditableLabelOptions {
save: SaveFunc;
args?: Array<DomArg<HTMLDivElement>>;
inputArgs?: Array<DomArg<HTMLInputElement>>;
}
/**
* Provides a label that takes in an observable that is set on Enter or loss of focus. Escape
* cancels editing. Label grows in size with typed input. Validation logic (if any) should happen in
* the save function, to reject a value simply throw an error, this will revert to the saved one .
*/
export function editableLabel(label: Observable<string>, save: SaveFunc, ...args: Array<DomArg<HTMLInputElement>>) {
export function editableLabel(label: Observable<string>, options: EditableLabelOptions) {
const {save, args, inputArgs} = options;
let input: HTMLInputElement;
let sizer: HTMLSpanElement;
@@ -81,8 +89,9 @@ export function editableLabel(label: Observable<string>, save: SaveFunc, ...args
sizer = cssSizer(label.get()),
input = rawTextInput(label, save, updateSizer, dom.cls(cssLabelText.className),
dom.on('focus', () => input.select()),
...args
...inputArgs ?? [],
),
...args ?? [],
);
}