Skip to content

Commit

Permalink
Merge pull request #274 from KxSystems/ecmel-fixes
Browse files Browse the repository at this point in the history 
KXI-37430: Fixes dropdown width
  • Loading branch information
@ecmel
ecmel authored Apr 15, 2024
2 parents 9f82157 + dd9550a commit 6eada16
Show file tree
Hide file tree
Showing 4 changed files with 63 additions and 90 deletions.
141 changes: 51 additions & 90 deletions src/webview/components/kdbDataSourceView.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
*/

import { LitElement, html } from "lit";
import { repeat } from "lit/directives/repeat.js";
import { customElement, state } from "lit/decorators.js";
import {
Agg,
Expand Down Expand Up @@ -348,14 +349,8 @@ export class KdbDataSourceView extends LitElement {
@click="${() => {
if (this.filters.length < MAX_RULES) {
const index = this.filters.indexOf(filter);
const value = this.filters;
this.filters = [];
this.filters.splice(index + 1, 0, createFilter());
this.requestUpdate();
queueMicrotask(() => {
value.splice(index + 1, 0, createFilter());
this.filters = value;
this.requestUpdate();
});
}
}}"
>+</vscode-button
Expand All @@ -366,17 +361,11 @@ export class KdbDataSourceView extends LitElement {
@click="${() => {
if (this.filters.length > 0) {
const index = this.filters.indexOf(filter);
const value = this.filters;
this.filters = [];
this.filters.splice(index, 1);
if (this.filters.length === 0) {
this.filters.push(createFilter());
}
this.requestUpdate();
queueMicrotask(() => {
value.splice(index, 1);
if (value.length === 0) {
value.push(createFilter());
}
this.filters = value;
this.requestUpdate();
});
}
}}"
>-</vscode-button
Expand Down Expand Up @@ -418,14 +407,8 @@ export class KdbDataSourceView extends LitElement {
@click="${() => {
if (this.labels.length < MAX_RULES) {
const index = this.labels.indexOf(label);
const value = this.labels;
this.labels = [];
this.labels.splice(index + 1, 0, createLabel());
this.requestUpdate();
queueMicrotask(() => {
value.splice(index + 1, 0, createLabel());
this.labels = value;
this.requestUpdate();
});
}
}}"
>+</vscode-button
Expand All @@ -436,17 +419,11 @@ export class KdbDataSourceView extends LitElement {
@click="${() => {
if (this.labels.length > 0) {
const index = this.labels.indexOf(label);
const value = this.labels;
this.labels = [];
this.labels.splice(index, 1);
if (this.labels.length === 0) {
this.labels.push(createLabel());
}
this.requestUpdate();
queueMicrotask(() => {
value.splice(index, 1);
if (value.length === 0) {
value.push(createLabel());
}
this.labels = value;
this.requestUpdate();
});
}
}}"
>-</vscode-button
Expand Down Expand Up @@ -481,14 +458,8 @@ export class KdbDataSourceView extends LitElement {
@click="${() => {
if (this.sorts.length < MAX_RULES) {
const index = this.sorts.indexOf(sort);
const value = this.sorts;
this.sorts = [];
this.sorts.splice(index + 1, 0, createSort());
this.requestUpdate();
queueMicrotask(() => {
value.splice(index + 1, 0, createSort());
this.sorts = value;
this.requestUpdate();
});
}
}}"
>+</vscode-button
Expand All @@ -499,17 +470,11 @@ export class KdbDataSourceView extends LitElement {
@click="${() => {
if (this.sorts.length > 0) {
const index = this.sorts.indexOf(sort);
const value = this.sorts;
this.sorts = [];
this.sorts.splice(index, 1);
if (this.sorts.length === 0) {
this.sorts.push(createSort());
}
this.requestUpdate();
queueMicrotask(() => {
value.splice(index, 1);
if (value.length === 0) {
value.push(createSort());
}
this.sorts = value;
this.requestUpdate();
});
}
}}"
>-</vscode-button
Expand Down Expand Up @@ -571,14 +536,8 @@ export class KdbDataSourceView extends LitElement {
@click="${() => {
if (this.aggs.length < MAX_RULES) {
const index = this.aggs.indexOf(agg);
const value = this.aggs;
this.aggs = [];
this.aggs.splice(index + 1, 0, createAgg());
this.requestUpdate();
queueMicrotask(() => {
value.splice(index + 1, 0, createAgg());
this.aggs = value;
this.requestUpdate();
});
}
}}"
>+</vscode-button
Expand All @@ -589,17 +548,11 @@ export class KdbDataSourceView extends LitElement {
@click="${() => {
if (this.aggs.length > 0) {
const index = this.aggs.indexOf(agg);
const value = this.aggs;
this.aggs = [];
this.aggs.splice(index, 1);
if (this.aggs.length === 0) {
this.aggs.push(createAgg());
}
this.requestUpdate();
queueMicrotask(() => {
value.splice(index, 1);
if (value.length === 0) {
value.push(createAgg());
}
this.aggs = value;
this.requestUpdate();
});
}
}}"
>-</vscode-button
Expand Down Expand Up @@ -638,14 +591,8 @@ export class KdbDataSourceView extends LitElement {
@click="${() => {
if (this.groups.length < MAX_RULES) {
const index = this.groups.indexOf(group);
const value = this.groups;
this.groups = [];
this.groups.splice(index + 1, 0, createGroup());
this.requestUpdate();
queueMicrotask(() => {
value.splice(index + 1, 0, createGroup());
this.groups = value;
this.requestUpdate();
});
}
}}"
>+</vscode-button
Expand All @@ -656,17 +603,11 @@ export class KdbDataSourceView extends LitElement {
@click="${() => {
if (this.groups.length > 0) {
const index = this.groups.indexOf(group);
const value = this.groups;
this.groups = [];
this.groups.splice(index, 1);
if (this.groups.length === 0) {
this.groups.push(createGroup());
}
this.requestUpdate();
queueMicrotask(() => {
value.splice(index, 1);
if (value.length === 0) {
value.push(createGroup());
}
this.groups = value;
this.requestUpdate();
});
}
}}"
>-</vscode-button
Expand Down Expand Up @@ -827,19 +768,39 @@ export class KdbDataSourceView extends LitElement {
</div>
<div class="col">
${this.filters.map((filter) => this.renderFilter(filter))}
${repeat(
this.filters,
(filter) => filter,
(filter) => this.renderFilter(filter),
)}
</div>
<div class="col">
${this.labels.map((label) => this.renderLabel(label))}
${repeat(
this.labels,
(label) => label,
(label) => this.renderLabel(label),
)}
</div>
<div class="col">
${this.sorts.map((sort) => this.renderSort(sort))}
${repeat(
this.sorts,
(sort) => sort,
(sort) => this.renderSort(sort),
)}
</div>
<div class="col">
${this.aggs.map((agg) => this.renderAgg(agg))}
${repeat(
this.aggs,
(agg) => agg,
(agg) => this.renderAgg(agg),
)}
</div>
<div class="col">
${this.groups.map((group) => this.renderGroup(group))}
${repeat(
this.groups,
(group) => group,
(group) => this.renderGroup(group),
)}
</div>
</div>
</vscode-panel-view>
Expand Down
5 changes: 5 additions & 0 deletions src/webview/components/styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,11 @@ export const vscodeStyles = css`
line-height: normal;
margin-bottom: 2px;
}
vscode-dropdown::part(listbox) {
width: unset !important;
min-width: 12em;
}
`;

export const kdbStyles = css`
Expand Down
1 change: 1 addition & 0 deletions test/fixtures/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ Module._resolveFilename = function (specifier: string, parent: string) {
switch (specifier) {
case "lit":
case "lit/decorators.js":
case "lit/directives/repeat.js":
specifier = path.resolve(__dirname, "webview.js");
break;
}
Expand Down
6 changes: 6 additions & 0 deletions test/fixtures/webview.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,3 +42,9 @@ export function css(strings: any, ...values: unknown[]) {
}
export function customElement() {}
export function state() {}
export function repeat(items: Iterable<any>, keyFn: any, template: any) {
for (const item of items) {
keyFn(item);
template && template(item);
}
}

0 comments on commit 6eada16

Please sign in to comment.