From a10c9b9dfcfe0fd3a2807cebf170a9cdd03cbe58 Mon Sep 17 00:00:00 2001 From: Jaylyn Barbee Date: Thu, 26 Oct 2023 13:54:59 -0400 Subject: [PATCH 1/2] added light icons for dark themes --- .../public/assets/android_icon_full_light.svg | 7 ++++++ .../public/assets/apple_icon_light.svg | 1 + .../public/assets/meta_icon_light.svg | 4 ++++ .../new/{retest-black.svg => retest-icon.svg} | 0 ...retest-white.svg => retest-icon_light.svg} | 0 .../public/assets/windows_icon_light.svg | 18 +++++++++++++++ .../src/script/components/todo-list-item.ts | 15 +++++++++++-- .../pwabuilder/src/script/pages/app-report.ts | 22 ++++++++++++++----- 8 files changed, 59 insertions(+), 8 deletions(-) create mode 100644 apps/pwabuilder/public/assets/android_icon_full_light.svg create mode 100644 apps/pwabuilder/public/assets/apple_icon_light.svg create mode 100644 apps/pwabuilder/public/assets/meta_icon_light.svg rename apps/pwabuilder/public/assets/new/{retest-black.svg => retest-icon.svg} (100%) rename apps/pwabuilder/public/assets/new/{retest-white.svg => retest-icon_light.svg} (100%) create mode 100644 apps/pwabuilder/public/assets/windows_icon_light.svg diff --git a/apps/pwabuilder/public/assets/android_icon_full_light.svg b/apps/pwabuilder/public/assets/android_icon_full_light.svg new file mode 100644 index 000000000..623436333 --- /dev/null +++ b/apps/pwabuilder/public/assets/android_icon_full_light.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/apps/pwabuilder/public/assets/apple_icon_light.svg b/apps/pwabuilder/public/assets/apple_icon_light.svg new file mode 100644 index 000000000..ecacc0064 --- /dev/null +++ b/apps/pwabuilder/public/assets/apple_icon_light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/pwabuilder/public/assets/meta_icon_light.svg b/apps/pwabuilder/public/assets/meta_icon_light.svg new file mode 100644 index 000000000..757b26912 --- /dev/null +++ b/apps/pwabuilder/public/assets/meta_icon_light.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/apps/pwabuilder/public/assets/new/retest-black.svg b/apps/pwabuilder/public/assets/new/retest-icon.svg similarity index 100% rename from apps/pwabuilder/public/assets/new/retest-black.svg rename to apps/pwabuilder/public/assets/new/retest-icon.svg diff --git a/apps/pwabuilder/public/assets/new/retest-white.svg b/apps/pwabuilder/public/assets/new/retest-icon_light.svg similarity index 100% rename from apps/pwabuilder/public/assets/new/retest-white.svg rename to apps/pwabuilder/public/assets/new/retest-icon_light.svg diff --git a/apps/pwabuilder/public/assets/windows_icon_light.svg b/apps/pwabuilder/public/assets/windows_icon_light.svg new file mode 100644 index 000000000..fb951e69a --- /dev/null +++ b/apps/pwabuilder/public/assets/windows_icon_light.svg @@ -0,0 +1,18 @@ + + + + + + + + + + diff --git a/apps/pwabuilder/src/script/components/todo-list-item.ts b/apps/pwabuilder/src/script/components/todo-list-item.ts index 7ae48b64d..1e808a31b 100644 --- a/apps/pwabuilder/src/script/components/todo-list-item.ts +++ b/apps/pwabuilder/src/script/components/todo-list-item.ts @@ -25,6 +25,8 @@ export class TodoItem extends LitElement { @state() clickable: boolean = false; @state() isOpen: boolean = false; + @state() darkMode: boolean = false; + static get styles() { return [ css` @@ -150,6 +152,14 @@ export class TodoItem extends LitElement { super(); } + connectedCallback(){ + super.connectedCallback(); + + // understand the users color preference + const result = window.matchMedia('(prefers-color-scheme: dark)'); + this.darkMode = result.matches; // TRUE if user prefers dark mode + } + decideClasses(){ if(this.status === "retest" || this.field.startsWith("Open") || manifest_fields[this.field] || service_worker_fields[this.field]){ @@ -205,7 +215,7 @@ export class TodoItem extends LitElement { return html`app capability result icon` case "retest": - return html`retest site icon` + return html`retest site icon` } return html`yield result icon` @@ -247,4 +257,5 @@ export class TodoItem extends LitElement { const yield_src = "/assets/new/yield.svg"; const stop_src = "/assets/new/stop.svg"; const enhancement_src = "/assets/new/enhancement.svg"; -const retest_src = "/assets/new/retest-black.svg"; +const retest_src = "/assets/new/retest-icon.svg"; +const retest_src_light = "/assets/new/retest-icon_light.svg"; diff --git a/apps/pwabuilder/src/script/pages/app-report.ts b/apps/pwabuilder/src/script/pages/app-report.ts index 6fe7affa9..8ee1b4d44 100644 --- a/apps/pwabuilder/src/script/pages/app-report.ts +++ b/apps/pwabuilder/src/script/pages/app-report.ts @@ -87,7 +87,6 @@ export class AppReport extends LitElement { @state() canPackageList: boolean[] = [false, false, false]; @state() canPackage: boolean = false; @state() manifestEditorOpened: boolean = false; - @state() retestPath: string = "/assets/new/retest-black.svg"; @state() swSelectorOpen: boolean = false; @@ -144,6 +143,8 @@ export class AppReport extends LitElement { @state() stopShowingNotificationTooltip: boolean = false; @state() closeOpenTooltips: boolean = true; + @state() darkMode: boolean = false; + private possible_messages = [ {"messages": { "green": "PWABuilder has analyzed your Web Manifest and your manifest is ready for packaging! Great job you have a perfect score!", @@ -1841,6 +1842,12 @@ export class AppReport extends LitElement { // Responsible for setting running the initial tests async connectedCallback(): Promise { super.connectedCallback(); + + + // understand the users color preference + const result = window.matchMedia('(prefers-color-scheme: dark)'); + this.darkMode = result.matches; // TRUE if user prefers dark mode + const search = new URLSearchParams(location.search); const site = search.get('site'); if (site) { @@ -2914,7 +2921,7 @@ export class AppReport extends LitElement {

${this.lastTested}

retest site @@ -2957,18 +2964,21 @@ export class AppReport extends LitElement {

Available stores:

Windows - iOS + iOS Android Meta Quest From 77f102d9fe7efa616f22fbbb59efe66629318964 Mon Sep 17 00:00:00 2001 From: Jaylyn Barbee Date: Thu, 26 Oct 2023 17:04:36 -0400 Subject: [PATCH 2/2] Fixed weird quotes in docs --- .../generating-your-android-package.md | 2 +- docs/builder/android.md | 2 +- docs/builder/meta.md | 2 +- docs/builder/other-android.md | 2 +- docs/home/native-features.md | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/apps/blog/src/docs/android/generating-your-android-package/generating-your-android-package.md b/apps/blog/src/docs/android/generating-your-android-package/generating-your-android-package.md index 7aa814815..fa35d26ca 100644 --- a/apps/blog/src/docs/android/generating-your-android-package/generating-your-android-package.md +++ b/apps/blog/src/docs/android/generating-your-android-package/generating-your-android-package.md @@ -59,7 +59,7 @@ With this new functionality, you can customize your PWA for Android: - **Package ID:** The Android identifier unique to your app - **App name:** The full name of your app. We prepopulate this with the [app name](https://w3c.github.io/manifest/#name-member) from your PWA’s app manifest. - **Launcher name**: The name of your app in the Android launcher. This is typically the same as app name, or a shortened version of it. We prepopulate this with [short_name](https://w3c.github.io/manifest/#short_name-member) from your PWA’s app manifest. -- **App version**: This is the version string displayed to end users, e.g. “1.0.0.0” +- **App version**: This is the version string displayed to end users, e.g. "1.0.0.0" - **App version code**: This is an integer used as a private, internal version of your app. - **Host, Start URL, Manifest URL**: The URLs used to launch your PWA in the Android app. We prepopulate these for you from your app manifest. - **Status bar color, Nav bar color**: The color of the Android status bar and navigation bar in your PWA. You can also hide these bars by setting Display to diff --git a/docs/builder/android.md b/docs/builder/android.md index dff0fa3bf..a16e762c7 100644 --- a/docs/builder/android.md +++ b/docs/builder/android.md @@ -49,7 +49,7 @@ There are a ton of options you can configure when packaging for Android. Here's | **Package ID** | The Android identifier unique to your app | | **App name** | The full name of your app. We pre-populate this with the app name from your PWA’s app manifest. | | **Launcher name** | The name of your app in the Android launcher. This is typically the same as app name, or a shortened version of it. We pre-populate this with short_name from your PWA’s app manifest. | -| **App version** | This is the version string displayed to end users, e.g. “1.0.0.0” | +| **App version** | This is the version string displayed to end users, e.g. "1.0.0.0" | | **App version code** | This is an integer used as a private, internal version of your app. | | **Host, Start URL, Manifest URL** | The URLs used to launch your PWA in the Android app. We pre-populate these for you from your app manifest. | | **Theme color** | The theme color used for the Android status bar in your app. Typically, this should be set to your manifest's theme_color. | diff --git a/docs/builder/meta.md b/docs/builder/meta.md index bda141f94..6c0065027 100644 --- a/docs/builder/meta.md +++ b/docs/builder/meta.md @@ -52,7 +52,7 @@ Here's a breakdown of the properties associated with your package: | :------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------- | |**Package ID** | The ID of your Meta Quest app. We recommend a reverse-domain style string: com.domainname.appname. Letters, numbers, periods, hyphens, and underscores are allowed. | |**App name** | The name of your app as displayed to users. | -|**App version** | This is the version string displayed to end users, e.g. “1.0.0.0” | +|**App version** | This is the version string displayed to end users, e.g. "1.0.0.0" | |**App version code**| This is an integer used as a private, internal version of your app. | |**Manifest URL** | The URL of your app manifest. We pre-populate this for you. | |**Signing key**| How the APK app package will be digitally signed:

`None`: your app package won’t signed.

`New`: PWABuilder will create a new signing key for you. The signing key will be included in your zip download. Choosing this will let you fill in details like password, alias, and more.

`Mine`: Upload an existing .keystore file to use for signing the app package. This should be used if you are updating an existing app. You’ll be prompted to specify your existing key passwords and alias. | diff --git a/docs/builder/other-android.md b/docs/builder/other-android.md index 66285f694..31026fd25 100644 --- a/docs/builder/other-android.md +++ b/docs/builder/other-android.md @@ -50,7 +50,7 @@ There are a ton of options you can configure when packaging for Android. Here's | **Package ID** | The Android identifier unique to your app | | **App name** | The full name of your app. We pre-populate this with the app name from your PWA’s app manifest. | | **Launcher name** | The name of your app in the Android launcher. This is typically the same as app name, or a shortened version of it. We pre-populate this with short_name from your PWA’s app manifest. | -| **Version** | This is the version string displayed to end users, e.g. “1.0.0.0” | +| **Version** | This is the version string displayed to end users, e.g. "1.0.0.0" | | **Version code** | This is an integer used as a private, internal version of your app. | | **Host, Start URL, Manifest URL** | The URLs used to launch your PWA in the Android app. We pre-populate these for you from your app manifest. | | **Theme color** | The theme color used for the Android status bar in your app. Typically, this should be set to your manifest's theme_color. | diff --git a/docs/home/native-features.md b/docs/home/native-features.md index d506a7adb..d4ab9ef02 100644 --- a/docs/home/native-features.md +++ b/docs/home/native-features.md @@ -81,7 +81,7 @@ To enable window controls overlay, set the value of `display_override` in your w ```json { - “display_override”: [“window-controls-overlay”], + "display_override": ["window-controls-overlay"], "display": "standalone" } ```