diff --git a/apps/workflowengine/src/components/Check.vue b/apps/workflowengine/src/components/Check.vue
index 10828c1dd8..a553e1cf2c 100644
--- a/apps/workflowengine/src/components/Check.vue
+++ b/apps/workflowengine/src/components/Check.vue
@@ -124,9 +124,8 @@ export default {
this.check.class = this.currentOption.class
this.check.operator = this.currentOperator.operator
- if (!this.validate()) {
- this.check.invalid = !this.valid
- }
+ this.check.invalid = !this.validate()
+
this.$emit('update', this.check)
}
}
diff --git a/apps/workflowengine/src/components/Operation.vue b/apps/workflowengine/src/components/Operation.vue
index ae0a67ae53..5f5fa2ef6d 100644
--- a/apps/workflowengine/src/components/Operation.vue
+++ b/apps/workflowengine/src/components/Operation.vue
@@ -4,6 +4,9 @@
{{ operation.name }}
{{ operation.description }}
+
@@ -28,84 +31,5 @@ export default {
diff --git a/apps/workflowengine/src/components/Rule.vue b/apps/workflowengine/src/components/Rule.vue
index 703b7832af..18db4eef69 100644
--- a/apps/workflowengine/src/components/Rule.vue
+++ b/apps/workflowengine/src/components/Rule.vue
@@ -91,9 +91,9 @@ export default {
}
}
if (!this.dirty || this.checking) {
- return { title: 'Active', class: 'icon icon-checkmark' }
+ return { title: t('workflowengine', 'Active'), class: 'icon icon-checkmark' }
}
- return { title: 'Save', class: 'icon-confirm-white primary' }
+ return { title: t('workflowengine', 'Save'), class: 'icon-confirm-white primary' }
},
lastCheckComplete() {
@@ -186,6 +186,9 @@ export default {
color: #fff;
border: none;
}
+ .status-button.icon-checkmark {
+ border: 1px solid var(--color-success);
+ }
.flow-icon {
width: 44px;
diff --git a/apps/workflowengine/src/components/Workflow.vue b/apps/workflowengine/src/components/Workflow.vue
index 452dbacc5f..5979dfd5ca 100644
--- a/apps/workflowengine/src/components/Workflow.vue
+++ b/apps/workflowengine/src/components/Workflow.vue
@@ -1,13 +1,21 @@
@@ -29,6 +41,7 @@
import Rule from './Rule'
import Operation from './Operation'
import { mapGetters, mapState } from 'vuex'
+import { loadState } from '@nextcloud/initial-state'
const ACTION_LIMIT = 3
@@ -40,7 +53,9 @@ export default {
},
data() {
return {
- showMoreOperations: false
+ showMoreOperations: false,
+ appstoreUrl: '/index.php/settings/apps/workflow',
+ scope: loadState('workflowengine', 'scope')
}
},
computed: {
@@ -77,6 +92,11 @@ export default {
}
.section {
max-width: 100vw;
+
+ h2.configured-flows {
+ margin-top: 30px;
+ margin-bottom: 0;
+ }
}
.actions {
display: flex;
@@ -126,4 +146,10 @@ export default {
padding-top: 0;
padding-bottom: 0;
}
+
+ @import "./../styles/operation";
+
+ .actions__item.more {
+ background-color: var(--color-background-dark);
+ }
diff --git a/apps/workflowengine/src/styles/operation.scss b/apps/workflowengine/src/styles/operation.scss
new file mode 100644
index 0000000000..ac3d304cd7
--- /dev/null
+++ b/apps/workflowengine/src/styles/operation.scss
@@ -0,0 +1,73 @@
+.actions__item {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+ flex-grow: 1;
+ margin-left: -1px;
+ padding: 10px;
+ border-radius: var(--border-radius-large);
+ margin-right: 20px;
+ margin-bottom: 20px;
+}
+.icon {
+ display: block;
+ width: 100%;
+ height: 50px;
+ background-size: 50px 50px;
+ background-position: center center;
+ margin-top: 10px;
+ margin-bottom: 20px;
+ background-repeat: no-repeat;
+}
+.actions__item__description {
+ text-align: center;
+}
+.actions__item_options {
+ width: 100%;
+ margin-top: 10px;
+ padding-left: 60px;
+}
+h3, small {
+ padding: 6px;
+ display: block;
+}
+h3 {
+ margin: 0;
+ padding: 0;
+ font-weight: 600;
+}
+small {
+ font-size: 10pt;
+}
+
+.colored:not(.more) {
+ background-color: var(--color-primary-element);
+ h3, small {
+ color: var(--color-primary-text)
+ }
+}
+
+.actions__item:not(.colored) {
+ flex-direction: row;
+
+ .actions__item__description {
+ padding-top: 5px;
+ text-align: left;
+ width: calc(100% - 105px);
+ small {
+ padding: 0;
+ }
+ }
+ .icon {
+ width: 50px;
+ margin: 0;
+ margin-right: 10px;
+ &:not(.icon-invert) {
+ filter: invert(1);
+ }
+ }
+}
+
+.colored .icon-invert {
+ filter: invert(1);
+}