BetterSEQTA/BetterSEQTA-Plus
1
0
Fork 0
mirror of https://github.com/BetterSEQTA/BetterSEQTA-Plus.git synced 2026-06-06 03:34:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

styling: improve codeeditor component styling

Browse Source
This commit is contained in:
SethBurkart123
2024-03-31 12:02:46 +11:00
parent 08b7698093
commit 806d2419cb
4 changed files with 35 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/interface/components/CodeEditor.css
+11
View File
@@ -0,0 +1,11 @@
.cm-editor {
border-radius: 8px;
}
body:not(.dark) .cm-editor {
@apply bg-zinc-200;
}
.cm-editor.cm-focused {
outline: none;
}
src/interface/components/CodeEditor.tsx
+15 -5
View File
@@ -1,10 +1,11 @@
import CodeMirror, { ViewUpdate } from '@uiw/react-codemirror' import CodeMirror, { ViewUpdate } from '@uiw/react-codemirror'
import { githubDark, githubLight } from '@uiw/codemirror-theme-github' import { githubDark, githubLight } from '@uiw/codemirror-theme-github'
import { color, colorView, colorTheme } from '@uiw/codemirror-extensions-color'; import { color } from '@uiw/codemirror-extensions-color';
import { less } from '@codemirror/lang-less' import { less } from '@codemirror/lang-less'
import { useCallback, useEffect, useState } from 'react'; import { useCallback, useEffect, useState } from 'react';
import './CodeEditor.css'
export default function CodeEditor({ callback, initialState }: { callback: (value: string) => void, initialState: string }) { export default function CodeEditor({ callback, initialState, height }: { callback: (value: string) => void, initialState: string, height: string }) {
const [value, setValue] = useState(initialState) const [value, setValue] = useState(initialState)
const [darkMode, setDarkMode] = useState(false) const [darkMode, setDarkMode] = useState(false)
@@ -20,12 +21,21 @@ export default function CodeEditor({ callback, initialState }: { callback: (valu
}, []) }, [])
return( return(
<CodeMirror basicSetup={{ <CodeMirror
basicSetup={{
allowMultipleSelections: true, allowMultipleSelections: true,
lineNumbers: false, lineNumbers: false,
foldGutter: false, foldGutter: false,
dropCursor: true, dropCursor: true,
tabSize: 2 tabSize: 2,
}} theme={ darkMode ? githubDark : githubLight } placeholder={"It's time to dream up some code!"} value={value} height="200px" extensions={[less(), color]} onChange={onChange} />
}}
theme={ darkMode ? githubDark : githubLight }
placeholder={"It's time to dream up some code!"}
className='rounded-lg'
value={value}
height={height}
extensions={[less(), color]}
onChange={onChange} />
) )
} }
src/interface/index.html
-11
View File
@@ -4,17 +4,6 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BetterSEQTA+ Settings</title> <title>BetterSEQTA+ Settings</title>
<style>
body {
padding: 0;
width: 384px;
height: 600px;
}
body.dark {
background-color: rgb(39 39 42);
}
</style>
</head> </head>
<body> <body>
<div id="ExtensionPopup"></div> <div id="ExtensionPopup"></div>
src/interface/pages/ThemeCreator.tsx
+5 -2
View File
@@ -7,8 +7,11 @@ export default function ThemeCreator() {
} }
return ( return (
<div className='w-full h-full'> <div className='w-full h-[100vh] bg-zinc-100 dark:bg-zinc-800'>
<CodeEditor initialState={'.hi {}'} callback={handleSave} />
<div className='p-2'>
<CodeEditor height='100px' initialState={'.exampleCode {}'} callback={handleSave} />
</div>
</div> </div>
); );
} }