fabio286
/
antares
mirror of https://github.com/Fabio286/antares.git
1
1
Fork 0
Code Issues Releases Wiki Activity

fix(UI): BaseSelect style

This commit is contained in:
Giulio Ganci 2022-05-13 18:20:47 +02:00
parent 42bc9196ff
commit 71b0736d0d
2 changed files with 25 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/renderer/components/BaseSelect.vue
View File

@ -2,7 +2,7 @@
<div <div
ref="el" ref="el"
class="select" class="select"
:class="{'select-open': isOpen, 'select--disabled': disabled}" :class="{'select--open': isOpen, 'select--disabled': disabled}"
role="combobox" role="combobox"
:tabindex="searchable || disabled ? -1 : tabindex" :tabindex="searchable || disabled ? -1 : tabindex"
@focus="activate()" @focus="activate()"
@ -34,7 +34,6 @@
</div> </div>
<Teleport <Teleport
v-if="isOpen" v-if="isOpen"
ref="teleportEl"
:to="dropdownContainer" :to="dropdownContainer"
> >
<div <div
@ -76,10 +75,10 @@ export default defineComponent({
name: 'BaseSelect', name: 'BaseSelect',
props: { props: {
modelValue: { modelValue: {
type: [String, Number, Object] type: [String, Number, Object, Boolean]
}, },
value: { value: {
type: [String, Number, Object] type: [String, Number, Object, Boolean]
}, },
searchable: { searchable: {
type: Boolean, type: Boolean,
@ -276,13 +275,22 @@ export default defineComponent({
}; };
const adjustListPosition = () => { const adjustListPosition = () => {
const element = el.value; setTimeout(() => {
const { left, top } = element.getBoundingClientRect(); const element = el.value;
const { left: offsetLeft = 0, top: offsetTop = 0 } = props.dropdownOffsets; let { left, top } = element.getBoundingClientRect();
const { left: offsetLeft = 0, top: offsetTop = 0 } = props.dropdownOffsets;
top = top + element.clientHeight + offsetTop;
const openBottom = top >= 0 && top + optionList.value.clientHeight <= window.innerHeight;
optionList.value.style.left = `${left + offsetLeft}px`; if (!openBottom) {
optionList.value.style.top = `${top + element.clientHeight + offsetTop}px`; top -= (offsetTop * 2 + element.clientHeight);
optionList.value.style.minWidth = `${element.clientWidth}px`; optionList.value.style.transform = 'translate(0, -100%)';
}
optionList.value.style.left = `${left + offsetLeft}px`;
optionList.value.style.top = `${top}px`;
optionList.value.style.minWidth = `${element.clientWidth}px`;
}, 100);
}; };
const keyArrows = (direction) => { const keyArrows = (direction) => {
@ -351,12 +359,18 @@ export default defineComponent({
.select { .select {
display: block; display: block;
&:focus, &--open {
z-index: 10;
}
&__search-input { &__search-input {
appearance: none; appearance: none;
border: none; border: none;
background: transparent; background: transparent;
outline: none; outline: none;
color: currentColor; color: currentColor;
max-width: 100%;
width: 100%;
} }
&__list-wrapper { &__list-wrapper {

2
src/renderer/scss/main.scss
View File

@ -298,7 +298,7 @@ option:checked {
} }
&.select { &.select {
&.select-open { &.select--open {
border-color: $primary-color !important; border-color: $primary-color !important;
@include control-shadow(); @include control-shadow();
} }