From 727e21480d0edb39acd6c61c54226cd0720c13bd Mon Sep 17 00:00:00 2001 From: David Ralph Date: Mon, 30 Nov 2020 11:20:03 +0000 Subject: [PATCH] Dark theme notes + photoinformation, new features and fixes --- README.md | 1 - src/App.jsx | 13 +++++++------ src/components/modals/tabs/Addons.jsx | 4 +++- src/components/modals/tabs/Marketplace.jsx | 1 + .../widgets/background/PhotoInformation.jsx | 7 +++---- .../widgets/background/offline_images.json | 4 ++-- .../widgets/background/scss/_photoinformation.scss | 4 ++++ src/components/widgets/navbar/Notes.jsx | 4 +++- src/components/widgets/navbar/scss/_notes.scss | 5 +++++ src/components/widgets/quote/Quote.jsx | 8 ++++++-- src/components/widgets/quote/quote.scss | 5 +++++ src/scss/modules/_marketplace.scss | 2 +- 12 files changed, 40 insertions(+), 18 deletions(-) diff --git a/README.md b/README.md index 124d6f55..6743ca76 100644 --- a/README.md +++ b/README.md @@ -28,7 +28,6 @@ Mue is a fast, open and free-to-use browser extension that gives a new, fresh an * [Maintainers](#maintainers) * [Contributors](#contributors) * [Translators](#translators) - * [Other](#other) ## Screenshot ![Screenshot](assets/screenshot.jpg) diff --git a/src/App.jsx b/src/App.jsx index c4fdca4d..dc0e728b 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -50,15 +50,16 @@ export default class App extends React.PureComponent { // Render all the components render() { let modalClassList = 'Modal'; // Modal features - // let tooltipClassList = 'tooltiptext'; + let tooltipClassList = 'infoCard'; if ((localStorage.getItem('brightnessTime') && new Date().getHours() > 18) || localStorage.getItem('darkTheme') === 'true') { - modalClassList = 'Modal dark'; - // tooltipClassList = 'tooltiptext dark'; + modalClassList += ' dark'; + tooltipClassList += ' dark'; } const overlayClassList = (localStorage.getItem('animations') === 'true') ? 'Overlay modal-animation' : 'Overlay'; const en = require('./translations/en.json'); // User language - const language = merge(en, require(`./translations/${localStorage.getItem('language') || 'en'}.json`)); + const languagecode = localStorage.getItem('language') || 'en'; + const language = merge(en, require(`./translations/${languagecode}.json`)); return ( @@ -70,8 +71,8 @@ export default class App extends React.PureComponent { - - + +
diff --git a/src/components/modals/tabs/Addons.jsx b/src/components/modals/tabs/Addons.jsx index aad2680e..26cf063e 100644 --- a/src/components/modals/tabs/Addons.jsx +++ b/src/components/modals/tabs/Addons.jsx @@ -68,6 +68,8 @@ export default class Addons extends React.PureComponent { } componentDidMount() { + if (localStorage.getItem('animations') === 'true') document.getElementById('marketplace').classList.add('marketplaceanimation'); + document.getElementById('file-input').onchange = (e) => { const reader = new FileReader(); reader.readAsText(e.target.files[0], 'UTF-8'); @@ -76,7 +78,7 @@ export default class Addons extends React.PureComponent { } render() { - let content = this.toggle('item', 'addon', input)} /> + let content = this.toggle('item', 'addon', input)} />; if (this.state.installed.length === 0) { content = ( diff --git a/src/components/modals/tabs/Marketplace.jsx b/src/components/modals/tabs/Marketplace.jsx index 27830d19..211b12ab 100644 --- a/src/components/modals/tabs/Marketplace.jsx +++ b/src/components/modals/tabs/Marketplace.jsx @@ -106,6 +106,7 @@ export default class Marketplace extends React.PureComponent { } componentDidMount() { + if (localStorage.getItem('animations') === 'true') document.getElementById('marketplace').classList.add('marketplaceanimation'); if (navigator.onLine === false) return; this.getItems(); } diff --git a/src/components/widgets/background/PhotoInformation.jsx b/src/components/widgets/background/PhotoInformation.jsx index ea7b7889..d75ffb00 100644 --- a/src/components/widgets/background/PhotoInformation.jsx +++ b/src/components/widgets/background/PhotoInformation.jsx @@ -7,11 +7,13 @@ import Photographer from '@material-ui/icons/Person'; export default class PhotoInformation extends React.PureComponent { render() { + let classList = 'infoCard'; + if (this.props.className) classList = this.props.className; return (

{this.props.language.credit}

-
+

{this.props.language.information}

@@ -24,9 +26,6 @@ export default class PhotoInformation extends React.PureComponent {
-
- -
); diff --git a/src/components/widgets/background/offline_images.json b/src/components/widgets/background/offline_images.json index 2fd7e390..afc34f39 100644 --- a/src/components/widgets/background/offline_images.json +++ b/src/components/widgets/background/offline_images.json @@ -1,5 +1,5 @@ { - "Tirachard Kumtanom" : { + "Tirachard Kumtanom": { "photo": [1] }, "Sohail Na": { @@ -14,7 +14,7 @@ "Pixabay": { "photo": [2, 3, 9, 11, 13, 14, 15] }, - "Unknown" : { + "Unknown": { "photo": [5, 6, 8, 10, 12, 16, 17, 18, 19] } } \ No newline at end of file diff --git a/src/components/widgets/background/scss/_photoinformation.scss b/src/components/widgets/background/scss/_photoinformation.scss index d443c155..ab3ab0b8 100644 --- a/src/components/widgets/background/scss/_photoinformation.scss +++ b/src/components/widgets/background/scss/_photoinformation.scss @@ -83,4 +83,8 @@ .photoInformationHover { cursor: pointer; +} + +.dark hr { + background-color: white !important; } \ No newline at end of file diff --git a/src/components/widgets/navbar/Notes.jsx b/src/components/widgets/navbar/Notes.jsx index 81e9e470..e6fd5f89 100644 --- a/src/components/widgets/navbar/Notes.jsx +++ b/src/components/widgets/navbar/Notes.jsx @@ -27,8 +27,10 @@ export default class Notes extends React.PureComponent { } render() { + let classList = 'notescontainer'; + if (localStorage.getItem('darkTheme') === 'true') classList += ' dark'; return ( - +

{this.props.language.title}

diff --git a/src/components/widgets/navbar/scss/_notes.scss b/src/components/widgets/navbar/scss/_notes.scss index 8d5c879e..c58d72d0 100644 --- a/src/components/widgets/navbar/scss/_notes.scss +++ b/src/components/widgets/navbar/scss/_notes.scss @@ -77,4 +77,9 @@ textarea { float: right; margin-right: 20px; } +} + +.dark textarea { + background-color: #2f3542; + color: white; } \ No newline at end of file diff --git a/src/components/widgets/quote/Quote.jsx b/src/components/widgets/quote/Quote.jsx index 44c250b3..50f6b304 100644 --- a/src/components/widgets/quote/Quote.jsx +++ b/src/components/widgets/quote/Quote.jsx @@ -69,7 +69,8 @@ export default class Quote extends React.PureComponent { if (data.statusCode === 429) return this.doOffline(); // If we hit the ratelimit, we fallback to local quotes this.setState({ quote: '"' + data.quote + '"', - author: data.author + author: data.author, + authorlink: `https://${this.props.languagecode}.wikipedia.org/wiki/${data.author.split(' ').join('_')}` }); } catch (e) { // ..and if that fails we load one locally this.doOffline(); @@ -110,7 +111,10 @@ export default class Quote extends React.PureComponent { return (

{`${this.state.quote}`}

-

{this.state.author} {copy} {tweet} {this.state.favourited}

+

+ {this.state.author} + {copy} {tweet} {this.state.favourited} +

); } diff --git a/src/components/widgets/quote/quote.scss b/src/components/widgets/quote/quote.scss index 23a57d7e..04202718 100644 --- a/src/components/widgets/quote/quote.scss +++ b/src/components/widgets/quote/quote.scss @@ -56,4 +56,9 @@ button.copyButton { cursor: pointer; border-radius: 5px; display: table-cell +} + +.quoteauthorlink { + text-decoration: none; + color: white; } \ No newline at end of file diff --git a/src/scss/modules/_marketplace.scss b/src/scss/modules/_marketplace.scss index 714ad053..3c6c49bc 100644 --- a/src/scss/modules/_marketplace.scss +++ b/src/scss/modules/_marketplace.scss @@ -211,7 +211,7 @@ p.description { width: auto; } -#marketplace { +.marketplaceanimation { @include animation('content 0.5s'); }