mirror of https://github.com/mue/mue.git
feat: better digital clock settings and greeting now changes properly
This commit is contained in:
David Ralph
parent
33a002003e
commit
f3eb2c4cdb
12
README.md
12
README.md
|
|
@ -18,8 +18,9 @@ Mue is a fast, open and free-to-use browser extension that gives a new, fresh an
|
|||
* [Installation](#installation)
|
||||
* [Chrome](#chrome)
|
||||
* [Firefox](#firefox)
|
||||
* [Chromium](#edge-chromium)
|
||||
* [Opera/Other](#operaother)
|
||||
* [Edge Chromium](#edge-chromium)
|
||||
* [Naver](#naver)
|
||||
* [Other](#other)
|
||||
* [Contributing](#development)
|
||||
* [Requirements](#requirements)
|
||||
* [Starting](#starting)
|
||||
|
|
@ -60,7 +61,12 @@ Please see our [roadmap](https://github.com/mue/mue/projects)
|
|||
### Edge (Chromium)
|
||||
~~[Microsoft Edge Addons](https://microsoftedge.microsoft.com/addons/detail/aepnglgjfokepefimhbnibfjekidhmja)~~ Currently outdated, please use the Chrome Web Store version
|
||||
|
||||
### Opera/Other
|
||||
### Naver
|
||||
[Whale Store](https://store.whale.naver.com/detail/ecllekeilcmicbfkkiknfdddbogibbnc)
|
||||
|
||||
### Other
|
||||
Please note that we have dropped support for Opera as of Mue 5.0
|
||||
|
||||
[GitHub Releases](https://github.com/mue/mue/releases)
|
||||
|
||||
### Development
|
||||
|
|
|
|||
|
|
@ -1,14 +0,0 @@
|
|||
/* eslint-disable no-undef */
|
||||
//Source https://forums.opera.com/topic/25046/how-to-disable-completely-the-speed-dial/14
|
||||
|
||||
chrome.tabs.onCreated.addListener((tab) => {
|
||||
if (tab.status === 'complete' && tab.url === 'chrome://startpage/') chrome.tabs.update(tab.id, {
|
||||
url: chrome.extension.getURL('index.html')
|
||||
});
|
||||
});
|
||||
|
||||
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
|
||||
if (changeInfo.status === 'complete' && tab.url === 'chrome://startpage/') chrome.tabs.update(tabId, {
|
||||
url: chrome.extension.getURL('index.html')
|
||||
});
|
||||
});
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
{
|
||||
"manifest_version": 2,
|
||||
"name": "Mue",
|
||||
"description": "Fast, open and free-to-use new tab page for most modern browsers.",
|
||||
"version": "5.0.0",
|
||||
"browser_action": {
|
||||
"default_icon": "icons/128x128.png"
|
||||
},
|
||||
"background": {
|
||||
"scripts": [
|
||||
"./background-opera.js"
|
||||
]
|
||||
},
|
||||
"permissions": [
|
||||
"tabs"
|
||||
]
|
||||
}
|
||||
|
|
@ -48,8 +48,7 @@
|
|||
"start": "webpack serve",
|
||||
"build": "webpack --mode=production",
|
||||
"chrome": "cp manifest/chrome.json build/manifest.json",
|
||||
"firefox": "cp manifest/firefox.json build/manifest.json",
|
||||
"opera": "cp manifest/opera.json build/manifest.json && cp manifest/background-opera.js build/"
|
||||
"firefox": "cp manifest/firefox.json build/manifest.json"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": "react-app"
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ import Text from '../Text';
|
|||
export default function AppearanceSettings() {
|
||||
const { appearance } = window.language.modals.main.settings.sections;
|
||||
|
||||
let themeOptions = [
|
||||
const themeOptions = [
|
||||
{
|
||||
'name': 'Auto',
|
||||
'value': 'auto'
|
||||
|
|
@ -17,11 +17,12 @@ export default function AppearanceSettings() {
|
|||
{
|
||||
'name': 'Light',
|
||||
'value': 'light'
|
||||
}, {
|
||||
},
|
||||
{
|
||||
'name': 'Dark',
|
||||
'value': 'dark'
|
||||
}
|
||||
]
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import React from 'react';
|
|||
import Checkbox from '../Checkbox';
|
||||
import Dropdown from '../Dropdown';
|
||||
import Switch from '../Switch';
|
||||
import Radio from '../Radio';
|
||||
|
||||
export default class TimeSettings extends React.PureComponent {
|
||||
constructor(...args) {
|
||||
|
|
@ -19,12 +20,23 @@ export default class TimeSettings extends React.PureComponent {
|
|||
|
||||
let timeSettings;
|
||||
|
||||
const digitalOptions = [
|
||||
{
|
||||
'name': '24 hour',
|
||||
'value': 'twentyfourhour'
|
||||
},
|
||||
{
|
||||
'name': '12 hour',
|
||||
'value': 'twelvehour'
|
||||
}
|
||||
];
|
||||
|
||||
const digitalSettings = (
|
||||
<>
|
||||
<h3>{time.digital.title}</h3>
|
||||
<Radio title='Format' name='timeformat' options={digitalOptions} />
|
||||
<br/>
|
||||
<Checkbox name='seconds' text={time.digital.seconds} />
|
||||
<Checkbox name='24hour' text={time.digital.twentyfourhour} />
|
||||
<Checkbox name='ampm' text={time.digital.ampm} />
|
||||
<Checkbox name='zero' text={time.digital.zero} />
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ export default class Greeting extends React.PureComponent {
|
|||
this.state = {
|
||||
greeting: ''
|
||||
};
|
||||
this.timer = undefined;
|
||||
this.language = window.language.widgets.greeting;
|
||||
}
|
||||
|
||||
|
|
@ -42,61 +43,65 @@ export default class Greeting extends React.PureComponent {
|
|||
return Math.abs(birthday.getUTCFullYear() - 1970);
|
||||
}
|
||||
|
||||
getGreeting() {
|
||||
const now = new Date();
|
||||
const hour = now.getHours();
|
||||
getGreeting(time = (60000 - Date.now() % 60000)) {
|
||||
this.timer = setTimeout(() => {
|
||||
const now = new Date();
|
||||
const hour = now.getHours();
|
||||
|
||||
// Set the default greeting string to "Good evening"
|
||||
let message = this.language.evening;
|
||||
// If it's before 12am, set the greeting string to "Good morning"
|
||||
if (hour < 12) {
|
||||
message = this.language.morning;
|
||||
// If it's before 6pm, set the greeting string to "Good afternoon"
|
||||
} else if (hour < 18) {
|
||||
message = this.language.afternoon;
|
||||
}
|
||||
|
||||
// Events
|
||||
message = this.doEvents(now, message);
|
||||
|
||||
const custom = localStorage.getItem('defaultGreetingMessage');
|
||||
if (custom === 'false') {
|
||||
message = '';
|
||||
}
|
||||
|
||||
// Name
|
||||
let name = '';
|
||||
const data = localStorage.getItem('greetingName');
|
||||
|
||||
if (typeof data === 'string') {
|
||||
if (data.replace(/\s/g, '').length > 0) {
|
||||
name = `, ${data.trim()}`;
|
||||
// Set the default greeting string to "Good evening"
|
||||
let message = this.language.evening;
|
||||
// If it's before 12am, set the greeting string to "Good morning"
|
||||
if (hour < 12) {
|
||||
message = this.language.morning;
|
||||
// If it's before 6pm, set the greeting string to "Good afternoon"
|
||||
} else if (hour < 18) {
|
||||
message = this.language.afternoon;
|
||||
}
|
||||
}
|
||||
|
||||
if (custom === 'false') {
|
||||
name = name.replace(',', '');
|
||||
}
|
||||
// Events
|
||||
message = this.doEvents(now, message);
|
||||
|
||||
// Birthday
|
||||
const birth = new Date(localStorage.getItem('birthday'));
|
||||
if (localStorage.getItem('birthdayenabled') === 'true' && birth.getDate() === now.getDate() && birth.getMonth() === now.getMonth()) {
|
||||
if (localStorage.getItem('birthdayage')) {
|
||||
const text = this.language.birthday.split(' ');
|
||||
message = `${text[0]} ${dtf.nth(this.calculateAge(birth))} ${text[1]}`;
|
||||
} else {
|
||||
message = this.language.birthday;
|
||||
const custom = localStorage.getItem('defaultGreetingMessage');
|
||||
if (custom === 'false') {
|
||||
message = '';
|
||||
}
|
||||
}
|
||||
|
||||
// Set the state to the greeting string
|
||||
this.setState({
|
||||
greeting: `${message}${name}`
|
||||
});
|
||||
// Name
|
||||
let name = '';
|
||||
const data = localStorage.getItem('greetingName');
|
||||
|
||||
if (typeof data === 'string') {
|
||||
if (data.replace(/\s/g, '').length > 0) {
|
||||
name = `, ${data.trim()}`;
|
||||
}
|
||||
}
|
||||
|
||||
if (custom === 'false') {
|
||||
name = name.replace(',', '');
|
||||
}
|
||||
|
||||
// Birthday
|
||||
const birth = new Date(localStorage.getItem('birthday'));
|
||||
if (localStorage.getItem('birthdayenabled') === 'true' && birth.getDate() === now.getDate() && birth.getMonth() === now.getMonth()) {
|
||||
if (localStorage.getItem('birthdayage')) {
|
||||
const text = this.language.birthday.split(' ');
|
||||
message = `${text[0]} ${dtf.nth(this.calculateAge(birth))} ${text[1]}`;
|
||||
} else {
|
||||
message = this.language.birthday;
|
||||
}
|
||||
}
|
||||
|
||||
// Set the state to the greeting string
|
||||
this.setState({
|
||||
greeting: `${message}${name}`
|
||||
});
|
||||
|
||||
this.getGreeting();
|
||||
}, time);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.getGreeting();
|
||||
this.getGreeting(0);
|
||||
}
|
||||
|
||||
render() {
|
||||
|
|
|
|||
|
|
@ -21,69 +21,63 @@ export default class Clock extends React.PureComponent {
|
|||
|
||||
const timeType = localStorage.getItem('timeType');
|
||||
|
||||
// Percentage
|
||||
if (timeType === 'percentageComplete') {
|
||||
return this.setState({
|
||||
time: (now.getHours() / 24).toFixed(2).replace('0.', '') + '%'
|
||||
});
|
||||
}
|
||||
|
||||
// Analog clock
|
||||
if (timeType === 'analogue') {
|
||||
// load analog clock css
|
||||
require('react-clock/dist/Clock.css');
|
||||
|
||||
this.setState({
|
||||
time: now
|
||||
});
|
||||
} else {
|
||||
// Default clock
|
||||
let time, sec = '';
|
||||
const zero = localStorage.getItem('zero');
|
||||
|
||||
if (localStorage.getItem('seconds') === 'true') {
|
||||
if (zero === 'false') {
|
||||
sec = ':' + now.getSeconds();
|
||||
} else {
|
||||
sec = `:${('00' + now.getSeconds()).slice(-2)}`;
|
||||
}
|
||||
}
|
||||
|
||||
if (localStorage.getItem('24hour') === 'true') {
|
||||
if (zero === 'false') {
|
||||
time = `${now.getHours()}:${now.getMinutes()}${sec}`;
|
||||
} else {
|
||||
time = `${('00' + now.getHours()).slice(-2)}:${('00' + now.getMinutes()).slice(-2)}${sec}`;
|
||||
}
|
||||
switch (timeType) {
|
||||
case 'percentageComplete':
|
||||
this.setState({
|
||||
time: (now.getHours() / 24).toFixed(2).replace('0.', '') + '%'
|
||||
});
|
||||
break;
|
||||
case 'analogue':
|
||||
// load analog clock css
|
||||
require('react-clock/dist/Clock.css');
|
||||
|
||||
this.setState({
|
||||
time: time
|
||||
time: now
|
||||
});
|
||||
} else {
|
||||
// 12 hour support
|
||||
let hours = now.getHours();
|
||||
break;
|
||||
default:
|
||||
// Default clock
|
||||
let time, sec = '';
|
||||
const zero = localStorage.getItem('zero');
|
||||
|
||||
if (hours > 12) {
|
||||
hours -= 12;
|
||||
if (localStorage.getItem('seconds') === 'true') {
|
||||
if (zero === 'false') {
|
||||
sec = ':' + now.getSeconds();
|
||||
} else {
|
||||
sec = `:${('00' + now.getSeconds()).slice(-2)}`;
|
||||
}
|
||||
}
|
||||
|
||||
// Toggle AM/PM
|
||||
let ampm = now.getHours() > 11 ? 'PM' : 'AM';
|
||||
if (localStorage.getItem('ampm') === 'false') {
|
||||
ampm = '';
|
||||
}
|
||||
if (localStorage.getItem('timeformat') === 'twentyfourhour') {
|
||||
if (zero === 'false') {
|
||||
time = `${now.getHours()}:${('00' + now.getMinutes()).slice(-2)}${sec}`;
|
||||
} else {
|
||||
time = `${('00' + now.getHours()).slice(-2)}:${('00' + now.getMinutes()).slice(-2)}${sec}`;
|
||||
}
|
||||
|
||||
if (zero === 'false') {
|
||||
time = `${hours}:${now.getMinutes()}${sec}`;
|
||||
this.setState({
|
||||
time: time
|
||||
});
|
||||
} else {
|
||||
time = `${('00' + hours).slice(-2)}:${('00' + now.getMinutes()).slice(-2)}${sec}`;
|
||||
}
|
||||
// 12 hour
|
||||
let hours = now.getHours();
|
||||
|
||||
this.setState({
|
||||
time: time,
|
||||
ampm: ampm
|
||||
});
|
||||
}
|
||||
if (hours > 12) {
|
||||
hours -= 12;
|
||||
}
|
||||
|
||||
if (zero === 'false') {
|
||||
time = `${hours}:${now.getMinutes()}${sec}`;
|
||||
} else {
|
||||
time = `${('00' + hours).slice(-2)}:${('00' + now.getMinutes()).slice(-2)}${sec}`;
|
||||
}
|
||||
|
||||
this.setState({
|
||||
time: time,
|
||||
ampm: now.getHours() > 11 ? 'PM' : 'AM'
|
||||
});
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
this.startTime();
|
||||
|
|
|
|||
Loading…
Reference in New Issue