Job Details: Style UI for setting job priority

web/app/src/assets/base.css

@@ -48,6 +48,11 @@
   --transition-speed: 240ms;
   --transition-speed-fast: 60ms;
 
+  --box-shadow-float: 2px 2px 5px rgba(0,0,0,.5), 0 5px 25px rgba(0,0,0,.5);
+
+  /* Popovers. */
+  --color-background-popover: var(--color-background-column-highlight);
+
   --color-danger: hsl(352 100% 56%);
   --color-success: hsl(102 70% 56%);
 
@@ -348,7 +353,8 @@ fieldset {
   border-radius: var(--border-radius);
 }
 
-input[type="text"] {
+input[type="text"],
+input[type="number"] {
   appearance: none;
   background-color: var(--color-background);
   border-radius: var(--border-radius);
@@ -361,11 +367,13 @@ input[type="text"] {
   width: 100%;
 }
 
-input[type="text"]:focus {
+input[type="text"]:focus,
+input[type="number"]:focus {
   border-color: var(--color-accent);
 }
 
-input[type="text"].is-invalid {
+input[type="text"].is-invalid,
+input[type="number"].is-invalid {
   border-color: var(--color-danger);
 }
 

web/app/src/components/PopoverEditableJobPriority.vue

@@ -1,22 +1,108 @@
 <template>
-  <div>
-    <span @click="togglePopover">{{ priority }}</span>
-    <div v-show="showPopover">
-      <input type="number" v-model="priorityState">
-      <button @click="updateJobPriority">Update</button>
-      <button @click="togglePopover">Cancel</button>
-      <span v-if="errorMessage">{{ errorMessage }}</span>
+  <div class="popover-container">
+    <span
+      @click="togglePopover"
+      class="popover-toggle"
+      title="Set priority for this job">
+      {{ priority }}
+    </span>
+    <div v-show="showPopover" class="popover">
+    <!-- <div class="popover"> -->
+      <div class="popover-header">
+        <span>Job Priority</span>
+        <button @click="togglePopover">&#10006;</button>
+      </div>
+      <div class="popover-form">
+        <input type="number" v-model="priorityState">
+        <button @click="updateJobPriority" class="btn-primary">Set</button>
+      </div>
+      <div class="input-help-text">
+        Range 1-100.
+      </div>
+      <div class="popover-error" v-if="errorMessage">
+      <!-- <div class="popover-error"> -->
+        <span>{{ errorMessage }}</span>
+      </div>
     </div>
   </div>
 </template>
 
+<style scoped>
+.popover-toggle {
+  cursor: pointer;
+  display: block;
+}
+
+.popover-toggle:hover {
+  color: var(--color-accent);
+}
+
+.popover-container {
+  position: relative;
+}
+
+.popover {
+  background-color: var(--color-background-popover);
+  border-radius: var(--border-radius);
+  bottom: 25px;
+  box-shadow: var(--box-shadow-float);
+  display: flex;
+  flex-direction: column;
+  left: -5rem;
+  max-width: 20rem;
+  min-width: 10rem;
+  padding: var(--spacer-sm) var(--spacer);
+  position: absolute;
+  z-index: 1;
+}
+
+.popover-header {
+  align-items: baseline;
+  display: flex;
+  font-weight: bold;
+  justify-content: space-between;
+}
+
+/* Close/cancel popover button. */
+.popover-header button {
+  background-color: transparent;
+  border: none;
+  margin-left: var(--spacer-lg);
+  margin-right: -5px;
+}
+
+.popover-form {
+  display: flex;
+  margin: var(--spacer-sm) 0;
+}
+
+/* Number input field. */
+.popover-form input {
+  margin-right: var(--spacer-sm);
+  width: 10ch;
+  padding: 0 var(--spacer-sm);
+}
+
+/* Save/Set button. */
+.popover-form button {
+  flex: 1
+}
+
+.input-help-text {
+  margin-left: 0;
+}
+
+.popover-error {
+  color: var(--color-danger);
+}
+</style>
+
 <script setup>
 import { ref } from 'vue';
 
 import { useNotifs } from '@/stores/notifications';
 import { apiClient } from '@/stores/api-query-count';
 import { JobsApi, JobPriorityChange } from '@/manager-api';
-import postcss from 'postcss';
 
 const props = defineProps({
   jobId: String,