From 177e4fdcdc7f7c4195258af10d093a08a4e274d3 Mon Sep 17 00:00:00 2001 From: David Ralph Date: Sun, 21 Mar 2021 22:21:37 +0000 Subject: [PATCH] feat: better settings for time, implement auto theme feature, add dark theme css for date picker etc --- src/components/modals/main/scss/index.scss | 2 + .../modals/main/scss/settings/_main.scss | 14 +++- ...-picker-gradient-picker-custom-styles.scss | 13 ++++ .../main/settings/sections/Appearance.jsx | 2 +- .../main/settings/sections/Background.jsx | 2 - .../main/settings/sections/Greeting.jsx | 2 +- .../modals/main/settings/sections/Quote.jsx | 2 +- .../modals/main/settings/sections/Search.jsx | 3 +- .../modals/main/settings/sections/Time.jsx | 66 ++++++++++++------- src/components/widgets/time/Date.jsx | 6 +- src/modules/default_settings.json | 4 ++ src/modules/helpers/settings.js | 15 ++--- 12 files changed, 87 insertions(+), 44 deletions(-) rename src/{scss => components/modals/main/scss/settings}/react-color-picker-gradient-picker-custom-styles.scss (61%) diff --git a/src/components/modals/main/scss/index.scss b/src/components/modals/main/scss/index.scss index 00ad7736..d507d489 100644 --- a/src/components/modals/main/scss/index.scss +++ b/src/components/modals/main/scss/index.scss @@ -5,6 +5,8 @@ @import 'settings/buttons'; @import 'settings/dropdown'; +@import './settings/react-color-picker-gradient-picker-custom-styles.scss'; + .Modal { color: var(--modal-text); background-color: var(--background); diff --git a/src/components/modals/main/scss/settings/_main.scss b/src/components/modals/main/scss/settings/_main.scss index a08c89ae..aece09cd 100644 --- a/src/components/modals/main/scss/settings/_main.scss +++ b/src/components/modals/main/scss/settings/_main.scss @@ -26,10 +26,10 @@ input { } } -.DayPickerInput { +.DayPickerInput, .input-container { input { width: 200px; - color: var(--modal-text); + color: var(--modal-text) ! important; background: var(--sidebar); border: none; padding: 10px 10px; @@ -195,4 +195,14 @@ input[type=color]::-moz-color-swatch { .radio-title { text-transform: uppercase; font-weight: bold; +} + +.DayPicker-Day--selected { + background-color: #ff4757 !important; + color: white; +} + +.DayPicker-Months, .DayPickerInput-Overlay { + background-color: var(--background) !important; + color: var(--modal-text) !important; } \ No newline at end of file diff --git a/src/scss/react-color-picker-gradient-picker-custom-styles.scss b/src/components/modals/main/scss/settings/react-color-picker-gradient-picker-custom-styles.scss similarity index 61% rename from src/scss/react-color-picker-gradient-picker-custom-styles.scss rename to src/components/modals/main/scss/settings/react-color-picker-gradient-picker-custom-styles.scss index 7b9de000..a29344d9 100644 --- a/src/scss/react-color-picker-gradient-picker-custom-styles.scss +++ b/src/components/modals/main/scss/settings/react-color-picker-gradient-picker-custom-styles.scss @@ -16,3 +16,16 @@ div.color-preview-area > div > div:nth-child(5) { .input-field .label { color: inherit; } + +// other styling for themes support etc +.ui-color-picker { + background-color: var(--background) !important; +} + +.gradient-degrees { + border: 3px solid var(--modal-text) !important; +} + +.gradient-degree-pointer { + background-color: var(--modal-text) !important; +} \ No newline at end of file diff --git a/src/components/modals/main/settings/sections/Appearance.jsx b/src/components/modals/main/settings/sections/Appearance.jsx index b13ac0d7..9300a342 100644 --- a/src/components/modals/main/settings/sections/Appearance.jsx +++ b/src/components/modals/main/settings/sections/Appearance.jsx @@ -6,7 +6,7 @@ import Radio from '../Radio'; import Slider from '../Slider'; import Text from '../Text'; -export default function AppearanceSettings(props) { +export default function AppearanceSettings() { const { appearance } = window.language.modals.main.settings.sections; let themeOptions = [ diff --git a/src/components/modals/main/settings/sections/Background.jsx b/src/components/modals/main/settings/sections/Background.jsx index 62b29fa3..c5e47e6d 100644 --- a/src/components/modals/main/settings/sections/Background.jsx +++ b/src/components/modals/main/settings/sections/Background.jsx @@ -4,7 +4,6 @@ import Checkbox from '../Checkbox'; import Dropdown from '../Dropdown'; import FileUpload from '../FileUpload'; import Slider from '../Slider'; -import Text from '../Text'; import Switch from '../Switch'; import { ColorPicker } from 'react-color-gradient-picker'; @@ -14,7 +13,6 @@ import rgbToHex from '../../../../../modules/helpers/background/rgbToHex'; import { toast } from 'react-toastify'; import 'react-color-gradient-picker/dist/index.css'; -import '../../../../../scss/react-color-picker-gradient-picker-custom-styles.scss'; export default class BackgroundSettings extends React.PureComponent { DefaultGradientSettings = { 'angle': '180', 'gradient': [{ 'colour': window.language.modals.main.settings.sections.background.source.disabled, 'stop': 0 }], 'type': 'linear' }; diff --git a/src/components/modals/main/settings/sections/Greeting.jsx b/src/components/modals/main/settings/sections/Greeting.jsx index 02ebe850..655b315f 100644 --- a/src/components/modals/main/settings/sections/Greeting.jsx +++ b/src/components/modals/main/settings/sections/Greeting.jsx @@ -36,7 +36,7 @@ export default class GreetingSettings extends React.PureComponent {

{greeting.birthday}

- +

    {greeting.birthday_date}

    diff --git a/src/components/modals/main/settings/sections/Quote.jsx b/src/components/modals/main/settings/sections/Quote.jsx index e939302b..3389d9e7 100644 --- a/src/components/modals/main/settings/sections/Quote.jsx +++ b/src/components/modals/main/settings/sections/Quote.jsx @@ -4,7 +4,7 @@ import Checkbox from '../Checkbox'; import Text from '../Text'; import Switch from '../Switch'; -export default function QuoteSettings(props) { +export default function QuoteSettings() { const { quote } = window.language.modals.main.settings.sections; return ( diff --git a/src/components/modals/main/settings/sections/Search.jsx b/src/components/modals/main/settings/sections/Search.jsx index c72df335..bc424813 100644 --- a/src/components/modals/main/settings/sections/Search.jsx +++ b/src/components/modals/main/settings/sections/Search.jsx @@ -4,6 +4,7 @@ import { toast } from 'react-toastify'; import Dropdown from '../Dropdown'; import Checkbox from '../Checkbox'; +import Switch from '../Switch'; const searchEngines = require('../../../../widgets/search/search_engines.json'); @@ -59,7 +60,7 @@ export default class SearchSettings extends React.PureComponent { return (

    {search.title}

    - +
      this.setSearchEngine(value)}> diff --git a/src/components/modals/main/settings/sections/Time.jsx b/src/components/modals/main/settings/sections/Time.jsx index 637872e4..82ad6e3e 100644 --- a/src/components/modals/main/settings/sections/Time.jsx +++ b/src/components/modals/main/settings/sections/Time.jsx @@ -8,17 +8,12 @@ export default class TimeSettings extends React.PureComponent { constructor(...args) { super(...args); this.state = { - timeType: localStorage.getItem('timeType') || 'digital' + timeType: localStorage.getItem('timeType') || 'digital', + dateType: localStorage.getItem('dateType') || 'long' }; this.language = window.language.modals.main.settings; } - changeType(value) { - this.setState({ - timeType: value - }); - } - render() { const { time } = this.language.sections; @@ -51,36 +46,57 @@ export default class TimeSettings extends React.PureComponent { default: timeSettings = null; break; } - return ( -
      -

      {time.title}

      - - this.changeType(value)}> - - - - - - {timeSettings} - -

      {time.date.title}

      - + let dateSettings; + + const longSettings = ( + - + + ); + + const shortSettings = ( + +
      -
      -
      +

      - + +       + ); + + switch (this.state.dateType) { + case 'short': dateSettings = shortSettings; break; + case 'long': dateSettings = longSettings; break; + } + + return ( +
      +

      {time.title}

      + + this.setState({ timeType: value })}> + + + + + {timeSettings} + +

      {time.date.title}

      + + this.setState({ dateType: value })}> + + + +
      + {dateSettings}
      ); } diff --git a/src/components/widgets/time/Date.jsx b/src/components/widgets/time/Date.jsx index 29e217f6..ef2e5bf7 100644 --- a/src/components/widgets/time/Date.jsx +++ b/src/components/widgets/time/Date.jsx @@ -12,9 +12,9 @@ export default class DateWidget extends React.PureComponent { getDate() { const date = new Date(); - const short = localStorage.getItem('short'); + const type = localStorage.getItem('type'); - if (short === 'true') { + if (type === 'short') { const dateDay = date.getDate(); const dateMonth = date.getMonth() + 1; const dateYear = date.getFullYear(); @@ -56,7 +56,7 @@ export default class DateWidget extends React.PureComponent { date: format }); } else { - // Full date + // Long date const lang = localStorage.getItem('language'); const nth = (localStorage.getItem('datenth') === 'true') ? dtf.nth(date.getDate()) : date.getDate(); diff --git a/src/modules/default_settings.json b/src/modules/default_settings.json index e850791c..50a8475f 100644 --- a/src/modules/default_settings.json +++ b/src/modules/default_settings.json @@ -130,5 +130,9 @@ { "name": "order", "value": "[\"greeting\", \"time\", \"quote\", \"date\"]" + }, + { + "name": "theme", + "value": "auto" } ] diff --git a/src/modules/helpers/settings.js b/src/modules/helpers/settings.js index 2d34ad5e..c77e1950 100644 --- a/src/modules/helpers/settings.js +++ b/src/modules/helpers/settings.js @@ -24,6 +24,7 @@ export default class SettingsFunctions { for (const key of Object.keys(localStorage)) { settings[key] = localStorage.getItem(key); } + saveFile(settings, 'mue-settings.json'); } @@ -48,13 +49,6 @@ export default class SettingsFunctions { localStorage.clear(); defaultSettings.forEach((element) => localStorage.setItem(element.name, element.value)); - // Set theme depending on user preferred - if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { - localStorage.setItem('theme', 'dark'); - } else { - localStorage.setItem('theme', 'light'); - } - // Languages const languageCodes = languages.map(({ code }) => code); const browserLanguage = (navigator.languages && navigator.languages[0]) || navigator.language; @@ -126,6 +120,11 @@ export default class SettingsFunctions { const theme = localStorage.getItem('theme'); if (theme === 'dark') { document.body.classList.add('dark'); + } else if (theme === 'auto') { + // Set theme depending on user preferred + if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { + document.body.classList.add('dark'); + } } const tabName = localStorage.getItem('tabName'); @@ -147,7 +146,7 @@ export default class SettingsFunctions { ██ Copyright 2018-2021 Mue ██ ██ GitHub: https://github.com/mue/mue ██ ██ ██ - ██ Thank you for using! ██ + ██ Thank you for using Mue! ██ ██ Feedback: hello@muetab.com ██ █████████████████████████████████████████████████████████████ `);