From 63acfaab7fcf81d3bd2a24295c0b9f568fe4db1d Mon Sep 17 00:00:00 2001 From: Julia Gru <56249914+julczka@users.noreply.github.com> Date: Fri, 30 Jun 2023 10:54:11 +0200 Subject: [PATCH] add code block component --- .../src/mocks/data/template.data.ts | 23 ++-- .../code-block/code-block.element.ts | 112 +++++++++++++++--- .../code-block/code-block.stories.ts | 5 +- .../src/packages/core/components/index.ts | 2 +- .../query-builder/query-builder.element.ts | 13 +- 5 files changed, 125 insertions(+), 30 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/mocks/data/template.data.ts b/src/Umbraco.Web.UI.Client/src/mocks/data/template.data.ts index bbb9f2ea66..95eb051809 100644 --- a/src/Umbraco.Web.UI.Client/src/mocks/data/template.data.ts +++ b/src/Umbraco.Web.UI.Client/src/mocks/data/template.data.ts @@ -109,18 +109,19 @@ export const createTemplateScaffold = (masterTemplateAlias: string) => { }`; }; +//prettier-ignore const templateQueryExpressions = [ - `Umbraco.ContentAtRoot().FirstOrDefault() - .ChildrenOfType("docTypeWithTemplate") - .Where(x => x.IsVisible())`, - `Umbraco.Content(Guid.Parse("0b3498dc-255a-4d62-aa4f-ef7bff333544")) - .ChildrenOfType("docTypeWithTemplate") - .Where(x => x.IsVisible())`, - `Umbraco.Content(Guid.Parse("0b3498dc-255a-4d62-aa4f-ef7bff333544")) - .ChildrenOfType("docTypeWithTemplate") - .Where(x => (x.Id > 5)) - .Where(x => x.IsVisible()) - .OrderByDescending(x => x.UpdateDate)`, +`Umbraco.ContentAtRoot().FirstOrDefault() +.ChildrenOfType("docTypeWithTemplate") +.Where(x => x.IsVisible())`, +`Umbraco.Content(Guid.Parse("0b3498dc-255a-4d62-aa4f-ef7bff333544")) +.ChildrenOfType("docTypeWithTemplate") +.Where(x => x.IsVisible())`, +`Umbraco.ContentAtRoot().FirstOrDefault() +.ChildrenOfType("docTypeWithTemplate") +.Where(x => (x.Id != -6)) +.Where(x => x.IsVisible()) +.OrderBy(x => x.UpdateDate)`, ]; const randomIndex = () => Math.floor(Math.random() * 3); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/code-block/code-block.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/code-block/code-block.element.ts index 079515facf..d92f705658 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/code-block/code-block.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/code-block/code-block.element.ts @@ -1,23 +1,67 @@ import { UUITextStyles } from '@umbraco-cms/backoffice/external/uui'; -import { css, html, LitElement, customElement } from '@umbraco-cms/backoffice/external/lit'; +import { + css, + html, + LitElement, + customElement, + property, + queryAssignedNodes, + state, +} from '@umbraco-cms/backoffice/external/lit'; + +//TODO consider adding a highlight prop to the code block, that could spin up/access monaco instance and highlight the code /** - * A simple styled box for showing code-based error messages. + * A simple styled box for showing code-based error messages or blocks od code. * @slot the full message * */ @customElement('umb-code-block') export class UmbCodeBlockElement extends LitElement { + @property() + language = ''; + + @property({ type: Boolean }) + copy = false; + + @queryAssignedNodes() + nodes!: NodeListOf; + + @state() + copyState: 'idle' | 'success' = 'idle'; + + async copyCode() { + const text = this.textContent; + if (text) { + await navigator.clipboard.writeText(text); + this.copyState = 'success'; + setTimeout(() => { + this.copyState = 'idle'; + }, 2000); + } + } + render() { - return html`
+ return html` + ${this.language + ? html`` + : ''} - 
+				
 					
 						
 					
 				

 			
-
`; + `; } static styles = [ @@ -25,27 +69,65 @@ export class UmbCodeBlockElement extends LitElement { css` :host { display: block; - font-family: monospace; - } - - #container { border: 1px solid var(--uui-color-divider-emphasis); color: var(--uui-color-text-alt); - background-color: var(--uui-color-divider-standalone); - padding: var(--uui-size-space-2); border-radius: var(--uui-border-radius); line-height: var(--uui-size-10); } + :host uui-scroll-container { max-height: 500px; overflow-y: auto; overflow-wrap: anywhere; } pre { - max-width: 100%; - white-space: pre-line; - word-break: break-word; - overflow-wrap: break-word; + font-family: monospace; + background-color: var(--uui-color-surface-alt); + color: #303033; + display: block; + font-family: Lato, Helvetica Neue, Helvetica, Arial, sans-serif; + margin: 0; + overflow-x: auto; + padding: 9.5px; + white-space: pre-wrap; + } + + pre code { + word-wrap: normal; + background-color: transparent; + border: 0; + padding: 0; + white-space: pre; + } + + #header { + display: flex; + justify-content: space-between; + align-items: center; + background-color: var(--uui-color-surface-alt); + } + + #lang { + margin-left: 16px; + font-weight: bold; + text-transform: uppercase; + } + + button { + font-family: inherit; + padding: 6px 16px; + background-color: transparent; + border: none; + border-left: 1px solid var(--uui-color-divider-emphasis); + border-radius: 0; + color: #000; + display: flex; + align-items: center; + gap: 8px; + } + + button:hover { + background-color: var(--uui-color-surface-emphasis); } `, ]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/code-block/code-block.stories.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/code-block/code-block.stories.ts index 7b3547d696..64c8b3f035 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/code-block/code-block.stories.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/code-block/code-block.stories.ts @@ -1,11 +1,14 @@ import { Meta, StoryObj } from '@storybook/web-components'; -import { html } from '@umbraco-cms/backoffice/external/lit'; import './code-block.element.js'; import type { UmbCodeBlockElement } from './code-block.element.js'; +import { html } from '@umbraco-cms/backoffice/external/lit'; const meta: Meta = { title: 'Components/Code Block', component: 'umb-code-block', + parameters: { + layout: 'centered', + }, }; export default meta; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts index 3714842565..6550458b57 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts @@ -4,7 +4,7 @@ export * from './backoffice-modal-container/backoffice-modal-container.element.j export * from './backoffice-notification-container/backoffice-notification-container.element.js'; export * from './body-layout/body-layout.element.js'; export * from './button-with-dropdown/button-with-dropdown.element.js'; // TODO: delete this and change usage to umb-dropdown -// export * from './code-block.js'; +export * from './code-block/index.js'; export * from './data-type/index.js'; export * from './input-date/index.js'; export * from './dropdown/index.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/modals/query-builder/query-builder.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/modals/query-builder/query-builder.element.ts index 1253fdeb8d..e2194154a8 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/modals/query-builder/query-builder.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/modals/query-builder/query-builder.element.ts @@ -246,8 +246,13 @@ export default class UmbChooseInsertTypeModalElement extends UmbModalBaseElement >` : ''} -
N items returned, in 0 ms
- ${this._templateQuery?.queryExpression ?? ''} +
+ ${this._templateQuery?.resultCount ?? 0} items returned, in ${this._templateQuery?.executionTime ?? 0} + ms +
+ ${this._templateQuery?.queryExpression ?? ''} @@ -297,6 +302,10 @@ export default class UmbChooseInsertTypeModalElement extends UmbModalBaseElement flex-direction: column; justify-content: flex-start; } + + #results-count { + font-weight: bold; + } `, ]; }