mirrors/mue
1
0
Fork 0
mirror of https://github.com/mue/mue.git synced 2026-07-26 18:21:27 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: background options' routing & section icon shrink

Browse Source 
Co-authored-by: David Ralph <me@davidcralph.co.uk>
This commit is contained in:
alexsparkes
2024-08-21 15:16:19 +01:00
parent 01b89541c0
commit 2ddfdb24dd
2 changed files with 32 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/Elements/MainModal/scss/index.scss
View File

@@ -292,6 +292,7 @@ h5 {
flex-flow: row; flex-flow: row;
align-items: center; align-items: center;
gap: 25px; gap: 25px;
flex-grow: 0;
svg { svg {
@include themed { @include themed {

57
src/features/background/options/BackgroundOptions.jsx
View File

@@ -3,7 +3,7 @@ import variables from 'config/variables';
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import { MdSource, MdOutlineKeyboardArrowRight, MdOutlineAutoAwesome } from 'react-icons/md'; import { MdSource, MdOutlineKeyboardArrowRight, MdOutlineAutoAwesome } from 'react-icons/md';
import { Header, PreferencesWrapper } from 'components/Layout/Settings'; import { Header, PreferencesWrapper, Section } from 'components/Layout/Settings';
import { Checkbox, Dropdown, Slider, Radio, Text, ChipSelect } from 'components/Form/Settings'; import { Checkbox, Dropdown, Slider, Radio, Text, ChipSelect } from 'components/Form/Settings';
import { Row, Content, Action } from 'components/Layout/Settings/Item'; import { Row, Content, Action } from 'components/Layout/Settings/Item';
//import Text from 'components/Form/Settings/Text/Text'; //import Text from 'components/Form/Settings/Text/Text';
@@ -13,10 +13,13 @@ import CustomSettings from './Custom';
import values from 'utils/data/slider_values.json'; import values from 'utils/data/slider_values.json';
import { APIQualityOptions, backgroundImageEffects, getBackgroundOptionItems } from './optionTypes'; import { APIQualityOptions, backgroundImageEffects, getBackgroundOptionItems } from './optionTypes';
import { useTab } from 'components/Elements/MainModal/backend/TabContext';
import defaults from './default'; import defaults from './default';
function BackgroundOptions() { function BackgroundOptions() {
const { subSection } = useTab();
const [backgroundType, setBackgroundType] = useState( const [backgroundType, setBackgroundType] = useState(
localStorage.getItem('backgroundType') || defaults.backgroundType, localStorage.getItem('backgroundType') || defaults.backgroundType,
); );
@@ -37,7 +40,7 @@ function BackgroundOptions() {
useEffect(() => { useEffect(() => {
return () => { return () => {
controller.abort(); controller.abort();
} };
}, []); }, []);
async function getBackgroundCategories() { async function getBackgroundCategories() {
@@ -229,9 +232,9 @@ function BackgroundOptions() {
return ( return (
<> <>
{header} {header}
{backgroundSettingsSection !== true && effects !== true ? ( {subSection === '' ? (
<> <>
<div className="moreSettings" onClick={() => setBackgroundSettingsSection(true)}> {/*<div className="moreSettings" onClick={() => setBackgroundSettingsSection(true)}>
<div className="left"> <div className="left">
<MdSource /> <MdSource />
<div className="content"> <div className="content">
@@ -252,32 +255,34 @@ function BackgroundOptions() {
items={getBackgroundOptionItems(marketplaceEnabled)} items={getBackgroundOptionItems(marketplaceEnabled)}
/> />
</div> </div>
</div> </div>*/}
<Section
id="source"
title={variables.getMessage('settings:sections.background.source.title')}
subtitle={variables.getMessage('settings:sections.background.source.subtitle')}
icon={<MdSource />}
>
<Dropdown
label={variables.getMessage('settings:sections.background.type.title')}
name="backgroundType"
onChange={(value) => this.setState({ backgroundType: value })}
category="background"
items={getBackgroundOptionItems(marketplaceEnabled)}
/>
</Section>
{backgroundType === 'api' || backgroundType === 'custom' || marketplaceEnabled ? ( {backgroundType === 'api' || backgroundType === 'custom' || marketplaceEnabled ? (
<> <>
<div className="moreSettings" onClick={() => setEffects(true)}> <Section
<div className="left"> id="effects"
<MdOutlineAutoAwesome /> title={variables.getMessage('settings:sections.background.effects.title')}
<div className="content"> subtitle={variables.getMessage('settings:sections.background.effects.subtitle')}
<span className="title"> icon={<MdOutlineAutoAwesome />}
{variables.getMessage('settings:sections.background.effects.title')} />
</span>
<span className="subtitle">
{variables.getMessage('settings:sections.background.effects.subtitle')}
</span>
</div>
</div>
<div className="action">
{' '}
<MdOutlineKeyboardArrowRight />
</div>
</div>
</> </>
) : null} ) : null}
</> </>
) : null} ) : null}
{backgroundSettingsSection !== true && {subSection === '' &&
effects !== true &&
(backgroundType === 'api' || backgroundType === 'custom' || marketplaceEnabled) ? ( (backgroundType === 'api' || backgroundType === 'custom' || marketplaceEnabled) ? (
<PreferencesWrapper> <PreferencesWrapper>
<Row final={true}> <Row final={true}>
@@ -307,7 +312,7 @@ function BackgroundOptions() {
</Row> </Row>
</PreferencesWrapper> </PreferencesWrapper>
) : null} ) : null}
{backgroundSettingsSection && ( {subSection === 'source' && (
<> <>
<Row final={backgroundType === 'random_colour' || backgroundType === 'random_gradient'}> <Row final={backgroundType === 'random_colour' || backgroundType === 'random_gradient'}>
<Content <Content
@@ -329,7 +334,7 @@ function BackgroundOptions() {
</> </>
)} )}
{(backgroundType === 'api' || backgroundType === 'custom' || marketplaceEnabled) && {(backgroundType === 'api' || backgroundType === 'custom' || marketplaceEnabled) &&
effects ? ( subSection === 'effects' ? (
<Row final={true}> <Row final={true}>
<Content <Content
title={variables.getMessage('settings:sections.background.effects.title')} title={variables.getMessage('settings:sections.background.effects.title')}