mirror of
https://github.com/louislam/uptime-kuma.git
synced 2024-10-30 03:00:40 +00:00
improve multiselect
This commit is contained in:
parent
7b1000d995
commit
3265c3cbc3
5 changed files with 41 additions and 8 deletions
|
@ -1,4 +1,5 @@
|
||||||
console.log("Welcome to Uptime Kuma")
|
console.log("Welcome to Uptime Kuma");
|
||||||
|
console.log("Node Env: " + process.env.NODE_ENV);
|
||||||
|
|
||||||
const { sleep, debug } = require("../src/util");
|
const { sleep, debug } = require("../src/util");
|
||||||
|
|
||||||
|
|
|
@ -5,6 +5,15 @@
|
||||||
font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,segoe ui,Roboto,helvetica neue,Arial,noto sans,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol,noto color emoji;
|
font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,segoe ui,Roboto,helvetica neue,Arial,noto sans,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol,noto color emoji;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: #CCC;
|
||||||
|
border-radius: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
.modal {
|
.modal {
|
||||||
backdrop-filter: blur(3px);
|
backdrop-filter: blur(3px);
|
||||||
}
|
}
|
||||||
|
@ -26,7 +35,7 @@
|
||||||
|
|
||||||
|
|
||||||
.shadow-box {
|
.shadow-box {
|
||||||
overflow: hidden;
|
//overflow: hidden; // Forget why add this, but multiple select hide by this
|
||||||
box-shadow: 0 15px 70px rgba(0, 0, 0, .1);
|
box-shadow: 0 15px 70px rgba(0, 0, 0, .1);
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
|
@ -62,6 +71,10 @@
|
||||||
background-color: #090C10;
|
background-color: #090C10;
|
||||||
color: $dark-font-color;
|
color: $dark-font-color;
|
||||||
|
|
||||||
|
&::-webkit-scrollbar-thumb {
|
||||||
|
background: $dark-border-color;
|
||||||
|
}
|
||||||
|
|
||||||
.shadow-box {
|
.shadow-box {
|
||||||
background-color: $dark-bg;
|
background-color: $dark-bg;
|
||||||
}
|
}
|
||||||
|
@ -146,6 +159,7 @@
|
||||||
|
|
||||||
.multiselect__content-wrapper {
|
.multiselect__content-wrapper {
|
||||||
background-color: $dark-bg2;
|
background-color: $dark-bg2;
|
||||||
|
border-color: $dark-border-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
.multiselect__option--selected.multiselect__option--highlight {
|
.multiselect__option--selected.multiselect__option--highlight {
|
||||||
|
|
|
@ -96,9 +96,20 @@
|
||||||
|
|
||||||
<div class="my-3">
|
<div class="my-3">
|
||||||
<label for="acceptedStatusCodes" class="form-label">Accepted Status Codes</label>
|
<label for="acceptedStatusCodes" class="form-label">Accepted Status Codes</label>
|
||||||
<VueMultiselect id="acceptedStatusCodes" v-model="monitor.accepted_statuscodes" :options="acceptedStatusCodeOptions" :multiple="true" :close-on-select="false" :clear-on-select="false" :preserve-search="true" placeholder="Pick Accepted Status Codes..." :preselect-first="false">
|
|
||||||
<template #selection="{ values, isOpen }"><span v-if="values.length && !isOpen" class="multiselect__single">{{ values.length }} options selected</span></template>
|
<VueMultiselect
|
||||||
</VueMultiselect>
|
id="acceptedStatusCodes"
|
||||||
|
v-model="monitor.accepted_statuscodes"
|
||||||
|
:options="acceptedStatusCodeOptions"
|
||||||
|
:multiple="true"
|
||||||
|
:close-on-select="false"
|
||||||
|
:clear-on-select="false"
|
||||||
|
:preserve-search="true"
|
||||||
|
placeholder="Pick Accepted Status Codes..."
|
||||||
|
:preselect-first="false"
|
||||||
|
:taggable="true"
|
||||||
|
></VueMultiselect>
|
||||||
|
|
||||||
<div class="form-text">
|
<div class="form-text">
|
||||||
Select status codes which are considered as a successful response.
|
Select status codes which are considered as a successful response.
|
||||||
</div>
|
</div>
|
||||||
|
@ -248,7 +259,7 @@ export default {
|
||||||
@import "../assets/vars.scss";
|
@import "../assets/vars.scss";
|
||||||
|
|
||||||
.multiselect__tags {
|
.multiselect__tags {
|
||||||
border-radius: 2rem;
|
border-radius: 1.5rem;
|
||||||
border: 1px solid #ced4da;
|
border: 1px solid #ced4da;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -265,8 +276,15 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
.multiselect__tag {
|
.multiselect__tag {
|
||||||
|
border-radius: 50rem;
|
||||||
background: $primary !important;
|
background: $primary !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.dark {
|
||||||
|
.multiselect__tag {
|
||||||
|
color: $dark-font-color2;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|
|
@ -29,7 +29,7 @@ function ucfirst(str) {
|
||||||
exports.ucfirst = ucfirst;
|
exports.ucfirst = ucfirst;
|
||||||
function debug(msg) {
|
function debug(msg) {
|
||||||
if (process.env.NODE_ENV === "development") {
|
if (process.env.NODE_ENV === "development") {
|
||||||
console.debug(msg);
|
console.log(msg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
exports.debug = debug;
|
exports.debug = debug;
|
||||||
|
|
|
@ -39,6 +39,6 @@ export function ucfirst(str) {
|
||||||
|
|
||||||
export function debug(msg) {
|
export function debug(msg) {
|
||||||
if (process.env.NODE_ENV === "development") {
|
if (process.env.NODE_ENV === "development") {
|
||||||
console.debug(msg);
|
console.log(msg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue