diff --git a/flightscore/src/components/icons.ts b/flightscore/src/components/icons.ts index 2c0cd61..34b9ee6 100644 --- a/flightscore/src/components/icons.ts +++ b/flightscore/src/components/icons.ts @@ -13,6 +13,7 @@ export class Icons { mail: html``, desktop: html``, tools: html``, + map: html``, map_pin: html``, clock: html``, table: html``, @@ -23,5 +24,12 @@ export class Icons { document_text: html``, bin: html``, stack: html``, + visible: html``, + hide: html``, + folder: html``, + warning: html``, + info: html``, + error: html``, + success: html``, }; } diff --git a/flightscore/src/components/notify-bar.ts b/flightscore/src/components/notify-bar.ts index b4276ee..3676ae8 100644 --- a/flightscore/src/components/notify-bar.ts +++ b/flightscore/src/components/notify-bar.ts @@ -1,9 +1,10 @@ -import { LitElement, html, css } from 'lit'; -import { customElement, property } from 'lit/decorators.js'; +import { LitElement, html, css } from "lit"; +import { customElement, property } from "lit/decorators.js"; +import { Icons } from "./icons"; -export type NotificationType = 'success' | 'warning' | 'error'; +export type NotificationType = "success" | "warning" | "error" | "info"; -@customElement('notify-bar') +@customElement("notify-bar") export class NotifyBar extends LitElement { static styles = css` :host { @@ -87,57 +88,56 @@ export class NotifyBar extends LitElement { background: color-mix(in srgb, #30a46c 8%, transparent); border-color: color-mix(in srgb, #30a46c 25%, transparent); } + + .bar.info { + color: var(--color-accent); + background: color-mix(in srgb, var(--color-accent) 8%, transparent); + border-color: color-mix(in srgb, var(--color-accent) 25%, transparent); + } `; - @property() type: NotificationType = 'error'; + @property() type: NotificationType = "error"; @property() message: string | null = null; @property({ type: Boolean }) dismissible = true; private dismiss() { this.message = null; this.dispatchEvent( - new CustomEvent('dismissed', { bubbles: true, composed: true }) + new CustomEvent("dismissed", { bubbles: true, composed: true }), ); this.requestUpdate(); } private renderIcon() { - if (this.type === 'error') { - return html` - - - - - - `; + if (this.type === "error") { + return Icons.icons.error; } - if (this.type === 'warning') { - return html` - - - - - - `; + if (this.type === "warning") { + return Icons.icons.warning; } - return html` - - - - - `; + if (this.type === "info") { + return Icons.icons.info; + } + return Icons.icons.success; } render() { if (!this.message) return null; return html`
- ${this.renderIcon()} + ${this.renderIcon()} ${this.message} ${this.dismissible ? html`
`; } -} \ No newline at end of file +} diff --git a/flightscore/src/pages/dev-page.ts b/flightscore/src/pages/dev-page.ts index bc62bee..857fde3 100644 --- a/flightscore/src/pages/dev-page.ts +++ b/flightscore/src/pages/dev-page.ts @@ -1,23 +1,24 @@ -import { LitElement, html, css } from 'lit'; -import { customElement, state } from 'lit/decorators.js'; -import '../components/ui-button'; -import '../components/ui-button-secondary'; -import '../components/ui-badge'; -import '../components/ui-card'; -import '../components/card-backdrop'; -import '../components/card-header'; -import '../components/auth-card'; -import '../components/stat-card'; -import '../components/icon-card'; -import '../components/form-input'; -import '../components/horizontal-divider'; -import '../components/notify-bar'; -import '../components/ui-link'; -import '../components/circle-chart'; -import '../components/loading-bar'; -import '../components/line-chart'; +import { LitElement, html, css } from "lit"; +import { customElement, state } from "lit/decorators.js"; +import "../components/ui-button"; +import "../components/ui-button-secondary"; +import "../components/ui-badge"; +import "../components/ui-card"; +import "../components/card-backdrop"; +import "../components/card-header"; +import "../components/auth-card"; +import "../components/stat-card"; +import "../components/icon-card"; +import "../components/form-input"; +import "../components/horizontal-divider"; +import "../components/notify-bar"; +import "../components/ui-link"; +import "../components/circle-chart"; +import "../components/loading-bar"; +import "../components/line-chart"; +import { Icons } from "../components/icons"; -@customElement('dev-page') +@customElement("dev-page") export class DevPage extends LitElement { static styles = css` :host { @@ -171,7 +172,7 @@ export class DevPage extends LitElement { } `; - @state() inputValue = ''; + @state() inputValue = ""; @state() notifyVisible = true; render() { @@ -179,9 +180,7 @@ export class DevPage extends LitElement {

Component Library

-

- All available UI components with variants and states -

+

All available UI components with variants and states

@@ -232,9 +231,7 @@ export class DevPage extends LitElement { With Icon - - Disabled - + Disabled
Secondary Full Width
@@ -262,50 +259,15 @@ export class DevPage extends LitElement {
With Icon
- - - - - + ${Icons.icons.stack} Platform - - - - + ${Icons.icons.success} Live - - - - - + ${Icons.icons.error} Offline
@@ -320,6 +282,10 @@ export class DevPage extends LitElement {
Types
+
Live Value
- + Current value: "${this.inputValue}"
@@ -404,22 +372,10 @@ export class DevPage extends LitElement {
Grid
- - - - + + + +
@@ -436,35 +392,13 @@ export class DevPage extends LitElement { heading="Real-Time Scoring" description="Scores update live as judges submit results." > - - - - + ${Icons.icons.clock} - - - - + ${Icons.icons.map_pin}
@@ -486,8 +420,8 @@ export class DevPage extends LitElement {

- This is the default card layout with a header - component inside. + This is the default card layout with a header component + inside.

Action @@ -584,9 +518,21 @@ export class DevPage extends LitElement {
Variants
- - - + + +
Sizes
@@ -596,12 +542,15 @@ export class DevPage extends LitElement {
Indeterminate
- +
-

Line Chart

@@ -618,8 +567,8 @@ export class DevPage extends LitElement { showArea .series=${[ { - label: 'Pilot A', - color: 'var(--color-accent)', + label: "Pilot A", + color: "var(--color-accent)", points: [ { x: 0, y: 20 }, { x: 1, y: 420 }, @@ -631,8 +580,8 @@ export class DevPage extends LitElement { ], }, { - label: 'Pilot B', - color: '#30a46c', + label: "Pilot B", + color: "#30a46c", points: [ { x: 1, y: 380 }, { x: 2, y: 450 }, @@ -654,7 +603,6 @@ export class DevPage extends LitElement {
-

Circle Chart

@@ -664,19 +612,19 @@ export class DevPage extends LitElement {
Example
+ heading="Pilots by Category" + centerText="Pilots" + .segments=${[ + { label: "Sport", value: 124, color: "var(--color-accent)" }, + { label: "Serial", value: 89, color: "#30a46c" }, + { label: "Open", value: 47, color: "#e79d13" }, + { label: "Tandem", value: 18, color: "#e5484d" }, + ]} + >
`; } -} \ No newline at end of file +}