local-it/vikunja-frontend
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Inline mutliselect search input for multiple elements

Browse source
This commit is contained in:
kolaente 2021-01-10 22:46:50 +01:00
parent eb31798f06
commit 85eeccee28
No known key found for this signature in database
GPG key ID: F40E70337AB24C9B
2 changed files with 11 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/input/multiselect.vue
View file

@ -4,7 +4,7 @@
:class="{'has-search-results': searchResultsVisible}" :class="{'has-search-results': searchResultsVisible}"
ref="multiselectRoot" ref="multiselectRoot"
> >
<div class="input-wrapper input"> <div class="input-wrapper input" :class="{'has-multiple': multiple}">
<template v-if="Array.isArray(internalValue)"> <template v-if="Array.isArray(internalValue)">
<template v-for="(item, key) in internalValue"> <template v-for="(item, key) in internalValue">
<slot name="tag" :item="item"> <slot name="tag" :item="item">

11
src/styles/components/base/multiselect.scss
View file

@ -40,6 +40,14 @@
} }
} }
&.has-multiple .input-loader-wrapper {
max-width: 250px;
input {
padding-left: 0;
}
}
&:focus-within { &:focus-within {
border-color: $primary !important; border-color: $primary !important;
background: $white !important; background: $white !important;
@ -110,11 +118,12 @@
position: relative; position: relative;
&:not(:first-child) { &:not(:first-child) {
margin-left: -1.75rem; margin-left: -1.5rem;
} }
.user img { .user img {
border: 2px solid $white; border: 2px solid $white;
margin-right: 0;
} }
.remove-assignee { .remove-assignee {