Improve the appearance of toolbar popovers, add toolbar group separators

fluff4me · Oct 24, 2024 · 278841f · 278841f
1 parent d0f34e9
commit 278841f
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 15 deletions.
diff --git a/src/ui/component/core/TextEditor.ts b/src/ui/component/core/TextEditor.ts
@@ -126,6 +126,10 @@ const TextEditor = Component.Builder((component): TextEditor => {
 	////////////////////////////////////
 	//#region ToolbarButton
 
+	const ToolbarButtonGroup = Component.Builder(component => component
+		.ariaRole("group")
+		.style("text-editor-toolbar-button-group"))
+
 	const ToolbarButtonMark = Component.Builder((_, type: Marks) => {
 		const mark = schema.marks[type]
 		const toggler = markToggler(mark)
@@ -225,8 +229,7 @@ const TextEditor = Component.Builder((component): TextEditor => {
 	const toolbar = Component()
 		.style("text-editor-toolbar")
 		.ariaRole("toolbar")
-		.append(Component()
-			.ariaRole("group")
+		.append(ToolbarButtonGroup()
 			.ariaLabel("component/text-editor/toolbar/group/inline")
 			.append(ToolbarButtonMark("strong"))
 			.append(ToolbarButtonMark("em"))
@@ -237,8 +240,7 @@ const TextEditor = Component.Builder((component): TextEditor => {
 				.append(ToolbarButtonMark("superscript"))
 				.append(ToolbarButtonMark("code"))
 			)))
-		.append(Component()
-			.ariaRole("group")
+		.append(ToolbarButtonGroup()
 			.ariaLabel("component/text-editor/toolbar/group/block")
 			.append(ToolbarButtonWrap("blockquote"))
 			.append(ToolbarButtonBlockType("code-block")))

diff --git a/style/component/text-editor.chiri b/style/component/text-editor.chiri
@@ -16,22 +16,40 @@
 		outline-offset: 1px
 
 	&-toolbar:
+		%font-2
 		%block
 		%unmargin-0-3
 		%sticky
 		%border-bottom-1
 		%cursor-default
 		%z-index-fg
-		%backdrop-blur
 		%border-top-radius-1
 		%top-0
 		background: light-dark(#{alpha(0.05, $dark-0)}, #{alpha(0.2, $dark-0)})
 		$border-colour: light-dark(#{alpha(0.3, $dark-0)}, #{alpha(0.15, $light-0)})
 
+		#backdrop-blur-before:
+			%border-top-radius-1
+
 		#string size = "calc($space-2 + $space-1)
+		&-button-group:
+			@before:
+				%inline-block
+				%relative
+				%border-left-1
+				%border-colour-3
+				%margin-inline-1
+				%vertical-align-middle
+				%opacity-50
+				height: calc(1em + #{size} * 2)
+
+			:first:
+				@before:
+					content: none
+
 		&-button:
 			%relative
-			%font-1
+			%font-inherit
 			%border-box
 			%text-align-centre
 			%vertical-align-middle
@@ -48,6 +66,7 @@
 
 			::hover, ::focus, ::active:
 				$button-background: transparent
+				%z-index-fg
 
 			&--enabled:
 				@after:
@@ -63,17 +82,44 @@
 
 			&--has-popover:
 				%border-radius-0
+				%outline-none
+
 				::hover, ::focus:
 					%translate-y-0
 
+				@before:
+					%z-index-fg
+
+				@after:
+					%block
+					%absolute
+					%border-top-radius-1
+					%backdrop-filter-none
+					%translate-none
+					%uninset-1
+					%top-0
+					bottom: -1px
+					$border-colour: transparent
+					box-shadow:
+						#{box-shadow-inset-border-top-1},
+						#{box-shadow-inset-border-left-1},
+						#{box-shadow-inset-border-right-1}
+					#transition:
+						#{transition($$border-colour)},
+						#{transition("inset")},
+						#{transition("bottom")},
+						#{transition("backdrop-filter")}
+
 			&--has-popover-visible:
-				$button-background: $background-3
+				@after:
+					$border-colour: $block-border-colour
+					%untop-1
+					%backdrop-blur
+					$transition-duration: $transition-focus
 
 		&-strong:
 			#icon name="bold
-			%padding-left-3
 			%border-top-left-radius-1
-			$additional-left-padding: calc($space-3 - #{size})
 
 		&-em:
 			#icon name="italic
@@ -98,9 +144,16 @@
 			%padding-1
 			%flex-row
 			%border-radius-1
+			%border-top-radius-0
 			%gap-0
-			%margin-top-0
 			%unmargin-left-1
+			margin-top: 1px
+			$block-background: #{alpha(0.2, $background-1)}
+			border-top-colour: #{alpha(0.9, $background-1)}
+			box-shadow:
+				#{box-shadow-inset-border-bottom-1},
+				#{box-shadow-inset-border-left-1},
+				#{box-shadow-inset-border-right-1}
 
 	&-document:
 		%block

diff --git a/style/macro/block.chiri b/style/macro/block.chiri
@@ -6,11 +6,19 @@
 	#string colour ??= $colour-3
 	#string button-colour ??= $colour-0
 
-	colour: #{colour}
-	$button-colour: #{button-colour}
-	#string background-colour = "light-dark(#{background-light}, #{background-dark})
-	#string border-colour = "light-dark(#{border-light}, #{border-dark})
+	$block-background-light: #{background-light}
+	$block-background-dark: #{background-dark}
+	$block-border-light: #{border-light}
+	$block-border-dark: #{border-dark}
+	$block-colour: #{colour}
+	$block-button-colour: #{button-colour}
+
+	colour: $block-colour
+	$button-colour: $block-button-colour
+	#string background-colour = "light-dark($block-background-light, $block-background-dark)
+	#string border-colour = "light-dark($block-border-light, $block-border-dark)
 	$block-border-colour: #{border-colour}
 	$border-colour: $block-border-colour
 	#string background-highlight = "light-dark(color-mix(in lch, #{background-colour}, #fff 20%), color-mix(in lch, #{background-colour}, #fff2 50%))
-	background: radial-gradient(ellipse at left 20% top 20%, #{background-highlight}, #{background-colour})
+	$block-background: radial-gradient(ellipse at left 20% top 20%, #{background-highlight}, #{background-colour})
+	background: $block-background