add vue button component in workflow rule.vue

Signed-off-by: Vanessa Pertsch <vanessa.pertsch@nextcloud.com>

apps/workflowengine/src/components/Rule.vue

@@ -31,17 +31,19 @@
 					@input="updateOperation" />
 			</Operation>
 			<div class="buttons">
-				<button class="status-button icon"
-					:class="ruleStatus.class"
-					@click="saveRule">
-					{{ ruleStatus.title }}
-				</button>
-				<button v-if="rule.id < -1 || dirty" @click="cancelRule">
+				<Button v-if="rule.id < -1 || dirty" @click="cancelRule">
 					{{ t('workflowengine', 'Cancel') }}
-				</button>
-				<button v-else-if="!dirty" @click="deleteRule">
+				</Button>
+				<Button v-else-if="!dirty" @click="deleteRule">
 					{{ t('workflowengine', 'Delete') }}
-				</button>
+				</Button>
+				<Button :type="ruleStatus.type"
+					@click="saveRule">
+					<template #icon>
+						<component :is="ruleStatus.icon" :size="20" />
+					</template>
+					{{ ruleStatus.title }}
+				</Button>
 			</div>
 			<p v-if="error" class="error-message">
 				{{ error }}
@@ -54,6 +56,11 @@
 import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
 import Actions from '@nextcloud/vue/dist/Components/Actions'
 import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
+import Button from '@nextcloud/vue/dist/Components/Button'
+import ArrowRight from 'vue-material-design-icons/ArrowRight.vue'
+import CheckMark from 'vue-material-design-icons/Check.vue'
+import Close from 'vue-material-design-icons/Close.vue'
+
 import Event from './Event'
 import Check from './Check'
 import Operation from './Operation'
@@ -61,7 +68,7 @@ import Operation from './Operation'
 export default {
 	name: 'Rule',
 	components: {
-		Operation, Check, Event, Actions, ActionButton,
+		Operation, Check, Event, Actions, ActionButton, Button, ArrowRight, CheckMark, Close,
 	},
 	directives: {
 		Tooltip,
@@ -89,14 +96,15 @@ export default {
 			if (this.error || !this.rule.valid || this.rule.checks.length === 0 || this.rule.checks.some((check) => check.invalid === true)) {
 				return {
 					title: t('workflowengine', 'The configuration is invalid'),
-					class: 'icon-close-white invalid',
+					icon: 'Close',
+					type: 'warning',
 					tooltip: { placement: 'bottom', show: true, content: this.error },
 				}
 			}
 			if (!this.dirty) {
-				return { title: t('workflowengine', 'Active'), class: 'icon icon-checkmark' }
+				return { title: t('workflowengine', 'Active'), icon: 'CheckMark', type: 'success' }
 			}
-			return { title: t('workflowengine', 'Save'), class: 'icon-confirm-white primary' }
+			return { title: t('workflowengine', 'Save'), icon: 'ArrowRight', type: 'primary' }
 
 		},
 		lastCheckComplete() {
@@ -170,18 +178,16 @@ export default {
 </script>
 
 <style scoped lang="scss">
-	button.icon {
-		padding-left: 32px;
-		background-position: 10px center;
-	}
 
 	.buttons {
-		display: block;
-		overflow: hidden;
+		display: flex;
+		justify-content: end;
 
 		button {
-			float: right;
-			height: 34px;
+			margin-left: 5px;
+		}
+		button:last-child{
+			margin-right: 10px;
 		}
 	}
 
@@ -190,27 +196,6 @@ export default {
 		margin-right: 10px;
 	}
 
-	.status-button {
-		transition: 0.5s ease all;
-		display: block;
-		margin: 3px 10px 3px auto;
-	}
-	.status-button.primary {
-		padding-left: 32px;
-		background-position: 10px center;
-	}
-	.status-button:not(.primary) {
-		background-color: var(--color-main-background);
-	}
-	.status-button.invalid {
-		background-color: var(--color-warning);
-		color: #fff;
-		border: none;
-	}
-	.status-button.icon-checkmark {
-		border: 1px solid var(--color-success);
-	}
-
 	.flow-icon {
 		width: 44px;
 	}