mirror of https://github.com/mue/mue.git
refactor(button): Create button component
This commit is contained in:
parent
8c7cfd3cb1
commit
dbd0359ccc
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
|
@ -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>
|
||||
|
|
|
@ -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);
|
|
@ -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')}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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')}
|
||||
|
|
|
@ -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')}
|
||||
|
|
|
@ -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 && (
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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 <> */}
|
||||
|
|
|
@ -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')}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -311,6 +311,7 @@ a.privacy {
|
|||
padding: 25px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 20px;
|
||||
|
||||
button {
|
||||
@include modal-button(standard);
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue