mirror of
https://github.com/esphome/esp-web-tools.git
synced 2025-07-18 17:26:35 +00:00
Migrate to Material Web 1 (#474)
* No port pick * Use own components again * Migrate circular progress * Migrate Icon Button * Move button labels to text nodes * Use ew-list for dashboard * Missed one interactive * Migrate select * Migrate textfield * Migrate checkbox/formfield * Remove unused ewt-button * Migrate text field * Divider + dashboard icons * Migrate dialog * Remove mwc components * Clean up icons * Remove old comment * Update connect button * Align top level dialog icon * Avoid scrolling when dialog active * Allow variable for border radius * Cleanup * Bump dependencies * Bump esptool.js to 0.4.1 * Add new device types * Update readme with new device types * Tweak launch button look
This commit is contained in:
Paulus Schoutsen
GitHub
parent
e107f0f5b6
commit
7de3b6a521
29
index.html
29
index.html
@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
@ -79,8 +79,10 @@
|
|||||||
}
|
}
|
||||||
.screenshot img {
|
.screenshot img {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
box-shadow: rgb(0 0 0 / 20%) 0px 2px 1px -1px,
|
box-shadow:
|
||||||
rgb(0 0 0 / 14%) 0px 1px 1px 0px, rgb(0 0 0 / 12%) 0px 1px 3px 0px;
|
rgb(0 0 0 / 20%) 0px 2px 1px -1px,
|
||||||
|
rgb(0 0 0 / 14%) 0px 1px 1px 0px,
|
||||||
|
rgb(0 0 0 / 12%) 0px 1px 3px 0px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
.screenshot i {
|
.screenshot i {
|
||||||
@ -172,7 +174,7 @@
|
|||||||
device to your computer and hit the button:
|
device to your computer and hit the button:
|
||||||
</p>
|
</p>
|
||||||
<esp-web-install-button
|
<esp-web-install-button
|
||||||
manifest="https://firmware.esphome.io/esphome-web/manifest.json"
|
manifest="https://firmware.esphome.io/esp-web-tools/manifest.json"
|
||||||
>
|
>
|
||||||
<i slot="unsupported">
|
<i slot="unsupported">
|
||||||
The demo is not available because your browser does not support Web
|
The demo is not available because your browser does not support Web
|
||||||
@ -266,9 +268,16 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="name">Luciferin</div>
|
<div class="name">Luciferin</div>
|
||||||
</a>
|
</a>
|
||||||
<a href="https://install.openepaperlink.de" target="_blank" class="project">
|
<a
|
||||||
|
href="https://install.openepaperlink.de"
|
||||||
|
target="_blank"
|
||||||
|
class="project"
|
||||||
|
>
|
||||||
<div class="logo">
|
<div class="logo">
|
||||||
<img src="static/logos/openepaperlink.png" alt="OpenEpaperLink logo" />
|
<img
|
||||||
|
src="static/logos/openepaperlink.png"
|
||||||
|
alt="OpenEpaperLink logo"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="name">OpenEpaperLink</div>
|
<div class="name">OpenEpaperLink</div>
|
||||||
</a>
|
</a>
|
||||||
@ -366,7 +375,7 @@
|
|||||||
</p>
|
</p>
|
||||||
<pre>
|
<pre>
|
||||||
<esp-web-install-button
|
<esp-web-install-button
|
||||||
manifest="https://firmware.esphome.io/esphome-web/manifest.json"
|
manifest="https://firmware.esphome.io/esp-web-tools/manifest.json"
|
||||||
></esp-web-install-button></pre
|
></esp-web-install-button></pre
|
||||||
>
|
>
|
||||||
<p>
|
<p>
|
||||||
@ -432,7 +441,8 @@ esptool --chip esp32 merge_bin \
|
|||||||
Manifests describe the firmware that you want to offer the user to
|
Manifests describe the firmware that you want to offer the user to
|
||||||
install. It allows specifying different builds for the different types
|
install. It allows specifying different builds for the different types
|
||||||
of ESP devices. Current supported chip families are
|
of ESP devices. Current supported chip families are
|
||||||
<code>ESP8266</code>, <code>ESP32</code>, <code>ESP32-C3</code>,
|
<code>ESP8266</code>, <code>ESP32</code>, <code>ESP32-C2</code>,
|
||||||
|
<code>ESP32-C3</code>, <code>ESP32-C6</code>, <code>ESP32-H2</code>,
|
||||||
<code>ESP32-S2</code> and <code>ESP32-S3</code>. The correct build will
|
<code>ESP32-S2</code> and <code>ESP32-S3</code>. The correct build will
|
||||||
be automatically selected based on the type of the connected ESP device.
|
be automatically selected based on the type of the connected ESP device.
|
||||||
</p>
|
</p>
|
||||||
@ -526,6 +536,7 @@ button.overrides = {
|
|||||||
<ul>
|
<ul>
|
||||||
<li><code>--esp-tools-button-color</code></li>
|
<li><code>--esp-tools-button-color</code></li>
|
||||||
<li><code>--esp-tools-button-text-color</code></li>
|
<li><code>--esp-tools-button-text-color</code></li>
|
||||||
|
<li><code>--esp-tools-button-border-radius</code></li>
|
||||||
</ul>
|
</ul>
|
||||||
<p>There are also some attributes that can be used for styling:</p>
|
<p>There are also some attributes that can be used for styling:</p>
|
||||||
<table>
|
<table>
|
||||||
@ -549,7 +560,7 @@ button.overrides = {
|
|||||||
</p>
|
</p>
|
||||||
<pre>
|
<pre>
|
||||||
<esp-web-install-button
|
<esp-web-install-button
|
||||||
manifest="https://firmware.esphome.io/esphome-web/manifest.json"
|
manifest="https://firmware.esphome.io/esp-web-tools/manifest.json"
|
||||||
>
|
>
|
||||||
<button slot="activate">Custom install button</button>
|
<button slot="activate">Custom install button</button>
|
||||||
<span slot="unsupported">Ah snap, your browser doesn't work!</span>
|
<span slot="unsupported">Ah snap, your browser doesn't work!</span>
|
||||||
|
|||||||
2021
package-lock.json
generated
2021
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
29
package.json
29
package.json
@ -12,28 +12,23 @@
|
|||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/plugin-proposal-class-properties": "^7.18.6",
|
"@babel/plugin-proposal-class-properties": "^7.18.6",
|
||||||
"@rollup/plugin-babel": "^6.0.4",
|
"@rollup/plugin-babel": "^6.0.4",
|
||||||
"@rollup/plugin-json": "^6.0.1",
|
"@rollup/plugin-commonjs": "^25.0.7",
|
||||||
|
"@rollup/plugin-json": "^6.1.0",
|
||||||
"@rollup/plugin-node-resolve": "^15.2.3",
|
"@rollup/plugin-node-resolve": "^15.2.3",
|
||||||
"@rollup/plugin-typescript": "^11.1.5",
|
|
||||||
"@rollup/plugin-terser": "^0.4.4",
|
"@rollup/plugin-terser": "^0.4.4",
|
||||||
"@types/w3c-web-serial": "^1.0.3",
|
"@rollup/plugin-typescript": "^11.1.6",
|
||||||
"prettier": "^3.0.0",
|
"@types/w3c-web-serial": "^1.0.6",
|
||||||
"rollup": "^4.3.0",
|
"prettier": "^3.2.5",
|
||||||
"serve": "^14.2.0",
|
"rollup": "^4.10.0",
|
||||||
"typescript": "^5.1.3"
|
"serve": "^14.2.1",
|
||||||
|
"typescript": "^5.3.3"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@material/mwc-button": "^0.27.0",
|
"@material/web": "^1.2.0",
|
||||||
"@material/mwc-checkbox": "^0.27.0",
|
"esptool-js": "^0.4.1",
|
||||||
"@material/mwc-circular-progress": "^0.27.0",
|
|
||||||
"@material/mwc-dialog": "^0.27.0",
|
|
||||||
"@material/mwc-formfield": "^0.27.0",
|
|
||||||
"@material/mwc-icon-button": "^0.27.0",
|
|
||||||
"@material/mwc-textfield": "^0.27.0",
|
|
||||||
"esptool-js": "^0.3.2",
|
|
||||||
"improv-wifi-serial-sdk": "^2.5.0",
|
"improv-wifi-serial-sdk": "^2.5.0",
|
||||||
"lit": "^2.8.0",
|
"lit": "^3.1.2",
|
||||||
"pako": "^2.1.0",
|
"pako": "^2.1.0",
|
||||||
"tslib": "^2.5.3"
|
"tslib": "^2.6.2"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -2,6 +2,7 @@ import nodeResolve from "@rollup/plugin-node-resolve";
|
|||||||
import json from "@rollup/plugin-json";
|
import json from "@rollup/plugin-json";
|
||||||
import terser from "@rollup/plugin-terser";
|
import terser from "@rollup/plugin-terser";
|
||||||
import babel from "@rollup/plugin-babel";
|
import babel from "@rollup/plugin-babel";
|
||||||
|
import commonjs from "@rollup/plugin-commonjs";
|
||||||
|
|
||||||
const config = {
|
const config = {
|
||||||
input: "dist/install-button.js",
|
input: "dist/install-button.js",
|
||||||
@ -12,7 +13,11 @@ const config = {
|
|||||||
external: ["https://www.improv-wifi.com/sdk-js/launch-button.js"],
|
external: ["https://www.improv-wifi.com/sdk-js/launch-button.js"],
|
||||||
preserveEntrySignatures: false,
|
preserveEntrySignatures: false,
|
||||||
plugins: [
|
plugins: [
|
||||||
nodeResolve(),
|
commonjs(),
|
||||||
|
nodeResolve({
|
||||||
|
browser: true,
|
||||||
|
preferBuiltins: false,
|
||||||
|
}),
|
||||||
babel({
|
babel({
|
||||||
babelHelpers: "bundled",
|
babelHelpers: "bundled",
|
||||||
plugins: ["@babel/plugin-proposal-class-properties"],
|
plugins: ["@babel/plugin-proposal-class-properties"],
|
||||||
|
|||||||
14
src/components/ew-checkbox.ts
Normal file
14
src/components/ew-checkbox.ts
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
import { Checkbox } from "@material/web/checkbox/internal/checkbox.js";
|
||||||
|
import { styles } from "@material/web/checkbox/internal/checkbox-styles.css.js";
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
interface HTMLElementTagNameMap {
|
||||||
|
"ew-checkbox": EwCheckbox;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export class EwCheckbox extends Checkbox {
|
||||||
|
static override styles = [styles];
|
||||||
|
}
|
||||||
|
|
||||||
|
customElements.define("ew-checkbox", EwCheckbox);
|
||||||
14
src/components/ew-circular-progress.ts
Normal file
14
src/components/ew-circular-progress.ts
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
import { CircularProgress } from "@material/web/progress/internal/circular-progress.js";
|
||||||
|
import { styles } from "@material/web/progress/internal/circular-progress-styles.css.js";
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
interface HTMLElementTagNameMap {
|
||||||
|
"ew-circular-progress": EwCircularProgress;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export class EwCircularProgress extends CircularProgress {
|
||||||
|
static override styles = [styles];
|
||||||
|
}
|
||||||
|
|
||||||
|
customElements.define("ew-circular-progress", EwCircularProgress);
|
||||||
14
src/components/ew-dialog.ts
Normal file
14
src/components/ew-dialog.ts
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
import { Dialog } from "@material/web/dialog/internal/dialog.js";
|
||||||
|
import { styles } from "@material/web/dialog/internal/dialog-styles.css";
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
interface HTMLElementTagNameMap {
|
||||||
|
"ew-dialog": EwDialog;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export class EwDialog extends Dialog {
|
||||||
|
static override styles = [styles];
|
||||||
|
}
|
||||||
|
|
||||||
|
customElements.define("ew-dialog", EwDialog);
|
||||||
14
src/components/ew-divider.ts
Normal file
14
src/components/ew-divider.ts
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
import { Divider } from "@material/web/divider/internal/divider.js";
|
||||||
|
import { styles } from "@material/web/divider/internal/divider-styles.css.js";
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
interface HTMLElementTagNameMap {
|
||||||
|
"ew-divider": EwDivider;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export class EwDivider extends Divider {
|
||||||
|
static override styles = [styles];
|
||||||
|
}
|
||||||
|
|
||||||
|
customElements.define("ew-divider", EwDivider);
|
||||||
15
src/components/ew-filled-select.ts
Normal file
15
src/components/ew-filled-select.ts
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
import { FilledSelect } from "@material/web/select/internal/filled-select.js";
|
||||||
|
import { styles } from "@material/web/select/internal/filled-select-styles.css.js";
|
||||||
|
import { styles as sharedStyles } from "@material/web/select/internal/shared-styles.css.js";
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
interface HTMLElementTagNameMap {
|
||||||
|
"ew-filled-select": EwFilledSelect;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export class EwFilledSelect extends FilledSelect {
|
||||||
|
static override styles = [sharedStyles, styles];
|
||||||
|
}
|
||||||
|
|
||||||
|
customElements.define("ew-filled-select", EwFilledSelect);
|
||||||
17
src/components/ew-filled-text-field.ts
Normal file
17
src/components/ew-filled-text-field.ts
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
import { styles as filledStyles } from "@material/web/textfield/internal/filled-styles.css.js";
|
||||||
|
import { FilledTextField } from "@material/web/textfield/internal/filled-text-field.js";
|
||||||
|
import { styles as sharedStyles } from "@material/web/textfield/internal/shared-styles.css.js";
|
||||||
|
import { literal } from "lit/static-html.js";
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
interface HTMLElementTagNameMap {
|
||||||
|
"ew-filled-text-field": EwFilledTextField;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export class EwFilledTextField extends FilledTextField {
|
||||||
|
static override styles = [sharedStyles, filledStyles];
|
||||||
|
protected override readonly fieldTag = literal`md-filled-field`;
|
||||||
|
}
|
||||||
|
|
||||||
|
customElements.define("ew-filled-text-field", EwFilledTextField);
|
||||||
15
src/components/ew-icon-button.ts
Normal file
15
src/components/ew-icon-button.ts
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
import { IconButton } from "@material/web/iconbutton/internal/icon-button.js";
|
||||||
|
import { styles as sharedStyles } from "@material/web/iconbutton/internal/shared-styles.css.js";
|
||||||
|
import { styles } from "@material/web/iconbutton/internal/standard-styles.css.js";
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
interface HTMLElementTagNameMap {
|
||||||
|
"ew-icon-button": EwIconButton;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export class EwIconButton extends IconButton {
|
||||||
|
static override styles = [sharedStyles, styles];
|
||||||
|
}
|
||||||
|
|
||||||
|
customElements.define("ew-icon-button", EwIconButton);
|
||||||
14
src/components/ew-list-item.ts
Normal file
14
src/components/ew-list-item.ts
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
import { ListItemEl as ListItem } from "@material/web/list/internal/listitem/list-item.js";
|
||||||
|
import { styles } from "@material/web/list/internal/listitem/list-item-styles.css.js";
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
interface HTMLElementTagNameMap {
|
||||||
|
"ew-list-item": EwListItem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export class EwListItem extends ListItem {
|
||||||
|
static override styles = [styles];
|
||||||
|
}
|
||||||
|
|
||||||
|
customElements.define("ew-list-item", EwListItem);
|
||||||
14
src/components/ew-list.ts
Normal file
14
src/components/ew-list.ts
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
import { List } from "@material/web/list/internal/list.js";
|
||||||
|
import { styles } from "@material/web/list/internal/list-styles.css.js";
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
interface HTMLElementTagNameMap {
|
||||||
|
"ew-list": EwList;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export class EwList extends List {
|
||||||
|
static override styles = [styles];
|
||||||
|
}
|
||||||
|
|
||||||
|
customElements.define("ew-list", EwList);
|
||||||
14
src/components/ew-select-option.ts
Normal file
14
src/components/ew-select-option.ts
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
import { styles } from "@material/web/menu/internal/menuitem/menu-item-styles.css.js";
|
||||||
|
import { SelectOptionEl } from "@material/web/select/internal/selectoption/select-option.js";
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
interface HTMLElementTagNameMap {
|
||||||
|
"ew-select-option": EwSelectOption;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export class EwSelectOption extends SelectOptionEl {
|
||||||
|
static override styles = [styles];
|
||||||
|
}
|
||||||
|
|
||||||
|
customElements.define("ew-select-option", EwSelectOption);
|
||||||
15
src/components/ew-text-button.ts
Normal file
15
src/components/ew-text-button.ts
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
import { styles as sharedStyles } from "@material/web/button/internal/shared-styles.css.js";
|
||||||
|
import { TextButton } from "@material/web/button/internal/text-button.js";
|
||||||
|
import { styles as textStyles } from "@material/web/button/internal/text-styles.css.js";
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
interface HTMLElementTagNameMap {
|
||||||
|
"ew-text-button": EwTextButton;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export class EwTextButton extends TextButton {
|
||||||
|
static override styles = [sharedStyles, textStyles];
|
||||||
|
}
|
||||||
|
|
||||||
|
customElements.define("ew-text-button", EwTextButton);
|
||||||
@ -1,25 +0,0 @@
|
|||||||
import { css } from "lit";
|
|
||||||
import { ButtonBase } from "@material/mwc-button/mwc-button-base";
|
|
||||||
import { styles } from "@material/mwc-button/styles.css";
|
|
||||||
|
|
||||||
declare global {
|
|
||||||
interface HTMLElementTagNameMap {
|
|
||||||
"ewt-button": EwtButton;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export class EwtButton extends ButtonBase {
|
|
||||||
static override styles = [
|
|
||||||
styles,
|
|
||||||
css`
|
|
||||||
.mdc-button {
|
|
||||||
min-width: initial;
|
|
||||||
}
|
|
||||||
:host([text-left]) .mdc-button__label {
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
`,
|
|
||||||
];
|
|
||||||
}
|
|
||||||
|
|
||||||
customElements.define("ewt-button", EwtButton);
|
|
||||||
@ -1,14 +0,0 @@
|
|||||||
import { CheckboxBase } from "@material/mwc-checkbox/mwc-checkbox-base";
|
|
||||||
import { styles } from "@material/mwc-checkbox/mwc-checkbox.css";
|
|
||||||
|
|
||||||
declare global {
|
|
||||||
interface HTMLElementTagNameMap {
|
|
||||||
"ewt-checkbox": EwtCheckbox;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export class EwtCheckbox extends CheckboxBase {
|
|
||||||
static override styles = [styles];
|
|
||||||
}
|
|
||||||
|
|
||||||
customElements.define("ewt-checkbox", EwtCheckbox);
|
|
||||||
@ -1,14 +0,0 @@
|
|||||||
import { CircularProgressBase } from "@material/mwc-circular-progress/mwc-circular-progress-base";
|
|
||||||
import { styles } from "@material/mwc-circular-progress/mwc-circular-progress.css";
|
|
||||||
|
|
||||||
declare global {
|
|
||||||
interface HTMLElementTagNameMap {
|
|
||||||
"ewt-circular-progress": EwtCircularProgress;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export class EwtCircularProgress extends CircularProgressBase {
|
|
||||||
static override styles = [styles];
|
|
||||||
}
|
|
||||||
|
|
||||||
customElements.define("ewt-circular-progress", EwtCircularProgress);
|
|
||||||
@ -1,14 +0,0 @@
|
|||||||
import { FormfieldBase } from "@material/mwc-formfield/mwc-formfield-base";
|
|
||||||
import { styles } from "@material/mwc-formfield/mwc-formfield.css";
|
|
||||||
|
|
||||||
declare global {
|
|
||||||
interface HTMLElementTagNameMap {
|
|
||||||
"ewt-formfield": EwtFormfield;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export class EwtFormfield extends FormfieldBase {
|
|
||||||
static override styles = [styles];
|
|
||||||
}
|
|
||||||
|
|
||||||
customElements.define("ewt-formfield", EwtFormfield);
|
|
||||||
@ -1,14 +0,0 @@
|
|||||||
import { IconButtonBase } from "@material/mwc-icon-button/mwc-icon-button-base";
|
|
||||||
import { styles } from "@material/mwc-icon-button/mwc-icon-button.css";
|
|
||||||
|
|
||||||
declare global {
|
|
||||||
interface HTMLElementTagNameMap {
|
|
||||||
"ewt-icon-button": EwtIconButton;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export class EwtIconButton extends IconButtonBase {
|
|
||||||
static override styles = [styles];
|
|
||||||
}
|
|
||||||
|
|
||||||
customElements.define("ewt-icon-button", EwtIconButton);
|
|
||||||
@ -1,14 +0,0 @@
|
|||||||
import { ListItemBase } from "@material/mwc-list/mwc-list-item-base";
|
|
||||||
import { styles } from "@material/mwc-list/mwc-list-item.css";
|
|
||||||
|
|
||||||
declare global {
|
|
||||||
interface HTMLElementTagNameMap {
|
|
||||||
"ewt-list-item": EwtListItem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export class EwtListItem extends ListItemBase {
|
|
||||||
static override styles = [styles];
|
|
||||||
}
|
|
||||||
|
|
||||||
customElements.define("ewt-list-item", EwtListItem);
|
|
||||||
@ -1,23 +0,0 @@
|
|||||||
import { SelectBase } from "@material/mwc-select/mwc-select-base";
|
|
||||||
import { styles } from "@material/mwc-select/mwc-select.css";
|
|
||||||
import { css } from "lit";
|
|
||||||
|
|
||||||
declare global {
|
|
||||||
interface HTMLElementTagNameMap {
|
|
||||||
"ewt-select": EwtSelect;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export class EwtSelect extends SelectBase {
|
|
||||||
static override styles = [
|
|
||||||
styles,
|
|
||||||
// rem -> em conversion
|
|
||||||
css`
|
|
||||||
.mdc-floating-label {
|
|
||||||
line-height: 1.15em;
|
|
||||||
}
|
|
||||||
`,
|
|
||||||
];
|
|
||||||
}
|
|
||||||
|
|
||||||
customElements.define("ewt-select", EwtSelect);
|
|
||||||
@ -1,23 +0,0 @@
|
|||||||
import { TextFieldBase } from "@material/mwc-textfield/mwc-textfield-base";
|
|
||||||
import { styles } from "@material/mwc-textfield/mwc-textfield.css";
|
|
||||||
import { css } from "lit";
|
|
||||||
|
|
||||||
declare global {
|
|
||||||
interface HTMLElementTagNameMap {
|
|
||||||
"ewt-textfield": EwtTextfield;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export class EwtTextfield extends TextFieldBase {
|
|
||||||
static override styles = [
|
|
||||||
styles,
|
|
||||||
// rem -> em conversion
|
|
||||||
css`
|
|
||||||
.mdc-floating-label {
|
|
||||||
line-height: 1.15em;
|
|
||||||
}
|
|
||||||
`,
|
|
||||||
];
|
|
||||||
}
|
|
||||||
|
|
||||||
customElements.define("ewt-textfield", EwtTextfield);
|
|
||||||
@ -3,29 +3,12 @@ import { svg } from "lit";
|
|||||||
export const closeIcon = svg`
|
export const closeIcon = svg`
|
||||||
<svg width="24" height="24" viewBox="0 0 24 24">
|
<svg width="24" height="24" viewBox="0 0 24 24">
|
||||||
<path
|
<path
|
||||||
|
fill="currentColor"
|
||||||
d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
|
d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export const firmwareIcon = svg`
|
|
||||||
<svg viewBox="0 0 24 24" title="Software">
|
|
||||||
<path
|
|
||||||
fill="currentColor"
|
|
||||||
d="M9.5,8.5L11,10L8,13L11,16L9.5,17.5L5,13L9.5,8.5M14.5,17.5L13,16L16,13L13,10L14.5,8.5L19,13L14.5,17.5M21,2H3A2,2 0 0,0 1,4V20A2,2 0 0,0 3,22H21A2,2 0 0,0 23,20V4A2,2 0 0,0 21,2M21,20H3V6H21V20Z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
`;
|
|
||||||
|
|
||||||
export const chipIcon = svg`
|
|
||||||
<svg viewBox="0 0 24 24" title="Chipset">
|
|
||||||
<path
|
|
||||||
fill="currentColor"
|
|
||||||
d="M6,4H18V5H21V7H18V9H21V11H18V13H21V15H18V17H21V19H18V20H6V19H3V17H6V15H3V13H6V11H3V9H6V7H3V5H6V4M11,15V18H12V15H11M13,15V18H14V15H13M15,15V18H16V15H15Z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
`;
|
|
||||||
|
|
||||||
export const refreshIcon = svg`
|
export const refreshIcon = svg`
|
||||||
<svg viewBox="0 0 24 24">
|
<svg viewBox="0 0 24 24">
|
||||||
<path
|
<path
|
||||||
@ -34,3 +17,45 @@ export const refreshIcon = svg`
|
|||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
export const listItemInstallIcon = svg`
|
||||||
|
<svg slot="start" viewBox="0 0 24 24">
|
||||||
|
<path d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z" />
|
||||||
|
</svg>
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const listItemWifi = svg`
|
||||||
|
<svg slot="start" viewBox="0 0 24 24">
|
||||||
|
<path d="M12,21L15.6,16.2C14.6,15.45 13.35,15 12,15C10.65,15 9.4,15.45 8.4,16.2L12,21M12,3C7.95,3 4.21,4.34 1.2,6.6L3,9C5.5,7.12 8.62,6 12,6C15.38,6 18.5,7.12 21,9L22.8,6.6C19.79,4.34 16.05,3 12,3M12,9C9.3,9 6.81,9.89 4.8,11.4L6.6,13.8C8.1,12.67 9.97,12 12,12C14.03,12 15.9,12.67 17.4,13.8L19.2,11.4C17.19,9.89 14.7,9 12,9Z" />
|
||||||
|
</svg>
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const listItemConsole = svg`
|
||||||
|
<svg slot="start" viewBox="0 0 24 24">
|
||||||
|
<path d="M20,19V7H4V19H20M20,3A2,2 0 0,1 22,5V19A2,2 0 0,1 20,21H4A2,2 0 0,1 2,19V5C2,3.89 2.9,3 4,3H20M13,17V15H18V17H13M9.58,13L5.57,9H8.4L11.7,12.3C12.09,12.69 12.09,13.33 11.7,13.72L8.42,17H5.59L9.58,13Z" />
|
||||||
|
</svg>
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const listItemVisitDevice = svg`
|
||||||
|
<svg slot="start" viewBox="0 0 24 24">
|
||||||
|
<path d="M16.36,14C16.44,13.34 16.5,12.68 16.5,12C16.5,11.32 16.44,10.66 16.36,10H19.74C19.9,10.64 20,11.31 20,12C20,12.69 19.9,13.36 19.74,14M14.59,19.56C15.19,18.45 15.65,17.25 15.97,16H18.92C17.96,17.65 16.43,18.93 14.59,19.56M14.34,14H9.66C9.56,13.34 9.5,12.68 9.5,12C9.5,11.32 9.56,10.65 9.66,10H14.34C14.43,10.65 14.5,11.32 14.5,12C14.5,12.68 14.43,13.34 14.34,14M12,19.96C11.17,18.76 10.5,17.43 10.09,16H13.91C13.5,17.43 12.83,18.76 12,19.96M8,8H5.08C6.03,6.34 7.57,5.06 9.4,4.44C8.8,5.55 8.35,6.75 8,8M5.08,16H8C8.35,17.25 8.8,18.45 9.4,19.56C7.57,18.93 6.03,17.65 5.08,16M4.26,14C4.1,13.36 4,12.69 4,12C4,11.31 4.1,10.64 4.26,10H7.64C7.56,10.66 7.5,11.32 7.5,12C7.5,12.68 7.56,13.34 7.64,14M12,4.03C12.83,5.23 13.5,6.57 13.91,8H10.09C10.5,6.57 11.17,5.23 12,4.03M18.92,8H15.97C15.65,6.75 15.19,5.55 14.59,4.44C16.43,5.07 17.96,6.34 18.92,8M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" />
|
||||||
|
</svg>
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const listItemHomeAssistant = svg`
|
||||||
|
<svg slot="start" viewBox="0 0 24 24">
|
||||||
|
<path d="m12.151 1.5882c-.3262 0-.6523.1291-.8996.3867l-8.3848 8.7354c-.0619.0644-.1223.1368-.1807.2154-.0588.0789-.1151.1638-.1688.2534-.2593.4325-.4552.9749-.5232 1.4555-.0026.018-.0076.0369-.0094.0548-.0121.0987-.0184.1944-.0184.2857v8.0124a1.2731 1.2731 0 001.2731 1.2731h7.8313l-3.4484-3.593a1.7399 1.7399 0 111.0803-1.125l2.6847 2.7972v-10.248a1.7399 1.7399 0 111.5276-0v7.187l2.6702-2.782a1.7399 1.7399 0 111.0566 1.1505l-3.7269 3.8831v2.7299h8.174a1.2471 1.2471 0 001.2471-1.2471v-8.0375c0-.0912-.0059-.1868-.0184-.2855-.0603-.4935-.2636-1.0617-.5326-1.5105-.0537-.0896-.1101-.1745-.1684-.253-.0588-.079-.1191-.1513-.181-.2158l-8.3848-8.7363c-.2473-.2577-.5735-.3866-.8995-.3864" />
|
||||||
|
</svg>
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const listItemEraseUserData = svg`
|
||||||
|
<svg slot="start" viewBox="0 0 24 24">
|
||||||
|
<path d="M15,14C17.67,14 23,15.33 23,18V20H7V18C7,15.33 12.33,14 15,14M15,12A4,4 0 0,1 11,8A4,4 0 0,1 15,4A4,4 0 0,1 19,8A4,4 0 0,1 15,12M5,9.59L7.12,7.46L8.54,8.88L6.41,11L8.54,13.12L7.12,14.54L5,12.41L2.88,14.54L1.46,13.12L3.59,11L1.46,8.88L2.88,7.46L5,9.59Z" />
|
||||||
|
</svg>
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const listItemFundDevelopment = svg`
|
||||||
|
<svg slot="start" viewBox="0 0 24 24">
|
||||||
|
<path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z" />
|
||||||
|
</svg>
|
||||||
|
`;
|
||||||
|
|||||||
10
src/const.ts
10
src/const.ts
@ -5,7 +5,15 @@ export interface Logger {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export interface Build {
|
export interface Build {
|
||||||
chipFamily: "ESP32" | "ESP8266" | "ESP32-S2" | "ESP32-S3" | "ESP32-C3";
|
chipFamily:
|
||||||
|
| "ESP32"
|
||||||
|
| "ESP32-C2"
|
||||||
|
| "ESP32-C3"
|
||||||
|
| "ESP32-C6"
|
||||||
|
| "ESP32-H2"
|
||||||
|
| "ESP32-S2"
|
||||||
|
| "ESP32-S3"
|
||||||
|
| "ESP8266";
|
||||||
parts: {
|
parts: {
|
||||||
path: string;
|
path: string;
|
||||||
offset: number;
|
offset: number;
|
||||||
|
|||||||
@ -44,6 +44,7 @@ export const flash = async (
|
|||||||
transport,
|
transport,
|
||||||
baudrate: 115200,
|
baudrate: 115200,
|
||||||
romBaudrate: 115200,
|
romBaudrate: 115200,
|
||||||
|
enableTracing: false,
|
||||||
});
|
});
|
||||||
|
|
||||||
// For debugging
|
// For debugging
|
||||||
@ -56,8 +57,8 @@ export const flash = async (
|
|||||||
});
|
});
|
||||||
|
|
||||||
try {
|
try {
|
||||||
await esploader.main_fn();
|
await esploader.main();
|
||||||
await esploader.flash_id();
|
await esploader.flashId();
|
||||||
} catch (err: any) {
|
} catch (err: any) {
|
||||||
console.error(err);
|
console.error(err);
|
||||||
fireStateEvent({
|
fireStateEvent({
|
||||||
@ -166,7 +167,7 @@ export const flash = async (
|
|||||||
message: "Erasing device...",
|
message: "Erasing device...",
|
||||||
details: { done: false },
|
details: { done: false },
|
||||||
});
|
});
|
||||||
await esploader.erase_flash();
|
await esploader.eraseFlash();
|
||||||
fireStateEvent({
|
fireStateEvent({
|
||||||
state: FlashStateType.ERASING,
|
state: FlashStateType.ERASING,
|
||||||
message: "Device erased",
|
message: "Device erased",
|
||||||
@ -187,7 +188,7 @@ export const flash = async (
|
|||||||
let totalWritten = 0;
|
let totalWritten = 0;
|
||||||
|
|
||||||
try {
|
try {
|
||||||
await esploader.write_flash({
|
await esploader.writeFlash({
|
||||||
fileArray,
|
fileArray,
|
||||||
flashSize: "keep",
|
flashSize: "keep",
|
||||||
flashMode: "keep",
|
flashMode: "keep",
|
||||||
|
|||||||
@ -12,12 +12,12 @@ export class InstallButton extends HTMLElement {
|
|||||||
position: relative;
|
position: relative;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
padding: 8px 28px;
|
font-weight: 500;
|
||||||
|
padding: 10px 24px;
|
||||||
color: var(--esp-tools-button-text-color, #fff);
|
color: var(--esp-tools-button-text-color, #fff);
|
||||||
background-color: var(--esp-tools-button-color, #03a9f4);
|
background-color: var(--esp-tools-button-color, #03a9f4);
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 4px;
|
border-radius: var(--esp-tools-button-border-radius, 9999px);
|
||||||
box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.12), 0 1px 5px 0 rgba(0,0,0,.2);
|
|
||||||
}
|
}
|
||||||
button::before {
|
button::before {
|
||||||
content: " ";
|
content: " ";
|
||||||
@ -27,10 +27,7 @@ export class InstallButton extends HTMLElement {
|
|||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
opacity: 0.2;
|
opacity: 0.2;
|
||||||
border-radius: 4px;
|
border-radius: var(--esp-tools-button-border-radius, 9999px);
|
||||||
}
|
|
||||||
button:hover {
|
|
||||||
box-shadow: 0 4px 8px 0 rgba(0,0,0,.14), 0 1px 7px 0 rgba(0,0,0,.12), 0 3px 1px -1px rgba(0,0,0,.2);
|
|
||||||
}
|
}
|
||||||
button:hover::before {
|
button:hover::before {
|
||||||
background-color: rgba(255,255,255,.8);
|
background-color: rgba(255,255,255,.8);
|
||||||
@ -51,10 +48,6 @@ export class InstallButton extends HTMLElement {
|
|||||||
cursor: unset;
|
cursor: unset;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
improv-wifi-launch-button {
|
|
||||||
display: block;
|
|
||||||
margin-top: 16px;
|
|
||||||
}
|
|
||||||
.hidden {
|
.hidden {
|
||||||
display: none;
|
display: none;
|
||||||
}`;
|
}`;
|
||||||
@ -101,7 +94,7 @@ export class InstallButton extends HTMLElement {
|
|||||||
|
|
||||||
slot.name = "activate";
|
slot.name = "activate";
|
||||||
const button = document.createElement("button");
|
const button = document.createElement("button");
|
||||||
button.innerText = "CONNECT";
|
button.innerText = "Connect";
|
||||||
slot.append(button);
|
slot.append(button);
|
||||||
if (
|
if (
|
||||||
"adoptedStyleSheets" in Document.prototype &&
|
"adoptedStyleSheets" in Document.prototype &&
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@ -1,7 +1,8 @@
|
|||||||
import { LitElement, html, css, svg } from "lit";
|
import { LitElement, html, css, svg } from "lit";
|
||||||
import { customElement } from "lit/decorators.js";
|
import { customElement } from "lit/decorators.js";
|
||||||
import "../components/ewt-dialog";
|
import "../components/ew-dialog";
|
||||||
import "../components/ewt-button";
|
import "../components/ew-text-button";
|
||||||
|
|
||||||
import { dialogStyles } from "../styles";
|
import { dialogStyles } from "../styles";
|
||||||
import { getOperatingSystem } from "../util/get-operating-system";
|
import { getOperatingSystem } from "../util/get-operating-system";
|
||||||
|
|
||||||
@ -34,120 +35,116 @@ class EwtNoPortPickedDialog extends LitElement {
|
|||||||
const OS = getOperatingSystem();
|
const OS = getOperatingSystem();
|
||||||
|
|
||||||
return html`
|
return html`
|
||||||
<ewt-dialog
|
<ew-dialog open @closed=${this._handleClose}>
|
||||||
open
|
<div slot="headline">No port selected</div>
|
||||||
heading="No port selected"
|
<div slot="content">
|
||||||
scrimClickAction
|
<div>
|
||||||
@closed=${this._handleClose}
|
If you didn't select a port because you didn't see your device
|
||||||
>
|
listed, try the following steps:
|
||||||
<div>
|
</div>
|
||||||
If you didn't select a port because you didn't see your device listed,
|
<ol>
|
||||||
try the following steps:
|
<li>
|
||||||
</div>
|
Make sure that the device is connected to this computer (the one
|
||||||
<ol>
|
that runs the browser that shows this website)
|
||||||
<li>
|
</li>
|
||||||
Make sure that the device is connected to this computer (the one
|
<li>
|
||||||
that runs the browser that shows this website)
|
Most devices have a tiny light when it is powered on. If yours has
|
||||||
</li>
|
one, make sure it is on.
|
||||||
<li>
|
</li>
|
||||||
Most devices have a tiny light when it is powered on. If yours has
|
<li>
|
||||||
one, make sure it is on.
|
Make sure that the USB cable you use can be used for data and is
|
||||||
</li>
|
not a power-only cable.
|
||||||
<li>
|
</li>
|
||||||
Make sure that the USB cable you use can be used for data and is not
|
${OS === "Linux"
|
||||||
a power-only cable.
|
? html`
|
||||||
</li>
|
<li>
|
||||||
${OS === "Linux"
|
If you are using a Linux flavor, make sure that your user is
|
||||||
? html`
|
part of the <code>dialout</code> group so it has permission
|
||||||
|
to access the device.
|
||||||
|
<code class="block"
|
||||||
|
>sudo usermod -a -G dialout YourUserName</code
|
||||||
|
>
|
||||||
|
You may need to log out & back in or reboot to activate the
|
||||||
|
new group access.
|
||||||
|
</li>
|
||||||
|
`
|
||||||
|
: ""}
|
||||||
|
<li>
|
||||||
|
Make sure you have the right drivers installed. Below are the
|
||||||
|
drivers for common chips used in ESP devices:
|
||||||
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
If you are using a Linux flavor, make sure that your user is
|
CP2102 drivers:
|
||||||
part of the <code>dialout</code> group so it has permission to
|
<a
|
||||||
access the device.
|
href="https://www.silabs.com/developers/usb-to-uart-bridge-vcp-drivers"
|
||||||
<code class="block"
|
target="_blank"
|
||||||
>sudo usermod -a -G dialout YourUserName</code
|
rel="noopener"
|
||||||
|
>Windows & Mac</a
|
||||||
>
|
>
|
||||||
You may need to log out & back in or reboot to activate the
|
|
||||||
new group access.
|
|
||||||
</li>
|
</li>
|
||||||
|
<li>
|
||||||
|
CH342, CH343, CH9102 drivers:
|
||||||
|
<a
|
||||||
|
href="https://www.wch.cn/downloads/CH343SER_ZIP.html"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener"
|
||||||
|
>Windows</a
|
||||||
|
>,
|
||||||
|
<a
|
||||||
|
href="https://www.wch.cn/downloads/CH34XSER_MAC_ZIP.html"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener"
|
||||||
|
>Mac</a
|
||||||
|
>
|
||||||
|
<br />
|
||||||
|
(download via blue button with ${cloudDownload} icon)
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
CH340, CH341 drivers:
|
||||||
|
<a
|
||||||
|
href="https://www.wch.cn/downloads/CH341SER_ZIP.html"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener"
|
||||||
|
>Windows</a
|
||||||
|
>,
|
||||||
|
<a
|
||||||
|
href="https://www.wch.cn/downloads/CH341SER_MAC_ZIP.html"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener"
|
||||||
|
>Mac</a
|
||||||
|
>
|
||||||
|
<br />
|
||||||
|
(download via blue button with ${cloudDownload} icon)
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
<div slot="actions">
|
||||||
|
${this.doTryAgain
|
||||||
|
? html`
|
||||||
|
<ew-text-button @click=${this.close}>Cancel</ew-text-button>
|
||||||
|
<ew-text-button @click=${this.tryAgain}>
|
||||||
|
Try Again
|
||||||
|
</ew-text-button>
|
||||||
`
|
`
|
||||||
: ""}
|
: html`
|
||||||
<li>
|
<ew-text-button @click=${this.close}>Close</ew-text-button>
|
||||||
Make sure you have the right drivers installed. Below are the
|
`}
|
||||||
drivers for common chips used in ESP devices:
|
</div>
|
||||||
<ul>
|
</ew-dialog>
|
||||||
<li>
|
|
||||||
CP2102 drivers:
|
|
||||||
<a
|
|
||||||
href="https://www.silabs.com/developers/usb-to-uart-bridge-vcp-drivers"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener"
|
|
||||||
>Windows & Mac</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
CH342, CH343, CH9102 drivers:
|
|
||||||
<a
|
|
||||||
href="https://www.wch.cn/downloads/CH343SER_ZIP.html"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener"
|
|
||||||
>Windows</a
|
|
||||||
>,
|
|
||||||
<a
|
|
||||||
href="https://www.wch.cn/downloads/CH34XSER_MAC_ZIP.html"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener"
|
|
||||||
>Mac</a
|
|
||||||
>
|
|
||||||
<br />
|
|
||||||
(download via blue button with ${cloudDownload} icon)
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
CH340, CH341 drivers:
|
|
||||||
<a
|
|
||||||
href="https://www.wch.cn/downloads/CH341SER_ZIP.html"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener"
|
|
||||||
>Windows</a
|
|
||||||
>,
|
|
||||||
<a
|
|
||||||
href="https://www.wch.cn/downloads/CH341SER_MAC_ZIP.html"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener"
|
|
||||||
>Mac</a
|
|
||||||
>
|
|
||||||
<br />
|
|
||||||
(download via blue button with ${cloudDownload} icon)
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</ol>
|
|
||||||
${this.doTryAgain
|
|
||||||
? html`
|
|
||||||
<ewt-button
|
|
||||||
slot="primaryAction"
|
|
||||||
dialogAction="close"
|
|
||||||
label="Try Again"
|
|
||||||
@click=${this.doTryAgain}
|
|
||||||
></ewt-button>
|
|
||||||
|
|
||||||
<ewt-button
|
|
||||||
no-attention
|
|
||||||
slot="secondaryAction"
|
|
||||||
dialogAction="close"
|
|
||||||
label="Cancel"
|
|
||||||
></ewt-button>
|
|
||||||
`
|
|
||||||
: html`
|
|
||||||
<ewt-button
|
|
||||||
slot="primaryAction"
|
|
||||||
dialogAction="close"
|
|
||||||
label="Close"
|
|
||||||
></ewt-button>
|
|
||||||
`}
|
|
||||||
</ewt-dialog>
|
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private tryAgain() {
|
||||||
|
this.close();
|
||||||
|
this.doTryAgain?.();
|
||||||
|
}
|
||||||
|
|
||||||
|
private close() {
|
||||||
|
this.shadowRoot!.querySelector("ew-dialog")!.close();
|
||||||
|
}
|
||||||
|
|
||||||
private async _handleClose() {
|
private async _handleClose() {
|
||||||
this.parentNode!.removeChild(this);
|
this.parentNode!.removeChild(this);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,6 +1,5 @@
|
|||||||
import { LitElement, html, css, TemplateResult } from "lit";
|
import { LitElement, html, css, TemplateResult } from "lit";
|
||||||
import { property } from "lit/decorators.js";
|
import { property } from "lit/decorators.js";
|
||||||
import "../components/ewt-circular-progress";
|
|
||||||
|
|
||||||
class EwtPageMessage extends LitElement {
|
class EwtPageMessage extends LitElement {
|
||||||
@property() icon!: string;
|
@property() icon!: string;
|
||||||
@ -25,9 +24,6 @@ class EwtPageMessage extends LitElement {
|
|||||||
line-height: 80px;
|
line-height: 80px;
|
||||||
color: black;
|
color: black;
|
||||||
}
|
}
|
||||||
ewt-circular-progress {
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
customElements.define("ewt-page-message", EwtPageMessage);
|
customElements.define("ewt-page-message", EwtPageMessage);
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
import { LitElement, html, css, TemplateResult } from "lit";
|
import { LitElement, html, css, TemplateResult } from "lit";
|
||||||
import { property } from "lit/decorators.js";
|
import { property } from "lit/decorators.js";
|
||||||
import "../components/ewt-circular-progress";
|
import "../components/ew-circular-progress";
|
||||||
|
|
||||||
class EwtPageProgress extends LitElement {
|
class EwtPageProgress extends LitElement {
|
||||||
@property() label!: string | TemplateResult;
|
@property() label!: string | TemplateResult;
|
||||||
@ -10,14 +10,13 @@ class EwtPageProgress extends LitElement {
|
|||||||
render() {
|
render() {
|
||||||
return html`
|
return html`
|
||||||
<div>
|
<div>
|
||||||
<ewt-circular-progress
|
<ew-circular-progress
|
||||||
active
|
active
|
||||||
?indeterminate=${this.progress === undefined}
|
?indeterminate=${this.progress === undefined}
|
||||||
.progress=${this.progress !== undefined
|
.value=${this.progress !== undefined
|
||||||
? this.progress / 100
|
? this.progress / 100
|
||||||
: undefined}
|
: undefined}
|
||||||
density="8"
|
></ew-circular-progress>
|
||||||
></ewt-circular-progress>
|
|
||||||
${this.progress !== undefined ? html`<div>${this.progress}%</div>` : ""}
|
${this.progress !== undefined ? html`<div>${this.progress}%</div>` : ""}
|
||||||
</div>
|
</div>
|
||||||
${this.label}
|
${this.label}
|
||||||
@ -30,7 +29,7 @@ class EwtPageProgress extends LitElement {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
ewt-circular-progress {
|
ew-circular-progress {
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|||||||
@ -6,29 +6,26 @@ import { css } from "lit";
|
|||||||
|
|
||||||
export const dialogStyles = css`
|
export const dialogStyles = css`
|
||||||
:host {
|
:host {
|
||||||
--mdc-theme-primary: var(--improv-primary-color, #03a9f4);
|
--roboto-font: Roboto, system-ui;
|
||||||
--mdc-theme-on-primary: var(--improv-on-primary-color, #fff);
|
--text-color: rgba(0, 0, 0, 0.6);
|
||||||
--improv-danger-color: #db4437;
|
--danger-color: #db4437;
|
||||||
--improv-text-color: rgba(0, 0, 0, 0.6);
|
|
||||||
--mdc-theme-text-primary-on-background: var(--improv-text-color);
|
--md-sys-color-primary: #03a9f4;
|
||||||
--mdc-dialog-content-ink-color: var(--improv-text-color);
|
--md-sys-color-on-primary: #fff;
|
||||||
text-align: left;
|
--md-ref-typeface-brand: var(--roboto-font);
|
||||||
font-size: 16px;
|
--md-ref-typeface-plain: var(--roboto-font);
|
||||||
--mdc-typography-headline6-font-size: 1.25em;
|
|
||||||
--mdc-typography-headline6-line-height: 2em;
|
--md-sys-color-surface: #fff;
|
||||||
--mdc-typography-body1-font-size: 1em;
|
--md-sys-color-surface-container: #fff;
|
||||||
--mdc-typography-body1-line-height: 1.5em;
|
--md-sys-color-surface-container-high: #fff;
|
||||||
--mdc-typography-button-font-size: 0.875em;
|
--md-sys-color-surface-container-highest: #f5f5f5;
|
||||||
--mdc-typography-button-line-height: 2.25em;
|
--md-sys-color-secondary-container: #e0e0e0;
|
||||||
--mdc-typography-subtitle1-font-size: 1em;
|
|
||||||
--mdc-typography-subtitle1-line-height: 1.75em;
|
--md-sys-typescale-headline-font: var(--roboto-font);
|
||||||
|
--md-sys-typescale-title-font: var(--roboto-font);
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: var(--improv-primary-color, #03a9f4);
|
color: var(--md-sys-color-primary);
|
||||||
}
|
|
||||||
|
|
||||||
a.button {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user