Simplify icon code, fix ephemeral close button having background

fluff4me · Jan 9, 2025 · a897a03 · a897a03
1 parent 456271c
commit a897a03
Show file tree

Hide file tree

Showing 9 changed files with 38 additions and 41 deletions.
diff --git a/src/ui/component/Masthead.ts b/src/ui/component/Masthead.ts
@@ -34,10 +34,12 @@ const Masthead = Component.Builder('header', (masthead, view: ViewContainer) =>
 	const left = Component()
 		.append(Component()
 			.and(Button)
+			.setIcon('bars')
 			.style('masthead-left-hamburger', 'masthead-left-hamburger-sidebar')
 			.ariaHidden()
 			.event.subscribe('click', sidebar.toggle))
 		.append(Button()
+			.setIcon('bars')
 			.style('masthead-left-hamburger', 'masthead-left-hamburger-popover')
 			.ariaLabel.use('masthead/primary-nav/alt')
 			.clearPopover()
@@ -81,11 +83,11 @@ const Masthead = Component.Builder('header', (masthead, view: ViewContainer) =>
 	Component()
 		.style('masthead-user')
 		.append(Button()
-			.style('masthead-user-notifications')
+			.setIcon('bell')
 			.clearPopover()
 			.ariaLabel.use('masthead/user/notifications/alt'))
 		.append(Button()
-			.style('masthead-user-profile')
+			.setIcon('circle-user')
 			.clearPopover()
 			.ariaLabel.use('masthead/user/profile/alt')
 			.setPopover('hover', popover => popover

diff --git a/src/ui/component/core/Button.ts b/src/ui/component/core/Button.ts
@@ -80,6 +80,9 @@ const Button = Component.Builder('button', (button): Button => {
 				icon = newIcon
 				if (icon)
 					button.style(`button-icon-${icon}`)
+						.type('icon')
+				else
+					button.type.remove('icon')
 
 				return button
 			},

diff --git a/src/ui/component/core/Paginator.ts b/src/ui/component/core/Paginator.ts
@@ -61,22 +61,26 @@ const Paginator = Component.Builder((component): Paginator => {
 	block.footer.right.style('paginator-footer-right')
 
 	const buttonFirst = Button()
-		.style('paginator-button', 'paginator-button-first')
+		.setIcon('angles-left')
+		.style('paginator-button')
 		.event.subscribe('click', () => showPage(0))
 		.appendTo(block.footer.left)
 
 	const buttonPrev = Button()
-		.style('paginator-button', 'paginator-button-prev')
+		.setIcon('angle-left')
+		.style('paginator-button')
 		.event.subscribe('click', () => showPage(Math.max(cursor.value - 1, 0)))
 		.appendTo(block.footer.left)
 
 	const buttonNext = Button()
-		.style('paginator-button', 'paginator-button-next')
+		.setIcon('angle-right')
+		.style('paginator-button')
 		.event.subscribe('click', () => showPage(Math.min(cursor.value + 1, using?.pageCount === true ? Infinity : pages.length - 1)))
 		.appendTo(block.footer.right)
 
 	const buttonLast = Button()
-		.style('paginator-button', 'paginator-button-last')
+		.setIcon('angles-right')
+		.style('paginator-button')
 		.event.subscribe('click', () => showPage(pages.length - 1))
 		.appendTo(block.footer.right)
 

diff --git a/src/ui/view/shared/component/ViewContainer.ts b/src/ui/view/shared/component/ViewContainer.ts
@@ -119,6 +119,7 @@ const ViewContainer = (): ViewContainer => {
 				.setOwner(container)
 				.setNotModal()
 				.append(Button()
+					.setIcon('xmark')
 					.style('view-container-ephemeral-close')
 					.event.subscribe('click', () => {
 						if (cancelLogin)

diff --git a/style/component/core/button.chiri b/style/component/core/button.chiri
@@ -26,6 +26,13 @@ $$button-background-highlight!colour
 		#{transition("box-shadow")}
 	#transition: $button-transition
 
+	&-type-icon:
+		#after: .button
+		%background-none
+		%box-shadow-none
+		::hover, ::focus:
+			%box-shadow-none
+
 	&-type-flush:
 		:not ::hover ::focus ::active:
 			#after: .button
@@ -75,10 +82,19 @@ $$button-background-highlight!colour
 			%translate-y-0
 			%box-shadow-none
 
-	&-icon-plus:
-		#after: .button
-		#icon name="plus
+	#list!string icons = [
+		"plus
+		"ellipsis-vertical
+		"xmark
+		"bars
+		"circle-user
+		"bell
+		"angles-left
+		"angles-right
+		"angle-left
+		"angle-right
 
-	&-icon-ellipsis-vertical:
-		#after: .button
-		#icon name="ellipsis-vertical
+	#each in icons as var icon:
+		&-icon-#{icon}:
+			#after: .button
+			#icon name="#{icon}
diff --git a/style/component/core/paginator.chiri b/style/component/core/paginator.chiri
@@ -77,19 +77,6 @@
 	&-button--hidden:
 		%hidden
 
-	&-button-first:
-		#after: .button
-		#icon name="angles-left
-	&-button-prev:
-		#after: .button
-		#icon name="angle-left
-	&-button-next:
-		#after: .button
-		#icon name="angle-right
-	&-button-last:
-		#after: .button
-		#icon name="angles-right
-
 	&-content:
 		%unmargin-4
 		%padding-top-4

diff --git a/style/component/masthead.chiri b/style/component/masthead.chiri
@@ -33,9 +33,6 @@
 		grid-area: left
 
 		&-hamburger:
-			#after: .button
-			#icon name="bars
-
 			&-sidebar:
 				#tablet:
 					%hidden
@@ -77,11 +74,3 @@
 		%margin-right-2
 		%justify-content-end
 		grid-area: right
-
-		&-notifications:
-			#after: .button
-			#icon name="bell
-
-		&-profile:
-			#after: .button
-			#icon name="circle-user
diff --git a/style/var/font/font-awesome.chiri b/style/var/font/font-awesome.chiri
@@ -2502,15 +2502,11 @@
 	#return icons[name]
 
 #macro icon-container:
-	%background-none
-	%box-shadow-none
 	%padding-2-3
 	%font-4
 	%font-font-awesome
 	%content-box
 	%size-em
-	::hover, ::focus:
-		%box-shadow-none
 
 #macro icon:
 	#string name

diff --git a/style/view/view.chiri b/style/view/view.chiri
@@ -28,7 +28,6 @@
 				%absolute
 				%right-0
 				%top-0
-				#icon name="xmark
 
 			@view-transition!old:
 				#animate .3s ease-out both: