|
1 | 1 | // noinspection CssUnresolvedCustomProperty |
2 | 2 |
|
3 | | -import {css, customElement, html, LitElement, property, state} from "lit-element"; |
| 3 | +import {css, html, LitElement} from "lit"; |
| 4 | +import {customElement, property, state} from 'lit/decorators.js'; |
4 | 5 | import {OrganiseType} from "./organise-type.ts"; |
5 | 6 | import {Toast} from "./toast.ts"; |
6 | 7 |
|
@@ -64,80 +65,80 @@ export default class BackofficeOrganiser extends LitElement { |
64 | 65 | const look = type.selected ? "primary" : "placeholder"; |
65 | 66 | return html |
66 | 67 | ` |
67 | | - <uui-button @click="${() => this.toggleType(type)}" style="--uui-button-height: 200px" look="${look}"> |
68 | | - ${type.label} |
69 | | - </uui-button> |
| 68 | + <uui-button @click="${() => this.toggleType(type)}" style="--uui-button-height: 200px" look="${look}"> |
| 69 | + ${type.label} |
| 70 | + </uui-button> |
70 | 71 | `; |
71 | 72 | }) |
72 | 73 |
|
73 | 74 | const disableButton = this.types.filter(x => x.selected).length === 0; |
74 | 75 | const form = html` |
75 | | - <uui-form> |
76 | | - <form id="backoffice-organiser-form" @submit=${this.onSubmit} name="backofficeOrganiserForm"> |
77 | | - <uui-form-layout-item> |
78 | | - <uui-label slot="label" for="parent" required="">Select types</uui-label> |
79 | | - <span slot="description"> |
| 76 | + <uui-form> |
| 77 | + <form id="backoffice-organiser-form" @submit=${this.onSubmit} name="backofficeOrganiserForm"> |
| 78 | + <uui-form-layout-item> |
| 79 | + <uui-label slot="label" for="parent" required="">Select types</uui-label> |
| 80 | + <span slot="description"> |
80 | 81 | Select the types to organise |
81 | 82 | </span> |
82 | | - <div class="organise-type-container"> |
83 | | - ${organiseTypes} |
84 | | - </div> |
85 | | - </uui-form-layout-item> |
86 | | - <uui-button type="submit" look="primary" label="Submit" .disabled="${disableButton}"></uui-button> |
87 | | - </form> |
88 | | - </uui-form> |
89 | | -
|
90 | | - <uui-toast-notification-container |
91 | | - class="toast-container" |
92 | | - id="toastContainer" |
93 | | - auto-close="3000" |
94 | | - bottom-up=""> |
95 | | - ${toasts} |
96 | | - </uui-toast-notification-container> |
97 | | - `; |
| 83 | + <div class="organise-type-container"> |
| 84 | + ${organiseTypes} |
| 85 | + </div> |
| 86 | + </uui-form-layout-item> |
| 87 | + <uui-button type="submit" look="primary" label="Submit" .disabled="${disableButton}"></uui-button> |
| 88 | + </form> |
| 89 | + </uui-form> |
| 90 | +
|
| 91 | + <uui-toast-notification-container |
| 92 | + class="toast-container" |
| 93 | + id="toastContainer" |
| 94 | + auto-close="3000" |
| 95 | + bottom-up=""> |
| 96 | + ${toasts} |
| 97 | + </uui-toast-notification-container> |
| 98 | + `; |
98 | 99 | const loader = html` |
99 | 100 | <uui-loader-bar style="color: blue"></uui-loader-bar> |
100 | 101 | `; |
101 | 102 |
|
102 | 103 | return html` |
103 | | - <uui-box headline="Welcome"> |
104 | | - <p> |
105 | | - This dashboard is designed to help you organise your Document Types, Media Types, Member Types and Data Types. |
106 | | - </p> |
107 | | - <p> |
108 | | - To get started, select at least one type to organise and click the submit button. |
109 | | - </p> |
110 | | - <uui-icon-registry-essential> |
111 | | - <uui-button look="outline" |
112 | | - href="https://github.com/jcdcdev/Umbraco.Community.BackOfficeOrganiser/?tab=readme-ov-file#umbracocommunitybackofficeorganiser" |
113 | | - target="_blank"> |
114 | | - <uui-icon name="document"></uui-icon> |
115 | | - Documentation |
116 | | - </uui-button> |
117 | | -
|
118 | | - <uui-button look="outline" |
119 | | - href="https://github.com/jcdcdev/Umbraco.Community.BackOfficeOrganiser/issues/new?assignees=bug&template=bug.yml" |
120 | | - target="_blank"> |
121 | | - <uui-icon name="alert"></uui-icon> |
122 | | - Report a Bug |
123 | | - </uui-button> |
124 | | -
|
125 | | - <uui-button look="outline" |
126 | | - href="https://github.com/jcdcdev/Umbraco.Community.BackOfficeOrganiser/issues/new?assignees=enhancement&template=feature_request.yml" |
127 | | - target="_blank"> |
128 | | - <uui-icon name="wand"></uui-icon> |
129 | | - Request a Feature |
130 | | - </uui-button> |
131 | | - </uui-icon-registry-essential> |
132 | | -
|
133 | | - </uui-box> |
134 | | - <br> |
135 | | - <uui-box headline="Organise"> |
136 | | - ${this.loading ? loader : form} |
137 | | - </uui-box> |
138 | | - <uui-modal-container> |
139 | | - ${modal} |
140 | | - </uui-modal-container> |
| 104 | + <uui-box headline="Welcome"> |
| 105 | + <p> |
| 106 | + This dashboard is designed to help you organise your Document Types, Media Types, Member Types and Data Types. |
| 107 | + </p> |
| 108 | + <p> |
| 109 | + To get started, select at least one type to organise and click the submit button. |
| 110 | + </p> |
| 111 | + <uui-icon-registry-essential> |
| 112 | + <uui-button look="outline" |
| 113 | + href="https://github.com/jcdcdev/Umbraco.Community.BackOfficeOrganiser/?tab=readme-ov-file#umbracocommunitybackofficeorganiser" |
| 114 | + target="_blank"> |
| 115 | + <uui-icon name="document"></uui-icon> |
| 116 | + Documentation |
| 117 | + </uui-button> |
| 118 | +
|
| 119 | + <uui-button look="outline" |
| 120 | + href="https://github.com/jcdcdev/Umbraco.Community.BackOfficeOrganiser/issues/new?assignees=bug&template=bug.yml" |
| 121 | + target="_blank"> |
| 122 | + <uui-icon name="alert"></uui-icon> |
| 123 | + Report a Bug |
| 124 | + </uui-button> |
| 125 | +
|
| 126 | + <uui-button look="outline" |
| 127 | + href="https://github.com/jcdcdev/Umbraco.Community.BackOfficeOrganiser/issues/new?assignees=enhancement&template=feature_request.yml" |
| 128 | + target="_blank"> |
| 129 | + <uui-icon name="wand"></uui-icon> |
| 130 | + Request a Feature |
| 131 | + </uui-button> |
| 132 | + </uui-icon-registry-essential> |
| 133 | +
|
| 134 | + </uui-box> |
| 135 | + <br> |
| 136 | + <uui-box headline="Organise"> |
| 137 | + ${this.loading ? loader : form} |
| 138 | + </uui-box> |
| 139 | + <uui-modal-container> |
| 140 | + ${modal} |
| 141 | + </uui-modal-container> |
141 | 142 | `; |
142 | 143 | } |
143 | 144 |
|
@@ -228,41 +229,41 @@ export default class BackofficeOrganiser extends LitElement { |
228 | 229 |
|
229 | 230 | static styles = [ |
230 | 231 | css` |
231 | | - .organise-type-container uui-button { |
232 | | - width: 100%; |
233 | | - } |
234 | | -
|
235 | | - .toast-container { |
236 | | - top: 0; |
237 | | - left: 0; |
238 | | - right: 0; |
239 | | - height: 100vh; |
240 | | - padding: var(--uui-size-layout-1); |
241 | | - } |
242 | | -
|
243 | | - .organise-type-container { |
244 | | - display: flex; |
245 | | - flex-direction: row; |
246 | | - gap: var(--uui-size-3); |
247 | | - max-width: 900px; |
248 | | - } |
249 | | -
|
250 | | - .organise-type { |
251 | | - background-color: var(--uui-color-background); |
252 | | - cursor: pointer; |
253 | | - padding: var(--uui-size-6); |
254 | | - } |
255 | | -
|
256 | | - .organise-type.active { |
257 | | - background-color: var(--uui-color-selected); |
258 | | - color: white; |
259 | | - } |
260 | | -
|
261 | | - .alert { |
262 | | - padding: var(--uui-size-3); |
263 | | - background-color: var(--uui-color-danger-emphasis); |
264 | | - color: var(--uui-color-danger-contrast); |
265 | | - } |
| 232 | + .organise-type-container uui-button { |
| 233 | + width: 100%; |
| 234 | + } |
| 235 | +
|
| 236 | + .toast-container { |
| 237 | + top: 0; |
| 238 | + left: 0; |
| 239 | + right: 0; |
| 240 | + height: 100vh; |
| 241 | + padding: var(--uui-size-layout-1); |
| 242 | + } |
| 243 | +
|
| 244 | + .organise-type-container { |
| 245 | + display: flex; |
| 246 | + flex-direction: row; |
| 247 | + gap: var(--uui-size-3); |
| 248 | + max-width: 900px; |
| 249 | + } |
| 250 | +
|
| 251 | + .organise-type { |
| 252 | + background-color: var(--uui-color-background); |
| 253 | + cursor: pointer; |
| 254 | + padding: var(--uui-size-6); |
| 255 | + } |
| 256 | +
|
| 257 | + .organise-type.active { |
| 258 | + background-color: var(--uui-color-selected); |
| 259 | + color: white; |
| 260 | + } |
| 261 | +
|
| 262 | + .alert { |
| 263 | + padding: var(--uui-size-3); |
| 264 | + background-color: var(--uui-color-danger-emphasis); |
| 265 | + color: var(--uui-color-danger-contrast); |
| 266 | + } |
266 | 267 | ` |
267 | 268 | ] |
268 | 269 | } |
|
0 commit comments