From c3d9e85823ec7863410ac00d5a080fc22bdf7383 Mon Sep 17 00:00:00 2001 From: Sebastian Graz Date: Tue, 13 Feb 2024 21:03:57 +0100 Subject: [PATCH] Style sprint 3 (#136) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * first pass at nested ordered list symbols * remove margin inside lists * V1 of nested bullets & fix header hash pos * clean up * convert listItem render to switch * Improve lists * improve heading hash * fix list todos to match heading size too * no need for inline-grid --------- Co-authored-by: Samy Pessé --- src/app/[spaceId]/globals.css | 18 ++++ src/components/DocumentView/Heading.tsx | 27 +++--- src/components/DocumentView/ListItem.tsx | 93 +++++++++++++------ src/components/DocumentView/ListOrdered.tsx | 30 ++++-- src/components/DocumentView/ListTasks.tsx | 9 +- src/components/DocumentView/ListUnordered.tsx | 30 +++++- 6 files changed, 157 insertions(+), 50 deletions(-) diff --git a/src/app/[spaceId]/globals.css b/src/app/[spaceId]/globals.css index fa801dacd..196a04ac5 100644 --- a/src/app/[spaceId]/globals.css +++ b/src/app/[spaceId]/globals.css @@ -122,6 +122,24 @@ .inverted-theme-scroll::-webkit-scrollbar-thumb:hover { @apply bg-dark/6; } + + /* bullet icons */ + .bullet-dash { + @apply [mask-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEwIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHg9IjEiIHk9IjIuNSIgd2lkdGg9IjgiIGhlaWdodD0iMS41IiByeD0iMC42NiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==")]; + } + .bullet-circleFilled { + @apply [mask-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEwIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHg9IjIiIHdpZHRoPSI2IiBoZWlnaHQ9IjYiIHJ4PSIzIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K")]; + } + .bullet-circle { + @apply [mask-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEwIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHg9IjIuNzUiIHk9IjAuNzUiIHdpZHRoPSI1LjUiIGhlaWdodD0iNS41IiByeD0iMi43NSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIxLjUiLz4KPC9zdmc+Cg==")]; + } + .bullet-squareFilled { + @apply [mask-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEwIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHg9IjIiIHdpZHRoPSI2IiBoZWlnaHQ9IjYiIHJ4PSIxIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K")]; + } + .bullet-square { + @apply [mask-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEwIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxtYXNrIGlkPSJwYXRoLTEtaW5zaWRlLTFfOV80OCIgZmlsbD0id2hpdGUiPgo8cmVjdCB4PSIyIiB3aWR0aD0iNyIgaGVpZ2h0PSI3IiByeD0iMSIvPgo8L21hc2s+CjxyZWN0IHg9IjIiIHdpZHRoPSI3IiBoZWlnaHQ9IjciIHJ4PSIxIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjMiIG1hc2s9InVybCgjcGF0aC0xLWluc2lkZS0xXzlfNDgpIi8+Cjwvc3ZnPgo=")]; + } + } @layer utilities { diff --git a/src/components/DocumentView/Heading.tsx b/src/components/DocumentView/Heading.tsx index 5c5f220d7..c7f8853e4 100644 --- a/src/components/DocumentView/Heading.tsx +++ b/src/components/DocumentView/Heading.tsx @@ -21,18 +21,20 @@ export function Heading(props: BlockProps) {
) { className={tcls( 'inline-flex', 'h-full', - 'items-center', + 'items-start', 'dark:text-light/3', 'dark:shadow-none', 'dark:ring-0', + textStyle.lineHeight, )} >
-
+
diff --git a/src/components/DocumentView/ListItem.tsx b/src/components/DocumentView/ListItem.tsx index dc6486ed5..be40d9f05 100644 --- a/src/components/DocumentView/ListItem.tsx +++ b/src/components/DocumentView/ListItem.tsx @@ -5,41 +5,82 @@ import { tcls } from '@/lib/tailwind'; import { BlockProps } from './Block'; import { Blocks } from './Blocks'; +import { getBlockTextStyle } from './spacing'; export function ListItem(props: BlockProps) { const { block, ancestorBlocks, ...contextProps } = props; - const isTaskList = ancestorBlocks[ancestorBlocks.length - 1]?.type === 'list-tasks'; + const textStyle = getBlockTextStyle(block); - return ( -
  • - {isTaskList ? ( -
    - + const listType = ancestorBlocks[ancestorBlocks.length - 1]?.type; -
  • +
    +
    + +
    + + +
    +
    • + ); + case 'list-ordered': + return ( +
  • +
    + {/* zero width space to force layouts with empty lists */} - -
    • - ) : ( - - )} - - ); + + ); + default: + // 'list-unordered' + return ( +
  • +
    + +
    • + ); + } + }; + + return ; } diff --git a/src/components/DocumentView/ListOrdered.tsx b/src/components/DocumentView/ListOrdered.tsx index 3d05c12ca..2edcaeff9 100644 --- a/src/components/DocumentView/ListOrdered.tsx +++ b/src/components/DocumentView/ListOrdered.tsx @@ -14,12 +14,30 @@ export function ListOrdered(props: BlockProps) { ancestorBlocks={[...ancestorBlocks, block]} style={[ 'space-y-2', - 'list-decimal', - 'ps-[2ch]', - 'marker:[font-variant-numeric:normal]', - 'marker:text-dark/6', - '[&>li]:pl-[.25ch]', - 'dark:marker:text-light/6', + 'flex', + 'flex-col', + '[&>li]:gap-[1ch]', + + '[counter-reset:list-decimal]', + + '[&>li]:flex', + '[&>li]:flex-row', + + /* '[&>li>.bullet]:w-[1ch]', */ + '[&>li>.bullet]:[font-variant-numeric:tabular-nums]', + '[&>li>.bullet]:[counter-increment:list-decimal]', + + '[&>li>.bullet]:before:h-[1lh]', + '[&>li>.bullet]:before:leading-[inherit]', + '[&>li>.bullet]:before:flex', + '[&>li>.bullet]:before:[content:counter(list-decimal)]', + /* '[&>li>.bullet]:before:pr-[1ch]', */ + '[&>li>.bullet]:text-dark/6', + + //remove any spacing when using heading as list item + '[&>li>div_div]:mt-0', + + 'dark:[&>li>.bullet]:text-light/6', style, ]} /> diff --git a/src/components/DocumentView/ListTasks.tsx b/src/components/DocumentView/ListTasks.tsx index 82717bc49..3db02eab0 100644 --- a/src/components/DocumentView/ListTasks.tsx +++ b/src/components/DocumentView/ListTasks.tsx @@ -12,7 +12,14 @@ export function ListTasks(props: BlockProps) { tag="ul" nodes={block.nodes} ancestorBlocks={[...ancestorBlocks, block]} - style={['list-none', '[&>li]:pl-[.25ch]', 'space-y-2', style]} + style={[ + 'list-none', + '[&>li]:pl-[.25ch]', + //remove any spacing when using heading as list item + '[&>li>div_div]:mt-0', + 'space-y-2', + style, + ]} /> ); } diff --git a/src/components/DocumentView/ListUnordered.tsx b/src/components/DocumentView/ListUnordered.tsx index a9a60dadd..b68049199 100644 --- a/src/components/DocumentView/ListUnordered.tsx +++ b/src/components/DocumentView/ListUnordered.tsx @@ -6,6 +6,19 @@ import { Blocks } from './Blocks'; export function ListUnordered(props: BlockProps) { const { block, style, ancestorBlocks, ...contextProps } = props; + const nestedBulletStyle = [ + // Level 1 + '[&>li>.bullet:before]:bullet-dash', + // Level 2 + `[&_&>li>.bullet:before]:bullet-circleFilled`, + // Level 3 + `[&_&_&>li>.bullet:before]:bullet-circle`, + // Level 4 + `[&_&_&_&>li>.bullet:before]:bullet-squareFilled`, + // Level 5 + `[&_&_&_&_&>li>.bullet:before]:bullet-square`, + ]; + return ( ) { 'space-y-2', '[&>li]:relative', '[&>li]:ps-[2.25ch]', - '[&>li]:before:text-dark/6', - '[&>li]:before:content-["–"]', - '[&>li]:before:absolute', - '[&>li]:before:left-0', - 'dark:[&>li]:before:text-light/6', + //remove any spacing when using heading as list item + '[&>li>div_div]:mt-0', + //custom content setup for lists + '[&>li>.bullet]:before:bg-dark/6', + '[&>li>.bullet]:before:absolute', + '[&>li>.bullet]:before:left-0', + '[&>li>.bullet]:before:w-[1ch]', + '[&>li>.bullet]:before:h-[1lh]', + '[&>li>.bullet]:before:[mask-repeat:no-repeat]', + '[&>li>.bullet]:before:[mask-position:left]', + 'dark:[&>li>.bullet]:before:bg-light/6', + nestedBulletStyle, style, ]} />