Skip to content

Commit e7461f2

Browse files
mattbrailsfordmattbrailsford
committed
Improve dashboard / modal layout
1 parent db6526d commit e7461f2

File tree

2 files changed

+61
-89
lines changed

2 files changed

+61
-89
lines changed

‎src/Umbraco.Commerce.Checkout/Client/src/backoffice/dashboards/installer-dashboard.element.ts‎

Lines changed: 37 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -25,42 +25,44 @@ export class UcCheckoutInstallerDashboard extends UmbElementMixin(LitElement) {
2525

2626
render() {
2727
return html`
28-
<uui-box>
29-
<div class="ucc-installer-wrapper">
28+
<umb-body-layout header-transparent>
29+
<uui-box>
30+
<div class="ucc-installer-wrapper">
3031
31-
<!-- Header -->
32-
<div>
33-
<div style="display: inline-flex; align-items: center; justify-content: center; background-color: #141432; width: 120px; height: 120px; border-radius: 100%;">
34-
<uui-icon name='icon-cash-register' style="color: white; font-size: 80px;"></uui-icon>
35-
</div>
36-
</div>
37-
<div class="installer-intro" style="margin-bottom: 5px;">
38-
<h3>Checkout</h3>
39-
</div>
40-
<p>
41-
Umbraco Commerce Checkout provides a ready made checkout flow for Umbraco Commerce
42-
</p>
32+
<!-- Header -->
33+
<div>
34+
<div style="display: inline-flex; align-items: center; justify-content: center; background-color: #141432; width: 120px; height: 120px; border-radius: 100%;">
35+
<uui-icon name='icon-cash-register' style="color: white; font-size: 80px;"></uui-icon>
36+
</div>
37+
</div>
38+
<div class="installer-intro" style="margin-bottom: 5px;">
39+
<h3>Checkout</h3>
40+
</div>
41+
<p>
42+
Umbraco Commerce Checkout provides a ready made checkout flow for Umbraco Commerce
43+
</p>
4344
44-
<!-- Installer -->
45-
<h4>Getting Started</h4>
46-
<p style="margin-bottom: 10px;">
47-
To get started with Umbraco Commerce Checkout we first need to install all the related content.<br />
48-
By clicking the <strong>Install</strong> button below Umbraco Commerce Checkout will install all the Data Types,<br />
49-
Doc Types and Content nodes needed.
50-
</p>
51-
<p>
52-
If you have installed Umbraco Commerce Checkout before, the installer will also perform the relevant upgrades.<br />
53-
<br /><strong>NB: Nothing</strong> will be removed as part of an upgrade.
54-
</p>
55-
<p style="margin-top: 30px;">
56-
<uui-button
57-
look="primary"
58-
label="Install"
59-
type="button"
60-
@click=${this.#onOpenRootPickerClick}></uui-button>
61-
</p>
62-
</div>
63-
</uui-box>
45+
<!-- Installer -->
46+
<h4>Getting Started</h4>
47+
<p style="margin-bottom: 10px;">
48+
To get started with Umbraco Commerce Checkout we first need to install all the related content.<br />
49+
By clicking the <strong>Install</strong> button below Umbraco Commerce Checkout will install all the Data Types,<br />
50+
Doc Types and Content nodes needed.
51+
</p>
52+
<p>
53+
If you have installed Umbraco Commerce Checkout before, the installer will also perform the relevant upgrades.<br />
54+
<br /><strong>NB: Nothing</strong> will be removed as part of an upgrade.
55+
</p>
56+
<p style="margin-top: 30px;">
57+
<uui-button
58+
look="primary"
59+
label="Install"
60+
type="button"
61+
@click=${this.#onOpenRootPickerClick}></uui-button>
62+
</p>
63+
</div>
64+
</uui-box>
65+
</umb-body-layout>
6466
`;
6567
}
6668

@@ -93,4 +95,4 @@ declare global {
9395
interface HTMLElementTagNameMap {
9496
[ELEMENT_NAME]: UcCheckoutInstallerDashboard;
9597
}
96-
}
98+
}

‎src/Umbraco.Commerce.Checkout/Client/src/backoffice/modals/installer-modal.element.ts‎

Lines changed: 24 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -38,40 +38,14 @@ export default class UccInstallerConfigModal extends UmbElementMixin(LitElement)
3838
private _installButton: {
3939
state: UUIButtonState
4040
} = {
41-
state: undefined,
42-
};
43-
44-
@state()
45-
private _cancelButton: {
46-
state: UUIButtonState
47-
} = {
48-
state: undefined,
49-
};
50-
51-
@state()
52-
private _formState = {
53-
isDirty: false,
54-
isValid: true,
41+
state: undefined,
5542
};
5643

57-
#validateForm() {
58-
const isValid = !!this._installationRoot;
59-
this._formState = {
60-
...this._formState,
61-
isDirty: true,
62-
isValid,
63-
};
64-
65-
return isValid;
66-
}
67-
6844
#handleCancel() {
6945
this.modalContext?.reject();
7046
}
7147

7248
async #handleSubmit() {
73-
if (!this.#validateForm()) { return; }
74-
7549
this._installButton = {
7650
...this._installButton,
7751
state: 'waiting',
@@ -128,48 +102,41 @@ export default class UccInstallerConfigModal extends UmbElementMixin(LitElement)
128102
#onSiteRootNodeChange(event: Event) {
129103
const element = event.target as UmbInputDocumentElement;
130104
this._installationRoot = element.value;
131-
this.#validateForm();
132105
}
133106

134107
render() {
135108
return html`
136109
<umb-body-layout headline='Install Umbraco Commerce Checkout'>
137-
<uui-box>
138-
<umb-property-layout
139-
orientation='vertical'
140-
?invalid=${!this._formState.isValid}
141-
label='Site Root Node'
142-
description='The root node of the site under which to install the checkout pages. The node itself, or an ancestor of this node must have a fully configured store picker property defined.'
143-
>
144-
<umb-input-content
145-
slot='editor'
146-
147-
.type=${'content'}
148-
.min=${1}
149-
.max=${1}
150-
?showOpenButton=${false}
151-
@change=${this.#onSiteRootNodeChange}
152-
.value=${this._installationRoot}
153-
>
154-
</umb-input-content>
155-
</umb-property-layout>
156-
${!this._formState.isValid
157-
? html`<div class='error'>Please select the site root node</div>`
158-
: nothing
159-
}
160-
</uui-box>
110+
<uui-box>
111+
<umb-property-layout
112+
orientation='vertical'
113+
label='Site Root Node'
114+
description='The root node of the site under which to install the checkout pages. The node itself, or an ancestor of this node must have a fully configured store picker property defined.'
115+
>
116+
<umb-input-content
117+
slot='editor'
118+
.type=${'content'}
119+
.max=${1}
120+
?showOpenButton=${false}
121+
@change=${this.#onSiteRootNodeChange}
122+
.value=${this._installationRoot}
123+
>
124+
</umb-input-content>
125+
</umb-property-layout>
126+
</uui-box>
127+
</uc-stack>
161128
<umb-footer-layout slot="footer">
162129
<uui-button
163130
slot="actions"
164131
look="secondary"
165132
@click=${this.#handleCancel}
166-
state=${ifDefined(this._cancelButton.state)}
167133
label="Cancel"></uui-button>
168134
<uui-button
169135
slot="actions"
170136
look="primary"
171-
state=${ifDefined(this._installButton.state)}
137+
state=${ifDefined(this._installButton.state)}
172138
@click=${this.#handleSubmit}
139+
.disabled=${!this._installationRoot}
173140
label="Install"></uui-button>
174141
</umb-footer-layout>
175142
</umb-body-layout>
@@ -180,5 +147,8 @@ export default class UccInstallerConfigModal extends UmbElementMixin(LitElement)
180147
.error {
181148
color: var(--uui-color-danger);
182149
}
150+
umb-property-layout {
151+
padding: 0;
152+
}
183153
`;
184154
}

0 commit comments

Comments
 (0)