Workers: Style action bar

This commit is contained in:
Pablo Vazquez 2022-07-07 11:57:36 +02:00
parent 39722bdd61
commit 58d9ab9fb5
3 changed files with 40 additions and 9 deletions

@ -257,6 +257,27 @@ dl dd:empty {
.btn-bar-group {
align-items: center;
display: flex;
padding: var(--spacer-sm) 0;
}
.btn-bar-group .btn-bar {
padding: 0;
}
.btn-bar-group select+.btn,
.btn-bar-group .btn+select {
margin-left: var(--spacer-sm)
}
select {
background-color: var(--color-button-background);
border-radius: var(--border-radius);
/* border: none; */
border: calc(var(--border-width) / 2) solid var(--color-button-background);
display: inline-flex;
font-size: var(--font-size-sm);
justify-content: center;
padding: var(--spacer-xs) var(--spacer-sm);
}
.btn {

@ -1,7 +1,10 @@
<template>
<select v-model="selectedAction">
<option value="" selected><template v-if="!hasActiveWorker">Select a Worker</template><template v-else>Choose an Action</template></option>
<option v-for="(action, key) in WORKER_ACTIONS" :value="key">{{ action.label }}</option>
<option value="" selected>
<template v-if="!hasActiveWorker">Select a Worker</template>
<template v-else>Choose an action...</template>
</option>
<option v-for="(action, key) in WORKER_ACTIONS" :value="key">{{ action.label }}</option>
</select>
<button
:disabled="!canPerformAction"

@ -1,12 +1,19 @@
<template>
<h2 class="column-title">Workers</h2>
<worker-actions-bar />
<status-filter-bar
:availableStatuses="availableStatuses"
:activeStatuses="shownStatuses"
classPrefix="worker-"
@click="toggleStatusFilter"
/>
<div class="btn-bar-group">
<worker-actions-bar />
<div class="align-right">
<status-filter-bar
:availableStatuses="availableStatuses"
:activeStatuses="shownStatuses"
classPrefix="worker-"
@click="toggleStatusFilter"
/>
</div>
</div>
<div>
<div class="workers-list with-clickable-row" id="flamenco_workers_list"></div>
</div>