Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rearranged Android options #4601

Merged
merged 3 commits into from
Jan 8, 2024
Merged

Rearranged Android options #4601

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
69e406d
rearranged the android options per the issue, need to find out where …
Jaylyn-Barbee Jan 8, 2024
f1375ae
options rearranged
Jaylyn-Barbee Jan 8, 2024
8610a66
Merge branch 'staging' into jay/rearrange-android
jgw96 Jan 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
245 changes: 121 additions & 124 deletions apps/pwabuilder/src/script/components/android-form.ts
View file
Open in desktop
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
Open in desktop
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
Loading