feat: adjust code editor font size (#2204)

* add font-size setting for code editor * add code font size to remaining editors * align font-size after font-family * changed default font size to 14 * fixed className typo * set inherit mode if unset * add code font size schema validation * add font size to folder settings --------- Co-authored-by: Anoop M D <anoop.md1421@gmail.com>
2024-11-21 15:33:11 +01:00 · 2024-08-27 14:56:58 +02:00 · 2024-08-27 14:56:58 +02:00 · ee7f886c03
commit ee7f886c03
parent 682c7bd1b1
19 changed files with 65 additions and 15 deletions
--- a/packages/bruno-app/src/components/CodeEditor/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CodeEditor/StyledWrapper.js
@ -5,6 +5,7 @@ const StyledWrapper = styled.div`
    background: ${(props) => props.theme.codemirror.bg};
    border: solid 1px ${(props) => props.theme.codemirror.border};
    font-family: ${(props) => (props.font ? props.font : 'default')};
+    font-size: ${(props) => (props.fontSize ? `${props.fontSize}px` : 'inherit')};
    line-break: anywhere;
    flex: 1 1 0;
  }
--- a/packages/bruno-app/src/components/CodeEditor/index.js
+++ b/packages/bruno-app/src/components/CodeEditor/index.js
@ -333,6 +333,7 @@ export default class CodeEditor extends React.Component {
        className="h-full w-full flex flex-col relative"
        aria-label="Code Editor"
        font={this.props.font}
+        fontSize={this.props.fontSize}
        ref={(node) => {
          this._node = node;
        }}
--- a/packages/bruno-app/src/components/CollectionSettings/Docs/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Docs/index.js
@ -46,6 +46,7 @@ const Docs = ({ collection }) => {
          onSave={onSave}
          mode="application/text"
          font={get(preferences, 'font.codeFont', 'default')}
+          fontSize={get(preferences, 'font.codeFontSize')}
        />
      ) : (
        <Markdown collectionPath={collection.pathname} onDoubleClick={toggleViewMode} content={docs} />
--- a/packages/bruno-app/src/components/CollectionSettings/Script/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Script/index.js
@ -52,6 +52,7 @@ const Script = ({ collection }) => {
          mode="javascript"
          onSave={handleSave}
          font={get(preferences, 'font.codeFont', 'default')}
+          fontSize={get(preferences, 'font.codeFontSize')}
        />
      </div>
      <div className="flex-1 mt-6">
@ -64,6 +65,7 @@ const Script = ({ collection }) => {
          mode="javascript"
          onSave={handleSave}
          font={get(preferences, 'font.codeFont', 'default')}
+          fontSize={get(preferences, 'font.codeFontSize')}
        />
      </div>

--- a/packages/bruno-app/src/components/CollectionSettings/Tests/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Tests/index.js
@ -36,6 +36,7 @@ const Tests = ({ collection }) => {
        mode="javascript"
        onSave={handleSave}
        font={get(preferences, 'font.codeFont', 'default')}
+        fontSize={get(preferences, 'font.codeFontSize')}
      />

      <div className="mt-6">
--- a/packages/bruno-app/src/components/Documentation/index.js
+++ b/packages/bruno-app/src/components/Documentation/index.js
@ -47,6 +47,7 @@ const Documentation = ({ item, collection }) => {
          collection={collection}
          theme={displayedTheme}
          font={get(preferences, 'font.codeFont', 'default')}
+          fontSize={get(preferences, 'font.codeFontSize')}
          value={docs || ''}
          onEdit={onEdit}
          onSave={onSave}
--- a/packages/bruno-app/src/components/FolderSettings/Script/index.js
+++ b/packages/bruno-app/src/components/FolderSettings/Script/index.js
@ -54,6 +54,7 @@ const Script = ({ collection, folder }) => {
          mode="javascript"
          onSave={handleSave}
          font={get(preferences, 'font.codeFont', 'default')}
+          fontSize={get(preferences, 'font.codeFontSize')}
        />
      </div>
      <div className="flex flex-col flex-1 mt-2 gap-y-2">
@ -66,6 +67,7 @@ const Script = ({ collection, folder }) => {
          mode="javascript"
          onSave={handleSave}
          font={get(preferences, 'font.codeFont', 'default')}
+          fontSize={get(preferences, 'font.codeFontSize')}
        />
      </div>

--- a/packages/bruno-app/src/components/FolderSettings/Tests/index.js
+++ b/packages/bruno-app/src/components/FolderSettings/Tests/index.js
@ -37,6 +37,7 @@ const Tests = ({ collection, folder }) => {
        mode="javascript"
        onSave={handleSave}
        font={get(preferences, 'font.codeFont', 'default')}
+        fontSize={get(preferences, 'font.codeFontSize')}
      />

      <div className="mt-6">
--- a/packages/bruno-app/src/components/Preferences/Font/index.js
+++ b/packages/bruno-app/src/components/Preferences/Font/index.js
@ -9,17 +9,25 @@ const Font = ({ close }) => {
  const preferences = useSelector((state) => state.app.preferences);

  const [codeFont, setCodeFont] = useState(get(preferences, 'font.codeFont', 'default'));
+  const [codeFontSize, setCodeFontSize] = useState(get(preferences, 'font.codeFontSize', '14'));

-  const handleInputChange = (event) => {
+  const handleCodeFontChange = (event) => {
    setCodeFont(event.target.value);
  };

+  const handleCodeFontSizeChange = (event) => {
+    // Restrict to min/max value
+    const clampedSize = Math.max(1, Math.min(event.target.value, 32));
+    setCodeFontSize(clampedSize);
+  };
+
  const handleSave = () => {
    dispatch(
      savePreferences({
        ...preferences,
        font: {
-          codeFont
+          codeFont,
+          codeFontSize
        }
      })
    ).then(() => {
@ -29,17 +37,33 @@ const Font = ({ close }) => {

  return (
    <StyledWrapper>
-      <label className="block font-medium">Code Editor Font</label>
-      <input
-        type="text"
-        className="block textbox mt-2 w-full"
-        autoComplete="off"
-        autoCorrect="off"
-        autoCapitalize="off"
-        spellCheck="false"
-        onChange={handleInputChange}
-        defaultValue={codeFont}
-      />
+      <div className="flex flex-row gap-2 w-full">
+        <div className="w-4/5">
+          <label className="block font-medium">Code Editor Font</label>
+          <input
+            type="text"
+            className="block textbox mt-2 w-full"
+            autoComplete="off"
+            autoCorrect="off"
+            autoCapitalize="off"
+            spellCheck="false"
+            onChange={handleCodeFontChange}
+            defaultValue={codeFont}
+          />
+        </div>
+        <div className="w-1/5">
+          <label className="block font-medium">Font Size</label>
+          <input
+            type="number"
+            className="block textbox mt-2 w-full"
+            autoComplete="off"
+            autoCorrect="off"
+            inputMode="numeric"
+            onChange={handleCodeFontSizeChange}
+            defaultValue={codeFontSize}
+          />
+        </div>
+      </div>

      <div className="mt-10">
        <button type="submit" className="submit btn btn-sm btn-secondary" onClick={handleSave}>
--- a/packages/bruno-app/src/components/RequestPane/GraphQLRequestPane/index.js
+++ b/packages/bruno-app/src/components/RequestPane/GraphQLRequestPane/index.js
@ -31,6 +31,7 @@ const GraphQLRequestPane = ({ item, collection, leftPaneWidth, onSchemaLoad, tog
    : get(item, 'request.body.graphql.variables');
  const { displayedTheme } = useTheme();
  const [schema, setSchema] = useState(null);
+  const preferences = useSelector((state) => state.app.preferences);

  useEffect(() => {
    onSchemaLoad(schema);
@ -71,6 +72,8 @@ const GraphQLRequestPane = ({ item, collection, leftPaneWidth, onSchemaLoad, tog
            onRun={onRun}
            onEdit={onQueryChange}
            onClickReference={handleGqlClickReference}
+            font={get(preferences, 'font.codeFont', 'default')}
+            fontSize={get(preferences, 'font.codeFontSize')}
          />
        );
      }
--- a/packages/bruno-app/src/components/RequestPane/GraphQLVariables/index.js
+++ b/packages/bruno-app/src/components/RequestPane/GraphQLVariables/index.js
@ -33,6 +33,7 @@ const GraphQLVariables = ({ variables, item, collection }) => {
        value={variables || ''}
        theme={displayedTheme}
        font={get(preferences, 'font.codeFont', 'default')}
+        fontSize={get(preferences, 'font.codeFontSize')}
        onEdit={onEdit}
        mode="javascript"
        onRun={onRun}
--- a/packages/bruno-app/src/components/RequestPane/QueryEditor/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/QueryEditor/StyledWrapper.js
@ -4,6 +4,8 @@ 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')};
+    font-size: ${(props) => (props.fontSize ? `${props.fontSize}px` : 'inherit')};
    flex: 1 1 0;
  }

--- a/packages/bruno-app/src/components/RequestPane/QueryEditor/index.js
+++ b/packages/bruno-app/src/components/RequestPane/QueryEditor/index.js
@ -211,6 +211,8 @@ export default class QueryEditor extends React.Component {
        <StyledWrapper
          className="h-full w-full  flex flex-col relative"
          aria-label="Query Editor"
+          font={this.props.font}
+          fontSize={this.props.fontSize}
          ref={(node) => {
            this._node = node;
          }}
--- a/packages/bruno-app/src/components/RequestPane/RequestBody/index.js
+++ b/packages/bruno-app/src/components/RequestPane/RequestBody/index.js
@ -50,6 +50,7 @@ const RequestBody = ({ item, collection }) => {
          collection={collection}
          theme={displayedTheme}
          font={get(preferences, 'font.codeFont', 'default')}
+          fontSize={get(preferences, 'font.codeFontSize')}
          value={bodyContent[bodyMode] || ''}
          onEdit={onEdit}
          onRun={onRun}
--- a/packages/bruno-app/src/components/RequestPane/Script/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Script/index.js
@ -47,6 +47,7 @@ const Script = ({ item, collection }) => {
          value={requestScript || ''}
          theme={displayedTheme}
          font={get(preferences, 'font.codeFont', 'default')}
+          fontSize={get(preferences, 'font.codeFontSize')}
          onEdit={onRequestScriptEdit}
          mode="javascript"
          onRun={onRun}
@ -60,6 +61,7 @@ const Script = ({ item, collection }) => {
          value={responseScript || ''}
          theme={displayedTheme}
          font={get(preferences, 'font.codeFont', 'default')}
+          fontSize={get(preferences, 'font.codeFontSize')}
          onEdit={onResponseScriptEdit}
          mode="javascript"
          onRun={onRun}
--- a/packages/bruno-app/src/components/RequestPane/Tests/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Tests/index.js
@ -34,6 +34,7 @@ const Tests = ({ item, collection }) => {
        value={tests || ''}
        theme={displayedTheme}
        font={get(preferences, 'font.codeFont', 'default')}
+        fontSize={get(preferences, 'font.codeFontSize')}
        onEdit={onEdit}
        mode="javascript"
        onRun={onRun}
--- a/packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultPreview/index.js
+++ b/packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultPreview/index.js
@ -81,6 +81,7 @@ const QueryResultPreview = ({
        <CodeEditor
          collection={collection}
          font={get(preferences, 'font.codeFont', 'default')}
+          fontSize={get(preferences, 'font.codeFontSize')}
          theme={displayedTheme}
          onRun={onRun}
          value={formattedData}
--- 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
@ -53,6 +53,7 @@ const CodeView = ({ language, item }) => {
          collection={collection}
          value={snippet}
          font={get(preferences, 'font.codeFont', 'default')}
+          fontSize={get(preferences, 'font.codeFontSize')}
          theme={displayedTheme}
          mode={lang}
        />
--- a/packages/bruno-electron/src/store/preferences.js
+++ b/packages/bruno-electron/src/store/preferences.js
@ -23,7 +23,8 @@ const defaultPreferences = {
    timeout: 0
  },
  font: {
-    codeFont: 'default'
+    codeFont: 'default',
+    codeFontSize: 14
  },
  proxy: {
    enabled: false,
@ -54,7 +55,8 @@ const preferencesSchema = Yup.object().shape({
    timeout: Yup.number()
  }),
  font: Yup.object().shape({
-    codeFont: Yup.string().nullable()
+    codeFont: Yup.string().nullable(),
+    codeFontSize: Yup.number().min(1).max(32).nullable()
  }),
  proxy: Yup.object({
    enabled: Yup.boolean(),