Move delete/cancel button to the bottom
Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
parent
5551da2e2f
commit
a0582efc86
|
@ -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;
|
||||||
|
|
Loading…
Reference in New Issue