Skip to content

Commit

Permalink
Rearranged Android options (#4601)
Browse files Browse the repository at this point in the history 
fixes #4382 
<!-- Link to relevant issue (for ex: "fixes #1234") which will
automatically close the issue once the PR is merged -->

## PR Type
<!-- Please uncomment one ore more that apply to this PR -->

<!-- - Bugfix -->
Feature
<!-- - Code style update (formatting) -->
<!-- - Refactoring (no functional changes, no api changes) -->
<!-- - Build or CI related changes -->
<!-- - Documentation content changes -->
<!-- - Sample app changes -->
<!-- - Other... Please describe: -->


## Describe the current behavior?
<!-- Please describe the current behavior that is being modified or link
to a relevant issue. -->
Options in old order 

## Describe the new behavior?
Options in new order

## PR Checklist

- [x] Test: run `npm run test` and ensure that all tests pass
- [x] Target main branch (or an appropriate release branch if
appropriate for a bug fix)
- [x] Ensure that your contribution follows [standard accessibility
guidelines](https://docs.microsoft.com/en-us/microsoft-edge/accessibility/design).
Use tools like https://webhint.io/ to validate your changes.

## Additional Information

---------

Co-authored-by: Justin Willis <[email protected]>
  • Loading branch information
@Jaylyn-Barbee @jgw96
Jaylyn-Barbee and jgw96 committed Jan 8, 2024
1 parent d53abe5 commit 134e19b
Show file tree
Hide file tree
Showing 2 changed files with 122 additions and 125 deletions.
245 changes: 121 additions & 124 deletions apps/pwabuilder/src/script/components/android-form.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -302,6 +302,20 @@ export class AndroidForm extends AppPackageFormBase {
inputHandler: (val: string) => this.packageOptions.launcherName = val
})}
</div>
<div class="form-group">
<label>${localeStrings.text.android.titles.source_code}</label>
<div class="form-check">
${this.renderFormInput({
label: 'Enable',
tooltip: 'If enabled, your download will include the source code for your Android app.',
inputId: 'include-src-input',
type: 'checkbox',
checked: this.packageOptions.includeSourceCode === true,
inputHandler: (_, checked) => this.packageOptions.includeSourceCode = checked
})}
</div>
</div>
</div>
<!-- The "all settings" section of the options dialog -->
Expand All @@ -310,8 +324,36 @@ export class AndroidForm extends AppPackageFormBase {
<p>All Settings</p>
<img class="dropdown_icon" src="/assets/new/dropdownIcon.svg" alt="dropdown toggler"/>
</div>
<div class="adv-settings">
<div class="form-group">
${this.renderFormInput({
label: 'Host',
tooltip: `The host portion of your PWA's URL. For example, mypwa.com`,
inputId: 'host-input',
required: true,
placeholder: 'mypwa.com',
value: this.packageOptions.host,
minLength: 3,
spellcheck: false,
inputHandler: (val: string) => this.packageOptions.host = val
})}
</div>
<div class="form-group">
${this.renderFormInput({
label: 'Start URL',
tooltip: `The start path for your PWA. Must be relative to the Host URL. If Host URL contains your PWA, you can use '/' to specify a default`,
tooltipLink: 'https://docs.pwabuilder.com/#/builder/manifest?id=start_url-string',
inputId: 'start-url-input',
required: true,
placeholder: '/index.html',
value: this.packageOptions.startUrl,
spellcheck: false,
validationErrorMessage: "You must specify a relative start URL. If you don't have a start URL, use '/'",
inputHandler: (val: string) => this.packageOptions.startUrl = val
})}
</div>
<div class="form-group">
${this.renderFormInput({
label: 'Version',
Expand Down Expand Up @@ -342,35 +384,6 @@ export class AndroidForm extends AppPackageFormBase {
})}
</div>
<div class="form-group">
${this.renderFormInput({
label: 'Host',
tooltip: `The host portion of your PWA's URL. For example, mypwa.com`,
inputId: 'host-input',
required: true,
placeholder: 'mypwa.com',
value: this.packageOptions.host,
minLength: 3,
spellcheck: false,
inputHandler: (val: string) => this.packageOptions.host = val
})}
</div>
<div class="form-group">
${this.renderFormInput({
label: 'Start URL',
tooltip: `The start path for your PWA. Must be relative to the Host URL. If Host URL contains your PWA, you can use '/' to specify a default`,
tooltipLink: 'https://docs.pwabuilder.com/#/builder/manifest?id=start_url-string',
inputId: 'start-url-input',
required: true,
placeholder: '/index.html',
value: this.packageOptions.startUrl,
spellcheck: false,
validationErrorMessage: "You must specify a relative start URL. If you don't have a start URL, use '/'",
inputHandler: (val: string) => this.packageOptions.startUrl = val
})}
</div>
<div class="form-group">
${this.renderFormInput({
label: 'Theme color',
Expand Down Expand Up @@ -514,31 +527,18 @@ export class AndroidForm extends AppPackageFormBase {
</div>
<div class="form-group">
<label>${localeStrings.text.android.titles.fallback}</label>
<div class="form-check">
${this.renderFormInput({
label: 'Custom Tabs',
tooltip: `When Trusted Web Activity (TWA) is unavailable, use Chrome Custom Tabs as a fallback to run your app.`,
tooltipLink: 'https://developer.chrome.com/docs/android/custom-tabs/',
inputId: 'chrome-custom-tab-fallback-input',
type: 'radio',
name: 'fallbackType',
value: 'customtabs',
checked: this.packageOptions.fallbackType === 'customtabs',
inputHandler: () => this.packageOptions.fallbackType = 'customtabs'
})}
</div>
<label>
${localeStrings.text.android.titles.settings_shortcut}
</label>
<div class="form-check">
${this.renderFormInput({
label: 'Web View',
tooltip: `When Trusted Web Activity (TWA) is unavailable, use a web view as a fallback to run your app.`,
tooltipLink: 'https://developer.chrome.com/docs/android/custom-tabs/',
inputId: 'web-view-fallback-input',
type: 'radio',
name: 'fallbackType',
value: 'webview',
checked: this.packageOptions.fallbackType === 'webview',
inputHandler: () => this.packageOptions.fallbackType = 'webview'
label: 'Enable',
tooltip: 'If enabled, users can long-press on your app tile and a Settings menu item will appear, letting users manage space for your app.',
tooltipLink: 'https://github.com/pwa-builder/PWABuilder/issues/1113',
inputId: 'site-settings-shortcut-input',
type: 'checkbox',
checked: this.packageOptions.enableSiteSettingsShortcut === true,
inputHandler: (_, checked) => this.packageOptions.enableSiteSettingsShortcut = checked
})}
</div>
</div>
Expand Down Expand Up @@ -622,43 +622,70 @@ export class AndroidForm extends AppPackageFormBase {
</div>
</div>` : null}
${this.isGooglePlayApk ?
html`
<div class="form-group">
<label
>${localeStrings.text.android.titles
.google_play_billing}</label
>
<div class="form-check">
${this.renderFormInput({
label: 'Enable',
tooltip: 'If enabled, your PWA can sell in-app purchases and subscriptions via the Digital Goods API.',
tooltipLink: 'https://developer.chrome.com/docs/android/trusted-web-activity/receive-payments-play-billing/',
inputId: 'google-play-billing-input',
type: 'checkbox',
checked: this.packageOptions.features.playBilling?.enabled === true,
inputHandler: (_, checked) => this.packageOptions.features.playBilling!.enabled = checked
})}
</div>
</div>` : null}
${this.isGooglePlayApk ?
html`
<div class="form-group">
<label
>${localeStrings.text.android.titles
.google_play_billing}</label
>
<label>${localeStrings.text.android.titles.signing_key}</label>
<div class="form-check">
${this.renderFormInput({
label: 'Enable',
tooltip: 'If enabled, your PWA can sell in-app purchases and subscriptions via the Digital Goods API.',
tooltipLink: 'https://developer.chrome.com/docs/android/trusted-web-activity/receive-payments-play-billing/',
inputId: 'google-play-billing-input',
type: 'checkbox',
checked: this.packageOptions.features.playBilling?.enabled === true,
inputHandler: (_, checked) => this.packageOptions.features.playBilling!.enabled = checked
label: 'New',
tooltip: `Recommended for new apps in Google Play. PWABuilder will generate a new signing key for you and sign your package with it. Your download will contain the new signing details.`,
inputId: 'signing-new-input',
name: 'signingMode',
value: 'new',
type: 'radio',
checked: this.packageOptions.signingMode === 'new',
inputHandler: () => this.androidSigningModeChanged('new')
})}
</div>
</div>` : null}
<div class="form-group">
<label>
${localeStrings.text.android.titles.settings_shortcut}
</label>
<div class="form-check">
${this.renderFormInput({
label: 'Enable',
tooltip: 'If enabled, users can long-press on your app tile and a Settings menu item will appear, letting users manage space for your app.',
tooltipLink: 'https://github.com/pwa-builder/PWABuilder/issues/1113',
inputId: 'site-settings-shortcut-input',
type: 'checkbox',
checked: this.packageOptions.enableSiteSettingsShortcut === true,
inputHandler: (_, checked) => this.packageOptions.enableSiteSettingsShortcut = checked
label: 'Use mine',
tooltip: 'Recommended for existing apps in Google Play. Use this option if you already have a signing key and you want to publish a new version of an existing app in Google Play.',
inputId: 'signing-mine-input',
name: 'signingMode',
value: 'mine',
type: 'radio',
checked: this.packageOptions.signingMode === 'mine',
inputHandler: () => this.androidSigningModeChanged('mine')
})}
</div>
<div class="form-check">
${this.renderFormInput({
label: 'None',
tooltip: 'PWABuilder will generate a raw, unsigned APK. Raw, unsigned APKs cannot be uploaded to the Google Play Store.',
inputId: 'signing-none-input',
name: 'signingMode',
value: 'none',
type: 'radio',
checked: this.packageOptions.signingMode === 'none',
inputHandler: () => this.androidSigningModeChanged('none')
})}
</div>
</div>
${this.renderSigningKeyFields()}` : null}
${this.isGooglePlayApk ?
html`
<div class="form-group">
Expand Down Expand Up @@ -694,64 +721,34 @@ export class AndroidForm extends AppPackageFormBase {
</div>
<div class="form-group">
<label>${localeStrings.text.android.titles.source_code}</label>
<div class="form-check">
${this.renderFormInput({
label: 'Enable',
tooltip: 'If enabled, your download will include the source code for your Android app.',
inputId: 'include-src-input',
type: 'checkbox',
checked: this.packageOptions.includeSourceCode === true,
inputHandler: (_, checked) => this.packageOptions.includeSourceCode = checked
})}
</div>
</div>
${this.isGooglePlayApk ?
html`
<div class="form-group">
<label>${localeStrings.text.android.titles.signing_key}</label>
<div class="form-check">
${this.renderFormInput({
label: 'New',
tooltip: `Recommended for new apps in Google Play. PWABuilder will generate a new signing key for you and sign your package with it. Your download will contain the new signing details.`,
inputId: 'signing-new-input',
name: 'signingMode',
value: 'new',
type: 'radio',
checked: this.packageOptions.signingMode === 'new',
inputHandler: () => this.androidSigningModeChanged('new')
})}
</div>
<label>${localeStrings.text.android.titles.fallback}</label>
<div class="form-check">
${this.renderFormInput({
label: 'Use mine',
tooltip: 'Recommended for existing apps in Google Play. Use this option if you already have a signing key and you want to publish a new version of an existing app in Google Play.',
inputId: 'signing-mine-input',
name: 'signingMode',
value: 'mine',
label: 'Custom Tabs',
tooltip: `When Trusted Web Activity (TWA) is unavailable, use Chrome Custom Tabs as a fallback to run your app.`,
tooltipLink: 'https://developer.chrome.com/docs/android/custom-tabs/',
inputId: 'chrome-custom-tab-fallback-input',
type: 'radio',
checked: this.packageOptions.signingMode === 'mine',
inputHandler: () => this.androidSigningModeChanged('mine')
name: 'fallbackType',
value: 'customtabs',
checked: this.packageOptions.fallbackType === 'customtabs',
inputHandler: () => this.packageOptions.fallbackType = 'customtabs'
})}
</div>
<div class="form-check">
${this.renderFormInput({
label: 'None',
tooltip: 'PWABuilder will generate a raw, unsigned APK. Raw, unsigned APKs cannot be uploaded to the Google Play Store.',
inputId: 'signing-none-input',
name: 'signingMode',
value: 'none',
label: 'Web View',
tooltip: `When Trusted Web Activity (TWA) is unavailable, use a web view as a fallback to run your app.`,
tooltipLink: 'https://developer.chrome.com/docs/android/custom-tabs/',
inputId: 'web-view-fallback-input',
type: 'radio',
checked: this.packageOptions.signingMode === 'none',
inputHandler: () => this.androidSigningModeChanged('none')
name: 'fallbackType',
value: 'webview',
checked: this.packageOptions.fallbackType === 'webview',
inputHandler: () => this.packageOptions.fallbackType = 'webview'
})}
</div>
</div>
${this.renderSigningKeyFields()}` :
null}
</div>
</sl-details>
</div>
Expand Down
2 changes: 1 addition & 1 deletion apps/pwabuilder/src/script/components/publish-pane.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -603,7 +603,7 @@ export class PublishPane extends LitElement {
@media(min-height: 900px){
#pp-frame-wrapper {
width: 100%;
height: 80vh;
height: 85vh;
}
}
Expand Down

0 comments on commit 134e19b

Please sign in to comment.