From 58d9ab9fb58adec52d689e31bfe58bcb6ce5dbcf Mon Sep 17 00:00:00 2001
From: Pablo Vazquez <pablo@blender.org>
Date: Thu, 7 Jul 2022 11:57:36 +0200
Subject: [PATCH] Workers: Style action bar

---
 web/app/src/assets/base.css                   | 21 +++++++++++++++++++
 .../components/workers/WorkerActionsBar.vue   |  7 +++++--
 .../src/components/workers/WorkersTable.vue   | 21 ++++++++++++-------
 3 files changed, 40 insertions(+), 9 deletions(-)

diff --git a/web/app/src/assets/base.css b/web/app/src/assets/base.css
index 8b20e6c7..c998faa3 100644
--- a/web/app/src/assets/base.css
+++ b/web/app/src/assets/base.css
@@ -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 {
diff --git a/web/app/src/components/workers/WorkerActionsBar.vue b/web/app/src/components/workers/WorkerActionsBar.vue
index af37d913..334384f6 100644
--- a/web/app/src/components/workers/WorkerActionsBar.vue
+++ b/web/app/src/components/workers/WorkerActionsBar.vue
@@ -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"
diff --git a/web/app/src/components/workers/WorkersTable.vue b/web/app/src/components/workers/WorkersTable.vue
index efc1d8cf..adc71af0 100644
--- a/web/app/src/components/workers/WorkersTable.vue
+++ b/web/app/src/components/workers/WorkersTable.vue
@@ -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>