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

New photo information tooltip

Browse Source 
Co-authored-by: Alex Sparkes <turbomarshmello@gmail.com>
This commit is contained in:
David Ralph
2020-10-17 10:47:01 +01:00
parent df2a873ac6
commit fef78cfeed
4 changed files with 117 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/widgets/Background.jsx
View File

@@ -42,6 +42,7 @@ export default class Background extends React.PureComponent {
if (unsplash) credit = `<a href='${url}' class='creditlink'>${photographer}</a> on <a href='https://unsplash.com/?utm_source=mue&utm_medium=referral' class='creditlink'>Unsplash</a>`;
document.querySelector('#photographer').insertAdjacentHTML("beforeend", ` ${credit}`); // Append credit
document.getElementById('credit').textContent = credit;
document.getElementById('photographerCard').textContent = credit;
}
doOffline() { // Handles setting the background if the user is offline
@@ -105,6 +106,8 @@ export default class Background extends React.PureComponent {
this.setBackground(data.file);
if (localStorage.getItem('backgroundAPI') === 'unsplash') return this.setCredit(data.photographer, 'unsplash', data.photographer_page);
this.setCredit(data.photographer);
document.getElementById('camera').textContent = data.camera;
document.getElementById('resolution').textContent = data.resolution || 'N/A';
}
if (data.location.replace(/[null]+/g, '') === ' ') return document.querySelector('#backgroundCredits').style.display = 'none';

33
src/components/widgets/PhotoInformation.jsx Normal file
View File

@@ -0,0 +1,33 @@
import React from 'react';
import Info from '@material-ui/icons/Info';
import Location from '@material-ui/icons/LocationOn';
import Camera from '@material-ui/icons/PhotoCamera';
import Resolution from '@material-ui/icons/Crop';
import Photographer from '@material-ui/icons/Person';
export default class PhotoInformation extends React.PureComponent {
render() {
return (
<div className='photoInformation'>
<h1 id='photographer'>Photo By</h1>
<Info className='photoInformationHover' />
<div className='infoCard'>
<Info className='infoIcon' /><h1>Information</h1>
<hr/>
<Location />
<span id='location'></span>
<Camera />
<span id='camera'>Gaming</span>
<Resolution />
<span id='resolution'>1280x720</span>
<Photographer />
<span id='photographerCard'></span>
</div>
<div id='backgroundCredits' className='tooltip'>
<span className='tooltiptext' id='location'/>
</div>
<span id='credit' style={{'display': 'none'}}></span>
</div>
);
}
}