From a3a4d05e890308a109239370a28e4e3f99a612f4 Mon Sep 17 00:00:00 2001 From: Elscrux Date: Thu, 11 Apr 2024 15:46:10 +0000 Subject: [PATCH] feat(editor): checklist visual improvements (#2264) This makes task lists (especially big ones) easier to read. I've set a margin so there is a distance between task items which makes them easier to stand out. I've also changed the visuals of the checked elements (strike through + grey font color) so the unchecked ones stand out more. Note that this currently seems to be a big bugged outside of edit mode as `data-checked` doesn't seem to be updating correctly in this state which seems to be an issue that is already noted for the TipTap editor. Co-authored-by: Elscrux Reviewed-on: https://kolaente.dev/vikunja/vikunja/pulls/2264 Reviewed-by: konrad Co-authored-by: Elscrux Co-committed-by: Elscrux --- frontend/src/components/input/editor/TipTap.vue | 6 ++++++ frontend/vite.config.ts | 4 ++-- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/input/editor/TipTap.vue b/frontend/src/components/input/editor/TipTap.vue index af4da5455..54dfcf2df 100644 --- a/frontend/src/components/input/editor/TipTap.vue +++ b/frontend/src/components/input/editor/TipTap.vue @@ -891,8 +891,14 @@ ul[data-type='taskList'] { padding: 0; margin-left: 0; + li[data-checked='true'] { + color: var(--grey-500); + text-decoration: line-through; + } + li { display: flex; + margin-top: 0.25rem; > label { flex: 0 0 auto; diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts index 31728a961..9f4cbca12 100644 --- a/frontend/vite.config.ts +++ b/frontend/vite.config.ts @@ -17,11 +17,11 @@ import postcssEasings from 'postcss-easings' import postcssEasingGradients from 'postcss-easing-gradients' -const pathSrc = fileURLToPath(new URL('./src', import.meta.url)) +const pathSrc = fileURLToPath(new URL('./src', import.meta.url)).replaceAll('\\', '/') // the @use rules have to be the first in the compiled stylesheets const PREFIXED_SCSS_STYLES = `@use "sass:math"; -@import "${pathSrc}/styles/common-imports";` +@import "${pathSrc}/styles/common-imports.scss";` const isModernBuild = Boolean(process.env.BUILD_MODERN_ONLY) const legacy = isModernBuild