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

feat: individual widget zoom, hot reload for font and custom js/css etc

Browse Source
This commit is contained in:
David Ralph
2021-05-02 12:11:07 +01:00
parent b9663831fd
commit 31a666fe22
29 changed files with 84 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/widgets/Widgets.jsx
View File

@@ -51,6 +51,7 @@ export default class Widgets extends React.PureComponent {
elements.push(<React.Fragment key={element}>{this.widgets[element]}</React.Fragment>);
});
} else {
// prevent error
elements = ['greeting', 'time', 'quicklinks', 'quote', 'date'];
}

19
src/components/widgets/background/Background.jsx
View File

@@ -71,6 +71,7 @@ export default class Background extends React.PureComponent {
const url = (localStorage.getItem('ddgProxy') === 'true') ? window.constants.DDG_PROXY + this.state.url : this.state.url;
const photoInformation = document.querySelector('.photoInformation');
// just set the background
if (localStorage.getItem('bgtransition') === 'false') {
if (photoInformation) {
photoInformation.style.display = 'block';
@@ -79,14 +80,16 @@ export default class Background extends React.PureComponent {
return backgroundImage.style.background = `url(${url})`;
}
// firstly we set the background as hidden and make sure there is no background set currently
backgroundImage.classList.add('backgroundPreload');
backgroundImage.style.background = null;
// same with photo information if not using custom background
if (photoInformation) {
photoInformation.classList.add('backgroundPreload');
}
// preloader for background transition
// preloader for background transition, required so it loads in nice
const preloader = document.createElement('img');
preloader.src = url;
@@ -95,7 +98,9 @@ export default class Background extends React.PureComponent {
backgroundImage.classList.remove('backgroundPreload');
backgroundImage.classList.add('fade-in');
backgroundImage.style.background = `url(${url})`;
// this doesn't make it fetch again which is nice
backgroundImage.style.background = `url(${url})`;
// remove the preloader element we created earlier
preloader.remove();
if (photoInformation) {
@@ -104,6 +109,7 @@ export default class Background extends React.PureComponent {
}
});
} else {
// custom colour
backgroundImage.setAttribute('style', this.state.style);
}
}
@@ -243,6 +249,7 @@ export default class Background extends React.PureComponent {
componentDidMount() {
const element = document.getElementById('backgroundImage');
// this resets it so the fade in and getting background all works properly
const refresh = () => {
element.classList.remove('fade-in');
this.setState({
@@ -260,17 +267,20 @@ export default class Background extends React.PureComponent {
EventBus.on('refresh', (data) => {
if (data === 'background') {
if (localStorage.getItem('background') === 'false') {
// user is using custom colour or image
if (this.state.photoInfo.hidden === false) {
document.querySelector('.photoInformation').style.display = 'none';
}
// video backgrounds
if (this.state.video === true) {
return document.getElementById('backgroundVideo').style.display = 'none';
} else {
return element.style.display = 'none';
}
}
// video backgrounds
if (this.state.video === true) {
document.getElementById('backgroundVideo').style.display = 'block';
} else {
@@ -284,11 +294,13 @@ export default class Background extends React.PureComponent {
const backgroundType = localStorage.getItem('backgroundType');
if (this.state.photoInfo.offline !== true) {
// basically check to make sure something has changed before we try getting another background
if (backgroundType !== this.state.type || localStorage.getItem('backgroundAPI') !== this.state.currentAPI || (this.state.type === 'custom' && localStorage.getItem('customBackground') !== this.state.url)) {
return refresh();
}
}
// background effects so we don't get another image again
if (this.state.video === true) {
document.getElementById('backgroundVideo').style.webkitFilter = `blur(${localStorage.getItem('blur')}px) brightness(${localStorage.getItem('brightness')}%)`;
} else {
@@ -296,6 +308,7 @@ export default class Background extends React.PureComponent {
}
}
// uninstall photo pack reverts your background to what you had previously
if (data === 'marketplacebackgrounduninstall') {
refresh();
}

2
src/components/widgets/background/PhotoInformation.jsx
View File

@@ -35,7 +35,7 @@ export default function PhotoInformation(props) {
let credit = props.info.credit;
let photo = language.credit;
// unsplash
// unsplash credit
if (props.info.photographerURL && props.info.photographerURL !== '' && !props.info.offline) {
photo = <a href={props.info.photoURL} target='_blank' rel='noopener noreferrer'>{language.credit}</a>;
credit = <><a href={props.info.photographerURL} target='_blank' rel='noopener noreferrer'>{photographer}</a> <a href='https://unsplash.com?utm_source=mue' target='_blank' rel='noopener noreferrer'>{language.unsplash}</a></>;

5
src/components/widgets/greeting/Greeting.jsx
View File

@@ -114,9 +114,14 @@ export default class Greeting extends React.PureComponent {
this.getGreeting(0);
element.style.display = 'block';
element.style.fontSize = `${1.6 * Number(localStorage.getItem('zoomGreeting') / 100)}em`;
}
});
// this comment can apply to all widget zoom features apart from the general one in the Accessibility section
// in a nutshell: 1.6 is the current font size and we do "localstorage || 100" so we don't have to try that 4.0 -> 5.0 thing again
document.querySelector('.greeting').style.fontSize = `${1.6 * Number((localStorage.getItem('zoomGreeting') || 100) / 100)}em`;
this.getGreeting(0);
}

1
src/components/widgets/quicklinks/QuickLinks.jsx
View File

@@ -104,6 +104,7 @@ export default class QuickLinks extends React.PureComponent {
}
});
// allows you to add a link by pressing enter
document.querySelector('.topbarquicklinks').onkeydown = (e) => {
e = e || window.event;
let code = e.which || e.keyCode;

5
src/components/widgets/quote/Quote.jsx
View File

@@ -172,10 +172,15 @@ export default class Quote extends React.PureComponent {
}
element.style.display = 'block';
document.querySelector('.quote').style.fontSize = `${0.8 * Number((localStorage.getItem('zoomQuote') || 100) / 100)}em`;
document.querySelector('.quoteauthor').style.fontSize = `${0.9 * Number((localStorage.getItem('zoomQuote') || 100) / 100)}em`;
this.init();
}
});
document.querySelector('.quote').style.fontSize = `${0.8 * Number((localStorage.getItem('zoomQuote') || 100) / 100)}em`;
document.querySelector('.quoteauthor').style.fontSize = `${0.9 * Number((localStorage.getItem('zoomQuote') || 100) / 100)}em`;
this.init();
}

3
src/components/widgets/time/Clock.jsx
View File

@@ -100,9 +100,12 @@ export default class Clock extends React.PureComponent {
this.startTime(0);
element.style.display = 'block';
element.style.fontSize = `${4 * Number((localStorage.getItem('zoomClock') || 100) / 100)}em`;
}
});
document.querySelector('.clock-container').style.fontSize = `${4 * Number((localStorage.getItem('zoomClock') || 100) / 100)}em`;
this.startTime(0);
}

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

@@ -108,10 +108,13 @@ export default class DateWidget extends React.PureComponent {
}
element.style.display = 'block';
element.style.fontSize = `${Number((localStorage.getItem('zoomDate') || 100) / 100)}em`;
this.getDate();
}
});
document.querySelector('.date').style.fontSize = `${Number((localStorage.getItem('zoomDate') || 100) / 100)}em`;
this.getDate();
}

2
src/components/widgets/weather/Weather.jsx
View File

@@ -160,7 +160,7 @@ export default class Weather extends React.PureComponent {
<div className='weather'>
<WeatherIcon name={this.state.icon}/>
<span>{this.state.weather.temp + this.state.temp_text}</span>
<span className='loc' style={{ 'textTransform': 'capitalize' }}><br/>{this.state.weather.description}</span>
{enabled('weatherdescription') ? <span className='loc' style={{ 'textTransform': 'capitalize' }}><br/>{this.state.weather.description}</span> : null}
<span className='minmax'>{minmax()}</span>
{enabled('humidity') ? <span className='loc'><br/><WiHumidity/>{this.state.weather.humidity}%</span> : null}
{enabled('windspeed') ? <span className='loc'><br/><WiWindy/>{this.state.weather.wind_speed}<span className='minmax'> m/s</span> {enabled('windDirection') ? <WindDirectionIcon degrees={this.state.weather.wind_degrees}/> : null}</span> : null}

1
src/components/widgets/weather/WindDirectionIcon.jsx
View File

@@ -4,6 +4,7 @@ import { WiDirectionDownLeft, WiDirectionDownRight, WiDirectionDown, WiDirection
export default function WindDirectionIcon(props) {
let icon;
// convert the number openweathermap gives us to closest direction or something
const getDirection = (angle) => {
const directions = ['North', 'North-West', 'West', 'South-West', 'South', 'South-East', 'East', 'North-East'];
return directions[Math.round(((angle %= 360) < 0 ? angle + 360 : angle) / 45) % 8];