diff options
-rw-r--r-- | apps/workflowengine/src/components/Operation.vue | 20 | ||||
-rw-r--r-- | apps/workflowengine/src/components/Rule.vue | 4 |
2 files changed, 20 insertions, 4 deletions
diff --git a/apps/workflowengine/src/components/Operation.vue b/apps/workflowengine/src/components/Operation.vue index 346b28e6b9d..45b0f24223d 100644 --- a/apps/workflowengine/src/components/Operation.vue +++ b/apps/workflowengine/src/components/Operation.vue @@ -1,8 +1,10 @@ <template> <div class="actions__item" :class="{'colored': colored}" :style="{ backgroundColor: colored ? operation.color : 'transparent' }"> <div class="icon" :class="operation.iconClass" :style="{ backgroundImage: operation.iconClass ? '' : `url(${operation.icon})` }" /> + <div class="actions__item__description"> <h3>{{ operation.name }}</h3> <small>{{ operation.description }}</small> + </div> <slot /> </div> </template> @@ -32,7 +34,7 @@ export default { padding: 10px; border-radius: var(--border-radius-large); margin-right: 20px; - margin-bottom: 20px; + margin-bottom: 5px; } .icon { display: block; @@ -44,9 +46,11 @@ export default { margin-bottom: 20px; background-repeat: no-repeat; } + .actions__item__description { + text-align: center; + } h3, small { padding: 6px; - text-align: center; display: block; } h3 { @@ -66,7 +70,19 @@ export default { } .actions__item:not(.colored) { + flex-direction: row; + + .actions__item__description { + padding-top: 5px; + text-align: left; + small { + padding: 0; + } + } .icon { + width: 50px; + margin: 0; + margin-right: 10px; filter: invert(1); } } diff --git a/apps/workflowengine/src/components/Rule.vue b/apps/workflowengine/src/components/Rule.vue index 88129525eb3..d3cf7291af4 100644 --- a/apps/workflowengine/src/components/Rule.vue +++ b/apps/workflowengine/src/components/Rule.vue @@ -155,6 +155,7 @@ export default { transition: 0.5s ease all; display: block; margin: auto; + margin-right: 0; } .status-button.primary { padding-left: 32px; @@ -194,7 +195,7 @@ export default { } } .icon-confirm { - background-position: right center; + background-position: right 27px; padding-right: 20px; margin-right: 20px; } @@ -202,7 +203,6 @@ export default { .trigger p, .action p { display: flex; align-items: center; - margin-bottom: 5px; & > span { min-width: 50px; |