From 84260841be1f54188188a737535829c53371a7ff Mon Sep 17 00:00:00 2001 From: konrad Date: Thu, 15 Sep 2022 12:36:43 +0000 Subject: [PATCH] feat(list): add info dialoge to show list description (#2368) Co-authored-by: kolaente Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/2368 Reviewed-by: Dominik Pschenitschni --- package.json | 1 + src/components/home/TheNavigation.vue | 17 ++++++++++- src/components/input/editor.vue | 40 ++---------------------- src/helpers/markdownRenderer.ts | 44 +++++++++++++++++++++++++++ src/i18n/lang/en.json | 1 + src/icons.ts | 10 +++--- src/router/index.ts | 10 ++++++ src/views/list/ListInfo.vue | 42 +++++++++++++++++++++++++ yarn.lock | 9 +++++- 9 files changed, 130 insertions(+), 44 deletions(-) create mode 100644 src/helpers/markdownRenderer.ts create mode 100644 src/views/list/ListInfo.vue diff --git a/package.json b/package.json index 0918af8a8..21de775c2 100644 --- a/package.json +++ b/package.json @@ -65,6 +65,7 @@ "@cypress/vite-dev-server": "3.1.1", "@cypress/vue": "4.2.0", "@faker-js/faker": "7.5.0", + "@types/dompurify": "^2.3.4", "@types/flexsearch": "0.7.3", "@typescript-eslint/eslint-plugin": "5.37.0", "@typescript-eslint/parser": "5.37.0", diff --git a/src/components/home/TheNavigation.vue b/src/components/home/TheNavigation.vue index dbe6fefaa..331a8aa5c 100644 --- a/src/components/home/TheNavigation.vue +++ b/src/components/home/TheNavigation.vue @@ -16,6 +16,10 @@ {{ currentList.title === '' ? $t('misc.loading') : getListTitle(currentList) }} + + + + @@ -284,10 +288,21 @@ $hamburger-menu-icon-width: 28px; :deep(.dropdown-trigger) { color: var(--grey-400); - margin-left: 1rem; + margin-left: .5rem; height: 1rem; width: 1rem; cursor: pointer; } } + +.info-button { + text-align: center; + height: 1.25rem; + line-height: 1.25rem; + width: 2rem; + margin-top: .25rem; + padding: 0 .5rem; + color: var(--grey-400); + margin-left: .5rem; +} \ No newline at end of file diff --git a/src/components/input/editor.vue b/src/components/input/editor.vue index 839df3386..fde440b8e 100644 --- a/src/components/input/editor.vue +++ b/src/components/input/editor.vue @@ -72,7 +72,7 @@ import {defineComponent} from 'vue' import VueEasymde from './vue-easymde.vue' import {marked} from 'marked' import DOMPurify from 'dompurify' -import hljs from 'highlight.js/lib/common' +import {setupMarkdownRenderer} from '@/helpers/markdownRenderer' import {createEasyMDEConfig} from './editorConfig' @@ -222,43 +222,7 @@ export default defineComponent({ return checkboxes[n] }, renderPreview() { - const renderer = new marked.Renderer() - const linkRenderer = renderer.link - - let checkboxNum = -1 - marked.use({ - renderer: { - image: (src, title, text) => { - - title = title ? ` title="${title}` : '' - - // If the url starts with the api url, the image is likely an attachment and - // we'll need to download and parse it properly. - if (src.substr(0, window.API_URL.length + 7) === `${window.API_URL}/tasks/`) { - return `${text}` - } - - return `${text}` - }, - checkbox: (checked) => { - if (checked) { - checked = ' checked="checked"' - } - - checkboxNum++ - return `` - }, - link: (href, title, text) => { - const isLocal = href.startsWith(`${location.protocol}//${location.hostname}`) - const html = linkRenderer.call(renderer, href, title, text) - return isLocal ? html : html.replace(/^ { + + title = title ? ` title="${title}` : '' + + // If the url starts with the api url, the image is likely an attachment and + // we'll need to download and parse it properly. + if (src.substr(0, window.API_URL.length + 7) === `${window.API_URL}/tasks/`) { + return `${text}` + } + + return `${text}` + }, + checkbox: (checked) => { + if (checked) { + checked = ' checked="checked"' + } + + checkboxNum++ + return `` + }, + link: (href, title, text) => { + const isLocal = href.startsWith(`${location.protocol}//${location.hostname}`) + const html = linkRenderer.call(renderer, href, title, text) + return isLocal ? html : html.replace(/^ import('../views/list/ListInfo.vue') // List Settings import ListSettingEdit from '../views/list/settings/edit.vue' @@ -336,6 +337,15 @@ const router = createRouter({ showAsModal: true, }, }, + { + path: '/lists/:listId/info', + name: 'list.info', + component: ListInfo, + meta: { + showAsModal: true, + }, + props: route => ({ listId: Number(route.params.listId as string) }), + }, { path: '/lists/:listId', name: 'list.index', diff --git a/src/views/list/ListInfo.vue b/src/views/list/ListInfo.vue new file mode 100644 index 000000000..fb311a67e --- /dev/null +++ b/src/views/list/ListInfo.vue @@ -0,0 +1,42 @@ + + + diff --git a/yarn.lock b/yarn.lock index 49c7566bd..d6a3143e2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2168,6 +2168,13 @@ dependencies: "@types/node" "*" +"@types/dompurify@^2.3.4": + version "2.3.4" + resolved "https://registry.yarnpkg.com/@types/dompurify/-/dompurify-2.3.4.tgz#94e997e30338ea24d4c8d08beca91ce4dd17a1b4" + integrity sha512-EXzDatIb5EspL2eb/xPGmaC8pePcTHrkDCONjeisusLFrVfl38Pjea/R0YJGu3k9ZQadSvMqW0WXPI2hEo2Ajg== + dependencies: + "@types/trusted-types" "*" + "@types/download@^8.0.0": version "8.0.1" resolved "https://registry.yarnpkg.com/@types/download/-/download-8.0.1.tgz#9653e0deb52f1b47f659e8e8be1651c8515bc0a7" @@ -2386,7 +2393,7 @@ dependencies: "@types/estree" "*" -"@types/trusted-types@^2.0.2": +"@types/trusted-types@*", "@types/trusted-types@^2.0.2": version "2.0.2" resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.2.tgz#fc25ad9943bcac11cceb8168db4f275e0e72e756" integrity sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==