mirror of https://github.com/mue/mue.git
refactor(navbar): Partition of navbar
This commit is contained in:
parent
9716ddd9af
commit
ad2af657d7
|
@ -25,6 +25,7 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
min-height: 100px;
|
min-height: 100px;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
transition: 0.4s ease-in-out;
|
||||||
|
|
||||||
/* border-top: 1px solid #ccc; */
|
/* border-top: 1px solid #ccc; */
|
||||||
border-bottom: 1px solid #676767;
|
border-bottom: 1px solid #676767;
|
||||||
|
|
|
@ -1,9 +1,6 @@
|
||||||
function Row(props) {
|
function Row(props) {
|
||||||
return (
|
const classes = `${props.final ? 'settingsRow settingsNoBorder' : 'settingsRow'} ${props.inactive ? 'preferencesInactive' : ''}`;
|
||||||
<div className={props.final ? 'settingsRow settingsNoBorder' : 'settingsRow'}>
|
return <div className={classes}>{props.children}</div>;
|
||||||
{props.children}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function Content(props) {
|
function Content(props) {
|
||||||
|
|
|
@ -14,11 +14,13 @@ import { Row, Content, Action } from '../SettingsItem';
|
||||||
import Header from '../Header';
|
import Header from '../Header';
|
||||||
import { getTitleFromUrl, isValidUrl } from 'modules/helpers/settings/modals';
|
import { getTitleFromUrl, isValidUrl } from 'modules/helpers/settings/modals';
|
||||||
import QuickLink from './quicklinks/QuickLink';
|
import QuickLink from './quicklinks/QuickLink';
|
||||||
|
import Apps from '../../../../widgets/navbar/Apps';
|
||||||
|
|
||||||
function Navbar() {
|
function Navbar() {
|
||||||
const [showRefreshOptions, setShowRefreshOptions] = useState(
|
const [showRefreshOptions, setShowRefreshOptions] = useState(
|
||||||
localStorage.getItem('refresh') === 'true',
|
localStorage.getItem('refresh') === 'true',
|
||||||
);
|
);
|
||||||
|
const [appsEnabled, setAppsEnabled] = useState(localStorage.getItem('appsEnabled') === 'true');
|
||||||
const [appsModalInfo, setAppsModalInfo] = useState({
|
const [appsModalInfo, setAppsModalInfo] = useState({
|
||||||
newLink: false,
|
newLink: false,
|
||||||
edit: false,
|
edit: false,
|
||||||
|
@ -112,15 +114,8 @@ function Navbar() {
|
||||||
|
|
||||||
const NAVBAR_SECTION = 'modals.main.settings.sections.appearance.navbar';
|
const NAVBAR_SECTION = 'modals.main.settings.sections.appearance.navbar';
|
||||||
|
|
||||||
return (
|
const AdditionalSettings = () => {
|
||||||
<>
|
return (
|
||||||
<Header
|
|
||||||
title={variables.getMessage(`${NAVBAR_SECTION}.title`)}
|
|
||||||
setting="navbar"
|
|
||||||
category="widgets"
|
|
||||||
zoomSetting="zoomNavbar"
|
|
||||||
zoomCategory="navbar"
|
|
||||||
/>
|
|
||||||
<Row final={false}>
|
<Row final={false}>
|
||||||
<Content
|
<Content
|
||||||
title={variables.getMessage('modals.main.settings.additional_settings')}
|
title={variables.getMessage('modals.main.settings.additional_settings')}
|
||||||
|
@ -160,40 +155,48 @@ function Navbar() {
|
||||||
name="appsEnabled"
|
name="appsEnabled"
|
||||||
text={variables.getMessage('widgets.navbar.apps.title')}
|
text={variables.getMessage('widgets.navbar.apps.title')}
|
||||||
category="navbar"
|
category="navbar"
|
||||||
|
onChange={setAppsEnabled}
|
||||||
/>
|
/>
|
||||||
</Action>
|
</Action>
|
||||||
</Row>
|
</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
|
<Content
|
||||||
title={variables.getMessage('widgets.navbar.apps.title')}
|
title={variables.getMessage('widgets.navbar.apps.title')}
|
||||||
subtitle={variables.getMessage(
|
subtitle={variables.getMessage(
|
||||||
|
@ -207,6 +210,21 @@ function Navbar() {
|
||||||
</button>
|
</button>
|
||||||
</Action>
|
</Action>
|
||||||
</Row>
|
</Row>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Header
|
||||||
|
title={variables.getMessage(`${NAVBAR_SECTION}.title`)}
|
||||||
|
setting="navbar"
|
||||||
|
category="widgets"
|
||||||
|
zoomSetting="zoomNavbar"
|
||||||
|
zoomCategory="navbar"
|
||||||
|
/>
|
||||||
|
<AdditionalSettings />
|
||||||
|
<RefreshOptions />
|
||||||
|
<AppsOptions />
|
||||||
|
|
||||||
<div className="messagesContainer">
|
<div className="messagesContainer">
|
||||||
{appsModalInfo.items.map((item, i) => (
|
{appsModalInfo.items.map((item, i) => (
|
||||||
|
|
|
@ -278,10 +278,10 @@ function PhotoInformation({ info, url, api }) {
|
||||||
|
|
||||||
{showExtraInfo || other ? (
|
{showExtraInfo || other ? (
|
||||||
<>
|
<>
|
||||||
|
<span className="subtitle">
|
||||||
|
{variables.getMessage('widgets.background.information')}
|
||||||
|
</span>
|
||||||
<div className="extra-content">
|
<div className="extra-content">
|
||||||
<span className="subtitle">
|
|
||||||
{variables.getMessage('widgets.background.information')}
|
|
||||||
</span>
|
|
||||||
{info.location && info.location !== 'N/A' ? (
|
{info.location && info.location !== 'N/A' ? (
|
||||||
<div className="row" title={variables.getMessage('widgets.background.location')}>
|
<div className="row" title={variables.getMessage('widgets.background.location')}>
|
||||||
<MdLocationOn />
|
<MdLocationOn />
|
||||||
|
|
|
@ -19,8 +19,9 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.extra-content {
|
.extra-content {
|
||||||
display: flex;
|
margin-top: 10px;
|
||||||
flex-flow: column;
|
display: grid;
|
||||||
|
grid-template-columns: auto auto;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
transition: 0.8s;
|
transition: 0.8s;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue