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

feat: custom font ui, fix modal css and date widget stuff

Browse Source 
Co-authored-by: Alex Sparkes <turbomarshmello@gmail.com>
This commit is contained in:
David Ralph
2021-03-18 16:46:50 +00:00
parent b24739cabb
commit 418d658658
10 changed files with 51 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/modals/Main.jsx
View File

@@ -10,7 +10,6 @@ export default function MainModal(props) {
return (
<div className='modal'>
<span className='closeModal' onClick={props.modalClose}>&times;</span>
<h1>.</h1>
<div>
<Navigation navbar={true}>
<div label={props.language.modals.main.navbar.settings}>

7
src/components/modals/settings/sections/About.jsx
View File

@@ -36,6 +36,13 @@ export default class About extends React.PureComponent {
}
componentDidMount() {
if (localStorage.getItem('offlineMode') === 'true') {
this.setState({
update: this.props.language.version.offline_mode
});
return;
}
this.getGitHubData();
}

17
src/components/modals/settings/sections/Appearance.jsx
View File

@@ -9,7 +9,8 @@ export default class AppearanceSettings extends React.PureComponent {
super(...args);
this.state = {
zoom: localStorage.getItem('zoom'),
toast_duration: localStorage.getItem('toastDisplayTime')
toast_duration: localStorage.getItem('toastDisplayTime'),
font: localStorage.getItem('font')
};
}
@@ -29,6 +30,13 @@ export default class AppearanceSettings extends React.PureComponent {
});
break;
case 'font':
localStorage.setItem('font', '');
this.setState({
font: ''
});
break;
default:
toast('resetItem requires a key!');
}
@@ -39,6 +47,7 @@ export default class AppearanceSettings extends React.PureComponent {
componentDidUpdate() {
localStorage.setItem('zoom', this.state.zoom);
localStorage.setItem('toastDisplayTime', this.state.toast_duration);
localStorage.setItem('font', this.state.font);
}
render() {
@@ -49,6 +58,12 @@ export default class AppearanceSettings extends React.PureComponent {
<h2>{appearance.title}</h2>
<Checkbox name='darkTheme' text={appearance.dark_theme} />
<Checkbox name='brightnessTime' text={appearance.night_mode} />
<h3>{appearance.font.title}</h3>
<ul>
<p>{appearance.font.custom} <span className='modalLink' onClick={() => this.resetItem('font')}>{this.props.language.buttons.reset}</span></p>
<input type='text' value={this.state.font} onChange={(e) => this.setState({ font: e.target.value })}></input>
</ul>
<Checkbox name='fontGoogle' text={appearance.font.google} />
<h3>{appearance.accessibility.title}</h3>
<Checkbox name='animations' text={appearance.animations} betaFeature={true} />
<ul>

1
src/components/modals/settings/sections/Language.jsx
View File

@@ -1,4 +1,5 @@
import React from 'react';
import Dropdown from '../Dropdown';
const languages = require('../../../../modules/languages.json');

5
src/components/modals/settings/sections/Time.jsx
View File

@@ -74,10 +74,13 @@ export default class TimeSettings extends React.PureComponent {
<option className='choices' value='MDY'>MDY</option>
<option className='choices' value='YMD'>YMD</option>
</Dropdown>
<br/>
<br/>
<Dropdown label={time.date.short_separator.title} name='shortFormat' id='shortformat' onChange={() => localStorage.setItem('shortFormat', document.getElementById('shortformat').value)}>
<option className='choices' value='default'>{time.date.short_separator.default}</option>
<option className='choices' value='dots'>{time.date.short_separator.dots}</option>
<option className='choices' value='dash'>{time.date.short_separator.dash}</option>
<option className='choices' value='gaps'>{time.date.short_separator.gaps}</option>
<option className='choices' value='slashes'>{time.date.short_separator.slashes}</option>
</Dropdown>
</div>
);

5
src/components/widgets/time/Date.jsx
View File

@@ -39,13 +39,16 @@ export default class DateWidget extends React.PureComponent {
let format;
switch (localStorage.getItem('shortFormat')) {
case 'dots':
format = `${day}.${month}.${year}`;
break;
case 'dash':
format = `${day}-${month}-${year}`;
break;
case 'gaps':
format = `${day} - ${month} - ${year}`;
break;
default:
case 'slashes':
format = `${day}/${month}/${year}`;
}

8
src/modules/helpers/settings.js
View File

@@ -89,18 +89,18 @@ export default class SettingsFunctions {
const font = localStorage.getItem('font');
if (font) {
const data = JSON.parse(font);
const google = localStorage.getItem('fontGoogle');
let url = '';
if (data.google === true) {
url = `@import url('https://fonts.googleapis.com/css2?family=${data.name}&display=swap');`;
if (google === 'true') {
url = `@import url('https://fonts.googleapis.com/css2?family=${font}&display=swap');`;
}
document.head.insertAdjacentHTML('beforeend', `
<style>
${url}
* {
font-family: '${data.name}', 'Lexend Deca' !important;
font-family: '${font}', 'Lexend Deca' !important;
}
</style>`);
}

2
src/scss/modules/_dropdown.scss
View File

@@ -1,5 +1,7 @@
.dropdown {
select {
margin-left: 10px;
background: linear-gradient(180deg, #ffb032 0%, #dd3b67 100%);
height: 34px;
width: 120px;

4
src/scss/modules/modals/_main.scss
View File

@@ -209,7 +209,7 @@ li {
.tab-content {
position: absolute;
left: 25%;
width: 60%;
top: 10%;
h3 {
text-transform: uppercase;
@@ -219,7 +219,7 @@ li {
@media only screen and (max-width: 1920px) {
.tab-content {
position: absolute;
left: 35%;
left: 30%;
}
}

15
src/translations/en-GB.json
View File

@@ -61,9 +61,10 @@
"short_format": "Short Format",
"short_separator": {
"title": "Short Separator",
"default": "Dots (.)",
"dash": "Dash (-)",
"gaps": "Gaps ( )"
"dots": "Dots",
"dash": "Dash",
"gaps": "Gaps",
"slashes": "Slashes"
}
}
},
@@ -109,6 +110,11 @@
"dark_theme": "Dark Theme",
"night_mode": "Night Mode",
"animations": "Animations",
"font": {
"title": "Font",
"custom": "Custom Font",
"google": "Import from Google Fonts"
},
"accessibility": {
"title": "Accessibility",
"zoom": "Zoom",
@@ -140,7 +146,8 @@
"title": "Version",
"checking_update": "Checking for update",
"update_available": "Update available",
"no_update": "No update available"
"no_update": "No update available",
"offline_mode": "Cannot check for update in offline mode"
},
"resources_used": {
"title": "Resources Used",