mirrors/mue
1
0
Fork 0
mirror of https://github.com/mue/mue.git synced 2026-07-14 12:34:03 +02:00
Code Issues Packages Projects Releases Wiki Activity

refactor: begin redesign of tab errors

Browse Source
This commit is contained in:
alexsparkes
2024-08-17 23:50:13 +01:00
parent 7178983a36
commit bf64f56f7c
15 changed files with 98 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Elements/MainModal/Main.jsx
View File

@@ -69,7 +69,7 @@ const MainModalContent = ({ modalClose }) => {
animate="center"
exit="exit"
transition={{ type: 'tween', duration: 0.8 }}
className="flex w-full min-w-full"
className="flex w-full min-w-full overflow-y-auto"
>
<Suspense fallback={renderLoader()}>{renderTab()}</Suspense>
</motion.div>

2
src/components/Elements/MainModal/backend/Tabs.jsx
View File

@@ -68,7 +68,7 @@ const Tabs = (props) => {
{reminderInfo}
</div>
)}
<div className="w-full rounded min-h-[69vh] bg-modal-content-light dark:bg-modal-content-dark p-10 flex flex-col">
<div className="w-full rounded h-[calc(78vh-80px)] bg-modal-content-light dark:bg-modal-content-dark p-10 flex flex-col overflow-scroll">
{props.children.map((tab, index) => {
if (tab.props.label !== currentTab) {
return null;

100
src/components/Elements/MainModal/backend/newTabs.jsx
View File

@@ -2,7 +2,7 @@ import { useState, useCallback, memo, useMemo } from 'react';
import variables from 'config/variables';
import Tab from './Tab';
import { useTab } from './TabContext';
import { MdRefresh, MdClose } from 'react-icons/md';
import { MdOutlineWarning, MdRefresh, MdClose } from 'react-icons/md';
const Sidebar = memo(({ sections, currentTab, setCurrentTab }) => {
const { subTab, setSubTab, setSubSection } = useTab();
@@ -14,33 +14,6 @@ const Sidebar = memo(({ sections, currentTab, setCurrentTab }) => {
[setSubTab, setSubSection],
);
const hideReminder = () => {
localStorage.setItem('showReminder', false);
document.querySelector('.reminder-info').style.display = 'none';
};
const reminderInfo = useMemo(
() => (
<div
className="reminder-info"
style={{ display: localStorage.getItem('showReminder') === 'true' ? 'flex' : 'none' }}
>
<div className="shareHeader">
<span className="title">{variables.getMessage('settings:reminder.title')}</span>
<span className="closeModal" onClick={hideReminder}>
<MdClose />
</span>
</div>
<span className="subtitle">{variables.getMessage('settings:reminder.message')}</span>
<button onClick={() => window.location.reload()}>
<MdRefresh />
{variables.getMessage('modals.main.error_boundary.refresh')}
</button>
</div>
),
[],
);
return (
<div className="modalSidebar">
{sections.map((section, index) => (
@@ -52,28 +25,65 @@ const Sidebar = memo(({ sections, currentTab, setCurrentTab }) => {
navbarTab={section.navbar || false}
/>
))}
{reminderInfo}
</div>
);
});
const Content = memo(({ sections, currentTab }) => (
<>
{sections.map(
({ label, name, component: Component }) =>
variables.getMessage(label) === currentTab && (
<div
className="w-full rounded min-h-[69vh] bg-modal-content-light dark:bg-modal-content-dark p-10 flex flex-col"
key={name}
label={variables.getMessage(label)}
name={name}
const Content = memo(({ sections, currentTab }) => {
const hideReminder = () => {
localStorage.setItem('showReminder', false);
document.querySelector('.reminder-info').style.display = 'none';
};
const reminderInfo = useMemo(
() => (
<div
className="bg-rose-800 border-rose-700 border-2 flex-row px-10 py-5 rounded items-center justify-between"
style={{ display: localStorage.getItem('showReminder') === 'true' ? 'flex' : 'none' }}
>
<div className="flex flex-row items-center gap-5">
<MdOutlineWarning />
<span>{variables.getMessage('settings:reminder.message')}</span>
</div>
<div class="flex flex-row items-center gap-5">
<button
className="bg-neutral-900 border-neutral-800 border-2 px-8 py-2 flex flex-row items-center gap-2 rounded"
onClick={() => window.location.reload()}
>
<Component />
</div>
),
)}
</>
));
<MdRefresh /> {variables.getMessage('modals.main.error_boundary.refresh')}
</button>
<button
className="bg-neutral-900 border-neutral-800 border-2 px-8 py-2 flex flex-row items-center gap-2 rounded"
onClick={hideReminder}
>
<MdClose />
Close
</button>
</div>
</div>
),
[],
);
return (
<>
{sections.map(
({ label, name, component: Component }) =>
variables.getMessage(label) === currentTab && (
<div
className="w-full rounded h-[calc(78vh-80px)] flex flex-col overflow-scroll pr-2 gap-3"
key={name}
label={variables.getMessage(label)}
name={name}
>
{reminderInfo}
<Component />
</div>
),
)}
</>
);
});
const Tabs = ({ sections }) => {
const { subTab, setSubTab, setSubSection } = useTab();

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

@@ -258,8 +258,6 @@ h5 {
.reminder-info {
display: flex;
flex-flow: column;
position: absolute;
bottom: 0;
padding: 15px;
gap: 15px;

7
src/components/Elements/MainModal/scss/marketplace/_main.scss
View File

@@ -158,7 +158,7 @@
width: 100%;
height: auto;
border-radius: 12px;
box-shadow: 0 5px 25px rgba(0, 0, 0, .75);
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.75);
aspect-ratio: 1 / 1;
object-fit: cover;
}
@@ -259,9 +259,9 @@ p.author {
margin-top: -5px;
}
#item>img,
#item > img,
.updateImage,
.updateChangelog>p>img {
.updateChangelog > p > img {
border-radius: 12px;
height: 200px;
width: auto;
@@ -452,7 +452,6 @@ p.author {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 15px;
.tooltip {
margin-right: 25px;

2
src/components/Elements/MainModal/scss/modules/_sidebar.scss
View File

@@ -9,7 +9,7 @@
padding: 0 5px;
border-radius: 12px 0 0 12px;
overflow: hidden auto;
height: 67vh;
height: calc(80vh - 80px);
min-width: 250px;
.mainTitle {

10
src/components/Layout/Settings/Header/Header.jsx
View File

@@ -1,10 +1,6 @@
import variables from 'config/variables';
import { useState, useEffect } from 'react';
import {
MdFlag,
MdOutlineVisibilityOff,
MdOutlineVisibility,
} from 'react-icons/md';
import { MdFlag, MdOutlineVisibilityOff, MdOutlineVisibility } from 'react-icons/md';
import EventBus from 'utils/eventbus';
import { Button } from 'components/Elements';
@@ -64,8 +60,8 @@ function Header(props) {
};
return (
<div className="modalHeader">
<div className="headerActions">
<div className="bg-modal-content-light dark:bg-modal-content-dark py-6 px-10 rounded">
<div className="flex flex-row gap-5">
{props.visibilityToggle && <VisibilityToggle />}
{props.report !== false && <ReportButton />}
{props.children}

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

@@ -1,19 +1,19 @@
const Row = (props) => {
const classes = `${props.final ? 'settingsRow settingsNoBorder' : 'settingsRow'} ${props.inactive ? 'opacity-50 pointer-events-none transition-400 ease-in-out' : ''}`;
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`;
return <div className={classes}>{props.children}</div>;
};
const Content = (props) => {
return (
<div className="content">
<span className="title">{props.title}</span>
<span className="subtitle">{props.subtitle}</span>
<div className="flex flex-col max-w-[50%]">
<span className="text-2xl font-semibold">{props.title}</span>
<span className="text-neutral-800 dark:text-neutral-300 ">{props.subtitle}</span>
</div>
);
};
const Action = (props) => {
return <div className="action">{props.children}</div>;
return <div className="flex flex-col items-end w-[300px]">{props.children}</div>;
};
export { Row, Content, Action };
export { Row, Content, Action };

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

@@ -7,8 +7,10 @@ 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)
const [shown, setShown] = useState(
localStorage.getItem(props.setting) === 'true' || props.default || false,
);
console.log(props.default);
EventBus.on('toggle', (setting) => {
if (setting === props.setting) {
@@ -17,13 +19,17 @@ const PreferencesWrapper = ({ children, ...props }) => {
});
return (
<div className={shown ? 'preferences' : 'opacity-50 pointer-events-none transition-400 ease-in-out'}>
<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'
}
>
{props.zoomSetting && (
<Row>
<Content
title={variables.getMessage(
'settings:sections.appearance.accessibility.widget_zoom',
)}
title={variables.getMessage('settings:sections.appearance.accessibility.widget_zoom')}
subtitle={variables.getMessage('settings:sections.header.size')}
/>
<Action>