From fdd35492a045cfd9d505b6e672737ac35d034f71 Mon Sep 17 00:00:00 2001 From: Amruth Pillai Date: Sun, 3 Jan 2021 11:44:14 +0530 Subject: [PATCH] [2.5] Implement Font Size Adjustments --- gatsby-config.js | 2 +- src/components/builder/right/RightSidebar.js | 6 ++-- .../sections/{FontSizes.js => FontSize.js} | 35 +++++++++++++------ src/data/demoState.json | 1 + ...tSizeVarsDefault.js => fontSizeOptions.js} | 4 +-- src/data/initialState.json | 1 + src/data/rightSections.js | 2 +- src/i18n/locales/en.json | 2 +- 8 files changed, 35 insertions(+), 18 deletions(-) rename src/components/builder/right/sections/{FontSizes.js => FontSize.js} (62%) rename src/data/{fontSizeVarsDefault.js => fontSizeOptions.js} (86%) diff --git a/gatsby-config.js b/gatsby-config.js index 5e353e6a..08c59866 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -6,7 +6,7 @@ module.exports = { title: 'Reactive Resume', siteUrl: 'https://rxresu.me', description: 'A free and open source resume builder.', - version: '2.4.3', + version: '2.5', }, plugins: [ 'gatsby-plugin-react-helmet', diff --git a/src/components/builder/right/RightSidebar.js b/src/components/builder/right/RightSidebar.js index f702b6fe..76005b06 100644 --- a/src/components/builder/right/RightSidebar.js +++ b/src/components/builder/right/RightSidebar.js @@ -10,7 +10,7 @@ import Fonts from './sections/Fonts'; import Layout from './sections/Layout'; import Settings from './sections/Settings'; import Templates from './sections/Templates'; -import FontSizes from './sections/FontSizes'; +import FontSize from './sections/FontSize'; const getComponent = (id) => { switch (id) { @@ -28,8 +28,8 @@ const getComponent = (id) => { return Settings; case 'about': return About; - case 'font-sizes': - return FontSizes; + case 'font-size': + return FontSize; default: throw new Error(); } diff --git a/src/components/builder/right/sections/FontSizes.js b/src/components/builder/right/sections/FontSize.js similarity index 62% rename from src/components/builder/right/sections/FontSizes.js rename to src/components/builder/right/sections/FontSize.js index 03d4b738..1145dc08 100644 --- a/src/components/builder/right/sections/FontSizes.js +++ b/src/components/builder/right/sections/FontSize.js @@ -1,9 +1,9 @@ /* eslint-disable jsx-a11y/control-has-associated-label */ -import React, { memo, useState, useEffect } from 'react'; -import fontSizeVarsDefault from '../../../../data/fontSizeVarsDefault'; +import React, { memo, useEffect, useState } from 'react'; +import { useDispatch, useSelector } from '../../../../contexts/ResumeContext'; +import fontSizeOptions from '../../../../data/fontSizeOptions'; import Heading from '../../../shared/Heading'; -/* font size control */ const FontSizes = ({ id }) => { // precompute some stuff for the logarithmic slider const logMax = 2.5; @@ -15,7 +15,10 @@ const FontSizes = ({ id }) => { const min = 0; const max = min + steps - 1; const scaleDefault = Math.log(logDefault / logMin) / Math.log(logStepSize); - const [fontScale, setFontScale] = useState(scaleDefault); + + const dispatch = useDispatch(); + const fontSize = useSelector('metadata.fontSize'); + const [fontScale, setFontScale] = useState(fontSize || scaleDefault); // translate a linearly scaled value from the slider into a scale factor const scale = (value) => logStepSize ** (value - min) * logMin; @@ -23,7 +26,7 @@ const FontSizes = ({ id }) => { useEffect(() => { /* loop through the css variables we need to set and set them to the default for that variable multiplied by the scale factor */ - for (const [key, sizeDefault] of Object.entries(fontSizeVarsDefault)) { + for (const [key, sizeDefault] of Object.entries(fontSizeOptions)) { document.documentElement.style.setProperty( key, `${scale(fontScale) * sizeDefault}rem`, @@ -31,19 +34,31 @@ const FontSizes = ({ id }) => { } }, [fontScale]); - const onChange = (event) => setFontScale(event.target.value); + const onChange = (event) => { + const { value } = event.target; + + setFontScale(value); + + dispatch({ + type: 'on_input', + payload: { + path: 'metadata.fontSize', + value, + }, + }); + }; return (
); diff --git a/src/data/demoState.json b/src/data/demoState.json index 0e5088fd..7d6ae2d3 100644 --- a/src/data/demoState.json +++ b/src/data/demoState.json @@ -138,6 +138,7 @@ "text": "#212121" }, "font": "Open Sans", + "fontSize": 12, "language": "en", "layout": { "castform": [ diff --git a/src/data/fontSizeVarsDefault.js b/src/data/fontSizeOptions.js similarity index 86% rename from src/data/fontSizeVarsDefault.js rename to src/data/fontSizeOptions.js index 7a89848c..8bb211a4 100644 --- a/src/data/fontSizeVarsDefault.js +++ b/src/data/fontSizeOptions.js @@ -1,4 +1,4 @@ -const fontSizeVarsDefault = { +const fontSizeOptions = { '--text-xs-size': 0.75, '--text-sm-size': 0.875, '--text-lg-size': 1.125, @@ -15,4 +15,4 @@ const fontSizeVarsDefault = { '--text-4xl-line-height': 2.5, }; -export default fontSizeVarsDefault; +export default fontSizeOptions; diff --git a/src/data/initialState.json b/src/data/initialState.json index 172df956..12428721 100644 --- a/src/data/initialState.json +++ b/src/data/initialState.json @@ -74,6 +74,7 @@ "language": "en", "template": "onyx", "font": "Montserrat", + "fontSize": 12, "layout": { "onyx": [ ["objective", "work", "education", "projects"], diff --git a/src/data/rightSections.js b/src/data/rightSections.js index 5d0f0153..ab14c858 100644 --- a/src/data/rightSections.js +++ b/src/data/rightSections.js @@ -27,7 +27,7 @@ export default [ icon: MdFontDownload, }, { - id: 'font-sizes', + id: 'font-size', icon: MdFormatSize, }, { diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json index 757f409e..d4dc7d58 100644 --- a/src/i18n/locales/en.json +++ b/src/i18n/locales/en.json @@ -87,7 +87,7 @@ "templates": "Templates", "layout": "Layout", "colors": "Colors", - "font-sizes": "Font Sizes", + "font-size": "Font Size", "fonts": "Fonts", "actions": "Actions", "settings": "Settings",