From 289625c851fb3002351e50050687c0904ad1d8ba Mon Sep 17 00:00:00 2001 From: Qweme Dev <99718350+qweme32@users.noreply.github.com> Date: Fri, 6 Oct 2023 17:53:05 +0300 Subject: [PATCH 1/2] Added a setting that allows you to change the font of the code --- .../components/CodeEditor/StyledWrapper.js | 1 + .../src/components/CodeEditor/index.js | 1 + .../Preferences/Font/StyledWrapper.js | 7 ++++ .../src/components/Preferences/Font/index.js | 33 +++++++++++++++++++ .../src/components/Preferences/index.js | 8 +++++ .../RequestPane/GraphQLVariables/index.js | 3 ++ .../RequestPane/RequestBody/index.js | 3 ++ .../components/RequestPane/Script/index.js | 4 +++ .../src/components/RequestPane/Tests/index.js | 3 ++ .../ResponsePane/QueryResult/index.js | 4 ++- .../GenerateCodeItem/CodeView/index.js | 4 ++- 11 files changed, 69 insertions(+), 2 deletions(-) create mode 100644 packages/bruno-app/src/components/Preferences/Font/StyledWrapper.js create mode 100644 packages/bruno-app/src/components/Preferences/Font/index.js diff --git a/packages/bruno-app/src/components/CodeEditor/StyledWrapper.js b/packages/bruno-app/src/components/CodeEditor/StyledWrapper.js index 09de00ddc..9853280a1 100644 --- a/packages/bruno-app/src/components/CodeEditor/StyledWrapper.js +++ b/packages/bruno-app/src/components/CodeEditor/StyledWrapper.js @@ -4,6 +4,7 @@ const StyledWrapper = styled.div` div.CodeMirror { background: ${(props) => props.theme.codemirror.bg}; border: solid 1px ${(props) => props.theme.codemirror.border}; + font-family: ${(props) => props.font ? props.font : "default"}; } .CodeMirror-overlayscroll-horizontal div, diff --git a/packages/bruno-app/src/components/CodeEditor/index.js b/packages/bruno-app/src/components/CodeEditor/index.js index 96d5bb48a..6ad999e6b 100644 --- a/packages/bruno-app/src/components/CodeEditor/index.js +++ b/packages/bruno-app/src/components/CodeEditor/index.js @@ -121,6 +121,7 @@ export default class CodeEditor extends React.Component { { this._node = node; }} diff --git a/packages/bruno-app/src/components/Preferences/Font/StyledWrapper.js b/packages/bruno-app/src/components/Preferences/Font/StyledWrapper.js new file mode 100644 index 000000000..d45eda5b6 --- /dev/null +++ b/packages/bruno-app/src/components/Preferences/Font/StyledWrapper.js @@ -0,0 +1,7 @@ +import styled from 'styled-components'; + +const StyledWrapper = styled.div` + color: ${(props) => props.theme.text}; +`; + +export default StyledWrapper; diff --git a/packages/bruno-app/src/components/Preferences/Font/index.js b/packages/bruno-app/src/components/Preferences/Font/index.js new file mode 100644 index 000000000..4694aaf69 --- /dev/null +++ b/packages/bruno-app/src/components/Preferences/Font/index.js @@ -0,0 +1,33 @@ +import React, { useState } from 'react'; +import { usePreferences } from 'providers/Preferences'; +import StyledWrapper from './StyledWrapper'; + +const Font = () => { + const { preferences, setPreferences } = usePreferences(); + + const [codeFont, setCodeFont] = useState(preferences.codeFont); + + const handleInputChange = (event) => { + const updatedPreferences = { + ...preferences, + codeFont: event.target.value + }; + + setPreferences(updatedPreferences) + .then(() => { + setCodeFont(event.target.value); + }) + .catch((err) => { + console.error(err); + }); + }; + + return ( + +

Font in code area

+ + + ); +}; + +export default Font; diff --git a/packages/bruno-app/src/components/Preferences/index.js b/packages/bruno-app/src/components/Preferences/index.js index 455a6748f..a48f5e66e 100644 --- a/packages/bruno-app/src/components/Preferences/index.js +++ b/packages/bruno-app/src/components/Preferences/index.js @@ -3,6 +3,7 @@ import classnames from 'classnames'; import React, { useState } from 'react'; import Support from './Support'; import General from './General'; +import Font from './Font'; import Theme from './Theme'; import StyledWrapper from './StyledWrapper'; @@ -28,6 +29,10 @@ const Preferences = ({ onClose }) => { case 'support': { return ; } + + case 'font': { + return ; + } } }; @@ -41,6 +46,9 @@ const Preferences = ({ onClose }) => {
setTab('theme')}> Theme
+
setTab('font')}> + Font +
setTab('support')}> Support
diff --git a/packages/bruno-app/src/components/RequestPane/GraphQLVariables/index.js b/packages/bruno-app/src/components/RequestPane/GraphQLVariables/index.js index 59b132044..0e213442b 100644 --- a/packages/bruno-app/src/components/RequestPane/GraphQLVariables/index.js +++ b/packages/bruno-app/src/components/RequestPane/GraphQLVariables/index.js @@ -4,12 +4,14 @@ import CodeEditor from 'components/CodeEditor'; import { updateRequestGraphqlVariables } from 'providers/ReduxStore/slices/collections'; import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions'; import { useTheme } from 'providers/Theme'; +import { usePreferences } from 'providers/Preferences'; import StyledWrapper from './StyledWrapper'; const GraphQLVariables = ({ variables, item, collection }) => { const dispatch = useDispatch(); const { storedTheme } = useTheme(); + const { preferences } = usePreferences(); const onEdit = (value) => { dispatch( @@ -30,6 +32,7 @@ const GraphQLVariables = ({ variables, item, collection }) => { collection={collection} value={variables || ''} theme={storedTheme} + font={preferences.codeFont} onEdit={onEdit} mode="javascript" onRun={onRun} diff --git a/packages/bruno-app/src/components/RequestPane/RequestBody/index.js b/packages/bruno-app/src/components/RequestPane/RequestBody/index.js index 7ac178f79..fa004d1dc 100644 --- a/packages/bruno-app/src/components/RequestPane/RequestBody/index.js +++ b/packages/bruno-app/src/components/RequestPane/RequestBody/index.js @@ -5,6 +5,7 @@ import FormUrlEncodedParams from 'components/RequestPane/FormUrlEncodedParams'; import MultipartFormParams from 'components/RequestPane/MultipartFormParams'; import { useDispatch } from 'react-redux'; import { useTheme } from 'providers/Theme'; +import { usePreferences } from 'providers/Preferences'; import { updateRequestBody } from 'providers/ReduxStore/slices/collections'; import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions'; import StyledWrapper from './StyledWrapper'; @@ -14,6 +15,7 @@ const RequestBody = ({ item, collection }) => { const body = item.draft ? get(item, 'draft.request.body') : get(item, 'request.body'); const bodyMode = item.draft ? get(item, 'draft.request.body.mode') : get(item, 'request.body.mode'); const { storedTheme } = useTheme(); + const { preferences } = usePreferences(); const onEdit = (value) => { dispatch( @@ -46,6 +48,7 @@ const RequestBody = ({ item, collection }) => { { @@ -13,6 +14,7 @@ const Script = ({ item, collection }) => { const responseScript = item.draft ? get(item, 'draft.request.script.res') : get(item, 'request.script.res'); const { storedTheme } = useTheme(); + const { preferences } = usePreferences(); const onRequestScriptEdit = (value) => { dispatch( @@ -45,6 +47,7 @@ const Script = ({ item, collection }) => { collection={collection} value={requestScript || ''} theme={storedTheme} + font={preferences.codeFont} onEdit={onRequestScriptEdit} mode="javascript" onRun={onRun} @@ -57,6 +60,7 @@ const Script = ({ item, collection }) => { collection={collection} value={responseScript || ''} theme={storedTheme} + font={preferences.codeFont} onEdit={onResponseScriptEdit} mode="javascript" onRun={onRun} diff --git a/packages/bruno-app/src/components/RequestPane/Tests/index.js b/packages/bruno-app/src/components/RequestPane/Tests/index.js index 351afd3d3..dce6547f6 100644 --- a/packages/bruno-app/src/components/RequestPane/Tests/index.js +++ b/packages/bruno-app/src/components/RequestPane/Tests/index.js @@ -5,6 +5,7 @@ import CodeEditor from 'components/CodeEditor'; import { updateRequestTests } from 'providers/ReduxStore/slices/collections'; import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions'; import { useTheme } from 'providers/Theme'; +import { usePreferences } from 'providers/Preferences'; import StyledWrapper from './StyledWrapper'; const Tests = ({ item, collection }) => { @@ -12,6 +13,7 @@ const Tests = ({ item, collection }) => { const tests = item.draft ? get(item, 'draft.request.tests') : get(item, 'request.tests'); const { storedTheme } = useTheme(); + const { preferences } = usePreferences(); const onEdit = (value) => { dispatch( @@ -32,6 +34,7 @@ const Tests = ({ item, collection }) => { collection={collection} value={tests || ''} theme={storedTheme} + font={preferences.codeFont} onEdit={onEdit} mode="javascript" onRun={onRun} diff --git a/packages/bruno-app/src/components/ResponsePane/QueryResult/index.js b/packages/bruno-app/src/components/ResponsePane/QueryResult/index.js index 5729e0b2d..28a1a0af5 100644 --- a/packages/bruno-app/src/components/ResponsePane/QueryResult/index.js +++ b/packages/bruno-app/src/components/ResponsePane/QueryResult/index.js @@ -1,6 +1,7 @@ import React from 'react'; import CodeEditor from 'components/CodeEditor'; import { useTheme } from 'providers/Theme'; +import { usePreferences } from 'providers/Preferences'; import { useDispatch } from 'react-redux'; import { sendRequest } from 'providers/ReduxStore/slices/collections/actions'; import classnames from 'classnames'; @@ -13,6 +14,7 @@ import { useMemo } from 'react'; const QueryResult = ({ item, collection, data, width, disableRunEventListener, headers }) => { const { storedTheme } = useTheme(); + const { preferences } = usePreferences(); const [tab, setTab] = useState('preview'); const dispatch = useDispatch(); const contentType = getContentType(headers); @@ -99,7 +101,7 @@ const QueryResult = ({ item, collection, data, width, disableRunEventListener, h ); } - return ; + return ; }, [tab, collection, storedTheme, onRun, value, mode]); return ( diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/CodeView/index.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/CodeView/index.js index 79d636daf..f3223bab4 100644 --- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/CodeView/index.js +++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/CodeView/index.js @@ -1,10 +1,12 @@ import CodeEditor from 'components/CodeEditor/index'; import { HTTPSnippet } from 'httpsnippet'; import { useTheme } from 'providers/Theme/index'; +import { usePreferences } from 'providers/Preferences/index'; import { buildHarRequest } from 'utils/codegenerator/har'; const CodeView = ({ language, item }) => { const { storedTheme } = useTheme(); + const { preferences } = usePreferences(); const { target, client, language: lang } = language; let snippet = ''; @@ -15,7 +17,7 @@ const CodeView = ({ language, item }) => { snippet = 'Error generating code snippet'; } - return ; + return ; }; export default CodeView; From 1a366893ec6cee0f0cecba0eaf67294a5e6191e1 Mon Sep 17 00:00:00 2001 From: Qweme Dev <99718350+qweme32@users.noreply.github.com> Date: Sun, 8 Oct 2023 21:53:29 +0300 Subject: [PATCH 2/2] Fix styles for theme --- .../Preferences/Font/StyledWrapper.js | 20 +++++++++++++++++++ .../src/components/Preferences/Font/index.js | 4 +++- 2 files changed, 23 insertions(+), 1 deletion(-) diff --git a/packages/bruno-app/src/components/Preferences/Font/StyledWrapper.js b/packages/bruno-app/src/components/Preferences/Font/StyledWrapper.js index d45eda5b6..5bd4e4693 100644 --- a/packages/bruno-app/src/components/Preferences/Font/StyledWrapper.js +++ b/packages/bruno-app/src/components/Preferences/Font/StyledWrapper.js @@ -2,6 +2,26 @@ import styled from 'styled-components'; const StyledWrapper = styled.div` color: ${(props) => props.theme.text}; + div.input-container { + background-color: ${(props) => props.theme.modal.input.bg}; + height: 2.3rem; + } + div.input-container { + border: solid 1px ${(props) => props.theme.modal.input.border}; + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + + input { + background-color: ${(props) => props.theme.modal.input.bg}; + outline: none; + box-shadow: none; + + &:focus { + outline: none !important; + box-shadow: none !important; + } + } + } `; export default StyledWrapper; diff --git a/packages/bruno-app/src/components/Preferences/Font/index.js b/packages/bruno-app/src/components/Preferences/Font/index.js index 4694aaf69..4505b5958 100644 --- a/packages/bruno-app/src/components/Preferences/Font/index.js +++ b/packages/bruno-app/src/components/Preferences/Font/index.js @@ -25,7 +25,9 @@ const Font = () => { return (

Font in code area

- +
+ +
); };