mirror of https://github.com/mue/mue.git
refactor(settings): Further implementation of "button" component
This commit is contained in:
parent
bad8daac6b
commit
b6adfab047
|
@ -14,7 +14,7 @@ const renderLoader = () => (
|
|||
<ul className="sidebar">
|
||||
<span className="mainTitle">Mue</span>
|
||||
</ul>
|
||||
<div className="tab-content" style={{ width: '100%' }}>
|
||||
<div className="tab-content">
|
||||
<div className="emptyItems">
|
||||
<div className="emptyMessage">
|
||||
<div className="loaderHolder">
|
||||
|
|
|
@ -2,6 +2,8 @@ import variables from 'modules/variables';
|
|||
import React, { memo } from 'react';
|
||||
import { MdAutoFixHigh, MdOutlineArrowForward, MdOutlineOpenInNew } from 'react-icons/md';
|
||||
|
||||
import Button from '../settings/Button';
|
||||
|
||||
function Items({
|
||||
type,
|
||||
items,
|
||||
|
@ -32,7 +34,7 @@ function Items({
|
|||
</div>
|
||||
{collection.news === true ? (
|
||||
<a
|
||||
className="collectionButton"
|
||||
className="btn-collection"
|
||||
href={collection.news_link}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
|
@ -40,13 +42,13 @@ function Items({
|
|||
{variables.getMessage('modals.main.marketplace.learn_more')} <MdOutlineOpenInNew />
|
||||
</a>
|
||||
) : (
|
||||
<button
|
||||
className="collectionButton"
|
||||
<Button
|
||||
type="collection"
|
||||
onClick={() => collectionFunction(collection.name)}
|
||||
>
|
||||
<MdOutlineArrowForward />
|
||||
{variables.getMessage('modals.main.marketplace.explore_collection')}
|
||||
</button>
|
||||
icon={<MdOutlineArrowForward />}
|
||||
label={variables.getMessage('modals.main.marketplace.explore_collection')}
|
||||
iconPlacement={'right'}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
|
|
|
@ -412,33 +412,6 @@ p.author {
|
|||
.items {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
button.collectionButton,
|
||||
a.collectionButton {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
padding: 1px 12px;
|
||||
backdrop-filter: blur(16px) saturate(180%);
|
||||
background-color: rgb(255 255 255 / 10%);
|
||||
border: 1px solid rgb(209 213 219 / 30%);
|
||||
color: #fff;
|
||||
|
||||
&:hover {
|
||||
backdrop-filter: blur(16px) saturate(180%);
|
||||
background-color: rgb(17 25 40 / 20%);
|
||||
border: 1px solid rgb(255 255 255 / 12.5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a.collectionButton {
|
||||
height: 40px;
|
||||
text-decoration: none;
|
||||
|
||||
@include themed {
|
||||
border-radius: t($borderRadius);
|
||||
}
|
||||
}
|
||||
|
||||
.marketplaceRefresh {
|
||||
|
|
|
@ -37,6 +37,76 @@
|
|||
}
|
||||
|
||||
.btn-navigation {
|
||||
@include modal-button(standard);
|
||||
padding: 0 15px;
|
||||
|
||||
@include themed {
|
||||
background: t($modal-secondaryColour) !important;
|
||||
border-radius: t($borderRadius) !important;
|
||||
box-shadow: t($boxShadow) !important;
|
||||
border: 0 !important;
|
||||
|
||||
&:hover {
|
||||
background: t($modal-sidebarActive) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
svg {
|
||||
background: var(--tab-active);
|
||||
}
|
||||
|
||||
color: var(--modal-text);
|
||||
}
|
||||
|
||||
span,
|
||||
svg {
|
||||
font-size: 1.1em !important;
|
||||
}
|
||||
|
||||
svg {
|
||||
font-size: 1.2em !important;
|
||||
color: var(--photo-info);
|
||||
}
|
||||
}
|
||||
|
||||
/* safari fix */
|
||||
@supports (-webkit-hyphens: none) {
|
||||
.btn-navigation {
|
||||
display: inline-block !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-navigation-active {
|
||||
@include themed {
|
||||
background: t($modal-sidebarActive) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-collection {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
padding: 1px 12px;
|
||||
backdrop-filter: blur(16px) saturate(180%);
|
||||
background-color: rgb(255 255 255 / 10%);
|
||||
border: 1px solid rgb(209 213 219 / 30%);
|
||||
color: #fff;
|
||||
|
||||
&:hover {
|
||||
backdrop-filter: blur(16px) saturate(180%);
|
||||
background-color: rgb(17 25 40 / 20%);
|
||||
border: 1px solid rgb(255 255 255 / 12.5%);
|
||||
}
|
||||
}
|
||||
|
||||
a.btn-collection {
|
||||
height: 40px;
|
||||
text-decoration: none;
|
||||
|
||||
@include themed {
|
||||
border-radius: t($borderRadius);
|
||||
}
|
||||
}
|
||||
|
||||
.flowReverse {
|
||||
|
|
|
@ -1,44 +1,3 @@
|
|||
.navbar-item {
|
||||
flex-flow: row !important;
|
||||
padding: 0 15px;
|
||||
|
||||
@include themed {
|
||||
background: t($modal-secondaryColour) !important;
|
||||
border-radius: t($borderRadius) !important;
|
||||
box-shadow: t($boxShadow) !important;
|
||||
border: 0 !important;
|
||||
|
||||
&:hover {
|
||||
background: t($modal-sidebarActive) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
svg {
|
||||
background: var(--tab-active);
|
||||
}
|
||||
|
||||
color: var(--modal-text);
|
||||
}
|
||||
|
||||
span,
|
||||
svg {
|
||||
font-size: 1.1em !important;
|
||||
}
|
||||
|
||||
svg {
|
||||
font-size: 1.2em !important;
|
||||
color: var(--photo-info);
|
||||
}
|
||||
}
|
||||
|
||||
/* safari fix */
|
||||
@supports (-webkit-hyphens: none) {
|
||||
.navbar-item {
|
||||
display: inline-block !important;
|
||||
}
|
||||
}
|
||||
|
||||
#modal {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
@ -51,9 +10,3 @@
|
|||
gap: 25px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.navbar-item-active {
|
||||
@include themed {
|
||||
background: t($modal-sidebarActive) !important;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,6 +1,8 @@
|
|||
@import 'scss/variables';
|
||||
|
||||
.tab-content {
|
||||
width: 100% !important;
|
||||
|
||||
button {
|
||||
@include modal-button(standard);
|
||||
}
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import React, { forwardRef } from 'react';
|
||||
import Tooltip from '../../../helpers/tooltip/Tooltip';
|
||||
|
||||
const Button = forwardRef(({ icon, label, type, iconPlacement, onClick, children }, ref) => {
|
||||
const Button = forwardRef(({ icon, label, type, iconPlacement, onClick, active }, ref) => {
|
||||
let className;
|
||||
|
||||
switch (type) {
|
||||
|
@ -14,6 +14,9 @@ const Button = forwardRef(({ icon, label, type, iconPlacement, onClick, children
|
|||
case 'navigation':
|
||||
className = 'btn-navigation';
|
||||
break;
|
||||
case 'collection':
|
||||
className = 'btn-collection';
|
||||
break;
|
||||
default:
|
||||
className = 'btn-default';
|
||||
}
|
||||
|
@ -22,6 +25,10 @@ const Button = forwardRef(({ icon, label, type, iconPlacement, onClick, children
|
|||
className += ' flowReverse';
|
||||
}
|
||||
|
||||
if (active) {
|
||||
className += ` ${className}-active`;
|
||||
}
|
||||
|
||||
const button = (
|
||||
<button className={className} onClick={onClick} ref={ref}>
|
||||
{icon}
|
||||
|
|
|
@ -135,6 +135,28 @@ export default class SearchSettings extends PureComponent {
|
|||
);
|
||||
};
|
||||
|
||||
const CustomOptions = () => {
|
||||
return (
|
||||
<Row final={true}>
|
||||
<Content title={variables.getMessage(`${SEARCH_SECTION}.custom`)} />
|
||||
<Action>
|
||||
<TextField
|
||||
label={variables.getMessage(`${SEARCH_SECTION}.custom`)}
|
||||
value={this.state.customValue}
|
||||
onInput={(e) => this.setState({ customValue: e.target.value })}
|
||||
varient="outlined"
|
||||
InputLabelProps={{ shrink: true }}
|
||||
/>
|
||||
<p style={{ marginTop: '0px' }}>
|
||||
<span className="link" onClick={() => this.resetSearch()}>
|
||||
{variables.getMessage('modals.main.settings.buttons.reset')}
|
||||
</span>
|
||||
</p>
|
||||
</Action>
|
||||
</Row>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Header
|
||||
|
@ -146,25 +168,7 @@ export default class SearchSettings extends PureComponent {
|
|||
<PreferencesWrapper setting="searchBar" category="widgets" visibilityToggle={true}>
|
||||
<AdditionalOptions />
|
||||
<SearchEngineSelection />
|
||||
{this.state.customEnabled && (
|
||||
<Row final={true}>
|
||||
<Content title={variables.getMessage(`${SEARCH_SECTION}.custom`)} />
|
||||
<Action>
|
||||
<TextField
|
||||
label={variables.getMessage(`${SEARCH_SECTION}.custom`)}
|
||||
value={this.state.customValue}
|
||||
onInput={(e) => this.setState({ customValue: e.target.value })}
|
||||
varient="outlined"
|
||||
InputLabelProps={{ shrink: true }}
|
||||
/>
|
||||
<p style={{ marginTop: '0px' }}>
|
||||
<span className="link" onClick={() => this.resetSearch()}>
|
||||
{variables.getMessage('modals.main.settings.buttons.reset')}
|
||||
</span>
|
||||
</p>
|
||||
</Action>
|
||||
</Row>
|
||||
)}
|
||||
{this.state.customEnabled && CustomOptions()}
|
||||
</PreferencesWrapper>
|
||||
</>
|
||||
);
|
||||
|
|
|
@ -8,6 +8,7 @@ import {
|
|||
MdClose,
|
||||
} from 'react-icons/md';
|
||||
import Tab from './Tab';
|
||||
import Button from '../../settings/Button';
|
||||
import ErrorBoundary from '../../../ErrorBoundary';
|
||||
|
||||
class Tabs extends PureComponent {
|
||||
|
@ -37,6 +38,21 @@ class Tabs extends PureComponent {
|
|||
}
|
||||
|
||||
render() {
|
||||
const navbarButtons = [
|
||||
{
|
||||
tab: 'settings',
|
||||
icon: <MdSettings />,
|
||||
},
|
||||
{
|
||||
tab: 'addons',
|
||||
icon: <MdOutlineExtension />,
|
||||
},
|
||||
{
|
||||
tab: 'marketplace',
|
||||
icon: <MdOutlineShoppingBasket />,
|
||||
},
|
||||
];
|
||||
|
||||
const reminderInfo = (
|
||||
<div
|
||||
className="reminder-info"
|
||||
|
@ -74,37 +90,17 @@ class Tabs extends PureComponent {
|
|||
))}
|
||||
{reminderInfo}
|
||||
</ul>
|
||||
<div className="tab-content" style={{ width: '100%' }}>
|
||||
<div className="tab-content">
|
||||
<div className="modalNavbar">
|
||||
<button
|
||||
className={
|
||||
this.props.current === 'settings' ? 'navbar-item navbar-item-active' : 'navbar-item'
|
||||
}
|
||||
onClick={() => this.props.changeTab('settings')}
|
||||
>
|
||||
<MdSettings />
|
||||
<span>{variables.getMessage('modals.main.navbar.settings')}</span>
|
||||
</button>
|
||||
<button
|
||||
className={
|
||||
this.props.current === 'addons' ? 'navbar-item navbar-item-active' : 'navbar-item'
|
||||
}
|
||||
onClick={() => this.props.changeTab('addons')}
|
||||
>
|
||||
<MdOutlineExtension />
|
||||
<span>{variables.getMessage('modals.main.navbar.addons')}</span>
|
||||
</button>
|
||||
<button
|
||||
className={
|
||||
this.props.current === 'marketplace'
|
||||
? 'navbar-item navbar-item-active'
|
||||
: 'navbar-item'
|
||||
}
|
||||
onClick={() => this.props.changeTab('marketplace')}
|
||||
>
|
||||
<MdOutlineShoppingBasket />
|
||||
<span>{variables.getMessage('modals.main.navbar.marketplace')}</span>
|
||||
</button>
|
||||
{navbarButtons.map(({ tab, icon }) => (
|
||||
<Button
|
||||
type="navigation"
|
||||
onClick={() => this.props.changeTab(tab)}
|
||||
icon={icon}
|
||||
label={variables.getMessage(`modals.main.navbar.${tab}`)}
|
||||
active={this.props.current === tab}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
{this.props.children.map((tab) => {
|
||||
if (tab.props.label !== this.state.currentTab) {
|
||||
|
|
Loading…
Reference in New Issue