mirror of https://github.com/mue/mue.git
feat: improve settings tabs and sidebar
This commit is contained in:
David Ralph
parent
52745a267f
commit
231966546f
|
|
@ -29,19 +29,6 @@ export default function AppearanceSettings() {
|
|||
<h2>{getMessage('modals.main.settings.sections.appearance.title')}</h2>
|
||||
<Radio name='theme' title={getMessage('modals.main.settings.sections.appearance.theme.title')} options={themeOptions} category='other' />
|
||||
|
||||
<h3>{getMessage('modals.main.settings.sections.appearance.navbar.title')}</h3>
|
||||
<Checkbox name='notesEnabled' text={getMessage('modals.main.settings.sections.appearance.navbar.notes')} category='navbar' />
|
||||
<Dropdown label={getMessage('modals.main.settings.sections.appearance.navbar.refresh')} name='refresh' category='navbar'>
|
||||
<option value='false'>{getMessage('modals.main.settings.sections.appearance.navbar.refresh_options.none')}</option>
|
||||
<option value='background'>{getMessage('modals.main.settings.sections.background.title')}</option>
|
||||
<option value='quote'>{getMessage('modals.main.settings.sections.quote.title')}</option>
|
||||
<option value='quotebackground'>{getMessage('modals.main.settings.sections.quote.title')} + {getMessage('modals.main.settings.sections.background.title')}</option>
|
||||
{/* before it was just a checkbox */}
|
||||
<option value='true'>{getMessage('modals.main.settings.sections.appearance.navbar.refresh_options.page')}</option>
|
||||
</Dropdown>
|
||||
<br/>
|
||||
<Slider title={getMessage('modals.main.settings.sections.appearance.accessibility.widget_zoom')} name='zoomNavbar' min='10' max='400' default='100' display='%' category='navbar' />
|
||||
|
||||
<h3>{getMessage('modals.main.settings.sections.appearance.font.title')}</h3>
|
||||
<Text title={getMessage('modals.main.settings.sections.appearance.font.custom')} name='font' upperCaseFirst={true} category='other' />
|
||||
<br/>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,69 @@
|
|||
import variables from 'modules/variables';
|
||||
import { PureComponent } from 'react';
|
||||
|
||||
import Checkbox from '../Checkbox';
|
||||
import Dropdown from '../Dropdown';
|
||||
import Switch from '../Switch';
|
||||
import Slider from '../Slider';
|
||||
|
||||
export default class DateSettings extends PureComponent {
|
||||
constructor() {
|
||||
super();
|
||||
this.state = {
|
||||
dateType: localStorage.getItem('dateType') || 'long'
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
|
||||
|
||||
let dateSettings;
|
||||
|
||||
const longSettings = (
|
||||
<>
|
||||
<Checkbox name='dayofweek' text={getMessage('modals.main.settings.sections.time.date.day_of_week')} category='date' />
|
||||
<Checkbox name='datenth' text={getMessage('modals.main.settings.sections.time.date.datenth')} category='date' />
|
||||
</>
|
||||
);
|
||||
|
||||
const shortSettings = (
|
||||
<>
|
||||
<br/>
|
||||
<Dropdown label={getMessage('modals.main.settings.sections.time.date.short_format')} name='dateFormat' category='date'>
|
||||
<option value='DMY'>DMY</option>
|
||||
<option value='MDY'>MDY</option>
|
||||
<option value='YMD'>YMD</option>
|
||||
</Dropdown>
|
||||
<br/><br/>
|
||||
<Dropdown label={getMessage('modals.main.settings.sections.time.date.short_separator.title')} name='shortFormat' category='date'>
|
||||
<option value='dash'>{getMessage('modals.main.settings.sections.time.date.short_separator.dash')}</option>
|
||||
<option value='dots'>{getMessage('modals.main.settings.sections.time.date.short_separator.dots')}</option>
|
||||
<option value='gaps'>{getMessage('modals.main.settings.sections.time.date.short_separator.gaps')}</option>
|
||||
<option value='slashes'>{getMessage('modals.main.settings.sections.time.date.short_separator.slashes')}</option>
|
||||
</Dropdown>
|
||||
</>
|
||||
);
|
||||
|
||||
switch (this.state.dateType) {
|
||||
case 'short': dateSettings = shortSettings; break;
|
||||
case 'long': dateSettings = longSettings; break;
|
||||
default: break;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<h2>{getMessage('modals.main.settings.sections.time.date.title')}</h2>
|
||||
<Switch name='date' text={getMessage('modals.main.settings.enabled')} category='date' element='.date'/>
|
||||
<Dropdown label={getMessage('modals.main.settings.sections.time.type')} name='dateType' onChange={(value) => this.setState({ dateType: value })} category='date'>
|
||||
<option value='long'>{getMessage('modals.main.settings.sections.time.date.type.long')}</option>
|
||||
<option value='short'>{getMessage('modals.main.settings.sections.time.date.type.short')}</option>
|
||||
</Dropdown>
|
||||
<br/>
|
||||
<Checkbox name='datezero' text={getMessage('modals.main.settings.sections.time.digital.zero')} category='date'/>
|
||||
<Checkbox name='weeknumber' text={getMessage('modals.main.settings.sections.time.date.week_number')} category='date'/>
|
||||
{dateSettings}
|
||||
<Slider title={getMessage('modals.main.settings.sections.appearance.accessibility.widget_zoom')} name='zoomDate' min='10' max='400' default='100' display='%' category='date'/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
import variables from 'modules/variables';
|
||||
|
||||
import Checkbox from '../Checkbox';
|
||||
import Dropdown from '../Dropdown';
|
||||
import Slider from '../Slider';
|
||||
|
||||
export default function NavbarSettings() {
|
||||
const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
|
||||
|
||||
return (
|
||||
<>
|
||||
<h2>{getMessage('modals.main.settings.sections.appearance.navbar.title')}</h2>
|
||||
<Checkbox name='notesEnabled' text={getMessage('modals.main.settings.sections.appearance.navbar.notes')} category='navbar' />
|
||||
<Checkbox name='view' text={getMessage('modals.main.settings.sections.background.buttons.view')} category='navbar' />
|
||||
<Checkbox name='favouriteEnabled' text={getMessage('modals.main.settings.sections.background.buttons.favourite')} category='navbar' />
|
||||
<Dropdown label={getMessage('modals.main.settings.sections.appearance.navbar.refresh')} name='refresh' category='navbar'>
|
||||
<option value='false'>{getMessage('modals.main.settings.sections.appearance.navbar.refresh_options.none')}</option>
|
||||
<option value='background'>{getMessage('modals.main.settings.sections.background.title')}</option>
|
||||
<option value='quote'>{getMessage('modals.main.settings.sections.quote.title')}</option>
|
||||
<option value='quotebackground'>{getMessage('modals.main.settings.sections.quote.title')} + {getMessage('modals.main.settings.sections.background.title')}</option>
|
||||
{/* before it was just a checkbox */}
|
||||
<option value='true'>{getMessage('modals.main.settings.sections.appearance.navbar.refresh_options.page')}</option>
|
||||
</Dropdown>
|
||||
<br/>
|
||||
<Slider title={getMessage('modals.main.settings.sections.appearance.accessibility.widget_zoom')} name='zoomNavbar' min='10' max='400' default='100' display='%' category='navbar' />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -11,8 +11,7 @@ export default class TimeSettings extends PureComponent {
|
|||
constructor() {
|
||||
super();
|
||||
this.state = {
|
||||
timeType: localStorage.getItem('timeType') || 'digital',
|
||||
dateType: localStorage.getItem('dateType') || 'long'
|
||||
timeType: localStorage.getItem('timeType') || 'digital'
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -59,39 +58,6 @@ export default class TimeSettings extends PureComponent {
|
|||
default: timeSettings = null; break;
|
||||
}
|
||||
|
||||
let dateSettings;
|
||||
|
||||
const longSettings = (
|
||||
<>
|
||||
<Checkbox name='dayofweek' text={getMessage('modals.main.settings.sections.time.date.day_of_week')} category='date' />
|
||||
<Checkbox name='datenth' text={getMessage('modals.main.settings.sections.time.date.datenth')} category='date' />
|
||||
</>
|
||||
);
|
||||
|
||||
const shortSettings = (
|
||||
<>
|
||||
<br/>
|
||||
<Dropdown label={getMessage('modals.main.settings.sections.time.date.short_format')} name='dateFormat' category='date'>
|
||||
<option value='DMY'>DMY</option>
|
||||
<option value='MDY'>MDY</option>
|
||||
<option value='YMD'>YMD</option>
|
||||
</Dropdown>
|
||||
<br/><br/>
|
||||
<Dropdown label={getMessage('modals.main.settings.sections.time.date.short_separator.title')} name='shortFormat' category='date'>
|
||||
<option value='dash'>{getMessage('modals.main.settings.sections.time.date.short_separator.dash')}</option>
|
||||
<option value='dots'>{getMessage('modals.main.settings.sections.time.date.short_separator.dots')}</option>
|
||||
<option value='gaps'>{getMessage('modals.main.settings.sections.time.date.short_separator.gaps')}</option>
|
||||
<option value='slashes'>{getMessage('modals.main.settings.sections.time.date.short_separator.slashes')}</option>
|
||||
</Dropdown>
|
||||
</>
|
||||
);
|
||||
|
||||
switch (this.state.dateType) {
|
||||
case 'short': dateSettings = shortSettings; break;
|
||||
case 'long': dateSettings = longSettings; break;
|
||||
default: break;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<h2>{getMessage('modals.main.settings.sections.time.title')}</h2>
|
||||
|
|
@ -105,18 +71,6 @@ export default class TimeSettings extends PureComponent {
|
|||
{this.state.timeType !== 'analogue' ?
|
||||
<Slider title={getMessage('modals.main.settings.sections.appearance.accessibility.widget_zoom')} name='zoomClock' min='10' max='400' default='100' display='%' category='clock'/>
|
||||
: null}
|
||||
|
||||
<h3>{getMessage('modals.main.settings.sections.time.date.title')}</h3>
|
||||
<Switch name='date' text={getMessage('modals.main.settings.enabled')} category='date' element='.date'/>
|
||||
<Dropdown label={getMessage('modals.main.settings.sections.time.type')} name='dateType' onChange={(value) => this.setState({ dateType: value })} category='date'>
|
||||
<option value='long'>{getMessage('modals.main.settings.sections.time.date.type.long')}</option>
|
||||
<option value='short'>{getMessage('modals.main.settings.sections.time.date.type.short')}</option>
|
||||
</Dropdown>
|
||||
<br/>
|
||||
<Checkbox name='datezero' text={getMessage('modals.main.settings.sections.time.digital.zero')} category='date'/>
|
||||
<Checkbox name='weeknumber' text={getMessage('modals.main.settings.sections.time.date.week_number')} category='date'/>
|
||||
{dateSettings}
|
||||
<Slider title={getMessage('modals.main.settings.sections.appearance.accessibility.widget_zoom')} name='zoomDate' min='10' max='400' default='100' display='%' category='date'/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -245,8 +245,6 @@ export default class BackgroundSettings extends PureComponent {
|
|||
{backgroundSettings}
|
||||
|
||||
<h3>{getMessage('modals.main.settings.sections.background.buttons.title')}</h3>
|
||||
<Checkbox name='view' text={getMessage('modals.main.settings.sections.background.buttons.view')} category='navbar' />
|
||||
<Checkbox name='favouriteEnabled' text={getMessage('modals.main.settings.sections.background.buttons.favourite')} category='navbar' />
|
||||
<Checkbox name='downloadbtn' text={getMessage('modals.main.settings.sections.background.buttons.download')} element='.other' />
|
||||
|
||||
<h3>{getMessage('modals.main.settings.sections.background.effects.title')}</h3>
|
||||
|
|
|
|||
|
|
@ -18,6 +18,8 @@ import Weather from '../settings/sections/Weather';
|
|||
import Stats from '../settings/sections/Stats';
|
||||
import Keybinds from '../settings/sections/Keybinds';
|
||||
import Message from '../settings/sections/Message';
|
||||
import Date from '../settings/sections/Date';
|
||||
import Navbar from '../settings/sections/Navbar';
|
||||
|
||||
export default function Settings() {
|
||||
const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
|
||||
|
|
@ -25,16 +27,18 @@ export default function Settings() {
|
|||
return (
|
||||
<>
|
||||
<Tabs>
|
||||
<div label={getMessage('modals.main.settings.sections.time.title')} name='time'><Time/></div>
|
||||
<div label={getMessage('modals.main.settings.sections.quote.title')} name='quote'><Quote/></div>
|
||||
<div label={getMessage('modals.main.settings.sections.appearance.navbar.title')} name='navbar'><Navbar/></div>
|
||||
<div label={getMessage('modals.main.settings.sections.greeting.title')} name='greeting'><Greeting/></div>
|
||||
<div label={getMessage('modals.main.settings.sections.time.title')} name='time'><Time/></div>
|
||||
<div label={getMessage('modals.main.settings.sections.quicklinks.title')} name='quicklinks'><QuickLinks/></div>
|
||||
<div label={getMessage('modals.main.settings.sections.quote.title')} name='quote'><Quote/></div>
|
||||
<div label={getMessage('modals.main.settings.sections.time.date.title')} name='date'><Date/></div>
|
||||
<div label={getMessage('modals.main.settings.sections.message.title')} name='message'><Message/></div>
|
||||
<div label={getMessage('modals.main.settings.sections.background.title')} name='background'><Background/></div>
|
||||
<div label={getMessage('modals.main.settings.sections.search.title')} name='search'><Search/></div>
|
||||
<div label={getMessage('modals.main.settings.sections.quicklinks.title')} name='quicklinks'><QuickLinks/></div>
|
||||
<div label={getMessage('modals.main.settings.sections.weather.title')} name='weather'><Weather/></div>
|
||||
<div label={getMessage('modals.main.settings.sections.message.title')} name='message'><Message/></div>
|
||||
<div label={getMessage('modals.main.settings.sections.appearance.title')} name='appearance'><Appearance/></div>
|
||||
<div label={getMessage('modals.main.settings.sections.order.title')} name='order'><Order/></div>
|
||||
<div label={getMessage('modals.main.settings.sections.appearance.title')} name='appearance'><Appearance/></div>
|
||||
<div label={getMessage('modals.main.settings.sections.language.title')} name='language'><Language/></div>
|
||||
<div label={getMessage('modals.main.settings.sections.advanced.title')} name='advanced'><Advanced/></div>
|
||||
<div label={getMessage('modals.main.settings.sections.keybinds.title')} name='keybinds'><Keybinds/></div>
|
||||
|
|
|
|||
|
|
@ -23,7 +23,9 @@ import {
|
|||
Code as Sideload,
|
||||
AddCircleOutline as Added,
|
||||
CreateNewFolderOutlined as Create,
|
||||
KeyboardAltOutlined as Keybinds
|
||||
KeyboardAltOutlined as Keybinds,
|
||||
DateRangeOutlined as Date,
|
||||
MenuOutlined as Navbar
|
||||
} from '@mui/icons-material';
|
||||
|
||||
function Tab({ label, currentTab, onClick, navbarTab }) {
|
||||
|
|
@ -47,12 +49,14 @@ function Tab({ label, currentTab, onClick, navbarTab }) {
|
|||
case getMessage('modals.main.navbar.addons'): icon = <Addons/>; break;
|
||||
case getMessage('modals.main.navbar.marketplace'): icon = <Marketplace/>; break;
|
||||
|
||||
case getMessage('modals.main.settings.sections.appearance.navbar.title'): icon = <Navbar/>; break;
|
||||
case getMessage('modals.main.settings.sections.time.title'): icon = <Time/>; break;
|
||||
case getMessage('modals.main.settings.sections.time.date.title'): icon = <Date/>; break;
|
||||
case getMessage('modals.main.settings.sections.greeting.title'): icon = <Greeting/>; break;
|
||||
case getMessage('modals.main.settings.sections.quote.title'): icon = <Quote/>; break;
|
||||
case getMessage('modals.main.settings.sections.background.title'): icon = <Background/>; break;
|
||||
case getMessage('modals.main.settings.sections.search.title'): icon = <Search/>; break;
|
||||
case getMessage('modals.main.settings.sections.weather.title'): icon = <Weather/>; break;
|
||||
case getMessage('modals.main.settings.sections.weather.title'): icon = <Weather/>; divider = true; break;
|
||||
case getMessage('modals.main.settings.sections.quicklinks.title'): icon = <QuickLinks/>; break;
|
||||
case getMessage('modals.main.settings.sections.appearance.title'): icon = <Appearance/>; break;
|
||||
case getMessage('modals.main.settings.sections.order.title'): icon = <Order/>; break;
|
||||
|
|
|
|||
Loading…
Reference in New Issue