add vue button component in workflow operation.vue

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

diff --git a/apps/workflowengine/src/components/Operation.vue b/apps/workflowengine/src/components/Operation.vue
index 47a40eca950e8e87ce134e956fea3865032590de..a148ef3097b8785e7b19d05437ce54bef6442ab4 100644 (file)
--- a/apps/workflowengine/src/components/Operation.vue
+++ b/apps/workflowengine/src/components/Operation.vue
@@ -4,11 +4,9 @@
                <div class="actions__item__description">
                        <h3>{{ operation.name }}</h3>
                        <small>{{ operation.description }}</small>
-                       <div>
-                               <button v-if="colored">
-                                       {{ t('workflowengine', 'Add new flow') }}
-                               </button>
-                       </div>
+                       <Button v-if="colored">
+                               {{ t('workflowengine', 'Add new flow') }}
+                       </Button>
                </div>
                <div class="actions__item_options">
                        <slot />
@@ -17,8 +15,13 @@
 </template>
 
 <script>
+import Button from '@nextcloud/vue/dist/Components/Button'
+
 export default {
        name: 'Operation',
+       components: {
+               Button,
+       },
        props: {
                operation: {
                        type: Object,

diff --git a/apps/workflowengine/src/styles/operation.scss b/apps/workflowengine/src/styles/operation.scss
index 89c105d58fe4647e0967d7e7f9ecd9d24fdc45fc..d936c64e2de908fbeab888d59344626db337d5f3 100644 (file)
--- a/apps/workflowengine/src/styles/operation.scss
+++ b/apps/workflowengine/src/styles/operation.scss
@@ -24,6 +24,7 @@
        flex-grow: 1;
        display: flex;
        flex-direction: column;
+       align-items: center;
 }
 .actions__item_options {
        width: 100%;