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

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

View File

@ -31,12 +31,13 @@ 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),
dom.autoDispose(isRenamingDoc),
dom.domComputed(isRenamingDoc, (isRenaming) =>
pinnedDoc(
urlState().setLinkUrl(docUrl(doc)),
isRenaming ? null : urlState().setLinkUrl(docUrl(doc)),
pinnedDoc.cls('-no-access', !roles.canView(doc.access)),
pinnedDocPreview(
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),
),
pinnedDocFooter(
dom.domComputed(isRenaming, (yesNo) => yesNo ?
(isRenaming ?
pinnedDocEditorInput({
initialValue: doc.name || '',
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
// 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')