Skip to content

Commit 92bcd34

Browse files
RockerbyRockerby
committed
Split out modals into inbuilt and custom
Remove comments in manifest
1 parent 142fa4b commit 92bcd34

File tree

3 files changed

+39
-77
lines changed

3 files changed

+39
-77
lines changed

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

Lines changed: 0 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -74,69 +74,4 @@ export const manifests: Array<ManifestTypes> = [
7474
"name": "My Sidebar Modal",
7575
"element": () => import("./scripts/modals/custom-sidebar.ts"),
7676
}
77-
// ... insert as many manifests as you like
78-
79-
/*"extensions": [
80-
{
81-
"type": "section",
82-
"alias": "example.ui.section",
83-
"name": "Example UI Dashboard",
84-
"weight": -1,
85-
"meta": {
86-
"label": "Example UI",
87-
"pathname": "my-dashboard"
88-
}
89-
},
90-
{
91-
"type": "dashboard",
92-
"alias": "example.ui.dashboard",
93-
"name": "Example UI Dashboard",
94-
"js": "/App_Plugins/Example.UI/scripts/dashboards/welcome-dashboard.js",
95-
"weight": -1,
96-
"meta": {
97-
"label": "Welcome Dashboard",
98-
"pathname": "welcome-dashboard"
99-
},
100-
"conditions": [
101-
{
102-
"alias": "Umb.Condition.SectionAlias",
103-
"match": "example.ui.section"
104-
}
105-
]
106-
},
107-
{
108-
"type": "dashboard",
109-
"alias": "example.ui.dashboard.dialogs",
110-
"name": "Dialogs",
111-
"js": "/App_Plugins/Example.UI/scripts/dashboards/custom-dialogs-dashboard.js",
112-
"weight": -1,
113-
"meta": {
114-
"label": "Dialogs",
115-
"pathname": "dialogs"
116-
},
117-
"conditions": [
118-
{
119-
"alias": "Umb.Condition.SectionAlias",
120-
"match": "example.ui.section"
121-
}
122-
]
123-
},
124-
{
125-
"type": "sectionView",
126-
"alias": "example.ui.dashboard.section.boxlayout",
127-
"js": "/App_Plugins/Example.UI/scripts/sections/box-layout-section.js",
128-
"name": "Box Layout",
129-
"meta": {
130-
"sections": [ "example.ui.section" ],
131-
"label": "Box Layout",
132-
"icon": "folder",
133-
"pathname": "box-layout"
134-
},
135-
"conditions": [
136-
{
137-
"alias": "Umb.Condition.SectionAlias",
138-
"match": "example.ui.section"
139-
}
140-
]
141-
}*/
14277
]

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

Lines changed: 36 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -32,33 +32,59 @@ export default class UieCustomDialogsDashboard extends UmbElementMixin(LitElemen
3232

3333
render() {
3434
return html`
35-
<uui-box>
35+
<umb-code-block copy="true">Your last action was: <b>${this.message ?? "Nothing clicked yet..."}</b>
36+
With data: ${this.returnData ?? "{}"}</umb-code-block>
37+
38+
<uui-box style="margin-top:20px;">
3639
<div slot="header" class="header-bar">
3740
<div>
3841
<h5 class="title">Modals<br/><span class="sub-header">Modals are the mechanism to display content on-top of the current display.</span></h5>
3942
</div>
4043
</div>
4144
<div slot="header-actions">
4245
<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>
4446
<uui-icon name="info"></uui-icon>
4547
View the Storybook library</uui-button>
48+
<uui-button href="https://docs.umbraco.com/umbraco-cms/customizing/extending-overview/extension-types/modals/confirm-dialog" target="_blank" look="primary" color="positive">
49+
<uui-icon name="info"></uui-icon>
50+
View the dialog tutorial</uui-button>
4651
</div>
4752
<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>
53+
<p>The term "Modal" covers both types of pop-overs; <b>Dialogs</b> and <b>Sidebars</b>. You can see examples below that define how you would open an Umbraco pre-built modal.</p>
54+
55+
<p>Modals come in two parts; the element and the token.<br/>
56+
The <b>token</b> is responsible for triggering the modal to be displayed using the <a href="https://docs.umbraco.com/umbraco-cms/customizing/extending-overview/extension-types/modals#basic-usage" target="_blank">ModalManagerContext</a><br/>
57+
The <b>element</b> is the UI components and is responsible for showing the HTML on screen, along with any in-modal functionality
58+
</p>
59+
60+
<p>You can see 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>
5161
5262
<uui-button look="primary" color="default" @click=${this._openConfirmationModal}>Confirm Dialog</uui-button>
5363
<uui-button look="primary" color="danger" @click=${this._openDebugDialog}>Debug Sidebar</uui-button>
5464
<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>
5765
58-
<p>Your last action was: <b>${this.message ?? "Nothing clicked yet..."}</b></p>
59-
<p>With data: <code>${this.returnData ?? "{}"}</code></p>
66+
<p></p>
67+
<p></code></p>
6068
6169
</slot>
70+
</uui-box>
71+
<uui-box style="margin-top:20px;">
72+
<div slot="header" class="header-bar">
73+
<div>
74+
<h5 class="title">Custom Modals</h5>
75+
</div>
76+
</div>
77+
<div slot="header-actions">
78+
<uui-button href="https://docs.umbraco.com/umbraco-cms/customizing/extending-overview/extension-types/modals/custom-modals" target="_blank" look="primary" color="positive">
79+
<uui-icon name="info"></uui-icon>
80+
View the custom modal tutorial</uui-button>
81+
</div>
82+
<slot>
83+
<p>When you have specific requirements and the inbuilt modals don't suit your needs, you can create your own custom modal and put anything you want in there.</p>
84+
85+
<uui-button look="primary" color="warning" @click=${this._openCustomSidebar}>Custom Sidebar</uui-button>
86+
<uui-button look="outline" color="positive" @click=${this._openCustomModal}>Custom Dialog</uui-button>
87+
</slot>
6288
</uui-box>`
6389
}
6490

@@ -71,11 +97,10 @@ export default class UieCustomDialogsDashboard extends UmbElementMixin(LitElemen
7197
const ctx = this.#modalManagerContext?.open(this, UMB_CODE_EDITOR_MODAL, {
7298
data: {
7399
headline:"text",
74-
content:"Enter something",
100+
content:"Enter something and it will be sent back from the modal",
75101
language:"javascript"
76102
},
77103
});
78-
79104
ctx?.onSubmit().then((e) => {
80105
this._handleSubmit(true, JSON.stringify(e));
81106
}).catch(() => {

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export default class MySidebarElement
2121
}
2222

2323
private _handleSubmit() {
24-
this.modalContext?.updateValue({ myData: "hello world", myText: this.textInput });
24+
this.modalContext?.updateValue({ myData: "I am added in code!", myText: this.textInput });
2525
this.modalContext?.submit();
2626
}
2727

@@ -49,6 +49,8 @@ export default class MySidebarElement
4949
class="element"
5050
label="text input"
5151
.value=${this.textInput || ""}
52+
placeholder="This text will be passed back to the opener!"
53+
width="100%"
5254
@input=${this.#onInput}
5355
>
5456
</uui-input>

0 commit comments

Comments
 (0)