Models dialogs: use choice input instead icons

Fixes #6044
getkirby · Jul 22, 2024 · 8accf93 · 8accf93
1 parent 5228fa5
commit 8accf93
Showing 1 changed file with 16 additions and 11 deletions.
diff --git a/panel/src/components/Dialogs/ModelsDialog.vue b/panel/src/components/Dialogs/ModelsDialog.vue
@@ -28,17 +28,10 @@
 			@paginate="paginate"
 		>
 			<template #options="{ item: row }">
-				<k-button
-					v-if="isSelected(row)"
-					:icon="multiple && max !== 1 ? 'check' : 'circle-nested'"
-					:title="$t('remove')"
-					theme="info"
-					@click.stop="toggle(row)"
-				/>
-				<k-button
-					v-else
-					:title="$t('select')"
-					icon="circle-outline"
+				<k-choice-input
+					:checked="isSelected(row)"
+					:type="multiple && max !== 1 ? 'checkbox' : 'radio'"
+					:title="isSelected(row) ? $t('remove') : $t('select')"
 					@click.stop="toggle(row)"
 				/>
 				<slot name="options" v-bind="{ item: row }" />
@@ -166,6 +159,18 @@ export default {
 .k-models-dialog .k-list-item {
 	cursor: pointer;
 }
+.k-models-dialog .k-choice-input {
+	--choice-color-checked: var(--color-focus);
+
+	display: flex;
+	align-items: center;
+	height: var(--item-button-height);
+	margin-inline-end: var(--spacing-3);
+}
+.k-models-dialog .k-choice-input input {
+	top: 0;
+}
+
 .k-models-dialog .k-collection-footer .k-pagination {
 	margin-bottom: 0;
 }