Skip to content

Commit da878ce

Browse files
Jaylyn-BarbeeJaylyn-Barbee
committed
added constraints for actions button
1 parent ecf2adc commit da878ce

3 files changed

Lines changed: 59 additions & 29 deletions

File tree

‎apps/pwabuilder/src/script/components/app-package-form-base.ts‎

Lines changed: 37 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -208,24 +208,24 @@ export class AppPackageFormBase extends LitElement {
208208
return html`
209209
<div class="colorPickerAndValue">
210210
<sl-color-picker
211-
id="${formInput.inputId}"
212-
class="form-control"
211+
id="${formInput.inputId}"
212+
class="form-control"
213213
placeholder="${formInput.placeholder || ''}"
214-
value="${(ifDefined(formInput.value) as string)}"
215-
type="color"
214+
value="${(ifDefined(formInput.value) as string)}"
215+
type="color"
216216
?required="${formInput.required}"
217-
name="${ifDefined(formInput.name)}"
217+
name="${ifDefined(formInput.name)}"
218218
minlength="${ifDefined(formInput.minLength)}"
219219
maxlength="${ifDefined(formInput.maxLength)}"
220220
min=${ifDefined(formInput.minValue)}
221-
max="${ifDefined(formInput.maxValue)}"
221+
max="${ifDefined(formInput.maxValue)}"
222222
pattern="${ifDefined(formInput.pattern)}"
223-
spellcheck="${ifDefined(formInput.spellcheck)}"
224-
?checked="${formInput.checked}"
223+
spellcheck="${ifDefined(formInput.spellcheck)}"
224+
?checked="${formInput.checked}"
225225
?readonly="${formInput.readonly}"
226226
custom-validation-error-message="${ifDefined(formInput.validationErrorMessage)}"
227227
?disabled=${formInput.disabled}
228-
@sl-change="${(e: UIEvent) => this.colorChanged(e, formInput)}"
228+
@sl-change="${(e: UIEvent) => this.colorChanged(e, formInput)}"
229229
@sl-invalid=${this.inputInvalid}
230230
></sl-color-picker>
231231
<p>${formInput.value}</p>
@@ -235,19 +235,35 @@ export class AppPackageFormBase extends LitElement {
235235
private renderFormInputTextbox(formInput: FormInput): TemplateResult {
236236
const inputType = formInput.type || 'text';
237237
const inputClass = formInput.type === 'radio' ? 'form-check-input' : 'form-control';
238-
return html`
239-
<input id="${formInput.inputId}" class="${inputClass}" placeholder="${formInput.placeholder || ''}"
240-
value="${ifDefined(formInput.value)}" type="${inputType}" ?required="${formInput.required}"
241-
name="${ifDefined(formInput.name)}" minlength="${ifDefined(formInput.minLength)}"
242-
maxlength="${ifDefined(formInput.maxLength)}" min=${ifDefined(formInput.minValue)}
243-
max="${ifDefined(formInput.maxValue)}" pattern="${ifDefined(formInput.pattern)}"
244-
spellcheck="${ifDefined(formInput.spellcheck)}" ?checked="${formInput.checked}" ?readonly="${formInput.readonly}"
238+
239+
const input = html`
240+
<input id="${formInput.inputId}"
241+
class="${inputClass}"
242+
placeholder="${formInput.placeholder || ''}"
243+
value="${ifDefined(formInput.value)}"
244+
type="${inputType}"
245+
?required="${formInput.required}"
246+
name="${ifDefined(formInput.name)}"
247+
minlength="${ifDefined(formInput.minLength)}"
248+
maxlength="${ifDefined(formInput.maxLength)}"
249+
min=${ifDefined(formInput.minValue)}
250+
max="${ifDefined(formInput.maxValue)}"
251+
pattern="${ifDefined(formInput.pattern)}"
252+
spellcheck="${ifDefined(formInput.spellcheck)}"
253+
?checked="${formInput.checked}"
254+
?readonly="${formInput.readonly}"
245255
custom-validation-error-message="${ifDefined(formInput.validationErrorMessage)}"
246256
?disabled=${formInput.disabled}
247-
@input="${(e: UIEvent) => this.inputChanged(e, formInput)}" @invalid=${this.inputInvalid} />
257+
@input="${(e: UIEvent) => this.inputChanged(e, formInput)}"
258+
@invalid=${this.inputInvalid} />
248259
`;
260+
261+
return formInput.disabled
262+
? html`<sl-tooltip content="${formInput.disabledTooltipText}">${input}</sl-tooltip>`
263+
: input;
249264
}
250265

266+
251267
private renderFormInputLabel(formInput: FormInput): TemplateResult {
252268
return html`
253269
<label for="${formInput.inputId}">
@@ -284,12 +300,12 @@ export class AppPackageFormBase extends LitElement {
284300
const inputElement = e.target as HTMLSlColorPicker;
285301

286302
if(!inputElement || !inputElement.nextElementSibling) return;
287-
303+
288304
const formattedValue = inputElement.getFormattedValue('hex').toLocaleUpperCase();
289305
const colorValue = inputElement.nextElementSibling;
290306
const newValue = document.createElement('p');
291307
newValue.textContent = formattedValue;
292-
308+
293309
colorValue.replaceWith(newValue);
294310

295311
// Fire the input handler
@@ -303,7 +319,7 @@ export class AppPackageFormBase extends LitElement {
303319
inputElement.setCustomValidity(errorMessage);
304320
inputElement.title = errorMessage;
305321
}
306-
322+
307323
}
308324

309325
private inputChanged(e: UIEvent, formInput: FormInput) {
@@ -381,5 +397,6 @@ export interface FormInput {
381397
validationErrorMessage?: string;
382398
checked?: boolean;
383399
disabled?: boolean;
400+
disabledTooltipText?: string;
384401
inputHandler?: (val: string, checked: boolean, input: HTMLInputElement) => void;
385402
}

‎apps/pwabuilder/src/script/components/windows-form.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,10 @@ export class WindowsForm extends AppPackageFormBase {
6060
flex-direction: column;
6161
}
6262
63+
.form-check:hover input:disabled {
64+
color: green;
65+
}
66+
6367
sl-details {
6468
margin-top: 1em;
6569
}
@@ -652,6 +656,7 @@ export class WindowsForm extends AppPackageFormBase {
652656
type: 'checkbox',
653657
checked: this.packageOptions.enableWebAppWidgets,
654658
disabled: !this.packageOptions.enableWebAppWidgets,
659+
disabledTooltipText: "You must have widgets set up in your web manifest to enable Widgets for your Windows package.",
655660
inputHandler: (_val: string, checked: boolean) =>
656661
(this.packageOptions.enableWebAppWidgets = checked),
657662
})}
@@ -670,6 +675,8 @@ export class WindowsForm extends AppPackageFormBase {
670675
inputId: 'actions-checkbox',
671676
type: 'checkbox',
672677
checked: this.showUploadActionsFile,
678+
disabled: (!this.packageOptions.manifest?.share_target || !this.packageOptions.manifest?.protocol_handlers),
679+
disabledTooltipText: "You must have both share_target and protocol_handlers set up in your web manifest to enable Actions.",
673680
inputHandler: (_val: string, checked: boolean) =>
674681
(this.updateActionsSelection(checked)),
675682
})}

‎libraries/manifest-validation/src/interfaces.ts‎

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -52,21 +52,27 @@ export interface Manifest {
5252
iconBlobUrls?: string[];
5353
icons?: Icon[];
5454
share_target?: ShareTarget;
55-
55+
protocol_handler?: ProtocolHandler
56+
5657
// for custom properties as well as using object notations: manifest[key]
5758
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
5859
// @ts-ignore - accomodate custom entries... these can be a pain
5960
[key: string]: string | boolean | undefined | Array<any> | any;
6061
}
61-
62+
63+
export interface ProtocolHandler {
64+
protocol: string;
65+
url: string;
66+
}
67+
6268
export interface ShortcutItem {
6369
name: string;
6470
url: string;
6571
description?: string;
6672
short_name?: string;
6773
icons?: Icon[];
6874
}
69-
75+
7076
export interface Icon {
7177
src: string;
7278
generated?: boolean;
@@ -75,7 +81,7 @@ export interface Manifest {
7581
purpose?: "any" | "maskable" | "monochrome";
7682
label?: string;
7783
}
78-
84+
7985
export interface Screenshot extends Icon {
8086
platform?:
8187
| "narrow"
@@ -93,34 +99,34 @@ export interface Manifest {
9399
| "microsoft-inbox"
94100
| "microsoft-store";
95101
}
96-
102+
97103
export interface RelatedApplication {
98104
platform: string;
99105
url?: string | null;
100106
id?: string | null;
101107
min_version?: string | null;
102108
fingerprints?: Fingerprint[];
103109
}
104-
110+
105111
export interface Fingerprint {
106112
type: string;
107113
value: string;
108114
}
109-
115+
110116
export interface ShareTarget {
111117
action?: string;
112118
method?: string;
113119
enctype?: string;
114120
params?: ShareTargetParams;
115121
}
116-
122+
117123
export interface ShareTargetParams {
118124
title?: string;
119125
text?: string;
120126
url?: string;
121127
files?: FilesParams[];
122128
}
123-
129+
124130
export interface FilesParams {
125131
name: string;
126132
accept: string[];

0 commit comments

Comments
 (0)