From a6404805c7585d57b56a3bdc74aa892124b222ba Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?= <26099018+JesmoDev@users.noreply.github.com> Date: Mon, 5 Jun 2023 19:12:55 +1200 Subject: [PATCH] log viewer search --- .../components/log-viewer-message.element.ts | 59 +++++++++++------- .../log-viewer-messages-list.element.ts | 39 +++++++----- .../views/search/log-search-view.element.ts | 60 +++++++++++++------ 3 files changed, 107 insertions(+), 51 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/logviewer/workspace/views/search/components/log-viewer-message.element.ts b/src/Umbraco.Web.UI.Client/src/packages/settings/logviewer/workspace/views/search/components/log-viewer-message.element.ts index f822934e65..d43f6218da 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/settings/logviewer/workspace/views/search/components/log-viewer-message.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/settings/logviewer/workspace/views/search/components/log-viewer-message.element.ts @@ -1,6 +1,14 @@ import { UmbLogViewerWorkspaceContext, UMB_APP_LOG_VIEWER_CONTEXT_TOKEN } from '../../../logviewer.context.js'; import { UUITextStyles } from '@umbraco-cms/backoffice/external/uui'; -import { css, html, PropertyValueMap , customElement, property, query, state } from '@umbraco-cms/backoffice/external/lit'; +import { + css, + html, + PropertyValueMap, + customElement, + property, + query, + state, +} from '@umbraco-cms/backoffice/external/lit'; import { LogLevelModel, LogMessagePropertyPresentationModel } from '@umbraco-cms/backoffice/backend-api'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; import { query as getQuery, toQueryString } from '@umbraco-cms/backoffice/router'; @@ -212,16 +220,14 @@ export class UmbLogViewerMessageElement extends UmbLitElement { margin-bottom: var(--uui-size-space-3); } - summary:hover, - #properties-list { - background-color: var(--uui-color-background); + summary:hover { + background-color: var(--uui-color-surface-emphasis); + color: var(--uui-color-interactive-emphasis); } #properties-list { - margin: 0; padding: 0; list-style: none; - margin-bottom: var(--uui-size-space-3); } .property { @@ -230,6 +236,30 @@ export class UmbLogViewerMessageElement extends UmbLitElement { border-top: 1px solid var(--uui-color-border); } + .property:first-child { + border-top: transparent; + } + + #properties-list, + pre { + margin: 0 var(--uui-size-layout-1); + border: 1px solid var(--uui-color-border); + border-radius: var(--uui-border-radius); + background-color: var(--uui-color-background); + margin-bottom: var(--uui-size-space-3); + } + + pre { + border-left: 4px solid #d42054; + color: #303033; + display: block; + font-family: Lato, Helvetica Neue, Helvetica, Arial, sans-serif; + line-height: 20px; + overflow-x: auto; + padding: 9.5px; + white-space: pre-wrap; + } + summary > div { box-sizing: border-box; padding: 10px 20px; @@ -250,6 +280,9 @@ export class UmbLogViewerMessageElement extends UmbLitElement { flex: 6 0 14ch; word-break: break-all; } + #search-button { + margin-left: var(--uui-size-layout-1); + } .property-name, .property-value { @@ -282,20 +315,6 @@ export class UmbLogViewerMessageElement extends UmbLitElement { .search-item { width: 100%; } - - pre { - background-color: var(--uui-color-background); - border-top: 1px solid #d8d7d9; - border-left: 4px solid #d42054; - color: #303033; - display: block; - font-family: Lato, Helvetica Neue, Helvetica, Arial, sans-serif; - line-height: 20px; - margin: 0; - overflow-x: auto; - padding: 9.5px; - white-space: pre-wrap; - } `, ]; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/logviewer/workspace/views/search/components/log-viewer-messages-list.element.ts b/src/Umbraco.Web.UI.Client/src/packages/settings/logviewer/workspace/views/search/components/log-viewer-messages-list.element.ts index 7c2417e67b..7fdf73b804 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/settings/logviewer/workspace/views/search/components/log-viewer-messages-list.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/settings/logviewer/workspace/views/search/components/log-viewer-messages-list.element.ts @@ -1,6 +1,6 @@ import { UmbLogViewerWorkspaceContext, UMB_APP_LOG_VIEWER_CONTEXT_TOKEN } from '../../../logviewer.context.js'; -import { UUIScrollContainerElement, UUIPaginationElement , UUITextStyles } from '@umbraco-cms/backoffice/external/uui'; -import { css, html , customElement, query, state } from '@umbraco-cms/backoffice/external/lit'; +import { UUIScrollContainerElement, UUIPaginationElement, UUITextStyles } from '@umbraco-cms/backoffice/external/uui'; +import { css, html, customElement, query, state } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; import { DirectionModel, LogMessageResponseModel } from '@umbraco-cms/backoffice/backend-api'; @@ -95,9 +95,9 @@ export class UmbLogViewerMessagesListElement extends UmbLitElement { } render() { - return html` -

Total items: ${this._logsTotal}

-
+ // TODO: the table should scroll instead of the whole main div + return html` +