Skip to content

Commit c9120e0

Browse files
madsrasmussenmadsrasmussen
committed
introduce a dashboard-app-layout element
1 parent f7284f9 commit c9120e0

File tree

15 files changed

+231
-134
lines changed

15 files changed

+231
-134
lines changed

‎src/Umbraco.Web.UI.Client/src/packages/core/_temp-poc-location/certification/certification-intro-dashboard-app.element.ts

Lines changed: 26 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,33 @@
11
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
2-
import { html, customElement, css } from '@umbraco-cms/backoffice/external/lit';
2+
import { html, customElement, css, property } from '@umbraco-cms/backoffice/external/lit';
33
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
4+
import type {
5+
ManifestDashboardApp,
6+
UmbDashboardAppElement,
7+
UmbDashboardAppSize,
8+
} from '@umbraco-cms/backoffice/dashboard';
9+
10+
@customElement('umb-certification-intro-dashboard-app')
11+
export class UmbCertificationIntroDashboardAppElement extends UmbLitElement implements UmbDashboardAppElement {
12+
@property({ type: Object })
13+
manifest?: ManifestDashboardApp;
14+
15+
@property({ type: String })
16+
size?: UmbDashboardAppSize;
417

5-
const elementName = 'umb-training-intro-dashboard-app';
6-
@customElement(elementName)
7-
export class UmbCertificationIntroDashboardAppElement extends UmbLitElement {
818
override render() {
919
return html`
10-
<p>
11-
<umb-localize key="settingsDashboard_trainingDescription"></umb-localize>
12-
</p>
13-
<uui-button
14-
look="outline"
15-
href="https://umbraco.com/training/"
16-
label=${this.localize.term('settingsDashboard_getCertified')}
17-
target="_blank"
18-
rel="noopener"></uui-button>
20+
<umb-dashboard-app-layout headline=${this.localize.string('#settingsDashboard_trainingHeader')}>
21+
<p>
22+
<umb-localize key="settingsDashboard_trainingDescription"></umb-localize>
23+
</p>
24+
<uui-button
25+
look="outline"
26+
href="https://umbraco.com/training/"
27+
label=${this.localize.term('settingsDashboard_getCertified')}
28+
target="_blank"
29+
rel="noopener"></uui-button>
30+
</umb-dashboard-app-layout>
1931
`;
2032
}
2133

@@ -33,6 +45,6 @@ export { UmbCertificationIntroDashboardAppElement as element };
3345

3446
declare global {
3547
interface HTMLElementTagNameMap {
36-
[elementName]: UmbCertificationIntroDashboardAppElement;
48+
['umb-certification-intro-dashboard-app']: UmbCertificationIntroDashboardAppElement;
3749
}
3850
}

‎src/Umbraco.Web.UI.Client/src/packages/core/_temp-poc-location/community/community-intro-dashboard-app.element.ts

Lines changed: 30 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,40 @@
11
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
2-
import { html, customElement, css } from '@umbraco-cms/backoffice/external/lit';
2+
import { html, customElement, css, property } from '@umbraco-cms/backoffice/external/lit';
33
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
4+
import type {
5+
ManifestDashboardApp,
6+
UmbDashboardAppElement,
7+
UmbDashboardAppSize,
8+
} from '@umbraco-cms/backoffice/dashboard';
49

510
const elementName = 'umb-community-intro-dashboard-app';
611
@customElement(elementName)
7-
export class UmbCommunityIntroDashboardAppElement extends UmbLitElement {
12+
export class UmbCommunityIntroDashboardAppElement extends UmbLitElement implements UmbDashboardAppElement {
13+
@property({ type: Object })
14+
manifest?: ManifestDashboardApp;
15+
16+
@property({ type: String })
17+
size?: UmbDashboardAppSize;
18+
819
override render() {
920
return html`
10-
<p>
11-
<umb-localize key="settingsDashboard_communityDescription"></umb-localize>
12-
</p>
13-
<uui-button
14-
look="outline"
15-
href="https://our.umbraco.com/forum"
16-
label=${this.localize.term('settingsDashboard_goForum')}
17-
target="_blank"
18-
rel="noopener"></uui-button>
19-
<uui-button
20-
look="outline"
21-
href="https://discord.umbraco.com"
22-
label=${this.localize.term('settingsDashboard_chatWithCommunity')}
23-
target="_blank"
24-
rel="noopener"></uui-button>
21+
<umb-dashboard-app-layout headline=${this.localize.string('#settingsDashboard_communityHeader')}>
22+
<p>
23+
<umb-localize key="settingsDashboard_communityDescription"></umb-localize>
24+
</p>
25+
<uui-button
26+
look="outline"
27+
href="https://our.umbraco.com/forum"
28+
label=${this.localize.term('settingsDashboard_goForum')}
29+
target="_blank"
30+
rel="noopener"></uui-button>
31+
<uui-button
32+
look="outline"
33+
href="https://discord.umbraco.com"
34+
label=${this.localize.term('settingsDashboard_chatWithCommunity')}
35+
target="_blank"
36+
rel="noopener"></uui-button>
37+
</umb-dashboard-app-layout>
2538
`;
2639
}
2740

‎src/Umbraco.Web.UI.Client/src/packages/core/_temp-poc-location/documentation/documentation-intro-dashboard-app.element.ts

Lines changed: 24 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,34 @@
11
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
2-
import { html, customElement, css } from '@umbraco-cms/backoffice/external/lit';
2+
import { html, customElement, css, property } from '@umbraco-cms/backoffice/external/lit';
33
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
4+
import type {
5+
ManifestDashboardApp,
6+
UmbDashboardAppElement,
7+
UmbDashboardAppSize,
8+
} from '@umbraco-cms/backoffice/dashboard';
49

510
const elementName = 'umb-documentation-intro-dashboard-app';
611
@customElement(elementName)
7-
export class UmbDocumentationIntroDashboardAppElement extends UmbLitElement {
12+
export class UmbDocumentationIntroDashboardAppElement extends UmbLitElement implements UmbDashboardAppElement {
13+
@property({ type: Object })
14+
manifest?: ManifestDashboardApp;
15+
16+
@property({ type: String })
17+
size?: UmbDashboardAppSize;
18+
819
override render() {
920
return html`
10-
<p>
11-
<umb-localize key="settingsDashboard_documentationDescription"></umb-localize>
12-
</p>
13-
<uui-button
14-
look="outline"
15-
href="https://docs.umbraco.com/umbraco-cms/umbraco-cms"
16-
label=${this.localize.term('settingsDashboard_getHelp')}
17-
target="_blank"
18-
rel="noopener"></uui-button>
21+
<umb-dashboard-app-layout headline=${this.localize.string('#settingsDashboard_documentationHeader')}>
22+
<p>
23+
<umb-localize key="settingsDashboard_documentationDescription"></umb-localize>
24+
</p>
25+
<uui-button
26+
look="outline"
27+
href="https://docs.umbraco.com/umbraco-cms/umbraco-cms"
28+
label=${this.localize.term('settingsDashboard_getHelp')}
29+
target="_blank"
30+
rel="noopener"></uui-button>
31+
</umb-dashboard-app-layout>
1932
`;
2033
}
2134

‎src/Umbraco.Web.UI.Client/src/packages/core/_temp-poc-location/documentation/videos-intro-dashboard-app.element.ts

Lines changed: 24 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,34 @@
11
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
2-
import { html, customElement, css } from '@umbraco-cms/backoffice/external/lit';
2+
import { html, customElement, css, property } from '@umbraco-cms/backoffice/external/lit';
33
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
4+
import type {
5+
ManifestDashboardApp,
6+
UmbDashboardAppElement,
7+
UmbDashboardAppSize,
8+
} from '@umbraco-cms/backoffice/dashboard';
49

510
const elementName = 'umb-videos-intro-dashboard-app';
611
@customElement(elementName)
7-
export class UmbVideosIntroDashboardAppElement extends UmbLitElement {
12+
export class UmbVideosIntroDashboardAppElement extends UmbLitElement implements UmbDashboardAppElement {
13+
@property({ type: Object })
14+
manifest?: ManifestDashboardApp;
15+
16+
@property({ type: String })
17+
size?: UmbDashboardAppSize;
18+
819
override render() {
920
return html`
10-
<p>
11-
<umb-localize key="settingsDashboard_videosDescription"></umb-localize>
12-
</p>
13-
<uui-button
14-
look="outline"
15-
href="https://www.youtube.com/c/UmbracoLearningBase"
16-
label=${this.localize.term('settingsDashboard_watchVideos')}
17-
target="_blank"
18-
rel="noopener"></uui-button>
21+
<umb-dashboard-app-layout headline=${this.localize.string('#settingsDashboard_videosHeader')}>
22+
<p>
23+
<umb-localize key="settingsDashboard_videosDescription"></umb-localize>
24+
</p>
25+
<uui-button
26+
look="outline"
27+
href="https://www.youtube.com/c/UmbracoLearningBase"
28+
label=${this.localize.term('settingsDashboard_watchVideos')}
29+
target="_blank"
30+
rel="noopener"></uui-button>
31+
</umb-dashboard-app-layout>
1932
`;
2033
}
2134

‎src/Umbraco.Web.UI.Client/src/packages/core/_temp-poc-location/support/support-intro-dashboard-app.element.ts

Lines changed: 26 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,33 @@
11
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
2-
import { html, customElement, css } from '@umbraco-cms/backoffice/external/lit';
2+
import { html, customElement, css, property } from '@umbraco-cms/backoffice/external/lit';
33
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
4+
import type {
5+
ManifestDashboardApp,
6+
UmbDashboardAppElement,
7+
UmbDashboardAppSize,
8+
} from '@umbraco-cms/backoffice/dashboard';
9+
10+
@customElement('umb-support-intro-dashboard-app')
11+
export class UmbSupportIntroDashboardAppElement extends UmbLitElement implements UmbDashboardAppElement {
12+
@property({ type: Object })
13+
manifest?: ManifestDashboardApp;
14+
15+
@property({ type: String })
16+
size?: UmbDashboardAppSize;
417

5-
const elementName = 'umb-support-intro-dashboard-app';
6-
@customElement(elementName)
7-
export class UmbSupportIntroDashboardAppElement extends UmbLitElement {
818
override render() {
919
return html`
10-
<p>
11-
<umb-localize key="settingsDashboard_supportDescription"></umb-localize>
12-
</p>
13-
<uui-button
14-
look="outline"
15-
href="https://umbraco.com/support/"
16-
label=${this.localize.term('settingsDashboard_getSupport')}
17-
target="_blank"
18-
rel="noopener"></uui-button>
20+
<umb-dashboard-app-layout headline=${this.localize.term('settingsDashboard_supportHeader')}>
21+
<p>
22+
<umb-localize key="settingsDashboard_supportDescription"></umb-localize>
23+
</p>
24+
<uui-button
25+
look="outline"
26+
href="https://umbraco.com/support/"
27+
label=${this.localize.term('settingsDashboard_getSupport')}
28+
target="_blank"
29+
rel="noopener"></uui-button>
30+
</umb-dashboard-app-layout>
1931
`;
2032
}
2133

@@ -33,6 +45,6 @@ export { UmbSupportIntroDashboardAppElement as element };
3345

3446
declare global {
3547
interface HTMLElementTagNameMap {
36-
[elementName]: UmbSupportIntroDashboardAppElement;
48+
['umb-support-intro-dashboard-app']: UmbSupportIntroDashboardAppElement;
3749
}
3850
}

‎src/Umbraco.Web.UI.Client/src/packages/core/dashboard/dashboard-app.extension.ts renamed to ‎src/Umbraco.Web.UI.Client/src/packages/core/dashboard/app/dashboard-app.extension.ts

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,22 @@
11
import type { ManifestElement, ManifestWithDynamicConditions } from '@umbraco-cms/backoffice/extension-api';
22

3+
export type UmbDashboardAppSize = 'small' | 'medium' | 'large';
4+
5+
export interface UmbDashboardAppElement extends HTMLElement {
6+
manifest?: ManifestDashboardApp;
7+
size?: UmbDashboardAppSize;
8+
}
9+
310
export interface ManifestDashboardApp
4-
extends ManifestElement,
11+
extends ManifestElement<UmbDashboardAppElement>,
512
ManifestWithDynamicConditions<UmbExtensionConditionConfig> {
613
type: 'dashboardApp';
714
meta: MetaDashboardApp;
815
}
916

1017
export interface MetaDashboardApp {
1118
headline: string;
12-
size: 'small' | 'medium' | 'large';
19+
size: UmbDashboardAppSize;
1320
}
1421

1522
declare global {

‎src/Umbraco.Web.UI.Client/src/packages/core/dashboard/app/global-components/dashboard-app-layout.element.ts

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
2+
import { css, html, customElement, property } from '@umbraco-cms/backoffice/external/lit';
3+
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
4+
5+
@customElement('umb-dashboard-app-layout')
6+
export class UmbDashboardAppLayoutElement extends UmbLitElement {
7+
@property({ type: String })
8+
headline: string | null = null;
9+
10+
override render() {
11+
return html`<uui-box .headline=${this.headline}><slot></slot></uui-box>`;
12+
}
13+
14+
static override styles = [
15+
UmbTextStyles,
16+
css`
17+
uui-box {
18+
height: 100%;
19+
}
20+
`,
21+
];
22+
}
23+
24+
declare global {
25+
interface HTMLElementTagNameMap {
26+
['umb-dashboard-app-layout']: UmbDashboardAppLayoutElement;
27+
}
28+
}

‎src/Umbraco.Web.UI.Client/src/packages/core/dashboard/app/global-components/index.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import './dashboard-app-layout.element.js';
2+
3+
export { UmbDashboardAppLayoutElement } from './dashboard-app-layout.element.js';

‎src/Umbraco.Web.UI.Client/src/packages/core/dashboard/app/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './global-components/index.js';

‎src/Umbraco.Web.UI.Client/src/packages/core/dashboard/app/types.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,5 @@ import type { UmbEntityModel } from '@umbraco-cms/backoffice/entity';
33
export interface UmbDashboardAppDetailModel extends UmbEntityModel {
44
name: string;
55
}
6+
7+
export type * from './dashboard-app.extension.js';

0 commit comments

Comments
 (0)