From ee9e5d2a9026df6e4f402de77d4f2c23174c127e Mon Sep 17 00:00:00 2001 From: David Ralph Date: Wed, 7 Apr 2021 10:57:28 +0100 Subject: [PATCH] feat: download image button (wip) --- .../modals/main/settings/Dropdown.jsx | 4 ++-- .../sections/background/Background.jsx | 18 ++++++++++---- .../widgets/background/Background.jsx | 8 ++++--- .../widgets/background/PhotoInformation.jsx | 19 ++++++++++++++- .../background/scss/_photoinformation.scss | 24 +++++++++++++++++++ src/translations/en_GB.json | 7 ++++-- 6 files changed, 68 insertions(+), 12 deletions(-) diff --git a/src/components/modals/main/settings/Dropdown.jsx b/src/components/modals/main/settings/Dropdown.jsx index 194ea8f0..12eb0a58 100644 --- a/src/components/modals/main/settings/Dropdown.jsx +++ b/src/components/modals/main/settings/Dropdown.jsx @@ -9,7 +9,7 @@ export default class Dropdown extends React.PureComponent { }; } - getLabel = () => { + getLabel() { return this.props.label ? : null; } @@ -39,7 +39,7 @@ export default class Dropdown extends React.PureComponent { render() { return ( <> - {this.getLabel} + {this.getLabel()} diff --git a/src/components/modals/main/settings/sections/background/Background.jsx b/src/components/modals/main/settings/sections/background/Background.jsx index b192cd62..7b81535b 100644 --- a/src/components/modals/main/settings/sections/background/Background.jsx +++ b/src/components/modals/main/settings/sections/background/Background.jsx @@ -5,6 +5,7 @@ import Dropdown from '../../Dropdown'; import FileUpload from '../../FileUpload'; import Slider from '../../Slider'; import Switch from '../../Switch'; +import Radio from '../../Radio'; import ColourSettings from './Colour'; @@ -48,13 +49,21 @@ export default class BackgroundSettings extends React.PureComponent { let backgroundSettings; + const apiOptions = [ + { + 'name': 'Mue', + 'value': 'mue' + }, + { + 'name': 'Unsplash', + 'value': 'unsplash' + } + ] + const APISettings = ( <>
- - - - + ); @@ -90,6 +99,7 @@ export default class BackgroundSettings extends React.PureComponent {

{background.buttons.title}

+

{background.effects.title}

diff --git a/src/components/widgets/background/Background.jsx b/src/components/widgets/background/Background.jsx index 480acc67..ebb62d5c 100644 --- a/src/components/widgets/background/Background.jsx +++ b/src/components/widgets/background/Background.jsx @@ -16,7 +16,8 @@ export default class Background extends React.PureComponent { credit: '', location: 'N/A', camera: 'N/A', - resolution: 'N/A' + resolution: 'N/A', + url: '' } }; this.language = window.language.widgets.background; @@ -124,10 +125,11 @@ export default class Background extends React.PureComponent { this.setState({ url: data.file, photoInfo: { - credit: (backgroundAPI !== 'unsplash') ? data.photographer : data.photographer + ' on Unsplash', + credit: (backgroundAPI !== 'unsplash') ? data.photographer : data.photographer + ` ${this.language.unsplash}`, location: (data.location.replace(/[null]+/g, '') !== ' ') ? data.location : 'N/A', camera: data.camera || 'N/A', - resolution: data.resolution || 'N/A' + resolution: data.resolution || 'N/A', + url: data.file } }); break; diff --git a/src/components/widgets/background/PhotoInformation.jsx b/src/components/widgets/background/PhotoInformation.jsx index 9542a49b..4a900d6a 100644 --- a/src/components/widgets/background/PhotoInformation.jsx +++ b/src/components/widgets/background/PhotoInformation.jsx @@ -6,6 +6,22 @@ import Camera from '@material-ui/icons/PhotoCamera'; import Resolution from '@material-ui/icons/Crop'; import Photographer from '@material-ui/icons/Person'; +const toDataURL = async (url) => { + const response = await fetch(url); + const blob = await response.blob(); + return URL.createObjectURL(blob); +} + +const downloadImage = async (info) => { + const link = document.createElement('a'); + link.href = await toDataURL(info.url); + // todo: make this a bit cleaner + link.download = `mue-${info.credit.toLowerCase().replaceAll(' ', '-')}-${info.location.toLowerCase().replaceAll(',', '').replaceAll(' ', '-')}.jpg`; + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); +} + export default function PhotoInformation(props) { const language = window.language.widgets.background; @@ -28,7 +44,8 @@ export default function PhotoInformation(props) { {props.info.resolution} - {props.info.credit.split(' on Unsplash')[0]} + {props.info.credit.split(` ${language.unsplash}`)[0]} + ); diff --git a/src/components/widgets/background/scss/_photoinformation.scss b/src/components/widgets/background/scss/_photoinformation.scss index 49cbfa5d..0708c25e 100644 --- a/src/components/widgets/background/scss/_photoinformation.scss +++ b/src/components/widgets/background/scss/_photoinformation.scss @@ -72,4 +72,28 @@ &:hover { display: block !important; } + + .download { + transition: ease 0.33s; + color: var(--modal-text); + background-color: rgba(83, 82, 237, 1); + cursor: pointer; + padding: 10px 30px; + font-size: 20px; + border-radius: 24px; + box-shadow: 0 5px 15px rgba(128, 161, 144, 0.4); + + border: 2px solid rgba(83, 82, 237, 1); + color: var(--modal-text); + + &:hover { + color: rgba(83, 82, 237, 1); + } + + &:hover, + &:active { + outline: none; + background: none; + } + } } \ No newline at end of file diff --git a/src/translations/en_GB.json b/src/translations/en_GB.json index c9d40ed7..a2ce5711 100644 --- a/src/translations/en_GB.json +++ b/src/translations/en_GB.json @@ -12,7 +12,9 @@ }, "background": { "credit": "Photo by", - "information": "Information" + "unsplash": "on Unsplash", + "information": "Information", + "download": "Download" }, "search": "Search", "navbar": { @@ -111,7 +113,8 @@ "buttons": { "title": "Buttons", "view": "View", - "favourite": "Favourite" + "favourite": "Favourite", + "download": "Download" }, "effects": { "title": "Effects",