Archives/gristlabs_grist-core
1
0
Fork 0
mirror of https://github.com/gristlabs/grist-core.git synced 2024-09-28 21:00:46 +00:00
Code Issues Projects Releases Wiki Activity

Improve renaming docs in icon view

Browse Source
This commit is contained in:
George Gevoian 2021-05-31 19:48:32 -07:00
parent 0890749d15
commit 68c1a8ba96
1 changed files with 34 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
app/client/ui/PinnedDocs.ts
View File

@ -31,45 +31,49 @@ export function createPinnedDocs(home: HomeModel) {
*/
export function buildPinnedDoc(home: HomeModel, doc: Document, example?: IExampleInfo): HTMLElement {
const renaming = observable<Document|null>(null);
const isRenaming = computed((use) => use(renaming) === doc);
const isRenamingDoc = computed((use) => use(renaming) === doc);
const docTitle = example?.title || doc.name;
return pinnedDocWrapper(
dom.autoDispose(isRenaming),
pinnedDoc(
urlState().setLinkUrl(docUrl(doc)),
pinnedDoc.cls('-no-access', !roles.canView(doc.access)),
pinnedDocPreview(
example?.bgColor ? dom.style('background-color', example.bgColor) : null,
(example?.imgUrl ?
cssImage({src: example.imgUrl}) :
[docInitials(docTitle), pinnedDocThumbnail()]
),
(doc.public && !example ? cssPublicIcon('PublicFilled', testId('public')) : null),
),
pinnedDocFooter(
dom.domComputed(isRenaming, (yesNo) => yesNo ?
pinnedDocEditorInput({
initialValue: doc.name || '',
save: async (val) => (val !== doc.name) ? home.renameDoc(doc.id, val) : undefined,
close: () => renaming.set(null),
}, testId('doc-name-editor'))
:
pinnedDocTitle(
dom.text(docTitle),
testId('pinned-doc-name'),
// Mostly for the sake of tests, allow .test-dm-pinned-doc-name to find documents in
// either 'list' or 'icons' views.
testId('doc-name')
dom.autoDispose(isRenamingDoc),
dom.domComputed(isRenamingDoc, (isRenaming) =>
pinnedDoc(
isRenaming ? null : urlState().setLinkUrl(docUrl(doc)),
pinnedDoc.cls('-no-access', !roles.canView(doc.access)),
pinnedDocPreview(
example?.bgColor ? dom.style('background-color', example.bgColor) : null,
(example?.imgUrl ?
cssImage({src: example.imgUrl}) :
[docInitials(docTitle), pinnedDocThumbnail()]
),
(doc.public && !example ? cssPublicIcon('PublicFilled', testId('public')) : null),
),
cssPinnedDocDesc(
example?.desc || capitalizeFirst(getTimeFromNow(doc.updatedAt)),
testId('pinned-doc-desc')
pinnedDocFooter(
(isRenaming ?
pinnedDocEditorInput({
initialValue: doc.name || '',
save: async (val) => (val !== doc.name) ? home.renameDoc(doc.id, val) : undefined,
close: () => renaming.set(null),
}, testId('doc-name-editor'))
:
pinnedDocTitle(
dom.text(docTitle),
testId('pinned-doc-name'),
// Mostly for the sake of tests, allow .test-dm-pinned-doc-name to find documents in
// either 'list' or 'icons' views.
testId('doc-name')
)
),
cssPinnedDocDesc(
example?.desc || capitalizeFirst(getTimeFromNow(doc.updatedAt)),
testId('pinned-doc-desc')
)
)
)
),
example ? null : pinnedDocOptions(icon('Dots'),
menu(() => makeDocOptionsMenu(home, doc, renaming), {placement: 'bottom-start'}),
// Clicks on the menu trigger shouldn't follow the link that it's contained in.
dom.on('click', (ev) => { ev.stopPropagation(); ev.preventDefault(); }),
testId('pinned-doc-options')
),
testId('pinned-doc')