From dbd0359ccc63eed3ab37d409237418fd2b1a0fb0 Mon Sep 17 00:00:00 2001 From: alexsparkes Date: Sat, 10 Feb 2024 19:39:15 +0000 Subject: [PATCH] refactor(button): Create button component --- src/components/modals/ErrorBoundary.jsx | 22 +++++++---- .../main/marketplace/sections/Added.jsx | 33 ++++++++-------- .../scss/marketplace/modules/_buttons.scss | 16 +++++--- .../modals/main/settings/Button.jsx | 35 +++++++++++++++++ .../modals/main/settings/Header.jsx | 38 ++++++++----------- .../modals/main/settings/SettingsRow.jsx | 15 -------- .../modals/main/settings/sections/Date.jsx | 4 +- .../main/settings/sections/Greeting.jsx | 4 +- .../modals/main/settings/sections/Message.jsx | 4 +- .../main/settings/sections/QuickLinks.jsx | 8 +++- .../modals/main/settings/sections/Quote.jsx | 4 +- .../modals/main/settings/sections/Search.jsx | 4 +- .../modals/main/settings/sections/Time.jsx | 4 +- .../modals/main/settings/sections/Weather.jsx | 4 +- .../settings/sections/quicklinks/AddModal.jsx | 2 +- src/components/modals/welcome/Welcome.jsx | 36 +++++++++--------- src/components/modals/welcome/welcome.scss | 1 + src/scss/_variables.scss | 2 +- 18 files changed, 133 insertions(+), 103 deletions(-) create mode 100644 src/components/modals/main/settings/Button.jsx delete mode 100644 src/components/modals/main/settings/SettingsRow.jsx diff --git a/src/components/modals/ErrorBoundary.jsx b/src/components/modals/ErrorBoundary.jsx index 072cc2ab..0756f3e6 100644 --- a/src/components/modals/ErrorBoundary.jsx +++ b/src/components/modals/ErrorBoundary.jsx @@ -4,6 +4,8 @@ import { PureComponent } from 'react'; import { MdErrorOutline, MdRefresh } from 'react-icons/md'; import { captureException } from '@sentry/react'; +import Button from './main/settings/Button'; + class ErrorBoundary extends PureComponent { constructor(props) { super(props); @@ -49,19 +51,23 @@ class ErrorBoundary extends PureComponent {
{this.state.showReport ? ( - + +
diff --git a/src/components/modals/main/marketplace/sections/Added.jsx b/src/components/modals/main/marketplace/sections/Added.jsx index 442c5ac2..e7a18600 100644 --- a/src/components/modals/main/marketplace/sections/Added.jsx +++ b/src/components/modals/main/marketplace/sections/Added.jsx @@ -10,6 +10,7 @@ import Item from '../Item'; import Items from '../Items'; import Dropdown from '../../settings/Dropdown'; import Header from '../../settings/Header'; +import Button from '../../settings/Button'; import { install, uninstall, urlParser } from 'modules/helpers/marketplace'; @@ -73,14 +74,13 @@ export default class Added extends PureComponent { getSideloadButton() { return ( - + icon={} + label={variables.getMessage('modals.main.addons.sideload.title')} + /> ); } @@ -242,17 +242,18 @@ export default class Added extends PureComponent {
{sideLoadBackendElements()}
- - + icon={} + label={variables.getMessage('modals.main.addons.sideload.title')} + />
diff --git a/src/components/modals/main/scss/marketplace/modules/_buttons.scss b/src/components/modals/main/scss/marketplace/modules/_buttons.scss index 027c506b..ed1d9c7b 100644 --- a/src/components/modals/main/scss/marketplace/modules/_buttons.scss +++ b/src/components/modals/main/scss/marketplace/modules/_buttons.scss @@ -24,15 +24,21 @@ } } -.sideload { +.updateCheck { + flex-flow: row !important; +} + +.btn-settings { + @include modal-button(standard); display: inline; margin-top: 0; float: none !important; padding: 0 20px; - - // width: 200px; } -.updateCheck { - flex-flow: row !important; +.btn-navigation { +} + +.flowReverse { + flex-flow: row-reverse !important; } diff --git a/src/components/modals/main/settings/Button.jsx b/src/components/modals/main/settings/Button.jsx new file mode 100644 index 00000000..09913736 --- /dev/null +++ b/src/components/modals/main/settings/Button.jsx @@ -0,0 +1,35 @@ +import React, { forwardRef } from 'react'; +import Tooltip from '../../../helpers/tooltip/Tooltip'; + +const Button = forwardRef(({ icon, label, type, iconPlacement, onClick, children }, ref) => { + let className; + + switch (type) { + case 'settings': + className = 'btn-settings'; + break; + case 'icon': + className = 'btn-icon'; + break; + case 'navigation': + className = 'btn-navigation'; + break; + default: + className = 'btn-default'; + } + + if (iconPlacement === 'right') { + className += ' flowReverse'; + } + + const button = ( + + ); + + return type === 'icon' ? {button} : button; +}); + +export default Button; diff --git a/src/components/modals/main/settings/Header.jsx b/src/components/modals/main/settings/Header.jsx index a9653bb7..9775a567 100644 --- a/src/components/modals/main/settings/Header.jsx +++ b/src/components/modals/main/settings/Header.jsx @@ -7,6 +7,7 @@ import { MdOutlineKeyboardArrowRight, } from 'react-icons/md'; import EventBus from 'modules/helpers/eventbus'; +import Button from './Button'; const Header = (props) => { const [setting, setSetting] = useState(localStorage.getItem(props.setting) === 'true'); @@ -38,31 +39,24 @@ const Header = (props) => { }; const VisibilityToggle = () => ( - + + icon={} + label={variables.getMessage('modals.main.settings.sections.header.report_issue')} + /> ); }; @@ -70,20 +64,18 @@ const Header = (props) => { <>
- {props.secondaryTitle ? ( + {props.secondaryTitle && ( <> {props.title} - {props.secondaryTitle} - ) : ( - <>{props.title} )} + {props.secondaryTitle || props.title}
- {props.switch && } + {props.visibilityToggle && } {props.report !== false && } {props.children}
diff --git a/src/components/modals/main/settings/SettingsRow.jsx b/src/components/modals/main/settings/SettingsRow.jsx deleted file mode 100644 index 34a64714..00000000 --- a/src/components/modals/main/settings/SettingsRow.jsx +++ /dev/null @@ -1,15 +0,0 @@ -import { memo } from 'react'; - -function SettingsRow({ final, title, subtitle, children }) { - return ( -
-
- {title} - {subtitle} -
-
{children}
-
- ); -} - -export default memo(SettingsRow); diff --git a/src/components/modals/main/settings/sections/Date.jsx b/src/components/modals/main/settings/sections/Date.jsx index af4b84ed..1015dee3 100644 --- a/src/components/modals/main/settings/sections/Date.jsx +++ b/src/components/modals/main/settings/sections/Date.jsx @@ -75,9 +75,9 @@ export default function Date() { category="date" element=".date" zoomSetting="zoomDate" - switch={true} + visibilityToggle={true} /> - + { category="greeting" element=".greeting" zoomSetting="zoomGreeting" - switch={true} + visibilityToggle={true} /> - + {BirthdayOptions()} diff --git a/src/components/modals/main/settings/sections/Message.jsx b/src/components/modals/main/settings/sections/Message.jsx index d636955e..2a06a23d 100644 --- a/src/components/modals/main/settings/sections/Message.jsx +++ b/src/components/modals/main/settings/sections/Message.jsx @@ -69,9 +69,9 @@ export default class Message extends PureComponent { category="message" element=".message" zoomSetting="zoomMessage" - switch={true} + visibilityToggle={true} /> - + diff --git a/src/components/modals/main/settings/sections/QuickLinks.jsx b/src/components/modals/main/settings/sections/QuickLinks.jsx index ea1643ce..cd194a43 100644 --- a/src/components/modals/main/settings/sections/QuickLinks.jsx +++ b/src/components/modals/main/settings/sections/QuickLinks.jsx @@ -135,9 +135,13 @@ export default class QuickLinks extends PureComponent { category="quicklinks" element=".quicklinks-container" zoomSetting="zoomQuicklinks" - switch={true} + visibilityToggle={true} /> - + )} {this.state.sourceSection && ( @@ -277,7 +277,7 @@ export default class QuoteSettings extends PureComponent { )} {!this.state.sourceSection && ( - +
} title={variables.getMessage('modals.main.settings.sections.background.source.title')} diff --git a/src/components/modals/main/settings/sections/Search.jsx b/src/components/modals/main/settings/sections/Search.jsx index 9e9be641..e5de8832 100644 --- a/src/components/modals/main/settings/sections/Search.jsx +++ b/src/components/modals/main/settings/sections/Search.jsx @@ -141,9 +141,9 @@ export default class SearchSettings extends PureComponent { title={variables.getMessage(`${SEARCH_SECTION}.title`)} setting="searchBar" category="widgets" - switch={true} + visibilityToggle={true} /> - + {this.state.customEnabled && ( diff --git a/src/components/modals/main/settings/sections/Time.jsx b/src/components/modals/main/settings/sections/Time.jsx index ed3d00a0..9a2db823 100644 --- a/src/components/modals/main/settings/sections/Time.jsx +++ b/src/components/modals/main/settings/sections/Time.jsx @@ -212,9 +212,9 @@ const TimeSettings = () => { category="clock" element=".clock-container" zoomSetting="zoomClock" - switch={true} + visibilityToggle={true} /> - + {timeSettings} diff --git a/src/components/modals/main/settings/sections/Weather.jsx b/src/components/modals/main/settings/sections/Weather.jsx index 9507630f..faf58071 100644 --- a/src/components/modals/main/settings/sections/Weather.jsx +++ b/src/components/modals/main/settings/sections/Weather.jsx @@ -205,13 +205,13 @@ export default class WeatherSettings extends PureComponent { category="widgets" zoomSetting="zoomWeather" zoomCategory="weather" - switch={true} + visibilityToggle={true} /> {/* https://stackoverflow.com/a/65328486 when using inputs it may defocus so we do the {} instead of <> */} diff --git a/src/components/modals/main/settings/sections/quicklinks/AddModal.jsx b/src/components/modals/main/settings/sections/quicklinks/AddModal.jsx index 4fa3b8c4..d59f406b 100644 --- a/src/components/modals/main/settings/sections/quicklinks/AddModal.jsx +++ b/src/components/modals/main/settings/sections/quicklinks/AddModal.jsx @@ -66,7 +66,7 @@ function AddModal({ urlError, iconError, addLink, closeModal, edit, editData, ed height: '16px', fontSize: '15px', }} - className="sideload" + className="btn-settings" onClick={() => addLink(name, url, icon)} > {variables.getMessage('widgets.quicklinks.add')} diff --git a/src/components/modals/welcome/Welcome.jsx b/src/components/modals/welcome/Welcome.jsx index abdd70b8..b6107488 100644 --- a/src/components/modals/welcome/Welcome.jsx +++ b/src/components/modals/welcome/Welcome.jsx @@ -6,6 +6,7 @@ import EventBus from 'modules/helpers/eventbus'; import WelcomeSections from './WelcomeSections'; import ProgressBar from './ProgressBar'; +import Button from '../main/settings/Button'; import './welcome.scss'; @@ -121,28 +122,27 @@ class WelcomeModal extends PureComponent {
{this.state.currentTab !== 0 ? ( - + icon={} + label={variables.getMessage('modals.welcome.buttons.previous')} + /> ) : ( - + icon={} + label={variables.getMessage('modals.welcome.buttons.preview')} + /> )} - +
diff --git a/src/components/modals/welcome/welcome.scss b/src/components/modals/welcome/welcome.scss index d9344965..c64434ea 100644 --- a/src/components/modals/welcome/welcome.scss +++ b/src/components/modals/welcome/welcome.scss @@ -311,6 +311,7 @@ a.privacy { padding: 25px; display: flex; justify-content: flex-end; + gap: 20px; button { @include modal-button(standard); diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index 673f616a..7bb7020b 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -192,7 +192,7 @@ $themes: ( font-size: 1rem; display: flex; align-items: center; - flex-flow: row-reverse; + flex-flow: row; justify-content: center; gap: 20px; transition: 0.5s;