beenull/listmonk
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix and refactor list selector UI component.

Browse source 
- Refactor font-size tag colours and dropdown padding.
- Fixed oninput list filter that wasn't working.
This commit is contained in:
Kailash Nadh 2021-09-19 12:49:22 +05:30
parent 1df827c58a
commit 6f2aa1a318
2 changed files with 22 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
frontend/src/assets/style.scss
View file

@ -307,13 +307,22 @@ body.is-noscroll .b-sidebar {
.autocomplete { .autocomplete {
.dropdown-content { .dropdown-content {
background-color: $white-bis; background-color: $white-bis;
border: 1px solid $primary;
} }
a.dropdown-item { a.dropdown-item {
font-size: $size-6;
&:hover, &.is-hovered { &:hover, &.is-hovered {
background-color: $grey-lightest; background-color: $grey-lightest;
color: $primary; color: $primary;
} }
} }
.dropdown-menu {
top: 92%;
}
.dropdown-menu.is-opened-top {
top: auto;
bottom: 92%;
}
} }
.input, .taginput .taginput-container.is-focusable, .textarea { .input, .taginput .taginput-container.is-focusable, .textarea {
@ -377,7 +386,7 @@ body.is-noscroll .b-sidebar {
/* Tags */ /* Tags */
.tag { .tag {
min-width: 75px; min-width: 85px;
&.is-small { &.is-small {
font-size: 0.65rem; font-size: 0.65rem;
@ -388,6 +397,7 @@ body.is-noscroll .b-sidebar {
} }
&:not(body) { &:not(body) {
font-size: 0.85em;
$color: $grey-lighter; $color: $grey-lighter;
border: 1px solid $color; border: 1px solid $color;
box-shadow: 1px 1px 0 $color; box-shadow: 1px 1px 0 $color;
@ -401,7 +411,7 @@ body.is-noscroll .b-sidebar {
border: 1px solid lighten($color, 37%); border: 1px solid lighten($color, 37%);
box-shadow: 1px 1px 0 lighten($color, 37%); box-shadow: 1px 1px 0 lighten($color, 37%);
} }
&.public, &.running { &.public, &.running, &.list {
$color: $primary; $color: $primary;
color: lighten($color, 20%);; color: lighten($color, 20%);;
background: #e6f7ff; background: #e6f7ff;

14
frontend/src/components/ListSelector.vue
View file

@ -7,7 +7,7 @@
:class="l.subscriptionStatus" :class="l.subscriptionStatus"
:closable="true" :closable="true"
:data-id="l.id" :data-id="l.id"
@close="removeList(l.id)"> @close="removeList(l.id)" class="list">
{{ l.name }} <sup>{{ l.subscriptionStatus }}</sup> {{ l.name }} <sup>{{ l.subscriptionStatus }}</sup>
</b-tag> </b-tag>
</b-taglist> </b-taglist>
@ -17,10 +17,11 @@
:label="label + (selectedItems ? ` (${selectedItems.length})` : '')" :label="label + (selectedItems ? ` (${selectedItems.length})` : '')"
label-position="on-border"> label-position="on-border">
<b-autocomplete <b-autocomplete
v-model="query"
:placeholder="placeholder" :placeholder="placeholder"
clearable clearable
dropdown-position="top" dropdown-position="top"
:disabled="disabled || filteredLists.length === 0" :disabled="all.length === 0"
:keep-first="true" :keep-first="true"
:clear-on-select="true" :clear-on-select="true"
:open-on-focus="true" :open-on-focus="true"
@ -60,6 +61,7 @@ export default {
data() { data() {
return { return {
query: '',
selectedItems: [], selectedItems: [],
}; };
}, },
@ -70,6 +72,7 @@ export default {
return; return;
} }
this.selectedItems.push(l); this.selectedItems.push(l);
this.query = '';
// Propagate the items to the parent's v-model binding. // Propagate the items to the parent's v-model binding.
Vue.nextTick(() => { Vue.nextTick(() => {
@ -88,14 +91,17 @@ export default {
}, },
computed: { computed: {
// Returns the list of lists to which the subscriber isn't subscribed. // Return the list of unselected lists.
filteredLists() { filteredLists() {
// Get a map of IDs of the user subsciptions. eg: {1: true, 2: true}; // Get a map of IDs of the user subsciptions. eg: {1: true, 2: true};
const subIDs = this.selectedItems.reduce((obj, item) => ({ ...obj, [item.id]: true }), {}); const subIDs = this.selectedItems.reduce((obj, item) => ({ ...obj, [item.id]: true }), {});
// Filter lists from the global lists whose IDs are not in the user's // Filter lists from the global lists whose IDs are not in the user's
// subscribed ist. // subscribed ist.
return this.$props.all.filter((l) => !(l.id in subIDs)); const q = this.query.toLowerCase();
return this.$props.all.filter(
(l) => (!(l.id in subIDs) && l.name.toLowerCase().indexOf(q) >= 0),
);
}, },
}, },