yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

move styles to the end of the file

Browse Source
This commit is contained in:
Julia Gru
2023-04-24 09:12:33 +02:00
parent ae4c2511ae
commit fd9d1f9bc9
8 changed files with 207 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-menu/templating-insert-menu.element.ts
View File

@@ -27,43 +27,6 @@ export const UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_MODAL = new UmbModa
@customElement('umb-templating-insert-menu')
export class UmbTemplatingInsertMenuElement extends UmbLitElement {
static styles = [
UUITextStyles,
css`
#insert-menu {
margin: 0;
padding: 0;
margin-top: var(--uui-size-space-3);
background-color: var(--uui-color-surface);
box-shadow: var(--uui-shadow-depth-3);
min-width: 150px;
}
#insert-menu > li,
ul {
padding: 0;
width: 100%;
list-style: none;
}
ul {
transform: translateX(-100px);
}
.insert-menu-item {
width: 100%;
}
umb-button-with-dropdown {
--umb-button-with-dropdown-symbol-expand-margin-left: 0;
}
uui-icon[name='umb:add'] {
margin-right: var(--uui-size-4);
}
`,
];
@property()
value = '';
@@ -154,6 +117,43 @@ export class UmbTemplatingInsertMenuElement extends UmbLitElement {
</uui-button-group>
`;
}
static styles = [
UUITextStyles,
css`
#insert-menu {
margin: 0;
padding: 0;
margin-top: var(--uui-size-space-3);
background-color: var(--uui-color-surface);
box-shadow: var(--uui-shadow-depth-3);
min-width: 150px;
}
#insert-menu > li,
ul {
padding: 0;
width: 100%;
list-style: none;
}
ul {
transform: translateX(-100px);
}
.insert-menu-item {
width: 100%;
}
umb-button-with-dropdown {
--umb-button-with-dropdown-symbol-expand-margin-left: 0;
}
uui-icon[name='umb:add'] {
margin-right: var(--uui-size-4);
}
`,
];
}
declare global {

52
src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-choose-type-sidebar.element.ts
View File

@@ -41,32 +41,6 @@ export default class UmbChooseInsertTypeModalElement extends UmbModalBaseElement
ChooseInsertTypeModalData,
ChooseInsertTypeModalResult
> {
static styles = [
UUITextStyles,
css`
:host {
display: block;
color: var(--uui-color-text);
}
#main {
box-sizing: border-box;
padding: var(--uui-size-space-5);
height: calc(100vh - 124px);
}
#main uui-button:not(:last-of-type) {
display: block;
margin-bottom: var(--uui-size-space-5);
}
h3,
p {
text-align: left;
}
`,
];
private _close() {
this.modalHandler?.reject();
}
@@ -150,6 +124,32 @@ export default class UmbChooseInsertTypeModalElement extends UmbModalBaseElement
</umb-workspace-layout>
`;
}
static styles = [
UUITextStyles,
css`
:host {
display: block;
color: var(--uui-color-text);
}
#main {
box-sizing: border-box;
padding: var(--uui-size-space-5);
height: calc(100vh - 124px);
}
#main uui-button:not(:last-of-type) {
display: block;
margin-bottom: var(--uui-size-space-5);
}
h3,
p {
text-align: left;
}
`,
];
}
declare global {

62
src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-value-sidebar.element.ts
View File

@@ -7,36 +7,6 @@ import { UmbModalBaseElement } from '@umbraco-cms/internal/modal';
@customElement('umb-insert-value-sidebar')
export default class UmbInsertValueSidebarElement extends UmbModalBaseElement<object, string> {
static styles = [
UUITextStyles,
css`
:host {
display: block;
color: var(--uui-color-text);
}
#main {
box-sizing: border-box;
padding: var(--uui-size-space-5);
height: calc(100vh - 124px);
}
#main uui-button {
width: 100%;
}
h3,
p {
text-align: left;
}
uui-combobox,
uui-input {
width: 100%;
}
`,
];
private _close() {
this.modalHandler?.submit();
}
@@ -74,8 +44,6 @@ export default class UmbInsertValueSidebarElement extends UmbModalBaseElement<ob
this.defaultValue = target.value === '' ? null : (target.value as string);
}
render() {
return html`
<umb-workspace-layout headline="Insert">
@@ -125,6 +93,36 @@ export default class UmbInsertValueSidebarElement extends UmbModalBaseElement<ob
</umb-workspace-layout>
`;
}
static styles = [
UUITextStyles,
css`
:host {
display: block;
color: var(--uui-color-text);
}
#main {
box-sizing: border-box;
padding: var(--uui-size-space-5);
height: calc(100vh - 124px);
}
#main uui-button {
width: 100%;
}
h3,
p {
text-align: left;
}
uui-combobox,
uui-input {
width: 100%;
}
`,
];
}
declare global {

50
src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/partial-view-picker-modal.element.ts
View File

@@ -10,31 +10,6 @@ export default class UmbPartialViewPickerModalElement extends UmbModalBaseElemen
UmbPartialViewPickerModalData,
UmbPartialViewPickerModalResult
> {
static styles = [
UUITextStyles,
css`
:host {
display: block;
color: var(--uui-color-text);
}
#main {
box-sizing: border-box;
padding: var(--uui-size-space-5);
height: calc(100vh - 124px);
}
#main uui-button {
width: 100%;
}
h3,
p {
text-align: left;
}
`,
];
@state()
_selection: Array<string> = [];
@@ -80,6 +55,31 @@ export default class UmbPartialViewPickerModalElement extends UmbModalBaseElemen
</umb-workspace-layout>
`;
}
static styles = [
UUITextStyles,
css`
:host {
display: block;
color: var(--uui-color-text);
}
#main {
box-sizing: border-box;
padding: var(--uui-size-space-5);
height: calc(100vh - 124px);
}
#main uui-button {
width: 100%;
}
h3,
p {
text-align: left;
}
`,
];
}
declare global {

52
src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/workspace/partial-views-workspace-edit.element.ts
View File

@@ -8,31 +8,6 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
@customElement('umb-partial-views-workspace-edit')
export class UmbPartialViewsWorkspaceEditElement extends UmbLitElement {
static styles = [
UUITextStyles,
css`
:host {
display: block;
width: 100%;
height: 100%;
}
umb-code-editor {
--editor-height: calc(100vh - 300px);
}
uui-box {
margin: 1em;
--uui-box-default-padding: 0;
}
uui-input {
width: 100%;
margin: 1em;
}
`,
];
@state()
private _name?: string | null = '';
@@ -59,7 +34,7 @@ export class UmbPartialViewsWorkspaceEditElement extends UmbLitElement {
});
this.observe(this.#partialViewsWorkspaceContext.isNew, (isNew) => {
this.#isNew = isNew;
this.#isNew = !!isNew;
console.log(this.#isNew);
});
});
@@ -103,6 +78,31 @@ export class UmbPartialViewsWorkspaceEditElement extends UmbLitElement {
</uui-box>
</umb-workspace-layout>`;
}
static styles = [
UUITextStyles,
css`
:host {
display: block;
width: 100%;
height: 100%;
}
umb-code-editor {
--editor-height: calc(100vh - 300px);
}
uui-box {
margin: 1em;
--uui-box-default-padding: 0;
}
uui-input {
width: 100%;
margin: 1em;
}
`,
];
}
export default UmbPartialViewsWorkspaceEditElement;

11
src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/workspace/partial-views-workspace.element.ts
View File

@@ -2,15 +2,14 @@ import { UUITextStyles } from '@umbraco-ui/uui-css';
import { css, html } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { UmbPartialViewsWorkspaceContext } from './partial-views-workspace.context';
import { UmbRouterSlotInitEvent, IRoute, IRoutingInfo } from '@umbraco-cms/internal/router';
import { UmbRouterSlotInitEvent } from '@umbraco-cms/internal/router';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
import './partial-views-workspace-edit.element';
import { IRoute, IRoutingInfo, PageComponent } from '@umbraco-cms/backoffice/router';
@customElement('umb-partial-views-workspace')
export class UmbPartialViewsWorkspaceElement extends UmbLitElement {
static styles = [UUITextStyles, css``];
#partialViewsWorkspaceContext = new UmbPartialViewsWorkspaceContext(this);
#routerPath? = '';
@@ -23,7 +22,7 @@ export class UmbPartialViewsWorkspaceElement extends UmbLitElement {
{
path: 'create/:parentKey',
component: () => this.#element,
setup: async (component: HTMLElement, info: IRoutingInfo) => {
setup: async (component: PageComponent, info: IRoutingInfo) => {
const parentKey = info.match.params.parentKey;
this.#partialViewsWorkspaceContext.createScaffold(parentKey);
},
@@ -31,7 +30,7 @@ export class UmbPartialViewsWorkspaceElement extends UmbLitElement {
{
path: 'edit/:key',
component: () => this.#element,
setup: (component: HTMLElement, info: IRoutingInfo) => {
setup: (component: PageComponent, info: IRoutingInfo) => {
const key = info.match.params.key;
this.#partialViewsWorkspaceContext.load(key);
},
@@ -45,6 +44,8 @@ export class UmbPartialViewsWorkspaceElement extends UmbLitElement {
this.#routerPath = event.target.absoluteRouterPath;
}}></umb-router-slot>`;
}
static styles = [UUITextStyles, css``];
}
export default UmbPartialViewsWorkspaceElement;

112
src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace-edit.element.ts
View File

@@ -3,67 +3,12 @@ import { css, html } from 'lit';
import { customElement, query, state } from 'lit/decorators.js';
import { UUIInputElement } from '@umbraco-ui/uui';
import { UmbCodeEditorElement } from '../../../shared/components/code-editor/code-editor.element';
import { UmbTemplatingInsertMenuElement } from '../../components/insert-menu/templating-insert-menu.element';
import { UmbTemplateWorkspaceContext } from './template-workspace.context';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
import { UmbTemplatingInsertMenuElement } from '../../components/insert-menu/templating-insert-menu.element';
@customElement('umb-template-workspace-edit')
export class UmbTemplateWorkspaceEditElement extends UmbLitElement {
static styles = [
UUITextStyles,
css`
:host {
display: block;
width: 100%;
height: 100%;
}
umb-code-editor {
--editor-height: calc(100vh - 300px);
}
uui-box {
margin: 1em;
--uui-box-default-padding: 0;
}
uui-input {
width: 100%;
margin: 1em;
}
#code-editor-menu-container uui-icon {
margin-right: var(--uui-size-space-3);
}
#insert-menu {
margin: 0;
padding: 0;
margin-top: var(--uui-size-space-3);
background-color: var(--uui-color-surface);
box-shadow: var(--uui-shadow-depth-3);
min-width: calc(100% + var(--uui-size-8, 24px));
}
#insert-menu > li,
ul {
padding: 0;
width: 100%;
list-style: none;
}
.insert-menu-item {
width: 100%;
}
#code-editor-menu-container {
display: flex;
justify-content: flex-end;
gap: var(--uui-size-space-3);
}
`,
];
@state()
private _name?: string | null = '';
@@ -144,6 +89,61 @@ export class UmbTemplateWorkspaceEditElement extends UmbLitElement {
</uui-box>
</umb-workspace-layout>`;
}
static styles = [
UUITextStyles,
css`
:host {
display: block;
width: 100%;
height: 100%;
}
umb-code-editor {
--editor-height: calc(100vh - 300px);
}
uui-box {
margin: 1em;
--uui-box-default-padding: 0;
}
uui-input {
width: 100%;
margin: 1em;
}
#code-editor-menu-container uui-icon {
margin-right: var(--uui-size-space-3);
}
#insert-menu {
margin: 0;
padding: 0;
margin-top: var(--uui-size-space-3);
background-color: var(--uui-color-surface);
box-shadow: var(--uui-shadow-depth-3);
min-width: calc(100% + var(--uui-size-8, 24px));
}
#insert-menu > li,
ul {
padding: 0;
width: 100%;
list-style: none;
}
.insert-menu-item {
width: 100%;
}
#code-editor-menu-container {
display: flex;
justify-content: flex-end;
gap: var(--uui-size-space-3);
}
`,
];
}
export default UmbTemplateWorkspaceEditElement;

11
src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace.element.ts
View File

@@ -11,25 +11,16 @@ import { UmbTemplateWorkspaceContext } from './template-workspace.context';
@customElement('umb-template-workspace')
export class UmbTemplateWorkspaceElement extends UmbLitElement {
public load(entityId: string) {
this.#templateWorkspaceContext.load(entityId);
}
public create(parentId: string | null) {
this.#isNew = true;
this.#templateWorkspaceContext.createScaffold(parentId);
}
@state()
private _name?: string | null = '';
@state()
private _content?: string | null = '';
@query('umb-code-editor')
private _codeEditor?: UmbCodeEditorElement;
#templateWorkspaceContext = new UmbTemplateWorkspaceContext(this);
#routerPath? = '';
@@ -64,7 +55,7 @@ export class UmbTemplateWorkspaceElement extends UmbLitElement {
this.#routerPath = event.target.absoluteRouterPath;
}}></umb-router-slot>`;
}
static styles = [
UUITextStyles,
css`