From f48b7044ac7c8baed7f5647cd6ead2b99b9a979d Mon Sep 17 00:00:00 2001 From: alexsparkes Date: Mon, 19 Aug 2024 22:48:33 +0100 Subject: [PATCH] refactor: better organise options orders --- .../Elements/MainModal/scss/index.scss | 65 +++++++ .../Layout/Settings/Section/Section.jsx | 5 +- .../greeting/options/GreetingOptions.jsx | 14 +- src/features/misc/sections/Advanced.jsx | 159 +++++++++--------- src/features/misc/sections/Appearance.jsx | 81 ++++----- src/features/misc/sections/Language.jsx | 17 +- src/features/misc/sections/Overview.jsx | 17 +- src/features/navbar/options/NavbarOptions.jsx | 44 +++-- src/features/quote/options/QuoteOptions.jsx | 16 +- src/features/search/options/SearchOptions.jsx | 6 +- 10 files changed, 236 insertions(+), 188 deletions(-) diff --git a/src/components/Elements/MainModal/scss/index.scss b/src/components/Elements/MainModal/scss/index.scss index bd4d5fce..6ce7cc93 100644 --- a/src/components/Elements/MainModal/scss/index.scss +++ b/src/components/Elements/MainModal/scss/index.scss @@ -7,6 +7,71 @@ @import 'settings/main'; @import 'marketplace/main'; +.Overlay { + position: fixed; + z-index: 100; + inset: 0; + width: 100vw; + height: 100vh; + display: grid; + place-items: center; +} + +.Modal { + @include themed { + color: t($color); + } + + box-shadow: 0 0 20px rgb(0 0 0 / 30%); + opacity: 1; + z-index: -2; + transition-timing-function: ease-in; + border-radius: map-get($modal, 'border-radius'); + user-select: none; + overflow-y: auto; + transform: scale(0); + transition: all 0.3s cubic-bezier(0.47, 1.64, 0.41, 0.8); + + &:focus { + outline: 0; + } + + .modalInfoPage { + user-select: text; + } +} + +.closePositioning { + position: absolute; + top: 3rem; + right: 3rem; +} + +.ReactModal__Html--open, +.ReactModal__Body--open { + overflow: hidden; +} + +/* modal transition */ +.ReactModal__Content--after-open { + opacity: 1; + transform: scale(1); +} + +.ReactModal__Content--before-close { + opacity: 0; + transform: scale(0); +} + +#modal { + height: 80vh; + width: clamp(60vw, 1400px, 90vw); + + @include themed { + background-color: t($modal-background); + } +} + .closePositioning { position: absolute; top: 3rem; diff --git a/src/components/Layout/Settings/Section/Section.jsx b/src/components/Layout/Settings/Section/Section.jsx index 4f0e7c9b..26284d03 100644 --- a/src/components/Layout/Settings/Section/Section.jsx +++ b/src/components/Layout/Settings/Section/Section.jsx @@ -11,15 +11,14 @@ function Section({ id, title, subtitle, icon, onClick, children }) { onClick(); } }; - return (
{icon}
- {title} - {subtitle} + {title} + {subtitle}
diff --git a/src/features/greeting/options/GreetingOptions.jsx b/src/features/greeting/options/GreetingOptions.jsx index 3d4dd181..26870f3c 100644 --- a/src/features/greeting/options/GreetingOptions.jsx +++ b/src/features/greeting/options/GreetingOptions.jsx @@ -320,6 +320,13 @@ const GreetingOptions = () => { ) : ( <> +
setEvents(true)} + icon={} + /> { > -
setEvents(true)} - icon={} - /> )} diff --git a/src/features/misc/sections/Advanced.jsx b/src/features/misc/sections/Advanced.jsx index e5bb6dfd..84d12f36 100644 --- a/src/features/misc/sections/Advanced.jsx +++ b/src/features/misc/sections/Advanced.jsx @@ -7,6 +7,7 @@ import { MdRestartAlt as ResetIcon, MdDataUsage, MdError, + MdBrush, } from 'react-icons/md'; import { exportSettings, importSettings } from 'utils/settings'; @@ -14,7 +15,14 @@ import { exportSettings, importSettings } from 'utils/settings'; import { FileUpload, Text, Switch, Dropdown } from 'components/Form/Settings'; import { ResetModal, Button } from 'components/Elements'; -import { Header, Section, Row, Content, Action } from 'components/Layout/Settings'; +import { + Header, + Section, + Row, + Content, + Action, + PreferencesWrapper, +} from 'components/Layout/Settings'; import { useTab } from 'components/Elements/MainModal/backend/TabContext'; import time_zones from 'features/time/timezones.json'; @@ -63,14 +71,10 @@ function AdvancedOptions() { - {variables.getMessage( - 'settings:sections.advanced.preview_data_disabled.title', - )} + {variables.getMessage('settings:sections.advanced.preview_data_disabled.title')} - {variables.getMessage( - 'settings:sections.advanced.preview_data_disabled.description', - )} + {variables.getMessage('settings:sections.advanced.preview_data_disabled.description')}
@@ -94,8 +98,8 @@ function AdvancedOptions() { return ( <> - {header} - {subSection === "data" ? ( + {/*{header}*/} + {subSection === 'data' && ( <> setResetModal(false)} /> - ) : ( + )} + {subSection === 'custom-css' && ( + + + {variables.getMessage('settings:sections.advanced.custom_css')} + + + + )} + {subSection === '' && ( <>
setData(true)} icon={} /> - - - - - - +
} + /> + + + + + + + - - - - ({ value: timezone, text: timezone })), - ]} + + - - - - - - - - - - - - - - - - - - + ({ value: timezone, text: timezone })), + ]} + /> + + + + - - + + + + + + + + + + + )} diff --git a/src/features/misc/sections/Appearance.jsx b/src/features/misc/sections/Appearance.jsx index d6e7712d..9f92d647 100644 --- a/src/features/misc/sections/Appearance.jsx +++ b/src/features/misc/sections/Appearance.jsx @@ -3,7 +3,14 @@ import { memo, useState } from 'react'; import variables from 'config/variables'; import { Checkbox, Dropdown, Radio, Slider, Text } from 'components/Form/Settings'; -import { Header, Section, Row, Content, Action } from 'components/Layout/Settings'; +import { + Header, + Section, + Row, + Content, + Action, + PreferencesWrapper, +} from 'components/Layout/Settings'; import { useTab } from 'components/Elements/MainModal/backend/TabContext'; import { MdAccessibility } from 'react-icons/md'; @@ -19,9 +26,7 @@ function AppearanceOptions() { {/* names are taken from https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight */} @@ -148,9 +141,7 @@ function AppearanceOptions() { @@ -230,10 +215,7 @@ function AppearanceOptions() { max="5000" marks={values.toast} display={ - ' ' + - variables.getMessage( - 'settings:sections.appearance.accessibility.milliseconds', - ) + ' ' + variables.getMessage('settings:sections.appearance.accessibility.milliseconds') } /> @@ -246,42 +228,37 @@ function AppearanceOptions() { header = (
setAccessibility(false)} report={false} /> ); } else { header = ( -
+
); } return ( <> {header} - {subSection === "accessibility" ? ( + {subSection === 'accessibility' ? ( ) : ( <>
} onClick={() => setAccessibility(true)} /> - - - + + + + + )} diff --git a/src/features/misc/sections/Language.jsx b/src/features/misc/sections/Language.jsx index cd8ab340..51de2058 100644 --- a/src/features/misc/sections/Language.jsx +++ b/src/features/misc/sections/Language.jsx @@ -4,8 +4,9 @@ import { useState, useEffect } from 'react'; import { MdOutlineOpenInNew } from 'react-icons/md'; import { Radio } from 'components/Form/Settings'; import { languages } from 'lib/i18n'; +import { PreferencesWrapper } from 'components/Layout'; -const options = languages.map(id => { +const options = languages.map((id) => { const native = new Intl.DisplayNames([id], { type: 'language' }); // const current = new Intl.DisplayNames([variables.locale_id], { type: 'language' }); const current = new Intl.DisplayNames([localStorage.getItem('language')], { type: 'language' }); @@ -14,8 +15,8 @@ const options = languages.map(id => { subname: current.of(id), value: id, }; -}) -console.log(options) +}); +console.log(options); function LanguageOptions() { const [quoteLanguages, setQuoteLanguages] = useState([ @@ -43,7 +44,7 @@ function LanguageOptions() { }, []); return ( - <> +
{variables.getMessage('settings:sections.language.title')} @@ -63,9 +64,7 @@ function LanguageOptions() {
- - {variables.getMessage('settings:sections.language.quote')} - + {/*{variables.getMessage('settings:sections.language.quote')}
-
- +
*/} + ); } diff --git a/src/features/misc/sections/Overview.jsx b/src/features/misc/sections/Overview.jsx index 070cddbc..5b1ad00c 100644 --- a/src/features/misc/sections/Overview.jsx +++ b/src/features/misc/sections/Overview.jsx @@ -14,6 +14,7 @@ import Message from './overview_skeletons/Message'; import EventBus from 'utils/eventbus'; import defaults from 'config/default'; +import { PreferencesWrapper } from 'components/Layout'; const widget_name = { greeting: variables.getMessage('settings:sections.greeting.title'), @@ -31,15 +32,13 @@ const SortableItem = sortableElement(({ value }) => ( )); - const SortableContainer = sortableContainer(({ children }) => (
    {children}
)); const Overview = () => { const [items, setItems] = useState( - () => - JSON.parse(localStorage.getItem('order')) || defaults.order + () => JSON.parse(localStorage.getItem('order')) || defaults.order, ); const arrayMove = (array, oldIndex, newIndex) => { @@ -94,10 +93,8 @@ const Overview = () => { }, [items]); return ( - <> - - {variables.getMessage('marketplace:product.overview')} - + + {variables.getMessage('marketplace:product.overview')}
{variables.getMessage('welcome:buttons.preview')} @@ -117,9 +114,7 @@ const Overview = () => {
- - {variables.getMessage('settings:sections.order.title')} - + {variables.getMessage('settings:sections.order.title')} {
- + ); }; diff --git a/src/features/navbar/options/NavbarOptions.jsx b/src/features/navbar/options/NavbarOptions.jsx index 307a4943..ff692f71 100644 --- a/src/features/navbar/options/NavbarOptions.jsx +++ b/src/features/navbar/options/NavbarOptions.jsx @@ -8,7 +8,8 @@ import { Checkbox, Dropdown } from 'components/Form'; import EventBus from 'utils/eventbus'; import { Row, Content, Action } from 'components/Layout/Settings/Item'; -import { Header, PreferencesWrapper } from 'components/Layout/Settings'; +import { Header, PreferencesWrapper, Section } from 'components/Layout/Settings'; +import { useTab } from 'components/Elements/MainModal/backend/TabContext'; import AppsOptions from './AppsOptions'; import defaults from './default'; @@ -21,6 +22,8 @@ function NavbarOptions() { localStorage.getItem('appsEnabled') === 'true' || defaults.appsEnabled, ); + const { subSection } = useTab(); + const NAVBAR_SECTION = 'settings:sections.appearance.navbar'; const AdditionalSettings = () => { @@ -158,19 +161,32 @@ function NavbarOptions() { return ( <> -
- - - - - - + {subSection !== 'apps' ? ( + <> +
+
} + title={variables.getMessage('widgets.navbar.apps.title')} + subtitle={variables.getMessage('settings:sections.appearance.navbar.apps_subtitle')} + /> + + + + + + + ) : ( + + + + )} ); } diff --git a/src/features/quote/options/QuoteOptions.jsx b/src/features/quote/options/QuoteOptions.jsx index 46ff16fa..1787ff44 100644 --- a/src/features/quote/options/QuoteOptions.jsx +++ b/src/features/quote/options/QuoteOptions.jsx @@ -137,6 +137,14 @@ const QuoteOptions = () => { {subSection !== 'source' && ( <> +
} + title={variables.getMessage('settings:sections.background.source.title')} + subtitle={variables.getMessage(`${QUOTE_SECTION}.source_subtitle`)} + > + +
{ -
} - title={variables.getMessage('settings:sections.background.source.title')} - subtitle={variables.getMessage(`${QUOTE_SECTION}.source_subtitle`)} - > - -
)} diff --git a/src/features/search/options/SearchOptions.jsx b/src/features/search/options/SearchOptions.jsx index b15de63f..c0af62f8 100644 --- a/src/features/search/options/SearchOptions.jsx +++ b/src/features/search/options/SearchOptions.jsx @@ -96,9 +96,7 @@ function SearchOptions() { - + {customEnabled && CustomOptions()}