Job Details: Style UI for setting job priority
This commit is contained in:
parent
4389b60197
commit
080a63df6a
@ -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);
|
||||
}
|
||||
|
||||
|
@ -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">✖</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,
|
||||
|
Loading…
Reference in New Issue
Block a user