Skip to content

Commit

Permalink
pw_web: Update theme token values and usage
Browse files Browse the repository at this point in the history 
Changelist:
- Update light/dark theme values and other UI styling
- Create custom tokens to surface configurable properties
- Update severity logic to no longer set inline styles

Change-Id: I42dd87c391d15994ef5e46143d97bdd43c108e9c
Reviewed-on: https://pigweed-review.googlesource.com/c/pigweed/pigweed/+/155970
Commit-Queue: Luis Flores <[email protected]>
Reviewed-by: Amy Hu <[email protected]>
  • Loading branch information
Luis Flores authored and CQ Bot Account committed Jul 19, 2023
1 parent 11f9435 commit ed4a2a5
Show file tree
Hide file tree
Showing 5 changed files with 178 additions and 114 deletions.
58 changes: 47 additions & 11 deletions pw_web/log-viewer/src/components/log-list/log-list.styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,8 @@ export const styles = css`
}
:host {
background-color: var(--md-sys-color-surface);
background-color: var(--sys-log-viewer-color-table-bg);
color: var(--sys-log-viewer-color-table-text);
display: block;
font-family: 'Roboto Mono', monospace;
font-size: 1rem;
Expand Down Expand Up @@ -52,19 +53,52 @@ export const styles = css`
}
thead {
background: var(--md-sys-surface-container);
background-color: var(--sys-log-viewer-color-table-header-bg);
color: var(--sys-log-viewer-color-table-header-text);
}
tr {
border-bottom: 1px solid var(--md-sys-color-outline-variant);
border-bottom: 1px solid var(--sys-log-viewer-color-table-cell-outline);
display: grid;
justify-content: flex-start;
width: 100%;
}
.log-row--warning {
--bg-color: var(--sys-log-viewer-color-surface-yellow);
--text-color: var(--sys-log-viewer-color-on-surface-yellow);
--icon-color: var(--sys-log-viewer-color-orange-bright);
}
.log-row--error,
.log-row--critical {
--bg-color: var(--sys-log-viewer-color-surface-error);
--text-color: var(--sys-log-viewer-color-on-surface-error);
--icon-color: var(--sys-log-viewer-color-error-bright);
}
.log-row--debug {
--bg-color: initial;
--text-color: var(--sys-log-viewer-color-debug);
--icon-color: var(--sys-log-viewer-color-debug);
}
.log-row--warning .cell-content--icon,
.log-row--error .cell-content--icon,
.log-row--critical .cell-content--icon {
color: var(--icon-color);
}
.log-row--warning,
.log-row--error,
.log-row--critical,
.log-row--debug {
background-color: var(--bg-color);
color: var(--text-color);
}
tr:hover > td {
background-color: rgba(var(--md-sys-inverse-surface-rgb), 0.1);
color: var(--sys-on-inverse-surface);
background-color: rgba(var(--md-sys-inverse-surface-rgb), 0.05);
}
th,
Expand Down Expand Up @@ -95,12 +129,13 @@ export const styles = css`
}
.resize-handle {
background-color: var(--md-sys-color-outline-variant);
background-color: var(--sys-log-viewer-color-table-cell-outline);
bottom: 0;
content: '';
cursor: col-resize;
height: 100%;
left: 0;
mix-blend-mode: luminosity;
opacity: 1;
pointer-events: auto;
position: absolute;
Expand All @@ -113,6 +148,7 @@ export const styles = css`
.resize-handle:hover {
background-color: var(--md-sys-color-primary);
mix-blend-mode: unset;
outline: 1px solid var(--md-sys-color-primary);
}
Expand All @@ -126,7 +162,7 @@ export const styles = css`
width: 1rem;
}
.cell-content--with-icon {
.cell-content--icon {
padding-top: 0.125rem;
}
Expand All @@ -148,7 +184,7 @@ export const styles = css`
background: linear-gradient(
to right,
transparent,
var(--md-sys-color-surface)
var(--sys-log-viewer-color-overflow-indicator)
);
right: 0;
}
Expand All @@ -157,15 +193,15 @@ export const styles = css`
background: linear-gradient(
to left,
transparent,
var(--md-sys-color-surface)
var(--sys-log-viewer-color-overflow-indicator)
);
left: 0;
}
mark {
background-color: var(--md-sys-color-primary-container);
background-color: var(--sys-log-viewer-color-table-mark);
border-radius: 2px;
color: var(--md-sys-color-on-primary-container);
outline: 1px solid var(--md-sys-color-outline-variant);
outline: 1px solid var(--sys-log-viewer-color-table-mark);
}
`;
88 changes: 30 additions & 58 deletions pw_web/log-viewer/src/components/log-list/log-list.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import {
state,
} from 'lit/decorators.js';
import { styles } from './log-list.styles';
import { FieldData, LogEntry } from '../../shared/interfaces';
import { FieldData, LogEntry, Severity } from '../../shared/interfaces';
import { virtualize } from '@lit-labs/virtualizer/virtualize.js';
import '@lit-labs/virtualizer';

Expand Down Expand Up @@ -424,26 +424,14 @@ export class LogList extends LitElement {
}

private tableDataRow(log: LogEntry) {
let bgColor = '';
let textColor = '';

switch (log.severity) {
case 'WARNING':
bgColor = 'var(--sys-color-surface-yellow)';
textColor = 'var(--sys-color-on-surface-yellow)';
break;
case 'ERROR':
case 'CRITICAL':
bgColor = 'var(--sys-color-surface-error)';
textColor = 'var(--sys-color-on-surface-error)';
break;
case 'DEBUG':
textColor = 'var(--sys-color-debug)';
break;
}
const logSeverity = log.severity || Severity.INFO;
const className =
logSeverity === Severity.INFO
? 'log-row'
: `log-row log-row--${logSeverity.toLowerCase()}`;

return html`
<tr style="color:${textColor}; background-color:${bgColor};">
<tr class="${className}">
${log.fields.map((field, columnIndex) =>
this.tableDataCell(field, columnIndex)
)}
Expand All @@ -452,41 +440,29 @@ export class LogList extends LitElement {
}

private tableDataCell(field: FieldData, columnIndex: number) {
let iconColor = '';
let iconId = '';
const toTitleCase = (input: string): string => {
return input.replace(/\b\w+/g, (match) => {
return (
match.charAt(0).toUpperCase() + match.slice(1).toLowerCase()
);
});
};

if (field.key == 'severity') {
switch (field.value) {
case 'WARNING':
iconColor = 'var(--sys-color-orange-bright)';
iconId = 'warning';
break;
case 'ERROR':
iconColor = 'var(--sys-color-error-bright)';
iconId = 'cancel';
break;
case 'CRITICAL':
iconColor = 'var(--sys-color-error-bright)';
iconId = 'brightness_alert';
break;
case 'DEBUG':
iconColor = 'var(--sys-color-debug)';
iconId = 'bug_report';
break;
}
const severityIcons = new Map<Severity, string>([
[Severity.WARNING, 'warning'],
[Severity.ERROR, 'cancel'],
[Severity.CRITICAL, 'brightness_alert'],
[Severity.DEBUG, 'bug_report'],
]);

const severityValue = field.value as Severity;
const iconId = severityIcons.get(severityValue) || '';
const toTitleCase = (input: string): string => {
return input.replace(/\b\w+/g, (match) => {
return (
match.charAt(0).toUpperCase() +
match.slice(1).toLowerCase()
);
});
};

return html`
<td>
<div class="cell-content cell-content--with-icon">
<div class="cell-content cell-content--icon">
<md-icon
style="color:${iconColor}"
class="cell-icon"
title="${toTitleCase(field.value.toString())}"
>
Expand All @@ -495,22 +471,18 @@ export class LogList extends LitElement {
</div>
</td>
`;
} else if (field.key == 'timestamp') {
return html`
<td>
<div class="cell-content">
${this.highlightMatchedText(field.value.toString())}
</div>
</td>
`;
}

return html`
<td>
<div class="cell-content">
${this.highlightMatchedText(field.value.toString())}
</div>
${columnIndex > 0 ? this.resizeHandle(columnIndex - 1) : html``}
<!-- Don't add resize handles for default columns 'severity' and 'timestamp' -->
${!['severity', 'timestamp'].includes(field.key) &&
columnIndex > 0
? this.resizeHandle(columnIndex - 1)
: html``}
</td>
`;
}
Expand Down
14 changes: 7 additions & 7 deletions pw_web/log-viewer/src/components/log-view-controls/log-view-controls.styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@ import { css } from 'lit';
export const styles = css`
:host {
align-items: center;
background: var(--md-sys-surface-container-high);
border-bottom: 1px solid var(--md-sys-color-outline-variant);
background-color: var(--sys-log-viewer-color-controls-bg);
color: var(--sys-log-viewer-color-controls-text);
display: flex;
flex-shrink: 0;
gap: 1rem;
Expand All @@ -36,12 +36,12 @@ export const styles = css`
}
.button-toggle {
background-color: var(--md-sys-surface-container-high);
background-color: var(--md-sys-color-surface-container-high);
border-radius: 100%;
}
.field-menu {
background-color: var(--md-sys-surface-container);
background-color: var(--md-sys-color-surface-container);
border-radius: 4px;
margin: 0;
padding: 0.5rem 0.75rem;
Expand All @@ -67,15 +67,15 @@ export const styles = css`
}
input {
background: var(--md-sys-surface-container);
background-color: var(--sys-log-viewer-color-controls-input-bg);
border: none;
border-radius: 1.5rem;
font-family: 'Google Sans';
height: 2rem;
height: 1.75rem;
max-width: 20rem;
padding: 0 1rem;
width: 100%;
border: 1px solid var(--md-sys-color-outline-variant);
border: 1px solid var(--sys-log-viewer-color-controls-input-outline);
}
input::placeholder {
Expand Down
5 changes: 3 additions & 2 deletions pw_web/log-viewer/src/components/log-view/log-view.styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,9 @@ import { css } from 'lit';

export const styles = css`
:host {
border: 1px solid var(--md-sys-color-outline-variant);
border-radius: 0.5rem;
border: var(--sys-log-viewer-view-outline-width) solid
var(--sys-log-viewer-color-view-outline);
border-radius: var(--sys-log-viewer-view-corner-radius);
color: var(--md-sys-color-on-surface);
display: flex;
flex-direction: column;
Expand Down
Loading

0 comments on commit ed4a2a5

Please sign in to comment.