diff options
author | Carl Schwan <carl@carlschwan.eu> | 2022-05-12 20:01:26 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-05-12 20:01:26 +0300 |
commit | 9e1d4d17ec792d8abcec2f9262472f5bb7a43acf (patch) | |
tree | b07c45f0e6702b29719a9b22c2207b0089f2d468 /apps | |
parent | bcb849475db2fbd641cf66b7d300c72f106ee99c (diff) | |
parent | dd8fc35396462d1b83582b4d7e9bd2a58d07556b (diff) |
Merge pull request #32362 from nextcloud/fix-buttons-workflow
Fix buttons in workflow
Diffstat (limited to 'apps')
-rw-r--r-- | apps/workflowengine/src/components/Operation.vue | 13 | ||||
-rw-r--r-- | apps/workflowengine/src/components/Rule.vue | 69 | ||||
-rw-r--r-- | apps/workflowengine/src/styles/operation.scss | 1 |
3 files changed, 36 insertions, 47 deletions
diff --git a/apps/workflowengine/src/components/Operation.vue b/apps/workflowengine/src/components/Operation.vue index 47a40eca950..a148ef3097b 100644 --- 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/components/Rule.vue b/apps/workflowengine/src/components/Rule.vue index 6240b304968..3ee01680819 100644 --- a/apps/workflowengine/src/components/Rule.vue +++ b/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; } diff --git a/apps/workflowengine/src/styles/operation.scss b/apps/workflowengine/src/styles/operation.scss index 89c105d58fe..d936c64e2de 100644 --- 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%; |