extras
/
mue
mirror of https://github.com/mue/mue.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

refactor(navbar): Partition of navbar

This commit is contained in:
alexsparkes 2024-02-10 13:39:03 +00:00
parent 9716ddd9af
commit ad2af657d7
5 changed files with 66 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/modals/main/scss/modules/_tab-content.scss
View File

@ -25,6 +25,7 @@
align-items: center;
min-height: 100px;
justify-content: space-between;
transition: 0.4s ease-in-out;
/* border-top: 1px solid #ccc; */
border-bottom: 1px solid #676767;

7
src/components/modals/main/settings/SettingsItem.jsx
View File

@ -1,9 +1,6 @@
function Row(props) {
return (
<div className={props.final ? 'settingsRow settingsNoBorder' : 'settingsRow'}>
{props.children}
</div>
);
const classes = `${props.final ? 'settingsRow settingsNoBorder' : 'settingsRow'} ${props.inactive ? 'preferencesInactive' : ''}`;
return <div className={classes}>{props.children}</div>;
}
function Content(props) {

96
src/components/modals/main/settings/sections/Navbar.jsx
View File

@ -14,11 +14,13 @@ import { Row, Content, Action } from '../SettingsItem';
import Header from '../Header';
import { getTitleFromUrl, isValidUrl } from 'modules/helpers/settings/modals';
import QuickLink from './quicklinks/QuickLink';
import Apps from '../../../../widgets/navbar/Apps';
function Navbar() {
const [showRefreshOptions, setShowRefreshOptions] = useState(
localStorage.getItem('refresh') === 'true',
);
const [appsEnabled, setAppsEnabled] = useState(localStorage.getItem('appsEnabled') === 'true');
const [appsModalInfo, setAppsModalInfo] = useState({
newLink: false,
edit: false,
@ -112,15 +114,8 @@ function Navbar() {
const NAVBAR_SECTION = 'modals.main.settings.sections.appearance.navbar';
return (
<>
<Header
title={variables.getMessage(`${NAVBAR_SECTION}.title`)}
setting="navbar"
category="widgets"
zoomSetting="zoomNavbar"
zoomCategory="navbar"
/>
const AdditionalSettings = () => {
return (
<Row final={false}>
<Content
title={variables.getMessage('modals.main.settings.additional_settings')}
@ -160,40 +155,48 @@ function Navbar() {
name="appsEnabled"
text={variables.getMessage('widgets.navbar.apps.title')}
category="navbar"
onChange={setAppsEnabled}
/>
</Action>
</Row>
{showRefreshOptions && (
<Row final={false}>
<Content
title={variables.getMessage(`${NAVBAR_SECTION}.refresh`)}
subtitle={variables.getMessage(
'modals.main.settings.sections.appearance.navbar.refresh_subtitle',
)}
/>
<Action>
<Dropdown name="refreshOption" category="navbar">
<option value="page">
{variables.getMessage(
'modals.main.settings.sections.appearance.navbar.refresh_options.page',
)}
</option>
<option value="background">
{variables.getMessage('modals.main.settings.sections.background.title')}
</option>
<option value="quote">
{variables.getMessage('modals.main.settings.sections.quote.title')}
</option>
<option value="quotebackground">
{variables.getMessage('modals.main.settings.sections.quote.title')} +{' '}
{variables.getMessage('modals.main.settings.sections.background.title')}
</option>
</Dropdown>
</Action>
</Row>
)}
);
};
<Row final={true}>
const RefreshOptions = () => {
return (
<Row final={false} inactive={!showRefreshOptions}>
<Content
title={variables.getMessage(`${NAVBAR_SECTION}.refresh`)}
subtitle={variables.getMessage(
'modals.main.settings.sections.appearance.navbar.refresh_subtitle',
)}
/>
<Action>
<Dropdown name="refreshOption" category="navbar">
<option value="page">
{variables.getMessage(
'modals.main.settings.sections.appearance.navbar.refresh_options.page',
)}
</option>
<option value="background">
{variables.getMessage('modals.main.settings.sections.background.title')}
</option>
<option value="quote">
{variables.getMessage('modals.main.settings.sections.quote.title')}
</option>
<option value="quotebackground">
{variables.getMessage('modals.main.settings.sections.quote.title')} +{' '}
{variables.getMessage('modals.main.settings.sections.background.title')}
</option>
</Dropdown>
</Action>
</Row>
);
};
const AppsOptions = () => {
return (
<Row final={true} inactive={!appsEnabled}>
<Content
title={variables.getMessage('widgets.navbar.apps.title')}
subtitle={variables.getMessage(
@ -207,6 +210,21 @@ function Navbar() {
</button>
</Action>
</Row>
);
};
return (
<>
<Header
title={variables.getMessage(`${NAVBAR_SECTION}.title`)}
setting="navbar"
category="widgets"
zoomSetting="zoomNavbar"
zoomCategory="navbar"
/>
<AdditionalSettings />
<RefreshOptions />
<AppsOptions />
<div className="messagesContainer">
{appsModalInfo.items.map((item, i) => (

6
src/components/widgets/background/PhotoInformation.jsx
View File

@ -278,10 +278,10 @@ function PhotoInformation({ info, url, api }) {
{showExtraInfo || other ? (
<>
<span className="subtitle">
{variables.getMessage('widgets.background.information')}
</span>
<div className="extra-content">
<span className="subtitle">
{variables.getMessage('widgets.background.information')}
</span>
{info.location && info.location !== 'N/A' ? (
<div className="row" title={variables.getMessage('widgets.background.location')}>
<MdLocationOn />

5
src/components/widgets/background/scss/_photoinformation.scss
View File

@ -19,8 +19,9 @@
}
.extra-content {
display: flex;
flex-flow: column;
margin-top: 10px;
display: grid;
grid-template-columns: auto auto;
gap: 10px;
transition: 0.8s;
}