From 090e4c14c0f1fe68ac92dd27566f447790f2db7f Mon Sep 17 00:00:00 2001 From: Bryan Mointalvan Date: Sun, 2 Apr 2023 18:42:28 -0400 Subject: [PATCH 1/2] Initial Commit for darkmode --- package-lock.json | 16 +++++------ src/actions/userActions.js | 7 ++++- src/components/editor/Darkmode.js | 46 +++++++++++++++++++++++++++++++ src/components/editor/Editor.js | 10 +++++-- src/constants/ActionTypes.js | 1 + src/css/KeyboardShortcut.css | 21 +++++++++++++- 6 files changed, 89 insertions(+), 12 deletions(-) create mode 100644 src/components/editor/Darkmode.js diff --git a/package-lock.json b/package-lock.json index 479f19e0..127a7350 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8277,7 +8277,7 @@ } }, "node_modules/debug": { - "resolved": "https://github.com/ngokevin/debug.git#ef5f8e66d49ce8bc64c6f282c15f8b7164409e3a" + "resolved": "git+ssh://git@github.com/ngokevin/debug.git#ef5f8e66d49ce8bc64c6f282c15f8b7164409e3a" }, "node_modules/decamelize": { "version": "1.2.0", @@ -8771,7 +8771,7 @@ } }, "node_modules/document-register-element": { - "resolved": "https://github.com/dmarcos/document-register-element.git#8ccc532b7f3744be954574caf3072a5fd260ca90" + "resolved": "git+ssh://git@github.com/dmarcos/document-register-element.git#8ccc532b7f3744be954574caf3072a5fd260ca90" }, "node_modules/dom-converter": { "version": "0.2.0", @@ -25608,7 +25608,7 @@ }, "node_modules/three-bmfont-text": { "version": "2.4.0", - "resolved": "https://github.com/dmarcos/three-bmfont-text.git#21d017046216e318362c48abd1a48bddfb6e0733", + "resolved": "git+ssh://git@github.com/dmarcos/three-bmfont-text.git#21d017046216e318362c48abd1a48bddfb6e0733", "integrity": "sha512-lIMa1n+QKNU1f/LZgtS1oUGpoop3MuVXrUr5ybZOUR3+Jk//zjqScnQpHml6MWyvZzL8A5/1Hd8Tsqd3M1kudA==", "license": "MIT", "dependencies": { @@ -25623,7 +25623,7 @@ }, "node_modules/three-buffer-vertex-data": { "version": "1.1.0", - "resolved": "https://github.com/dmarcos/three-buffer-vertex-data.git#69378fc58daf27d3b1d930df9f233473e4a4818c", + "resolved": "git+ssh://git@github.com/dmarcos/three-buffer-vertex-data.git#69378fc58daf27d3b1d930df9f233473e4a4818c", "integrity": "sha512-ZPCCbGfueRzd2/YwH136UnVN+N11Mvxu7uPaEzIdtuk0m5HPs1LGXOM5hOkpxamjvqSC6MDJ3nd11grGi7sMKw==", "license": "MIT", "dependencies": { @@ -34724,7 +34724,7 @@ } }, "debug": { - "version": "https://github.com/ngokevin/debug.git#ef5f8e66d49ce8bc64c6f282c15f8b7164409e3a", + "version": "git+ssh://git@github.com/ngokevin/debug.git#ef5f8e66d49ce8bc64c6f282c15f8b7164409e3a", "from": "debug@github:ngokevin/debug#noTimestamp" }, "decamelize": { @@ -35129,7 +35129,7 @@ } }, "document-register-element": { - "version": "https://github.com/dmarcos/document-register-element.git#8ccc532b7f3744be954574caf3072a5fd260ca90", + "version": "git+ssh://git@github.com/dmarcos/document-register-element.git#8ccc532b7f3744be954574caf3072a5fd260ca90", "from": "document-register-element@github:dmarcos/document-register-element#8ccc532b7f3744be954574caf3072a5fd260ca90" }, "dom-converter": { @@ -48643,7 +48643,7 @@ "integrity": "sha512-eOEXnZeE1FDV0XgL1u08auIP13jxdN9LQBAEmlErYzMxtIIfuGIAZbijOyookALUhqVzVOx0Tywj6n192VM+nQ==" }, "three-bmfont-text": { - "version": "https://github.com/dmarcos/three-bmfont-text.git#21d017046216e318362c48abd1a48bddfb6e0733", + "version": "git+ssh://git@github.com/dmarcos/three-bmfont-text.git#21d017046216e318362c48abd1a48bddfb6e0733", "integrity": "sha512-lIMa1n+QKNU1f/LZgtS1oUGpoop3MuVXrUr5ybZOUR3+Jk//zjqScnQpHml6MWyvZzL8A5/1Hd8Tsqd3M1kudA==", "from": "three-bmfont-text@github:dmarcos/three-bmfont-text#21d017046216e318362c48abd1a48bddfb6e0733", "requires": { @@ -48657,7 +48657,7 @@ } }, "three-buffer-vertex-data": { - "version": "https://github.com/dmarcos/three-buffer-vertex-data.git#69378fc58daf27d3b1d930df9f233473e4a4818c", + "version": "git+ssh://git@github.com/dmarcos/three-buffer-vertex-data.git#69378fc58daf27d3b1d930df9f233473e4a4818c", "integrity": "sha512-ZPCCbGfueRzd2/YwH136UnVN+N11Mvxu7uPaEzIdtuk0m5HPs1LGXOM5hOkpxamjvqSC6MDJ3nd11grGi7sMKw==", "from": "three-buffer-vertex-data@dmarcos/three-buffer-vertex-data#69378fc58daf27d3b1d930df9f233473e4a4818c", "requires": { diff --git a/src/actions/userActions.js b/src/actions/userActions.js index 6c9be3ba..1612e7f2 100644 --- a/src/actions/userActions.js +++ b/src/actions/userActions.js @@ -6,6 +6,10 @@ export function updateFontSize(fontSize){ return{ type: types.UPDATE_FONT_SIZE, fontSize }; } +export function updateThemeColor(themeColor) { + return { type: types.UPDATE_THEME_COLOR, themeColor }; +} + export function updateUserSettings(id,settings){ return ()=>{ if(id){ @@ -43,5 +47,6 @@ export default { updateFontSize, asyncUserSettings, syncUserSettings, - updateUserSettings + updateUserSettings, + updateThemeColor }; \ No newline at end of file diff --git a/src/components/editor/Darkmode.js b/src/components/editor/Darkmode.js new file mode 100644 index 00000000..83d965d7 --- /dev/null +++ b/src/components/editor/Darkmode.js @@ -0,0 +1,46 @@ +import React from "react"; +import { + Button, + Select, + Tooltip, +} from "@material-ui/core"; +import "../../css/KeyboardShortcut.css"; +export default function DarkModeSelector(userActions, settings) { + + // handleFontSizeUpdate = (e) => { + // this.props.userActions.updateFontSize(e.target.value); + // this.props.refreshText(); + // } + + // const [currentTheme, setCurrentTheme] = useState(); + const themes = [ + "github", "eclipse", "xcode", "dracula", "gruvbox", "monokai" + ]; + + function handleChange(e) { + userActions.updateFontSize(e.target.value); + } + + return ( +
+ + + +
+ ); +} + diff --git a/src/components/editor/Editor.js b/src/components/editor/Editor.js index 842f512b..66c790bb 100644 --- a/src/components/editor/Editor.js +++ b/src/components/editor/Editor.js @@ -10,6 +10,7 @@ import KeyboardShortcut from "./KeyboardShortcut.js"; import { browserType } from "../../utils/browserType"; import FontSize from "./FontSize.js"; import copy from "copy-to-clipboard"; +import DarkModeSelector from "./Darkmode.js"; /** * Editor is a React Component that create the Ace Editor in the DOM. @@ -121,8 +122,13 @@ class Editor extends Component { enableLiveAutocompletion={true} onLoad={this.onLoad} /> - { browserType() === "desktop" ?
-
: null } + { browserType() === "desktop" ?
+ + + +
: null } + + ); } diff --git a/src/constants/ActionTypes.js b/src/constants/ActionTypes.js index 3ff41bdc..435e99ab 100644 --- a/src/constants/ActionTypes.js +++ b/src/constants/ActionTypes.js @@ -50,5 +50,6 @@ export const DELETE_COLLECTION = "DELETE_COLLECTION"; export const SYNC_USER_SETTINGS = "SYNC_USER_SETTINGS"; export const UPDATE_FONT_SIZE = "UPDATE_FONT_SIZE"; +export const UPDATE_THEME_COLOR = "UPDATE_THEME_COLOR"; export const LOAD_REF_EX = "LOAD_REF_EX"; diff --git a/src/css/KeyboardShortcut.css b/src/css/KeyboardShortcut.css index 65b0437f..3505f98d 100644 --- a/src/css/KeyboardShortcut.css +++ b/src/css/KeyboardShortcut.css @@ -32,7 +32,21 @@ .font { display: inline-block; - margin-left: 4px; + margin-left: 5px; +} + +#form-control { + margin-top: 0; +} + +.theme-div { + display: inline-block; + margin-left: 5px; + margin-top: 0; +} + +.theme-div > button { + width: 120px; } .whole-keyboard { @@ -43,4 +57,9 @@ .select { color: white !important; margin-left: 5px; +} + +.theme-select { + color: black !important; + margin-left: 5px; } \ No newline at end of file From d1ac714eb6321d09e47d22af2025b2eb3b99ec2b Mon Sep 17 00:00:00 2001 From: Bryan Mointalvan Date: Tue, 4 Apr 2023 11:58:05 -0400 Subject: [PATCH 2/2] Editor Theme Finalization This commit does the folloiwng changes: - Made all state variables consistent "theme" instead of "theme_color" - Made theme dynamic by binding it to "settings" state. - Added default values to our tests - Increased width of theme-button --- src/actions/userActions.js | 6 +++--- src/components/editor/Editor.js | 13 +++++++++--- .../editor/{Darkmode.js => Theme.js} | 21 +++++++------------ src/constants/ActionTypes.js | 2 +- src/css/KeyboardShortcut.css | 2 +- src/reducers/user.js | 11 +++++++++- src/tests/App.test.js | 12 +++++++---- 7 files changed, 41 insertions(+), 26 deletions(-) rename src/components/editor/{Darkmode.js => Theme.js} (65%) diff --git a/src/actions/userActions.js b/src/actions/userActions.js index 1612e7f2..951d6437 100644 --- a/src/actions/userActions.js +++ b/src/actions/userActions.js @@ -6,8 +6,8 @@ export function updateFontSize(fontSize){ return{ type: types.UPDATE_FONT_SIZE, fontSize }; } -export function updateThemeColor(themeColor) { - return { type: types.UPDATE_THEME_COLOR, themeColor }; +export function updateTheme(theme) { + return { type: types.UPDATE_THEME, theme }; } export function updateUserSettings(id,settings){ @@ -48,5 +48,5 @@ export default { asyncUserSettings, syncUserSettings, updateUserSettings, - updateThemeColor + updateTheme }; \ No newline at end of file diff --git a/src/components/editor/Editor.js b/src/components/editor/Editor.js index 66c790bb..627bb1dd 100644 --- a/src/components/editor/Editor.js +++ b/src/components/editor/Editor.js @@ -2,6 +2,12 @@ import React, { Component } from "react"; import AceEditor from "react-ace"; import "brace/mode/javascript"; import "brace/theme/github"; +import "brace/theme/monokai"; +import "brace/theme/eclipse"; +import "brace/theme/xcode"; +import "brace/theme/dracula"; +import "brace/theme/gruvbox"; + import "brace/ext/searchbox"; import "brace/ext/language_tools"; @@ -10,7 +16,7 @@ import KeyboardShortcut from "./KeyboardShortcut.js"; import { browserType } from "../../utils/browserType"; import FontSize from "./FontSize.js"; import copy from "copy-to-clipboard"; -import DarkModeSelector from "./Darkmode.js"; +import ThemeSelector from "./Theme.js"; /** * Editor is a React Component that create the Ace Editor in the DOM. @@ -102,7 +108,8 @@ class Editor extends Component { name="ace-editor" // eslint-disable-next-line ref="aceEditor" - theme="github" + theme={this.props.settings.theme} + background="black" commands={[{ name: "copyLine", bindKey: {win: "Ctrl-L", mac: "Command-L"}, @@ -125,7 +132,7 @@ class Editor extends Component { { browserType() === "desktop" ?
- +
: null } diff --git a/src/components/editor/Darkmode.js b/src/components/editor/Theme.js similarity index 65% rename from src/components/editor/Darkmode.js rename to src/components/editor/Theme.js index 83d965d7..f517c867 100644 --- a/src/components/editor/Darkmode.js +++ b/src/components/editor/Theme.js @@ -1,26 +1,20 @@ import React from "react"; import { Button, + Icon, Select, Tooltip, } from "@material-ui/core"; import "../../css/KeyboardShortcut.css"; -export default function DarkModeSelector(userActions, settings) { - - // handleFontSizeUpdate = (e) => { - // this.props.userActions.updateFontSize(e.target.value); - // this.props.refreshText(); - // } +export default function ThemeSelector(props) { + const handleThemeEditorUpdate = (e) => { + props.userActions.updateTheme(e.target.value); + }; - // const [currentTheme, setCurrentTheme] = useState(); const themes = [ "github", "eclipse", "xcode", "dracula", "gruvbox", "monokai" ]; - function handleChange(e) { - userActions.updateFontSize(e.target.value); - } - return (
@@ -30,12 +24,13 @@ export default function DarkModeSelector(userActions, settings) { size="small" color="white" > + format_color_fill diff --git a/src/constants/ActionTypes.js b/src/constants/ActionTypes.js index 435e99ab..5392cbee 100644 --- a/src/constants/ActionTypes.js +++ b/src/constants/ActionTypes.js @@ -50,6 +50,6 @@ export const DELETE_COLLECTION = "DELETE_COLLECTION"; export const SYNC_USER_SETTINGS = "SYNC_USER_SETTINGS"; export const UPDATE_FONT_SIZE = "UPDATE_FONT_SIZE"; -export const UPDATE_THEME_COLOR = "UPDATE_THEME_COLOR"; +export const UPDATE_THEME= "UPDATE_THEME"; export const LOAD_REF_EX = "LOAD_REF_EX"; diff --git a/src/css/KeyboardShortcut.css b/src/css/KeyboardShortcut.css index 3505f98d..61b344f5 100644 --- a/src/css/KeyboardShortcut.css +++ b/src/css/KeyboardShortcut.css @@ -46,7 +46,7 @@ } .theme-div > button { - width: 120px; + width: 140px; } .whole-keyboard { diff --git a/src/reducers/user.js b/src/reducers/user.js index 7c8c954b..0580e70e 100644 --- a/src/reducers/user.js +++ b/src/reducers/user.js @@ -3,7 +3,8 @@ import * as types from "../constants/ActionTypes"; const initial_state = { user: null, settings: { - fontSize: 12 + fontSize: 12, + theme: "github", } }; @@ -43,6 +44,14 @@ export default function user(state = initial_state, action) { fontSize: action.fontSize } }; + case types.UPDATE_THEME: + return{ + ...state, + settings: { + ...state.settings, + theme: action.theme + } + }; default: return state; } diff --git a/src/tests/App.test.js b/src/tests/App.test.js index d55bd5c6..a1c26ee4 100644 --- a/src/tests/App.test.js +++ b/src/tests/App.test.js @@ -56,7 +56,8 @@ const generateMockProps = () => { }, user: null, settings: { - fontSize: 12 + fontSize: 12, + theme: "github", }, scene: { name: "", @@ -281,7 +282,8 @@ describe("User Reducer", () => { { user: null, settings : { - fontSize: 12 + fontSize: 12, + theme: "github" } } ); @@ -298,7 +300,8 @@ describe("User Reducer", () => { { user: testUser, settings:{ - fontSize: 12 + fontSize: 12, + theme: "github" } } ); @@ -312,7 +315,8 @@ describe("User Reducer", () => { ).toEqual({ user: null, settings:{ - fontSize: 12 + fontSize: 12, + theme: "github" } } );