Skip to content

Commit

Permalink
Add filter components to features page (#11)
Browse files Browse the repository at this point in the history 
* Add filter elements, move table to -overview-table.

* Add spacing.

* Fix lint

* Update webstatus-overview-sidebar.ts
  • Loading branch information
@dlaliberte
dlaliberte authored Feb 12, 2024
1 parent 5fe1f6d commit ac918fc
Show file tree
Hide file tree
Showing 7 changed files with 109 additions and 49 deletions.
1 change: 1 addition & 0 deletions frontend/src/static/img/phosphor/assets/icons/list-magnifying-glass.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions frontend/src/static/img/phosphor/assets/icons/square-split-horizontal.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions frontend/src/static/img/shoelace/assets/icons/filter.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions frontend/src/static/img/shoelace/assets/icons/search.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
70 changes: 27 additions & 43 deletions frontend/src/static/js/components/webstatus-overview-content.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,64 +17,48 @@
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`
<div class="main">
<h2>Features overview</h2>
<span class="stats-summary">
<sl-icon library="phosphor" name="list-magnifying-glass"></sl-icon>
1433 features</span
>
<sl-input placeholder="Filter by feature name...">
<sl-icon name="search" slot="prefix"></sl-icon>
</sl-input>
<sl-button
><sl-icon slot="prefix" name="filter"></sl-icon>Filter</sl-button
>
<sl-button>
<sl-icon
slot="prefix"
name="square-split-horizontal"
library="phosphor"
></sl-icon>
</sl-button>
<div class="filters">
<select>
<option value="all">All</option>
<option value="active">Active</option>
<option value="inactive">Inactive</option>
</select>
</div>
<table class="data-table">
<thead>
<tr>
<th>Feature Name</th>
<th>Baseline Status</th>
<th>WPT Scores</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="/features/1">Container queries</a></td>
<td><img height="24" src="/public/img/cross.svg" /></td>
<td>
<img src="/public/img/chrome-dev_24x24.png" /> 100%
<img src="/public/img/firefox-nightly_24x24.png" /> 100%
<img src="/public/img/safari-preview_24x24.png" /> 100%
</td>
</tr>
<tr>
<td><a href="/features/1">Flexbox</a></td>
<td><img height="24" src="/public/img/check.svg" /></td>
<td>
<img src="/public/img/chrome-dev_24x24.png" /> 100%
<img src="/public/img/firefox-nightly_24x24.png" /> 100%
<img src="/public/img/safari-preview_24x24.png" /> 100%
</td>
</tr>
<tr>
<td><a href="/features/1">Grid</a></td>
<td><img height="24" src="/public/img/cross.svg" /></td>
<td>
<img src="/public/img/chrome-dev_24x24.png" /> 100%
<img src="/public/img/firefox-nightly_24x24.png" /> 100%
<img src="/public/img/safari-preview_24x24.png" /> 100%
</td>
</tr>
</tbody>
</table>
<webstatus-overview-table></webstatus-overview-table>
<button>Modify Columns</button>
</div>
`
Expand Down
57 changes: 57 additions & 0 deletions frontend/src/static/js/components/webstatus-overview-table.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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`
<table class="data-table">
<thead>
<tr>
<th>Feature Name</th>
<th>Baseline Status</th>
<th>WPT Scores</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="/features/1">Container queries</a></td>
<td><img height="24" src="/public/img/cross.svg" /></td>
<td>
<img src="/public/img/chrome-dev_24x24.png" /> 100%
<img src="/public/img/firefox-nightly_24x24.png" /> 100%
<img src="/public/img/safari-preview_24x24.png" /> 100%
</td>
</tr>
<tr>
<td><a href="/features/1">Flexbox</a></td>
<td><img height="24" src="/public/img/check.svg" /></td>
<td>
<img src="/public/img/chrome-dev_24x24.png" /> 100%
<img src="/public/img/firefox-nightly_24x24.png" /> 100%
<img src="/public/img/safari-preview_24x24.png" /> 100%
</td>
</tr>
<tr>
<td><a href="/features/1">Grid</a></td>
<td><img height="24" src="/public/img/cross.svg" /></td>
<td>
<img src="/public/img/chrome-dev_24x24.png" /> 100%
<img src="/public/img/firefox-nightly_24x24.png" /> 100%
<img src="/public/img/safari-preview_24x24.png" /> 100%
</td>
</tr>
</tbody>
</table>
`
}
}
23 changes: 17 additions & 6 deletions frontend/src/static/js/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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`
})

0 comments on commit ac918fc

Please sign in to comment.