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

refacotr: settings options layout

Browse Source
This commit is contained in:
alexsparkes
2024-08-18 18:58:02 +01:00
parent e5cfb6042a
commit 74fd732c40
11 changed files with 116 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Layout/Settings/Item/SettingsItem.jsx
View File

@@ -1,5 +1,5 @@
const Row = (props) => {
const classes = `${props.final ? 'border-b-0' : 'border-b border-gray-500'} ${props.inactive ? 'opacity-50 pointer-events-none transition duration-400 ease-in-out' : ''} flex items-center min-h-[100px] justify-between py-4 transition duration-400 ease-in-out`;
const classes = `${props.inactive ? 'opacity-50 pointer-events-none transition duration-400 ease-in-out' : ''} flex items-center min-h-[100px] justify-between py-4 transition duration-400 ease-in-out`;
return <div className={classes}>{props.children}</div>;
};

32
src/components/Layout/Settings/PreferencesWrapper/PreferencesWrapper.jsx
View File

@@ -1,4 +1,4 @@
import React, { useState } from 'react';
import React, { useState, useEffect } from 'react';
import { Row, Content, Action } from 'components/Layout/Settings/Item';
import variables from 'config/variables';
import Slider from '../../../Form/Settings/Slider/Slider';
@@ -7,23 +7,33 @@ import values from 'utils/data/slider_values.json';
import EventBus from 'utils/eventbus';
const PreferencesWrapper = ({ children, ...props }) => {
const [shown, setShown] = useState(
localStorage.getItem(props.setting) === 'true' || props.default || false,
);
console.log(props.default);
EventBus.on('toggle', (setting) => {
if (setting === props.setting) {
setShown(!shown);
const [shown, setShown] = useState(() => {
if (!props.setting) {
return true;
}
return localStorage.getItem(props.setting) === 'true' || props.default || false;
});
useEffect(() => {
const handleToggle = (setting) => {
if (setting === props.setting) {
setShown((prevShown) => !prevShown);
}
};
EventBus.on('toggle', handleToggle);
return () => {
EventBus.off('toggle', handleToggle);
};
}, [props.setting]);
return (
<div
className={
shown
? 'preferences bg-modal-content-light dark:bg-modal-content-dark p-10 rounded'
: 'opacity-50 pointer-events-none transition-400 ease-in-out bg-modal-content-light dark:bg-modal-content-dark p-10 rounded'
? 'preferences bg-modal-content-light dark:bg-modal-content-dark p-10 rounded divide-y divide-gray-500'
: 'opacity-50 pointer-events-none transition-400 ease-in-out bg-modal-content-light dark:bg-modal-content-dark p-10 rounded divide-y divide-gray-500'
}
>
{props.zoomSetting && (