KumiSystems/Chatwoot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

feat: Update agent and team multi-select with new multi-select dropdown (#2516)

Browse source 
* feat: Update agent/team multiselect styles

* Component name fixes

* Adds key control for our multiselect dropdown and component name spell fix

* Minor fixes

* Review fixes

* Minor fixes

* Minor fixes

* Review fixes

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
Co-authored-by: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
This commit is contained in:
Sivin Varghese 2021-07-29 17:44:37 +05:30 • committed by GitHub
parent 672e5874fb
commit f2b5e328bb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 117 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

54
app/javascript/shared/components/ui/MultiselectDropdownItems.vue
View file

@ -11,14 +11,19 @@
/>
</div>
<div class="list-scroll-container">
<div class="dropdown-list">
<div
ref="multiselectDropdown"
class="multiselect-dropdown--list"
@keyup.up="onArrowUp"
@keyup.down="onArrowDown"
>
<woot-dropdown-menu>
<woot-dropdown-item
v-for="option in filteredOptions"
:key="option.id"
>
<woot-button
class="dropdown-item"
class="multiselect-dropdown--item"
variant="clear"
:class="{
active: option.id === (selectedItem && selectedItem.id),
@ -102,17 +107,50 @@ export default {
return this.filteredOptions.length === 0 && this.search !== '';
},
},
mounted() {
this.focusInput();
},
methods: {
onclick(option) {
this.$emit('click', option);
},
focusInput() {
this.$refs.searchbar.focus();
},
onArrowUp() {
const allDropdownItems = this.$refs.multiselectDropdown.querySelectorAll(
'.dropdown .multiselect-dropdown--item'
);
const focusedElement = this.$refs.multiselectDropdown.querySelector(
'.dropdown .multiselect-dropdown--item:focus'
);
const activeElementIndex = [...allDropdownItems].indexOf(focusedElement);
const lastElementIndex = allDropdownItems.length - 1;
if (activeElementIndex >= 1) {
allDropdownItems[activeElementIndex - 1].focus();
} else {
allDropdownItems[lastElementIndex].focus();
}
},
onArrowDown() {
const allDropdownItems = this.$refs.multiselectDropdown.querySelectorAll(
'.dropdown .multiselect-dropdown--item'
);
const focusedElement = this.$refs.multiselectDropdown.querySelector(
'.dropdown .multiselect-dropdown--item:focus'
);
const activeElementIndex = [...allDropdownItems].indexOf(focusedElement);
const lastElementIndex = allDropdownItems.length - 1;
if (activeElementIndex === lastElementIndex) {
allDropdownItems[0].focus();
} else {
allDropdownItems[activeElementIndex + 1].focus();
}
},
},
};
</script>
@ -153,18 +191,24 @@ export default {
overflow: auto;
}
.dropdown-list {
.multiselect-dropdown--list {
width: 100%;
max-height: 12rem;
}
.dropdown-item {
.multiselect-dropdown--item {
justify-content: space-between;
width: 100%;
&.active {
background-color: var(--w-50);
color: var(--w-900);
font-weight: var(--font-weight-bold);
}
&:focus {
background-color: var(--color-background);
}
}
.user-wrap {