Kezdőlap Felfedezés Súgó
Regisztráció Bejelentkezés
oleg
/
esp-web-tools
tükrözi: https://github.com/esphome/esp-web-tools.git
1
0
Másolás 0
Fájlok Problémák 0 Wiki
Forráskód Böngészése

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
Paulus Schoutsen 1 éve
szülő
e107f0f5b6
commit
7de3b6a521
32 módosított fájl, 1446 hozzáadás és 786 törlés
Egyesített Nézet Diff Statisztika Mutatása
  1. 20 9
      index.html
  2. 678 97
      package-lock.json
  3. 12 17
      package.json
  4. 6 1
      rollup.config.mjs
  5. 14 0
      src/components/ew-checkbox.ts
  6. 14 0
      src/components/ew-circular-progress.ts
  7. 14 0
      src/components/ew-dialog.ts
  8. 14 0
      src/components/ew-divider.ts
  9. 15 0
      src/components/ew-filled-select.ts
  10. 17 0
      src/components/ew-filled-text-field.ts
  11. 15 0
      src/components/ew-icon-button.ts
  12. 14 0
      src/components/ew-list-item.ts
  13. 14 0
      src/components/ew-list.ts
  14. 14 0
      src/components/ew-select-option.ts
  15. 15 0
      src/components/ew-text-button.ts
  16. 0 25
      src/components/ewt-button.ts
  17. 0 14
      src/components/ewt-checkbox.ts
  18. 0 14
      src/components/ewt-circular-progress.ts
  19. 0 14
      src/components/ewt-formfield.ts
  20. 0 14
      src/components/ewt-icon-button.ts
  21. 0 14
      src/components/ewt-list-item.ts
  22. 0 23
      src/components/ewt-select.ts
  23. 0 23
      src/components/ewt-textfield.ts
  24. 40 15
      src/components/svg.ts
  25. 9 1
      src/const.ts
  26. 5 4
      src/flash.ts
  27. 5 12
      src/install-button.ts
  28. 382 349
      src/install-dialog.ts
  29. 106 109
      src/no-port-picked/no-port-picked-dialog.ts
  30. 0 4
      src/pages/ewt-page-message.ts
  31. 5 6
      src/pages/ewt-page-progress.ts
  32. 18 21
      src/styles.ts

+ 20 - 9
index.html
Fájl Megtekintése 

@@ -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,
 
-          rgb(0 0 0 / 14%) 0px 1px 1px 0px, rgb(0 0 0 / 12%) 0px 1px 3px 0px;
 
+        box-shadow:
 
+          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>
 
 &lt;esp-web-install-button
 
 &lt;esp-web-install-button
 
-  manifest="https://firmware.esphome.io/esphome-web/manifest.json"
 
+  manifest="https://firmware.esphome.io/esp-web-tools/manifest.json"
 
 >&lt;/esp-web-install-button></pre
 
 >&lt;/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>
 
 &lt;esp-web-install-button
 
 &lt;esp-web-install-button
 
-  manifest="https://firmware.esphome.io/esphome-web/manifest.json"
 
+  manifest="https://firmware.esphome.io/esp-web-tools/manifest.json"
 
 >
 
 >
 
   &lt;button slot="activate">Custom install button&lt;/button>
 
   &lt;button slot="activate">Custom install button&lt;/button>
 
   &lt;span slot="unsupported">Ah snap, your browser doesn't work!&lt;/span>
 
   &lt;span slot="unsupported">Ah snap, your browser doesn't work!&lt;/span>

A különbségek nem kerülnek megjelenítésre, a fájl túl nagy
+ 678 - 97
package-lock.json


+ 12 - 17
package.json
Fájl Megtekintése 

@@ -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",
 
-    "prettier": "^3.0.0",
 
-    "rollup": "^4.3.0",
 
-    "serve": "^14.2.0",
 
-    "typescript": "^5.1.3"
 
+    "@rollup/plugin-typescript": "^11.1.6",
 
+    "@types/w3c-web-serial": "^1.0.6",
 
+    "prettier": "^3.2.5",
 
+    "rollup": "^4.10.0",
 
+    "serve": "^14.2.1",
 
+    "typescript": "^5.3.3"
 
   },
 
   },
 
   "dependencies": {
 
   "dependencies": {
 
-    "@material/mwc-button": "^0.27.0",
 
-    "@material/mwc-checkbox": "^0.27.0",
 
-    "@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",
 
+    "@material/web": "^1.2.0",
 
+    "esptool-js": "^0.4.1",
 
     "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"
 
   }
 
   }
 
 }
 
 }

+ 6 - 1
rollup.config.mjs
Fájl Megtekintése 

@@ -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 - 0
src/components/ew-checkbox.ts
Fájl Megtekintése 

@@ -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 - 0
src/components/ew-circular-progress.ts
Fájl Megtekintése 

@@ -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 - 0
src/components/ew-dialog.ts
Fájl Megtekintése 

@@ -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 - 0
src/components/ew-divider.ts
Fájl Megtekintése 

@@ -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 - 0
src/components/ew-filled-select.ts
Fájl Megtekintése 

@@ -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 - 0
src/components/ew-filled-text-field.ts
Fájl Megtekintése 

@@ -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 - 0
src/components/ew-icon-button.ts
Fájl Megtekintése 

@@ -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 - 0
src/components/ew-list-item.ts
Fájl Megtekintése 

@@ -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 - 0
src/components/ew-list.ts
Fájl Megtekintése 

@@ -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 - 0
src/components/ew-select-option.ts
Fájl Megtekintése 

@@ -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 - 0
src/components/ew-text-button.ts
Fájl Megtekintése 

@@ -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);

+ 0 - 25
src/components/ewt-button.ts
Fájl Megtekintése 

@@ -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);

+ 0 - 14
src/components/ewt-checkbox.ts
Fájl Megtekintése 

@@ -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);

+ 0 - 14
src/components/ewt-circular-progress.ts
Fájl Megtekintése 

@@ -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);

+ 0 - 14
src/components/ewt-formfield.ts
Fájl Megtekintése 

@@ -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);

+ 0 - 14
src/components/ewt-icon-button.ts
Fájl Megtekintése 

@@ -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);

+ 0 - 14
src/components/ewt-list-item.ts
Fájl Megtekintése 

@@ -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);

+ 0 - 23
src/components/ewt-select.ts
Fájl Megtekintése 

@@ -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);

+ 0 - 23
src/components/ewt-textfield.ts
Fájl Megtekintése 

@@ -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);

+ 40 - 15
src/components/svg.ts
Fájl Megtekintése 

@@ -3,34 +3,59 @@ 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">
 
+export const refreshIcon = svg`
 
+  <svg viewBox="0 0 24 24">
 
     <path
 
     <path
 
       fill="currentColor"
 
       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"
 
+      d="M17.65,6.35C16.2,4.9 14.21,4 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20C15.73,20 18.84,17.45 19.73,14H17.65C16.83,16.33 14.61,18 12,18A6,6 0 0,1 6,12A6,6 0 0,1 12,6C13.66,6 15.14,6.69 16.22,7.78L13,11H20V4L17.65,6.35Z"
 
     />
 
     />
 
   </svg>
 
   </svg>
 
 `;
 
 `;
 
 
 
-export const chipIcon = svg`
 
-  <svg viewBox="0 0 24 24" title="Chipset">
 
-    <path
 
-      fill="currentColor"
 
-      d="M6,4H18V5H21V7H18V9H21V11H18V13H21V15H18V17H21V19H18V20H6V19H3V17H6V15H3V13H6V11H3V9H6V7H3V5H6V4M11,15V18H12V15H11M13,15V18H14V15H13M15,15V18H16V15H15Z"
 
-    />
 
+export const listItemInstallIcon = svg`
 
+  <svg slot="start" viewBox="0 0 24 24">
 
+    <path d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z" />
 
   </svg>
 
   </svg>
 
 `;
 
 `;
 
 
 
-export const refreshIcon = svg`
 
-  <svg viewBox="0 0 24 24">
 
-    <path
 
-      fill="currentColor"
 
-      d="M17.65,6.35C16.2,4.9 14.21,4 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20C15.73,20 18.84,17.45 19.73,14H17.65C16.83,16.33 14.61,18 12,18A6,6 0 0,1 6,12A6,6 0 0,1 12,6C13.66,6 15.14,6.69 16.22,7.78L13,11H20V4L17.65,6.35Z"
 
-    />
 
+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>
 
   </svg>
 
 `;
 
 `;

+ 9 - 1
src/const.ts
Fájl Megtekintése 

@@ -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;

+ 5 - 4
src/flash.ts
Fájl Megtekintése 

@@ -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.flash_id();
 
+    await esploader.main();
 
+    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",

+ 5 - 12
src/install-button.ts
Fájl Megtekintése 

@@ -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;
 
-    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);
 
+    border-radius: var(--esp-tools-button-border-radius, 9999px);
 
   }
 
   }
 
   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;
 
-  }
 
-  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);
 
+    border-radius: var(--esp-tools-button-border-radius, 9999px);
 
   }
 
   }
 
   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 &&

A különbségek nem kerülnek megjelenítésre, a fájl túl nagy
+ 382 - 349
src/install-dialog.ts


+ 106 - 109
src/no-port-picked/no-port-picked-dialog.ts
Fájl Megtekintése 

@@ -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/ewt-button";
 
+import "../components/ew-dialog";
 
+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
 
-        open
 
-        heading="No port selected"
 
-        scrimClickAction
 
-        @closed=${this._handleClose}
 
-      >
 
-        <div>
 
-          If you didn't select a port because you didn't see your device listed,
 
-          try the following steps:
 
-        </div>
 
-        <ol>
 
-          <li>
 
-            Make sure that the device is connected to this computer (the one
 
-            that runs the browser that shows this website)
 
-          </li>
 
-          <li>
 
-            Most devices have a tiny light when it is powered on. If yours has
 
-            one, make sure it is on.
 
-          </li>
 
-          <li>
 
-            Make sure that the USB cable you use can be used for data and is not
 
-            a power-only cable.
 
-          </li>
 
-          ${OS === "Linux"
 
-            ? html`
 
+      <ew-dialog open @closed=${this._handleClose}>
 
+        <div slot="headline">No port selected</div>
 
+        <div slot="content">
 
+          <div>
 
+            If you didn't select a port because you didn't see your device
 
+            listed, try the following steps:
 
+          </div>
 
+          <ol>
 
+            <li>
 
+              Make sure that the device is connected to this computer (the one
 
+              that runs the browser that shows this website)
 
+            </li>
 
+            <li>
 
+              Most devices have a tiny light when it is powered on. If yours has
 
+              one, make sure it is on.
 
+            </li>
 
+            <li>
 
+              Make sure that the USB cable you use can be used for data and is
 
+              not a power-only cable.
 
+            </li>
 
+            ${OS === "Linux"
 
+              ? html`
 
+                  <li>
 
+                    If you are using a Linux flavor, make sure that your user is
 
+                    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>
 
+                  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>
 
                 <li>
 
-                  If you are using a Linux flavor, make sure that your user is
 
-                  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
 
+                  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
 
                   >
 
                   >
 
-                  You may need to log out & back in or reboot to activate the
 
-                  new group access.
 
+                  <br />
 
+                  (download via blue button with ${cloudDownload} icon)
 
                 </li>
 
                 </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>
 
               `
 
               `
 
-            : ""}
 
-          <li>
 
-            Make sure you have the right drivers installed. Below are the
 
-            drivers for common chips used in ESP devices:
 
-            <ul>
 
-              <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>
 
+            : html`
 
+                <ew-text-button @click=${this.close}>Close</ew-text-button>
 
+              `}
 
+        </div>
 
+      </ew-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);
 
   }
 
   }

+ 0 - 4
src/pages/ewt-page-message.ts
Fájl Megtekintése 

@@ -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);

+ 5 - 6
src/pages/ewt-page-progress.ts
Fájl Megtekintése 

@@ -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"
 
-        ></ewt-circular-progress>
 
+        ></ew-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;
 
     }
 
     }
 
   `;
 
   `;

+ 18 - 21
src/styles.ts
Fájl Megtekintése 

@@ -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);
 
-    --mdc-theme-on-primary: var(--improv-on-primary-color, #fff);
 
-    --improv-danger-color: #db4437;
 
-    --improv-text-color: rgba(0, 0, 0, 0.6);
 
-    --mdc-theme-text-primary-on-background: var(--improv-text-color);
 
-    --mdc-dialog-content-ink-color: var(--improv-text-color);
 
-    text-align: left;
 
-    font-size: 16px;
 
-    --mdc-typography-headline6-font-size: 1.25em;
 
-    --mdc-typography-headline6-line-height: 2em;
 
-    --mdc-typography-body1-font-size: 1em;
 
-    --mdc-typography-body1-line-height: 1.5em;
 
-    --mdc-typography-button-font-size: 0.875em;
 
-    --mdc-typography-button-line-height: 2.25em;
 
-    --mdc-typography-subtitle1-font-size: 1em;
 
-    --mdc-typography-subtitle1-line-height: 1.75em;
 
-  }
 
+    --roboto-font: Roboto, system-ui;
 
+    --text-color: rgba(0, 0, 0, 0.6);
 
+    --danger-color: #db4437;
 
 
 
-  a {
 
-    color: var(--improv-primary-color, #03a9f4);
 
+    --md-sys-color-primary: #03a9f4;
 
+    --md-sys-color-on-primary: #fff;
 
+    --md-ref-typeface-brand: var(--roboto-font);
 
+    --md-ref-typeface-plain: var(--roboto-font);
 
+
 
+    --md-sys-color-surface: #fff;
 
+    --md-sys-color-surface-container: #fff;
 
+    --md-sys-color-surface-container-high: #fff;
 
+    --md-sys-color-surface-container-highest: #f5f5f5;
 
+    --md-sys-color-secondary-container: #e0e0e0;
 
+
 
+    --md-sys-typescale-headline-font: var(--roboto-font);
 
+    --md-sys-typescale-title-font: var(--roboto-font);
 
   }
 
   }
 
 
 
-  a.button {
 
-    text-decoration: none;
 
+  a {
 
+    color: var(--md-sys-color-primary);
 
   }
 
   }
 
 `;
 
 `;

Nem az összes módosított fájl került megjelenítésre, mert túl sok fájl változott