improve multiselect

This commit is contained in:
LouisLam 2021-08-08 21:03:10 +08:00
parent 7b1000d995
commit 3265c3cbc3
5 changed files with 41 additions and 8 deletions

View file

@ -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");

View file

@ -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;
}
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-thumb {
background: #CCC;
border-radius: 20px;
}
.modal {
backdrop-filter: blur(3px);
}
@ -26,7 +35,7 @@
.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);
padding: 10px;
border-radius: 10px;
@ -62,6 +71,10 @@
background-color: #090C10;
color: $dark-font-color;
&::-webkit-scrollbar-thumb {
background: $dark-border-color;
}
.shadow-box {
background-color: $dark-bg;
}
@ -146,6 +159,7 @@
.multiselect__content-wrapper {
background-color: $dark-bg2;
border-color: $dark-border-color;
}
.multiselect__option--selected.multiselect__option--highlight {

View file

@ -96,9 +96,20 @@
<div class="my-3">
<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">
Select status codes which are considered as a successful response.
</div>
@ -248,7 +259,7 @@ export default {
@import "../assets/vars.scss";
.multiselect__tags {
border-radius: 2rem;
border-radius: 1.5rem;
border: 1px solid #ced4da;
}
@ -265,8 +276,15 @@ export default {
}
.multiselect__tag {
border-radius: 50rem;
background: $primary !important;
}
.dark {
.multiselect__tag {
color: $dark-font-color2;
}
}
</style>
<style scoped>

View file

@ -29,7 +29,7 @@ function ucfirst(str) {
exports.ucfirst = ucfirst;
function debug(msg) {
if (process.env.NODE_ENV === "development") {
console.debug(msg);
console.log(msg);
}
}
exports.debug = debug;

View file

@ -39,6 +39,6 @@ export function ucfirst(str) {
export function debug(msg) {
if (process.env.NODE_ENV === "development") {
console.debug(msg);
console.log(msg);
}
}