CadQuery MVP integration #281
@@ -1,5 +1,6 @@
|
||||
|
|
||||
import { useContext, useEffect } from 'react'
|
||||
import { IdeContext } from 'src/components/IdeToolbarNew'
|
||||
import { matchEditorVsDarkTheme } from 'src/components/IdeEditor'
|
||||
I'm using "vs-dark" theme for the editor, only because I think a dark theme make sense since it's the general preference for most devs when it comes to editors at least, happy to load a nicer theme, but for now any dark theme will do. The following are some colors to match this theme for the console. Not crucial but also not hard to do. I'm using "vs-dark" theme for the editor, only because I think a dark theme make sense since it's the general preference for most devs when it comes to editors at least, happy to load a nicer theme, but for now any dark theme will do. The following are some colors to match this theme for the console. Not crucial but also not hard to do.
|
||||
|
||||
const IdeConsole = () => {
|
||||
const { state } = useContext(IdeContext)
|
||||
@@ -9,21 +10,19 @@ const IdeConsole = () => {
|
||||
|
I'm using "vs-dark" theme for the editor, only because I think a dark theme make sense since it's the general preference for most devs when it comes to editors at least, happy to load a nicer theme, but for now any dark theme will do. The following are some colors to match this theme for the console. Not crucial but also not hard to do. I'm using "vs-dark" theme for the editor, only because I think a dark theme make sense since it's the general preference for most devs when it comes to editors at least, happy to load a nicer theme, but for now any dark theme will do. The following are some colors to match this theme for the console. Not crucial but also not hard to do.
I'm using "vs-dark" theme for the editor, only because I think a dark theme make sense since it's the general preference for most devs when it comes to editors at least, happy to load a nicer theme, but for now any dark theme will do. The following are some colors to match this theme for the console. Not crucial but also not hard to do. I'm using "vs-dark" theme for the editor, only because I think a dark theme make sense since it's the general preference for most devs when it comes to editors at least, happy to load a nicer theme, but for now any dark theme will do. The following are some colors to match this theme for the console. Not crucial but also not hard to do.
|
||||
element.scrollTop = element.scrollHeight - element.clientHeight
|
||||
}
|
||||
}, [state.consoleMessages])
|
||||
const matchEditorVsDarkThemeBg = { backgroundColor: 'rgb(30,30,30)' }
|
||||
|
I'm using "vs-dark" theme for the editor, only because I think a dark theme make sense since it's the general preference for most devs when it comes to editors at least, happy to load a nicer theme, but for now any dark theme will do. The following are some colors to match this theme for the console. Not crucial but also not hard to do. I'm using "vs-dark" theme for the editor, only because I think a dark theme make sense since it's the general preference for most devs when it comes to editors at least, happy to load a nicer theme, but for now any dark theme will do. The following are some colors to match this theme for the console. Not crucial but also not hard to do.
|
||||
const matchEditorVsDarkThemeText = { color: 'rgb(212,212,212)' }
|
||||
|
I'm using "vs-dark" theme for the editor, only because I think a dark theme make sense since it's the general preference for most devs when it comes to editors at least, happy to load a nicer theme, but for now any dark theme will do. The following are some colors to match this theme for the console. Not crucial but also not hard to do. I'm using "vs-dark" theme for the editor, only because I think a dark theme make sense since it's the general preference for most devs when it comes to editors at least, happy to load a nicer theme, but for now any dark theme will do. The following are some colors to match this theme for the console. Not crucial but also not hard to do.
|
||||
const matchEditorVsDarkThemeTextBrown = { color: 'rgb(206,144,120)' }
|
||||
|
I'm using "vs-dark" theme for the editor, only because I think a dark theme make sense since it's the general preference for most devs when it comes to editors at least, happy to load a nicer theme, but for now any dark theme will do. The following are some colors to match this theme for the console. Not crucial but also not hard to do. I'm using "vs-dark" theme for the editor, only because I think a dark theme make sense since it's the general preference for most devs when it comes to editors at least, happy to load a nicer theme, but for now any dark theme will do. The following are some colors to match this theme for the console. Not crucial but also not hard to do.
|
||||
|
||||
|
I'm using "vs-dark" theme for the editor, only because I think a dark theme make sense since it's the general preference for most devs when it comes to editors at least, happy to load a nicer theme, but for now any dark theme will do. The following are some colors to match this theme for the console. Not crucial but also not hard to do. I'm using "vs-dark" theme for the editor, only because I think a dark theme make sense since it's the general preference for most devs when it comes to editors at least, happy to load a nicer theme, but for now any dark theme will do. The following are some colors to match this theme for the console. Not crucial but also not hard to do.
This effect scrolls the console to the bottom whenever there is a new message. Users can still scroll up to look at history, it just snaps back down next message. We might want to add a checkbox to turn off/on this functionality, but I think this is a good default and unless someone complains about it, might as well stay as is. This effect scrolls the console to the bottom whenever there is a new message. Users can still scroll up to look at history, it just snaps back down next message. We might want to add a checkbox to turn off/on this functionality, but I think this is a good default and unless someone complains about it, might as well stay as is.
Hey nice! So few lines of code. Yeah that should be configurable in future: that's one of those less-technical bits I can deal with for you coming up, so you don't have to waste time on it. Hey nice! So few lines of code. Yeah that should be configurable in future: that's one of those less-technical bits I can deal with for you coming up, so you don't have to waste time on it.
|
||||
return (
|
||||
<div className="p-2 px-4 min-h-full" style={matchEditorVsDarkThemeBg}>
|
||||
|
I'm using "vs-dark" theme for the editor, only because I think a dark theme make sense since it's the general preference for most devs when it comes to editors at least, happy to load a nicer theme, but for now any dark theme will do. The following are some colors to match this theme for the console. Not crucial but also not hard to do. I'm using "vs-dark" theme for the editor, only because I think a dark theme make sense since it's the general preference for most devs when it comes to editors at least, happy to load a nicer theme, but for now any dark theme will do. The following are some colors to match this theme for the console. Not crucial but also not hard to do.
|
||||
<div className="p-2 px-4 min-h-full" style={matchEditorVsDarkTheme.Bg}>
|
||||
|
I'm using "vs-dark" theme for the editor, only because I think a dark theme make sense since it's the general preference for most devs when it comes to editors at least, happy to load a nicer theme, but for now any dark theme will do. The following are some colors to match this theme for the console. Not crucial but also not hard to do. I'm using "vs-dark" theme for the editor, only because I think a dark theme make sense since it's the general preference for most devs when it comes to editors at least, happy to load a nicer theme, but for now any dark theme will do. The following are some colors to match this theme for the console. Not crucial but also not hard to do.
|
||||
<div>
|
||||
{state.consoleMessages?.map(({ type, message, time }, index) => (
|
||||
<pre
|
||||
className="font-mono text-sm"
|
||||
style={matchEditorVsDarkThemeText}
|
||||
|
I'm using "vs-dark" theme for the editor, only because I think a dark theme make sense since it's the general preference for most devs when it comes to editors at least, happy to load a nicer theme, but for now any dark theme will do. The following are some colors to match this theme for the console. Not crucial but also not hard to do. I'm using "vs-dark" theme for the editor, only because I think a dark theme make sense since it's the general preference for most devs when it comes to editors at least, happy to load a nicer theme, but for now any dark theme will do. The following are some colors to match this theme for the console. Not crucial but also not hard to do.
|
||||
style={matchEditorVsDarkTheme.Text}
|
||||
|
I'm using "vs-dark" theme for the editor, only because I think a dark theme make sense since it's the general preference for most devs when it comes to editors at least, happy to load a nicer theme, but for now any dark theme will do. The following are some colors to match this theme for the console. Not crucial but also not hard to do. I'm using "vs-dark" theme for the editor, only because I think a dark theme make sense since it's the general preference for most devs when it comes to editors at least, happy to load a nicer theme, but for now any dark theme will do. The following are some colors to match this theme for the console. Not crucial but also not hard to do.
|
||||
key={message + index}
|
||||
>
|
||||
<div
|
||||
className="text-xs font-bold pt-2"
|
||||
style={matchEditorVsDarkThemeTextBrown}
|
||||
|
I'm using "vs-dark" theme for the editor, only because I think a dark theme make sense since it's the general preference for most devs when it comes to editors at least, happy to load a nicer theme, but for now any dark theme will do. The following are some colors to match this theme for the console. Not crucial but also not hard to do. I'm using "vs-dark" theme for the editor, only because I think a dark theme make sense since it's the general preference for most devs when it comes to editors at least, happy to load a nicer theme, but for now any dark theme will do. The following are some colors to match this theme for the console. Not crucial but also not hard to do.
|
||||
style={matchEditorVsDarkTheme.TextBrown}
|
||||
|
I'm using "vs-dark" theme for the editor, only because I think a dark theme make sense since it's the general preference for most devs when it comes to editors at least, happy to load a nicer theme, but for now any dark theme will do. The following are some colors to match this theme for the console. Not crucial but also not hard to do. I'm using "vs-dark" theme for the editor, only because I think a dark theme make sense since it's the general preference for most devs when it comes to editors at least, happy to load a nicer theme, but for now any dark theme will do. The following are some colors to match this theme for the console. Not crucial but also not hard to do.
|
||||
>
|
||||
{time?.toLocaleString()}
|
||||
</div>
|
||||
|
||||
|
I'm using "vs-dark" theme for the editor, only because I think a dark theme make sense since it's the general preference for most devs when it comes to editors at least, happy to load a nicer theme, but for now any dark theme will do. The following are some colors to match this theme for the console. Not crucial but also not hard to do. I'm using "vs-dark" theme for the editor, only because I think a dark theme make sense since it's the general preference for most devs when it comes to editors at least, happy to load a nicer theme, but for now any dark theme will do. The following are some colors to match this theme for the console. Not crucial but also not hard to do.
I'm using "vs-dark" theme for the editor, only because I think a dark theme make sense since it's the general preference for most devs when it comes to editors at least, happy to load a nicer theme, but for now any dark theme will do. The following are some colors to match this theme for the console. Not crucial but also not hard to do. I'm using "vs-dark" theme for the editor, only because I think a dark theme make sense since it's the general preference for most devs when it comes to editors at least, happy to load a nicer theme, but for now any dark theme will do. The following are some colors to match this theme for the console. Not crucial but also not hard to do.
|
||||
@@ -2,7 +2,7 @@ import { useContext, useRef, useEffect } from 'react'
|
||||
import { Mosaic, MosaicWindow } from 'react-mosaic-component'
|
||||
import { IdeContext } from 'src/components/IdeToolbarNew'
|
||||
import { requestRender } from 'src/helpers/hooks/useIdeState'
|
||||
import IdeEditor from 'src/components/IdeEditor'
|
||||
import IdeEditor, { matchEditorVsDarkTheme } from 'src/components/IdeEditor'
|
||||
import IdeViewer from 'src/components/IdeViewer'
|
||||
import IdeConsole from 'src/components/IdeConsole'
|
||||
import 'react-mosaic-component/react-mosaic-component.css'
|
||||
@@ -67,7 +67,7 @@ const IdeContainer = () => {
|
||||
renderToolbar={() => (
|
||||
<div
|
||||
className="text-xs text-gray-400 pl-4 w-full py-px font-bold leading-loose border-b border-gray-700"
|
||||
style={{ backgroundColor: 'rgb(55,55,55)' }}
|
||||
style={matchEditorVsDarkTheme.lighterBg}
|
||||
>
|
||||
{id}
|
||||
{id === 'Editor' && ` (${state.ideType})`}
|
||||
|
||||
@@ -4,6 +4,14 @@ import { codeStorageKey } from 'src/helpers/hooks/useIdeState'
|
||||
import { requestRender } from 'src/helpers/hooks/useIdeState'
|
||||
const Editor = lazy(() => import('@monaco-editor/react'))
|
||||
|
||||
export const matchEditorVsDarkTheme = {
|
||||
// Some colors to roughly match the vs-dark editor theme
|
||||
Bg: { backgroundColor: 'rgb(30,30,30)' },
|
||||
lighterBg: { backgroundColor: 'rgb(55,55,55)' },
|
||||
Text: { color: 'rgb(212,212,212)' },
|
||||
TextBrown: { color: 'rgb(206,144,120)' },
|
||||
}
|
||||
|
||||
const IdeEditor = () => {
|
||||
const { state, thunkDispatch } = useContext(IdeContext)
|
||||
const ideTypeToLanguageMap = {
|
||||
|
||||
I'm using "vs-dark" theme for the editor, only because I think a dark theme make sense since it's the general preference for most devs when it comes to editors at least, happy to load a nicer theme, but for now any dark theme will do. The following are some colors to match this theme for the console. Not crucial but also not hard to do.
I'm using "vs-dark" theme for the editor, only because I think a dark theme make sense since it's the general preference for most devs when it comes to editors at least, happy to load a nicer theme, but for now any dark theme will do. The following are some colors to match this theme for the console. Not crucial but also not hard to do.