Web: style action buttons and move the delete button to the last place

This commit is contained in:
Sybren A. Stüvel 2022-04-21 17:28:33 +02:00
parent eeb8305de0
commit bb1acef054
2 changed files with 6 additions and 2 deletions

View File

@ -234,6 +234,7 @@ section.action-bar {
height: var(--action-bar-height); height: var(--action-bar-height);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center;
} }
section.action-bar button.action { section.action-bar button.action {
@ -244,6 +245,7 @@ section.action-bar button.action {
background: #6E6D70; background: #6E6D70;
color: #DFDEDF; color: #DFDEDF;
touch-action: manipulation; touch-action: manipulation;
margin-right: 0.3rem;
transition-duration: 150ms; transition-duration: 150ms;
transition-property: color, background-color, border-color, box-shadow transition-property: color, background-color, border-color, box-shadow
@ -261,7 +263,9 @@ section.action-bar button.action:focus {
} }
section.action-bar button.action.dangerous { section.action-bar button.action.dangerous {
background-color: darkred; background-color: #7c4d41;
color: #e4c5c0;
margin-left: 1rem;
} }
section.action-bar button.action.dangerous[disabled] { section.action-bar button.action.dangerous[disabled] {

View File

@ -1,8 +1,8 @@
<template> <template>
<section class="action-bar jobs"> <section class="action-bar jobs">
<button class="action delete dangerous" :disabled="!jobs.canDelete" v-on:click="onButtonDelete">Delete</button>
<button class="action cancel" :disabled="!jobs.canCancel" v-on:click="onButtonCancel">Cancel</button> <button class="action cancel" :disabled="!jobs.canCancel" v-on:click="onButtonCancel">Cancel</button>
<button class="action requeue" :disabled="!jobs.canRequeue" v-on:click="onButtonRequeue">Requeue</button> <button class="action requeue" :disabled="!jobs.canRequeue" v-on:click="onButtonRequeue">Requeue</button>
<button class="action delete dangerous" :disabled="!jobs.canDelete" v-on:click="onButtonDelete">Delete</button>
</section> </section>
</template> </template>