Skip to content

icons tidy #149

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
eviltester merged 3 commits into from
Jun 2, 2026
Merged

icons tidy #149

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0885f33
icons tidy
eviltester Jun 2, 2026
6356758
review and build fix
eviltester Jun 2, 2026
3c43948
review fix
eviltester Jun 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions apps/web/images/.gitkeep
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@

1 change: 0 additions & 1 deletion apps/web/images/circle-question-solid.svg
View file
Open in desktop

This file was deleted.

4 changes: 0 additions & 4 deletions apps/web/images/readme.md
View file
Open in desktop

This file was deleted.

19 changes: 10 additions & 9 deletions apps/web/src/tests/browser/app/abstractions/components/grid-editor.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,18 +6,19 @@ class GridEditorComponent {
constructor(page) {
this.page = page;
this.container = page.locator('#main-grid-view');
this.toolbar = this.container.locator('[data-role="grid-toolbar-root"]');
this.grid = page.locator('#myGrid');
this.renderer = new GridRendererComponent(page, this.grid);
this.header = new GridHeaderComponent(page, this.grid, this.renderer);
this.addRowButton = page.getByRole('button', { name: 'Add Row', exact: true });
this.addRowsAboveButton = page.getByRole('button', { name: 'Add Rows Above' });
this.addRowsBelowButton = page.getByRole('button', { name: 'Add Rows Below' });
this.deleteSelectedRowsButton = page.getByRole('button', { name: 'Delete Selected Rows' });
this.quickFilterInput = page.getByLabel('Filter:');
this.clearFiltersButton = page.getByRole('button', { name: 'Clear Filters' });
this.clearSortButton = page.getByRole('button', { name: 'Clear Sort' });
this.resetTableButton = page.getByRole('button', { name: 'Reset Table' });
this.uniqueColumnNamesCheckbox = page.locator('#uniqueColumnNamesCheckbox');
this.addRowButton = this.toolbar.getByRole('button', { name: 'Add Row', exact: true });
this.addRowsAboveButton = this.toolbar.getByRole('button', { name: 'Add Rows Above' });
this.addRowsBelowButton = this.toolbar.getByRole('button', { name: 'Add Rows Below' });
this.deleteSelectedRowsButton = this.toolbar.getByRole('button', { name: 'Delete Selected Rows' });
this.quickFilterInput = this.toolbar.getByLabel('Filter:');
this.clearFiltersButton = this.toolbar.getByRole('button', { name: 'Clear Filters' });
this.clearSortButton = this.toolbar.getByRole('button', { name: 'Clear Sort' });
this.resetTableButton = this.toolbar.getByRole('button', { name: 'Reset Table' });
this.uniqueColumnNamesCheckbox = this.toolbar.getByRole('checkbox', { name: 'Unique Column Names' });
}

async expectVisible() {
Expand Down
18 changes: 9 additions & 9 deletions apps/web/src/tests/browser/app/abstractions/components/grid-header.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,18 +30,18 @@ class GridHeaderComponent {
async clickAction(columnName, action) {
const headerTitle = this._headerTitleByName(columnName);
const actionTitleMap = {
rename: 'rename',
delete: 'delete',
duplicate: 'duplicate',
'add-left': 'add left',
'add-right': 'add right',
'sort-asc': 'Sort Asc',
'sort-desc': 'Sort Desc',
'sort-none': 'Clear Sort',
rename: 'Rename column',
delete: 'Delete column',
duplicate: 'Duplicate column',
'add-left': 'Add column left',
'add-right': 'Add column right',
'sort-asc': 'Sort ascending',
'sort-desc': 'Sort descending',
'sort-none': 'Clear sort',
};
const title = actionTitleMap[action] || action;
const headerRoot = headerTitle.locator(`xpath=ancestor::*[contains(@class,'tabulator-col')]`);
const actionLocator = headerRoot.locator(`[title="${title}"], [title*="${title}"]`).first();
const actionLocator = headerRoot.locator(`[aria-label="${title}"], [title="${title}"]`).first();
await actionLocator.click();
}

Expand Down
10 changes: 5 additions & 5 deletions apps/web/src/tests/browser/app/functional/grid-editor/column-operations/add-columns.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,11 @@ test.describe('2. Column Operations', () => {
const { appPage, pageErrors } = await openApp(page);
const [base] = await appPage.gridEditor.header.getColumnNames();

await expect(page.locator('#myGrid [title="add left"]')).toBeVisible();
await expect(page.locator('#myGrid [title="rename"]')).toBeVisible();
await expect(page.locator('#myGrid [title="delete"]')).toBeVisible();
await expect(page.locator('#myGrid [title="duplicate"]')).toBeVisible();
await expect(page.locator('#myGrid [title="add right"]')).toBeVisible();
await expect(page.locator('#myGrid [aria-label="Add column left"]')).toBeVisible();
await expect(page.locator('#myGrid [aria-label="Rename column"]')).toBeVisible();
await expect(page.locator('#myGrid [aria-label="Delete column"]')).toBeVisible();
await expect(page.locator('#myGrid [aria-label="Duplicate column"]')).toBeVisible();
await expect(page.locator('#myGrid [aria-label="Add column right"]')).toBeVisible();

await appPage.gridEditor.header.addColumnLeft(base, 'Left Col');
await expect.poll(async () => appPage.gridEditor.header.getColumnNames()).toEqual(['Left Col', base]);
Expand Down
122 changes: 89 additions & 33 deletions apps/web/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -227,6 +227,21 @@ details[open] ul li:last-child {
padding-bottom: 10px;
}

.instruction-item-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.25rem;
margin-right: 0.25rem;
color: currentcolor;
vertical-align: -0.2rem;
}

.instruction-action-icon {
width: 1rem;
height: 1rem;
}

.appheading {
text-align: center;
margin: 0px;
Expand Down Expand Up @@ -358,6 +373,15 @@ Custom header styles for default items
.headerWrapper {
width: 100%;
}

.app-icon {
display: inline-block;
flex: none;
color: currentcolor;
vertical-align: -0.15em;
pointer-events: none;
}

.customHeaderTop {
display: flex;
}
Expand All @@ -373,28 +397,26 @@ Custom header styles for default items
margin: 0 3px 0 3px;
}

.customFilterMenuButton {
flex: 0;
}

.customHeaderLabel {
flex: 3;
text-align: center;
}

.customSortDownLabel {
margin: 0 0 0 6px;
padding: 0 2px;
cursor: pointer;
}

.customSortUpLabel {
margin: 0;
padding: 0 2px;
cursor: pointer;
}

.customSortRemoveLabel {
margin: 0 0 0 2px;
padding: 0 2px;
font-size: 11px;
cursor: pointer;
}

.active {
Expand All @@ -403,10 +425,53 @@ Custom header styles for default items

/* The grid heading control buttons */
.headerbuttons {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 2px;
width: 100%;
text-align: center;
color: #1e4a01;
}

.header-icon-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.35rem;
height: 1.35rem;
padding: 0;
color: inherit;
background: transparent;
border: 1px solid transparent;
border-radius: 3px;
cursor: pointer;
line-height: 1;
}

.header-icon-button:hover,
.header-icon-button:focus-visible {
background: color-mix(in srgb, currentcolor 10%, transparent);
border-color: color-mix(in srgb, currentcolor 35%, transparent);
}

.customHeaderDeleteButton:hover,
.customHeaderDeleteButton:focus-visible,
.header-icon-button[data-action='delete']:hover,
.header-icon-button[data-action='delete']:focus-visible {
color: #8d1b1b;
}

.header-action-icon {
width: 0.95rem;
height: 0.95rem;
}

.header-sort-icon {
width: 0.8rem;
height: 0.8rem;
}

/* Docs */

.bodycontent {
Expand Down Expand Up @@ -472,13 +537,17 @@ Custom header styles for default items
/* Styling for inline application help */
/* use in a div or span to avoid having a border, which would happen on img if no src attribute present */
.helpicon {
background: url('./images/circle-question-solid.svg');
width: 1em;
height: 1em;
display: inline-block;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
display: inline-flex;
align-items: center;
justify-content: center;
color: currentcolor;
}

.helpicon-svg {
width: 1em;
height: 1em;
}

button.helpicon {
Expand All @@ -488,14 +557,13 @@ button.helpicon {
padding: 0;
margin: 0;
background-color: transparent;
vertical-align: middle;
line-height: 1;
line-height: 0;
cursor: pointer;
flex: 0 0 auto;
}

body.theme-dark .helpicon {
filter: invert(1) brightness(1.2);
color: var(--page-text);
}

.helplink {
Expand Down Expand Up @@ -587,26 +655,10 @@ body.theme-dark .helpicon {
}

.generator-file-icon {
display: inline-block;
width: 0.8rem;
height: 0.95rem;
width: 1rem;
height: 1rem;
margin-right: 0.4rem;
vertical-align: -0.1rem;
background: var(--panel-bg);
border: 1px solid #d8f3dc;
border-radius: 1px;
position: relative;
}

.generator-file-icon::after {
content: '';
position: absolute;
top: -1px;
right: -1px;
width: 0.28rem;
height: 0.28rem;
background: #74c69d;
clip-path: polygon(100% 0, 0 0, 100% 100%);
vertical-align: -0.2rem;
}

.generator-options-wrapper {
Expand Down Expand Up @@ -860,8 +912,12 @@ body.theme-dark .generator-status-text[data-severity='info'] {
}

.icon-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2rem;
height: 2rem;
padding: 0;
line-height: 1;
color: var(--button-text);
}
Expand Down
Loading