Skip to content

Commit c668f18

Browse files
nicolethoennicolethoen
authored
Merge pull request #70 from patternfly/fix-dark-theme
fix(LogViewer): fix log viewers dark theme, move styles into repo
2 parents 1d477ed + 0a70436 commit c668f18

File tree

8 files changed

+349
-5
lines changed

8 files changed

+349
-5
lines changed

‎packages/module/package.json

+4-2
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
"tag": "alpha"
1010
},
1111
"scripts": {
12-
"build": "yarn build:esm && yarn build:cjs",
12+
"build": "yarn generate && yarn build:esm && yarn build:cjs",
1313
"build:watch": "npm run build:esm -- --watch",
1414
"build:esm": "tsc --build --verbose ./tsconfig.json",
1515
"build:cjs": "tsc --build --verbose ./tsconfig.cjs.json",
@@ -18,6 +18,7 @@
1818
"docs:build": "pf-docs-framework build all --output public",
1919
"docs:serve": "pf-docs-framework serve public --port 5001",
2020
"docs:screenshots": "pf-docs-framework screenshots --urlPrefix http://localhost:5000",
21+
"generate": "yarn clean && node scripts/writeClassMaps.js",
2122
"test:a11y": "patternfly-a11y --config patternfly-a11y.config",
2223
"serve:a11y": "yarn serve coverage"
2324
},
@@ -47,6 +48,7 @@
4748
"resize-observer-polyfill": "^1.5.1",
4849
"tslib": "^2.0.0",
4950
"react-monaco-editor": "^0.51.0",
50-
"monaco-editor": "^0.34.1"
51+
"monaco-editor": "^0.34.1",
52+
"camel-case": "^3.0.0"
5153
}
5254
}

‎packages/module/scripts/generateClassMaps.js

+73
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
const path = require('path');
2+
const fs = require('fs-extra');
3+
const glob = require('glob');
4+
const camelcase = require('camel-case');
5+
6+
/**
7+
* @param {string} cssString - CSS string
8+
*/
9+
function getCSSClasses(cssString) {
10+
return cssString.match(/(\.)(?!\d)([^\s.,{[>+~#:)]*)(?![^{]*})/g);
11+
}
12+
13+
/**
14+
* @param {string} className - Class name
15+
*/
16+
function formatClassName(className) {
17+
return camelcase(className.replace(/pf-(v6-)?((c|l|m|u|is|has)-)?/g, ''));
18+
}
19+
20+
/**
21+
* @param {string} className - Class name
22+
*/
23+
function isModifier(className) {
24+
return Boolean(className && className.startsWith) && className.startsWith('.pf-m-');
25+
}
26+
27+
/**
28+
* @param {string} cssString - CSS string
29+
*/
30+
function getClassMaps(cssString) {
31+
const res = {};
32+
const distinctClasses = new Set(getCSSClasses(cssString));
33+
34+
distinctClasses.forEach((className) => {
35+
const key = formatClassName(className);
36+
const value = className.replace('.', '').trim();
37+
if (isModifier(className)) {
38+
res.modifiers = res.modifiers || {};
39+
res.modifiers[key] = value;
40+
} else {
41+
res[key] = value;
42+
}
43+
});
44+
45+
const ordered = {};
46+
Object.keys(res)
47+
.sort()
48+
.forEach((key) => (ordered[key] = res[key]));
49+
50+
return ordered;
51+
}
52+
53+
/**
54+
* @returns {any} Map of file names to classMaps
55+
*/
56+
function generateClassMaps() {
57+
const cssFiles = glob.sync('src/**/*.css', {
58+
absolute: true
59+
});
60+
61+
const res = {};
62+
cssFiles
63+
.map((file) => path.resolve(file)) // Normalize path for Windows
64+
.forEach((file) => {
65+
res[file] = getClassMaps(fs.readFileSync(file, 'utf8'));
66+
});
67+
68+
return res;
69+
}
70+
71+
module.exports = {
72+
generateClassMaps
73+
};

‎packages/module/scripts/writeClassMaps.js

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
const { join, basename, relative, dirname } = require('path');
2+
const { outputFileSync, copyFileSync, ensureDirSync, symlinkSync } = require('fs-extra');
3+
const { generateClassMaps } = require('./generateClassMaps');
4+
5+
const writeTsExport = (file, classMap, outDir) =>
6+
outputFileSync(
7+
join(outDir, file.replace(/.css$/, '.ts')),
8+
`
9+
import './${basename(file, '.css.js')}';
10+
export default ${JSON.stringify(classMap, null, 2)};
11+
`.trim()
12+
);
13+
14+
/**
15+
* @param {any} classMaps Map of file names to classMaps
16+
*/
17+
function writeClassMaps(classMaps) {
18+
Object.entries(classMaps).forEach(([file, classMap]) => {
19+
const packageBase = dirname(require.resolve('@patternfly/react-log-viewer/package.json'));
20+
const relativeFilePath = relative(packageBase, file);
21+
22+
// write the export map in TS and put it in src, from here TS will compile it to the different module types at build time
23+
writeTsExport(relativeFilePath, classMap, packageBase);
24+
25+
// copy the css file itself over to dist since TS won't do that
26+
const cssFileName = basename(file);
27+
const distDir = join(packageBase, 'dist');
28+
const cssDistDir = join(distDir, 'css');
29+
ensureDirSync(cssDistDir);
30+
copyFileSync(file, join(cssDistDir, cssFileName));
31+
32+
// create symlinks for each exported module that reference to the single copy of the css files, prevents needing duplicates of the stylesheets
33+
const fileDir = dirname(relativeFilePath).replace('src/', '');
34+
const cssDistEsmDir = join(distDir, 'esm', fileDir);
35+
const cssDistCjsDir = join(distDir, 'js', fileDir);
36+
const cssDistDirs = [cssDistEsmDir, cssDistCjsDir];
37+
cssDistDirs.forEach((dir) => {
38+
ensureDirSync(dir);
39+
symlinkSync(join(cssDistDir, cssFileName), join(dir, cssFileName));
40+
});
41+
});
42+
43+
// eslint-disable-next-line no-console
44+
console.log('Wrote', Object.keys(classMaps).length * 3, 'CSS-in-JS files');
45+
}
46+
47+
writeClassMaps(generateClassMaps());

‎packages/module/src/LogViewer/LogViewer.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { css } from '@patternfly/react-styles';
44
import { LogViewerRow } from './LogViewerRow';
55
import { parseConsoleOutput, searchedKeyWordType, stripAnsi } from './utils/utils';
66
import { VariableSizeList as List, areEqual } from '../react-window';
7-
import styles from '@patternfly/react-styles/css/components/LogViewer/log-viewer';
7+
import styles from './css/log-viewer';
88
import AnsiUp from '../ansi_up/ansi_up';
99

1010
interface LogViewerProps {
@@ -312,7 +312,7 @@ const LogViewerBase: React.FunctionComponent<LogViewerProps> = memo(
312312
hasLineNumbers && styles.modifiers.lineNumbers,
313313
!isTextWrapped && styles.modifiers.nowrap,
314314
initialIndexWidth && styles.modifiers.lineNumberChars,
315-
theme === 'dark' && styles.modifiers.dark
315+
theme === 'dark' && styles.themeDark
316316
)}
317317
{...(initialIndexWidth && {
318318
style: {

‎packages/module/src/LogViewer/LogViewerRow.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { memo, useContext } from 'react';
22
import { LOGGER_LINE_NUMBER_INDEX_DELTA } from './utils/constants';
33
import { css } from '@patternfly/react-styles';
4-
import styles from '@patternfly/react-styles/css/components/LogViewer/log-viewer';
4+
import styles from './css/log-viewer';
55
import { LogViewerContext } from './LogViewerContext';
66
import AnsiUp from '../ansi_up/ansi_up';
77
import { escapeString, escapeTextForHtml, isAnsi, searchedKeyWordType, splitAnsi } from './utils/utils';

‎packages/module/src/LogViewer/css/log-viewer.css

+173
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,173 @@
1+
.pf-v6-c-log-viewer {
2+
--pf-v6-c-log-viewer--Height: 100%;
3+
--pf-v6-c-log-viewer--MaxHeight: auto;
4+
--pf-v6-c-log-viewer--m-line-numbers__index--Display: inline;
5+
--pf-v6-c-log-viewer__header--MarginBlockEnd: var(--pf-t--global--spacer--sm);
6+
--pf-v6-c-log-viewer__main--BackgroundColor: var(--pf-t--global--background--color--primary--default);
7+
--pf-v6-c-log-viewer__main--BorderWidth: var(--pf-t--global--border--width--box--default);
8+
--pf-v6-c-log-viewer__main--BorderColor: var(--pf-t--global--border--color--default);
9+
--pf-v6-c-log-viewer__scroll-container--Height: 37.5rem;
10+
--pf-v6-c-log-viewer__scroll-container--PaddingBlockStart: var(--pf-t--global--spacer--sm);
11+
--pf-v6-c-log-viewer__scroll-container--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
12+
--pf-v6-c-log-viewer--m-line-numbers__list--before--InsetBlockStart: 0;
13+
--pf-v6-c-log-viewer--m-line-numbers__list--before--InsetBlockEnd: 0;
14+
--pf-v6-c-log-viewer--m-line-numbers__list--before--Width: var(--pf-t--global--border--width--divider--default);
15+
--pf-v6-c-log-viewer--m-line-numbers__list--before--BackgroundColor: var(--pf-t--global--border--color--default);
16+
--pf-v6-c-log-viewer__list--Height: auto;
17+
--pf-v6-c-log-viewer--m-line-numbers__list--InsetInlineStart: var(--pf-v6-c-log-viewer__index--Width);
18+
--pf-v6-c-log-viewer__list--FontFamily: var(--pf-t--global--font--family--mono);
19+
--pf-v6-c-log-viewer__list--FontSize: var(--pf-t--global--font--size--body--sm);
20+
--pf-v6-c-log-viewer__index--Display: none;
21+
--pf-v6-c-log-viewer__index--Width: 4.0625rem;
22+
--pf-v6-c-log-viewer__index--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
23+
--pf-v6-c-log-viewer__index--PaddingInlineStart: var(--pf-t--global--spacer--lg);
24+
--pf-v6-c-log-viewer__index--Color: var(--pf-t--global--text--color--subtle);
25+
--pf-v6-c-log-viewer__index--BackgroundColor: transparent;
26+
--pf-v6-c-log-viewer--line-number-chars: 4.4;
27+
--pf-v6-c-log-viewer--m-line-number-chars__index--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
28+
--pf-v6-c-log-viewer--m-line-number-chars__index--Width: calc(1ch * var(--pf-v6-c-log-viewer--line-number-chars) + var(--pf-v6-c-log-viewer__index--PaddingInlineEnd) + var(--pf-v6-c-log-viewer__index--PaddingInlineStart));
29+
--pf-v6-c-log-viewer__text--PaddingInlineEnd: var(--pf-t--global--spacer--md);
30+
--pf-v6-c-log-viewer__text--PaddingInlineStart: var(--pf-t--global--spacer--md);
31+
--pf-v6-c-log-viewer__text--Color: var(--pf-t--global--text--color--regular);
32+
--pf-v6-c-log-viewer__text--WordBreak: break-all;
33+
--pf-v6-c-log-viewer__text--WhiteSpace: break-spaces;
34+
--pf-v6-c-log-viewer__text--LineBreak: anywhere;
35+
--pf-v6-c-log-viewer--m-nowrap__text--WhiteSpace: nowrap;
36+
--pf-v6-c-log-viewer__string--m-match--Color: var(--pf-t--global--text--color--on-highlight);
37+
--pf-v6-c-log-viewer__string--m-match--BackgroundColor: var(--pf-t--global--background--color--highlight--default);
38+
--pf-v6-c-log-viewer__string--m-current--Color: var(--pf-t--global--text--color--on-highlight);
39+
--pf-v6-c-log-viewer__string--m-current--BackgroundColor: var(--pf-t--global--background--color--highlight--clicked);
40+
--pf-v6-c-log-viewer__timestamp--FontWeight: var(--pf-t--global--font--weight--body--bold);
41+
--pf-v6-c-log-viewer--c-toolbar--PaddingBlockStart: 0;
42+
--pf-v6-c-log-viewer--c-toolbar--PaddingBlockEnd: 0;
43+
--pf-v6-c-log-viewer--c-toolbar__content--PaddingInlineEnd: 0;
44+
--pf-v6-c-log-viewer--c-toolbar__content--PaddingInlineStart: 0;
45+
--pf-v6-c-log-viewer--c-toolbar__group--m-toggle-group--spacer: 0;
46+
--pf-v6-c-log-viewer--c-toolbar__group--m-toggle-group--m-show--spacer: var(--pf-t--global--spacer--sm);
47+
--pf-v6-c-log-viewer--m-dark__main--BorderWidth: 0;
48+
display: flex;
49+
flex-direction: column;
50+
height: var(--pf-v6-c-log-viewer--Height);
51+
max-height: var(--pf-v6-c-log-viewer--MaxHeight);
52+
}
53+
.pf-v6-c-log-viewer.pf-v6-theme-dark {
54+
--pf-v6-c-log-viewer__main--BorderWidth: var(--pf-v6-c-log-viewer--m-dark__main--BorderWidth);
55+
}
56+
.pf-v6-c-log-viewer.pf-v6-theme-dark .pf-v6-c-log-viewer__main {
57+
--pf-v6-c-log-viewer__main--BackgroundColor: var(--pf-t--global--background--color--primary--default);
58+
--pf-v6-c-log-viewer__main--BorderColor: var(--pf-t--global--border--color--default);
59+
--pf-v6-c-log-viewer__text--Color: var(--pf-t--global--text--color--regular);
60+
--pf-v6-c-log-viewer__index--Color: var(--pf-t--global--text--color--subtle);
61+
--pf-v6-c-log-viewer--m-line-numbers__list--before--BackgroundColor: var(--pf-t--global--border--color--default);
62+
}
63+
.pf-v6-c-log-viewer.pf-m-wrap-text {
64+
word-break: break-all;
65+
}
66+
.pf-v6-c-log-viewer.pf-m-nowrap {
67+
--pf-v6-c-log-viewer__text--WhiteSpace: var(--pf-v6-c-log-viewer--m-nowrap__text--WhiteSpace);
68+
}
69+
.pf-v6-c-log-viewer.pf-m-line-numbers {
70+
--pf-v6-c-log-viewer__index--Display: var(--pf-v6-c-log-viewer--m-line-numbers__index--Display);
71+
}
72+
.pf-v6-c-log-viewer.pf-m-line-numbers .pf-v6-c-log-viewer__list {
73+
position: absolute;
74+
inset-inline-start: var(--pf-v6-c-log-viewer--m-line-numbers__list--InsetInlineStart);
75+
inset-inline-end: 0;
76+
}
77+
.pf-v6-c-log-viewer.pf-m-line-numbers .pf-v6-c-log-viewer__list::before {
78+
position: absolute;
79+
inset-block-start: var(--pf-v6-c-log-viewer--m-line-numbers__list--before--InsetBlockStart);
80+
inset-block-end: var(--pf-v6-c-log-viewer--m-line-numbers__list--before--InsetBlockEnd);
81+
inset-inline-start: 0;
82+
width: var(--pf-v6-c-log-viewer--m-line-numbers__list--before--Width);
83+
content: "";
84+
background: var(--pf-v6-c-log-viewer--m-line-numbers__list--before--BackgroundColor);
85+
}
86+
.pf-v6-c-log-viewer.pf-m-line-number-chars {
87+
--pf-v6-c-log-viewer__index--PaddingInlineEnd: var(--pf-v6-c-log-viewer--m-line-number-chars__index--PaddingInlineEnd);
88+
--pf-v6-c-log-viewer__index--Width: var(--pf-v6-c-log-viewer--m-line-number-chars__index--Width);
89+
}
90+
.pf-v6-c-log-viewer .pf-v6-c-toolbar {
91+
--pf-v6-c-toolbar--PaddingBlockStart: var(--pf-v6-c-log-viewer--c-toolbar--PaddingBlockStart);
92+
--pf-v6-c-toolbar--PaddingBlockEnd: var(--pf-v6-c-log-viewer--c-toolbar--PaddingBlockEnd);
93+
--pf-v6-c-toolbar__content--PaddingInlineEnd: var(--pf-v6-c-log-viewer--c-toolbar__content--PaddingInlineEnd);
94+
--pf-v6-c-toolbar__content--PaddingInlineStart: var(--pf-v6-c-log-viewer--c-toolbar__content--PaddingInlineStart);
95+
--pf-v6-c-toolbar__group--m-toggle-group--spacer: 0;
96+
--pf-v6-c-toolbar__group--m-toggle-group--m-show--spacer: var(--pf-v6-c-log-viewer--c-toolbar__group--m-toggle-group--m-show--spacer);
97+
}
98+
.pf-v6-c-log-viewer .pf-v6-c-toolbar__content-section {
99+
flex-wrap: nowrap;
100+
}
101+
102+
.pf-v6-c-log-viewer__header {
103+
margin-block-end: var(--pf-v6-c-log-viewer__header--MarginBlockEnd);
104+
}
105+
106+
.pf-v6-c-log-viewer__main {
107+
display: flex;
108+
flex-direction: column;
109+
min-height: 0;
110+
background-color: var(--pf-v6-c-log-viewer__main--BackgroundColor);
111+
border: var(--pf-v6-c-log-viewer__main--BorderWidth) solid var(--pf-v6-c-log-viewer__main--BorderColor);
112+
}
113+
114+
.pf-v6-c-log-viewer__scroll-container {
115+
position: relative;
116+
height: var(--pf-v6-c-log-viewer__scroll-container--Height);
117+
padding-block-start: var(--pf-v6-c-log-viewer__scroll-container--PaddingBlockStart);
118+
padding-block-end: var(--pf-v6-c-log-viewer__scroll-container--PaddingBlockEnd);
119+
overflow: auto;
120+
will-change: transform;
121+
direction: ltr;
122+
}
123+
124+
.pf-v6-c-log-viewer__list {
125+
position: relative;
126+
height: var(--pf-v6-c-log-viewer__list--Height);
127+
font-family: var(--pf-v6-c-log-viewer__list--FontFamily);
128+
font-size: var(--pf-v6-c-log-viewer__list--FontSize);
129+
}
130+
131+
.pf-v6-c-log-viewer__list-item {
132+
inset-inline-start: 0;
133+
width: 100%;
134+
}
135+
136+
.pf-v6-c-log-viewer__string.pf-m-match {
137+
color: var(--pf-v6-c-log-viewer__string--m-match--Color, inherit);
138+
background-color: var(--pf-v6-c-log-viewer__string--m-match--BackgroundColor);
139+
}
140+
.pf-v6-c-log-viewer__string.pf-m-current {
141+
color: var(--pf-v6-c-log-viewer__string--m-current--Color, inherit);
142+
background-color: var(--pf-v6-c-log-viewer__string--m-current--BackgroundColor);
143+
}
144+
145+
.pf-v6-c-log-viewer__index {
146+
position: fixed;
147+
inset-inline-start: 0;
148+
display: var(--pf-v6-c-log-viewer__index--Display);
149+
width: var(--pf-v6-c-log-viewer__index--Width);
150+
padding-inline-start: var(--pf-v6-c-log-viewer__index--PaddingInlineStart);
151+
padding-inline-end: var(--pf-v6-c-log-viewer__index--PaddingInlineEnd);
152+
font-family: var(--pf-v6-c-log-viewer__index--FontFamily, inherit);
153+
font-size: var(--pf-v6-c-log-viewer__index--FontSize, inherit);
154+
color: var(--pf-v6-c-log-viewer__index--Color);
155+
user-select: none;
156+
background-color: var(--pf-v6-c-log-viewer__index--BackgroundColor);
157+
}
158+
159+
.pf-v6-c-log-viewer__text {
160+
display: block;
161+
padding-inline-start: var(--pf-v6-c-log-viewer__text--PaddingInlineStart);
162+
padding-inline-end: var(--pf-v6-c-log-viewer__text--PaddingInlineEnd);
163+
font-family: var(--pf-v6-c-log-viewer__text--FontFamily, inherit);
164+
font-size: var(--pf-v6-c-log-viewer__text--FontSize, inherit);
165+
color: var(--pf-v6-c-log-viewer__text--Color);
166+
word-break: var(--pf-v6-c-log-viewer__text--WordBreak);
167+
white-space: var(--pf-v6-c-log-viewer__text--WhiteSpace);
168+
line-break: var(--pf-v6-c-log-viewer__text--LineBreak);
169+
}
170+
171+
.pf-v6-c-log-viewer__timestamp {
172+
font-weight: var(--pf-v6-c-log-viewer__timestamp--FontWeight);
173+
}

‎packages/module/src/LogViewer/css/log-viewer.ts

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import './log-viewer.css';
2+
export default {
3+
"logViewer": "pf-v6-c-log-viewer",
4+
"logViewerHeader": "pf-v6-c-log-viewer__header",
5+
"logViewerIndex": "pf-v6-c-log-viewer__index",
6+
"logViewerList": "pf-v6-c-log-viewer__list",
7+
"logViewerListItem": "pf-v6-c-log-viewer__list-item",
8+
"logViewerMain": "pf-v6-c-log-viewer__main",
9+
"logViewerScrollContainer": "pf-v6-c-log-viewer__scroll-container",
10+
"logViewerString": "pf-v6-c-log-viewer__string",
11+
"logViewerText": "pf-v6-c-log-viewer__text",
12+
"logViewerTimestamp": "pf-v6-c-log-viewer__timestamp",
13+
"modifiers": {
14+
"wrapText": "pf-m-wrap-text",
15+
"nowrap": "pf-m-nowrap",
16+
"lineNumbers": "pf-m-line-numbers",
17+
"lineNumberChars": "pf-m-line-number-chars",
18+
"match": "pf-m-match",
19+
"current": "pf-m-current"
20+
},
21+
"themeDark": "pf-v6-theme-dark",
22+
"toolbar": "pf-v6-c-toolbar",
23+
"toolbarContentSection": "pf-v6-c-toolbar__content-section"
24+
};

0 commit comments

Comments
 (0)