fixup! Use trailing icon for pressed state

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
nextcloud-libraries · Nov 2, 2023 · c0b04f1 · c0b04f1
1 parent 165528d
commit c0b04f1
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 11 deletions.
diff --git a/src/assets/action.scss b/src/assets/action.scss
@@ -76,16 +76,6 @@
 			white-space: nowrap;
 		}
 
-		// Handle active state
-		&--active {
-			background-color: var(--color-primary-element-light);
-			color: var(--color-primary-element-light-text);
-			border-radius: 6px;
-		}
-		.active &--active {
-			background-color: var(--color-primary-element-light-hover);
-		}
-
 		&__icon {
 			width: $clickable-area;
 			height: $clickable-area;

diff --git a/src/components/NcActionButton/NcActionButton.vue b/src/components/NcActionButton/NcActionButton.vue
@@ -253,7 +253,9 @@ export default {
 			<span v-else class="action-button__text">{{ text }}</span>
 
 			<!-- right arrow icon when there is a sub-menu -->
-			<ChevronRightIcon v-if="isMenu" class="action-button__menu-icon" />
+			<ChevronRightIcon v-if="isMenu" :size="20" class="action-button__menu-icon" />
+			<CheckIcon v-else-if="pressed" :size="20" class="action-button__menu-icon" />
+			<span v-else class="action-button__menu-icon material-design-icon" />
 
 			<!-- fake slot to gather inner text -->
 			<slot v-if="false" />
@@ -262,6 +264,7 @@ export default {
 </template>
 
 <script>
+import CheckIcon from 'vue-material-design-icons/Check.vue'
 import ChevronRightIcon from 'vue-material-design-icons/ChevronRight.vue'
 import ActionTextMixin from '../../mixins/actionText.js'
 
@@ -272,6 +275,7 @@ export default {
 	name: 'NcActionButton',
 
 	components: {
+		CheckIcon,
 		ChevronRightIcon,
 	},
 	mixins: [ActionTextMixin],