From 5558e574d76ce30e604313df033e3318a807c275 Mon Sep 17 00:00:00 2001 From: JesmoDev Date: Wed, 18 May 2022 11:38:54 +0200 Subject: [PATCH] added backoffice "shell" --- .../src/backoffice/umb-backoffice.element.ts | 178 +----------------- .../src/mocks/handlers.ts | 2 +- src/Umbraco.Web.UI.Client/src/umb-app.ts | 13 +- 3 files changed, 17 insertions(+), 176 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/umb-backoffice.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/umb-backoffice.element.ts index 045cd4d981..4a331b3979 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/umb-backoffice.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/umb-backoffice.element.ts @@ -12,7 +12,7 @@ export class UmbBackoffice extends LitElement { :host { display: flex; flex-direction: column; - min-height: 100%; + height: 100%; width: 100%; color: var(--uui-color-text); font-size: 14px; @@ -35,19 +35,19 @@ export class UmbBackoffice extends LitElement { --uui-tab-text-hover: var(--uui-color-current-emphasis); } #main { - width: 100%; - height: calc(100% - 48px); display: flex; - box-sizing: border-box; + flex: 1; + overflow: hidden; } #nav-side-bar { - width: 400px; + width: 300px; background-color: var(--uui-color-surface); height: 100%; border-right: 1px solid var(--uui-color-border); font-weight: 500; display: flex; flex-direction: column; + flex-shrink: 0; } #nav-side-bar b { padding: var(--uui-size-6) var(--uui-size-8); @@ -63,6 +63,7 @@ export class UmbBackoffice extends LitElement { background-color: var(--uui-color-surface); width: 100%; display: flex; + flex: none; gap: 16px; align-items: center; border-bottom: 1px solid var(--uui-color-border); @@ -79,29 +80,11 @@ export class UmbBackoffice extends LitElement { } #editor-content { padding: var(--uui-size-6); - height: 100%; display: flex; + flex: 1; flex-direction: column; gap: 16px; } - .editor-property { - display: grid; - grid-template-columns: 200px 600px; - gap: 32px; - } - .editor-property uui-input, - .editor-property uui-textarea { - width: 100%; - } - - uui-box hr { - margin-bottom: var(--uui-size-6); - } - - hr { - border: 0; - border-top: 1px solid var(--uui-color-border-alt); - } uui-tab { font-size: 0.8rem; @@ -109,6 +92,7 @@ export class UmbBackoffice extends LitElement { #editor-bottom { display: flex; + flex: none; justify-content: end; align-items: center; height: 70px; @@ -178,151 +162,7 @@ export class UmbBackoffice extends LitElement { - -
Hero
-
-
- Header -

This is the main headline for the hero area on the Homepage

-
-
- -
-
-
-
-
- Description -

Write something nice

-
-
- I should probably write some more -
- Warning, the operation you're about to perform might influence other part of - Project Name. as well as other projects -
-
-
- - -
Options
-
-
- Disabled -

This is the main headline for the hero area on the Homepage

-
-
- -
-
-
-
-
- Header -

This is the main headline for the hero area on the Homepage

-
-
- -
- Warning, the operation you're about to perform might influence other part of - Project Name. as well as other projects -
-
-
-
-
-
- Options -

This will show some options

-
-
- - Option 1 - Option 2 - Option 3 - Option 4 - Option 5 - -
-
- - -
Buttons
-
-
- Primary -
-
-
- Button - Button - Button - Button - Button -
-
-
-
-
-
- Positive -
-
-
- Button - Button - Button - Button - Button -
-
-
-
-
-
- Warning -
-
-
- Button - Button - Button - Button - Button -
-
-
-
-
-
- Danger -
-
-
- Button - Button - Button - Button - Button -
-
-
-
-
-
- Disabled -
-
-
- Button - Button - Button - Button - Button -
-
-
- +
Save and preview diff --git a/src/Umbraco.Web.UI.Client/src/mocks/handlers.ts b/src/Umbraco.Web.UI.Client/src/mocks/handlers.ts index 5e46348369..a6fddb345f 100644 --- a/src/Umbraco.Web.UI.Client/src/mocks/handlers.ts +++ b/src/Umbraco.Web.UI.Client/src/mocks/handlers.ts @@ -7,7 +7,7 @@ export const handlers = [ ctx.status(200), ctx.json({ version: 'x.x.x', - installed: false, + installed: true, }) ); }), diff --git a/src/Umbraco.Web.UI.Client/src/umb-app.ts b/src/Umbraco.Web.UI.Client/src/umb-app.ts index ee9a9ab72b..e173027547 100644 --- a/src/Umbraco.Web.UI.Client/src/umb-app.ts +++ b/src/Umbraco.Web.UI.Client/src/umb-app.ts @@ -15,15 +15,15 @@ import { UmbRouter, UmbRoute } from './core/router'; const routes: Array = [ { path: '/login', - elementName: 'umb-login' + elementName: 'umb-login', }, { path: '/install', - elementName: 'umb-installer' + elementName: 'umb-installer', }, { path: '/content', - elementName: 'umb-backoffice' + elementName: 'umb-backoffice', }, ]; @@ -31,7 +31,9 @@ const routes: Array = [ @customElement('umb-app') export class UmbApp extends LitElement { static styles = css` - :host { + :host, + #outlet { + display: block; width: 100vw; height: 100vh; } @@ -71,13 +73,12 @@ export class UmbApp extends LitElement { this._router.push('/install'); return; } - + if (!this._authorized) { this._router.push('/login'); } else { this._router.push('/content'); } - } catch (error) { console.log(error); }