Move delete/cancel button to the bottom

Signed-off-by: Julius Härtl <jus@bitgrid.net>

1 files changed, 23 insertions, 24 deletions

diff --git a/apps/workflowengine/src/components/Rule.vue b/apps/workflowengine/src/components/Rule.vue
index fb04112b178..a598e3dcfef 100644
--- a/apps/workflowengine/src/components/Rule.vue
+++ b/apps/workflowengine/src/components/Rule.vue
@@ -23,28 +23,26 @@
 		</div>
 		<div class="flow-icon icon-confirm" />
 		<div class="action">
-			<div class="buttons">
-				<Actions>
-					<ActionButton v-if="rule.id < -1" icon="icon-close" @click="cancelRule">
-						{{ t('workflowengine', 'Cancel rule creation') }}
-					</ActionButton>
-					<ActionButton v-else icon="icon-close" @click="deleteRule">
-						{{ t('workflowengine', 'Remove rule') }}
-					</ActionButton>
-				</Actions>
-			</div>
 			<Operation :operation="operation" :colored="false">
 				<component :is="operation.options"
 					v-if="operation.options"
 					v-model="rule.operation"
 					@input="updateOperation" />
 			</Operation>
-			<button v-tooltip="ruleStatus.tooltip"
-				class="status-button icon"
-				:class="ruleStatus.class"
-				@click="saveRule">
-				{{ ruleStatus.title }}
-			</button>
+			<div class="buttons">
+				<button v-tooltip="ruleStatus.tooltip"
+					class="status-button icon"
+					:class="ruleStatus.class"
+					@click="saveRule">
+					{{ ruleStatus.title }}
+				</button>
+				<button v-if="rule.id < -1" @click="cancelRule">
+					{{ t('workflowengine', 'Cancel') }}
+				</button>
+				<button v-else @click="deleteRule">
+					{{ t('workflowengine', 'Delete') }}
+				</button>
+			</div>
 		</div>
 	</div>
 </template>
@@ -163,11 +161,18 @@ export default {
 		background-position: 10px center;
 	}
 
+	.buttons {
+		display: block;
+		button {
+			float: right;
+			height: 34px;
+		}
+	}
+
 	.status-button {
 		transition: 0.5s ease all;
 		display: block;
-		margin: auto;
-		margin-right: 0;
+		margin: 3px 10px 3px auto;
 	}
 	.status-button.primary {
 		padding-left: 32px;
@@ -199,12 +204,6 @@ export default {
 		.action {
 			max-width: 400px;
 			position: relative;
-			.buttons {
-				position: absolute;
-				right: 0;
-				display: flex;
-				z-index: 1;
-			}
 		}
 		.icon-confirm {
 			background-position: right 27px;