WIP: Remove fluent ui
This commit is contained in:
parent
358f2ef1ef
commit
bb21cffd6b
GPG key ID:
8FF12381C6C90D35
8 changed files with 61 additions and 232 deletions
|
|
@ -8,31 +8,24 @@
|
|||
|
||||
<base href="/" />
|
||||
|
||||
<!-- This meta viewport ensures the webpage's dimensions change according to the device it's on. This is called Responsive Web Design.-->
|
||||
<meta name="viewport"
|
||||
content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
|
||||
<meta name="description" content="An interval timer" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
|
||||
<!-- These meta tags are Apple-specific, and set the web application to run in full-screen mode with a black status bar. Learn more at https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html-->
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
<meta name="apple-mobile-web-app-title" content="Trainterval" />
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
|
||||
|
||||
<!-- Imports an icon to represent the document. -->
|
||||
<link rel="icon" href="/assets/icons/24x24-icon.png" type="image/x-icon" />
|
||||
|
||||
<!-- Imports the manifest to represent the web application. A web app must have a manifest to be a PWA. -->
|
||||
<link rel="manifest" href="/manifest.json" />
|
||||
|
||||
<script type="module" src="/src/app-index.ts"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Our app-index web component. This component is defined in src/pages/app-index.ts-->
|
||||
<fluent-design-system-provider>
|
||||
<app-index></app-index>
|
||||
</fluent-design-system-provider>
|
||||
|
||||
<script>
|
||||
if ('serviceWorker' in navigator) {
|
||||
|
|
|
|||
125
package-lock.json
generated
125
package-lock.json
generated
|
|
@ -9,7 +9,6 @@
|
|||
"version": "0.0.1",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@fluentui/web-components": "^2.5.16",
|
||||
"@vaadin/router": "^1.7.5",
|
||||
"idb": "^8.0.0",
|
||||
"lit": "^3.1.0",
|
||||
|
|
@ -1982,18 +1981,6 @@
|
|||
"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@fluentui/web-components": {
|
||||
"version": "2.5.16",
|
||||
"resolved": "https://registry.npmjs.org/@fluentui/web-components/-/web-components-2.5.16.tgz",
|
||||
"integrity": "sha512-Ur+DziCm2FtvQoRjx62DH069uTz/HTq0gk9uKmW8K7bmxCS7fYYpV9GFEnK7QdEbdRHyUINE3uFfLEcL6IY3Xg==",
|
||||
"dependencies": {
|
||||
"@microsoft/fast-colors": "^5.3.0",
|
||||
"@microsoft/fast-element": "^1.11.1",
|
||||
"@microsoft/fast-foundation": "^2.48.1",
|
||||
"@microsoft/fast-web-utilities": "^5.4.0",
|
||||
"tslib": "^2.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@humanwhocodes/config-array": {
|
||||
"version": "0.11.13",
|
||||
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.13.tgz",
|
||||
|
|
@ -2113,40 +2100,6 @@
|
|||
"@lit-labs/ssr-dom-shim": "^1.1.2-pre.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@microsoft/fast-colors": {
|
||||
"version": "5.3.1",
|
||||
"resolved": "https://registry.npmjs.org/@microsoft/fast-colors/-/fast-colors-5.3.1.tgz",
|
||||
"integrity": "sha512-72RZXVfCbwQzvo5sXXkuLXLT7rMeYaSf5r/6ewQiv/trBtqpWRm4DEH2EilHw/iWTBKOXs1qZNQndgUMa5n4LA=="
|
||||
},
|
||||
"node_modules/@microsoft/fast-element": {
|
||||
"version": "1.12.0",
|
||||
"resolved": "https://registry.npmjs.org/@microsoft/fast-element/-/fast-element-1.12.0.tgz",
|
||||
"integrity": "sha512-gQutuDHPKNxUEcQ4pypZT4Wmrbapus+P9s3bR/SEOLsMbNqNoXigGImITygI5zhb+aA5rzflM6O8YWkmRbGkPA=="
|
||||
},
|
||||
"node_modules/@microsoft/fast-foundation": {
|
||||
"version": "2.49.2",
|
||||
"resolved": "https://registry.npmjs.org/@microsoft/fast-foundation/-/fast-foundation-2.49.2.tgz",
|
||||
"integrity": "sha512-xA7WP/Td33SW0zkpHRH5LUDxyLOPnPQQXieRxc080uLWxoGXhVxo6Rz7b6qwiL+e2IadNCm7X7KcrgsUhJwvBg==",
|
||||
"dependencies": {
|
||||
"@microsoft/fast-element": "^1.12.0",
|
||||
"@microsoft/fast-web-utilities": "^5.4.1",
|
||||
"tabbable": "^5.2.0",
|
||||
"tslib": "^1.13.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@microsoft/fast-foundation/node_modules/tslib": {
|
||||
"version": "1.14.1",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
|
||||
"integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
|
||||
},
|
||||
"node_modules/@microsoft/fast-web-utilities": {
|
||||
"version": "5.4.1",
|
||||
"resolved": "https://registry.npmjs.org/@microsoft/fast-web-utilities/-/fast-web-utilities-5.4.1.tgz",
|
||||
"integrity": "sha512-ReWYncndjV3c8D8iq9tp7NcFNc1vbVHvcBFPME2nNFKNbS1XCesYZGlIlf3ot5EmuOXPlrzUHOWzQ2vFpIkqDg==",
|
||||
"dependencies": {
|
||||
"exenv-es6": "^1.1.1"
|
||||
}
|
||||
},
|
||||
"node_modules/@nodelib/fs.scandir": {
|
||||
"version": "2.1.5",
|
||||
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
|
||||
|
|
@ -4141,11 +4094,6 @@
|
|||
"url": "https://github.com/sponsors/isaacs"
|
||||
}
|
||||
},
|
||||
"node_modules/exenv-es6": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/exenv-es6/-/exenv-es6-1.1.1.tgz",
|
||||
"integrity": "sha512-vlVu3N8d6yEMpMsEm+7sUBAI81aqYYuEvfK0jNqmdb/OPXzzH7QWDDnVjMvDSY47JdHEqx/dfC/q8WkfoTmpGQ=="
|
||||
},
|
||||
"node_modules/fast-deep-equal": {
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
|
||||
|
|
@ -6393,11 +6341,6 @@
|
|||
"integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/tabbable": {
|
||||
"version": "5.3.3",
|
||||
"resolved": "https://registry.npmjs.org/tabbable/-/tabbable-5.3.3.tgz",
|
||||
"integrity": "sha512-QD9qKY3StfbZqWOPLp0++pOrAVb/HbUi5xCc8cUo4XjP19808oaMiDzn0leBY5mCespIBM0CIZePzZjgzR83kA=="
|
||||
},
|
||||
"node_modules/temp-dir": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-2.0.0.tgz",
|
||||
|
|
@ -6548,11 +6491,6 @@
|
|||
"typescript": ">=4.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/tslib": {
|
||||
"version": "2.6.2",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
|
||||
"integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
|
||||
},
|
||||
"node_modules/type-check": {
|
||||
"version": "0.4.0",
|
||||
"resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
|
||||
|
|
@ -8628,18 +8566,6 @@
|
|||
"integrity": "sha512-qQfo2mxH5yVom1kacMtZZJFVdW+E70mqHMJvVg6WTLo+VBuQJ4TojZlfWBjK0ve5BdEeNAVxOsl/nvNMpJOaJA==",
|
||||
"dev": true
|
||||
},
|
||||
"@fluentui/web-components": {
|
||||
"version": "2.5.16",
|
||||
"resolved": "https://registry.npmjs.org/@fluentui/web-components/-/web-components-2.5.16.tgz",
|
||||
"integrity": "sha512-Ur+DziCm2FtvQoRjx62DH069uTz/HTq0gk9uKmW8K7bmxCS7fYYpV9GFEnK7QdEbdRHyUINE3uFfLEcL6IY3Xg==",
|
||||
"requires": {
|
||||
"@microsoft/fast-colors": "^5.3.0",
|
||||
"@microsoft/fast-element": "^1.11.1",
|
||||
"@microsoft/fast-foundation": "^2.48.1",
|
||||
"@microsoft/fast-web-utilities": "^5.4.0",
|
||||
"tslib": "^2.1.0"
|
||||
}
|
||||
},
|
||||
"@humanwhocodes/config-array": {
|
||||
"version": "0.11.13",
|
||||
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.13.tgz",
|
||||
|
|
@ -8734,42 +8660,6 @@
|
|||
"@lit-labs/ssr-dom-shim": "^1.1.2-pre.0"
|
||||
}
|
||||
},
|
||||
"@microsoft/fast-colors": {
|
||||
"version": "5.3.1",
|
||||
"resolved": "https://registry.npmjs.org/@microsoft/fast-colors/-/fast-colors-5.3.1.tgz",
|
||||
"integrity": "sha512-72RZXVfCbwQzvo5sXXkuLXLT7rMeYaSf5r/6ewQiv/trBtqpWRm4DEH2EilHw/iWTBKOXs1qZNQndgUMa5n4LA=="
|
||||
},
|
||||
"@microsoft/fast-element": {
|
||||
"version": "1.12.0",
|
||||
"resolved": "https://registry.npmjs.org/@microsoft/fast-element/-/fast-element-1.12.0.tgz",
|
||||
"integrity": "sha512-gQutuDHPKNxUEcQ4pypZT4Wmrbapus+P9s3bR/SEOLsMbNqNoXigGImITygI5zhb+aA5rzflM6O8YWkmRbGkPA=="
|
||||
},
|
||||
"@microsoft/fast-foundation": {
|
||||
"version": "2.49.2",
|
||||
"resolved": "https://registry.npmjs.org/@microsoft/fast-foundation/-/fast-foundation-2.49.2.tgz",
|
||||
"integrity": "sha512-xA7WP/Td33SW0zkpHRH5LUDxyLOPnPQQXieRxc080uLWxoGXhVxo6Rz7b6qwiL+e2IadNCm7X7KcrgsUhJwvBg==",
|
||||
"requires": {
|
||||
"@microsoft/fast-element": "^1.12.0",
|
||||
"@microsoft/fast-web-utilities": "^5.4.1",
|
||||
"tabbable": "^5.2.0",
|
||||
"tslib": "^1.13.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"tslib": {
|
||||
"version": "1.14.1",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
|
||||
"integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"@microsoft/fast-web-utilities": {
|
||||
"version": "5.4.1",
|
||||
"resolved": "https://registry.npmjs.org/@microsoft/fast-web-utilities/-/fast-web-utilities-5.4.1.tgz",
|
||||
"integrity": "sha512-ReWYncndjV3c8D8iq9tp7NcFNc1vbVHvcBFPME2nNFKNbS1XCesYZGlIlf3ot5EmuOXPlrzUHOWzQ2vFpIkqDg==",
|
||||
"requires": {
|
||||
"exenv-es6": "^1.1.1"
|
||||
}
|
||||
},
|
||||
"@nodelib/fs.scandir": {
|
||||
"version": "2.1.5",
|
||||
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
|
||||
|
|
@ -10128,11 +10018,6 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"exenv-es6": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/exenv-es6/-/exenv-es6-1.1.1.tgz",
|
||||
"integrity": "sha512-vlVu3N8d6yEMpMsEm+7sUBAI81aqYYuEvfK0jNqmdb/OPXzzH7QWDDnVjMvDSY47JdHEqx/dfC/q8WkfoTmpGQ=="
|
||||
},
|
||||
"fast-deep-equal": {
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
|
||||
|
|
@ -11764,11 +11649,6 @@
|
|||
"integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
|
||||
"dev": true
|
||||
},
|
||||
"tabbable": {
|
||||
"version": "5.3.3",
|
||||
"resolved": "https://registry.npmjs.org/tabbable/-/tabbable-5.3.3.tgz",
|
||||
"integrity": "sha512-QD9qKY3StfbZqWOPLp0++pOrAVb/HbUi5xCc8cUo4XjP19808oaMiDzn0leBY5mCespIBM0CIZePzZjgzR83kA=="
|
||||
},
|
||||
"temp-dir": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-2.0.0.tgz",
|
||||
|
|
@ -11880,11 +11760,6 @@
|
|||
"dev": true,
|
||||
"requires": {}
|
||||
},
|
||||
"tslib": {
|
||||
"version": "2.6.2",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
|
||||
"integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
|
||||
},
|
||||
"type-check": {
|
||||
"version": "0.4.0",
|
||||
"resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
|
||||
|
|
|
|||
|
|
@ -6,9 +6,7 @@
|
|||
"scripts": {
|
||||
"build": "tsc && vite build",
|
||||
"coverage": "vitest --coverage",
|
||||
"deploy": " npx @azure/static-web-apps-cli login --no-use-keychain && npx @azure/static-web-apps-cli deploy",
|
||||
"dev": "npx @azure/static-web-apps-cli start http://localhost:3000 --run \"npm run dev-server\"",
|
||||
"dev-server": "vite --open",
|
||||
"dev": "vite --open",
|
||||
"dev-task": "vite",
|
||||
"lint": "eslint src/**/*.ts",
|
||||
"start": "npm run dev",
|
||||
|
|
@ -18,7 +16,6 @@
|
|||
"author": "",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@fluentui/web-components": "^2.5.16",
|
||||
"@vaadin/router": "^1.7.5",
|
||||
"idb": "^8.0.0",
|
||||
"lit": "^3.1.0",
|
||||
|
|
|
|||
|
|
@ -128,15 +128,15 @@ export class ActiveTimer extends LitElement {
|
|||
<p class="phase">${this.timerState.phase}</p>
|
||||
<p class="time">${durationString(this.timerState.timeRemaining)}</p>
|
||||
<div class="controls">
|
||||
<fluent-button appearance="stealth" @click=${this.goBack}>
|
||||
<button @click=${this.goBack}>
|
||||
<back-icon></back-icon>
|
||||
</fluent-button>
|
||||
<fluent-button appearance="stealth" @click=${this.toggleActiveState}>
|
||||
</button>
|
||||
<button @click=${this.toggleActiveState}>
|
||||
${this.toggleIcon()}
|
||||
</fluent-button>
|
||||
<fluent-button appearance="stealth" @click=${this.goForward}>
|
||||
</button>
|
||||
<button @click=${this.goForward}>
|
||||
<forward-icon></forward-icon>
|
||||
</fluent-button>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<footer>
|
||||
|
|
|
|||
|
|
@ -32,10 +32,6 @@ export class AppHeader extends LitElement {
|
|||
font-weight: bold;
|
||||
}
|
||||
|
||||
nav fluent-anchor {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
#menu-button-block {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
|
@ -49,12 +45,6 @@ export class AppHeader extends LitElement {
|
|||
.spacer {
|
||||
width: 1em;
|
||||
}
|
||||
|
||||
@media(prefers-color-scheme: light) {
|
||||
nav fluent-anchor::part(control) {
|
||||
color: initial;
|
||||
}
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
|
|
@ -74,9 +64,9 @@ export class AppHeader extends LitElement {
|
|||
return html`
|
||||
<header>
|
||||
<div id="menu-button-block">
|
||||
<fluent-button appearance="stealth" @click="${this.toggleSidebar}">
|
||||
<button @click="${this.toggleSidebar}">
|
||||
<navigation-icon></navigation-icon>
|
||||
</fluent-button>
|
||||
</button>
|
||||
<div class="spacer"></div>
|
||||
<h1>${this.apptitle || 'Trainterval'}</h1>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -19,10 +19,6 @@ export class AppSidebar extends LitElement {
|
|||
header {
|
||||
color: black;
|
||||
}
|
||||
|
||||
nav fluent-anchor::part(control) {
|
||||
color: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-content {
|
||||
|
|
@ -44,11 +40,6 @@ export class AppSidebar extends LitElement {
|
|||
padding: 1em;
|
||||
}
|
||||
|
||||
fluent-listbox {
|
||||
flex-grow: 1;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.visible .sidebar-content {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
|
@ -67,26 +58,9 @@ export class AppSidebar extends LitElement {
|
|||
.visible .overlay {
|
||||
display: block;
|
||||
}
|
||||
|
||||
fluent-option {
|
||||
--design-unit: 6;
|
||||
}
|
||||
|
||||
fluent-button {
|
||||
--design-unit: 6;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
fluent-button::part(control) {
|
||||
justify-content: start;
|
||||
width: 100%;
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
@query('fluent-button')
|
||||
fButton?: HTMLElement;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
|
@ -117,23 +91,23 @@ export class AppSidebar extends LitElement {
|
|||
<div class="overlay" @click="${this.toggleVisibility}"></div>
|
||||
<div class="sidebar-content">
|
||||
<h3>Trainterval</h3>
|
||||
<fluent-listbox>
|
||||
<ul>
|
||||
${this.timers?.map(timer => {
|
||||
return html`
|
||||
<fluent-option
|
||||
<li
|
||||
@click=${() => this.selectTimer(timer.id!)}
|
||||
selected=${timer.id === this.selectedTimer}
|
||||
value=${timer.name}>
|
||||
${timer.name}<br />${timer.description || ''}
|
||||
</fluent-option>
|
||||
</li>
|
||||
`;
|
||||
})}
|
||||
</fluent-listbox>
|
||||
<fluent-divider></fluent-divider>
|
||||
<fluent-button appearance="stealth" @click="${this.newTimer}">
|
||||
<icon-add slot="start"></icon-add>
|
||||
</ul>
|
||||
<hr />
|
||||
<button @click="${this.newTimer}">
|
||||
<icon-add></icon-add>
|
||||
New Timer
|
||||
</fluent-button>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -119,7 +119,6 @@ export class TimerFormDialog extends LitElement {
|
|||
await this.timerService?.save(timer);
|
||||
this.saving = false;
|
||||
// TODO: Clear form
|
||||
this.toggleVisibility();
|
||||
document.dispatchEvent(new TimerSavedEvent(id))
|
||||
}
|
||||
|
||||
|
|
@ -134,11 +133,10 @@ export class TimerFormDialog extends LitElement {
|
|||
return null;
|
||||
}
|
||||
return html`
|
||||
<fluent-button
|
||||
appearance="outline"
|
||||
<button
|
||||
tabindex="0"
|
||||
@click=${this.delete}
|
||||
style="margin-top: 1em;">Delete</fluent-button>
|
||||
style="margin-top: 1em;">Delete</button>
|
||||
`;
|
||||
}
|
||||
|
||||
|
|
@ -169,71 +167,69 @@ export class TimerFormDialog extends LitElement {
|
|||
type="hidden"
|
||||
name="id"
|
||||
.value=${this.timer?.id?.toString() || ''} />
|
||||
<fluent-text-field
|
||||
<label for="timer-name">Name</label>
|
||||
<input
|
||||
id="timer-name"
|
||||
appearance="outline"
|
||||
type="text"
|
||||
placeholder="My Timer"
|
||||
.value=${this.timer?.name || ''}>Name</fluent-text-field>
|
||||
<fluent-text-area
|
||||
.value=${this.timer?.name || ''}/ >
|
||||
<label for="timer-description">Description</label>
|
||||
<textarea
|
||||
id="timer-description"
|
||||
appearance="outline"
|
||||
placeholder="More details"
|
||||
.value=${this.timer?.description || ''}>Description</fluent-text-area>
|
||||
<fluent-text-field
|
||||
.value=${this.timer?.description || ''}></textarea>
|
||||
<label for="timer-warmup">Warm-up</label>
|
||||
<input
|
||||
id="timer-warmup"
|
||||
appearance="outline"
|
||||
placeholder="05:00"
|
||||
pattern="${this.durationPattern}"
|
||||
.value=${this.durationString(this.timer?.warmUp)}>Warm Up</fluent-text-field>
|
||||
<fluent-text-field
|
||||
.value=${this.durationString(this.timer?.warmUp)} />
|
||||
<label for="timer-low">Low Intensity</label>
|
||||
<input
|
||||
id="timer-low"
|
||||
appearance="outline"
|
||||
placeholder="00:30"
|
||||
pattern="${this.durationPattern}"
|
||||
.value=${this.durationString(this.timer?.lowIntensity)}>Low Intensity</fluent-text-field>
|
||||
<fluent-text-field
|
||||
.value=${this.durationString(this.timer?.lowIntensity)}>
|
||||
<label for="timer-hi">High Intensity</label>
|
||||
<input
|
||||
id="timer-hi"
|
||||
appearance="outline"
|
||||
placeholder="01:00"
|
||||
pattern="${this.durationPattern}"
|
||||
.value=${this.durationString(this.timer?.highIntensity)}>High Intensity</fluent-text-field>
|
||||
<fluent-text-field
|
||||
.value=${this.durationString(this.timer?.highIntensity)}>
|
||||
<label for="timer-rest">Rest</label>
|
||||
<input
|
||||
id="timer-rest"
|
||||
appearance="outline"
|
||||
placeholder="01:00"
|
||||
pattern="${this.durationPattern}"
|
||||
.value=${this.durationString(this.timer?.rest)}>Rest</fluent-text-field>
|
||||
<fluent-text-field
|
||||
.value=${this.durationString(this.timer?.rest)}>
|
||||
<label for="timer-cool">Cooldown</label>
|
||||
<input
|
||||
id="timer-cool"
|
||||
appearance="outline"
|
||||
placeholder="05:00"
|
||||
pattern="${this.durationPattern}"
|
||||
.value=${this.durationString(this.timer?.coolDown)}>Cooldown</fluent-text-field>
|
||||
<fluent-text-field
|
||||
.value=${this.durationString(this.timer?.coolDown)}>
|
||||
<label for="timer-sets">Sets</label>
|
||||
<input
|
||||
id="timer-sets"
|
||||
appearance="outline"
|
||||
placeholder="4"
|
||||
.value=${this.timer?.sets}>Sets</fluent-text-field>
|
||||
<fluent-text-field
|
||||
.value=${this.timer?.sets}>
|
||||
<label for="timer-rounds">Rounds</label>
|
||||
<input
|
||||
id="timer-rounds"
|
||||
appearance="outline"
|
||||
placeholder="2"
|
||||
.value=${this.timer?.rounds}>Rounds</fluent-text-field>
|
||||
<fluent-button
|
||||
appearance="accent"
|
||||
.value=${this.timer?.rounds}>
|
||||
<button
|
||||
tabindex="0"
|
||||
@click=${this.save}
|
||||
style="margin: 1em 0;">Save</fluent-button>
|
||||
<fluent-button appearance="outline" tabindex="0" @click=${this.toggleVisibility}>Cancel</fluent-button>
|
||||
style="margin: 1em 0;">Save</button>
|
||||
<button tabindex="0" @click=${this.toggleVisibility}>Cancel</button>
|
||||
${this.deleteButton()}
|
||||
</form>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
return html`
|
||||
<fluent-dialog ?hidden=${!this.visible} trap-focus modal class=${this.timer?.id ? 'tall' : ''}>
|
||||
${body}
|
||||
</fluent-dialog>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,6 +12,9 @@ export class AppHome extends LitElement {
|
|||
@property({ type: Number }) editTimer?: number;
|
||||
private timerService?: TimerService;
|
||||
|
||||
@query('dialog')
|
||||
dialog: HTMLElement | null | undefined;
|
||||
|
||||
static get styles() {
|
||||
return css`
|
||||
main {
|
||||
|
|
@ -64,6 +67,7 @@ export class AppHome extends LitElement {
|
|||
if (!this.selectedTimer) {
|
||||
this.selectedTimer = this.timers[0]?.id;
|
||||
}
|
||||
dialog.close()
|
||||
}
|
||||
|
||||
private editButton() {
|
||||
|
|
@ -71,7 +75,7 @@ export class AppHome extends LitElement {
|
|||
return null;
|
||||
}
|
||||
return html`
|
||||
<fluent-button appearance="stealth" slot="actions" @click=${() => this.editTimer = this.selectedTimer}>Edit</fluent-button>
|
||||
<button @click=${() => this.editTimer = this.selectedTimer}>Edit</button>
|
||||
`;
|
||||
}
|
||||
|
||||
|
|
@ -87,11 +91,10 @@ export class AppHome extends LitElement {
|
|||
<div class="timer-wrapper">
|
||||
<p>
|
||||
Create a timer to begin<br />
|
||||
<fluent-button
|
||||
appearance="stealth"
|
||||
<button
|
||||
@click=${() => this.editTimer = -1}>
|
||||
New Timer
|
||||
</fluent-button>
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -107,12 +110,13 @@ export class AppHome extends LitElement {
|
|||
@selecttimer=${(e: SelectTimerEvent) => this.selectedTimer = e.timerId}>
|
||||
${this.editButton()}
|
||||
</app-header>
|
||||
${body}
|
||||
<dialog>
|
||||
<timer-form-dialog
|
||||
?visible=${this.editTimer !== undefined}
|
||||
.timerService=${this.timerService}
|
||||
.timer=${this.editTimer === timer?.id ? timer : null}
|
||||
@close=${this.closeEditor}></timer-form-dialog>
|
||||
</dialog>
|
||||
${body}
|
||||
</main>
|
||||
`;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue