Move delete/cancel button to the bottom

Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
Julius Härtl 2019-10-23 18:07:18 +02:00 committed by Arthur Schiwon
parent 5551da2e2f
commit a0582efc86
No known key found for this signature in database
GPG Key ID: 7424F1874854DF23
1 changed files with 23 additions and 24 deletions

View File

@ -23,28 +23,26 @@
</div> </div>
<div class="flow-icon icon-confirm" /> <div class="flow-icon icon-confirm" />
<div class="action"> <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"> <Operation :operation="operation" :colored="false">
<component :is="operation.options" <component :is="operation.options"
v-if="operation.options" v-if="operation.options"
v-model="rule.operation" v-model="rule.operation"
@input="updateOperation" /> @input="updateOperation" />
</Operation> </Operation>
<div class="buttons">
<button v-tooltip="ruleStatus.tooltip" <button v-tooltip="ruleStatus.tooltip"
class="status-button icon" class="status-button icon"
:class="ruleStatus.class" :class="ruleStatus.class"
@click="saveRule"> @click="saveRule">
{{ ruleStatus.title }} {{ ruleStatus.title }}
</button> </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>
</div> </div>
</template> </template>
@ -163,11 +161,18 @@ export default {
background-position: 10px center; background-position: 10px center;
} }
.buttons {
display: block;
button {
float: right;
height: 34px;
}
}
.status-button { .status-button {
transition: 0.5s ease all; transition: 0.5s ease all;
display: block; display: block;
margin: auto; margin: 3px 10px 3px auto;
margin-right: 0;
} }
.status-button.primary { .status-button.primary {
padding-left: 32px; padding-left: 32px;
@ -199,12 +204,6 @@ export default {
.action { .action {
max-width: 400px; max-width: 400px;
position: relative; position: relative;
.buttons {
position: absolute;
right: 0;
display: flex;
z-index: 1;
}
} }
.icon-confirm { .icon-confirm {
background-position: right 27px; background-position: right 27px;