Workers: Style action bar
This commit is contained in:
parent
39722bdd61
commit
58d9ab9fb5
@ -257,6 +257,27 @@ dl dd:empty {
|
|||||||
.btn-bar-group {
|
.btn-bar-group {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
display: flex;
|
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 {
|
.btn {
|
||||||
|
@ -1,6 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<select v-model="selectedAction">
|
<select v-model="selectedAction">
|
||||||
<option value="" selected><template v-if="!hasActiveWorker">Select a Worker</template><template v-else>Choose an Action</template></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>
|
<option v-for="(action, key) in WORKER_ACTIONS" :value="key">{{ action.label }}</option>
|
||||||
</select>
|
</select>
|
||||||
<button
|
<button
|
||||||
|
@ -1,12 +1,19 @@
|
|||||||
<template>
|
<template>
|
||||||
<h2 class="column-title">Workers</h2>
|
<h2 class="column-title">Workers</h2>
|
||||||
|
|
||||||
|
<div class="btn-bar-group">
|
||||||
<worker-actions-bar />
|
<worker-actions-bar />
|
||||||
|
|
||||||
|
<div class="align-right">
|
||||||
<status-filter-bar
|
<status-filter-bar
|
||||||
:availableStatuses="availableStatuses"
|
:availableStatuses="availableStatuses"
|
||||||
:activeStatuses="shownStatuses"
|
:activeStatuses="shownStatuses"
|
||||||
classPrefix="worker-"
|
classPrefix="worker-"
|
||||||
@click="toggleStatusFilter"
|
@click="toggleStatusFilter"
|
||||||
/>
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<div class="workers-list with-clickable-row" id="flamenco_workers_list"></div>
|
<div class="workers-list with-clickable-row" id="flamenco_workers_list"></div>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user