Skip to content

Commit 7104c7f

Browse files
raclimraclim
authored
Merge pull request #3276 from processing/update-console
Update Console Components
2 parents 7652372 + 0a7c9d9 commit 7104c7f

File tree

4 files changed

+278
-245
lines changed

4 files changed

+278
-245
lines changed

‎client/modules/IDE/components/Console.jsx

+18-201
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,11 @@
1-
import React, { useRef, useEffect } from 'react';
1+
import React, { useRef, useEffect, useMemo } from 'react';
22
import { useTranslation } from 'react-i18next';
33

4-
import { bindActionCreators } from 'redux';
5-
64
import { useSelector, useDispatch } from 'react-redux';
75
import classNames from 'classnames';
86
import { Console as ConsoleFeed } from 'console-feed';
9-
import warnLightUrl from '../../../images/console-warn-light.svg?byUrl';
10-
import warnDarkUrl from '../../../images/console-warn-dark.svg?byUrl';
11-
import warnContrastUrl from '../../../images/console-warn-contrast.svg?byUrl';
12-
import errorLightUrl from '../../../images/console-error-light.svg?byUrl';
13-
import errorDarkUrl from '../../../images/console-error-dark.svg?byUrl';
14-
import errorContrastUrl from '../../../images/console-error-contrast.svg?byUrl';
15-
import debugLightUrl from '../../../images/console-debug-light.svg?byUrl';
16-
import debugDarkUrl from '../../../images/console-debug-dark.svg?byUrl';
17-
import debugContrastUrl from '../../../images/console-debug-contrast.svg?byUrl';
18-
import infoLightUrl from '../../../images/console-info-light.svg?byUrl';
19-
import infoDarkUrl from '../../../images/console-info-dark.svg?byUrl';
20-
import infoContrastUrl from '../../../images/console-info-contrast.svg?byUrl';
217
import ConsoleInput from './ConsoleInput';
228

23-
import commandLightUrl from '../../../images/console-command-light.svg?byUrl';
24-
import resultLightUrl from '../../../images/console-result-light.svg?byUrl';
25-
import commandDarkUrl from '../../../images/console-command-dark.svg?byUrl';
26-
import resultDarkUrl from '../../../images/console-result-dark.svg?byUrl';
27-
import commandContrastUrl from '../../../images/console-command-contrast.svg?byUrl';
28-
import resultContrastUrl from '../../../images/console-result-contrast.svg?byUrl';
29-
309
import UpArrowIcon from '../../../images/up-arrow.svg';
3110
import DownArrowIcon from '../../../images/down-arrow.svg';
3211

@@ -35,198 +14,40 @@ import * as ConsoleActions from '../../IDE/actions/console';
3514
import { useDidUpdate } from '../hooks/custom-hooks';
3615
import useHandleMessageEvent from '../hooks/useHandleMessageEvent';
3716
import { listen } from '../../../utils/dispatcher';
38-
39-
const CONSOLE_FEED_LIGHT_STYLES = {
40-
BASE_BACKGROUND_COLOR: '',
41-
LOG_ERROR_BACKGROUND: 'hsl(0, 100%, 97%)',
42-
LOG_ERROR_COLOR: '#D11518',
43-
LOG_ERROR_BORDER: 'hsl(0, 100%, 92%)',
44-
LOG_WARN_BACKGROUND: 'hsl(50, 100%, 95%)',
45-
LOG_WARN_COLOR: '#996B00',
46-
LOG_WARN_BORDER: 'hsl(50, 100%, 88%)',
47-
LOG_INFO_COLOR: '#4D4D4D',
48-
LOG_DEBUG_COLOR: '#0071AD',
49-
LOG_DEBUG_BACKGROUND: '#D6F1FF',
50-
LOG_DEBUG_BORDER: '#C2EBFF',
51-
LOG_COLOR: '#4D4D4D',
52-
ARROW_COLOR: '#666',
53-
OBJECT_NAME_COLOR: '#333',
54-
OBJECT_VALUE_NULL_COLOR: '#747474',
55-
OBJECT_VALUE_UNDEFINED_COLOR: '#747474',
56-
OBJECT_VALUE_STRING_COLOR: '#47820A',
57-
OBJECT_VALUE_REGEXP_COLOR: '#A06801',
58-
OBJECT_VALUE_NUMBER_COLOR: '#333',
59-
OBJECT_VALUE_BOOLEAN_COLOR: '#D52889',
60-
OBJECT_VALUE_FUNCTION_KEYWORD_COLOR: '#0B7CA9',
61-
LOG_AMOUNT_BACKGROUND: '#5276B7',
62-
LOG_AMOUNT_COLOR: '#FFF',
63-
LOG_WARN_AMOUNT_BACKGROUND: '#996B00',
64-
LOG_ERROR_AMOUNT_BACKGROUND: '#D11518',
65-
LOG_DEBUG_AMOUNT_BACKGROUND: '#0071AD'
66-
};
67-
68-
const CONSOLE_FEED_DARK_STYLES = {
69-
BASE_BACKGROUND_COLOR: '',
70-
BASE_COLOR: 'white',
71-
OBJECT_NAME_COLOR: 'white',
72-
OBJECT_VALUE_NULL_COLOR: '#DE4A9B',
73-
OBJECT_VALUE_UNDEFINED_COLOR: '#DE4A9B',
74-
OBJECT_VALUE_REGEXP_COLOR: '#EE9900',
75-
OBJECT_VALUE_STRING_COLOR: '#58a10b',
76-
OBJECT_VALUE_SYMBOL_COLOR: 'hsl(230, 100%, 80%)',
77-
OBJECT_VALUE_NUMBER_COLOR: 'white',
78-
OBJECT_VALUE_BOOLEAN_COLOR: '#DE4A9B',
79-
OBJECT_VALUE_FUNCTION_KEYWORD_COLOR: '#b58318',
80-
LOG_ERROR_BACKGROUND: '#1F0000',
81-
LOG_ERROR_COLOR: '#DF3A3D',
82-
LOG_WARN_BACKGROUND: 'hsl(50, 100%, 10%)',
83-
LOG_WARN_COLOR: '#F5BC38',
84-
LOG_INFO_COLOR: '#D9D9D9',
85-
LOG_INFO_BORDER: '#4D4D4D',
86-
LOG_COLOR: '#D9D9D9',
87-
LOG_DEBUG_COLOR: '#0C99E2',
88-
LOG_DEBUG_BACKGROUND: '#05232E',
89-
LOG_DEBUG_BORDER: '#0C546E',
90-
TABLE_BORDER_COLOR: 'grey',
91-
TABLE_TH_BACKGROUND_COLOR: 'transparent',
92-
TABLE_TH_HOVER_COLOR: 'grey',
93-
TABLE_SORT_ICON_COLOR: 'grey',
94-
TABLE_DATA_BACKGROUND_IMAGE: 'grey',
95-
TABLE_DATA_BACKGROUND_SIZE: 'grey',
96-
ARROW_COLOR: '#D9D9D9',
97-
LOG_AMOUNT_BACKGROUND: '#5276B7',
98-
LOG_AMOUNT_COLOR: '#333',
99-
LOG_WARN_AMOUNT_BACKGROUND: '#996B00',
100-
LOG_ERROR_AMOUNT_BACKGROUND: '#D11518',
101-
LOG_DEBUG_AMOUNT_BACKGROUND: '#0071AD'
102-
};
103-
104-
const CONSOLE_FEED_CONTRAST_STYLES = {
105-
BASE_BACKGROUND_COLOR: '',
106-
BASE_COLOR: 'white',
107-
OBJECT_NAME_COLOR: 'white',
108-
OBJECT_VALUE_NULL_COLOR: '#FFA9D9',
109-
OBJECT_VALUE_UNDEFINED_COLOR: '#FFA9D9',
110-
OBJECT_VALUE_REGEXP_COLOR: '#2DE9B6',
111-
OBJECT_VALUE_STRING_COLOR: '#2DE9B6',
112-
OBJECT_VALUE_SYMBOL_COLOR: '#B3BEFF',
113-
OBJECT_VALUE_NUMBER_COLOR: '#FFA9D9',
114-
OBJECT_VALUE_BOOLEAN_COLOR: '#FFA9D9',
115-
OBJECT_VALUE_FUNCTION_KEYWORD_COLOR: '#F5DC23',
116-
LOG_ERROR_BACKGROUND: '#1F0000',
117-
LOG_ERROR_COLOR: '#EA7B7D',
118-
LOG_WARN_BACKGROUND: 'hsl(50, 100%, 10%)',
119-
LOG_WARN_COLOR: '#F5BC38',
120-
LOG_INFO_COLOR: '#D9D9D9',
121-
LOG_INFO_BORDER: '#4D4D4D',
122-
LOG_COLOR: '#D9D9D9',
123-
LOG_DEBUG_COLOR: '#38B6F5',
124-
LOG_DEBUG_BACKGROUND: '#05232E',
125-
LOG_DEBUG_BORDER: '#0C546E',
126-
TABLE_BORDER_COLOR: 'grey',
127-
TABLE_TH_BACKGROUND_COLOR: 'transparent',
128-
TABLE_TH_HOVER_COLOR: 'grey',
129-
TABLE_SORT_ICON_COLOR: 'grey',
130-
TABLE_DATA_BACKGROUND_IMAGE: 'grey',
131-
TABLE_DATA_BACKGROUND_SIZE: 'grey',
132-
ARROW_COLOR: '#D9D9D9',
133-
LOG_AMOUNT_BACKGROUND: '#5276B7',
134-
LOG_AMOUNT_COLOR: '#333',
135-
LOG_WARN_AMOUNT_BACKGROUND: '#966C08',
136-
LOG_ERROR_AMOUNT_BACKGROUND: '#DD3134',
137-
LOG_DEBUG_AMOUNT_BACKGROUND: '#097BB3'
138-
};
139-
140-
const getConsoleFeedStyle = (theme, fontSize) => {
141-
const style = {
142-
BASE_FONT_FAMILY: 'Inconsolata, monospace'
143-
};
144-
const CONSOLE_FEED_LIGHT_ICONS = {
145-
LOG_WARN_ICON: `url(${warnLightUrl})`,
146-
LOG_ERROR_ICON: `url(${errorLightUrl})`,
147-
LOG_DEBUG_ICON: `url(${debugLightUrl})`,
148-
LOG_INFO_ICON: `url(${infoLightUrl})`,
149-
LOG_COMMAND_ICON: `url(${commandLightUrl})`,
150-
LOG_RESULT_ICON: `url(${resultLightUrl})`
151-
};
152-
const CONSOLE_FEED_DARK_ICONS = {
153-
LOG_WARN_ICON: `url(${warnDarkUrl})`,
154-
LOG_ERROR_ICON: `url(${errorDarkUrl})`,
155-
LOG_DEBUG_ICON: `url(${debugDarkUrl})`,
156-
LOG_INFO_ICON: `url(${infoDarkUrl})`,
157-
LOG_COMMAND_ICON: `url(${commandDarkUrl})`,
158-
LOG_RESULT_ICON: `url(${resultDarkUrl})`
159-
};
160-
const CONSOLE_FEED_CONTRAST_ICONS = {
161-
LOG_WARN_ICON: `url(${warnContrastUrl})`,
162-
LOG_ERROR_ICON: `url(${errorContrastUrl})`,
163-
LOG_DEBUG_ICON: `url(${debugContrastUrl})`,
164-
LOG_INFO_ICON: `url(${infoContrastUrl})`,
165-
LOG_COMMAND_ICON: `url(${commandContrastUrl})`,
166-
LOG_RESULT_ICON: `url(${resultContrastUrl})`
167-
};
168-
const CONSOLE_FEED_SIZES = {
169-
TREENODE_LINE_HEIGHT: 1.2,
170-
BASE_FONT_SIZE: `${fontSize}px`,
171-
ARROW_FONT_SIZE: `${fontSize}px`,
172-
LOG_ICON_WIDTH: `${fontSize}px`,
173-
LOG_ICON_HEIGHT: `${1.45 * fontSize}px`
174-
};
175-
176-
switch (theme) {
177-
case 'light':
178-
return Object.assign(
179-
CONSOLE_FEED_LIGHT_STYLES || {},
180-
CONSOLE_FEED_LIGHT_ICONS,
181-
CONSOLE_FEED_SIZES,
182-
style
183-
);
184-
case 'dark':
185-
return Object.assign(
186-
CONSOLE_FEED_DARK_STYLES || {},
187-
CONSOLE_FEED_DARK_ICONS,
188-
CONSOLE_FEED_SIZES,
189-
style
190-
);
191-
case 'contrast':
192-
return Object.assign(
193-
CONSOLE_FEED_CONTRAST_STYLES || {},
194-
CONSOLE_FEED_CONTRAST_ICONS,
195-
CONSOLE_FEED_SIZES,
196-
style
197-
);
198-
default:
199-
return '';
200-
}
201-
};
17+
import getConsoleFeedStyle from '../utils/consoleStyles';
20218

20319
const Console = () => {
20420
const { t } = useTranslation();
20521
const consoleEvents = useSelector((state) => state.console);
20622
const isExpanded = useSelector((state) => state.ide.consoleIsExpanded);
20723
const isPlaying = useSelector((state) => state.ide.isPlaying);
20824
const { theme, fontSize } = useSelector((state) => state.preferences);
209-
const {
210-
collapseConsole,
211-
expandConsole,
212-
clearConsole,
213-
dispatchConsoleEvent
214-
} = bindActionCreators({ ...IDEActions, ...ConsoleActions }, useDispatch());
25+
const dispatch = useDispatch();
21526

21627
const cm = useRef({});
21728

21829
useDidUpdate(() => {
21930
cm.current.scrollTop = cm.current.scrollHeight;
22031
});
22132

33+
const consoleFeedStyle = useMemo(() => getConsoleFeedStyle(theme, fontSize), [
34+
theme,
35+
fontSize
36+
]);
37+
22238
const handleMessageEvent = useHandleMessageEvent();
39+
22340
useEffect(() => {
22441
const unsubscribe = listen(handleMessageEvent);
22542
return function cleanup() {
22643
unsubscribe();
22744
};
22845
});
22946

47+
const handleClearConsole = () => dispatch(ConsoleActions.clearConsole());
48+
const handleCollapseConsole = () => dispatch(IDEActions.collapseConsole());
49+
const handleExpandConsole = () => dispatch(IDEActions.expandConsole());
50+
23051
const consoleClass = classNames({
23152
'preview-console': true,
23253
'preview-console--collapsed': !isExpanded
@@ -239,21 +60,21 @@ const Console = () => {
23960
<div className="preview-console__header-buttons">
24061
<button
24162
className="preview-console__clear"
242-
onClick={clearConsole}
63+
onClick={handleClearConsole}
24364
aria-label={t('Console.ClearARIA')}
24465
>
24566
{t('Console.Clear')}
24667
</button>
24768
<button
24869
className="preview-console__collapse"
249-
onClick={collapseConsole}
70+
onClick={handleCollapseConsole}
25071
aria-label={t('Console.CloseARIA')}
25172
>
25273
<DownArrowIcon focusable="false" aria-hidden="true" />
25374
</button>
25475
<button
25576
className="preview-console__expand"
256-
onClick={expandConsole}
77+
onClick={handleExpandConsole}
25778
aria-label={t('Console.OpenARIA')}
25879
>
25980
<UpArrowIcon focusable="false" aria-hidden="true" />
@@ -268,17 +89,13 @@ const Console = () => {
26889
>
26990
<ConsoleFeed
27091
variant={theme === 'light' ? 'light' : 'dark'}
271-
styles={getConsoleFeedStyle(theme, fontSize)}
92+
styles={consoleFeedStyle}
27293
logs={consoleEvents}
27394
key={`${theme}-${fontSize}`}
27495
/>
27596
</div>
27697
{isExpanded && isPlaying && (
277-
<ConsoleInput
278-
theme={theme}
279-
dispatchConsoleEvent={dispatchConsoleEvent}
280-
fontSize={fontSize}
281-
/>
98+
<ConsoleInput theme={theme} fontSize={fontSize} />
28299
)}
283100
</div>
284101
</section>

0 commit comments

Comments
 (0)