design.estate/dees-catalog
2
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(core): update

Browse Source
This commit is contained in:
Philipp Kunz
2024-01-10 05:11:55 +01:00
parent f3ca4a114a
commit 93ee42135c
15 changed files with 230 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
ts_web/elements/dees-input-dropdown.ts
View File

@ -128,17 +128,22 @@ export class DeesInputDropdown extends DeesElement {
max-width: 420px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
min-height: 40px;
border-radius: 3px;
border-radius: 8px;
padding: 4px 8px;
transform: scale(0.98, 0.98);
position: absolute;
user-select: none;
}
.selectionBox.top {
transform: translate(0px, 4px);
}
.selectionBox.bottom {
transform: translate(0px, -4px);
}
.selectionBox.show {
pointer-events: all;
transform: scale(1, 1) translate(0px, 0px);
opacity: 1;
transform: scale(1, 1);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.8);
}
@ -151,7 +156,7 @@ export class DeesInputDropdown extends DeesElement {
}
.option.highlighted {
border-left: 2px solid #0277bd;
border-left: 2px solid #0069f2;
padding-left: 6px;
background: #ffffff20;
}
@ -159,29 +164,36 @@ export class DeesInputDropdown extends DeesElement {
.option:hover {
color: #fff;
padding-left: 8px;
background: #0277bd;
background: #0069f2;
}
.search {
padding: 8px;
.search.top {
padding-top: 4px;
}
.search.bottom {
padding-bottom: 4px;
}
.search input {
display: block;
width: 80%;
background: none;
border: none;
height: 24px;
color: inherit;
text-align: center;
text-align: left;
font-size: 12px;
font-weight: 600;
background: ${cssManager.bdTheme('#00000010', '#ffffff08')};
border-radius: 16px;
width: 100%;
margin: auto;
}
.search.top input {
border-bottom: 1px dotted #333;
}
.search.bottom input {
border-top: 1px dotted #333;
}
.search input:focus {
border: none;
outline: none;
}
`,
@ -194,7 +206,7 @@ export class DeesInputDropdown extends DeesElement {
<div class="selectionBox">
${this.enableSearch && !this.opensToTop
? html`
<div class="search">
<div class="search top">
<input type="text" placeholder="Search" @input="${this.handleSearch}" />
</div>
`
@ -214,7 +226,7 @@ export class DeesInputDropdown extends DeesElement {
})}
${this.enableSearch && this.opensToTop
? html`
<div class="search">
<div class="search bottom">
<input type="text" placeholder="Search" @input="${this.handleSearch}" />
</div>
`
@ -304,25 +316,27 @@ export class DeesInputDropdown extends DeesElement {
} else {
if (!selectionBox.classList.contains('show')) {
selectionBox.style.width = selectedBox.clientWidth + 'px';
selectionBox.classList.add('show');
const spaceData = selectedBox.getBoundingClientRect();
if (300 > window.innerHeight - spaceData.bottom) {
this.opensToTop = true;
selectedBox.classList.add('accentTop');
selectionBox.classList.add('top');
selectionBox.style.bottom = selectedBox.clientHeight + 2 + 'px';
} else {
selectedBox.classList.add('accentBottom');
selectionBox.classList.add('bottom');
this.opensToTop = false;
const labelOffset = this.label ? 24 : 0;
selectionBox.style.top = selectedBox.clientHeight + labelOffset + 'px';
}
await domtoolsInstance.convenience.smartdelay.delayFor(0);
const searchInput = selectionBox.querySelector('input');
searchInput.focus();
searchInput?.focus();
selectionBox.classList.add('show');
} else {
selectedBox.style.pointerEvents = 'none';
selectionBox.classList.remove('show');
selectedBox.style.opacity = '0';
// selectedBox.style.opacity = '0';
}
}
}