extras
/
mue
mirror of https://github.com/mue/mue.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

refactor(button): Create button component

This commit is contained in:
alexsparkes 2024-02-10 19:39:15 +00:00
parent 8c7cfd3cb1
commit dbd0359ccc
18 changed files with 133 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/modals/ErrorBoundary.jsx
View File

@ -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 {
</span>
<div className="buttonsRow">
{this.state.showReport ? (
<button className="sideload" onClick={() => this.reportError()}>
{variables.getMessage('modals.main.error_boundary.report_error')}
<MdErrorOutline />
</button>
<Button
type="settings"
icon={<MdErrorOutline />}
label={variables.getMessage('modals.main.error_boundary.report_error')}
onClick={() => this.reportError()}
/>
) : (
<span className="subtitle">
{variables.getMessage('modals.main.error_boundary.sent')}
</span>
)}
<button className="sideload" onClick={() => window.location.reload()}>
{variables.getMessage('modals.main.error_boundary.refresh')}
<MdRefresh />
</button>
<Button
type="settings"
icon={<MdRefresh />}
label={variables.getMessage('modals.main.error_boundary.refresh')}
onClick={() => window.location.reload()}
/>
</div>
</div>
</div>

33
src/components/modals/main/marketplace/sections/Added.jsx
View File

@ -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 (
<button
className="sideload"
<Button
type="settings"
onClick={() => document.getElementById('file-input').click()}
ref={this.customDnd}
>
{variables.getMessage('modals.main.addons.sideload.title')}
<MdCode />
</button>
icon={<MdCode />}
label={variables.getMessage('modals.main.addons.sideload.title')}
/>
);
}
@ -242,17 +242,18 @@ export default class Added extends PureComponent {
<div className="filter">
{sideLoadBackendElements()}
<div className="buttonSection">
<button className="addToMue sideload updateCheck" onClick={() => this.updateCheck()}>
<MdUpdate />
{variables.getMessage('modals.main.addons.check_updates')}
</button>
<button
className="sideload"
<Button
type="settings"
onClick={() => this.updateCheck()}
icon={<MdUpdate />}
label={variables.getMessage('modals.main.addons.check_updates')}
/>
<Button
type="settings"
onClick={() => document.getElementById('file-input').click()}
>
{variables.getMessage('modals.main.addons.sideload.title')}
<MdCode />
</button>
icon={<MdCode />}
label={variables.getMessage('modals.main.addons.sideload.title')}
/>
</div>
</div>
</div>

16
src/components/modals/main/scss/marketplace/modules/_buttons.scss
View File

@ -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;
}

35
src/components/modals/main/settings/Button.jsx Normal file
View File

@ -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 = (
<button className={className} onClick={onClick} ref={ref}>
{icon}
{label}
</button>
);
return type === 'icon' ? <Tooltip>{button}</Tooltip> : button;
});
export default Button;

38
src/components/modals/main/settings/Header.jsx
View File

@ -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 = () => (
<button className="sideload" onClick={changeSetting}>
{setting ? (
<>
Hide
<MdOutlineVisibilityOff />
</>
) : (
<>
Show
<MdOutlineVisibility />
</>
)}
</button>
<Button
type="settings"
onClick={changeSetting}
icon={setting ? <MdOutlineVisibilityOff /> : <MdOutlineVisibility />}
label={setting ? 'Hide' : 'Show'}
/>
);
const ReportButton = () => {
return (
<button
className="sideload"
<Button
type="settings"
onClick={() =>
window.open(variables.constants.BUG_REPORT + props.title.split(' ').join('+'), '_blank')
}
>
{variables.getMessage('modals.main.settings.sections.header.report_issue')} <MdFlag />
</button>
icon={<MdFlag />}
label={variables.getMessage('modals.main.settings.sections.header.report_issue')}
/>
);
};
@ -70,20 +64,18 @@ const Header = (props) => {
<>
<div className="modalHeader">
<span className="mainTitle">
{props.secondaryTitle ? (
{props.secondaryTitle && (
<>
<span className="backTitle" onClick={props.goBack}>
{props.title}
</span>
<MdOutlineKeyboardArrowRight />
{props.secondaryTitle}
</>
) : (
<>{props.title}</>
)}
{props.secondaryTitle || props.title}
</span>
<div className="headerActions">
{props.switch && <VisibilityToggle />}
{props.visibilityToggle && <VisibilityToggle />}
{props.report !== false && <ReportButton />}
{props.children}
</div>

15
src/components/modals/main/settings/SettingsRow.jsx
View File

@ -1,15 +0,0 @@
import { memo } from 'react';
function SettingsRow({ final, title, subtitle, children }) {
return (
<div className={final ? 'settingsRow settingsNoBorder' : 'settingsRow'}>
<div className="content">
<span className="title">{title}</span>
<span className="subtitle">{subtitle}</span>
</div>
<div className="action">{children}</div>
</div>
);
}
export default memo(SettingsRow);

4
src/components/modals/main/settings/sections/Date.jsx
View File

@ -75,9 +75,9 @@ export default function Date() {
category="date"
element=".date"
zoomSetting="zoomDate"
switch={true}
visibilityToggle={true}
/>
<PreferencesWrapper setting="date" switch={true} zoomSetting="zoomDate">
<PreferencesWrapper setting="date" visibilityToggle={true} zoomSetting="zoomDate">
<Row>
<Content
title={variables.getMessage('modals.main.settings.sections.time.type')}

4
src/components/modals/main/settings/sections/Greeting.jsx
View File

@ -92,9 +92,9 @@ const GreetingSettings = () => {
category="greeting"
element=".greeting"
zoomSetting="zoomGreeting"
switch={true}
visibilityToggle={true}
/>
<PreferencesWrapper setting="greeting" zoomSetting="zoomGreeting" switch={true}>
<PreferencesWrapper setting="greeting" zoomSetting="zoomGreeting" visibilityToggle={true}>
<AdditionalOptions />
{BirthdayOptions()}
</PreferencesWrapper>

4
src/components/modals/main/settings/sections/Message.jsx
View File

@ -69,9 +69,9 @@ export default class Message extends PureComponent {
category="message"
element=".message"
zoomSetting="zoomMessage"
switch={true}
visibilityToggle={true}
/>
<PreferencesWrapper setting="message" switch={true} zoomSetting="zoomMessage">
<PreferencesWrapper setting="message" visibilityToggle={true} zoomSetting="zoomMessage">
<Row final={true}>
<Content title={variables.getMessage(`${MESSAGE_SECTION}.messages`)} />
<Action>

8
src/components/modals/main/settings/sections/QuickLinks.jsx
View File

@ -135,9 +135,13 @@ export default class QuickLinks extends PureComponent {
category="quicklinks"
element=".quicklinks-container"
zoomSetting="zoomQuicklinks"
switch={true}
visibilityToggle={true}
/>
<PreferencesWrapper setting="quicklinksenabled" switch={true} zoomSetting="zoomQuicklinks">
<PreferencesWrapper
setting="quicklinksenabled"
visibilityToggle={true}
zoomSetting="zoomQuicklinks"
>
<Row>
<Content
title={variables.getMessage('modals.main.settings.additional_settings')}

4
src/components/modals/main/settings/sections/Quote.jsx
View File

@ -262,7 +262,7 @@ export default class QuoteSettings extends PureComponent {
category="quote"
element=".quotediv"
zoomSetting="zoomQuote"
switch={true}
visibilityToggle={true}
/>
)}
{this.state.sourceSection && (
@ -277,7 +277,7 @@ export default class QuoteSettings extends PureComponent {
</Row>
)}
{!this.state.sourceSection && (
<PreferencesWrapper setting="quote" zoomSetting="zoomQuote" switch={true}>
<PreferencesWrapper setting="quote" zoomSetting="zoomQuote" visibilityToggle={true}>
<Section
icon={<MdSource />}
title={variables.getMessage('modals.main.settings.sections.background.source.title')}

4
src/components/modals/main/settings/sections/Search.jsx
View File

@ -141,9 +141,9 @@ export default class SearchSettings extends PureComponent {
title={variables.getMessage(`${SEARCH_SECTION}.title`)}
setting="searchBar"
category="widgets"
switch={true}
visibilityToggle={true}
/>
<PreferencesWrapper setting="searchBar" category="widgets" switch={true}>
<PreferencesWrapper setting="searchBar" category="widgets" visibilityToggle={true}>
<AdditionalOptions />
<SearchEngineSelection />
{this.state.customEnabled && (

4
src/components/modals/main/settings/sections/Time.jsx
View File

@ -212,9 +212,9 @@ const TimeSettings = () => {
category="clock"
element=".clock-container"
zoomSetting="zoomClock"
switch={true}
visibilityToggle={true}
/>
<PreferencesWrapper setting="time" zoomSetting="zoomClock" switch={true}>
<PreferencesWrapper setting="time" zoomSetting="zoomClock" visibilityToggle={true}>
<WidgetType />
{timeSettings}
</PreferencesWrapper>

4
src/components/modals/main/settings/sections/Weather.jsx
View File

@ -205,13 +205,13 @@ export default class WeatherSettings extends PureComponent {
category="widgets"
zoomSetting="zoomWeather"
zoomCategory="weather"
switch={true}
visibilityToggle={true}
/>
<PreferencesWrapper
setting="weatherEnabled"
zoomSetting="zoomWeather"
zoomCategory="weather"
switch={true}
visibilityToggle={true}
>
<WidgetType />
{/* https://stackoverflow.com/a/65328486 when using inputs it may defocus so we do the {} instead of <> */}

2
src/components/modals/main/settings/sections/quicklinks/AddModal.jsx
View File

@ -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)}
>
<MdAddLink /> {variables.getMessage('widgets.quicklinks.add')}

36
src/components/modals/welcome/Welcome.jsx
View File

@ -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 {
</div>
<div className="welcomeButtons">
{this.state.currentTab !== 0 ? (
<button
className="sideload"
style={{ marginRight: '20px' }}
<Button
type="settings"
onClick={() => this.changeTab(true)}
>
{variables.getMessage('modals.welcome.buttons.previous')}
<MdArrowBackIosNew />
</button>
icon={<MdArrowBackIosNew />}
label={variables.getMessage('modals.welcome.buttons.previous')}
/>
) : (
<button
className="sideload"
style={{ marginRight: '20px' }}
<Button
type="settings"
onClick={() => this.props.modalSkip()}
>
{variables.getMessage('modals.welcome.buttons.preview')}
<MdOutlinePreview />
</button>
icon={<MdOutlinePreview />}
label={variables.getMessage('modals.welcome.buttons.preview')}
/>
)}
<button className="sideload" onClick={() => this.changeTab()}>
<MdArrowForwardIos />
{this.state.buttonText}
</button>
<Button
type="settings"
onClick={() => this.changeTab()}
icon={<MdArrowForwardIos />}
label={this.state.buttonText}
iconPlacement={'right'}
/>
</div>
</section>
</div>

1
src/components/modals/welcome/welcome.scss
View File

@ -311,6 +311,7 @@ a.privacy {
padding: 25px;
display: flex;
justify-content: flex-end;
gap: 20px;
button {
@include modal-button(standard);

2
src/scss/_variables.scss
View File

@ -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;