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

feat: better settings for time, implement auto theme feature, add dark theme css for date picker etc

Browse Source
This commit is contained in:
David Ralph
2021-03-21 22:21:37 +00:00
parent 1b40f112af
commit 177e4fdcdc
12 changed files with 87 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/modals/main/scss/index.scss
View File

@@ -5,6 +5,8 @@
@import 'settings/buttons';
@import 'settings/dropdown';
@import './settings/react-color-picker-gradient-picker-custom-styles.scss';
.Modal {
color: var(--modal-text);
background-color: var(--background);

14
src/components/modals/main/scss/settings/_main.scss
View File

@@ -26,10 +26,10 @@ input {
}
}
.DayPickerInput {
.DayPickerInput, .input-container {
input {
width: 200px;
color: var(--modal-text);
color: var(--modal-text) ! important;
background: var(--sidebar);
border: none;
padding: 10px 10px;
@@ -196,3 +196,13 @@ input[type=color]::-moz-color-swatch {
text-transform: uppercase;
font-weight: bold;
}
.DayPicker-Day--selected {
background-color: #ff4757 !important;
color: white;
}
.DayPicker-Months, .DayPickerInput-Overlay {
background-color: var(--background) !important;
color: var(--modal-text) !important;
}

13
src/scss/react-color-picker-gradient-picker-custom-styles.scss → src/components/modals/main/scss/settings/react-color-picker-gradient-picker-custom-styles.scss
View File

@@ -16,3 +16,16 @@ div.color-preview-area > div > div:nth-child(5) {
.input-field .label {
color: inherit;
}
// other styling for themes support etc
.ui-color-picker {
background-color: var(--background) !important;
}
.gradient-degrees {
border: 3px solid var(--modal-text) !important;
}
.gradient-degree-pointer {
background-color: var(--modal-text) !important;
}

2
src/components/modals/main/settings/sections/Appearance.jsx
View File

@@ -6,7 +6,7 @@ import Radio from '../Radio';
import Slider from '../Slider';
import Text from '../Text';
export default function AppearanceSettings(props) {
export default function AppearanceSettings() {
const { appearance } = window.language.modals.main.settings.sections;
let themeOptions = [

2
src/components/modals/main/settings/sections/Background.jsx
View File

@@ -4,7 +4,6 @@ import Checkbox from '../Checkbox';
import Dropdown from '../Dropdown';
import FileUpload from '../FileUpload';
import Slider from '../Slider';
import Text from '../Text';
import Switch from '../Switch';
import { ColorPicker } from 'react-color-gradient-picker';
@@ -14,7 +13,6 @@ import rgbToHex from '../../../../../modules/helpers/background/rgbToHex';
import { toast } from 'react-toastify';
import 'react-color-gradient-picker/dist/index.css';
import '../../../../../scss/react-color-picker-gradient-picker-custom-styles.scss';
export default class BackgroundSettings extends React.PureComponent {
DefaultGradientSettings = { 'angle': '180', 'gradient': [{ 'colour': window.language.modals.main.settings.sections.background.source.disabled, 'stop': 0 }], 'type': 'linear' };

2
src/components/modals/main/settings/sections/Greeting.jsx
View File

@@ -36,7 +36,7 @@ export default class GreetingSettings extends React.PureComponent {
<Text title={greeting.name} name='greetingName'/>
<h3>{greeting.birthday}</h3>
<Checkbox name='birthdayenabled' text={this.language.enabled} />
<Switch name='birthdayenabled' text={this.language.enabled} />
<Checkbox name='birthdayage' text='Birthday Age'/>
<ul>
<p>{greeting.birthday_date}</p>

2
src/components/modals/main/settings/sections/Quote.jsx
View File

@@ -4,7 +4,7 @@ import Checkbox from '../Checkbox';
import Text from '../Text';
import Switch from '../Switch';
export default function QuoteSettings(props) {
export default function QuoteSettings() {
const { quote } = window.language.modals.main.settings.sections;
return (

3
src/components/modals/main/settings/sections/Search.jsx
View File

@@ -4,6 +4,7 @@ import { toast } from 'react-toastify';
import Dropdown from '../Dropdown';
import Checkbox from '../Checkbox';
import Switch from '../Switch';
const searchEngines = require('../../../../widgets/search/search_engines.json');
@@ -59,7 +60,7 @@ export default class SearchSettings extends React.PureComponent {
return (
<div className='section'>
<h2>{search.title}</h2>
<Checkbox name='searchBar' text={language.enabled} />
<Switch name='searchBar' text={language.enabled} />
<Checkbox name='voiceSearch' text={search.voice_search} />
<ul>
<Dropdown label={search.search_engine} name='searchEngine' onChange={(value) => this.setSearchEngine(value)}>

64
src/components/modals/main/settings/sections/Time.jsx
View File

@@ -8,17 +8,12 @@ export default class TimeSettings extends React.PureComponent {
constructor(...args) {
super(...args);
this.state = {
timeType: localStorage.getItem('timeType') || 'digital'
timeType: localStorage.getItem('timeType') || 'digital',
dateType: localStorage.getItem('dateType') || 'long'
};
this.language = window.language.modals.main.settings;
}
changeType(value) {
this.setState({
timeType: value
});
}
render() {
const { time } = this.language.sections;
@@ -51,36 +46,57 @@ export default class TimeSettings extends React.PureComponent {
default: timeSettings = null; break;
}
return (
<div>
<h2>{time.title}</h2>
<Switch name='time' text={this.language.enabled} />
<Dropdown label='Type' name='timeType' onChange={(value) => this.changeType(value)}>
<option className='choices' value='digital'>{time.digital.title}</option>
<option className='choices' value='analogue'>{time.analogue.title}</option>
<option className='choices' value='percentageComplete'>{time.percentage_complete}</option>
</Dropdown>
let dateSettings;
{timeSettings}
<h3>{time.date.title}</h3>
<Switch name='date' text={this.language.enabled} />
const longSettings = (
<React.Fragment>
<Checkbox name='dayofweek' text={time.date.day_of_week} />
<Checkbox name='datenth' text={time.date.datenth} />
<Checkbox name='short' text={time.date.short_date} betaFeature={true} />
</React.Fragment>
);
const shortSettings = (
<React.Fragment>
<br/>
<Dropdown label={time.date.short_format} name='dateFormat'>
<option className='choices' value='DMY'>DMY</option>
<option className='choices' value='MDY'>MDY</option>
<option className='choices' value='YMD'>YMD</option>
</Dropdown>
<br/>
<br/>
<br/><br/>
<Dropdown label={time.date.short_separator.title} name='shortFormat'>
<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>
</Dropdown>
</React.Fragment>
);
switch (this.state.dateType) {
case 'short': dateSettings = shortSettings; break;
case 'long': dateSettings = longSettings; break;
}
return (
<div>
<h2>{time.title}</h2>
<Switch name='time' text={this.language.enabled} />
<Dropdown label='Type' name='timeType' onChange={(value) => this.setState({ timeType: value })}>
<option className='choices' value='digital'>{time.digital.title}</option>
<option className='choices' value='analogue'>{time.analogue.title}</option>
<option className='choices' value='percentageComplete'>{time.percentage_complete}</option>
</Dropdown>
{timeSettings}
<h3>{time.date.title}</h3>
<Switch name='date' text={this.language.enabled} />
<Dropdown label='Type' name='dateType' onChange={(value) => this.setState({ dateType: value })}>
<option className='choices' value='long'>Long</option>
<option className='choices' value='short'>Short</option>
</Dropdown>
<br/>
{dateSettings}
</div>
);
}

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

@@ -12,9 +12,9 @@ export default class DateWidget extends React.PureComponent {
getDate() {
const date = new Date();
const short = localStorage.getItem('short');
const type = localStorage.getItem('type');
if (short === 'true') {
if (type === 'short') {
const dateDay = date.getDate();
const dateMonth = date.getMonth() + 1;
const dateYear = date.getFullYear();
@@ -56,7 +56,7 @@ export default class DateWidget extends React.PureComponent {
date: format
});
} else {
// Full date
// Long date
const lang = localStorage.getItem('language');
const nth = (localStorage.getItem('datenth') === 'true') ? dtf.nth(date.getDate()) : date.getDate();

4
src/modules/default_settings.json
View File

@@ -130,5 +130,9 @@
{
"name": "order",
"value": "[\"greeting\", \"time\", \"quote\", \"date\"]"
},
{
"name": "theme",
"value": "auto"
}
]

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

@@ -24,6 +24,7 @@ export default class SettingsFunctions {
for (const key of Object.keys(localStorage)) {
settings[key] = localStorage.getItem(key);
}
saveFile(settings, 'mue-settings.json');
}
@@ -48,13 +49,6 @@ export default class SettingsFunctions {
localStorage.clear();
defaultSettings.forEach((element) => localStorage.setItem(element.name, element.value));
// Set theme depending on user preferred
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
localStorage.setItem('theme', 'dark');
} else {
localStorage.setItem('theme', 'light');
}
// Languages
const languageCodes = languages.map(({ code }) => code);
const browserLanguage = (navigator.languages && navigator.languages[0]) || navigator.language;
@@ -126,6 +120,11 @@ export default class SettingsFunctions {
const theme = localStorage.getItem('theme');
if (theme === 'dark') {
document.body.classList.add('dark');
} else if (theme === 'auto') {
// Set theme depending on user preferred
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.body.classList.add('dark');
}
}
const tabName = localStorage.getItem('tabName');
@@ -147,7 +146,7 @@ export default class SettingsFunctions {
██ Copyright 2018-2021 Mue ██
██ GitHub: https://github.com/mue/mue ██
██ ██
██ Thank you for using! ██
██ Thank you for using Mue! ██
██ Feedback: hello@muetab.com ██
█████████████████████████████████████████████████████████████
`);