Archives/gristlabs_grist-core
1
0
Fork 0
mirror of https://github.com/gristlabs/grist-core.git synced 2024-10-27 20:44:07 +00:00
Code Issues Projects Releases Wiki Activity

feat: add rename when clicking on selected label page

Browse Source
This commit is contained in:
Louis Delbosc 2022-08-03 15:08:15 +02:00
parent 9434b8e454
commit 531ea1a4b5
1 changed files with 10 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
app/client/ui2018/pages.ts
View File

@ -17,6 +17,11 @@ export interface PageActions {
isReadonly: Observable<boolean>; isReadonly: Observable<boolean>;
} }
function isTargetSelected(target: HTMLElement) {
const parentItemHeader = target.closest('.' + itemHeader.className);
return parentItemHeader ? parentItemHeader.classList.contains('selected') : false;
}
// build the dom for a document page entry. It shows an icon (for now the first letter of the name, // build the dom for a document page entry. It shows an icon (for now the first letter of the name,
// but later we'll support user selected icon), the name and a dots menu containing a "Rename" and // but later we'll support user selected icon), the name and a dots menu containing a "Rename" and
// "Remove" entries. Clicking "Rename" turns the page name into an editable input, which then call // "Remove" entries. Clicking "Rename" turns the page name into an editable input, which then call
@ -69,7 +74,11 @@ export function buildPageDom(name: Observable<string>, actions: PageActions, ...
) : ) :
cssPageItem( cssPageItem(
cssPageInitial(dom.text((use) => Array.from(use(name))[0])), cssPageInitial(dom.text((use) => Array.from(use(name))[0])),
cssPageName(dom.text(name), testId('label')), cssPageName(
dom.text(name),
testId('label'),
dom.on('click', (ev) => isTargetSelected(ev.target as HTMLElement) && isRenaming.set(true)),
),
cssPageMenuTrigger( cssPageMenuTrigger(
cssPageIcon('Dots'), cssPageIcon('Dots'),
menu(pageMenu, {placement: 'bottom-start', parentSelectorToMark: '.' + itemHeader.className}), menu(pageMenu, {placement: 'bottom-start', parentSelectorToMark: '.' + itemHeader.className}),