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

feat: new font settings and week number on date widget

Browse Source
This commit is contained in:
David Ralph
2021-03-19 17:44:27 +00:00
parent 9ea6c18cd2
commit 8f74095a85
9 changed files with 71 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/modals/settings/sections/Advanced.jsx
View File

@@ -13,11 +13,6 @@ export default class AdvancedSettings extends React.PureComponent {
toast(this.props.language.toasts.reset);
}
componentDidMount() {
document.getElementById('customcss').value = localStorage.getItem('customcss');
document.getElementById('customjs').value = localStorage.getItem('customjs');
}
settingsImport(e) {
const content = JSON.parse(e.target.result);
@@ -28,7 +23,12 @@ export default class AdvancedSettings extends React.PureComponent {
toast(this.props.language.toasts.imported);
}
componentWillUnmount() {
componentDidMount() {
document.getElementById('customcss').value = localStorage.getItem('customcss');
document.getElementById('customjs').value = localStorage.getItem('customjs');
}
componentDidUpdate() {
localStorage.setItem('customcss', document.getElementById('customcss').value);
localStorage.setItem('customjs', document.getElementById('customjs').value);
}

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

@@ -1,6 +1,7 @@
import React from 'react';
import Checkbox from '../Checkbox';
import Dropdown from '../Dropdown';
import { toast } from 'react-toastify';
@@ -50,6 +51,10 @@ export default class AppearanceSettings extends React.PureComponent {
localStorage.setItem('font', this.state.font.charAt(0).toUpperCase() + this.state.font.slice(1));
}
componentDidMount() {
document.getElementById('fontWeight').value = localStorage.getItem('fontWeight') || 400;
}
render() {
const { appearance } = this.props.language.sections;
@@ -68,6 +73,21 @@ export default class AppearanceSettings extends React.PureComponent {
<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>
<Dropdown
label='Font Weight'
name='fontweight'
id='fontWeight'
onChange={() => localStorage.setItem('fontWeight', document.getElementById('fontWeight').value)}>
{/* names are taken from https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight */}
<option className='choices' value='100'>Thin</option>
<option className='choices' value='200'>Extra-Light</option>
<option className='choices' value='300'>Light</option>
<option className='choices' value='400'>Normal</option>
<option className='choices' value='500'>Medium</option>
<option className='choices' value='600'>Semi-Bold</option>
<option className='choices' value='700'>Bold</option>
<option className='choices' value='800'>Extra-Bold</option>
</Dropdown>
<Checkbox name='fontGoogle' text={appearance.font.google} />
<h3>{appearance.accessibility.title}</h3>

9
src/components/modals/settings/sections/Background.jsx
View File

@@ -37,7 +37,10 @@ export default class BackgroundSettings extends React.PureComponent {
break;
case 'customBackground':
document.getElementById('customBackground').value = '';
localStorage.setItem('customBackground', '');
this.setState({
customBackground: ''
});
break;
case 'blur':
@@ -225,6 +228,7 @@ export default class BackgroundSettings extends React.PureComponent {
<Checkbox name='view' text={background.buttons.view} />
<Checkbox name='favouriteEnabled' text={background.buttons.favourite} />
</ul>
<h3>{background.effects.title}</h3>
<ul>
<p>{background.effects.blur} ({this.state.blur}%) <span className='modalLink' onClick={() => this.resetItem('blur')}>{this.props.language.buttons.reset}</span></p>
@@ -234,13 +238,14 @@ export default class BackgroundSettings extends React.PureComponent {
<p>{background.effects.brightness} ({this.state.brightness}%) <span className='modalLink' onClick={() => this.resetItem('brightness')}>{this.props.language.buttons.reset}</span></p>
<input className='range' type='range' min='0' max='100' value={this.state.brightness} onChange={(event) => this.setState({ brightness: event.target.value })} />
</ul>
<h3>{background.source.title}</h3>
<ul>
<Dropdown
label={background.source.api}
name='backgroundapi'
id='backgroundAPI'
onChange={() => localStorage.setItem('backgroundAPI', document.getElementById('backgroundAPI').value)} >
onChange={() => localStorage.setItem('backgroundAPI', document.getElementById('backgroundAPI').value)}>
<option className='choices' value='mue'>Mue</option>
<option className='choices' value='unsplash'>Unsplash</option>
</Dropdown>

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

@@ -72,6 +72,7 @@ export default class TimeSettings extends React.PureComponent {
<h3>{time.date.title}</h3>
<Checkbox name='date' text={this.props.language.enabled} />
<Checkbox name='dayofweek' text={time.date.day_of_week} />
<Checkbox name='weeknumber' text={time.date.week_number} />
<Checkbox name='datenth' text={time.date.datenth} />
<Checkbox name='short' text={time.date.short_date} betaFeature={true} />
<Dropdown label={time.date.short_format} name='dateFormat' id='dateformat' onChange={() => localStorage.setItem('dateFormat', document.getElementById('dateformat').value)}>

1
src/components/widgets/background/scss/index.scss
View File

@@ -62,4 +62,3 @@
transform: scale(1.1);
}
}

5
src/components/widgets/search/search.scss
View File

@@ -29,6 +29,11 @@
font-size: 30px;
filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.3));
cursor: pointer;
transition: all 0.5s ease 0s;
&:hover {
transform: scale(1.1);
}
}
}

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

@@ -71,11 +71,28 @@ export default class DateWidget extends React.PureComponent {
}
}
// based on https://gist.github.com/IamSilviu/5899269#gistcomment-2773524
getWeekNumber() {
const today = new Date();
const firstDayOfYear = new Date(today.getFullYear(), 0, 1);
const pastDaysOfYear = (today - firstDayOfYear) / 86400000;
return Math.ceil((pastDaysOfYear + firstDayOfYear.getDay() + 1) / 7);
}
componentDidMount() {
this.getDate();
}
render() {
return <span style={{ 'textTransform': 'capitalize', 'fontWeight': 'bold' }}>{this.state.date}</span>
return (
<div>
<span style={{ 'textTransform': 'capitalize', 'fontWeight': 'bold' }}>{this.state.date}</span>
{(localStorage.getItem('weeknumber') === 'true') ?
<span style={{ 'textTransform': 'capitalize', 'fontWeight': 'bold' }}><br/>
{'Week ' + this.getWeekNumber()}
</span>
:null}
</div>
)
}
}

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

@@ -91,16 +91,28 @@ export default class SettingsFunctions {
if (font) {
const google = localStorage.getItem('fontGoogle');
let url = '';
let url, fontweight, fontstyle = '';
if (google === 'true') {
url = `@import url('https://fonts.googleapis.com/css2?family=${font}&display=swap');`;
}
const fontWeight = localStorage.getItem('fontWeight');
if (fontWeight) {
fontweight = `font-weight: ${fontWeight};`;
}
const fontStyle = localStorage.getItem('fontStyle');
if (fontStyle) {
fontstyle = `font-style: ${fontStyle};`;
}
document.head.insertAdjacentHTML('beforeend', `
<style>
${url}
* {
font-family: '${font}', 'Lexend Deca' !important;
${fontweight}
${fontstyle}
}
</style>`);
}

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

@@ -58,6 +58,7 @@
"date": {
"title": "Date",
"day_of_week": "Day of week",
"week_number": "Week Number",
"datenth": "Date nth",
"short_date": "Short Date",
"short_format": "Short Format",