enh(core): replaced previous native a element with NcButton

Signed-off-by: Eduardo Morales <emoral435@gmail.com>
nextcloud · Jan 8, 2024 · a2c311f · a2c311f
1 parent adfe883
commit a2c311f
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 47 deletions.
diff --git a/core/src/components/Profile/PrimaryActionButton.vue b/core/src/components/Profile/PrimaryActionButton.vue
@@ -21,23 +21,38 @@
 -->
 
 <template>
-	<a class="profile__primary-action-button"
-		:class="{ 'disabled': disabled }"
+	<NcButton
+		:aria-label="t('core', 'Start your native mail application to send mail...')"
+		type="primary"
 		:href="href"
+		alignment="center"
 		:target="target"
-		rel="noopener noreferrer nofollow"
-		v-on="$listeners">
-		<img class="icon"
-			:class="[icon, { 'icon-invert': colorPrimaryText === '#ffffff' }]"
-			:src="icon">
+		:disabled="disabled">
+
+		<template #icon>
+			<img
+				aria-hidden="true" 
+				:src="icon" 
+				alt="" />
+		</template>
+
+		<!-- this is the default slot for the NcButton Component, which will be the text for the button -->
 		<slot />
-	</a>
+	</NcButton>
 </template>
 
 <script>
-export default {
+import { defineComponent } from 'vue'
+import { NcButton } from '@nextcloud/vue'
+import { translate as t} from '@nextcloud/l10n'
+
+export default defineComponent({
 	name: 'PrimaryActionButton',
 
+	components: {
+		NcButton,
+	},
+
 	props: {
 		disabled: {
 			type: Boolean,
@@ -58,46 +73,52 @@ export default {
 		},
 	},
 
-	computed: {
-		colorPrimaryText() {
-			// For some reason the returned string has prepended whitespace
-			return getComputedStyle(document.body).getPropertyValue('--color-primary-element-text').trim()
-		},
+	methods: {
+		t,
 	},
-}
+
+	// FIXME remove uneeded CSS once https://github.com/nextcloud/server/issues/42596 has been fixed
+	// computed: {
+	// 	colorPrimaryText() {
+	// 		// For some reason the returned string has prepended whitespace
+	// 		return getComputedStyle(document.body).getPropertyValue('--color-primary-element-text').trim()
+	// 	},
+	// },
+})
 </script>
 
 <style lang="scss" scoped>
-	.profile__primary-action-button {
-		font-size: var(--default-font-size);
-		font-weight: bold;
-		width: 188px;
-		height: 44px;
-		padding: 0 16px;
-		line-height: 44px;
-		text-align: center;
-		border-radius: var(--border-radius-pill);
-		color: var(--color-primary-element-text);
-		background-color: var(--color-primary-element);
-		overflow: hidden;
-		white-space: nowrap;
-		text-overflow: ellipsis;
+	// FIXME remove unneeded CSS once https://github.com/nextcloud/server/issues/42596 has been fixed
+	// .profile__primary-action-button {
+	// 	font-size: var(--default-font-size);
+	// 	font-weight: bold;
+	// 	width: 188px;
+	// 	height: 44px;
+	// 	padding: 0 16px;
+	// 	line-height: 44px;
+	// 	text-align: center;
+	// 	border-radius: var(--border-radius-pill);
+	// 	color: var(--color-primary-element-text);
+	// 	background-color: var(--color-primary-element);
+	// 	overflow: hidden;
+	// 	white-space: nowrap;
+	// 	text-overflow: ellipsis;
 
-		.icon {
-			display: inline-block;
-			vertical-align: middle;
-			margin-bottom: 2px;
-			margin-right: 4px;
+	// 	.icon {
+	// 		display: inline-block;
+	// 		vertical-align: middle;
+	// 		margin-bottom: 2px;
+	// 		margin-right: 4px;
 
-			&.icon-invert {
-				filter: invert(1);
-			}
-		}
+	// 		&.icon-invert {
+	// 			filter: invert(1);
+	// 		}
+	// 	}
 
-		&:hover,
-		&:focus,
-		&:active {
-			background-color: var(--color-primary-element-light);
-		}
-	}
+	// 	&:hover,
+	// 	&:focus,
+	// 	&:active {
+	// 		background-color: var(--color-primary-element-light);
+	// 	}
+	// }
 </style>