From ac918fc7a05342646d4fccc2d44626c3876c9d97 Mon Sep 17 00:00:00 2001 From: Daniel LaLiberte Date: Mon, 12 Feb 2024 13:24:56 -0500 Subject: [PATCH] Add filter components to features page (#11) * Add filter elements, move table to -overview-table. * Add spacing. * Fix lint * Update webstatus-overview-sidebar.ts --- .../assets/icons/list-magnifying-glass.svg | 1 + .../assets/icons/square-split-horizontal.svg | 1 + .../img/shoelace/assets/icons/filter.svg | 3 + .../img/shoelace/assets/icons/search.svg | 3 + .../components/webstatus-overview-content.ts | 70 +++++++------------ .../js/components/webstatus-overview-table.ts | 57 +++++++++++++++ frontend/src/static/js/index.ts | 23 ++++-- 7 files changed, 109 insertions(+), 49 deletions(-) create mode 100644 frontend/src/static/img/phosphor/assets/icons/list-magnifying-glass.svg create mode 100644 frontend/src/static/img/phosphor/assets/icons/square-split-horizontal.svg create mode 100644 frontend/src/static/img/shoelace/assets/icons/filter.svg create mode 100644 frontend/src/static/img/shoelace/assets/icons/search.svg diff --git a/frontend/src/static/img/phosphor/assets/icons/list-magnifying-glass.svg b/frontend/src/static/img/phosphor/assets/icons/list-magnifying-glass.svg new file mode 100644 index 00000000..1398a2a6 --- /dev/null +++ b/frontend/src/static/img/phosphor/assets/icons/list-magnifying-glass.svg @@ -0,0 +1 @@ + diff --git a/frontend/src/static/img/phosphor/assets/icons/square-split-horizontal.svg b/frontend/src/static/img/phosphor/assets/icons/square-split-horizontal.svg new file mode 100644 index 00000000..ca723d38 --- /dev/null +++ b/frontend/src/static/img/phosphor/assets/icons/square-split-horizontal.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/static/img/shoelace/assets/icons/filter.svg b/frontend/src/static/img/shoelace/assets/icons/filter.svg new file mode 100644 index 00000000..555c6125 --- /dev/null +++ b/frontend/src/static/img/shoelace/assets/icons/filter.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/frontend/src/static/img/shoelace/assets/icons/search.svg b/frontend/src/static/img/shoelace/assets/icons/search.svg new file mode 100644 index 00000000..d3dc7ca1 --- /dev/null +++ b/frontend/src/static/img/shoelace/assets/icons/search.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/frontend/src/static/js/components/webstatus-overview-content.ts b/frontend/src/static/js/components/webstatus-overview-content.ts index 4ceca0b8..cb20ab77 100644 --- a/frontend/src/static/js/components/webstatus-overview-content.ts +++ b/frontend/src/static/js/components/webstatus-overview-content.ts @@ -17,19 +17,39 @@ import { LitElement, type TemplateResult, css, html } from 'lit' import { customElement } from 'lit/decorators.js' +import './webstatus-overview-table.js' + @customElement('webstatus-overview-content') export class WebstatusOverviewContent extends LitElement { static styles = css` - .data-table { - width: 100%; - } - th { - text-align: left; + .stats-summary { + color: #6c7381; } ` + render(): TemplateResult { return html`
+

Features overview

+ + + 1433 features + + + + + Filter + + + +
- - - - - - - - - - - - - - - - - - - - - - - - - -
Feature NameBaseline StatusWPT Scores
Container queries - 100% - 100% - 100% -
Flexbox - 100% - 100% - 100% -
Grid - 100% - 100% - 100% -
+ +
` diff --git a/frontend/src/static/js/components/webstatus-overview-table.ts b/frontend/src/static/js/components/webstatus-overview-table.ts index 4a08202e..57662773 100644 --- a/frontend/src/static/js/components/webstatus-overview-table.ts +++ b/frontend/src/static/js/components/webstatus-overview-table.ts @@ -13,3 +13,60 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +import { LitElement, type TemplateResult, css, html } from 'lit' +import { customElement } from 'lit/decorators.js' + +@customElement('webstatus-overview-table') +export class WebstatusOverviewTable extends LitElement { + static styles = css` + .data-table { + width: 100%; + } + th { + text-align: left; + } + ` + + render(): TemplateResult { + return html` + + + + + + + + + + + + + + + + + + + + + + + + + +
Feature NameBaseline StatusWPT Scores
Container queries + 100% + 100% + 100% +
Flexbox + 100% + 100% + 100% +
Grid + 100% + 100% + 100% +
+ ` + } +} diff --git a/frontend/src/static/js/index.ts b/frontend/src/static/js/index.ts index 832919c5..640978cb 100644 --- a/frontend/src/static/js/index.ts +++ b/frontend/src/static/js/index.ts @@ -14,17 +14,28 @@ * limitations under the License. */ -import './components/webstatus-app.js' - -import '@shoelace-style/shoelace/dist/themes/light.css' +import '@shoelace-style/shoelace/dist/components/button/button.js' +import '@shoelace-style/shoelace/dist/components/divider/divider.js' import '@shoelace-style/shoelace/dist/components/icon/icon.js' +import '@shoelace-style/shoelace/dist/components/icon-button/icon-button.js' +import '@shoelace-style/shoelace/dist/components/input/input.js' +import '@shoelace-style/shoelace/dist/components/option/option.js' +import '@shoelace-style/shoelace/dist/components/select/select.js' import '@shoelace-style/shoelace/dist/components/tree/tree.js' import '@shoelace-style/shoelace/dist/components/tree-item/tree-item.js' -import '@shoelace-style/shoelace/dist/components/divider/divider.js' -import '@shoelace-style/shoelace/dist/components/select/select.js' -import '@shoelace-style/shoelace/dist/components/option/option.js' +import '@shoelace-style/shoelace/dist/themes/light.css' import { setBasePath } from '@shoelace-style/shoelace/dist/utilities/base-path.js' +import { registerIconLibrary } from '@shoelace-style/shoelace/dist/utilities/icon-library.js' + +import './components/webstatus-app.js' // Set the base path to the folder you copied Shoelace's assets to. // Shoelace will prefix icon files with '/assets/icons/'. setBasePath('/public/img/shoelace') + +registerIconLibrary('phosphor', { + mutator: (svg) => { + svg.setAttribute('fill', 'currentColor') + }, + resolver: (name) => `/public/img/phosphor/assets/icons/${name}.svg` +})