Merge branch 'rpolley-add-font-size-setting' into develop
This commit is contained in:
commit
eb4023e3b2
|
@ -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',
|
||||
|
|
|
@ -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();
|
||||
}
|
||||
|
|
|
@ -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 (
|
||||
<section>
|
||||
<Heading id={id} />
|
||||
|
||||
<input
|
||||
type="range"
|
||||
onChange={onChange}
|
||||
step={1}
|
||||
min={min}
|
||||
max={max}
|
||||
step={1}
|
||||
defaultValue={scaleDefault}
|
||||
type="range"
|
||||
onChange={onChange}
|
||||
defaultValue={fontScale}
|
||||
/>
|
||||
</section>
|
||||
);
|
|
@ -138,6 +138,7 @@
|
|||
"text": "#212121"
|
||||
},
|
||||
"font": "Open Sans",
|
||||
"fontSize": 12,
|
||||
"language": "en",
|
||||
"layout": {
|
||||
"castform": [
|
||||
|
|
|
@ -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;
|
|
@ -74,6 +74,7 @@
|
|||
"language": "en",
|
||||
"template": "onyx",
|
||||
"font": "Montserrat",
|
||||
"fontSize": 12,
|
||||
"layout": {
|
||||
"onyx": [
|
||||
["objective", "work", "education", "projects"],
|
||||
|
|
|
@ -27,7 +27,7 @@ export default [
|
|||
icon: MdFontDownload,
|
||||
},
|
||||
{
|
||||
id: 'font-sizes',
|
||||
id: 'font-size',
|
||||
icon: MdFormatSize,
|
||||
},
|
||||
{
|
||||
|
|
|
@ -87,7 +87,7 @@
|
|||
"templates": "Templates",
|
||||
"layout": "Layout",
|
||||
"colors": "Colors",
|
||||
"font-sizes": "Font Sizes",
|
||||
"font-size": "Font Size",
|
||||
"fonts": "Fonts",
|
||||
"actions": "Actions",
|
||||
"settings": "Settings",
|
||||
|
|
Loading…
Reference in New Issue