Skip to content

Commit 87d7c10

Browse files
catarakcatarak
committed
merge develop
2 parents a82fad9 + fc1a9fb commit 87d7c10

File tree

11 files changed

+1447
-379
lines changed

11 files changed

+1447
-379
lines changed

‎client/components/Nav.jsx

Lines changed: 26 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -671,30 +671,50 @@ class Nav extends React.PureComponent {
671671
<button
672672
onFocus={this.handleFocusForLang}
673673
onBlur={this.handleBlur}
674-
value="zh-CN"
674+
value="ja"
675675
onClick={(e) => this.handleLangSelection(e)}
676676
>
677-
简体中文
677+
日本語
678678
</button>
679679
</li>
680680
<li className="nav__dropdown-item">
681681
<button
682682
onFocus={this.handleFocusForLang}
683683
onBlur={this.handleBlur}
684-
value="ja"
684+
value="pt-BR"
685685
onClick={(e) => this.handleLangSelection(e)}
686686
>
687-
日本語
687+
Português
688688
</button>
689689
</li>
690690
<li className="nav__dropdown-item">
691691
<button
692692
onFocus={this.handleFocusForLang}
693693
onBlur={this.handleBlur}
694-
value="pt-BR"
694+
value="uk-UA"
695695
onClick={(e) => this.handleLangSelection(e)}
696696
>
697-
Português
697+
Українська
698+
</button>
699+
</li>
700+
<li className="nav__dropdown-item">
701+
<button
702+
onFocus={this.handleFocusForLang}
703+
onBlur={this.handleBlur}
704+
value="zh-CN"
705+
onClick={(e) => this.handleLangSelection(e)}
706+
>
707+
简体中文
708+
</button>
709+
</li>
710+
<li className="nav__dropdown-item">
711+
<button
712+
onFocus={this.handleFocusForLang}
713+
onBlur={this.handleBlur}
714+
value="zh-TW"
715+
onClick={(e) => this.handleLangSelection(e)}
716+
>
717+
正體中文
698718
</button>
699719
</li>
700720
</ul>

‎client/i18n.js

Lines changed: 21 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,18 @@
11
import i18n from 'i18next';
22
import { initReactI18next } from 'react-i18next';
33
import Backend from 'i18next-http-backend';
4-
import { enUS, es, ja, hi, ptBR, de, frCA, zhCN } from 'date-fns/locale';
4+
import {
5+
enUS,
6+
es,
7+
ja,
8+
hi,
9+
ptBR,
10+
de,
11+
frCA,
12+
zhCN,
13+
zhTW,
14+
uk
15+
} from 'date-fns/locale';
516

617
const fallbackLng = ['en-US'];
718
const availableLanguages = [
@@ -12,7 +23,9 @@ const availableLanguages = [
1223
'hi',
1324
'ja',
1425
'pt-BR',
15-
'zh-CN'
26+
'uk-UA',
27+
'zh-CN',
28+
'zh-TW'
1629
];
1730

1831
export function languageKeyToLabel(lang) {
@@ -24,7 +37,9 @@ export function languageKeyToLabel(lang) {
2437
hi: 'हिन्दी',
2538
ja: '日本語',
2639
'pt-BR': 'Português',
27-
'zh-CN': '简体中文'
40+
'uk-UA': 'Українська',
41+
'zh-CN': '简体中文',
42+
'zh-TW': '正體中文'
2843
};
2944
return languageMap[lang];
3045
}
@@ -38,7 +53,9 @@ export function languageKeyToDateLocale(lang) {
3853
hi,
3954
ja,
4055
'pt-BR': ptBR,
41-
'zh-CN': zhCN
56+
'uk-UA': uk,
57+
'zh-CN': zhCN,
58+
'zh-TW': zhTW
4259
};
4360
return languageMap[lang];
4461
}

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

Lines changed: 18 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import { useSelector, useDispatch } from 'react-redux';
88
import classNames from 'classnames';
99
import { Console as ConsoleFeed } from 'console-feed';
1010
import {
11-
CONSOLE_FEED_WITHOUT_ICONS,
1211
CONSOLE_FEED_LIGHT_STYLES,
1312
CONSOLE_FEED_DARK_STYLES,
1413
CONSOLE_FEED_CONTRAST_STYLES
@@ -43,7 +42,7 @@ import { useDidUpdate } from '../hooks/custom-hooks';
4342
import useHandleMessageEvent from '../hooks/useHandleMessageEvent';
4443
import { listen } from '../../../utils/dispatcher';
4544

46-
const getConsoleFeedStyle = (theme, times, fontSize) => {
45+
const getConsoleFeedStyle = (theme, fontSize) => {
4746
const style = {
4847
BASE_FONT_FAMILY: 'Inconsolata, monospace'
4948
};
@@ -73,33 +72,30 @@ const getConsoleFeedStyle = (theme, times, fontSize) => {
7372
};
7473
const CONSOLE_FEED_SIZES = {
7574
TREENODE_LINE_HEIGHT: 1.2,
76-
BASE_FONT_SIZE: fontSize,
77-
ARROW_FONT_SIZE: fontSize,
78-
LOG_ICON_WIDTH: fontSize,
79-
LOG_ICON_HEIGHT: 1.45 * fontSize
75+
BASE_FONT_SIZE: `${fontSize}px`,
76+
ARROW_FONT_SIZE: `${fontSize}px`,
77+
LOG_ICON_WIDTH: `${fontSize}px`,
78+
LOG_ICON_HEIGHT: `${1.45 * fontSize}px`
8079
};
8180

82-
if (times > 1) {
83-
Object.assign(style, CONSOLE_FEED_WITHOUT_ICONS);
84-
}
8581
switch (theme) {
8682
case 'light':
8783
return Object.assign(
88-
CONSOLE_FEED_LIGHT_STYLES,
84+
CONSOLE_FEED_LIGHT_STYLES || {},
8985
CONSOLE_FEED_LIGHT_ICONS,
9086
CONSOLE_FEED_SIZES,
9187
style
9288
);
9389
case 'dark':
9490
return Object.assign(
95-
CONSOLE_FEED_DARK_STYLES,
91+
CONSOLE_FEED_DARK_STYLES || {},
9692
CONSOLE_FEED_DARK_ICONS,
9793
CONSOLE_FEED_SIZES,
9894
style
9995
);
10096
case 'contrast':
10197
return Object.assign(
102-
CONSOLE_FEED_CONTRAST_STYLES,
98+
CONSOLE_FEED_CONTRAST_STYLES || {},
10399
CONSOLE_FEED_CONTRAST_ICONS,
104100
CONSOLE_FEED_SIZES,
105101
style
@@ -114,7 +110,6 @@ const Console = ({ t }) => {
114110
const isExpanded = useSelector((state) => state.ide.consoleIsExpanded);
115111
const isPlaying = useSelector((state) => state.ide.isPlaying);
116112
const { theme, fontSize } = useSelector((state) => state.preferences);
117-
118113
const {
119114
collapseConsole,
120115
expandConsole,
@@ -170,30 +165,16 @@ const Console = ({ t }) => {
170165
</div>
171166
</header>
172167
<div className="preview-console__body">
173-
<div ref={cm} className="preview-console__messages">
174-
{consoleEvents.map((consoleEvent) => {
175-
const { method, times } = consoleEvent;
176-
return (
177-
<div
178-
key={consoleEvent.id}
179-
className={`preview-console__message preview-console__message--${method}`}
180-
>
181-
{times > 1 && (
182-
<div
183-
className="preview-console__logged-times"
184-
style={{ fontSize, borderRadius: fontSize / 2 }}
185-
>
186-
{times}
187-
</div>
188-
)}
189-
<ConsoleFeed
190-
styles={getConsoleFeedStyle(theme, times, fontSize)}
191-
logs={[consoleEvent]}
192-
key={`${consoleEvent.id}-${theme}-${fontSize}`}
193-
/>
194-
</div>
195-
);
196-
})}
168+
<div
169+
ref={cm}
170+
className="preview-console__messages"
171+
style={{ fontSize }}
172+
>
173+
<ConsoleFeed
174+
styles={getConsoleFeedStyle(theme, fontSize)}
175+
logs={consoleEvents}
176+
key={`${theme}-${fontSize}`}
177+
/>
197178
</div>
198179
{isExpanded && isPlaying && (
199180
<ConsoleInput

‎client/modules/IDE/hooks/useHandleMessageEvent.js

Lines changed: 0 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { useDispatch } from 'react-redux';
22
import { Decode } from 'console-feed';
3-
import { isEqual } from 'lodash';
43
import { dispatchConsoleEvent } from '../actions/console';
54
import { stopSketch, expandConsole } from '../actions/ide';
65

@@ -27,23 +26,6 @@ export default function useHandleMessageEvent() {
2726
if (hasInfiniteLoop) {
2827
return false;
2928
}
30-
if (index === arr.length - 1) {
31-
Object.assign(message, { times: 1 });
32-
return false;
33-
}
34-
// this should be done in the reducer probs
35-
const cur = Object.assign(message, { times: 1 });
36-
const nextIndex = index + 1;
37-
while (
38-
isEqual(cur.data, arr[nextIndex].data) &&
39-
cur.method === arr[nextIndex].method
40-
) {
41-
cur.times += 1;
42-
arr.splice(nextIndex, 1);
43-
if (nextIndex === arr.length) {
44-
return false;
45-
}
46-
}
4729
return true;
4830
});
4931
dispatch(dispatchConsoleEvent(decodedMessages));

‎client/modules/IDE/reducers/console.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as ActionTypes from '../../../constants';
22

3-
const consoleMax = 500;
3+
const consoleMax = 5000;
44
const initialState = [];
55

66
const console = (state = initialState, action) => {

‎client/styles/components/_console-feed.scss

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,11 @@ $CONSOLE_FEED_LIGHT_STYLES: (
2727
OBJECT_VALUE_NUMBER_COLOR: '#333',
2828
OBJECT_VALUE_BOOLEAN_COLOR: '#D52889',
2929
OBJECT_VALUE_FUNCTION_KEYWORD_COLOR: '#0B7CA9',
30+
LOG_AMOUNT_BACKGROUND: '#5276B7',
31+
LOG_AMOUNT_COLOR: '#FFF',
32+
LOG_WARN_AMOUNT_BACKGROUND: '#996B00',
33+
LOG_ERROR_AMOUNT_BACKGROUND: '#D11518',
34+
LOG_DEBUG_AMOUNT_BACKGROUND: '#0071AD'
3035
);
3136

3237
$CONSOLE_FEED_DARK_STYLES: (
@@ -57,7 +62,12 @@ $CONSOLE_FEED_DARK_STYLES: (
5762
TABLE_SORT_ICON_COLOR: 'grey',
5863
TABLE_DATA_BACKGROUND_IMAGE: 'grey',
5964
TABLE_DATA_BACKGROUND_SIZE: 'grey',
60-
ARROW_COLOR: '#D9D9D9'
65+
ARROW_COLOR: '#D9D9D9',
66+
LOG_AMOUNT_BACKGROUND: '#5276B7',
67+
LOG_AMOUNT_COLOR: '#333',
68+
LOG_WARN_AMOUNT_BACKGROUND: '#996B00',
69+
LOG_ERROR_AMOUNT_BACKGROUND: '#D11518',
70+
LOG_DEBUG_AMOUNT_BACKGROUND: '#0071AD'
6171
);
6272

6373
$CONSOLE_FEED_CONTRAST_STYLES: (
@@ -88,5 +98,10 @@ $CONSOLE_FEED_CONTRAST_STYLES: (
8898
TABLE_SORT_ICON_COLOR: 'grey',
8999
TABLE_DATA_BACKGROUND_IMAGE: 'grey',
90100
TABLE_DATA_BACKGROUND_SIZE: 'grey',
91-
ARROW_COLOR: '#D9D9D9'
101+
ARROW_COLOR: '#D9D9D9',
102+
LOG_AMOUNT_BACKGROUND: '#5276B7',
103+
LOG_AMOUNT_COLOR: '#333',
104+
LOG_WARN_AMOUNT_BACKGROUND: '#966C08',
105+
LOG_ERROR_AMOUNT_BACKGROUND: '#DD3134',
106+
LOG_DEBUG_AMOUNT_BACKGROUND: '#097BB3'
92107
);

‎client/styles/components/_console.scss

Lines changed: 5 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,11 @@
4343
flex: 1;
4444
flex-direction: column;
4545
overflow-y: auto;
46+
& div div div:first-child {
47+
height: unset;
48+
line-height: unset;
49+
font-size: unset;
50+
}
4651
}
4752

4853
.preview-console__collapse {
@@ -97,47 +102,8 @@
97102
}
98103
}
99104

100-
.preview-console__logged-times {
101-
102-
font-weight: bold;
103-
margin: #{2 / $base-font-size}rem 0 0 #{8 / $base-font-size}rem;
104-
border-radius: #{10 / $base-font-size}rem;
105-
padding: #{1 / $base-font-size}rem #{4 / $base-font-size}rem;
106-
z-index: 100;
107-
left: 0;
108-
position: absolute;
109-
110-
.preview-console__message--info &, .preview-console__message--log & {
111-
@include themify() {
112-
background-color: getThemifyVariable('console-info-background-color');
113-
}
114-
}
115-
.preview-console__message--warn & {
116-
@include themify() {
117-
background-color: getThemifyVariable('console-warn-background-color');
118-
}
119-
}
120-
.preview-console__message--debug & {
121-
@include themify() {
122-
background-color: getThemifyVariable('console-debug-background-color');
123-
}
124-
}
125-
.preview-console__message--error & {
126-
@include themify() {
127-
background-color: getThemifyVariable('console-error-background-color');
128-
}
129-
}
130-
}
131-
132105
.preview-console__body {
133106
display: flex;
134107
flex-direction: column;
135108
height: calc(100% - #{30 / $base-font-size}rem);
136-
137-
.preview-console__message {
138-
position: relative;
139-
@include themify() {
140-
color: getThemifyVariable('console-logged-times-color');
141-
}
142-
}
143109
}

0 commit comments

Comments
 (0)