Skip to content

Commit d5faff7

Browse files
rvanasarvanasa
committed
Global theme refactoring (closes #45)
1 parent 9584597 commit d5faff7

File tree

13 files changed

+169
-128
lines changed

13 files changed

+169
-128
lines changed

‎src/components/App.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import useListener from '../hooks/utils/useListener';
66
import GlobalTooltip from './GlobalTooltip';
77
import {BrowserRouter} from 'react-router-dom';
88
import TabLayout from './TabLayout';
9+
import GlobalTheme from './GlobalTheme';
910

1011

1112
export default function App() {
@@ -21,6 +22,7 @@ export default function App() {
2122
return (
2223
<React.StrictMode>
2324
<BrowserRouter>
25+
<GlobalTheme/>
2426
<GlobalTooltip/>
2527
<ToastContainer/>
2628
<TabLayout/>

‎src/components/GlobalTheme.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import useThemeState from '../hooks/settings/useThemeState';
2+
import {useEffect} from 'react';
3+
4+
export default function GlobalTheme() {
5+
6+
const [theme] = useThemeState();
7+
8+
const classNames = [`theme-${theme.id}`, ...theme.parts.map(part => `theme-part-${part}`)];
9+
10+
useEffect(() => {
11+
document.body.classList.add(...classNames);
12+
return () => document.body.classList.remove(...classNames);
13+
});
14+
15+
return null;
16+
}

‎src/components/monaco/CodeEditor.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import MonacoEditor from '@monaco-editor/react';
22
import {configureMonaco} from '../../config/configureMonaco';
33

4-
export default function CodeEditor({value, onChange, ...others}) {
4+
export default function CodeEditor({value, onChange, readOnly, ...others}) {
55

66
// const monaco = useMonaco();
77

@@ -26,6 +26,7 @@ export default function CodeEditor({value, onChange, ...others}) {
2626
// wrappingIndent: 'indent',
2727
scrollBeyondLastLine: false,
2828
fontSize: 16,
29+
readOnly,
2930
}}
3031
{...others}
3132
/>

‎src/components/rete/Editor.js‎

Lines changed: 21 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,8 @@ import EditorMenu from './EditorMenu';
2525
import FileDropZone from '../common/FileDropZone';
2626
import {SHORTCUT_KEYS} from '../../editor/shortcutKeys';
2727
import ConnectionAwareListContext from '../../contexts/ConnectionAwareListContext';
28-
import useThemeState from '../../hooks/settings/useThemeState';
29-
import CompiledOutputWindow from './CompiledOutputWindow';
28+
import OutputWindow from './OutputPanel';
29+
import OutputWindowContext from '../../contexts/OutputPanelContext';
3030

3131
export const DROP_ZONE_EXTENSIONS = ['.blocks', '.blocks.json'];
3232

@@ -128,7 +128,6 @@ export default function Editor({hideMenu, onSetup, onChange, onSave, className,
128128
const events = useContext(EventsContext);
129129
const connectionAwareList = useContext(ConnectionAwareListContext);
130130

131-
const [theme] = useThemeState();
132131
const [isOutputWindowVisible, setOutputWindowVisible] = useState(false);
133132

134133
let editor = null;
@@ -302,17 +301,27 @@ export default function Editor({hideMenu, onSetup, onChange, onSave, className,
302301
}
303302
};
304303

304+
const outputWindow = {
305+
isVisible: isOutputWindowVisible,
306+
setVisible: setOutputWindowVisible,
307+
};
308+
305309
return (
306310
<FileDropZone options={{noClick: true, accept: DROP_ZONE_EXTENSIONS.join(',')}} onFileContent={loadFileContent}>
307-
<EditorContainer
308-
className={classNames('node-editor d-flex flex-grow-1 flex-column', 'theme-' + theme.id, theme.parts.map(part => `theme-part-${part}`), className)}
309-
{...others}>
310-
{!hideMenu && (
311-
<EditorMenu getEditor={() => editor} onLoadFileContent={loadFileContent} setOutputWindowVisible={setOutputWindowVisible}/>
312-
)}
313-
<CompiledOutputWindow isVisible={isOutputWindowVisible} setVisible={setOutputWindowVisible} />
314-
<div ref={bindEditor}/>
315-
</EditorContainer>
311+
<OutputWindowContext.Provider value={outputWindow}>
312+
<EditorContainer
313+
className={classNames('node-editor d-flex flex-grow-1 flex-column', className)}
314+
{...others}>
315+
{!hideMenu && (
316+
<EditorMenu
317+
getEditor={() => editor}
318+
onLoadFileContent={loadFileContent}
319+
/>
320+
)}
321+
<OutputWindow/>
322+
<div ref={bindEditor}/>
323+
</EditorContainer>
324+
</OutputWindowContext.Provider>
316325
</FileDropZone>
317326
);
318327
}

‎src/components/rete/EditorMenu.js‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ import ReactTooltip from 'react-tooltip';
2626
import AreaPlugin from 'rete-area-plugin';
2727
import FloatingMenu from '../common/menus/FloatingMenu';
2828
import SettingsMenu from './SettingsMenu';
29+
import OutputToolbarContext from '../../contexts/OutputPanelContext';
2930

3031
const ProjectNameInput = styled.input`
3132
border: 2px solid transparent !important;
@@ -100,12 +101,14 @@ const BlocksLogo = styled.img`
100101
// }
101102
// `;
102103

103-
export default function EditorMenu({getEditor, onLoadFileContent, setOutputWindowVisible}) {
104+
export default function EditorMenu({getEditor, onLoadFileContent}) {
104105
const [name, setName] = useState('');
105106
const [saveAnimating, setSaveAnimating] = useState(false);
106107
const [zoomAnimating, setZoomAnimating] = useState(false);
107108
const [openMenu, setOpenMenu] = useState(null);
109+
108110
const events = useContext(EventsContext);
111+
const outputToolbar = useContext(OutputToolbarContext);
109112

110113
useListener(events, EDITOR_SAVE_EVENT, () => {
111114
setSaveAnimating(true);
@@ -198,7 +201,7 @@ export default function EditorMenu({getEditor, onLoadFileContent, setOutputWindo
198201
<MenuButton
199202
className="floating small text-muted d-flex align-items-center justify-content-center pt-2"
200203
tooltip="Compile to Motoko"
201-
onMouseDown={() => { setOutputWindowVisible(true)}}>
204+
onMouseDown={() => outputToolbar.setVisible(true)}>
202205
COMPILE
203206
</MenuButton>
204207
</FloatingMenu>

src/components/rete/CompiledOutputWindow.js renamed to src/components/rete/OutputPanel.js

Lines changed: 10 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1-
import React from 'react';
1+
import React, {useContext} from 'react';
22
import Dock from 'react-dock';
33
import styled from 'styled-components';
44
import {FiClipboard, FiX} from 'react-icons/fi';
5-
import useThemeState from '../../hooks/settings/useThemeState';
5+
import CodeEditor from '../monaco/CodeEditor';
6+
import OutputPanelContext from '../../contexts/OutputPanelContext';
67

7-
const OutputWindowContent = styled.div`
8+
const OutputContainer = styled.div`
89
display: flex;
910
flex-direction: column;
1011
width: 100%;
@@ -19,43 +20,27 @@ const ClipboardButton = styled.div`
1920
}
2021
`;
2122

22-
function getStyleByTheme(theme) {
23-
switch(theme) {
24-
case 'light':
25-
return {
26-
backgroundColor: '#FFF',
27-
color: 'rgb(33, 37, 41)',
28-
};
29-
case 'dark':
30-
default:
31-
return {
32-
backgroundColor: '#022030',
33-
borderLeft: '3px solid #00131C',
34-
color: '#FFF',
35-
};
36-
}
37-
}
23+
export default function OutputPanel() {
3824

39-
export default function CompiledOutputWindow({isVisible, setVisible}) {
40-
const [theme] = useThemeState();
25+
const {isVisible, setVisible} = useContext(OutputPanelContext);
4126

4227
return (
43-
<Dock position="right" isVisible={isVisible} className="output-window" dockStyle={getStyleByTheme(theme.id)}>
44-
<OutputWindowContent className="p-3">
28+
<Dock className="output-panel" position="right" isVisible={isVisible} dockStyle={{}} fluid={true}>
29+
<OutputContainer className="p-3">
4530
<div className="clickable pb-3" onClick={() => setVisible(!isVisible)}>
4631
<FiX size={18}/>
4732
</div>
4833
<h3>Compiled Output</h3>
4934
<div className="flex-grow-1 text-muted">
50-
this div is a placeholder for where the code goes...
35+
<CodeEditor value={'test()'} readOnly={true}/>
5136
</div>
5237
<div className="d-flex flex-row align-items-center justify-content-center">
5338
<ClipboardButton className="d-flex flex-row align-items-center justify-content-center py-2 px-3 clickable">
5439
<FiClipboard className="mb-1" style={{marginRight: '0.5rem'}}/>
5540
<small>Copy to Clipboard</small>
5641
</ClipboardButton>
5742
</div>
58-
</OutputWindowContent>
43+
</OutputContainer>
5944
</Dock>
6045
);
6146
}

‎src/contexts/OutputPanelContext.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import React from 'react';
2+
3+
export default React.createContext(null);

‎src/hooks/utils/useLocalStorage.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,5 +43,6 @@ export default function useLocalStorage(key, defaultValue) {
4343
console.error(error);
4444
}
4545
},
46+
// observable,
4647
];
4748
}

‎src/style/mixins/editor/themes/_dark.scss‎

Lines changed: 41 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -2,56 +2,64 @@
22
Dark theme for Blocks.
33
*/
44

5-
.node-editor.theme-dark {
6-
background: #00131C !important;
5+
.theme-dark {
6+
.node-editor {
7+
background: #00131C !important;
78

8-
.menu-button {
9-
&.floating {
10-
background: #022030;
11-
border: 2px solid #032F47;
9+
.menu-button {
10+
&.floating {
11+
background: #022030;
12+
border: 2px solid #032F47;
13+
14+
&:hover {
15+
background: #032F47;
16+
}
17+
}
1218

1319
&:hover {
14-
background: #032F47;
20+
background: #FFF1;
1521
}
1622
}
1723

18-
&:hover {
19-
background: #FFF1;
24+
.top-menu {
25+
background: #022030;
26+
27+
input {
28+
background: #022030 !important;
29+
border-bottom: solid 2px #CCCA !important;
30+
}
2031
}
21-
}
2232

23-
.top-menu {
24-
background: #022030;
33+
.node {
34+
border: none !important;
35+
background: #022030;
2536

26-
input {
27-
background: #022030 !important;
28-
border-bottom: solid 2px #CCCA !important;
37+
&:not(.selected) .header {
38+
background: #00131C;
39+
}
2940
}
30-
}
3141

32-
.node {
33-
border: none !important;
34-
background: #022030;
35-
36-
&:not(.selected) .header {
37-
background: #00131C;
42+
.node-shortcut-button {
43+
background: #111 !important;
3844
}
39-
}
4045

41-
.node-shortcut-button {
42-
background: #111 !important;
43-
}
46+
.grid {
47+
background-image: linear-gradient(to right, #022030 1px, transparent 1px), linear-gradient(to bottom, #022030 1px, transparent 1px);
4448

45-
.grid {
46-
background-image: linear-gradient(to right, #022030 1px, transparent 1px), linear-gradient(to bottom, #022030 1px, transparent 1px);
49+
&.far {
50+
// Hotfix - flickering on Firefox / Safari
51+
background-image: linear-gradient(to right, #022030 1px, transparent 2px), linear-gradient(to bottom, #022030 1px, transparent 2px);
52+
}
53+
}
4754

48-
&.far {
49-
// Hotfix - flickering on Firefox / Safari
50-
background-image: linear-gradient(to right, #022030 1px, transparent 2px), linear-gradient(to bottom, #022030 1px, transparent 2px);
55+
#output-window {
56+
background: #032F47 !important;
5157
}
5258
}
5359

54-
#output-window {
55-
background: #032F47 !important;
60+
.output-panel {
61+
background-color: #022030;
62+
border-left: 3px solid #00131C;
63+
color: #FFF;
5664
}
5765
}

‎src/style/mixins/editor/themes/_light.scss‎

Lines changed: 19 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,23 +5,30 @@ Light theme for Blocks.
55
$grid-color: #CCCC;
66
$grid-color-far: #CCC1A;
77

8-
.node-editor.theme-light {
9-
background: #FAFAFE;
8+
.theme-light {
9+
.node-editor {
10+
background: #FAFAFE;
1011

11-
.node {
12-
background: #FEFEFECC;
12+
.node {
13+
background: #FEFEFECC;
1314

14-
&:not(.selected) .header {
15-
background: #FFF;
15+
&:not(.selected) .header {
16+
background: #FFF;
17+
}
1618
}
17-
}
1819

19-
.grid {
20-
background-image: linear-gradient(to right, #CCCC 1px, transparent 1px), linear-gradient(to bottom, #CCCC 1px, transparent 1px);
20+
.grid {
21+
background-image: linear-gradient(to right, #CCCC 1px, transparent 1px), linear-gradient(to bottom, #CCCC 1px, transparent 1px);
2122

22-
&.far {
23-
// Hotfix - flickering on Firefox / Safari
24-
background-image: linear-gradient(to right, #CCC1 1px, transparent 2px), linear-gradient(to bottom, #CCC1 1px, transparent 2px);
23+
&.far {
24+
// Hotfix - flickering on Firefox / Safari
25+
background-image: linear-gradient(to right, #CCC1 1px, transparent 2px), linear-gradient(to bottom, #CCC1 1px, transparent 2px);
26+
}
2527
}
2628
}
29+
30+
.output-panel {
31+
background-color: #FFF;
32+
color: rgb(33, 37, 41);
33+
}
2734
}

0 commit comments

Comments
 (0)