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

fix(core): update

Browse Source
This commit is contained in:
Philipp Kunz 2023-12-20 19:09:55 +01:00
parent 5613ad7fa6
commit 49f3fc8feb
18 changed files with 109 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ts_web/00_commitinfo_data.ts
View File

@ -3,6 +3,6 @@
*/
export const commitinfo = {
name: '@design.estate/dees-catalog',
version: '1.0.236',
version: '1.0.237',
description: 'website for lossless.com'
}

1
ts_web/elements/dees-button.ts
View File

@ -93,7 +93,6 @@ export class DeesButton extends DeesElement {
}
.button:hover {
cursor: pointer;
background: #039be5;
color: #ffffff;
border: 1px solid #039be5;

1
ts_web/elements/dees-chips.ts
View File

@ -81,7 +81,6 @@ export class DeesChips extends DeesElement {
.chip:hover {
background: #666666;
cursor: pointer;
}
.chip.selected {

2
ts_web/elements/dees-contextmenu.ts
View File

@ -130,12 +130,10 @@ export class DeesContextmenu extends DeesElement {
}
.mainbox .menuitem:hover {
cursor: pointer;
background: ${cssManager.bdTheme('#00000010', '#ffffff10')};
}
.mainbox .menuitem:active {
cursor: pointer;
background: #ffffff05;
}
`,

12
ts_web/elements/dees-dataview-codebox.ts
View File

@ -61,17 +61,22 @@ export class DeesDataviewCodebox extends DeesElement {
}
.appbar {
position: relative;
color: ${cssManager.bdTheme('#333', '#ccc')};
background: ${cssManager.bdTheme('#ffffff', '#161616')};
border-bottom: 1px solid ${cssManager.bdTheme('#eeeeeb', '#222222')};
height: 24px;
display: flex;
font-size: 12px;
line-height: 24px;
justify-content: center;
align-items: center;
}
.appbar .fileName {
line-height: inherit;
position: relative;
flex: 1;
text-align: center;
}
@ -175,8 +180,9 @@ export class DeesDataviewCodebox extends DeesElement {
}}"
>
<div class="appbar">
<dees-windowcontrols></dees-windowcontrols>
<dees-windowcontrols type="mac" position="left"></dees-windowcontrols>
<div class="fileName">index.ts</div>
<dees-windowcontrols type="mac" position="right"></dees-windowcontrols>
</div>
<div class="codegrid">
<div class="lineNumbers">

1
ts_web/elements/dees-dataview-statusobject.ts
View File

@ -61,7 +61,6 @@ export class DeesDataviewStatusobject extends DeesElement {
}
.copyMain {
cursor: pointer;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;

1
ts_web/elements/dees-input-checkbox.ts
View File

@ -62,7 +62,6 @@ export class DeesInputCheckbox extends DeesElement {
display: block;
position: relative;
margin: 20px 0px;
cursor: pointer;
}
.maincontainer {

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

@ -59,6 +59,15 @@ export class DeesInputDropdown extends DeesElement {
@state()
public opensToTop: boolean = false;
@state()
private filteredOptions: { option: string; key: string; payload?: any }[] = [];
@state()
private highlightedIndex: number = 0;
@state()
public isOpened = false;
public static styles = [
cssManager.defaultStyles,
css`
@ -85,7 +94,6 @@ export class DeesInputDropdown extends DeesElement {
.selectedBox {
user-select: none;
cursor: pointer;
position: relative;
max-width: 420px;
height: 40px;
@ -99,18 +107,17 @@ export class DeesInputDropdown extends DeesElement {
transition: all 0.2s ease;
}
.accentTop {
border-top: 1px solid #e4002b;
.accentBottom {
background: #ffffff10;
}
.accentBottom {
border-bottom: 1px solid #e4002b;
.accentTop {
background: #ffffff10;
}
.selectionBox {
will-change: transform;
pointer-events: none;
cursor: pointer;
transition: all 0.2s ease;
opacity: 0;
background: ${cssManager.bdTheme('#ffffff', '#222222')};
@ -118,22 +125,31 @@ export class DeesInputDropdown extends DeesElement {
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
min-height: 40px;
border-radius: 3px;
padding: 4px;
transform: scale(0.99, 0.99);
padding: 4px 8px;
transform: scale(0.98, 0.98);
position: absolute;
user-select: none;
}
.selectionBox.show {
pointer-events: all;
opacity: 1;
transform: scale(1, 1);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.8);
}
.option {
transition: all 0.1s;
line-height: 40px;
line-height: 32px;
padding: 0px 4px;
border-radius: 3px;
margin: 4px 0px;
}
.option.highlighted {
border-left: 2px solid #0277bd;
padding-left: 6px;
background: #ffffff20;
}
.option:hover {
@ -169,20 +185,21 @@ export class DeesInputDropdown extends DeesElement {
public render(): TemplateResult {
return html`
<div class="maincontainer">
<div class="maincontainer" @keydown="${this.isOpened ? this.handleKeyDown : undefined}">
${this.label ? html`<div class="label">${this.label}</div>` : html``}
<div class="selectionBox">
${this.enableSearch && !this.opensToTop
? html`
<div class="search">
<input type="text" placeholder="Search" />
<input type="text" placeholder="Search" @input="${this.handleSearch}" />
</div>
`
: null}
${this.options.map((option) => {
${this.filteredOptions.map((option, index) => {
const isHighlighted = this.highlightedIndex === index;
return html`
<div
class="option"
class="option ${isHighlighted ? 'highlighted' : ''}"
@click=${() => {
this.updateSelection(option);
}}
@ -194,7 +211,7 @@ export class DeesInputDropdown extends DeesElement {
${this.enableSearch && this.opensToTop
? html`
<div class="search">
<input type="text" placeholder="Search" />
<input type="text" placeholder="Search" @input="${this.handleSearch}" />
</div>
`
: null}
@ -217,6 +234,7 @@ export class DeesInputDropdown extends DeesElement {
firstUpdated() {
this.selectedOption = this.selectedOption || this.options[0] || null;
this.filteredOptions = this.options; // Initialize filteredOptions
}
public async updateSelection(selectedOption) {
@ -237,6 +255,7 @@ export class DeesInputDropdown extends DeesElement {
private isElevated: boolean = false;
private windowOverlay: DeesWindowLayer;
public async toggleSelectionBox() {
this.isOpened = !this.isOpened;
const domtoolsInstance = await this.domtoolsPromise;
const selectedBox: HTMLElement = this.shadowRoot.querySelector('.selectedBox');
const selectionBox: HTMLElement = this.shadowRoot.querySelector('.selectionBox');
@ -298,4 +317,32 @@ export class DeesInputDropdown extends DeesElement {
}
}
}
private handleSearch(event: Event): void {
const searchTerm = (event.target as HTMLInputElement).value.toLowerCase();
this.filteredOptions = this.options.filter((option) =>
option.option.toLowerCase().includes(searchTerm)
);
this.highlightedIndex = 0; // Reset highlighted index
}
private handleKeyDown(event: KeyboardEvent): void {
if (!this.isOpened) {
console.log('discarded key event. Check why this function is called.');
return;
}
const key = event.key;
const maxIndex = this.filteredOptions.length - 1;
if (key === 'ArrowDown') {
this.highlightedIndex = this.highlightedIndex + 1 > maxIndex ? 0 : this.highlightedIndex + 1;
event.preventDefault();
} else if (key === 'ArrowUp') {
this.highlightedIndex = this.highlightedIndex - 1 < 0 ? maxIndex : this.highlightedIndex - 1;
event.preventDefault();
} else if (key === 'Enter') {
this.updateSelection(this.filteredOptions[this.highlightedIndex]);
event.preventDefault();
}
}
}

1
ts_web/elements/dees-input-fileupload.ts
View File

@ -88,7 +88,6 @@ export class DeesInputFileupload extends DeesElement {
.uploadButton {
position: relative;
cursor: pointer;
padding: 8px;
max-width: 600px;
background: ${cssManager.bdTheme('#fafafa', '#333333')};

1
ts_web/elements/dees-input-quantityselector.ts
View File

@ -85,7 +85,6 @@ export class DeesInputQuantitySelector extends DeesElement {
}
.selector:hover {
cursor: pointer;
}
.quantity {

1
ts_web/elements/dees-input-radio.ts
View File

@ -51,7 +51,6 @@ export class DeesInputRadio extends DeesElement {
display: block;
position: relative;
margin: 20px 0px;
cursor: pointer;
}
.maincontainer {

1
ts_web/elements/dees-input-text.ts
View File

@ -147,7 +147,6 @@ export class DeesInputText extends DeesElement {
}
.showPassword:hover {
cursor: pointer;
background: ${cssManager.bdTheme('#00000010', '#ffffff10')};
}

1
ts_web/elements/dees-mobilenavigation.ts
View File

@ -105,7 +105,6 @@ export class DeesMobilenavigation extends DeesElement {
padding: 8px;
margin-left: -8px;
margin-right: -8px;
cursor: pointer;
border-radius: 3px;
}
.menuItem:hover {

1
ts_web/elements/dees-modal.ts
View File

@ -133,7 +133,6 @@ export class DeesModal extends DeesElement {
text-align: center;
font-size: 14px;
border-right: 1px solid #222;
cursor: pointer;
}
.modal .bottomButtons .bottomButton:hover {
background: #222;

1
ts_web/elements/dees-speechbubble.ts
View File

@ -52,7 +52,6 @@ export class DeesSpeechbubble extends DeesElement {
display: block;
box-sizing: border-box;
color: ${cssManager.bdTheme('#333', '#fff')};
cursor: pointer;
user-select: none;
}
:host([hidden]) {

1
ts_web/elements/dees-stepper.ts
View File

@ -144,7 +144,6 @@ export class DeesStepper extends DeesElement {
font-size: 12px;
border-bottom-right-radius: 3px;
background: ${cssManager.bdTheme('#00000008', '#ffffff08')};
cursor: pointer;
}
.step .goBack:hover {

4
ts_web/elements/dees-table.ts
View File

@ -202,7 +202,6 @@ export class DeesTable<T> extends DeesElement {
.headerActions {
margin-left: auto;
cursor: pointer;
}
.headerAction {
display: flex;
@ -236,7 +235,7 @@ export class DeesTable<T> extends DeesElement {
text-align: left;
}
tr:hover {
cursor: pointer;
}
tr:hover td {
background: ${cssManager.bdTheme('#22222210', '#ffffff10')};
@ -343,7 +342,6 @@ export class DeesTable<T> extends DeesElement {
}
.footerActions .footerAction {
cursor: pointer;
padding: 8px 16px;
display: flex;
}

49
ts_web/elements/dees-windowcontrols.ts
View File

@ -19,18 +19,37 @@ declare global {
@customElement('dees-windowcontrols')
export class DeesWindowControls extends DeesElement {
// STATIC
public static demo = () => html`<dees-windowcontrols></dees-windowcontrols>`;
// Instance
@property({
reflect: true,
})
public type: 'mac' | 'linux' | 'windows' = 'mac';
@property({
reflect: true,
})
public position: 'left' | 'right' = 'left';
public static styles = [
cssManager.defaultStyles,
css`
:host {
position: relative;
display: block;
box-sizing: border-box;
padding-left: 16px;
padding-right: 16px;
}
.windowControls {
position: absolute;
top: 6px;
left: 20px;
width: 200px;
display: grid;
grid-template-columns: 24px 24px 24px;
height: 100%;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.windowControls div {
@ -40,16 +59,17 @@ export class DeesWindowControls extends DeesElement {
border-radius: 50%;
margin: 0px;
padding: 0px;
cursor: pointer;
background: #222222;
}
.windowControls div.close {
background: #ff5f57;
margin-right: 12px;
}
.windowControls div.toDock {
background: #ffbd2e;
margin-right: 12px;
}
.windowControls div.minMax {
@ -64,11 +84,16 @@ export class DeesWindowControls extends DeesElement {
public render(): TemplateResult {
return html`
<div class="windowControls">
<div class="close"></div>
<div class="toDock"></div>
<div class="minMax"></div>
</div>
${(this.type === 'mac' && this.position === 'left') ||
((this.type === 'linux' || this.type === 'windows') && this.position === 'right')
? html`
<div class="windowControls">
<div class="close"></div>
<div class="toDock"></div>
<div class="minMax"></div>
</div>
`
: html``}
`;
}
}