Skip to content

Commit 142fa4b

Browse files
RockerbyRockerby
committed
Add in custom dialogs and sidebars
1 parent 9612f34 commit 142fa4b

File tree

7 files changed

+311
-130
lines changed

7 files changed

+311
-130
lines changed

‎src/Our.Umbraco.UiExamples.v14/src/manifest.ts

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -30,13 +30,13 @@ export const manifests: Array<ManifestTypes> = [
3030
},
3131
{
3232
"type": "dashboard",
33-
"alias": "example.ui.dashboard.dialogs",
34-
"name": "Dialogs",
35-
"element": () => import("./scripts/dashboards/custom-dialogs-dashboard.ts"),
33+
"alias": "example.ui.dashboard.modals",
34+
"name": "Modals",
35+
"element": () => import("./scripts/dashboards/custom-modals-dashboard.ts"),
3636
"weight": -1,
3737
"meta": {
38-
"label": "Dialogs",
39-
"pathname": "dialogs"
38+
"label": "Modals",
39+
"pathname": "modals"
4040
},
4141
"conditions": [
4242
{
@@ -64,9 +64,15 @@ export const manifests: Array<ManifestTypes> = [
6464
},
6565
{
6666
"type": "modal",
67-
"alias": "My.Modal",
68-
"name": "My Modal",
69-
"element": () => import("./scripts/dialogs/custom-modal.ts"),
67+
"alias": "My.Dialog",
68+
"name": "My Dialog",
69+
"element": () => import("./scripts/modals/custom-dialog.ts"),
70+
},
71+
{
72+
"type": "modal",
73+
"alias": "My.Sidebar",
74+
"name": "My Sidebar Modal",
75+
"element": () => import("./scripts/modals/custom-sidebar.ts"),
7076
}
7177
// ... insert as many manifests as you like
7278

‎src/Our.Umbraco.UiExamples.v14/src/scripts/dashboards/custom-dialogs-dashboard.ts

Lines changed: 0 additions & 112 deletions
This file was deleted.

‎src/Our.Umbraco.UiExamples.v14/src/scripts/dashboards/custom-modals-dashboard.ts

Lines changed: 200 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,200 @@
1+
import { LitElement, css, html } from 'lit'
2+
import { customElement, property } from 'lit/decorators.js'
3+
import { MY_DIALOG_TOKEN } from '../modals/custom-dialog.token';
4+
import { MY_SIDEBAR_TOKEN } from '../modals/custom-sidebar.token';
5+
import { UMB_MODAL_MANAGER_CONTEXT, UMB_CONTEXT_DEBUGGER_MODAL, UMB_CONFIRM_MODAL, UMB_CODE_EDITOR_MODAL } from '@umbraco-cms/backoffice/modal';
6+
import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';
7+
8+
/**
9+
* An example element.
10+
*
11+
* @slot - This element has a slot
12+
* @csspart button - The button
13+
*/
14+
@customElement('uie-custom-modals-dashboard')
15+
export default class UieCustomDialogsDashboard extends UmbElementMixin(LitElement) {
16+
#modalManagerContext?: typeof UMB_MODAL_MANAGER_CONTEXT.TYPE;
17+
18+
constructor() {
19+
super();
20+
this.consumeContext(UMB_MODAL_MANAGER_CONTEXT, (instance) => {
21+
this.#modalManagerContext = instance;
22+
// modalManagerContext is now ready to be used.
23+
});
24+
}
25+
26+
27+
@property({ attribute: false })
28+
message?: string;
29+
30+
@property({ attribute: false })
31+
returnData?: string;
32+
33+
render() {
34+
return html`
35+
<uui-box>
36+
<div slot="header" class="header-bar">
37+
<div>
38+
<h5 class="title">Modals<br/><span class="sub-header">Modals are the mechanism to display content on-top of the current display.</span></h5>
39+
</div>
40+
</div>
41+
<div slot="header-actions">
42+
<uui-button href="https://apidocs.umbraco.com/v14/ui/?path=/docs/uui_layout-modals-documentation--docs" target="_blank" look="primary" color="positive">
43+
<uui-badge slot="extra" label="A11Y label">!</uui-badge>
44+
<uui-icon name="info"></uui-icon>
45+
View the Storybook library</uui-button>
46+
</div>
47+
<slot>
48+
<p>The overlay service has a confirm option built, in with this you can quickly create a confirm dialog, to present your users with a simple option. The term "Modal" covers both types of pop-overs; <b>Dialogs</b> and <b>Sidebars</b>.</p>
49+
<!-- https://docs.umbraco.com/umbraco-cms/customizing/extending-overview/extension-types/modals/confirm-dialog -->
50+
<p>You can checkout all of the prebuilt modals by checking the <a href="https://github.com/umbraco/Umbraco.CMS.Backoffice/tree/849368269126fa816aca394e8e41ef1703cfe0c2/src/packages/core/modal/token" target="_blank">GitHub Source</a></p>
51+
52+
<uui-button look="primary" color="default" @click=${this._openConfirmationModal}>Confirm Dialog</uui-button>
53+
<uui-button look="primary" color="danger" @click=${this._openDebugDialog}>Debug Sidebar</uui-button>
54+
<uui-button look="secondary" color="danger" @click=${this._openCodeDialog}>Code Editor Sidebar</uui-button>
55+
<uui-button look="primary" color="warning" @click=${this._openCustomSidebar}>Custom Sidebar</uui-button>
56+
<uui-button look="outline" color="positive" @click=${this._openCustomModal}>Custom Dialog</uui-button>
57+
58+
<p>Your last action was: <b>${this.message ?? "Nothing clicked yet..."}</b></p>
59+
<p>With data: <code>${this.returnData ?? "{}"}</code></p>
60+
61+
</slot>
62+
</uui-box>`
63+
}
64+
65+
private _handleSubmit(isPositive?: boolean, data?: string) {
66+
this.message = isPositive ? "Submitted" : "Cancelled";
67+
this.returnData = data;
68+
}
69+
70+
private _openCodeDialog() {
71+
const ctx = this.#modalManagerContext?.open(this, UMB_CODE_EDITOR_MODAL, {
72+
data: {
73+
headline:"text",
74+
content:"Enter something",
75+
language:"javascript"
76+
},
77+
});
78+
79+
ctx?.onSubmit().then((e) => {
80+
this._handleSubmit(true, JSON.stringify(e));
81+
}).catch(() => {
82+
this._handleSubmit(false);
83+
})
84+
}
85+
private _openDebugDialog() {
86+
const ctx = this.#modalManagerContext?.open(this, UMB_CONTEXT_DEBUGGER_MODAL, {
87+
data: {
88+
content:"I am a debugger modal!"
89+
},
90+
});
91+
92+
ctx?.onSubmit().then((e) => {
93+
this._handleSubmit(true, JSON.stringify(e));
94+
}).catch(() => {
95+
this._handleSubmit(false);
96+
})
97+
}
98+
99+
private _openConfirmationModal() {
100+
const ctx = this.#modalManagerContext?.open(this, UMB_CONFIRM_MODAL, {
101+
data: {
102+
headline: "This is a confirmation modal",
103+
content: "Word up modal",
104+
cancelLabel: 'Cancel',
105+
confirmLabel: 'Confirm',
106+
color: 'positive' // You can change the colour of the submit button (but not cancel)!
107+
},
108+
});
109+
110+
ctx?.onSubmit().then((e) => {
111+
this._handleSubmit(true, JSON.stringify(e));
112+
}).catch(() => {
113+
this._handleSubmit(false);
114+
})
115+
}
116+
117+
private _openCustomModal() {
118+
const ctx = this.#modalManagerContext?.open(this, MY_DIALOG_TOKEN, {
119+
data: {
120+
headline: "My modal headline",
121+
}
122+
});
123+
124+
ctx?.onSubmit().then((e) => {
125+
console.log("Submitted", e);
126+
this._handleSubmit(true, JSON.stringify(e));
127+
}).catch(() => {
128+
this._handleSubmit(false);
129+
})
130+
}
131+
private _openCustomSidebar() {
132+
const ctx = this.#modalManagerContext?.open(this, MY_SIDEBAR_TOKEN, {
133+
data: {
134+
headline: "My sidebar headline",
135+
}
136+
});
137+
138+
ctx?.onSubmit().then((e) => {
139+
console.log("Submitted", e);
140+
this._handleSubmit(true, JSON.stringify(e));
141+
}).catch(() => {
142+
this._handleSubmit(false);
143+
})
144+
}
145+
146+
static styles = css`
147+
:host {
148+
padding: var(--uui-size-layout-1);
149+
display:block;
150+
}
151+
152+
::slotted(h1) {
153+
font-size: 3.2em;
154+
line-height: 1.1;
155+
}
156+
.header-bar {
157+
158+
display: flex;
159+
align-items: center;
160+
justify-content: space-between;
161+
}
162+
.title {
163+
font-size: 15px;
164+
color: #000;
165+
font-weight: 700;
166+
margin:0;
167+
}
168+
a {
169+
font-weight: 500;
170+
color: #646cff;
171+
text-decoration: inherit;
172+
}
173+
a:hover {
174+
color: #535bf2;
175+
}
176+
.sub-header {
177+
font-size: 13px;
178+
color: #515054;
179+
line-height: 1.6em;
180+
margin-top: 1px;
181+
}
182+
p:first-child {
183+
margin-top:0;
184+
}
185+
@media (prefers-color-scheme: light) {
186+
a:hover {
187+
color: #747bff;
188+
}
189+
button {
190+
background-color: #f9f9f9;
191+
}
192+
}
193+
`
194+
}
195+
196+
declare global {
197+
interface HTMLElementTagNameMap {
198+
'uie-custom-dialogs-dashboard': UieCustomDialogsDashboard
199+
}
200+
}

‎src/Our.Umbraco.UiExamples.v14/src/scripts/dialogs/custom-modal.token.ts renamed to ‎src/Our.Umbraco.UiExamples.v14/src/scripts/modals/custom-dialog.token.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@ export type MyModalValue = {
88
myData: string;
99
}
1010

11-
export const MY_MODAL_TOKEN = new UmbModalToken<MyModalData, MyModalValue>('My.Modal', {
11+
export const MY_DIALOG_TOKEN = new UmbModalToken<MyModalData, MyModalValue>('My.Dialog', {
1212
modal: {
13-
type: 'sidebar',
13+
type: 'dialog',
1414
size: 'small'
1515
}
1616
});

0 commit comments

Comments
 (0)