From 8f74095a85995e25d18bd8c3b039c6c13b65c319 Mon Sep 17 00:00:00 2001 From: David Ralph Date: Fri, 19 Mar 2021 17:44:27 +0000 Subject: [PATCH] feat: new font settings and week number on date widget --- .../modals/settings/sections/Advanced.jsx | 12 +++++------ .../modals/settings/sections/Appearance.jsx | 20 +++++++++++++++++++ .../modals/settings/sections/Background.jsx | 9 +++++++-- .../modals/settings/sections/Time.jsx | 1 + .../widgets/background/scss/index.scss | 1 - src/components/widgets/search/search.scss | 5 +++++ src/components/widgets/time/Date.jsx | 19 +++++++++++++++++- src/modules/helpers/settings.js | 14 ++++++++++++- src/translations/en-GB.json | 1 + 9 files changed, 71 insertions(+), 11 deletions(-) diff --git a/src/components/modals/settings/sections/Advanced.jsx b/src/components/modals/settings/sections/Advanced.jsx index 5fb3d55f..e924f5e9 100644 --- a/src/components/modals/settings/sections/Advanced.jsx +++ b/src/components/modals/settings/sections/Advanced.jsx @@ -13,11 +13,6 @@ export default class AdvancedSettings extends React.PureComponent { toast(this.props.language.toasts.reset); } - componentDidMount() { - document.getElementById('customcss').value = localStorage.getItem('customcss'); - document.getElementById('customjs').value = localStorage.getItem('customjs'); - } - settingsImport(e) { const content = JSON.parse(e.target.result); @@ -28,7 +23,12 @@ export default class AdvancedSettings extends React.PureComponent { toast(this.props.language.toasts.imported); } - componentWillUnmount() { + componentDidMount() { + document.getElementById('customcss').value = localStorage.getItem('customcss'); + document.getElementById('customjs').value = localStorage.getItem('customjs'); + } + + componentDidUpdate() { localStorage.setItem('customcss', document.getElementById('customcss').value); localStorage.setItem('customjs', document.getElementById('customjs').value); } diff --git a/src/components/modals/settings/sections/Appearance.jsx b/src/components/modals/settings/sections/Appearance.jsx index 22010f21..ba0354ad 100644 --- a/src/components/modals/settings/sections/Appearance.jsx +++ b/src/components/modals/settings/sections/Appearance.jsx @@ -1,6 +1,7 @@ import React from 'react'; import Checkbox from '../Checkbox'; +import Dropdown from '../Dropdown'; import { toast } from 'react-toastify'; @@ -50,6 +51,10 @@ export default class AppearanceSettings extends React.PureComponent { localStorage.setItem('font', this.state.font.charAt(0).toUpperCase() + this.state.font.slice(1)); } + componentDidMount() { + document.getElementById('fontWeight').value = localStorage.getItem('fontWeight') || 400; + } + render() { const { appearance } = this.props.language.sections; @@ -68,6 +73,21 @@ export default class AppearanceSettings extends React.PureComponent {

{appearance.font.custom} this.resetItem('font')}>{this.props.language.buttons.reset}

this.setState({ font: e.target.value })}> + localStorage.setItem('fontWeight', document.getElementById('fontWeight').value)}> + {/* names are taken from https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight */} + + + + + + + + +

{appearance.accessibility.title}

diff --git a/src/components/modals/settings/sections/Background.jsx b/src/components/modals/settings/sections/Background.jsx index 878a9518..b23f1223 100644 --- a/src/components/modals/settings/sections/Background.jsx +++ b/src/components/modals/settings/sections/Background.jsx @@ -37,7 +37,10 @@ export default class BackgroundSettings extends React.PureComponent { break; case 'customBackground': - document.getElementById('customBackground').value = ''; + localStorage.setItem('customBackground', ''); + this.setState({ + customBackground: '' + }); break; case 'blur': @@ -225,6 +228,7 @@ export default class BackgroundSettings extends React.PureComponent { +

{background.effects.title}

    {background.effects.blur} ({this.state.blur}%) this.resetItem('blur')}>{this.props.language.buttons.reset}

    @@ -234,13 +238,14 @@ export default class BackgroundSettings extends React.PureComponent {

    {background.effects.brightness} ({this.state.brightness}%) this.resetItem('brightness')}>{this.props.language.buttons.reset}

    this.setState({ brightness: event.target.value })} />
+

{background.source.title}

    localStorage.setItem('backgroundAPI', document.getElementById('backgroundAPI').value)} > + onChange={() => localStorage.setItem('backgroundAPI', document.getElementById('backgroundAPI').value)}> diff --git a/src/components/modals/settings/sections/Time.jsx b/src/components/modals/settings/sections/Time.jsx index 1005a7ea..78444b7a 100644 --- a/src/components/modals/settings/sections/Time.jsx +++ b/src/components/modals/settings/sections/Time.jsx @@ -72,6 +72,7 @@ export default class TimeSettings extends React.PureComponent {

    {time.date.title}

    + localStorage.setItem('dateFormat', document.getElementById('dateformat').value)}> diff --git a/src/components/widgets/background/scss/index.scss b/src/components/widgets/background/scss/index.scss index f8007012..5f210441 100644 --- a/src/components/widgets/background/scss/index.scss +++ b/src/components/widgets/background/scss/index.scss @@ -62,4 +62,3 @@ transform: scale(1.1); } } - diff --git a/src/components/widgets/search/search.scss b/src/components/widgets/search/search.scss index 36c3feaf..0d8d0be5 100644 --- a/src/components/widgets/search/search.scss +++ b/src/components/widgets/search/search.scss @@ -29,6 +29,11 @@ font-size: 30px; filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.3)); cursor: pointer; + transition: all 0.5s ease 0s; + + &:hover { + transform: scale(1.1); + } } } diff --git a/src/components/widgets/time/Date.jsx b/src/components/widgets/time/Date.jsx index ce63856e..13a63057 100644 --- a/src/components/widgets/time/Date.jsx +++ b/src/components/widgets/time/Date.jsx @@ -71,11 +71,28 @@ export default class DateWidget extends React.PureComponent { } } + // based on https://gist.github.com/IamSilviu/5899269#gistcomment-2773524 + getWeekNumber() { + const today = new Date(); + const firstDayOfYear = new Date(today.getFullYear(), 0, 1); + const pastDaysOfYear = (today - firstDayOfYear) / 86400000; + return Math.ceil((pastDaysOfYear + firstDayOfYear.getDay() + 1) / 7); + } + componentDidMount() { this.getDate(); } render() { - return {this.state.date} + return ( +
    + {this.state.date} + {(localStorage.getItem('weeknumber') === 'true') ? +
    + {'Week ' + this.getWeekNumber()} +     + :null} +
    + ) } } diff --git a/src/modules/helpers/settings.js b/src/modules/helpers/settings.js index b1b8357b..2f2ec0fd 100644 --- a/src/modules/helpers/settings.js +++ b/src/modules/helpers/settings.js @@ -91,16 +91,28 @@ export default class SettingsFunctions { if (font) { const google = localStorage.getItem('fontGoogle'); - let url = ''; + let url, fontweight, fontstyle = ''; if (google === 'true') { url = `@import url('https://fonts.googleapis.com/css2?family=${font}&display=swap');`; } + const fontWeight = localStorage.getItem('fontWeight'); + if (fontWeight) { + fontweight = `font-weight: ${fontWeight};`; + } + + const fontStyle = localStorage.getItem('fontStyle'); + if (fontStyle) { + fontstyle = `font-style: ${fontStyle};`; + } + document.head.insertAdjacentHTML('beforeend', ` `); } diff --git a/src/translations/en-GB.json b/src/translations/en-GB.json index 44cee06f..01678b58 100644 --- a/src/translations/en-GB.json +++ b/src/translations/en-GB.json @@ -58,6 +58,7 @@ "date": { "title": "Date", "day_of_week": "Day of week", + "week_number": "Week Number", "datenth": "Date nth", "short_date": "Short Date", "short_format": "Short Format",