import {docUrl, urlState} from 'app/client/models/gristUrlState'; import {getTimeFromNow, HomeModel} from 'app/client/models/HomeModel'; import {makeDocOptionsMenu} from 'app/client/ui/DocMenu'; import {IExampleInfo} from 'app/client/ui/ExampleInfo'; import {transientInput} from 'app/client/ui/transientInput'; import {colors, vars} from 'app/client/ui2018/cssVars'; import {icon} from 'app/client/ui2018/icons'; import {menu} from 'app/client/ui2018/menus'; import * as roles from 'app/common/roles'; import {Document} from 'app/common/UserAPI'; import {computed, dom, makeTestId, observable, styled} from 'grainjs'; const testId = makeTestId('test-dm-'); /** * PinnedDocs builds the dom at the top of the doclist showing all the pinned docs in the * selectedOrg. Builds nothing if there are no pinned docs. * * Used only by DocMenu. */ export function createPinnedDocs(home: HomeModel) { return pinnedDocList( dom.forEach(home.currentWSPinnedDocs, doc => buildPinnedDoc(home, doc)), testId('pinned-doc-list'), ); } /** * Build a single doc card with a preview and name. A misnomer because it's now used not only for * pinned docs, but also for the thumnbails (aka "icons") view mode. */ export function buildPinnedDoc(home: HomeModel, doc: Document, example?: IExampleInfo): HTMLElement { const renaming = observable(null); const isRenaming = 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') ), ), cssPinnedDocDesc( example?.desc || capitalizeFirst(getTimeFromNow(doc.updatedAt)), testId('pinned-doc-desc') ) ) ), example ? null : pinnedDocOptions(icon('Dots'), menu(() => makeDocOptionsMenu(home, doc, renaming), {placement: 'bottom-start'}), testId('pinned-doc-options') ), testId('pinned-doc') ); } function docInitials(docTitle: string) { return cssDocInitials(docTitle.slice(0, 2), testId('pinned-initials')); } // Capitalizes the first letter in the given string. function capitalizeFirst(str: string): string { return str.replace(/^[a-z]/gi, c => c.toUpperCase()); } const pinnedDocList = styled('div', ` display: flex; overflow-x: auto; overflow-y: hidden; padding-bottom: 16px; margin: 0 0 28px 0; `); export const pinnedDocWrapper = styled('div', ` display: inline-block; flex: 0 0 auto; position: relative; width: 210px; margin: 16px 24px 16px 0; border: 1px solid ${colors.mediumGrey}; border-radius: 1px; vertical-align: top; &:hover { border: 1px solid ${colors.slate}; } `); const pinnedDoc = styled('a', ` display: flex; flex-direction: column; width: 100%; color: black; text-decoration: none; cursor: pointer; &:hover { color: black; text-decoration: none; } &-no-access, &-no-access:hover { color: ${colors.slate}; cursor: not-allowed; } `); const pinnedDocPreview = styled('div', ` position: relative; flex: none; width: 100%; height: 131px; background-color: ${colors.dark}; min-height: 0; padding: 10px; display: flex; align-items: center; justify-content: center; .${pinnedDoc.className}-no-access > & { opacity: 0.8; } `); const pinnedDocThumbnail = styled('div', ` position: absolute; right: 20px; bottom: 20px; height: 48px; width: 48px; background-image: var(--icon-ThumbPreview); background-size: 48px 48px; background-repeat: no-repeat; background-position: center; `); const cssDocInitials = styled('div', ` position: absolute; left: 20px; bottom: 20px; font-size: 32px; border: 1px solid ${colors.lightGreen}; color: ${colors.mediumGreyOpaque}; border-radius: 3px; padding: 4px 0; width: 48px; height: 48px; text-align: center; `); const pinnedDocOptions = styled('div', ` position: absolute; top: 12px; right: 12px; height: 24px; width: 24px; padding: 4px; line-height: 0px; border-radius: 3px; cursor: default; visibility: hidden; background-color: ${colors.mediumGrey}; --icon-color: ${colors.light}; .${pinnedDocWrapper.className}:hover &, &.weasel-popup-open { visibility: visible; } `); const pinnedDocFooter = styled('div', ` width: 100%; font-size: ${vars.mediumFontSize}; `); const pinnedDocTitle = styled('div', ` margin: 16px 16px 0px 16px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; `); export const pinnedDocEditorInput = styled(transientInput, ` margin: 16px 16px 0px 16px; font-weight: bold; min-width: 0px; color: initial; font-size: inherit; line-height: inherit; appearance: none; -moz-appearance: none; padding: 0; border: none; outline: none; background-color: ${colors.mediumGrey}; `); const cssPinnedDocDesc = styled('div', ` margin: 8px 16px 16px 16px; color: ${colors.slate}; `); const cssImage = styled('img', ` position: relative; max-height: 100%; max-width: 100%; `); const cssPublicIcon = styled(icon, ` position: absolute; top: 16px; left: 16px; --icon-color: ${colors.lightGreen}; `);