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

refactor(settings): Move to new style settings row

Browse Source 
Comprised of:
- Row element
- Content (title and description)
- Action
This commit is contained in:
alexsparkes
2024-02-09 22:22:11 +00:00
parent 48b919ebea
commit 84c1bc8df1
21 changed files with 1254 additions and 1071 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -10,7 +10,7 @@ import AddModal from './quicklinks/AddModal';
import Checkbox from '../Checkbox';
import Dropdown from '../Dropdown';
import SettingsItem from '../SettingsItem';
import { Row, Content, Action } from '../SettingsItem';
import Header from '../Header';
import { getTitleFromUrl, isValidUrl } from 'modules/helpers/settings/modals';
import QuickLink from './quicklinks/QuickLink';
@@ -121,86 +121,92 @@ function Navbar() {
zoomSetting="zoomNavbar"
zoomCategory="navbar"
/>
<SettingsItem
title={variables.getMessage('modals.main.settings.additional_settings')}
subtitle={variables.getMessage(
'modals.main.settings.sections.appearance.navbar.additional',
)}
final={false}
>
<Checkbox
name="navbarHover"
text={variables.getMessage(`${NAVBAR_SECTION}.hover`)}
category="navbar"
/>
<Checkbox
name="notesEnabled"
text={variables.getMessage(`${NAVBAR_SECTION}.notes`)}
category="navbar"
/>
<Checkbox
name="view"
text={variables.getMessage('modals.main.settings.sections.background.buttons.view')}
category="navbar"
/>
<Checkbox
name="refresh"
text={variables.getMessage(`${NAVBAR_SECTION}.refresh`)}
category="navbar"
onChange={setShowRefreshOptions}
/>
<Checkbox
name="todoEnabled"
text={variables.getMessage('widgets.navbar.todo.title')}
category="navbar"
/>
<Checkbox
name="appsEnabled"
text={variables.getMessage('widgets.navbar.apps.title')}
category="navbar"
/>
</SettingsItem>
{showRefreshOptions && (
<SettingsItem
title={variables.getMessage(`${NAVBAR_SECTION}.refresh`)}
<Row final={false}>
<Content
title={variables.getMessage('modals.main.settings.additional_settings')}
subtitle={variables.getMessage(
'modals.main.settings.sections.appearance.navbar.refresh_subtitle',
'modals.main.settings.sections.appearance.navbar.additional',
)}
final={false}
>
<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>
</SettingsItem>
/>
<Action>
<Checkbox
name="navbarHover"
text={variables.getMessage(`${NAVBAR_SECTION}.hover`)}
category="navbar"
/>
<Checkbox
name="notesEnabled"
text={variables.getMessage(`${NAVBAR_SECTION}.notes`)}
category="navbar"
/>
<Checkbox
name="view"
text={variables.getMessage('modals.main.settings.sections.background.buttons.view')}
category="navbar"
/>
<Checkbox
name="refresh"
text={variables.getMessage(`${NAVBAR_SECTION}.refresh`)}
category="navbar"
onChange={setShowRefreshOptions}
/>
<Checkbox
name="todoEnabled"
text={variables.getMessage('widgets.navbar.todo.title')}
category="navbar"
/>
<Checkbox
name="appsEnabled"
text={variables.getMessage('widgets.navbar.apps.title')}
category="navbar"
/>
</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>
)}
<SettingsItem
title={variables.getMessage('widgets.navbar.apps.title')}
subtitle={variables.getMessage(
'modals.main.settings.sections.appearance.navbar.apps_subtitle',
)}
final={true}
>
<button onClick={() => setAppsModalInfo((oldState) => ({ ...oldState, newLink: true }))}>
{variables.getMessage('modals.main.settings.sections.quicklinks.add_link')}
<MdAddLink />
</button>
</SettingsItem>
<Row final={true}>
<Content
title={variables.getMessage('widgets.navbar.apps.title')}
subtitle={variables.getMessage(
'modals.main.settings.sections.appearance.navbar.apps_subtitle',
)}
/>
<Action>
<button onClick={() => setAppsModalInfo((oldState) => ({ ...oldState, newLink: true }))}>
{variables.getMessage('modals.main.settings.sections.quicklinks.add_link')}
<MdAddLink />
</button>
</Action>
</Row>
<div className="messagesContainer">
{appsModalInfo.items.map((item, i) => (