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

Merge pull request #24 from georgegevoian/improved-doc-renaming-icon-view

Browse Source 
Improve renaming docs in icon view
This commit is contained in:
Paul Fitzpatrick 2021-06-01 13:18:27 -04:00 committed by GitHub
commit ed2b18c88a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 34 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -31,12 +31,13 @@ export function createPinnedDocs(home: HomeModel) {
*/ */
export function buildPinnedDoc(home: HomeModel, doc: Document, example?: IExampleInfo): HTMLElement { export function buildPinnedDoc(home: HomeModel, doc: Document, example?: IExampleInfo): HTMLElement {
const renaming = observable<Document|null>(null); 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; const docTitle = example?.title || doc.name;
return pinnedDocWrapper( return pinnedDocWrapper(
dom.autoDispose(isRenaming), dom.autoDispose(isRenamingDoc),
dom.domComputed(isRenamingDoc, (isRenaming) =>
pinnedDoc( pinnedDoc(
urlState().setLinkUrl(docUrl(doc)), isRenaming ? null : urlState().setLinkUrl(docUrl(doc)),
pinnedDoc.cls('-no-access', !roles.canView(doc.access)), pinnedDoc.cls('-no-access', !roles.canView(doc.access)),
pinnedDocPreview( pinnedDocPreview(
example?.bgColor ? dom.style('background-color', example.bgColor) : null, example?.bgColor ? dom.style('background-color', example.bgColor) : null,
@ -47,7 +48,7 @@ export function buildPinnedDoc(home: HomeModel, doc: Document, example?: IExampl
(doc.public && !example ? cssPublicIcon('PublicFilled', testId('public')) : null), (doc.public && !example ? cssPublicIcon('PublicFilled', testId('public')) : null),
), ),
pinnedDocFooter( pinnedDocFooter(
dom.domComputed(isRenaming, (yesNo) => yesNo ? (isRenaming ?
pinnedDocEditorInput({ pinnedDocEditorInput({
initialValue: doc.name || '', initialValue: doc.name || '',
save: async (val) => (val !== doc.name) ? home.renameDoc(doc.id, val) : undefined, save: async (val) => (val !== doc.name) ? home.renameDoc(doc.id, val) : undefined,
@ -60,16 +61,19 @@ export function buildPinnedDoc(home: HomeModel, doc: Document, example?: IExampl
// Mostly for the sake of tests, allow .test-dm-pinned-doc-name to find documents in // Mostly for the sake of tests, allow .test-dm-pinned-doc-name to find documents in
// either 'list' or 'icons' views. // either 'list' or 'icons' views.
testId('doc-name') testId('doc-name')
), )
), ),
cssPinnedDocDesc( cssPinnedDocDesc(
example?.desc || capitalizeFirst(getTimeFromNow(doc.updatedAt)), example?.desc || capitalizeFirst(getTimeFromNow(doc.updatedAt)),
testId('pinned-doc-desc') testId('pinned-doc-desc')
) )
) )
)
), ),
example ? null : pinnedDocOptions(icon('Dots'), example ? null : pinnedDocOptions(icon('Dots'),
menu(() => makeDocOptionsMenu(home, doc, renaming), {placement: 'bottom-start'}), 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-options')
), ),
testId('pinned-doc') testId('pinned-doc')