From fef78cfeedde8540e9968d1e451d4f81159d5eb5 Mon Sep 17 00:00:00 2001 From: David Ralph Date: Sat, 17 Oct 2020 10:47:01 +0100 Subject: [PATCH 001/162] New photo information tooltip Co-authored-by: Alex Sparkes --- src/App.jsx | 15 +- src/components/widgets/Background.jsx | 3 + src/components/widgets/PhotoInformation.jsx | 33 +++++ src/scss/modules/_credit.scss | 151 ++++++++++---------- 4 files changed, 117 insertions(+), 85 deletions(-) create mode 100644 src/components/widgets/PhotoInformation.jsx diff --git a/src/App.jsx b/src/App.jsx index d5340b93..f1e92937 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -7,6 +7,7 @@ import Quote from './components/widgets/Quote'; import Search from './components/widgets/Search'; import Maximise from './components/widgets/Maximise'; import Favourite from './components/widgets/Favourite'; +import PhotoInformation from './components/widgets/PhotoInformation'; import Navbar from './components/Navbar'; @@ -14,7 +15,6 @@ import SettingsFunctions from './modules/settingsFunctions'; import { ToastContainer } from 'react-toastify'; import Modal from 'react-modal'; import merge from 'lodash.merge'; -import RoomIcon from '@material-ui/icons/Room'; // Modals are lazy loaded as the user won't use them every time they open a tab const MainModal = React.lazy(() => import('./components/modals/MainModal')); @@ -36,10 +36,10 @@ export default class App extends React.PureComponent { if (!localStorage.getItem('firstRun')) SettingsFunctions.setDefaultSettings(); let modalClassList = 'Modal'; // Modal features - let tooltipClassList = 'tooltiptext'; + // let tooltipClassList = 'tooltiptext'; if ((localStorage.getItem('brightnessTime') && new Date().getHours() > 18) || localStorage.getItem('darkTheme') === 'true') { modalClassList = 'Modal dark'; - tooltipClassList = 'tooltiptext dark'; + // tooltipClassList = 'tooltiptext dark'; } const overlayClassList = (localStorage.getItem('animations') === 'true') ? 'Overlay modal-animation' : 'Overlay'; @@ -64,14 +64,7 @@ export default class App extends React.PureComponent { -
-

{language.credit}

- -
- - -
-
+ diff --git a/src/components/widgets/Background.jsx b/src/components/widgets/Background.jsx index 48841117..569aacb4 100644 --- a/src/components/widgets/Background.jsx +++ b/src/components/widgets/Background.jsx @@ -42,6 +42,7 @@ export default class Background extends React.PureComponent { if (unsplash) credit = `${photographer} on Unsplash`; 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'; diff --git a/src/components/widgets/PhotoInformation.jsx b/src/components/widgets/PhotoInformation.jsx new file mode 100644 index 00000000..72b2f1d0 --- /dev/null +++ b/src/components/widgets/PhotoInformation.jsx @@ -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 ( +
+

Photo By

+ +
+

Information

+
+ + + + Gaming + + 1280x720 + + +
+
+ +
+ +
+ ); + } +} diff --git a/src/scss/modules/_credit.scss b/src/scss/modules/_credit.scss index 0ec4076a..f7326953 100644 --- a/src/scss/modules/_credit.scss +++ b/src/scss/modules/_credit.scss @@ -1,12 +1,81 @@ -#location, -#photographer { - font-size: calc(10px + 1.2vmin); - text-shadow: 0 0 25px rgba(0, 0, 0, 0.3); - text-overflow: ellipsis; +.photoInformation { + position: absolute; + bottom: 1rem; + left: 1rem; + font-size: calc(10px + 0.1vmin) !important; + text-shadow: 0 0 10px rgba(0, 0, 0, 0.3); + + svg { + float: left; + vertical-align: middle; + margin-right: 1rem; + font-size: calc(10px + 2vmin); + } + + span { + display: none; + } + + h1 { + position: relative; + } + + svg, h1 { + display: inline; + } + + svg:hover + .infoCard { + display: block; + } } -#location { - margin-bottom: -10px; +.infoCard { + display: none; + background: #fff; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); + color: #000; + position: fixed; + bottom: 3.25rem; + left: 0.7em; + padding: 1rem; + border-radius: 24px 24px 24px 0; + max-width: 500px; + text-align: left; + text-shadow: none; + + span { + display: block; + } + + svg { + margin-right: 0.5rem; + vertical-align: middle; + display: inline-flex; + padding: 2px; + } + + span, svg { + font-size: 2em; + } + + h1, .infoIcon { + font-size: 3em; + } + + .infoIcon { + padding: 4px; + } + + hr { + height: 3px; + background: #2d3436; + outline: none; + border: none; + } +} + +.photoInformationHover { + cursor: pointer; } .view { @@ -29,73 +98,7 @@ } } -#photographer { - position: absolute; - bottom: 10px; - left: 50px; - width: 1000px; -} - -.locationicon, #viewButton, #favouriteButton { +#viewButton, #favouriteButton { width: auto; cursor: pointer; } - -.navbar-container > svg, #backgroundCredits > svg, #viewButton > svg, #favouriteButton > svg { - font-size: calc(10px + 1.5vmin) !important; - position: absolute; - bottom: 2px; - left: 2px; - transition: all 0.5s ease 0s; -} - -.credits { - bottom: 2px; - left: 0px; - position: absolute; - text-align: left; - width: auto; - height: auto; -} - -.tooltip { - position: relative; - display: inline-block; - bottom: 15px; - left: 10px; - -webkit-filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.4)); - filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.4)); - - .tooltiptext { - width: 200px; - display: inline-block; - visibility: hidden; - border-radius: 12px; - background-color: map-get($theme-colours, "main");; - color: #000; - font-size: calc(10px + 1.2vmin); - position: absolute; - z-index: 1; - padding: 15px 32px; - bottom: 40px; - left: 60px; - margin-left: -60px; - opacity: 0; - transition: opacity 1s; - box-sizing: border-box; - &.dark { - background-color: #2f3542 !important; - color: white !important; - } - } - - &:hover .tooltiptext { - visibility: visible; - opacity: 1; - } -} - -#photographer, .locationicon { - display: inline; - vertical-align: midddle; -} \ No newline at end of file From 93edb489f775d5abf40b511a6748ad7494b5c015 Mon Sep 17 00:00:00 2001 From: David Ralph Date: Sat, 17 Oct 2020 18:46:27 +0100 Subject: [PATCH 002/162] Add notes feature and improved navbar Co-authored-by: Alex Sparkes --- src/App.jsx | 26 ++-- src/components/Navbar.jsx | 33 +++-- src/components/widgets/Notes.jsx | 46 +++++++ src/components/widgets/icons/Pin.jsx | 27 +++++ src/scss/modules/_buttons.scss | 108 ++++++++++++----- src/scss/modules/_navbar.scss | 172 ++++++++++++++++++++++----- 6 files changed, 326 insertions(+), 86 deletions(-) create mode 100644 src/components/widgets/Notes.jsx create mode 100644 src/components/widgets/icons/Pin.jsx diff --git a/src/App.jsx b/src/App.jsx index f1e92937..3da24d09 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -31,12 +31,22 @@ export default class App extends React.PureComponent { }; } - // Render all the components - render() { + componentDidMount() { if (!localStorage.getItem('firstRun')) SettingsFunctions.setDefaultSettings(); + const theme = localStorage.getItem('theme'); // Marketplace themes (WIP) + if (theme) { + const style = document.createElement('link'); + style.href = theme; + style.rel = 'stylesheet'; + document.head.appendChild(style); + } + } + + // Render all the components + render() { let modalClassList = 'Modal'; // Modal features - // let tooltipClassList = 'tooltiptext'; + // let tooltipClassList = 'tooltiptext'; if ((localStorage.getItem('brightnessTime') && new Date().getHours() > 18) || localStorage.getItem('darkTheme') === 'true') { modalClassList = 'Modal dark'; // tooltipClassList = 'tooltiptext dark'; @@ -46,21 +56,13 @@ export default class App extends React.PureComponent { const en = require('./translations/en.json'); // User language const language = merge(en, require(`./translations/${localStorage.getItem('language') || 'en'}.json`)); - const theme = localStorage.getItem('theme'); // Marketplace themes (WIP) - if (theme) { - const style = document.createElement('link'); - style.href = theme; - style.rel = 'stylesheet'; - document.head.appendChild(style); - } - return (
- this.setState({ mainModal: true })} updateModalOpen={() => this.setState({ updateModal: true })} /> + this.setState({ mainModal: true })} updateModalOpen={() => this.setState({ updateModal: true })} /> diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx index d3e666c3..ff8ef1d2 100644 --- a/src/components/Navbar.jsx +++ b/src/components/Navbar.jsx @@ -1,24 +1,39 @@ import React from 'react'; -import RefreshIcon from '@material-ui/icons/Refresh'; -import Gear from '@material-ui/icons/Settings'; -import NewReleases from '@material-ui/icons/NewReleases'; +import RefreshIcon from '@material-ui/icons/RefreshRounded'; +import Gear from '@material-ui/icons/SettingsRounded'; +import NewReleases from '@material-ui/icons/NewReleasesRounded'; +import NotesIcon from '@material-ui/icons/AssignmentRounded'; +import Tooltip from '@material-ui/core/Tooltip'; + +const Notes = React.lazy(() => import('./widgets/Notes')); +const renderLoader = () =>
; export default class Navbar extends React.PureComponent { render() { - let refreshHTML =
window.location.reload()} />
; + let refreshHTML = window.location.reload()} /> const refresh = localStorage.getItem('refresh'); if (refresh === 'false') refreshHTML = ''; return (
-
- +
+ + + +
- {refreshHTML}
- + + +
+ + {refreshHTML} + + + +
); } -} \ No newline at end of file +} diff --git a/src/components/widgets/Notes.jsx b/src/components/widgets/Notes.jsx new file mode 100644 index 00000000..41b91f28 --- /dev/null +++ b/src/components/widgets/Notes.jsx @@ -0,0 +1,46 @@ +import React from 'react'; +import TextareaAutosize from '@material-ui/core/TextareaAutosize'; +import CopyIcon from '@material-ui/icons/FileCopyRounded'; +import Pin from './icons/Pin'; +import NotesIcon from '@material-ui/icons/AssignmentRounded'; + +export default class Notes extends React.PureComponent { + constructor(...args) { + super(...args); + this.state = { + notes: localStorage.getItem('notes') + }; + } + + setNotes(e) { + localStorage.setItem('notes', e.target.value); + this.setState({ notes: e.target.value }); + }; + + pin() { + const pinned = localStorage.getItem('notesPinned'); + document.getElementById('noteContainer').classList.toggle('visibilityshow'); + if (pinned === 'true') localStorage.setItem('notesPinned', false); + else localStorage.setItem('notesPinned', true); + } + + componentDidMount() { + if (localStorage.getItem('notesPinned') === 'true') document.getElementById('noteContainer').classList.toggle('visibilityshow'); + } + + render() { + const copyNotes = () => navigator.clipboard.writeText(this.state.notes); + + return ( + +
+ +

Notes

+
+ + + + + ); + } +} diff --git a/src/components/widgets/icons/Pin.jsx b/src/components/widgets/icons/Pin.jsx new file mode 100644 index 00000000..70cd7d8d --- /dev/null +++ b/src/components/widgets/icons/Pin.jsx @@ -0,0 +1,27 @@ +// License for original pin SVG below +/* + Copyright 2020 Google Inc. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ + +import React from 'react'; + +export default class Pin extends React.PureComponent { + render() { + return + + + ; + } +} diff --git a/src/scss/modules/_buttons.scss b/src/scss/modules/_buttons.scss index c0e3c5e7..e9b66edf 100644 --- a/src/scss/modules/_buttons.scss +++ b/src/scss/modules/_buttons.scss @@ -2,7 +2,7 @@ text-align: center; border: none; transition: ease 0.33s; - color: map-get($theme-colours, "main"); + color: map-get($theme-colours, 'main'); cursor: pointer; display: inline-block; position: relative; @@ -23,25 +23,25 @@ .apply { @extend %settingsButton; margin-right: 20px; - background-color: map-get($button-colours, "confirm"); - border: 2px solid map-get($button-colours, "confirm"); + background-color: map-get($button-colours, 'confirm'); + border: 2px solid map-get($button-colours, 'confirm'); &:hover { - border: 2px solid map-get($button-colours, "confirm"); - color: map-get($button-colours, "confirm"); + border: 2px solid map-get($button-colours, 'confirm'); + color: map-get($button-colours, 'confirm'); background: none; } } .reset { @extend %settingsButton; - background-color: map-get($button-colours, "reset"); - border: 2px solid map-get($button-colours, "reset"); + background-color: map-get($button-colours, 'reset'); + border: 2px solid map-get($button-colours, 'reset'); margin-left: 5px; &:hover { - border: 2px solid map-get($button-colours, "reset"); - color: map-get($button-colours, "reset"); + border: 2px solid map-get($button-colours, 'reset'); + color: map-get($button-colours, 'reset'); background: none; } } @@ -49,24 +49,24 @@ .close { @extend %settingsButton; padding: 10px 50px 10px 50px; - background-color: map-get($button-colours, "other"); - border: 2px solid map-get($button-colours, "other"); + background-color: map-get($button-colours, 'other'); + border: 2px solid map-get($button-colours, 'other'); &:hover { - color: map-get($button-colours, "other"); - border: 2px solid map-get($button-colours, "other"); + color: map-get($button-colours, 'other'); + border: 2px solid map-get($button-colours, 'other'); background: none; } } .add { @extend %settingsButton; - background-color: map-get($button-colours, "other"); - border: 2px solid map-get($button-colours, "other"); + background-color: map-get($button-colours, 'other'); + border: 2px solid map-get($button-colours, 'other'); &:hover { - color: map-get($button-colours, "other"); - border: 2px solid map-get($button-colours, "other"); + color: map-get($button-colours, 'other'); + border: 2px solid map-get($button-colours, 'other'); background: none; } } @@ -76,7 +76,7 @@ border-radius: 50%; background: none; border: 2px solid rgba(0,0,0,0); - color: map-get($button-colours, "reset"); + color: map-get($button-colours, 'reset'); text-align: center; vertical-align: sub; height: 60px; @@ -85,8 +85,8 @@ font-size: 30px; &:hover { - color: map-get($button-colours, "background"); - border: 2px solid map-get($button-colours, "reset"); + color: map-get($button-colours, 'background'); + border: 2px solid map-get($button-colours, 'reset'); background: none; } } @@ -95,13 +95,13 @@ .uploadbg, .import { @extend %settingsButton; - background-color: map-get($button-colours, "other"); - border: 2px solid map-get($button-colours, "other"); - color: map-get($theme-colours, "main"); + background-color: map-get($button-colours, 'other'); + border: 2px solid map-get($button-colours, 'other'); + color: map-get($theme-colours, 'main'); &:hover { - color: map-get($button-colours, "other"); - border: 2px solid map-get($button-colours, "other"); + color: map-get($button-colours, 'other'); + border: 2px solid map-get($button-colours, 'other'); background: none; } } @@ -128,19 +128,19 @@ &:hover { background: #2d3436; - color: map-get($theme-colours, "main");; + color: map-get($theme-colours, 'main');; border: 2px solid #2d3436; } } .dark .storebutton { - border: 2px solid map-get($theme-colours, "main"); - color: map-get($theme-colours, "main"); + border: 2px solid map-get($theme-colours, 'main'); + color: map-get($theme-colours, 'main'); &:hover { - background: map-get($theme-colours, "main"); + background: map-get($theme-colours, 'main'); color: #2d3436; - border: 2px solid map-get($theme-colours, "main"); + border: 2px solid map-get($theme-colours, 'main'); } } @@ -150,7 +150,7 @@ &:hover { background: #ff4757; - color: map-get($theme-colours, "main");; + color: map-get($theme-colours, 'main');; border: 2px solid #ff4757; } @@ -190,7 +190,7 @@ .stop { outline: none; border-image-slice: 1; - border-image-source: map-get($theme-colours, "gradient"); + border-image-source: map-get($theme-colours, 'gradient'); font-size: 1.2em; padding-left: 7px; vertical-align: middle; @@ -200,4 +200,48 @@ input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { opacity: 1; outline: none; +} + +.pinNote { + @extend %settingsButton; + background-color: map-get($button-colours, 'confirm'); + border: 2px solid map-get($button-colours, 'confirm'); + color: map-get($theme-colours, 'main'); + transition: 0s; + + &:hover { + color: map-get($button-colours, 'confirm'); + border: 2px solid map-get($button-colours, 'confirm'); + background: none; + } + + svg { + fill: currentColor; + width: 1em; + height: 1em; + display: inline-block; + font-size: 1.5rem; + transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + flex-shrink: 0; + user-select: none; + } +} + +.saveNote { + @extend %settingsButton; + background-color: map-get($button-colours, 'other'); + border: 2px solid map-get($button-colours, 'other'); + color: map-get($theme-colours, 'main'); + transition: 0s; + + &:hover { + color: map-get($button-colours, 'other'); + border: 2px solid map-get($button-colours, 'other'); + background: none; + } +} + +.saveNote { + display: inline; + margin: 5px; } \ No newline at end of file diff --git a/src/scss/modules/_navbar.scss b/src/scss/modules/_navbar.scss index 4e74f97f..f8884cea 100644 --- a/src/scss/modules/_navbar.scss +++ b/src/scss/modules/_navbar.scss @@ -1,44 +1,150 @@ -%navbar { +.navbar-container { position: absolute; - text-align: right; - min-width: 50px; - -webkit-filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.3)); - filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.3)); - top: 20px; + top: 1rem; + right: 1rem; + + div { + display: inline; + } + + img { + height: 1em; + width: auto; + margin: 0.5rem; + } + + svg.topicons { + color: map-get($theme-colours, 'main-text-color'); + -webkit-font-smoothing: subpixel-antialiased; + font-size: 1em; + display: inline; + margin: 0.5rem; + filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.3)); + cursor: pointer; + transition: .2s ease; + + &:hover { + color: map-get($theme-colours, 'main-text-color'); + transform: translateZ(0); + transform: scale(1.3); + } + } +} + +.navbar-container-bottom { + position: absolute; + bottom: 1rem; + right: 1rem; + + div { + display: inline; + } + + img { + height: 1em; + width: auto; + margin: 0.5rem; + } + + svg.topicons { + color: map-get($theme-colours, 'main-text-color'); + -webkit-font-smoothing: subpixel-antialiased; + font-size: 1em; + display: inline; + margin: 0.5rem; + filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.3)); + cursor: pointer; + transition: .2s ease; + + &:hover { + color: map-get($theme-colours, 'main-text-color'); + transform: translateZ(0); + transform: scale(1.3); + } + } +} + +.notes { + position: relative; + display: inline-block; + + h3 { + text-shadow: none; + margin: 0; + } +} + +.notes .notescontainer { + text-align: center; + padding: 15px; + visibility: hidden; + background-color: #fff; + color: #000; + text-align: center; + border-radius: 12px; + position: absolute; + z-index: 1; + top: 80%; + left: 50%; + margin-left: -125px; + + input[type=text] { + border: none; + color: #2d3436; + } + + svg, + input[type=text] { + display: inline-flex; + } svg { - transition: ease 0.2s; - font-size: calc(10px + 1.5vmin) !important; + float: left; + } + + ::placeholder { + color: #636e72; + opacity: 1; } } -.navbar1 { - @extend %navbar; - right: 20px; - svg { // apparently fixes shaking issue that only happens to settings icon - -webkit-backface-visibility: hidden; - -webkit-transform: translateZ(0) scale(1, 1); - backface-visibility: hidden; - transform: translateZ(0) scale(1, 1); +.notes:hover .notescontainer { + visibility: visible; +} + +textarea { + overflow: none; + border: none; + outline: none; + width: 200px; + resize: none; + height: 100px; + margin: 10px; +} + +.noteIcon { + display: inline; + font-size: 1em; + float: none; +} + +.topbarnotes { + text-align: center; + + svg { + font-size: 48px; + float: left !important; + padding: 9px; + } + + h3 { + font-size: 48px; + float: right; + margin-right: 20px; } } -.navbar2 { - @extend %navbar; - right: 60px; -} - -.navbar3 { - @extend %navbar; - right: 100px; -} - -.refreshicon, .settingsicon, .updateicon { - cursor: pointer; - - &:hover { - transform: scale(1.1); - color: map-get($theme-colours, "main");; - } +.visibilityshow { + visibility: visible !important; } \ No newline at end of file From 5dc8bbf963d09a7298ece09a349bf9e9598a9ef4 Mon Sep 17 00:00:00 2001 From: MrOnosa Date: Sun, 18 Oct 2020 07:40:41 -0500 Subject: [PATCH 003/162] These bugs fix warnings/errors I saw in the console log. * Fixed broken reference to toast language * Fixed null reference for a hidden credits section. * Fixed case when "notes" is not defined in local storage. * Corrected scope of "this" on Notes.jsx --- src/components/modals/MainModal.jsx | 2 +- src/components/widgets/Background.jsx | 2 +- src/components/widgets/Notes.jsx | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/modals/MainModal.jsx b/src/components/modals/MainModal.jsx index 095ac294..73f69978 100644 --- a/src/components/modals/MainModal.jsx +++ b/src/components/modals/MainModal.jsx @@ -8,7 +8,7 @@ export default class MainModal extends React.PureComponent { constructor(...args) { super(...args); this.state = { - tab: , + tab: , settingsActive: 'active', addonsActive: '', marketplaceActive: '' diff --git a/src/components/widgets/Background.jsx b/src/components/widgets/Background.jsx index 569aacb4..9be31dd0 100644 --- a/src/components/widgets/Background.jsx +++ b/src/components/widgets/Background.jsx @@ -34,7 +34,7 @@ export default class Background extends React.PureComponent { `${background}; -webkit-filter: blur(${localStorage.getItem('blur')}px) brightness(${brightness}%);` ); - if (credit === 'false') document.querySelector('#credits').style.display = 'none'; // Hide the credit + if (credit === 'false' && document.querySelector('#credits')) document.querySelector('#credits').style.display = 'none'; // Hide the credit } setCredit(photographer, unsplash, url) { diff --git a/src/components/widgets/Notes.jsx b/src/components/widgets/Notes.jsx index 41b91f28..5591ecba 100644 --- a/src/components/widgets/Notes.jsx +++ b/src/components/widgets/Notes.jsx @@ -8,11 +8,11 @@ export default class Notes extends React.PureComponent { constructor(...args) { super(...args); this.state = { - notes: localStorage.getItem('notes') + notes: localStorage.getItem('notes') || "" }; } - setNotes(e) { + setNotes = (e) => { localStorage.setItem('notes', e.target.value); this.setState({ notes: e.target.value }); }; From 2f8d5eca21c5d07fa5e6d56f7bf50e8f89bab69f Mon Sep 17 00:00:00 2001 From: David Ralph Date: Wed, 21 Oct 2020 13:22:04 +0100 Subject: [PATCH 004/162] Add WIP custom background video feature --- src/App.jsx | 4 ++-- src/components/widgets/Background.jsx | 7 +++++++ src/components/widgets/Notes.jsx | 2 +- src/scss/index.scss | 9 +++++++++ 4 files changed, 19 insertions(+), 3 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 3da24d09..65ef91bd 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -23,8 +23,8 @@ const Update = React.lazy(() => import('./components/modals/Update')); const renderLoader = () =>
; export default class App extends React.PureComponent { - constructor(props) { - super(props); + constructor(...args) { + super(...args); this.state = { mainModal: false, updateModal: false diff --git a/src/components/widgets/Background.jsx b/src/components/widgets/Background.jsx index 9be31dd0..080e9886 100644 --- a/src/components/widgets/Background.jsx +++ b/src/components/widgets/Background.jsx @@ -67,6 +67,7 @@ export default class Background extends React.PureComponent { const customBackgroundColour = localStorage.getItem('customBackgroundColour'); const customBackground = localStorage.getItem('customBackground'); const favourited = JSON.parse(localStorage.getItem('favourite')); + const customBackgroundVideo = localStorage.getItem('customBackgroundVideo'); if (favourited) { if (offlineMode === 'true') return this.doOffline(); @@ -83,6 +84,12 @@ export default class Background extends React.PureComponent { this.setBackground(null, customBackgroundColour, 'false'); } else if (customBackground !== '') { // Local this.setBackground(customBackground, null, 'false'); + } else if (customBackgroundVideo) { + document.getElementById('backgroundImage').innerHTML = ` + `; + document.querySelector('.photoInformation').style.display = 'none'; // Hide the credit } else { // Online if (offlineMode === 'true') return this.doOffline(); try { // First we try and get an image from the API... diff --git a/src/components/widgets/Notes.jsx b/src/components/widgets/Notes.jsx index 5591ecba..e114b874 100644 --- a/src/components/widgets/Notes.jsx +++ b/src/components/widgets/Notes.jsx @@ -8,7 +8,7 @@ export default class Notes extends React.PureComponent { constructor(...args) { super(...args); this.state = { - notes: localStorage.getItem('notes') || "" + notes: localStorage.getItem('notes') || '' }; } diff --git a/src/scss/index.scss b/src/scss/index.scss index 55c67406..cacb701b 100644 --- a/src/scss/index.scss +++ b/src/scss/index.scss @@ -83,6 +83,7 @@ body { from { opacity: 0; } + to { opacity: 1; } @@ -100,4 +101,12 @@ body { ::selection { background-color: #c2c2c2; +} + +#backgroundVideo { + position: fixed; + right: 0; + bottom: 0; + min-width: 100%; + min-height: 100%; } \ No newline at end of file From 3b957142bfa225a279225fcde23b6278ee1aa3b0 Mon Sep 17 00:00:00 2001 From: David Ralph Date: Wed, 21 Oct 2020 18:55:56 +0100 Subject: [PATCH 005/162] Make translation files consistent and change update modal urls --- src/components/modals/Update.jsx | 6 ++-- src/components/modals/marketplace/Item.jsx | 36 +++++++++---------- src/components/modals/marketplace/Items.jsx | 4 +-- .../settings/sections/BackgroundSettings.jsx | 20 +++++------ .../settings/sections/SearchSettings.jsx | 2 +- src/components/modals/tabs/Settings.jsx | 4 +-- src/components/widgets/PhotoInformation.jsx | 10 +++--- src/modules/constants.js | 1 + src/translations/en.json | 24 ++++++------- src/translations/fr.json | 20 +++++------ src/translations/nl.json | 12 +++---- src/translations/no.json | 12 +++---- src/translations/ru.json | 12 +++---- 13 files changed, 82 insertions(+), 81 deletions(-) diff --git a/src/components/modals/Update.jsx b/src/components/modals/Update.jsx index 7979ae76..0d09aa33 100644 --- a/src/components/modals/Update.jsx +++ b/src/components/modals/Update.jsx @@ -14,7 +14,7 @@ export default class Update extends React.PureComponent { } async getUpdate() { - const supportText = `

${this.props.language.contactsupport}: https://muetab.xyz/contact

`; + const supportText = `

${this.props.language.contact_support}: https://muetab.com/contact

`; if (localStorage.getItem('offlineMode') === 'true') return this.setState({ title: this.props.language.offline.title, @@ -33,7 +33,7 @@ export default class Update extends React.PureComponent { date: data.published, image: data.image, author: data.author, - html: data.content + `

${this.props.language.readblog}: ${data.url}

` + html: data.content + `

${this.props.language.read_blog}: ${data.url}

` }); } catch (e) { // If it fails, we send an error this.setState({ @@ -50,7 +50,7 @@ export default class Update extends React.PureComponent { render() { return
× -

{this.state.title}

+

{this.state.title}

By {this.state.author} • {this.state.date}
Update

diff --git a/src/components/modals/marketplace/Item.jsx b/src/components/modals/marketplace/Item.jsx index 352e2d7c..f1295bf5 100644 --- a/src/components/modals/marketplace/Item.jsx +++ b/src/components/modals/marketplace/Item.jsx @@ -9,8 +9,8 @@ export default class Item extends React.PureComponent { if (this.props.content.content.data.quote_api) { warningHTML =
    -
  • {this.props.language.quoteWarning.title}
    • -
  • {this.props.language.quoteWarning.description}
    • +
  • {this.props.language.quote_warning.title}
    • +
  • {this.props.language.quote_warning.description}
} @@ -27,24 +27,24 @@ export default class Item extends React.PureComponent { product
-

{this.props.language.information}

-
    -
    -
  • {this.props.language.last_updated}
    • -
  • {this.props.data.updated}
    • -
    -
  • {this.props.language.version}
    • -
  • {this.props.data.version}
    • -
    -
  • {this.props.language.author}
    • -
  • {this.props.data.author}
    • -
+

{this.props.language.information}

+
    +
    +
  • {this.props.language.last_updated}
    • +
  • {this.props.data.updated}
    • +
    +
  • {this.props.language.version}
    • +
  • {this.props.data.version}
    • +
    +
  • {this.props.language.author}
    • +
  • {this.props.data.author}
    • +
-
    -
  • {this.props.language.notice.title}
    • -
  • {this.props.language.notice.description}
    • -
+
    +
  • {this.props.language.notice.title}
    • +
  • {this.props.language.notice.description}
    • +
{warningHTML}
diff --git a/src/components/modals/marketplace/Items.jsx b/src/components/modals/marketplace/Items.jsx index c861df3d..fddcb1ea 100644 --- a/src/components/modals/marketplace/Items.jsx +++ b/src/components/modals/marketplace/Items.jsx @@ -2,10 +2,10 @@ import React from 'react'; export default class Items extends React.PureComponent { render() { - if (this.props.items.length === 0) return null; + if (this.props.items.length === 0) return null; // if there are no items in category don't render it let seeMoreHTML; - if (this.props.seeMoreFunction && this.props.items.length === 3) seeMoreHTML = ; + if (this.props.seeMoreFunction && this.props.items.length === 3) seeMoreHTML = ; // only render see more button if there are enough addons return (
diff --git a/src/components/modals/settings/sections/BackgroundSettings.jsx b/src/components/modals/settings/sections/BackgroundSettings.jsx index dae31f65..6f82164c 100644 --- a/src/components/modals/settings/sections/BackgroundSettings.jsx +++ b/src/components/modals/settings/sections/BackgroundSettings.jsx @@ -4,7 +4,7 @@ import Checkbox from '../Checkbox'; import Section from '../Section'; export default class BackgroundSettings extends React.PureComponent { - DefaultGradientSettings = { "angle": "180", "gradient": [{ "colour": this.props.language.background.disabled, "stop": 0 }], "type": "linear" }; + DefaultGradientSettings = { 'angle': '180', 'gradient': [{ 'colour': this.props.language.background.disabled, 'stop': 0 }], 'type': 'linear' }; constructor(...args) { super(...args); @@ -90,7 +90,7 @@ export default class BackgroundSettings extends React.PureComponent { pickFirstColour = (event) => { const value = event.target.value; - this.setState({ gradientSettings: { "angle": "180", "gradient": [{ "colour": value, "stop": 0 }], "type": "linear" } }); + this.setState({ gradientSettings: { 'angle': '180', 'gradient': [{ 'colour': value, 'stop': 0 }], 'type': 'linear' } }); } addColour = () => { @@ -137,17 +137,17 @@ export default class BackgroundSettings extends React.PureComponent { return (
{gradientHasMoreThanOneColour ? () : null} - this.onGradientChange(event, i)} value={g.colour}> - + this.onGradientChange(event, i)} value={g.colour}> + {gradientHasMoreThanOneColour ? ( - this.onGradientChange(event, i)} /> + this.onGradientChange(event, i)} /> ) : null}
); }); colourSettings = (
{gradientInputs} - {this.state.gradientSettings.gradient[0].colour !== this.props.language.background.disabled ? () : null} + {this.state.gradientSettings.gradient[0].colour !== this.props.language.background.disabled ? () : null}
); } @@ -160,7 +160,7 @@ export default class BackgroundSettings extends React.PureComponent {
    - +
    -

    {this.props.language.background.customURL} this.resetItem('customBackground')}>{this.props.language.reset}

    +

    {this.props.language.background.custom_url} this.resetItem('customBackground')}>{this.props.language.reset}

    -

    {this.props.language.background.custombackground} this.resetItem('customBackground')}>{this.props.language.reset}

    +

    {this.props.language.background.custom_background} this.resetItem('customBackground')}>{this.props.language.reset}

    -

    {this.props.language.background.customcolour} this.resetItem('customBackgroundColour')}>{this.props.language.reset}

    +

    {this.props.language.background.custom_colour} this.resetItem('customBackgroundColour')}>{this.props.language.reset}

    {colourSettings}
diff --git a/src/components/modals/settings/sections/SearchSettings.jsx b/src/components/modals/settings/sections/SearchSettings.jsx index 0003754b..510a2660 100644 --- a/src/components/modals/settings/sections/SearchSettings.jsx +++ b/src/components/modals/settings/sections/SearchSettings.jsx @@ -28,7 +28,7 @@ export default class SearchSettings extends React.PureComponent {
    - + this.onGradientChange(event, i)} value={g.colour}> - + this.onGradientChange(event, i)} value={g.colour}> +
); }); } colourSettings = (
{gradientInputs} - {this.state.gradientSettings.gradient[0].colour !== this.props.language.background.disabled && !gradientHasMoreThanOneColour ? () : null} + {this.state.gradientSettings.gradient[0].colour !== this.props.language.background.disabled && + !gradientHasMoreThanOneColour ? () : null + }
); } return ( @@ -193,8 +195,7 @@ export default class BackgroundSettings extends React.PureComponent { label={this.props.language.background.api} name='backgroundapi' id='backgroundAPI' - onChange={() => localStorage.setItem('backgroundAPI', document.getElementById('backgroundAPI').value)} - > + onChange={() => localStorage.setItem('backgroundAPI', document.getElementById('backgroundAPI').value)} > diff --git a/src/components/modals/tabs/Addons.jsx b/src/components/modals/tabs/Addons.jsx index 3c396ac2..7569baf0 100644 --- a/src/components/modals/tabs/Addons.jsx +++ b/src/components/modals/tabs/Addons.jsx @@ -23,7 +23,10 @@ export default class Addons extends React.PureComponent { version: '1.0.0', icon: '' }, - button: + button: '' + } + this.buttons = { + uninstall: , } } @@ -46,29 +49,21 @@ export default class Addons extends React.PureComponent { document.getElementById('item').style.display = 'block'; document.getElementById('marketplace').style.display = 'none'; } else { - this.setState({ - button: - }); document.getElementById('marketplace').style.display = 'block'; document.getElementById('item').style.display = 'none'; } + this.setState({ button: this.buttons.uninstall }); } uninstall() { let type, data = this.state.current_data.content.type; switch (data) { - case 'photos': - type = 'photo_packs'; - break; - case 'quotes': - type = 'quote_packs'; - break; - default: - type = this.state.current_data.type; - break; + case 'photos': type = 'photo_packs'; break; + case 'quotes': type = 'quote_packs'; break; + default: type = this.state.current_data.type; break; } MarketplaceFunctions.uninstall(this.state.current_data.name, type); - toast(this.props.toastLanguage.removed); + toast(this.props.toastLanguage.uninstalled); this.setState({ button: '', installed: JSON.parse(localStorage.getItem('installed')) @@ -76,28 +71,19 @@ export default class Addons extends React.PureComponent { } install(input) { - let button; MarketplaceFunctions.install(input.type, input, true); toast(this.props.toastLanguage.installed); - button = ; this.setState({ - button: button, + button: this.buttons.uninstall, installed: JSON.parse(localStorage.getItem('installed')) }); } componentDidMount() { document.getElementById('file-input').onchange = (e) => { - const file = e.target.files[0]; - if (file.type !== 'application/json') return console.error(`expected json, got ${file.type}`); - const reader = new FileReader(); - reader.readAsText(file, 'UTF-8'); - - reader.onload = (readerEvent) => { - const content = JSON.parse(readerEvent.target.result); - this.install(content); - }; + reader.readAsText(e.target.files[0], 'UTF-8'); + reader.onload = (readerEvent) => this.install(JSON.parse(readerEvent.target.result)); }; this.setState({ installed: JSON.parse(localStorage.getItem('installed')) }); @@ -107,20 +93,22 @@ export default class Addons extends React.PureComponent { let content = this.toggle('item', 'addon', input)} /> if (this.state.installed.length === 0) { - content =
-
- -

{this.props.language.empty.title}

-

{this.props.language.empty.description}

- -
-
; + content = ( +
+
+ +

{this.props.language.empty.title}

+

{this.props.language.empty.description}

+ +
+
+ ); } return (
- +

{this.props.language.added}

{content} diff --git a/src/components/modals/tabs/Marketplace.jsx b/src/components/modals/tabs/Marketplace.jsx index 738de35f..27830d19 100644 --- a/src/components/modals/tabs/Marketplace.jsx +++ b/src/components/modals/tabs/Marketplace.jsx @@ -8,59 +8,48 @@ import * as Constants from '../../../modules/constants'; import Items from '../marketplace/Items'; export default class Marketplace extends React.PureComponent { - constructor(...args) { - super(...args); - this.state = { - themes: [], - settings: [], - photo_packs: [], - quote_packs: [], - see_more: [], - see_more_type: '', - current_data: { - type: '', - name: '', - content: {} - }, - button: '', - featured: {}, - done: false, - item_data: { - name: 'Name', - author: 'Author', - description: 'Description', - updated: '???', - version: '1.0.0', - icon: '' - } + constructor(...args) { + super(...args); + this.state = { + settings: [], + photo_packs: [], + quote_packs: [], + see_more: [], + see_more_type: '', + current_data: { + type: '', + name: '', + content: {} + }, + button: '', + featured: {}, + done: false, + item_data: { + name: 'Name', + author: 'Author', + description: 'Description', + updated: '???', + version: '1.0.0', + icon: '' } - - this.offlineHTML =
-
- -

{this.props.language.offline.title}

-

{this.props.language.offline.description}

-
-
; + } + this.buttons = { + uninstall: , + install: + } } - async toggle(type, type2, data) { - if (type === 'seemore') { + async toggle(type, type2, data) { + switch (type) { + case 'seemore': document.getElementById('marketplace').style.display = 'none'; document.getElementById('seemore').style.display = 'block'; - return this.setState({ - see_more: this.state[type2], - see_more_type: type2 - }); - } - - if (type === 'item') { + this.setState({ see_more: this.state[type2], see_more_type: type2 }); + break; + case 'item': let info; - try { - info = await (await fetch(`${Constants.MARKETPLACE_URL}/item/${type2}/${data}`)).json(); - } catch (e) { - return toast(this.props.toastLanguage.error); - } + try { info = await (await fetch(`${Constants.MARKETPLACE_URL}/item/${type2}/${data}`)).json(); } + catch (e) { return toast(this.props.toastLanguage.error); } this.setState({ current_data: { type: type2, name: data, content: info }, @@ -74,111 +63,117 @@ export default class Marketplace extends React.PureComponent { } }); + let button = this.buttons.install; + const installed = JSON.parse(localStorage.getItem('installed')); + if (installed.some(item => item.name === data)) button = this.buttons.uninstall; + this.setState({ button: button }); + document.getElementById('marketplace').style.display = 'none'; document.getElementById('seemore').style.display = 'none'; document.getElementById('item').style.display = 'block'; - - let button = ; - const installed = JSON.parse(localStorage.getItem('installed')); - if (installed.some(item => item.name === data)) button = ; - this.setState({ button: button }); - } else { + break; + default: document.getElementById('marketplace').style.display = 'block'; document.getElementById('item').style.display = 'none'; document.getElementById('seemore').style.display = 'none'; + break; } } - async getItems() { - const data = await (await fetch(Constants.MARKETPLACE_URL + '/all')).json(); - const featured = await (await fetch(Constants.MARKETPLACE_URL + '/featured')).json(); - this.setState({ - themes: data.data.themes, - settings: data.data.settings, - photo_packs: data.data.photo_packs, - quote_packs: data.data.quote_packs, - see_more: data.data.photo_packs, - featured: featured.data, - done: true - }); - } + async getItems() { + const data = await (await fetch(Constants.MARKETPLACE_URL + '/all')).json(); + const featured = await (await fetch(Constants.MARKETPLACE_URL + '/featured')).json(); + this.setState({ + settings: data.data.settings, + photo_packs: data.data.photo_packs, + quote_packs: data.data.quote_packs, + see_more: data.data.photo_packs, + featured: featured.data, + done: true + }); + } - install() { - let button; - MarketplaceFunctions.install(this.state.current_data.type, this.state.current_data.content.data); - toast(this.props.toastLanguage.installed); - button = ; - this.setState({ button: button }); + manage(type) { + switch (type) { + case 'install': MarketplaceFunctions.install(this.state.current_data.type, this.state.current_data.content.data); break; + case 'uninstall': MarketplaceFunctions.uninstall(this.state.current_data.content.data.name, this.state.current_data.type); break; + default: break; } + toast(this.props.toastLanguage[type + 'ed']); + let button = this.buttons.install; + if (type === 'install') button = this.buttons.uninstall; + this.setState({ button: button }); + } - uninstall() { - MarketplaceFunctions.uninstall(this.state.current_data.name, this.state.current_data.type); - toast(this.props.toastLanguage.removed); - this.setState({ - button: - }); - } - - componentDidMount() { - if (navigator.onLine === false) return; - this.getItems(); - } + componentDidMount() { + if (navigator.onLine === false) return; + this.getItems(); + } render() { - if (navigator.onLine === false) return this.offlineHTML; - if (this.state.done === false) { + const returnMessage = (msg) => { return (
-

{this.props.updateLanguage.loading}

+ {msg}
); } + if (navigator.onLine === false) { + return returnMessage( + + +

{this.props.language.offline.title}

+

{this.props.language.offline.description}

+ + ); + } + + if (this.state.done === false) return returnMessage(

{this.props.updateLanguage.loading}

) + return (
-
+

{this.state.featured.title}

{this.state.featured.name}

-
- + this.toggle('item', 'photo_packs', input)} seeMoreFunction={() => this.toggle('seemore', 'photo_packs')} /> - this.toggle('item', 'settings', input)} seeMoreFunction={() => this.toggle('seemore', 'settings')} /> - this.toggle('item', 'quote_packs', input)} seeMoreFunction={() => this.toggle('seemore', 'quote_packs')} /> -
- + this.toggle()} language={this.props.language.product} - /> -
+ function={() => this.toggle()} language={this.props.language.product} /> +
this.toggle()} /> this.toggle('item', this.state.see_more_type, input)} - items={this.state.see_more} - /> -
+ items={this.state.see_more} /> +
- ) + ); } } \ No newline at end of file diff --git a/src/components/widgets/Date.jsx b/src/components/widgets/Date.jsx index 879a3e1f..6d0fd5a9 100644 --- a/src/components/widgets/Date.jsx +++ b/src/components/widgets/Date.jsx @@ -63,6 +63,6 @@ export default class DateWidget extends React.PureComponent { } render() { - return {this.state.date} + return {this.state.date} } } \ No newline at end of file diff --git a/src/modules/helpers/background/hexToRgb.js b/src/modules/helpers/background/hexToRgb.js index 4e458912..1d7e92b5 100644 --- a/src/modules/helpers/background/hexToRgb.js +++ b/src/modules/helpers/background/hexToRgb.js @@ -10,7 +10,6 @@ export default function hexToRgb(value) { if (valid) { if (value[0] === '#') value = value.slice(1, value.length); - if (value.length === 3) value = value.replace(regexp, '$1$1$2$2$3$3'); const red = parseInt(value.substr(0, 2), 16); diff --git a/src/modules/helpers/background/rgbToHsv.js b/src/modules/helpers/background/rgbToHsv.js index a5c02bb6..5738d639 100644 --- a/src/modules/helpers/background/rgbToHsv.js +++ b/src/modules/helpers/background/rgbToHsv.js @@ -1,16 +1,14 @@ export default function rgbToHSv({ red, green, blue }) { - let rr; - let gg; - let bb; - let h; - let s; + let rr, gg, bb, h, s; const rabs = red / 255; const gabs = green / 255; const babs = blue / 255; + const v = Math.max(rabs, gabs, babs); const diff = v - Math.min(rabs, gabs, babs); const diffc = c => (v - c) / 6 / diff + 1 / 2; + if (diff === 0) { h = 0; s = 0; @@ -20,18 +18,11 @@ export default function rgbToHSv({ red, green, blue }) { gg = diffc(gabs); bb = diffc(babs); - if (rabs === v) { - h = bb - gg; - } else if (gabs === v) { - h = (1 / 3) + rr - bb; - } else if (babs === v) { - h = (2 / 3) + gg - rr; - } - if (h < 0) { - h += 1; - } else if (h > 1) { - h -= 1; - } + if (rabs === v) h = bb - gg; + else if (gabs === v) h = (1 / 3) + rr - bb; + else if (babs === v) h = (2 / 3) + gg - rr; + if (h < 0) h += 1; + else if (h > 1) h -= 1; } return { diff --git a/src/modules/helpers/background/setRgba.js b/src/modules/helpers/background/setRgba.js index e93c26c6..b1efcad5 100644 --- a/src/modules/helpers/background/setRgba.js +++ b/src/modules/helpers/background/setRgba.js @@ -10,9 +10,7 @@ export default function setRGBA(red, green, blue, alpha) { blue: blue | 0, }; - if (isValidRGBValue(alpha) === true) { - color.alpha = alpha | 0; - } + if (isValidRGBValue(alpha) === true) color.alpha = alpha | 0; // RGBToHSL(color.r, color.g, color.b); diff --git a/src/modules/helpers/marketplace.js b/src/modules/helpers/marketplace.js index aa4a6e64..ac284b0e 100644 --- a/src/modules/helpers/marketplace.js +++ b/src/modules/helpers/marketplace.js @@ -7,39 +7,31 @@ export default class MarketplaceFunctions { } static uninstall(name, type) { - let installed = JSON.parse(localStorage.getItem('installed')); - - const uninstallStuff = () => { - for (let i = 0; i < installed.length; i++) { - if (installed[i].name === name) { - installed.splice(i, 1); - break; - } - } - localStorage.setItem('installed', JSON.stringify(installed)); - }; - switch (type) { case 'settings': const oldSettings = JSON.parse(localStorage.getItem('backup_settings')); localStorage.clear(); oldSettings.forEach(item => localStorage.setItem(item.name, item.value)); - uninstallStuff(); break; case 'quote_packs': - localStorage.removeItem('quote_packs'); - localStorage.removeItem('quote_api'); - uninstallStuff(); - break; + localStorage.removeItem('quote_packs'); + localStorage.removeItem('quote_api'); + break; default: - try { - localStorage.removeItem(type); - uninstallStuff(); - } catch (e) { + try { localStorage.removeItem(type); } + catch (e) { toast('Failed to uninstall addon, check the console'); console.error(e); } - } + } + let installed = JSON.parse(localStorage.getItem('installed')); + for (let i = 0; i < installed.length; i++) { + if (installed[i].name === name) { + installed.splice(i, 1); + break; + } + } + localStorage.setItem('installed', JSON.stringify(installed)); } static install(type, input, sideload) { @@ -54,9 +46,6 @@ export default class MarketplaceFunctions { case 'photo_packs': localStorage.setItem('photo_packs', JSON.stringify(input.photos)); break; - case 'theme': - localStorage.setItem('theme', input.theme); - break; case 'quote_packs': if (input.quote_api) localStorage.setItem('quote_api', JSON.stringify(input.quote_api)); localStorage.setItem('quote_packs', JSON.stringify(input.quotes)); diff --git a/src/translations/en.json b/src/translations/en.json index 73f30d8a..1a95a599 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -90,7 +90,7 @@ "quote": "Quote Copied", "reset": "Reset successfully", "installed": "Successfully installed", - "removed": "Successfully removed", + "uninstalled": "Successfully removed", "error": "Something went wrong", "imported": "Successfully imported" }, @@ -142,5 +142,13 @@ "title": "Notes", "placeholder": "Type here" } + }, + "welcome": { + "title": "Welcome to", + "information": "Information", + "thankyoumessage1": "Thank you for downloading Mue Tab,", + "thankyoumessage2": "we hope you enjoy your time with our extension.", + "support": "Support", + "close": "Close" } } \ No newline at end of file From f6d8ccf6e7335bc34a1f59537c38909cd365e12e Mon Sep 17 00:00:00 2001 From: David Ralph Date: Wed, 4 Nov 2020 12:19:12 +0000 Subject: [PATCH 013/162] Finish welcome modal --- manifest/chrome.json | 2 +- manifest/firefox.json | 2 +- manifest/opera.json | 2 +- package.json | 2 +- src/App.jsx | 10 ++++++++-- src/components/modals/Welcome.jsx | 20 +++++++++++--------- src/components/modals/tabs/Settings.jsx | 7 ++----- src/modules/helpers/settings.js | 4 +++- src/modules/json/default_settings.json | 4 ++++ src/scss/modules/_welcome.scss | 4 ++++ 10 files changed, 36 insertions(+), 21 deletions(-) diff --git a/manifest/chrome.json b/manifest/chrome.json index d79c7e33..2e913d2b 100644 --- a/manifest/chrome.json +++ b/manifest/chrome.json @@ -3,7 +3,7 @@ "offline_enabled": true, "name": "Mue", "description": "Fast, open and free-to-use new tab page for most modern browsers.", - "version": "4.2.1", + "version": "5.0.0", "browser_action": { "default_icon": "icons/128x128.png" }, diff --git a/manifest/firefox.json b/manifest/firefox.json index 78fac847..3e8d660c 100644 --- a/manifest/firefox.json +++ b/manifest/firefox.json @@ -2,7 +2,7 @@ "manifest_version": 2, "name": "Mue", "description": "Fast, open and free-to-use new tab page for most modern browsers.", - "version": "4.2.1", + "version": "5.0.0", "browser_action": { "default_icon": "icons/128x128.png" }, diff --git a/manifest/opera.json b/manifest/opera.json index d8c21ad8..a0021666 100644 --- a/manifest/opera.json +++ b/manifest/opera.json @@ -2,7 +2,7 @@ "manifest_version": 2, "name": "Mue", "description": "Fast, open and free-to-use new tab page for most modern browsers.", - "version": "4.2.0", + "version": "5.0.0", "browser_action": { "default_icon": "icons/128x128.png" }, diff --git a/package.json b/package.json index a77c8670..60576d28 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,7 @@ "homepage": "https://muetab.com", "bugs": "https://github.com/mue/mue/issues/new?assignees=&labels=bug&template=bug-report.md&title=%5BBUG%5D", "license": "BSD-3-Clause", - "version": "4.2.1", + "version": "5.0.0", "dependencies": { "@eartharoid/dtf": "^1.0.8", "@material-ui/core": "4.11.0", diff --git a/src/App.jsx b/src/App.jsx index 89bad205..cbcd1723 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -35,6 +35,12 @@ export default class App extends React.PureComponent { componentDidMount() { if (!localStorage.getItem('firstRun')) SettingsFunctions.setDefaultSettings(); + if (localStorage.getItem('showWelcome') === 'true') this.setState({ welcomeModal: true }); + } + + closeWelcome() { + localStorage.setItem('showWelcome', false); + this.setState({ welcomeModal: false }); } // Render all the components @@ -77,8 +83,8 @@ export default class App extends React.PureComponent { language={language.update} modalClose={() => this.setState({ updateModal: false })} /> - this.setState({ welcomeModal: false })} isOpen={this.state.welcomeModal} className={modalClassList} overlayClassName='Overlay' ariaHideApp={false}> - this.setState({ welcomeModal: false })} /> + this.closeWelcome()} isOpen={this.state.welcomeModal} className={modalClassList} overlayClassName='Overlay' ariaHideApp={false}> + this.closeWelcome()} language={language.welcome} />
diff --git a/src/components/modals/Welcome.jsx b/src/components/modals/Welcome.jsx index fa51e447..c4c33129 100644 --- a/src/components/modals/Welcome.jsx +++ b/src/components/modals/Welcome.jsx @@ -1,5 +1,7 @@ import React from 'react'; import EmailIcon from '@material-ui/icons/Email'; +import TwitterIcon from '@material-ui/icons/Twitter'; +import ForumIcon from '@material-ui/icons/Forum'; export default class Welcome extends React.PureComponent { render() { @@ -7,17 +9,17 @@ export default class Welcome extends React.PureComponent {
×
-

Welcome to

+

{this.props.language.title}

Mue Tab

- celebration -

Information

-

Thank you for downloading Mue Tab,
we hope you enjoy your time with our extension.

-

Support

- {/* twitter - discord */} - + celebration +

{this.props.language.information}

+

{this.props.language.thankyoumessage1},
{this.props.language.thankyoumessage2}

+

{this.props.language.support}

+ + +
- +
); diff --git a/src/components/modals/tabs/Settings.jsx b/src/components/modals/tabs/Settings.jsx index 0bd1de47..79c084bb 100644 --- a/src/components/modals/tabs/Settings.jsx +++ b/src/components/modals/tabs/Settings.jsx @@ -25,11 +25,8 @@ export default class Settings extends React.PureComponent { } document.getElementById('file-input').onchange = (e) => { // import settings - const file = e.target.files[0]; - if (file.type !== 'application/json') return console.error(`expected json, got ${file.type}`); - const reader = new FileReader(); - reader.readAsText(file, 'UTF-8'); + reader.readAsText(e.target.files[0], 'UTF-8'); reader.onload = (readerEvent) => { const content = JSON.parse(readerEvent.target.result); @@ -82,7 +79,7 @@ export default class Settings extends React.PureComponent { - + diff --git a/src/modules/helpers/settings.js b/src/modules/helpers/settings.js index b95c6f56..7752ad49 100644 --- a/src/modules/helpers/settings.js +++ b/src/modules/helpers/settings.js @@ -65,7 +65,7 @@ export default class SettingsFunctions { window.location.reload(); } - static setDefaultSettings() { + static setDefaultSettings(reset) { localStorage.clear(); defaultSettings.forEach((element) => localStorage.setItem(element.name, element.value)); @@ -85,6 +85,8 @@ export default class SettingsFunctions { document.documentElement.lang = browserLanguage; } else localStorage.setItem('language', 'en'); + if (reset) localStorage.setItem('showWelcome', false); + // Finally we set this to true so it doesn't run the function on every load localStorage.setItem('firstRun', true); window.location.reload(); diff --git a/src/modules/json/default_settings.json b/src/modules/json/default_settings.json index 6ca05bc5..217410bd 100644 --- a/src/modules/json/default_settings.json +++ b/src/modules/json/default_settings.json @@ -86,5 +86,9 @@ { "name": "favouriteQuoteEnabled", "value": false + }, + { + "name": "showWelcome", + "value": true } ] \ No newline at end of file diff --git a/src/scss/modules/_welcome.scss b/src/scss/modules/_welcome.scss index 1b78fdae..a6266343 100644 --- a/src/scss/modules/_welcome.scss +++ b/src/scss/modules/_welcome.scss @@ -45,4 +45,8 @@ height: 24px; width: auto; } +} + +.welcomeLink { + color: black !important; } \ No newline at end of file From e1510e82775c921467f70d569309f76ea918ac4c Mon Sep 17 00:00:00 2001 From: David Ralph Date: Thu, 5 Nov 2020 16:01:31 +0000 Subject: [PATCH 014/162] cleanup --- src/App.jsx | 2 +- src/components/modals/MainModal.jsx | 5 +- src/components/modals/Update.jsx | 2 +- src/components/modals/Welcome.jsx | 2 +- src/components/modals/settings/Checkbox.jsx | 2 +- src/components/modals/settings/Section.jsx | 20 +++-- src/components/modals/settings/Slider.jsx | 2 +- .../settings/sections/BackgroundSettings.jsx | 9 ++- .../settings/sections/LanguageSettings.jsx | 3 +- .../settings/sections/SearchSettings.jsx | 5 +- src/components/modals/tabs/Addons.jsx | 64 ++++++---------- src/components/modals/tabs/Marketplace.jsx | 4 +- src/components/modals/tabs/Settings.jsx | 2 +- src/components/widgets/Background.jsx | 11 ++- src/components/widgets/Date.jsx | 11 +-- src/components/widgets/Maximise.jsx | 2 +- src/components/widgets/Notes.jsx | 3 +- src/components/widgets/Quote.jsx | 2 +- src/components/widgets/Search.jsx | 4 +- src/index.js | 2 - src/modules/helpers/background/setRgba.js | 4 +- src/modules/helpers/marketplace.js | 4 +- src/modules/json/search_engines.json | 2 +- src/scss/_mixins.scss | 3 + src/scss/modules/_buttons.scss | 76 ++++--------------- src/scss/modules/_checkbox.scss | 2 +- src/scss/modules/_credit.scss | 3 +- src/scss/modules/_dropdown.scss | 2 +- src/scss/modules/_marketplace.scss | 41 +++++----- src/scss/modules/_modal.scss | 14 ++-- src/scss/modules/_navbar.scss | 35 --------- src/scss/modules/_quote.scss | 2 +- src/scss/modules/_search.scss | 3 +- src/scss/modules/_settings.scss | 14 ++-- src/scss/modules/_toast.scss | 4 +- 35 files changed, 127 insertions(+), 239 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index cbcd1723..e3a9b5cd 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -12,7 +12,7 @@ import Date from './components/widgets/Date'; import Navbar from './components/Navbar'; -import SettingsFunctions from './modules/helpers/settings'; +import SettingsFunctions from './modules/helpers/Settings'; import { ToastContainer } from 'react-toastify'; import Modal from 'react-modal'; import merge from 'lodash.merge'; diff --git a/src/components/modals/MainModal.jsx b/src/components/modals/MainModal.jsx index c9d0428d..426bbf4b 100644 --- a/src/components/modals/MainModal.jsx +++ b/src/components/modals/MainModal.jsx @@ -55,8 +55,7 @@ export default class MainModal extends React.PureComponent { settingsActive: '' }); break; - default: - break; + default: break; } } @@ -73,6 +72,6 @@ export default class MainModal extends React.PureComponent {
{this.state.tab}
- ) + ); } } \ No newline at end of file diff --git a/src/components/modals/Update.jsx b/src/components/modals/Update.jsx index 0d09aa33..0bac3dfe 100644 --- a/src/components/modals/Update.jsx +++ b/src/components/modals/Update.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import * as Constants from '../../modules/constants'; +import * as Constants from '../../modules/Constants'; export default class Update extends React.PureComponent { constructor(...args) { diff --git a/src/components/modals/Welcome.jsx b/src/components/modals/Welcome.jsx index c4c33129..3626720a 100644 --- a/src/components/modals/Welcome.jsx +++ b/src/components/modals/Welcome.jsx @@ -21,7 +21,7 @@ export default class Welcome extends React.PureComponent {
-
+
); } } \ No newline at end of file diff --git a/src/components/modals/settings/Checkbox.jsx b/src/components/modals/settings/Checkbox.jsx index 25a1d11c..41c4efd9 100644 --- a/src/components/modals/settings/Checkbox.jsx +++ b/src/components/modals/settings/Checkbox.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import SettingsFunctions from '../../../modules/helpers/settings'; +import SettingsFunctions from '../../../modules/helpers/Settings'; import CheckboxUI from '@material-ui/core/Checkbox'; import FormControlLabel from '@material-ui/core/FormControlLabel'; diff --git a/src/components/modals/settings/Section.jsx b/src/components/modals/settings/Section.jsx index 47bd9a97..9634fd36 100644 --- a/src/components/modals/settings/Section.jsx +++ b/src/components/modals/settings/Section.jsx @@ -13,29 +13,27 @@ export default class Section extends React.PureComponent { toggleSection() { const display = (this.state.display === 'none') ? 'block': 'none'; - const transform = (this.state.transform === 'rotate(0)') ? 'rotate(-180deg)' : 'rotate(0)'; this.setState({ display: display, - transform: transform + transform: (this.state.transform === 'rotate(0)') ? 'rotate(-180deg)' : 'rotate(0)' }); - if (this.props.onToggle) { - this.props.onToggle(display); - } + if (this.props.onToggle) this.props.onToggle(display); } render() { let extraHTML, expandMore, slider, noDropdown; + if (this.props.children) { extraHTML =
  • {this.props.children}
    • - expandMore = this.toggleSection()} - />; + expandMore = ( + this.toggleSection()} /> + ); } - if (this.props.slider !== false) slider = ; if (this.props.noDropdown) noDropdown = 'nodropdown'; diff --git a/src/components/modals/settings/Slider.jsx b/src/components/modals/settings/Slider.jsx index 2826d475..8ca4bf3b 100644 --- a/src/components/modals/settings/Slider.jsx +++ b/src/components/modals/settings/Slider.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import SettingsFunctions from '../../../modules/helpers/settings'; +import SettingsFunctions from '../../../modules/helpers/Settings'; export default class Slider extends React.PureComponent { constructor(...args) { diff --git a/src/components/modals/settings/sections/BackgroundSettings.jsx b/src/components/modals/settings/sections/BackgroundSettings.jsx index 6deefd51..97ca0921 100644 --- a/src/components/modals/settings/sections/BackgroundSettings.jsx +++ b/src/components/modals/settings/sections/BackgroundSettings.jsx @@ -7,6 +7,9 @@ import { ColorPicker } from 'react-color-gradient-picker'; import hexToRgb from '../../../../modules/helpers/background/hexToRgb'; import rgbToHex from '../../../../modules/helpers/background/rgbToHex'; +import 'react-color-gradient-picker/dist/index.css'; +import '../../../../scss/react-color-picker-gradient-picker-custom-styles.scss'; + export default class BackgroundSettings extends React.PureComponent { DefaultGradientSettings = { "angle": "180", "gradient": [{ "colour": this.props.language.background.disabled, "stop": 0 }], "type": "linear" }; GradientPickerInitalState = undefined; @@ -171,7 +174,8 @@ export default class BackgroundSettings extends React.PureComponent {
    this.onGradientChange(event, i)} value={g.colour}> -
    ); +
    + ); }); } colourSettings = ( @@ -180,7 +184,8 @@ export default class BackgroundSettings extends React.PureComponent { {this.state.gradientSettings.gradient[0].colour !== this.props.language.background.disabled && !gradientHasMoreThanOneColour ? () : null } - ); + + ); } return ( diff --git a/src/components/modals/settings/sections/LanguageSettings.jsx b/src/components/modals/settings/sections/LanguageSettings.jsx index 0bc2ec7c..16c75288 100644 --- a/src/components/modals/settings/sections/LanguageSettings.jsx +++ b/src/components/modals/settings/sections/LanguageSettings.jsx @@ -9,8 +9,7 @@ export default class LanguageSettings extends React.PureComponent { localStorage.setItem('language', document.getElementById('language').value)} - > + onChange={() => localStorage.setItem('language', document.getElementById('language').value)} > diff --git a/src/components/modals/settings/sections/SearchSettings.jsx b/src/components/modals/settings/sections/SearchSettings.jsx index bd2c9177..69f4cbb2 100644 --- a/src/components/modals/settings/sections/SearchSettings.jsx +++ b/src/components/modals/settings/sections/SearchSettings.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import SettingsFunctions from '../../../../modules/helpers/settings'; +import SettingsFunctions from '../../../../modules/helpers/Settings'; import { toast } from 'react-toastify'; import Section from '../Section'; import Dropdown from '../Dropdown'; @@ -31,8 +31,7 @@ export default class SearchSettings extends React.PureComponent { SettingsFunctions.setSearchEngine(document.getElementById('searchEngine').value)} - > + onChange={() => SettingsFunctions.setSearchEngine(document.getElementById('searchEngine').value)} > {searchEngines.map((engine) => )} diff --git a/src/components/modals/tabs/Addons.jsx b/src/components/modals/tabs/Addons.jsx index 7569baf0..6cdf5a0c 100644 --- a/src/components/modals/tabs/Addons.jsx +++ b/src/components/modals/tabs/Addons.jsx @@ -3,13 +3,13 @@ import LocalMallIcon from '@material-ui/icons/LocalMall'; import { toast } from 'react-toastify'; import Item from '../marketplace/Item'; import Items from '../marketplace/Items'; -import MarketplaceFunctions from '../../../modules/helpers/marketplace'; +import MarketplaceFunctions from '../../../modules/helpers/Marketplace'; export default class Addons extends React.PureComponent { constructor(...args) { super(...args); this.state = { - installed: [], + installed: JSON.parse(localStorage.getItem('installed')), current_data: { type: '', name: '', @@ -26,7 +26,7 @@ export default class Addons extends React.PureComponent { button: '' } this.buttons = { - uninstall: , + uninstall: , } } @@ -55,38 +55,24 @@ export default class Addons extends React.PureComponent { this.setState({ button: this.buttons.uninstall }); } - uninstall() { - let type, data = this.state.current_data.content.type; - switch (data) { - case 'photos': type = 'photo_packs'; break; - case 'quotes': type = 'quote_packs'; break; - default: type = this.state.current_data.type; break; - } - MarketplaceFunctions.uninstall(this.state.current_data.name, type); - toast(this.props.toastLanguage.uninstalled); - this.setState({ - button: '', - installed: JSON.parse(localStorage.getItem('installed')) - }); - } - - install(input) { - MarketplaceFunctions.install(input.type, input, true); - toast(this.props.toastLanguage.installed); - this.setState({ - button: this.buttons.uninstall, - installed: JSON.parse(localStorage.getItem('installed')) - }); + manage(type, input) { + switch (type) { + case 'install': MarketplaceFunctions.install(input.type, input, true); break; + case 'uninstall': MarketplaceFunctions.uninstall(this.state.current_data.name, this.state.current_data.content.type); break; + default: break; } + toast(this.props.toastLanguage[type + 'ed']); + let button = ''; + if (type === 'install') button = this.buttons.uninstall; + this.setState({ button: button, installed: JSON.parse(localStorage.getItem('installed')) }); + } componentDidMount() { document.getElementById('file-input').onchange = (e) => { const reader = new FileReader(); reader.readAsText(e.target.files[0], 'UTF-8'); - reader.onload = (readerEvent) => this.install(JSON.parse(readerEvent.target.result)); + reader.onload = (readerEvent) => this.manage('install', JSON.parse(readerEvent.target.result)); }; - - this.setState({ installed: JSON.parse(localStorage.getItem('installed')) }); } render() { @@ -96,25 +82,25 @@ export default class Addons extends React.PureComponent { content = (
    - -

    {this.props.language.empty.title}

    -

    {this.props.language.empty.description}

    - + +

    {this.props.language.empty.title}

    +

    {this.props.language.empty.description}

    +
    ); } return ( -
    -
    + +

    {this.props.language.added}

    {content} -
    - this.toggle()} language={this.props.marketplaceLanguage.product} /> -
    - ); +
    + this.toggle()} language={this.props.marketplaceLanguage.product} /> +     + ); } -} +} \ No newline at end of file diff --git a/src/components/modals/tabs/Marketplace.jsx b/src/components/modals/tabs/Marketplace.jsx index 27830d19..7d69e028 100644 --- a/src/components/modals/tabs/Marketplace.jsx +++ b/src/components/modals/tabs/Marketplace.jsx @@ -3,8 +3,8 @@ import WifiOffIcon from '@material-ui/icons/WifiOff'; import ArrowBackIcon from '@material-ui/icons/ArrowBack'; import { toast } from 'react-toastify'; import Item from '../marketplace/Item'; -import MarketplaceFunctions from '../../../modules/helpers/marketplace'; -import * as Constants from '../../../modules/constants'; +import MarketplaceFunctions from '../../../modules/helpers/Marketplace'; +import * as Constants from '../../../modules/Constants'; import Items from '../marketplace/Items'; export default class Marketplace extends React.PureComponent { diff --git a/src/components/modals/tabs/Settings.jsx b/src/components/modals/tabs/Settings.jsx index 79c084bb..029fcef4 100644 --- a/src/components/modals/tabs/Settings.jsx +++ b/src/components/modals/tabs/Settings.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import SettingsFunctions from '../../../modules/helpers/settings'; +import SettingsFunctions from '../../../modules/helpers/Settings'; import Checkbox from '../settings/Checkbox'; import Section from '../settings/Section'; import { toast } from 'react-toastify'; diff --git a/src/components/widgets/Background.jsx b/src/components/widgets/Background.jsx index 84c15f24..fa99f57b 100644 --- a/src/components/widgets/Background.jsx +++ b/src/components/widgets/Background.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import * as Constants from '../../modules/constants'; +import * as Constants from '../../modules/Constants'; export default class Background extends React.PureComponent { gradientStyleBuilder(gradientSettings) { @@ -80,11 +80,10 @@ export default class Background extends React.PureComponent { this.setBackground(randomPhoto.url.default, null, randomPhoto.photographer); this.setCredit(randomPhoto.photographer); document.getElementById('location').textContent = randomPhoto.location; - } else if (customBackgroundColour) { - this.setBackground(null, customBackgroundColour, 'false'); - } else if (customBackground !== '') { // Local - this.setBackground(customBackground, null, 'false'); - } else if (customBackgroundVideo) { + } + else if (customBackgroundColour) this.setBackground(null, customBackgroundColour, 'false'); + else if (customBackground !== '') this.setBackground(customBackground, null, 'false'); // Local + else if (customBackgroundVideo) { document.getElementById('backgroundImage').innerHTML = `     diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx index 7f1db7e7..35a44e27 100644 --- a/src/components/Navbar.jsx +++ b/src/components/Navbar.jsx @@ -4,6 +4,8 @@ import Gear from '@material-ui/icons/SettingsRounded'; import NewReleases from '@material-ui/icons/NewReleasesRounded'; import NotesIcon from '@material-ui/icons/AssignmentRounded'; import Tooltip from '@material-ui/core/Tooltip'; +import Report from '@material-ui/icons/SmsFailed'; +import * as Constants from '../modules/Constants'; const Notes = React.lazy(() => import('./widgets/Notes')); // the user probably won't use the notes feature every time so we lazy load const renderLoader = () =>
    ; @@ -18,14 +20,23 @@ export default class Navbar extends React.PureComponent { ); if (localStorage.getItem('refresh') === 'false') refreshHTML = null; + // toggle feedback button + let feedbackHTML = ( + + + + ); + if (Constants.BETA_VERSION === false) feedbackHTML = null; + return (
    - +
    + {feedbackHTML} diff --git a/src/components/modals/Feedback.jsx b/src/components/modals/Feedback.jsx new file mode 100644 index 00000000..3cdf8dbe --- /dev/null +++ b/src/components/modals/Feedback.jsx @@ -0,0 +1,23 @@ +import React from 'react'; + +export default class Feedback extends React.PureComponent { + render() { + return
    +

    Give us feedback

    + × + +

    + +

    + +

    + +

    + +

    + +


    + +
    ; + } +} diff --git a/src/components/modals/MainModal.jsx b/src/components/modals/Main.jsx similarity index 100% rename from src/components/modals/MainModal.jsx rename to src/components/modals/Main.jsx diff --git a/src/modules/constants.js b/src/modules/constants.js index bc9068e6..3d3bd189 100644 --- a/src/modules/constants.js +++ b/src/modules/constants.js @@ -2,4 +2,5 @@ export const API_URL = 'https://api.muetab.com'; export const UNSPLASH_URL = 'https://unsplash.muetab.com'; export const MARKETPLACE_URL = 'https://marketplace.muetab.com'; export const WEBSITE_URL = 'https://muetab.com'; -export const OFFLINE_IMAGES = 20; \ No newline at end of file +export const OFFLINE_IMAGES = 20; +export const BETA_VERSION = true; \ No newline at end of file diff --git a/src/scss/modules/_modal.scss b/src/scss/modules/_modal.scss index 86c01bfa..1d008987 100644 --- a/src/scss/modules/_modal.scss +++ b/src/scss/modules/_modal.scss @@ -180,4 +180,56 @@ .tablinks svg { top: 0.125em; position: relative; +} + +#feedbackmodal { + position: absolute; + margin: auto; + top: 0; + right: 0; + bottom: 0; + left: 0; + width: 400px; + height: 100px; +} + +.feedback { + width: 400px; + padding: 5px; + + h1, .closeModal { + font-size: 2.5em; + } + + span { + font-size: 6em; + } + + button { + width: 100%; + border-radius: 48px; + outline: none; + border: none; + padding: 15px 20px; + font-size: 1.5em; + background: linear-gradient(90deg, #ffb032 0%, #dd3b67 100%); + color: #ffffff; + text-transform: uppercase; + cursor: pointer; + } + + input[type=text] { + width: 100%; + font-size: 1em; + } + + input[type=range] { + margin-left: 20px; + margin-right: 20px; + vertical-align: middle; + } + + label.values { + font-weight: 700; + } } \ No newline at end of file From 4486050d06070123f0e8d87d4f715a5d6d4bce1d Mon Sep 17 00:00:00 2001 From: David Ralph Date: Sat, 28 Nov 2020 13:24:40 +0000 Subject: [PATCH 016/162] fix --- .gitignore | 1 + package.json | 4 ++-- src/App.jsx | 2 +- src/components/Navbar.jsx | 2 +- src/components/modals/Update.jsx | 2 +- src/components/modals/settings/Checkbox.jsx | 2 +- src/components/modals/settings/Slider.jsx | 2 +- src/components/modals/settings/sections/SearchSettings.jsx | 2 +- src/components/modals/tabs/Addons.jsx | 2 +- src/components/modals/tabs/Marketplace.jsx | 4 ++-- src/components/modals/tabs/Settings.jsx | 2 +- src/components/widgets/Background.jsx | 2 +- src/components/widgets/Clock.jsx | 5 +++++ src/components/widgets/Quote.jsx | 2 +- 14 files changed, 20 insertions(+), 14 deletions(-) diff --git a/.gitignore b/.gitignore index 88927bbd..0cea6301 100644 --- a/.gitignore +++ b/.gitignore @@ -6,4 +6,5 @@ build/ # Files package-lock.json yarn-error.log +.eslintcache yarn.lock \ No newline at end of file diff --git a/package.json b/package.json index 27d42c94..ac338caf 100644 --- a/package.json +++ b/package.json @@ -26,8 +26,8 @@ "supports-webp": "2.0.1" }, "devDependencies": { - "react-scripts": "4.0.1", - "node-sass": "^5.0.0" + "node-sass": "4.14.1", + "react-scripts": "4.0.1" }, "scripts": { "start": "react-scripts start", diff --git a/src/App.jsx b/src/App.jsx index 1f027034..e47a5451 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -12,7 +12,7 @@ import Date from './components/widgets/Date'; import Navbar from './components/Navbar'; -import SettingsFunctions from './modules/helpers/Settings'; +import SettingsFunctions from './modules/helpers/settings'; import { ToastContainer } from 'react-toastify'; import Modal from 'react-modal'; import merge from 'lodash.merge'; diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx index 35a44e27..f7aff52c 100644 --- a/src/components/Navbar.jsx +++ b/src/components/Navbar.jsx @@ -5,7 +5,7 @@ import NewReleases from '@material-ui/icons/NewReleasesRounded'; import NotesIcon from '@material-ui/icons/AssignmentRounded'; import Tooltip from '@material-ui/core/Tooltip'; import Report from '@material-ui/icons/SmsFailed'; -import * as Constants from '../modules/Constants'; +import * as Constants from '../modules/constants'; const Notes = React.lazy(() => import('./widgets/Notes')); // the user probably won't use the notes feature every time so we lazy load const renderLoader = () =>
    ; diff --git a/src/components/modals/Update.jsx b/src/components/modals/Update.jsx index 0bac3dfe..0d09aa33 100644 --- a/src/components/modals/Update.jsx +++ b/src/components/modals/Update.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import * as Constants from '../../modules/Constants'; +import * as Constants from '../../modules/constants'; export default class Update extends React.PureComponent { constructor(...args) { diff --git a/src/components/modals/settings/Checkbox.jsx b/src/components/modals/settings/Checkbox.jsx index 41c4efd9..25a1d11c 100644 --- a/src/components/modals/settings/Checkbox.jsx +++ b/src/components/modals/settings/Checkbox.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import SettingsFunctions from '../../../modules/helpers/Settings'; +import SettingsFunctions from '../../../modules/helpers/settings'; import CheckboxUI from '@material-ui/core/Checkbox'; import FormControlLabel from '@material-ui/core/FormControlLabel'; diff --git a/src/components/modals/settings/Slider.jsx b/src/components/modals/settings/Slider.jsx index 8ca4bf3b..2826d475 100644 --- a/src/components/modals/settings/Slider.jsx +++ b/src/components/modals/settings/Slider.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import SettingsFunctions from '../../../modules/helpers/Settings'; +import SettingsFunctions from '../../../modules/helpers/settings'; export default class Slider extends React.PureComponent { constructor(...args) { diff --git a/src/components/modals/settings/sections/SearchSettings.jsx b/src/components/modals/settings/sections/SearchSettings.jsx index 69f4cbb2..c336c750 100644 --- a/src/components/modals/settings/sections/SearchSettings.jsx +++ b/src/components/modals/settings/sections/SearchSettings.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import SettingsFunctions from '../../../../modules/helpers/Settings'; +import SettingsFunctions from '../../../../modules/helpers/settings'; import { toast } from 'react-toastify'; import Section from '../Section'; import Dropdown from '../Dropdown'; diff --git a/src/components/modals/tabs/Addons.jsx b/src/components/modals/tabs/Addons.jsx index 6cdf5a0c..aad2680e 100644 --- a/src/components/modals/tabs/Addons.jsx +++ b/src/components/modals/tabs/Addons.jsx @@ -3,7 +3,7 @@ import LocalMallIcon from '@material-ui/icons/LocalMall'; import { toast } from 'react-toastify'; import Item from '../marketplace/Item'; import Items from '../marketplace/Items'; -import MarketplaceFunctions from '../../../modules/helpers/Marketplace'; +import MarketplaceFunctions from '../../../modules/helpers/marketplace'; export default class Addons extends React.PureComponent { constructor(...args) { diff --git a/src/components/modals/tabs/Marketplace.jsx b/src/components/modals/tabs/Marketplace.jsx index 7d69e028..27830d19 100644 --- a/src/components/modals/tabs/Marketplace.jsx +++ b/src/components/modals/tabs/Marketplace.jsx @@ -3,8 +3,8 @@ import WifiOffIcon from '@material-ui/icons/WifiOff'; import ArrowBackIcon from '@material-ui/icons/ArrowBack'; import { toast } from 'react-toastify'; import Item from '../marketplace/Item'; -import MarketplaceFunctions from '../../../modules/helpers/Marketplace'; -import * as Constants from '../../../modules/Constants'; +import MarketplaceFunctions from '../../../modules/helpers/marketplace'; +import * as Constants from '../../../modules/constants'; import Items from '../marketplace/Items'; export default class Marketplace extends React.PureComponent { diff --git a/src/components/modals/tabs/Settings.jsx b/src/components/modals/tabs/Settings.jsx index 029fcef4..79c084bb 100644 --- a/src/components/modals/tabs/Settings.jsx +++ b/src/components/modals/tabs/Settings.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import SettingsFunctions from '../../../modules/helpers/Settings'; +import SettingsFunctions from '../../../modules/helpers/settings'; import Checkbox from '../settings/Checkbox'; import Section from '../settings/Section'; import { toast } from 'react-toastify'; diff --git a/src/components/widgets/Background.jsx b/src/components/widgets/Background.jsx index fa99f57b..dce35c26 100644 --- a/src/components/widgets/Background.jsx +++ b/src/components/widgets/Background.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import * as Constants from '../../modules/Constants'; +import * as Constants from '../../modules/constants'; export default class Background extends React.PureComponent { gradientStyleBuilder(gradientSettings) { diff --git a/src/components/widgets/Clock.jsx b/src/components/widgets/Clock.jsx index 6ba3d149..e56e2c37 100644 --- a/src/components/widgets/Clock.jsx +++ b/src/components/widgets/Clock.jsx @@ -16,6 +16,11 @@ export default class Clock extends React.PureComponent { this.timer = setTimeout(() => { const now = new Date(); + // Percentage + if (localStorage.getItem('percentageComplete') === 'true') { + return this.setState({ time: (now.getHours() / 24).toFixed(2) + '%'}) + } + // Analog clock if (localStorage.getItem('analog') === 'true') this.setState({ time: now }); else { diff --git a/src/components/widgets/Quote.jsx b/src/components/widgets/Quote.jsx index b42ded62..1cbfedc4 100644 --- a/src/components/widgets/Quote.jsx +++ b/src/components/widgets/Quote.jsx @@ -2,7 +2,7 @@ import React from 'react'; import Quotes from '@muetab/quotes'; import FileCopy from '@material-ui/icons/FilterNone'; import { toast } from 'react-toastify'; -import * as Constants from '../../modules/Constants'; +import * as Constants from '../../modules/constants'; import TwitterIcon from '@material-ui/icons/Twitter'; import StarIcon from '@material-ui/icons/Star'; import StarIcon2 from '@material-ui/icons/StarBorder'; From 87dd07c45c684cb41adb4b21bbb65d182403ee85 Mon Sep 17 00:00:00 2001 From: David Ralph Date: Sat, 28 Nov 2020 13:33:04 +0000 Subject: [PATCH 017/162] actually fix it --- package.json | 4 ++-- src/components/modals/Welcome.jsx | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index ac338caf..bbe04067 100644 --- a/package.json +++ b/package.json @@ -20,14 +20,14 @@ "react": "17.0.1", "react-clock": "^2.4.0", "react-color-gradient-picker": "^0.1.2", - "react-dom": "16.14.0", + "react-dom": "17.0.1", "react-modal": "3.12.1", "react-toastify": "6.1.0", "supports-webp": "2.0.1" }, "devDependencies": { "node-sass": "4.14.1", - "react-scripts": "4.0.1" + "react-scripts": "^3.4.4" }, "scripts": { "start": "react-scripts start", diff --git a/src/components/modals/Welcome.jsx b/src/components/modals/Welcome.jsx index 3626720a..bcc150ea 100644 --- a/src/components/modals/Welcome.jsx +++ b/src/components/modals/Welcome.jsx @@ -15,9 +15,9 @@ export default class Welcome extends React.PureComponent {

    {this.props.language.information}

    {this.props.language.thankyoumessage1},
    {this.props.language.thankyoumessage2}

    {this.props.language.support}

    - - - + + +
    From 82e1d7684aa300d07d469b0c3b750fd6196ab3c0 Mon Sep 17 00:00:00 2001 From: David Ralph Date: Sun, 29 Nov 2020 14:32:08 +0000 Subject: [PATCH 018/162] Cleanup, refactor and new features --- src/App.jsx | 22 ++-- src/components/modals/settings/Checkbox.jsx | 1 + src/components/modals/settings/Section.jsx | 14 ++- .../settings/sections/BackgroundSettings.jsx | 1 + .../settings/sections/SearchSettings.jsx | 8 +- src/components/modals/tabs/Settings.jsx | 30 +++-- .../widgets/{ => background}/Background.jsx | 25 ++-- .../widgets/{ => background}/Favourite.jsx | 0 .../widgets/{ => background}/Maximise.jsx | 0 .../{ => background}/PhotoInformation.jsx | 0 .../widgets/background}/offline_images.json | 0 .../background/scss/_photoinformation.scss | 86 ++++++++++++++ .../widgets/background/scss/index.scss | 69 +++++++++++ .../widgets/{ => greeting}/Greeting.jsx | 2 + .../widgets/greeting/greeting.scss} | 6 +- .../{ => widgets/navbar}/Navbar.jsx | 6 +- src/components/widgets/{ => navbar}/Notes.jsx | 2 +- .../widgets/{icons => navbar}/Pin.jsx | 0 .../widgets/navbar/scss/_notes.scss | 80 +++++++++++++ .../widgets/navbar/scss/index.scss} | 84 +------------- src/components/widgets/{ => quote}/Quote.jsx | 4 +- src/components/widgets/quote/quote.scss | 59 ++++++++++ .../widgets/{ => search}/Search.jsx | 4 +- src/components/widgets/search/search.scss | 48 ++++++++ .../widgets/search}/search_engines.json | 0 src/components/widgets/{ => time}/Clock.jsx | 10 +- src/components/widgets/{ => time}/Date.jsx | 10 +- src/components/widgets/time/clock.scss | 24 ++++ src/modules/{json => }/default_settings.json | 0 src/modules/helpers/settings.js | 4 +- src/scss/index.scss | 46 -------- src/scss/modules/_clock.scss | 20 ---- src/scss/modules/_credit.scss | 107 ------------------ src/scss/modules/_quote.scss | 56 --------- src/scss/modules/_search.scss | 46 -------- src/scss/modules/_settings.scss | 6 + src/translations/en.json | 3 +- 37 files changed, 462 insertions(+), 421 deletions(-) rename src/components/widgets/{ => background}/Background.jsx (89%) rename src/components/widgets/{ => background}/Favourite.jsx (100%) rename src/components/widgets/{ => background}/Maximise.jsx (100%) rename src/components/widgets/{ => background}/PhotoInformation.jsx (100%) rename src/{modules/json => components/widgets/background}/offline_images.json (100%) create mode 100644 src/components/widgets/background/scss/_photoinformation.scss create mode 100644 src/components/widgets/background/scss/index.scss rename src/components/widgets/{ => greeting}/Greeting.jsx (98%) rename src/{scss/modules/_greeting.scss => components/widgets/greeting/greeting.scss} (92%) rename src/components/{ => widgets/navbar}/Navbar.jsx (89%) rename src/components/widgets/{ => navbar}/Notes.jsx (98%) rename src/components/widgets/{icons => navbar}/Pin.jsx (100%) create mode 100644 src/components/widgets/navbar/scss/_notes.scss rename src/{scss/modules/_navbar.scss => components/widgets/navbar/scss/index.scss} (54%) rename src/components/widgets/{ => quote}/Quote.jsx (98%) create mode 100644 src/components/widgets/quote/quote.scss rename src/components/widgets/{ => search}/Search.jsx (96%) create mode 100644 src/components/widgets/search/search.scss rename src/{modules/json => components/widgets/search}/search_engines.json (100%) rename src/components/widgets/{ => time}/Clock.jsx (93%) rename src/components/widgets/{ => time}/Date.jsx (88%) create mode 100644 src/components/widgets/time/clock.scss rename src/modules/{json => }/default_settings.json (100%) delete mode 100644 src/scss/modules/_clock.scss delete mode 100644 src/scss/modules/_credit.scss delete mode 100644 src/scss/modules/_quote.scss delete mode 100644 src/scss/modules/_search.scss diff --git a/src/App.jsx b/src/App.jsx index e47a5451..c4fdca4d 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,16 +1,16 @@ import React from 'react'; -import Background from './components/widgets/Background'; -import Clock from './components/widgets/Clock'; -import Greeting from './components/widgets/Greeting'; -import Quote from './components/widgets/Quote'; -import Search from './components/widgets/Search'; -import Maximise from './components/widgets/Maximise'; -import Favourite from './components/widgets/Favourite'; -import PhotoInformation from './components/widgets/PhotoInformation'; -import Date from './components/widgets/Date'; +import Background from './components/widgets/background/Background'; +import Clock from './components/widgets/time/Clock'; +import Greeting from './components/widgets/greeting/Greeting'; +import Quote from './components/widgets/quote/Quote'; +import Search from './components/widgets/search/Search'; +import Maximise from './components/widgets/background/Maximise'; +import Favourite from './components/widgets/background/Favourite'; +import PhotoInformation from './components/widgets/background/PhotoInformation'; +import Date from './components/widgets/time/Date'; -import Navbar from './components/Navbar'; +import Navbar from './components/widgets/navbar/Navbar'; import SettingsFunctions from './modules/helpers/settings'; import { ToastContainer } from 'react-toastify'; @@ -38,6 +38,8 @@ export default class App extends React.PureComponent { componentDidMount() { if (!localStorage.getItem('firstRun')) SettingsFunctions.setDefaultSettings(); if (localStorage.getItem('showWelcome') === 'true') this.setState({ welcomeModal: true }); + const css = localStorage.getItem('customcss'); + if (css) document.head.insertAdjacentHTML('beforeend', ''); } closeWelcome() { diff --git a/src/components/modals/settings/Checkbox.jsx b/src/components/modals/settings/Checkbox.jsx index 25a1d11c..5b799c6d 100644 --- a/src/components/modals/settings/Checkbox.jsx +++ b/src/components/modals/settings/Checkbox.jsx @@ -19,6 +19,7 @@ export default class Checkbox extends React.PureComponent { render() { let text = this.props.text; if (this.props.newFeature) text = {this.props.text} NEW; + else if (this.props.betaFeature) text = {this.props.text} BETA; return ( diff --git a/src/components/modals/settings/Section.jsx b/src/components/modals/settings/Section.jsx index 9634fd36..130b34f0 100644 --- a/src/components/modals/settings/Section.jsx +++ b/src/components/modals/settings/Section.jsx @@ -12,7 +12,7 @@ export default class Section extends React.PureComponent { } toggleSection() { - const display = (this.state.display === 'none') ? 'block': 'none'; + const display = (this.state.display === 'none') ? 'block' : 'none'; this.setState({ display: display, @@ -26,7 +26,11 @@ export default class Section extends React.PureComponent { let extraHTML, expandMore, slider, noDropdown; if (this.props.children) { - extraHTML =
  • {this.props.children}
    • + extraHTML = ( +
    +
  • {this.props.children}
    • +
    + ); expandMore = ( ; - if (this.props.noDropdown) noDropdown = 'nodropdown'; + if (this.props.dropdown === false) noDropdown = 'nodropdown'; return (

    this.toggleSection()}>{this.props.title}

    {expandMore} {slider} -
    - {extraHTML} -
    + {extraHTML}
    ); } diff --git a/src/components/modals/settings/sections/BackgroundSettings.jsx b/src/components/modals/settings/sections/BackgroundSettings.jsx index 97ca0921..aa6d6b6e 100644 --- a/src/components/modals/settings/sections/BackgroundSettings.jsx +++ b/src/components/modals/settings/sections/BackgroundSettings.jsx @@ -194,6 +194,7 @@ export default class BackgroundSettings extends React.PureComponent { +
      +
        + +
        -

        {this.props.language.searchbar.custom} this.resetSearch()}>{this.props.language.reset}

        +

        {this.props.language.searchbar.custom} this.resetSearch()}>{this.props.language.reset}

      diff --git a/src/components/modals/tabs/Settings.jsx b/src/components/modals/tabs/Settings.jsx index 79c084bb..57b6cecd 100644 --- a/src/components/modals/tabs/Settings.jsx +++ b/src/components/modals/tabs/Settings.jsx @@ -9,8 +9,12 @@ import SearchSettings from '../settings/sections/SearchSettings'; import LanguageSettings from '../settings/sections/LanguageSettings'; export default class Settings extends React.PureComponent { - resetGreeting() { - document.getElementById('greetingName').value = ''; + resetItem(type) { + switch (type) { + case 'greeting': document.getElementById('greetingName').value = ''; break; + case 'css': document.getElementById('customcss').value = ''; break; + default: break; + } toast(this.props.toastLanguage.reset); } @@ -18,6 +22,7 @@ export default class Settings extends React.PureComponent { // Settings document.getElementById('greetingName').value = localStorage.getItem('greetingName'); document.getElementById('language').value = localStorage.getItem('language'); + document.getElementById('customcss').value = localStorage.getItem('customcss'); if (document.getElementById('modal').classList.contains('dark')) { // Dark theme support for dropdowns const choices = document.getElementsByClassName('choices'); @@ -45,13 +50,14 @@ export default class Settings extends React.PureComponent { +
        -

        {this.props.language.greeting.name} this.resetGreeting()}>{this.props.language.reset}

        +

        {this.props.language.greeting.name} this.resetItem('greeting')}>{this.props.language.reset}

      @@ -63,17 +69,17 @@ export default class Settings extends React.PureComponent { - +
      -
      -
      - -
      - - - - +
      + + + +
        +

        Custom CSS this.resetItem('css')}>{this.props.language.reset} NEW

        + +
      diff --git a/src/components/widgets/Background.jsx b/src/components/widgets/background/Background.jsx similarity index 89% rename from src/components/widgets/Background.jsx rename to src/components/widgets/background/Background.jsx index dce35c26..e89c88af 100644 --- a/src/components/widgets/Background.jsx +++ b/src/components/widgets/background/Background.jsx @@ -1,5 +1,7 @@ import React from 'react'; -import * as Constants from '../../modules/constants'; +import * as Constants from '../../../modules/constants'; + +import './scss/index.scss'; export default class Background extends React.PureComponent { gradientStyleBuilder(gradientSettings) { @@ -46,7 +48,7 @@ export default class Background extends React.PureComponent { } doOffline() { // Handles setting the background if the user is offline - const offlineImages = require('../../modules/json/offline_images.json'); + const offlineImages = require('./offline_images.json'); const photographers = Object.keys(offlineImages); // Get all photographers from the keys in offlineImages.json const photographer = photographers[Math.floor(Math.random() * photographers.length)]; // Select a random photographer from the keys const randomImage = offlineImages[photographer].photo[ @@ -67,7 +69,6 @@ export default class Background extends React.PureComponent { const customBackgroundColour = localStorage.getItem('customBackgroundColour'); const customBackground = localStorage.getItem('customBackground'); const favourited = JSON.parse(localStorage.getItem('favourite')); - const customBackgroundVideo = localStorage.getItem('customBackgroundVideo'); if (favourited) { if (offlineMode === 'true') return this.doOffline(); @@ -82,13 +83,13 @@ export default class Background extends React.PureComponent { document.getElementById('location').textContent = randomPhoto.location; } else if (customBackgroundColour) this.setBackground(null, customBackgroundColour, 'false'); - else if (customBackground !== '') this.setBackground(customBackground, null, 'false'); // Local - else if (customBackgroundVideo) { - document.getElementById('backgroundImage').innerHTML = ` - `; - document.querySelector('.photoInformation').style.display = 'none'; // Hide the credit + else if (customBackground !== '') { + if (customBackground.includes('.mp4') || customBackground.includes('.webm') || customBackground.includes('.ogg')) { + document.getElementById('backgroundImage').innerHTML = ` + `; + } else this.setBackground(customBackground, null, 'false'); // Local } else { // Online if (offlineMode === 'true') return this.doOffline(); try { // First we try and get an image from the API... @@ -96,9 +97,7 @@ export default class Background extends React.PureComponent { let requestURL; switch (localStorage.getItem('backgroundAPI')) { - case 'unsplash': - requestURL = `${Constants.UNSPLASH_URL}/getImage`; - break; + case 'unsplash': requestURL = `${Constants.UNSPLASH_URL}/getImage`; break; default: // Defaults to Mue if (localStorage.getItem('supportswebp') === 'true' && enabled === 'true') requestURL = `${Constants.API_URL}/getImage?webp=true`; else requestURL = `${Constants.API_URL}/getImage?category=Outdoors`; diff --git a/src/components/widgets/Favourite.jsx b/src/components/widgets/background/Favourite.jsx similarity index 100% rename from src/components/widgets/Favourite.jsx rename to src/components/widgets/background/Favourite.jsx diff --git a/src/components/widgets/Maximise.jsx b/src/components/widgets/background/Maximise.jsx similarity index 100% rename from src/components/widgets/Maximise.jsx rename to src/components/widgets/background/Maximise.jsx diff --git a/src/components/widgets/PhotoInformation.jsx b/src/components/widgets/background/PhotoInformation.jsx similarity index 100% rename from src/components/widgets/PhotoInformation.jsx rename to src/components/widgets/background/PhotoInformation.jsx diff --git a/src/modules/json/offline_images.json b/src/components/widgets/background/offline_images.json similarity index 100% rename from src/modules/json/offline_images.json rename to src/components/widgets/background/offline_images.json diff --git a/src/components/widgets/background/scss/_photoinformation.scss b/src/components/widgets/background/scss/_photoinformation.scss new file mode 100644 index 00000000..d443c155 --- /dev/null +++ b/src/components/widgets/background/scss/_photoinformation.scss @@ -0,0 +1,86 @@ +.photoInformation { + position: absolute; + bottom: 1rem; + left: 1rem; + font-size: calc(10px + 0.1vmin) !important; + text-shadow: 0 0 10px rgba(0, 0, 0, 0.3); + + svg { + float: left; + vertical-align: middle; + margin-right: 1rem; + font-size: calc(10px + 2vmin); + } + + span { + display: none; + } + + h1 { + position: relative; + } + + svg, + h1 { + display: inline; + } + + svg:hover+.infoCard { + display: block; + } +} + +.infoCard { + display: none; + background: #fff; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); + color: #000; + position: fixed; + bottom: 3.25rem; + left: 0.7em; + padding: 1rem; + border-radius: 24px 24px 24px 0; + max-width: 500px; + text-align: left; + text-shadow: none; + + span { + display: block; + } + + svg { + margin-right: 0.5rem; + vertical-align: middle; + display: inline-flex; + padding: 2px; + } + + span, + svg { + font-size: 2em; + } + + h1, + .infoIcon { + font-size: 3em; + } + + .infoIcon { + padding: 4px; + } + + hr { + height: 3px; + background: #2d3436; + outline: none; + border: none; + } +} + +.infoCard:hover { + display: block !important; +} + +.photoInformationHover { + cursor: pointer; +} \ No newline at end of file diff --git a/src/components/widgets/background/scss/index.scss b/src/components/widgets/background/scss/index.scss new file mode 100644 index 00000000..9e7a62f6 --- /dev/null +++ b/src/components/widgets/background/scss/index.scss @@ -0,0 +1,69 @@ +@import 'photoinformation'; +@import '../../../../scss/mixins'; + +#backgroundImage { + height: 100vh; + background-size: cover; + background-repeat: no-repeat; + background-position: center; + background-attachment: fixed; +} + +#backgroundVideo { + position: fixed; + right: 0; + bottom: 0; + min-width: 100%; + min-height: 100%; +} + +.fade-in { + @include animation('fadein 2s'); +} + +@include keyframes(fadein) { + from { + opacity: 0; + } + + to { + opacity: 1; + } +} + +.backgroundEffects { + opacity: 0.7; + transition: ease 0.6s; +} + +.creditlink { + text-decoration: none; + color: white; +} + +.view { + bottom: 10px; + right: 25px; +} + +.favourite { + bottom: 10px; + right: 50px; + padding-right: 5px; +} + +.view, +.favourite { + position: absolute; + transition: all 0.5s ease 0s; + + &:hover { + transform: scale(1.1); + } +} + +#viewButton, +#favouriteButton { + width: auto; + cursor: pointer; +} \ No newline at end of file diff --git a/src/components/widgets/Greeting.jsx b/src/components/widgets/greeting/Greeting.jsx similarity index 98% rename from src/components/widgets/Greeting.jsx rename to src/components/widgets/greeting/Greeting.jsx index 3f986632..40fb121c 100644 --- a/src/components/widgets/Greeting.jsx +++ b/src/components/widgets/greeting/Greeting.jsx @@ -1,5 +1,7 @@ import React from 'react'; +import './greeting.scss'; + export default class Greeting extends React.PureComponent { constructor(...args) { super(...args); diff --git a/src/scss/modules/_greeting.scss b/src/components/widgets/greeting/greeting.scss similarity index 92% rename from src/scss/modules/_greeting.scss rename to src/components/widgets/greeting/greeting.scss index db18fba5..fe984650 100644 --- a/src/scss/modules/_greeting.scss +++ b/src/components/widgets/greeting/greeting.scss @@ -1,4 +1,4 @@ -.greeting { - margin: 0; - font-size: 1.6em; +.greeting { + margin: 0; + font-size: 1.6em; } \ No newline at end of file diff --git a/src/components/Navbar.jsx b/src/components/widgets/navbar/Navbar.jsx similarity index 89% rename from src/components/Navbar.jsx rename to src/components/widgets/navbar/Navbar.jsx index f7aff52c..c4f06188 100644 --- a/src/components/Navbar.jsx +++ b/src/components/widgets/navbar/Navbar.jsx @@ -5,9 +5,11 @@ import NewReleases from '@material-ui/icons/NewReleasesRounded'; import NotesIcon from '@material-ui/icons/AssignmentRounded'; import Tooltip from '@material-ui/core/Tooltip'; import Report from '@material-ui/icons/SmsFailed'; -import * as Constants from '../modules/constants'; +import * as Constants from '../../../modules/constants'; -const Notes = React.lazy(() => import('./widgets/Notes')); // the user probably won't use the notes feature every time so we lazy load +import './scss/index.scss'; + +const Notes = React.lazy(() => import('./Notes')); // the user probably won't use the notes feature every time so we lazy load const renderLoader = () =>
      ; export default class Navbar extends React.PureComponent { diff --git a/src/components/widgets/Notes.jsx b/src/components/widgets/navbar/Notes.jsx similarity index 98% rename from src/components/widgets/Notes.jsx rename to src/components/widgets/navbar/Notes.jsx index 5395b665..81e9e470 100644 --- a/src/components/widgets/Notes.jsx +++ b/src/components/widgets/navbar/Notes.jsx @@ -1,7 +1,7 @@ import React from 'react'; import TextareaAutosize from '@material-ui/core/TextareaAutosize'; import CopyIcon from '@material-ui/icons/FileCopyRounded'; -import Pin from './icons/Pin'; +import Pin from './Pin'; import NotesIcon from '@material-ui/icons/AssignmentRounded'; export default class Notes extends React.PureComponent { diff --git a/src/components/widgets/icons/Pin.jsx b/src/components/widgets/navbar/Pin.jsx similarity index 100% rename from src/components/widgets/icons/Pin.jsx rename to src/components/widgets/navbar/Pin.jsx diff --git a/src/components/widgets/navbar/scss/_notes.scss b/src/components/widgets/navbar/scss/_notes.scss new file mode 100644 index 00000000..8d5c879e --- /dev/null +++ b/src/components/widgets/navbar/scss/_notes.scss @@ -0,0 +1,80 @@ +.notes { + position: relative; + display: inline-block; + + h3 { + text-shadow: none; + margin: 0; + } +} + +.notes .notescontainer { + text-align: center; + padding: 15px; + visibility: hidden; + background-color: #fff; + color: #000; + text-align: center; + border-radius: 12px; + position: absolute; + z-index: 1; + top: 80%; + left: 50%; + margin-left: -125px; + + input[type=text] { + border: none; + color: #2d3436; + } + + svg, + input[type=text] { + display: inline-flex; + } + + svg { + float: left; + } + + ::placeholder { + color: #636e72; + opacity: 1; + } +} + + +.notes:hover .notescontainer { + visibility: visible; +} + +textarea { + overflow: none; + border: none; + outline: none; + width: 200px; + resize: none; + height: 100px; + margin: 10px; +} + +.noteIcon { + display: inline; + font-size: 1em; + float: none; +} + +.topbarnotes { + text-align: center; + + svg { + font-size: 48px; + float: left !important; + padding: 9px; + } + + h3 { + font-size: 48px; + float: right; + margin-right: 20px; + } +} \ No newline at end of file diff --git a/src/scss/modules/_navbar.scss b/src/components/widgets/navbar/scss/index.scss similarity index 54% rename from src/scss/modules/_navbar.scss rename to src/components/widgets/navbar/scss/index.scss index 73a140dc..2a48bb44 100644 --- a/src/scss/modules/_navbar.scss +++ b/src/components/widgets/navbar/scss/index.scss @@ -1,3 +1,6 @@ +@import 'notes'; +@import '../../../../scss/variables'; + .navbar-container { position: absolute; top: 1rem; @@ -63,87 +66,6 @@ } } -.notes { - position: relative; - display: inline-block; - - h3 { - text-shadow: none; - margin: 0; - } -} - -.notes .notescontainer { - text-align: center; - padding: 15px; - visibility: hidden; - background-color: #fff; - color: #000; - text-align: center; - border-radius: 12px; - position: absolute; - z-index: 1; - top: 80%; - left: 50%; - margin-left: -125px; - - input[type=text] { - border: none; - color: #2d3436; - } - - svg, - input[type=text] { - display: inline-flex; - } - - svg { - float: left; - } - - ::placeholder { - color: #636e72; - opacity: 1; - } -} - - -.notes:hover .notescontainer { - visibility: visible; -} - -textarea { - overflow: none; - border: none; - outline: none; - width: 200px; - resize: none; - height: 100px; - margin: 10px; -} - -.noteIcon { - display: inline; - font-size: 1em; - float: none; -} - -.topbarnotes { - text-align: center; - - svg { - font-size: 48px; - float: left !important; - padding: 9px; - } - - h3 { - font-size: 48px; - float: right; - margin-right: 20px; - } -} - .visibilityshow { visibility: visible !important; } \ No newline at end of file diff --git a/src/components/widgets/Quote.jsx b/src/components/widgets/quote/Quote.jsx similarity index 98% rename from src/components/widgets/Quote.jsx rename to src/components/widgets/quote/Quote.jsx index 1cbfedc4..44c250b3 100644 --- a/src/components/widgets/Quote.jsx +++ b/src/components/widgets/quote/Quote.jsx @@ -2,11 +2,13 @@ import React from 'react'; import Quotes from '@muetab/quotes'; import FileCopy from '@material-ui/icons/FilterNone'; import { toast } from 'react-toastify'; -import * as Constants from '../../modules/constants'; +import * as Constants from '../../../modules/constants'; import TwitterIcon from '@material-ui/icons/Twitter'; import StarIcon from '@material-ui/icons/Star'; import StarIcon2 from '@material-ui/icons/StarBorder'; +import './quote.scss'; + export default class Quote extends React.PureComponent { constructor(...args) { super(...args); diff --git a/src/components/widgets/quote/quote.scss b/src/components/widgets/quote/quote.scss new file mode 100644 index 00000000..23a57d7e --- /dev/null +++ b/src/components/widgets/quote/quote.scss @@ -0,0 +1,59 @@ +@import '../../../scss/variables'; + +.quote { + font-size: 0.8em; + text-shadow: 0 0 10px rgba(0, 0, 0, 0.3); +} + +@media screen and (min-width: 600px) { + .quote { + margin-left: 30%; + margin-right: 30%; + } +} + +.quoteauthor { + font-size: 0.9em; + letter-spacing: 0.5px; + margin: 0; +} + +.quoteAuthor, +.copyButton { + display: inline; + font-size: 0.8em; + position: relative !important; + display: block; + margin: 0 auto; +} + +.copyButton { + cursor: pointer; + vertical-align: middle; + float: middle; + margin: 0 auto; + text-align: right; + transition: ease 0.2s !important; + + &:hover { + transform: scale(1.1); + } +} + +i.material-icons, +h1.quoteauthor { + display: inline; +} + +button.copyButton { + background: transparent; + border: none; + color: map-get($theme-colours, 'main'); + padding: 20px 20px; + text-align: center; + text-decoration: none; + font-size: 20px; + cursor: pointer; + border-radius: 5px; + display: table-cell +} \ No newline at end of file diff --git a/src/components/widgets/Search.jsx b/src/components/widgets/search/Search.jsx similarity index 96% rename from src/components/widgets/Search.jsx rename to src/components/widgets/search/Search.jsx index a9a81c8c..9873f497 100644 --- a/src/components/widgets/Search.jsx +++ b/src/components/widgets/search/Search.jsx @@ -2,7 +2,9 @@ import React from 'react'; import SearchIcon from '@material-ui/icons/Search'; import MicIcon from '@material-ui/icons/Mic'; -const searchEngines = require('../../modules/json/search_engines.json'); +import './search.scss'; + +const searchEngines = require('./search_engines.json'); export default class Search extends React.PureComponent { constructor(...args) { diff --git a/src/components/widgets/search/search.scss b/src/components/widgets/search/search.scss new file mode 100644 index 00000000..aab31294 --- /dev/null +++ b/src/components/widgets/search/search.scss @@ -0,0 +1,48 @@ +@import '../../../scss/variables'; + +.searchbar { + position: absolute; + left: 20px; + top: 20px; + display: flex; + flex-direction: row; + display: block; + color: map-get($theme-colours, 'main-text-color'); + + input[type=text] { + width: 140px; + margin-left: 12px; + border-radius: 24px; + font-size: calc(5px + 1.2vmin); + background: transparent; + border: none; + position: absolute; + background-color: rgba(0, 0, 0, 0.1); + -webkit-transition: width 0.5s ease-in-out; + transition: width 0.5s ease-in-out; + + &:focus { + width: 400px; + background-color: rgba(0, 0, 0, .3); + } + } + + .MuiSvgIcon-root { + margin-top: 4px; + font-size: 30px; + filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.3)); + cursor: pointer; + } +} + +.input.searchtext { + border: none; +} + +.micIcon { + margin-right: 10px; +} + +#searchEngine { + width: 130px; +} \ No newline at end of file diff --git a/src/modules/json/search_engines.json b/src/components/widgets/search/search_engines.json similarity index 100% rename from src/modules/json/search_engines.json rename to src/components/widgets/search/search_engines.json diff --git a/src/components/widgets/Clock.jsx b/src/components/widgets/time/Clock.jsx similarity index 93% rename from src/components/widgets/Clock.jsx rename to src/components/widgets/time/Clock.jsx index e56e2c37..f7c0adb0 100644 --- a/src/components/widgets/Clock.jsx +++ b/src/components/widgets/time/Clock.jsx @@ -1,6 +1,8 @@ import React from 'react'; import Analog from 'react-clock'; +import './clock.scss'; + export default class Clock extends React.PureComponent { constructor(...args) { super(...args); @@ -17,14 +19,12 @@ export default class Clock extends React.PureComponent { const now = new Date(); // Percentage - if (localStorage.getItem('percentageComplete') === 'true') { - return this.setState({ time: (now.getHours() / 24).toFixed(2) + '%'}) - } + if (localStorage.getItem('percentageComplete') === 'true') return this.setState({ time: (now.getHours() / 24).toFixed(2).replace('0.', '') + '%'}); // Analog clock if (localStorage.getItem('analog') === 'true') this.setState({ time: now }); else { - let sec = ''; + let time, sec = ''; // Extra 0 const zero = localStorage.getItem('zero'); @@ -35,7 +35,6 @@ export default class Clock extends React.PureComponent { } if (localStorage.getItem('24hour') === 'true') { - let time = ''; if (zero === 'false') time = `${now.getHours()}:${now.getMinutes()}${sec}`; else time = `${('00' + now.getHours()).slice(-2)}:${('00' + now.getMinutes()).slice(-2)}${sec}`; @@ -49,7 +48,6 @@ export default class Clock extends React.PureComponent { let ampm = now.getHours() > 11 ? 'PM' : 'AM'; if (localStorage.getItem('ampm') === 'false') ampm = ''; - let time = ''; if (zero === 'false') time = `${hours}:${now.getMinutes()}${sec}`; else time = `${('00' + hours).slice(-2)}:${('00' + now.getMinutes()).slice(-2)}${sec}`; diff --git a/src/components/widgets/Date.jsx b/src/components/widgets/time/Date.jsx similarity index 88% rename from src/components/widgets/Date.jsx rename to src/components/widgets/time/Date.jsx index f1ce72a7..190c13ad 100644 --- a/src/components/widgets/Date.jsx +++ b/src/components/widgets/time/Date.jsx @@ -11,15 +11,16 @@ export default class DateWidget extends React.PureComponent { getDate() { const date = new Date(); + const dateFormat = localStorage.getItem('dateFormat'); - if (localStorage.getItem('dateFormat') === 'short') { + if (dateFormat === 'short') { const dateDay = date.getDate(); const dateMonth = date.getMonth() + 1; const dateYear = date.getFullYear(); let day = dateDay, month = dateMonth, year = dateYear; - switch (localStorage.getItem('dateFormat')) { + switch (dateFormat) { case 'MDY': day = dateMonth; month = dateDay; @@ -28,8 +29,7 @@ export default class DateWidget extends React.PureComponent { day = dateYear; year = dateDay; break; - default: // DMY - break; + default: break; // DMY } let format; @@ -58,6 +58,6 @@ export default class DateWidget extends React.PureComponent { } render() { - return {this.state.date} + return {this.state.date} } } \ No newline at end of file diff --git a/src/components/widgets/time/clock.scss b/src/components/widgets/time/clock.scss new file mode 100644 index 00000000..777a123e --- /dev/null +++ b/src/components/widgets/time/clock.scss @@ -0,0 +1,24 @@ +@import '../../../scss/variables'; + +.clock { + font-size: 4em; + margin: 0; +} + +.ampm { + font-size: 0.5em; +} + +.analogclock, +.react-clock__face { + margin: 0 auto; + border-radius: 100%; + box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.3); + border: 1px solid map-get($theme-colours, "main"); +} + +.react-clock__hand__body { + background: map-get($theme-colours, "main"); + ; + box-shadow: 0 0 25px rgba(0, 0, 0, 0.3); +} \ No newline at end of file diff --git a/src/modules/json/default_settings.json b/src/modules/default_settings.json similarity index 100% rename from src/modules/json/default_settings.json rename to src/modules/default_settings.json diff --git a/src/modules/helpers/settings.js b/src/modules/helpers/settings.js index 7752ad49..e88a9466 100644 --- a/src/modules/helpers/settings.js +++ b/src/modules/helpers/settings.js @@ -1,7 +1,6 @@ -const defaultSettings = require('../json/default_settings.json'); +const defaultSettings = require('../default_settings.json'); const saveFile = (data, filename = 'file') => { - if (!data) return console.error('No data'); if (typeof data === 'object') data = JSON.stringify(data, undefined, 4); const blob = new Blob([data], { type: 'text/json' }); @@ -52,6 +51,7 @@ export default class SettingsFunctions { localStorage.setItem('brightness', document.getElementById('brightnessRange').value); localStorage.setItem('greetingName', document.getElementById('greetingName').value); localStorage.setItem('customBackground', document.getElementById('customBackground').value); + localStorage.setItem('customcss', document.getElementById('customcss').value); if (document.getElementById('customBackgroundHex').value !== hexDisabled) { localStorage.setItem('customBackgroundColour', document.getElementById('customBackgroundHex').value); } diff --git a/src/scss/index.scss b/src/scss/index.scss index 8470cb88..4890ca30 100644 --- a/src/scss/index.scss +++ b/src/scss/index.scss @@ -1,12 +1,6 @@ @import 'variables'; @import 'mixins'; -@import 'modules/clock'; -@import 'modules/greeting'; -@import 'modules/quote'; -@import 'modules/search'; -@import 'modules/credit'; -@import 'modules/navbar'; @import 'modules/modal'; @import 'modules/settings'; @import 'modules/toast'; @@ -59,44 +53,4 @@ body { min-height: 100vh; display: grid; color: map-get($theme-colours, 'main-text-color'); -} - -#backgroundImage { - height: 100vh; - background-size: cover; - background-repeat: no-repeat; - background-position: center; - background-attachment: fixed; -} - -#backgroundVideo { - position: fixed; - right: 0; - bottom: 0; - min-width: 100%; - min-height: 100%; -} - -.fade-in { - @include animation('fadein 2s'); -} - -@include keyframes(fadein) { - from { - opacity: 0; - } - - to { - opacity: 1; - } -} - -.backgroundEffects { - opacity: 0.7; - transition: ease 0.6s; -} - -.creditlink { - text-decoration: none; - color: white; } \ No newline at end of file diff --git a/src/scss/modules/_clock.scss b/src/scss/modules/_clock.scss deleted file mode 100644 index 1a972b5b..00000000 --- a/src/scss/modules/_clock.scss +++ /dev/null @@ -1,20 +0,0 @@ -.clock { - font-size: 4em; - margin: 0; -} - -.ampm { - font-size: 0.5em; -} - -.analogclock, .react-clock__face { - margin: 0 auto; - border-radius: 100%; - box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.3); - border: 1px solid map-get($theme-colours, "main"); -} - -.react-clock__hand__body { - background: map-get($theme-colours, "main");; - box-shadow: 0 0 25px rgba(0, 0, 0, 0.3); -} \ No newline at end of file diff --git a/src/scss/modules/_credit.scss b/src/scss/modules/_credit.scss deleted file mode 100644 index 5da3afe5..00000000 --- a/src/scss/modules/_credit.scss +++ /dev/null @@ -1,107 +0,0 @@ -.photoInformation { - position: absolute; - bottom: 1rem; - left: 1rem; - font-size: calc(10px + 0.1vmin) !important; - text-shadow: 0 0 10px rgba(0, 0, 0, 0.3); - - svg { - float: left; - vertical-align: middle; - margin-right: 1rem; - font-size: calc(10px + 2vmin); - } - - span { - display: none; - } - - h1 { - position: relative; - } - - svg, h1 { - display: inline; - } - - svg:hover + .infoCard { - display: block; - } -} - -.infoCard { - display: none; - background: #fff; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); - color: #000; - position: fixed; - bottom: 3.25rem; - left: 0.7em; - padding: 1rem; - border-radius: 24px 24px 24px 0; - max-width: 500px; - text-align: left; - text-shadow: none; - - span { - display: block; - } - - svg { - margin-right: 0.5rem; - vertical-align: middle; - display: inline-flex; - padding: 2px; - } - - span, svg { - font-size: 2em; - } - - h1, .infoIcon { - font-size: 3em; - } - - .infoIcon { - padding: 4px; - } - - hr { - height: 3px; - background: #2d3436; - outline: none; - border: none; - } -} - -.infoCard:hover { - display: block !important; -} - -.photoInformationHover { - cursor: pointer; -} - -.view { - bottom: 10px; - right: 25px; -} - -.favourite { - bottom: 10px; - right: 50px; - padding-right: 5px; -} - -.view, .favourite { - position: absolute; - transition: all 0.5s ease 0s; - &:hover { - transform: scale(1.1); - } -} - -#viewButton, #favouriteButton { - width: auto; - cursor: pointer; -} diff --git a/src/scss/modules/_quote.scss b/src/scss/modules/_quote.scss deleted file mode 100644 index 3cbb3cbb..00000000 --- a/src/scss/modules/_quote.scss +++ /dev/null @@ -1,56 +0,0 @@ -.quote { - font-size: 0.8em; - text-shadow: 0 0 10px rgba(0, 0, 0, 0.3); -} - -@media screen and (min-width: 600px) { - .quote { - margin-left: 30%; - margin-right: 30%; - } -} - -.quoteauthor { - font-size: 0.9em; - letter-spacing: 0.5px; - margin: 0; -} - -.quoteAuthor, .copyButton { - display: inline; - font-size: 0.8em; - position: relative !important; - display: block; - margin: 0 auto; -} - -.copyButton { - cursor: pointer; - vertical-align: middle; - float: middle; - margin: 0 auto; - text-align: right; - transition: ease 0.2s !important; - - &:hover { - transform: scale(1.1); - } -} - -i.material-icons, -h1.quoteauthor { - display: inline; -} - -button.copyButton { - background: transparent; - border: none; - color: map-get($theme-colours, 'main'); - padding: 20px 20px; - text-align: center; - text-decoration: none; - font-size: 20px; - cursor: pointer; - border-radius: 5px; - display: table-cell -} \ No newline at end of file diff --git a/src/scss/modules/_search.scss b/src/scss/modules/_search.scss deleted file mode 100644 index 3925640c..00000000 --- a/src/scss/modules/_search.scss +++ /dev/null @@ -1,46 +0,0 @@ -.searchbar { - position: absolute; - left: 20px; - top: 20px; - display: flex; - flex-direction: row; - display: block; - color: map-get($theme-colours, 'main-text-color'); - - input[type=text] { - width: 140px; - margin-left: 12px; - border-radius: 24px; - font-size: calc(5px + 1.2vmin); - background: transparent; - border: none; - position: absolute; - background-color: rgba(0, 0, 0, 0.1); - -webkit-transition: width 0.5s ease-in-out; - transition: width 0.5s ease-in-out; - - &:focus { - width: 400px; - background-color: rgba(0, 0, 0, .3); - } - } - - .MuiSvgIcon-root { - margin-top: 4px; - font-size: 30px; - filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.3)); - cursor: pointer; - } -} - -.input.searchtext { - border: none; -} - -.micIcon { - margin-right: 10px; -} - -#searchEngine { - width: 130px; -} \ No newline at end of file diff --git a/src/scss/modules/_settings.scss b/src/scss/modules/_settings.scss index b6e3a0c2..4cc27925 100644 --- a/src/scss/modules/_settings.scss +++ b/src/scss/modules/_settings.scss @@ -255,4 +255,10 @@ button.remove + input[type=color].colour { .newFeature { color: #ff4757; font-size: 12px; +} + +#customcss { + font-family: Consolas !important; + border: solid 1px black !important; + margin-left: 0px; } \ No newline at end of file diff --git a/src/translations/en.json b/src/translations/en.json index 1a95a599..79e1dacb 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -23,7 +23,8 @@ "twentyfourhour": "24 Hour", "ampm": "AM/PM (12 hour)", "zero": "Zero-padded", - "analog": "Analog" + "analog": "Analog", + "percentageComplete": "Percentage of the Day Complete" }, "greeting": { "title": "Greeting", From 727e21480d0edb39acd6c61c54226cd0720c13bd Mon Sep 17 00:00:00 2001 From: David Ralph Date: Mon, 30 Nov 2020 11:20:03 +0000 Subject: [PATCH 019/162] 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'); } From 86b6ad6542187f202b10c3cbc70b4c672cf822aa Mon Sep 17 00:00:00 2001 From: David Ralph Date: Mon, 30 Nov 2020 11:56:33 +0000 Subject: [PATCH 020/162] Fix and make toast dark theme --- src/App.jsx | 1 + src/components/widgets/quote/Quote.jsx | 3 +-- src/scss/modules/_toast.scss | 12 ++++++++++++ 3 files changed, 14 insertions(+), 2 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index dc0e728b..1ca8704a 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -40,6 +40,7 @@ export default class App extends React.PureComponent { if (localStorage.getItem('showWelcome') === 'true') this.setState({ welcomeModal: true }); const css = localStorage.getItem('customcss'); if (css) document.head.insertAdjacentHTML('beforeend', ''); + if (localStorage.getItem('darkTheme') === 'true') document.getElementsByClassName('Toastify')[0].classList.add('dark'); } closeWelcome() { diff --git a/src/components/widgets/quote/Quote.jsx b/src/components/widgets/quote/Quote.jsx index 50f6b304..37711ac6 100644 --- a/src/components/widgets/quote/Quote.jsx +++ b/src/components/widgets/quote/Quote.jsx @@ -112,8 +112,7 @@ export default class Quote extends React.PureComponent {

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

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

      ); diff --git a/src/scss/modules/_toast.scss b/src/scss/modules/_toast.scss index 629df8e3..6bb1ee7e 100644 --- a/src/scss/modules/_toast.scss +++ b/src/scss/modules/_toast.scss @@ -26,3 +26,15 @@ .Toastify__toast-container { width: auto !important; } + +.dark { + .Toastify__toast { + background-color: #2f3542 !important; + } + + .Toastify__toast-body, + .Toastify__progress-bar--default, + .Toastify__close-button { + color: white !important; + } +} \ No newline at end of file From 7bfa7ed0a8c3044ed2ce17288dafa2eb64cea466 Mon Sep 17 00:00:00 2001 From: David Ralph Date: Mon, 30 Nov 2020 15:03:23 +0000 Subject: [PATCH 021/162] Quote language feature and date settings --- src/components/modals/tabs/Settings.jsx | 20 ++++++++++++++++++++ src/components/widgets/quote/Quote.jsx | 2 +- src/components/widgets/time/Date.jsx | 3 ++- src/modules/default_settings.json | 8 ++++++++ 4 files changed, 31 insertions(+), 2 deletions(-) diff --git a/src/components/modals/tabs/Settings.jsx b/src/components/modals/tabs/Settings.jsx index 57b6cecd..ae6e75d2 100644 --- a/src/components/modals/tabs/Settings.jsx +++ b/src/components/modals/tabs/Settings.jsx @@ -1,6 +1,7 @@ import React from 'react'; import SettingsFunctions from '../../../modules/helpers/settings'; import Checkbox from '../settings/Checkbox'; +import Dropdown from '../settings/Dropdown'; import Section from '../settings/Section'; import { toast } from 'react-toastify'; @@ -66,6 +67,25 @@ export default class Settings extends React.PureComponent { + localStorage.setItem('quotelanguage', document.getElementById('quotelanguage').value)}> + + + +
      + +
      + + localStorage.setItem('dateFormat', document.getElementById('dateformat').value)}> + + + + +

      + localStorage.setItem('shortFormat', document.getElementById('shortformat').value)}> + + + +
      diff --git a/src/components/widgets/quote/Quote.jsx b/src/components/widgets/quote/Quote.jsx index 37711ac6..535c57dd 100644 --- a/src/components/widgets/quote/Quote.jsx +++ b/src/components/widgets/quote/Quote.jsx @@ -65,7 +65,7 @@ export default class Quote extends React.PureComponent { if (localStorage.getItem('offlineMode') === 'true') return this.doOffline(); try { // First we try and get a quote from the API... - const data = await (await fetch(Constants.API_URL + '/getQuote')).json(); + const data = await (await fetch(Constants.API_URL + '/getQuote?language=' + localStorage.getItem('quotelanguage'))).json(); if (data.statusCode === 429) return this.doOffline(); // If we hit the ratelimit, we fallback to local quotes this.setState({ quote: '"' + data.quote + '"', diff --git a/src/components/widgets/time/Date.jsx b/src/components/widgets/time/Date.jsx index 190c13ad..d4e694ce 100644 --- a/src/components/widgets/time/Date.jsx +++ b/src/components/widgets/time/Date.jsx @@ -11,9 +11,10 @@ export default class DateWidget extends React.PureComponent { getDate() { const date = new Date(); + const short = localStorage.getItem('short'); const dateFormat = localStorage.getItem('dateFormat'); - if (dateFormat === 'short') { + if (short === 'true') { const dateDay = date.getDate(); const dateMonth = date.getMonth() + 1; const dateYear = date.getFullYear(); diff --git a/src/modules/default_settings.json b/src/modules/default_settings.json index 217410bd..76e61e6b 100644 --- a/src/modules/default_settings.json +++ b/src/modules/default_settings.json @@ -90,5 +90,13 @@ { "name": "showWelcome", "value": true + }, + { + "name": "quotelanguage", + "value": "English" + }, + { + "name": "date", + "value": "false" } ] \ No newline at end of file From 7862c43752cdae764d79584c96249df1778f2856 Mon Sep 17 00:00:00 2001 From: David Ralph Date: Mon, 30 Nov 2020 16:47:22 +0000 Subject: [PATCH 022/162] unfinished birthday greeting feature --- package.json | 1 + .../settings/sections/GreetingSettings.jsx | 45 +++++++++++++++++++ src/components/modals/tabs/Settings.jsx | 11 +---- src/components/widgets/greeting/Greeting.jsx | 4 ++ 4 files changed, 52 insertions(+), 9 deletions(-) create mode 100644 src/components/modals/settings/sections/GreetingSettings.jsx diff --git a/package.json b/package.json index bbe04067..c75c9060 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "react": "17.0.1", "react-clock": "^2.4.0", "react-color-gradient-picker": "^0.1.2", + "react-date-picker": "^8.0.5", "react-dom": "17.0.1", "react-modal": "3.12.1", "react-toastify": "6.1.0", diff --git a/src/components/modals/settings/sections/GreetingSettings.jsx b/src/components/modals/settings/sections/GreetingSettings.jsx new file mode 100644 index 00000000..eaf6238b --- /dev/null +++ b/src/components/modals/settings/sections/GreetingSettings.jsx @@ -0,0 +1,45 @@ +import React from 'react'; +import Section from '../Section'; +import Checkbox from '../Checkbox'; +import DatePicker from 'react-date-picker'; +import { toast } from 'react-toastify'; + +export default class GreetingSettings extends React.PureComponent { + constructor(...args) { + super(...args); + this.state = { + birthday: new Date(localStorage.getItem('birthday')) || new Date() + }; + } + + resetItem(type) { + switch (type) { + case 'greeting': document.getElementById('greetingName').value = ''; break; + default: break; + } + toast(this.props.toastLanguage.reset); + } + + changeDate(data) { + if (data === 'reset') return; //soon + localStorage.setItem('birthday', data); + this.setState({ birthday: data }); + } + + render() { + return ( +
      + + +
        +

        {this.props.language.greeting.name} this.resetItem('greeting')}>{this.props.language.reset}

        + +
      +
        +

        Birthday Date this.changeDate('reset')}>{this.props.language.reset}

        + this.changeDate(data)} value={this.state.birthday}/> +
      +
      + ); + } +} \ No newline at end of file diff --git a/src/components/modals/tabs/Settings.jsx b/src/components/modals/tabs/Settings.jsx index ae6e75d2..826ef6b6 100644 --- a/src/components/modals/tabs/Settings.jsx +++ b/src/components/modals/tabs/Settings.jsx @@ -8,11 +8,11 @@ import { toast } from 'react-toastify'; import BackgroundSettings from '../settings/sections/BackgroundSettings'; import SearchSettings from '../settings/sections/SearchSettings'; import LanguageSettings from '../settings/sections/LanguageSettings'; +import GreetingSettings from '../settings/sections/GreetingSettings'; export default class Settings extends React.PureComponent { resetItem(type) { switch (type) { - case 'greeting': document.getElementById('greetingName').value = ''; break; case 'css': document.getElementById('customcss').value = ''; break; default: break; } @@ -54,14 +54,7 @@ export default class Settings extends React.PureComponent {
      -
      - - -
        -

        {this.props.language.greeting.name} this.resetItem('greeting')}>{this.props.language.reset}

        - -
      -
      +
      diff --git a/src/components/widgets/greeting/Greeting.jsx b/src/components/widgets/greeting/Greeting.jsx index 40fb121c..91a461bf 100644 --- a/src/components/widgets/greeting/Greeting.jsx +++ b/src/components/widgets/greeting/Greeting.jsx @@ -47,6 +47,10 @@ export default class Greeting extends React.PureComponent { if (custom === 'false') name = name.replace(',', ''); + // Birthday + const birth = new Date(localStorage.getItem('birthday')); + if (birth.getDate() === now.getDate() && birth.getMonth() === now.getMonth() && birth.getFullYear() !== 1001) message = 'Happy Birthday'; + // Set the state to the greeting string this.setState({ greeting: `${message}${name}` From d80e9d09c8e5a0a5d92501a954e0d77813d62c56 Mon Sep 17 00:00:00 2001 From: David Ralph Date: Mon, 30 Nov 2020 22:25:56 +0000 Subject: [PATCH 023/162] replace lodash.merge with deepmerge --- package.json | 2 +- src/App.jsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index c75c9060..2b1e6bef 100644 --- a/package.json +++ b/package.json @@ -14,9 +14,9 @@ "@material-ui/core": "4.11.1", "@material-ui/icons": "4.9.1", "@muetab/quotes": "^1.0.0", + "deepmerge": "^4.2.2", "fontsource-lexend-deca": "^3.0.10", "fontsource-roboto": "^3.0.3", - "lodash.merge": "4.6.2", "react": "17.0.1", "react-clock": "^2.4.0", "react-color-gradient-picker": "^0.1.2", diff --git a/src/App.jsx b/src/App.jsx index 1ca8704a..35dd7854 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -15,7 +15,7 @@ import Navbar from './components/widgets/navbar/Navbar'; import SettingsFunctions from './modules/helpers/settings'; import { ToastContainer } from 'react-toastify'; import Modal from 'react-modal'; -import merge from 'lodash.merge'; +import merge from 'deepmerge'; // Modals are lazy loaded as the user won't use them every time they open a tab const Main = React.lazy(() => import('./components/modals/Main')); From 12e7ec89950f3b277bdc7773ad5a83f6aa605e80 Mon Sep 17 00:00:00 2001 From: David Ralph Date: Tue, 1 Dec 2020 12:09:50 +0000 Subject: [PATCH 024/162] cleanup --- src/App.jsx | 5 +-- src/components/modals/Feedback.jsx | 36 ++++++++------- src/components/modals/Main.jsx | 45 +++++-------------- src/components/modals/Update.jsx | 2 +- .../settings/sections/BackgroundSettings.jsx | 2 +- .../settings/sections/GreetingSettings.jsx | 9 ++-- src/components/modals/tabs/Settings.jsx | 9 ++-- .../widgets/background/PhotoInformation.jsx | 1 + src/components/widgets/greeting/Greeting.jsx | 4 +- src/modules/helpers/marketplace.js | 5 +-- src/scss/modules/_marketplace.scss | 11 ++--- 11 files changed, 48 insertions(+), 81 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 35dd7854..0015b80f 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -50,7 +50,7 @@ export default class App extends React.PureComponent { // Render all the components render() { - let modalClassList = 'Modal'; // Modal features + let modalClassList = 'Modal'; let tooltipClassList = 'infoCard'; if ((localStorage.getItem('brightnessTime') && new Date().getHours() > 18) || localStorage.getItem('darkTheme') === 'true') { modalClassList += ' dark'; @@ -58,9 +58,8 @@ export default class App extends React.PureComponent { } const overlayClassList = (localStorage.getItem('animations') === 'true') ? 'Overlay modal-animation' : 'Overlay'; - const en = require('./translations/en.json'); // User language const languagecode = localStorage.getItem('language') || 'en'; - const language = merge(en, require(`./translations/${languagecode}.json`)); + const language = merge(require('./translations/en.json'), require(`./translations/${languagecode}.json`)); return ( diff --git a/src/components/modals/Feedback.jsx b/src/components/modals/Feedback.jsx index 3cdf8dbe..4f5b847a 100644 --- a/src/components/modals/Feedback.jsx +++ b/src/components/modals/Feedback.jsx @@ -2,22 +2,24 @@ import React from 'react'; export default class Feedback extends React.PureComponent { render() { - return
      -

      Give us feedback

      - × - -

      - -

      - -

      - -

      - -

      - -


      - -
      ; + return ( +
      +

      Give us feedback

      + × + +

      + +

      + +

      + +

      + +

      + +


      + +
      + ); } } diff --git a/src/components/modals/Main.jsx b/src/components/modals/Main.jsx index 426bbf4b..7416db8b 100644 --- a/src/components/modals/Main.jsx +++ b/src/components/modals/Main.jsx @@ -13,10 +13,13 @@ export default class MainModal extends React.PureComponent { super(...args); this.state = { tab: , - settingsActive: 'active', - addonsActive: '', - marketplaceActive: '' + currentTab: 'settings' }; + this.tabs = { + settings: , + addons: this.changeEnabled('marketplace')}/>, + marketplace: + } } componentDidMount() { @@ -30,33 +33,9 @@ export default class MainModal extends React.PureComponent { } changeEnabled(input) { - switch (input) { - case 'addons': - this.setState({ - tab: this.changeEnabled('marketplace')}/>, - addonsActive: 'active', - settingsActive: '', - marketplaceActive: '' - }); - break; - case 'settings': - this.setState({ - tab: , - settingsActive: 'active', - addonsActive: '', - marketplaceActive: '' - }); - break; - case 'marketplace': - this.setState({ - tab: , - marketplaceActive: 'active', - addonsActive: '', - settingsActive: '' - }); - break; - default: break; - } + document.getElementById(this.state.currentTab + 'TabLink').classList.toggle('active'); + document.getElementById(input + 'TabLink').classList.toggle('active'); + this.setState({ tab: this.tabs[input], currentTab: input }); } render() { @@ -65,9 +44,9 @@ export default class MainModal extends React.PureComponent { ×

      {this.props.language.modals.title}

      - - - + + +

      {this.state.tab} diff --git a/src/components/modals/Update.jsx b/src/components/modals/Update.jsx index 0d09aa33..6ba36737 100644 --- a/src/components/modals/Update.jsx +++ b/src/components/modals/Update.jsx @@ -14,7 +14,7 @@ export default class Update extends React.PureComponent { } async getUpdate() { - const supportText = `

      ${this.props.language.contact_support}: https://muetab.com/contact

      `; + const supportText = `

      ${this.props.language.contact_support}: https://muetab.com/contact

      `; if (localStorage.getItem('offlineMode') === 'true') return this.setState({ title: this.props.language.offline.title, diff --git a/src/components/modals/settings/sections/BackgroundSettings.jsx b/src/components/modals/settings/sections/BackgroundSettings.jsx index aa6d6b6e..776f4a6c 100644 --- a/src/components/modals/settings/sections/BackgroundSettings.jsx +++ b/src/components/modals/settings/sections/BackgroundSettings.jsx @@ -11,7 +11,7 @@ import 'react-color-gradient-picker/dist/index.css'; import '../../../../scss/react-color-picker-gradient-picker-custom-styles.scss'; export default class BackgroundSettings extends React.PureComponent { - DefaultGradientSettings = { "angle": "180", "gradient": [{ "colour": this.props.language.background.disabled, "stop": 0 }], "type": "linear" }; + DefaultGradientSettings = { 'angle': '180', 'gradient': [{ 'colour': this.props.language.background.disabled, 'stop': 0 }], 'type': 'linear' }; GradientPickerInitalState = undefined; constructor(...args) { diff --git a/src/components/modals/settings/sections/GreetingSettings.jsx b/src/components/modals/settings/sections/GreetingSettings.jsx index eaf6238b..80c35259 100644 --- a/src/components/modals/settings/sections/GreetingSettings.jsx +++ b/src/components/modals/settings/sections/GreetingSettings.jsx @@ -12,11 +12,8 @@ export default class GreetingSettings extends React.PureComponent { }; } - resetItem(type) { - switch (type) { - case 'greeting': document.getElementById('greetingName').value = ''; break; - default: break; - } + resetItem() { + document.getElementById('greetingName').value = ''; toast(this.props.toastLanguage.reset); } @@ -32,7 +29,7 @@ export default class GreetingSettings extends React.PureComponent {
        -

        {this.props.language.greeting.name} this.resetItem('greeting')}>{this.props.language.reset}

        +

        {this.props.language.greeting.name} this.resetItem()}>{this.props.language.reset}

        diff --git a/src/components/modals/tabs/Settings.jsx b/src/components/modals/tabs/Settings.jsx index 826ef6b6..52c5c174 100644 --- a/src/components/modals/tabs/Settings.jsx +++ b/src/components/modals/tabs/Settings.jsx @@ -11,11 +11,8 @@ import LanguageSettings from '../settings/sections/LanguageSettings'; import GreetingSettings from '../settings/sections/GreetingSettings'; export default class Settings extends React.PureComponent { - resetItem(type) { - switch (type) { - case 'css': document.getElementById('customcss').value = ''; break; - default: break; - } + resetItem() { + document.getElementById('customcss').value = ''; toast(this.props.toastLanguage.reset); } @@ -90,7 +87,7 @@ export default class Settings extends React.PureComponent {
          -

          Custom CSS this.resetItem('css')}>{this.props.language.reset} NEW

          +

          Custom CSS this.resetItem()}>{this.props.language.reset} NEW

      diff --git a/src/components/widgets/background/PhotoInformation.jsx b/src/components/widgets/background/PhotoInformation.jsx index d75ffb00..f907ebf5 100644 --- a/src/components/widgets/background/PhotoInformation.jsx +++ b/src/components/widgets/background/PhotoInformation.jsx @@ -9,6 +9,7 @@ export default class PhotoInformation extends React.PureComponent { render() { let classList = 'infoCard'; if (this.props.className) classList = this.props.className; + return (

      {this.props.language.credit}

      diff --git a/src/components/widgets/greeting/Greeting.jsx b/src/components/widgets/greeting/Greeting.jsx index 91a461bf..355fd05b 100644 --- a/src/components/widgets/greeting/Greeting.jsx +++ b/src/components/widgets/greeting/Greeting.jsx @@ -52,9 +52,7 @@ export default class Greeting extends React.PureComponent { if (birth.getDate() === now.getDate() && birth.getMonth() === now.getMonth() && birth.getFullYear() !== 1001) message = 'Happy Birthday'; // Set the state to the greeting string - this.setState({ - greeting: `${message}${name}` - }); + this.setState({ greeting: `${message}${name}` }); } componentDidMount() { diff --git a/src/modules/helpers/marketplace.js b/src/modules/helpers/marketplace.js index 4868973e..36217bb7 100644 --- a/src/modules/helpers/marketplace.js +++ b/src/modules/helpers/marketplace.js @@ -48,8 +48,7 @@ export default class MarketplaceFunctions { if (input.quote_api) localStorage.setItem('quote_api', JSON.stringify(input.quote_api)); localStorage.setItem('quote_packs', JSON.stringify(input.quotes)); break; - default: - break; + default: break; } let installed = JSON.parse(localStorage.getItem('installed')); @@ -59,7 +58,7 @@ export default class MarketplaceFunctions { updated: 'Unpublished', data: input } - }); + }); } else installed.push(input); localStorage.setItem('installed', JSON.stringify(installed)); } diff --git a/src/scss/modules/_marketplace.scss b/src/scss/modules/_marketplace.scss index 3c6c49bc..389f3314 100644 --- a/src/scss/modules/_marketplace.scss +++ b/src/scss/modules/_marketplace.scss @@ -38,13 +38,8 @@ button.tablinks { } -#active:after { - content: ''; - display: block; - margin: 0 auto; - width: 50%; - padding-top: 10px; - border-bottom: 3px solid map-get($modal, 'tab-underline-active'); +.active:after { + border-bottom: 3px solid map-get($modal, 'tab-underline-active') !important; } .dark { @@ -53,7 +48,7 @@ button.tablinks { color: white; } - #active:after { + .active:after { border-image-slice: 1; border-image-source: map-get($theme-colours, 'gradient'); border-bottom: 3px solid; From f60aae6b245cf8ddfcac3e9c1b66e80955b91852 Mon Sep 17 00:00:00 2001 From: David Ralph Date: Tue, 1 Dec 2020 13:16:13 +0000 Subject: [PATCH 025/162] finish birthday feature --- src/components/modals/settings/sections/GreetingSettings.jsx | 3 ++- src/components/widgets/greeting/Greeting.jsx | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/modals/settings/sections/GreetingSettings.jsx b/src/components/modals/settings/sections/GreetingSettings.jsx index 80c35259..e0986bd6 100644 --- a/src/components/modals/settings/sections/GreetingSettings.jsx +++ b/src/components/modals/settings/sections/GreetingSettings.jsx @@ -28,12 +28,13 @@ export default class GreetingSettings extends React.PureComponent {
      +

        {this.props.language.greeting.name} this.resetItem()}>{this.props.language.reset}

        -

        Birthday Date this.changeDate('reset')}>{this.props.language.reset}

        +

        Birthday Date

        this.changeDate(data)} value={this.state.birthday}/>
      diff --git a/src/components/widgets/greeting/Greeting.jsx b/src/components/widgets/greeting/Greeting.jsx index 355fd05b..abecabc3 100644 --- a/src/components/widgets/greeting/Greeting.jsx +++ b/src/components/widgets/greeting/Greeting.jsx @@ -49,7 +49,7 @@ export default class Greeting extends React.PureComponent { // Birthday const birth = new Date(localStorage.getItem('birthday')); - if (birth.getDate() === now.getDate() && birth.getMonth() === now.getMonth() && birth.getFullYear() !== 1001) message = 'Happy Birthday'; + if (localStorage.getItem('birthdayenabled') === 'true' && birth.getDate() === now.getDate() && birth.getMonth() === now.getMonth()) message = 'Happy Birthday'; // Set the state to the greeting string this.setState({ greeting: `${message}${name}` }); From 89b4d154ad8bdc78a59364ff4d2989f631a48b0d Mon Sep 17 00:00:00 2001 From: David Ralph Date: Tue, 1 Dec 2020 20:00:40 +0000 Subject: [PATCH 026/162] soon --- package.json | 1 + src/components/modals/settings/FileUpload.jsx | 22 ++++++++ .../settings/sections/BackgroundSettings.jsx | 55 ++++++++++--------- .../settings/sections/GreetingSettings.jsx | 4 ++ src/components/modals/tabs/Settings.jsx | 19 +++---- src/modules/helpers/settings.js | 2 - 6 files changed, 62 insertions(+), 41 deletions(-) create mode 100644 src/components/modals/settings/FileUpload.jsx diff --git a/package.json b/package.json index 2b1e6bef..c47582d0 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "fontsource-lexend-deca": "^3.0.10", "fontsource-roboto": "^3.0.3", "react": "17.0.1", + "react-beforeunload": "^2.4.0", "react-clock": "^2.4.0", "react-color-gradient-picker": "^0.1.2", "react-date-picker": "^8.0.5", diff --git a/src/components/modals/settings/FileUpload.jsx b/src/components/modals/settings/FileUpload.jsx new file mode 100644 index 00000000..955d3762 --- /dev/null +++ b/src/components/modals/settings/FileUpload.jsx @@ -0,0 +1,22 @@ +import React from 'react'; +import { toast } from 'react-toastify'; + +export default class FileUpload extends React.PureComponent { + componentDidMount() { + document.getElementById(this.props.id).onchange = (e) => { + const reader = new FileReader(); + const file = e.target.files[0]; + + if (this.props.type === 'settings') reader.readAsText(file, 'UTF-8'); + else { // file upload + if (file.size > 2000000) return toast('File is over 2MB'); + reader.readAsDataURL(file); + } + reader.addEventListener('load', (e) => this.props.loadFunction(e)); + }; + } + + render() { + return ; + } +} \ No newline at end of file diff --git a/src/components/modals/settings/sections/BackgroundSettings.jsx b/src/components/modals/settings/sections/BackgroundSettings.jsx index 776f4a6c..9fc8f694 100644 --- a/src/components/modals/settings/sections/BackgroundSettings.jsx +++ b/src/components/modals/settings/sections/BackgroundSettings.jsx @@ -3,9 +3,11 @@ import { toast } from 'react-toastify'; import Checkbox from '../Checkbox'; import Dropdown from '../Dropdown'; import Section from '../Section'; +import FileUpload from '../FileUpload'; import { ColorPicker } from 'react-color-gradient-picker'; import hexToRgb from '../../../../modules/helpers/background/hexToRgb'; import rgbToHex from '../../../../modules/helpers/background/rgbToHex'; +import { Beforeunload } from 'react-beforeunload'; import 'react-color-gradient-picker/dist/index.css'; import '../../../../scss/react-color-picker-gradient-picker-custom-styles.scss'; @@ -62,21 +64,6 @@ export default class BackgroundSettings extends React.PureComponent { } componentDidMount() { - document.getElementById('bg-input').onchange = (e) => { - const reader = new FileReader(); - const file = e.target.files[0]; - - if (file.size > 2000000) return toast('File is over 2MB', '#ff0000', '#ffffff'); - - reader.addEventListener('load', (e) => { - localStorage.setItem('customBackground', e.target.result); - document.getElementById('customBackground').src = e.target.result; - document.getElementById('customBackground').value = e.target.result; - }); - - reader.readAsDataURL(file); - }; - const hex = localStorage.getItem('customBackgroundColour'); let gradientSettings = undefined; @@ -150,23 +137,34 @@ export default class BackgroundSettings extends React.PureComponent { return { shown: !state.shown }; - }) + }); + } + + fileUpload(e) { + localStorage.setItem('customBackground', e.target.result); + document.getElementById('customBackground').value = e.target.result; + } + + beforeUnload() { + localStorage.setItem('blur', this.state.blur); + localStorage.setItem('brightness', this.state.brightness); } render() { let colourSettings = null; if (typeof this.state.gradientSettings === 'object') { const gradientHasMoreThanOneColour = this.state.gradientSettings.gradient.length > 1; + let gradientInputs; if (gradientHasMoreThanOneColour) { if (this.GradientPickerInitalState === undefined) this.InitializeColorPickerState(this.state.gradientSettings); gradientInputs = ( - this.onColorPickerChange(color, 'start')} - onChange={(color) => this.onColorPickerChange(color, 'change')} - onEndChange={(color) => this.onColorPickerChange(color, 'end')} - gradient={this.GradientPickerInitalState} - isGradient/> + this.onColorPickerChange(color, 'start')} + onChange={(color) => this.onColorPickerChange(color, 'change')} + onEndChange={(color) => this.onColorPickerChange(color, 'end')} + gradient={this.GradientPickerInitalState} + isGradient /> ); } else { gradientInputs = this.state.gradientSettings.gradient.map((g, i) => { @@ -178,6 +176,7 @@ export default class BackgroundSettings extends React.PureComponent { ); }); } + colourSettings = (
      {gradientInputs} @@ -187,6 +186,7 @@ export default class BackgroundSettings extends React.PureComponent {
      ); } + return (
      @@ -202,17 +202,17 @@ export default class BackgroundSettings extends React.PureComponent { name='backgroundapi' id='backgroundAPI' onChange={() => localStorage.setItem('backgroundAPI', document.getElementById('backgroundAPI').value)} > - - + +

      {this.props.language.background.blur} ({this.state.blur}%) this.resetItem('blur')}>{this.props.language.reset}

      - this.setState({ blur: event.target.value })} /> + this.setState({ blur: event.target.value })} />

      {this.props.language.background.brightness} ({this.state.brightness}%) this.resetItem('brightness')}>{this.props.language.reset}

      - this.setState({ brightness: event.target.value })} /> + this.setState({ brightness: event.target.value })} />

      {this.props.language.background.custom_url} this.resetItem('customBackground')}>{this.props.language.reset}

      @@ -221,7 +221,7 @@ export default class BackgroundSettings extends React.PureComponent {

        {this.props.language.background.custom_background} this.resetItem('customBackground')}>{this.props.language.reset}

        - + this.fileUpload(e)} />

        {this.props.language.background.custom_colour} this.resetItem('customBackgroundColour')}>{this.props.language.reset}

        @@ -229,6 +229,7 @@ export default class BackgroundSettings extends React.PureComponent { {this.state.shown && colourSettings}
      + this.beforeUnload()}/> ); } diff --git a/src/components/modals/settings/sections/GreetingSettings.jsx b/src/components/modals/settings/sections/GreetingSettings.jsx index e0986bd6..25e3dbd4 100644 --- a/src/components/modals/settings/sections/GreetingSettings.jsx +++ b/src/components/modals/settings/sections/GreetingSettings.jsx @@ -23,6 +23,10 @@ export default class GreetingSettings extends React.PureComponent { this.setState({ birthday: data }); } + componentDidMount() { + document.getElementById('greetingName').value = localStorage.getItem('greetingName'); + } + render() { return (
      diff --git a/src/components/modals/tabs/Settings.jsx b/src/components/modals/tabs/Settings.jsx index 52c5c174..c6b4a421 100644 --- a/src/components/modals/tabs/Settings.jsx +++ b/src/components/modals/tabs/Settings.jsx @@ -3,6 +3,7 @@ import SettingsFunctions from '../../../modules/helpers/settings'; import Checkbox from '../settings/Checkbox'; import Dropdown from '../settings/Dropdown'; import Section from '../settings/Section'; +import FileUpload from '../settings/FileUpload'; import { toast } from 'react-toastify'; import BackgroundSettings from '../settings/sections/BackgroundSettings'; @@ -18,7 +19,6 @@ export default class Settings extends React.PureComponent { componentDidMount() { // Settings - document.getElementById('greetingName').value = localStorage.getItem('greetingName'); document.getElementById('language').value = localStorage.getItem('language'); document.getElementById('customcss').value = localStorage.getItem('customcss'); @@ -26,17 +26,12 @@ export default class Settings extends React.PureComponent { const choices = document.getElementsByClassName('choices'); for (let i = 0; i < choices.length; i++) choices[i].style.backgroundColor = '#2f3542'; } + } - document.getElementById('file-input').onchange = (e) => { // import settings - const reader = new FileReader(); - reader.readAsText(e.target.files[0], 'UTF-8'); - - reader.onload = (readerEvent) => { - const content = JSON.parse(readerEvent.target.result); - for (const key of Object.keys(content)) localStorage.setItem(key, content[key]); - toast(this.props.toastLanguage.imported); - }; - }; + settingsImport(e) { + const content = JSON.parse(e.target.result); + for (const key of Object.keys(content)) localStorage.setItem(key, content[key]); + toast(this.props.toastLanguage.imported); } render() { @@ -98,7 +93,7 @@ export default class Settings extends React.PureComponent { - + this.settingsImport(e)} /> ); } diff --git a/src/modules/helpers/settings.js b/src/modules/helpers/settings.js index e88a9466..c753d3f1 100644 --- a/src/modules/helpers/settings.js +++ b/src/modules/helpers/settings.js @@ -47,8 +47,6 @@ export default class SettingsFunctions { } static saveStuff(hexDisabled) { - localStorage.setItem('blur', document.getElementById('blurRange').value); // this is better than inline onChange for performance - localStorage.setItem('brightness', document.getElementById('brightnessRange').value); localStorage.setItem('greetingName', document.getElementById('greetingName').value); localStorage.setItem('customBackground', document.getElementById('customBackground').value); localStorage.setItem('customcss', document.getElementById('customcss').value); From fc570089c2fafefde700b96aa12fac6824a38e55 Mon Sep 17 00:00:00 2001 From: David Ralph Date: Wed, 2 Dec 2020 12:23:55 +0000 Subject: [PATCH 027/162] cleanup --- src/components/modals/marketplace/Item.jsx | 77 ++++++++++--------- src/components/modals/settings/FileUpload.jsx | 2 +- .../settings/sections/BackgroundSettings.jsx | 7 +- .../settings/sections/GreetingSettings.jsx | 15 ++-- .../settings/sections/LanguageSettings.jsx | 12 +-- .../settings/sections/SearchSettings.jsx | 4 +- src/components/modals/tabs/Addons.jsx | 9 +-- src/components/modals/tabs/Marketplace.jsx | 8 +- src/modules/helpers/marketplace.js | 1 + src/modules/helpers/settings.js | 2 - 10 files changed, 67 insertions(+), 70 deletions(-) diff --git a/src/components/modals/marketplace/Item.jsx b/src/components/modals/marketplace/Item.jsx index f1295bf5..aaac6335 100644 --- a/src/components/modals/marketplace/Item.jsx +++ b/src/components/modals/marketplace/Item.jsx @@ -3,55 +3,56 @@ import ArrowBackIcon from '@material-ui/icons/ArrowBack'; export default class Item extends React.PureComponent { render() { - //if (!this.props.data.icon) return null; let warningHTML; try { // For some reason it breaks sometimes so we use try/catch if (this.props.content.content.data.quote_api) { - warningHTML =
      + warningHTML = ( +
        -
      • {this.props.language.quote_warning.title}
        • -
      • {this.props.language.quote_warning.description}
        • +
      • {this.props.language.quote_warning.title}
        • +
      • {this.props.language.quote_warning.description}
      -
      +
      + ); } } catch (e) {} return (
      -
      - -
      -

      {this.props.data.name}

      - {this.props.button} -

      - product -
      -
      -

      {this.props.language.information}

      -
        -
        -
      • {this.props.language.last_updated}
        • -
      • {this.props.data.updated}
        • -
        -
      • {this.props.language.version}
        • -
      • {this.props.data.version}
        • -
        -
      • {this.props.language.author}
        • -
      • {this.props.data.author}
        • -
      +
      + +
      +

      {this.props.data.name}

      + {this.props.button} +

      + product +
      +
      +

      {this.props.language.information}

      +
        +
        +
      • {this.props.language.last_updated}
        • +
      • {this.props.data.updated}
        • +
        +
      • {this.props.language.version}
        • +
      • {this.props.data.version}
        • +
        +
      • {this.props.language.author}
        • +
      • {this.props.data.author}
        • +
      +
      +
      +
        +
      • {this.props.language.notice.title}
        • +
      • {this.props.language.notice.description}
        • +
      +
      + {warningHTML} +
      +
      +

      {this.props.language.overview}

      +

      -
      -
        -
      • {this.props.language.notice.title}
        • -
      • {this.props.language.notice.description}
        • -
      -
      - {warningHTML} -
      -
      -

      {this.props.language.overview}

      -

      -
      ); } } \ No newline at end of file diff --git a/src/components/modals/settings/FileUpload.jsx b/src/components/modals/settings/FileUpload.jsx index 955d3762..9de79f0d 100644 --- a/src/components/modals/settings/FileUpload.jsx +++ b/src/components/modals/settings/FileUpload.jsx @@ -8,7 +8,7 @@ export default class FileUpload extends React.PureComponent { const file = e.target.files[0]; if (this.props.type === 'settings') reader.readAsText(file, 'UTF-8'); - else { // file upload + else { // background upload if (file.size > 2000000) return toast('File is over 2MB'); reader.readAsDataURL(file); } diff --git a/src/components/modals/settings/sections/BackgroundSettings.jsx b/src/components/modals/settings/sections/BackgroundSettings.jsx index 9fc8f694..18f5b2aa 100644 --- a/src/components/modals/settings/sections/BackgroundSettings.jsx +++ b/src/components/modals/settings/sections/BackgroundSettings.jsx @@ -21,6 +21,7 @@ export default class BackgroundSettings extends React.PureComponent { this.state = { blur: 0, brightness: 100, + customBackground: localStorage.getItem('customBackground') || '', gradientSettings: this.DefaultGradientSettings, shown: false }; @@ -83,7 +84,6 @@ export default class BackgroundSettings extends React.PureComponent { gradientSettings }); - document.getElementById('customBackground').value = localStorage.getItem('customBackground'); document.getElementById('backgroundAPI').value = localStorage.getItem('backgroundAPI'); } @@ -142,12 +142,13 @@ export default class BackgroundSettings extends React.PureComponent { fileUpload(e) { localStorage.setItem('customBackground', e.target.result); - document.getElementById('customBackground').value = e.target.result; + this.setState({ customBackground: e.target.result }); } beforeUnload() { localStorage.setItem('blur', this.state.blur); localStorage.setItem('brightness', this.state.brightness); + localStorage.setItem('customBackground', this.state.customBackground); } render() { @@ -216,7 +217,7 @@ export default class BackgroundSettings extends React.PureComponent {

      {this.props.language.background.custom_url} this.resetItem('customBackground')}>{this.props.language.reset}

      - + this.setState({ customBackground: e.target.value })}>

      {this.props.language.background.custom_background} this.resetItem('customBackground')}>{this.props.language.reset}

      diff --git a/src/components/modals/settings/sections/GreetingSettings.jsx b/src/components/modals/settings/sections/GreetingSettings.jsx index 25e3dbd4..4895e1e9 100644 --- a/src/components/modals/settings/sections/GreetingSettings.jsx +++ b/src/components/modals/settings/sections/GreetingSettings.jsx @@ -3,17 +3,19 @@ import Section from '../Section'; import Checkbox from '../Checkbox'; import DatePicker from 'react-date-picker'; import { toast } from 'react-toastify'; +import { Beforeunload } from 'react-beforeunload'; export default class GreetingSettings extends React.PureComponent { constructor(...args) { super(...args); this.state = { - birthday: new Date(localStorage.getItem('birthday')) || new Date() + birthday: new Date(localStorage.getItem('birthday')) || new Date(), + greetingName: localStorage.getItem('greetingName') || '' }; } resetItem() { - document.getElementById('greetingName').value = ''; + this.setState({ greetingName: '' }); toast(this.props.toastLanguage.reset); } @@ -23,24 +25,25 @@ export default class GreetingSettings extends React.PureComponent { this.setState({ birthday: data }); } - componentDidMount() { - document.getElementById('greetingName').value = localStorage.getItem('greetingName'); + beforeUnload() { + localStorage.setItem('greetingName', this.state.greetingName); } render() { return ( -
      +

        {this.props.language.greeting.name} this.resetItem()}>{this.props.language.reset}

        - + this.setState({ greetingName: e.target.value })}>

        Birthday Date

        this.changeDate(data)} value={this.state.birthday}/>
      + this.beforeUnload()}/>
      ); } diff --git a/src/components/modals/settings/sections/LanguageSettings.jsx b/src/components/modals/settings/sections/LanguageSettings.jsx index 16c75288..4f916c19 100644 --- a/src/components/modals/settings/sections/LanguageSettings.jsx +++ b/src/components/modals/settings/sections/LanguageSettings.jsx @@ -10,12 +10,12 @@ export default class LanguageSettings extends React.PureComponent { name='language' id='language' onChange={() => localStorage.setItem('language', document.getElementById('language').value)} > - - - - - - + + + + + + ); diff --git a/src/components/modals/settings/sections/SearchSettings.jsx b/src/components/modals/settings/sections/SearchSettings.jsx index 24e9eb26..8b80f233 100644 --- a/src/components/modals/settings/sections/SearchSettings.jsx +++ b/src/components/modals/settings/sections/SearchSettings.jsx @@ -28,9 +28,7 @@ export default class SearchSettings extends React.PureComponent { render() { return (
      -
        - -
      +
        { - const reader = new FileReader(); - reader.readAsText(e.target.files[0], 'UTF-8'); - reader.onload = (readerEvent) => this.manage('install', JSON.parse(readerEvent.target.result)); - }; } render() { @@ -96,7 +91,7 @@ export default class Addons extends React.PureComponent { return (
        - + this.manage('install', JSON.parse(e.target.result))} />

        {this.props.language.added}

        {content} diff --git a/src/components/modals/tabs/Marketplace.jsx b/src/components/modals/tabs/Marketplace.jsx index 211b12ab..53844f47 100644 --- a/src/components/modals/tabs/Marketplace.jsx +++ b/src/components/modals/tabs/Marketplace.jsx @@ -100,9 +100,9 @@ export default class Marketplace extends React.PureComponent { default: break; } toast(this.props.toastLanguage[type + 'ed']); - let button = this.buttons.install; - if (type === 'install') button = this.buttons.uninstall; - this.setState({ button: button }); + this.setState({ + button: (type === 'install') ? this.buttons.uninstall : this.buttons.install + }); } componentDidMount() { @@ -132,7 +132,7 @@ export default class Marketplace extends React.PureComponent { ); } - if (this.state.done === false) return returnMessage(

        {this.props.updateLanguage.loading}

        ) + if (this.state.done === false) return returnMessage(

        {this.props.updateLanguage.loading}

        ); return ( diff --git a/src/modules/helpers/marketplace.js b/src/modules/helpers/marketplace.js index 36217bb7..b20e5360 100644 --- a/src/modules/helpers/marketplace.js +++ b/src/modules/helpers/marketplace.js @@ -24,6 +24,7 @@ export default class MarketplaceFunctions { console.error(e); } } + let installed = JSON.parse(localStorage.getItem('installed')); for (let i = 0; i < installed.length; i++) { if (installed[i].name === name) { diff --git a/src/modules/helpers/settings.js b/src/modules/helpers/settings.js index c753d3f1..41fa0e1b 100644 --- a/src/modules/helpers/settings.js +++ b/src/modules/helpers/settings.js @@ -47,8 +47,6 @@ export default class SettingsFunctions { } static saveStuff(hexDisabled) { - localStorage.setItem('greetingName', document.getElementById('greetingName').value); - localStorage.setItem('customBackground', document.getElementById('customBackground').value); localStorage.setItem('customcss', document.getElementById('customcss').value); if (document.getElementById('customBackgroundHex').value !== hexDisabled) { localStorage.setItem('customBackgroundColour', document.getElementById('customBackgroundHex').value); From ba843b44c4302b06dba4acf79082b3afdd8e5940 Mon Sep 17 00:00:00 2001 From: David Ralph Date: Fri, 4 Dec 2020 11:42:13 +0000 Subject: [PATCH 028/162] add language support to latest features --- src/components/modals/Main.jsx | 5 +++-- .../settings/sections/GreetingSettings.jsx | 4 ++-- src/components/modals/tabs/Settings.jsx | 18 +++++++++--------- src/modules/constants.js | 2 +- src/translations/en.json | 16 +++++++++++++++- 5 files changed, 30 insertions(+), 15 deletions(-) diff --git a/src/components/modals/Main.jsx b/src/components/modals/Main.jsx index 7416db8b..9cd69890 100644 --- a/src/components/modals/Main.jsx +++ b/src/components/modals/Main.jsx @@ -12,8 +12,8 @@ export default class MainModal extends React.PureComponent { constructor(...args) { super(...args); this.state = { - tab: , - currentTab: 'settings' + tab: '', + currentTab: '' }; this.tabs = { settings: , @@ -25,6 +25,7 @@ export default class MainModal extends React.PureComponent { componentDidMount() { document.getElementById('backgroundImage').classList.toggle('backgroundEffects'); document.getElementById('center').classList.toggle('backgroundEffects'); + this.setState({ tab: this.tabs.settings, currentTab: 'settings' }); } componentWillUnmount() { diff --git a/src/components/modals/settings/sections/GreetingSettings.jsx b/src/components/modals/settings/sections/GreetingSettings.jsx index 4895e1e9..3660ae2b 100644 --- a/src/components/modals/settings/sections/GreetingSettings.jsx +++ b/src/components/modals/settings/sections/GreetingSettings.jsx @@ -34,13 +34,13 @@ export default class GreetingSettings extends React.PureComponent {
        - +

          {this.props.language.greeting.name} this.resetItem()}>{this.props.language.reset}

          this.setState({ greetingName: e.target.value })}>
          -

          Birthday Date

          +

          {this.props.language.greeting.birthday_date}

          this.changeDate(data)} value={this.state.birthday}/>
        this.beforeUnload()}/> diff --git a/src/components/modals/tabs/Settings.jsx b/src/components/modals/tabs/Settings.jsx index c6b4a421..0c1aa8cc 100644 --- a/src/components/modals/tabs/Settings.jsx +++ b/src/components/modals/tabs/Settings.jsx @@ -52,24 +52,24 @@ export default class Settings extends React.PureComponent { - localStorage.setItem('quotelanguage', document.getElementById('quotelanguage').value)}> + localStorage.setItem('quotelanguage', document.getElementById('quotelanguage').value)}>
        -
        - - localStorage.setItem('dateFormat', document.getElementById('dateformat').value)}> +
        + + localStorage.setItem('dateFormat', document.getElementById('dateformat').value)}>

        - localStorage.setItem('shortFormat', document.getElementById('shortformat').value)}> - - - + localStorage.setItem('shortFormat', document.getElementById('shortformat').value)}> + + +
        @@ -82,7 +82,7 @@ export default class Settings extends React.PureComponent {
          -

          Custom CSS this.resetItem()}>{this.props.language.reset} NEW

          +

          {this.props.language.custom_css} this.resetItem()}>{this.props.language.reset} NEW

        diff --git a/src/modules/constants.js b/src/modules/constants.js index 3d3bd189..ce294f9f 100644 --- a/src/modules/constants.js +++ b/src/modules/constants.js @@ -3,4 +3,4 @@ export const UNSPLASH_URL = 'https://unsplash.muetab.com'; export const MARKETPLACE_URL = 'https://marketplace.muetab.com'; export const WEBSITE_URL = 'https://muetab.com'; export const OFFLINE_IMAGES = 20; -export const BETA_VERSION = true; \ No newline at end of file +export const BETA_VERSION = false; \ No newline at end of file diff --git a/src/translations/en.json b/src/translations/en.json index 79e1dacb..f28a3562 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -30,7 +30,9 @@ "title": "Greeting", "events": "Events", "default": "Default Greeting Message", - "name": "Name for greeting" + "name": "Name for greeting", + "birthday_enabled": "Birthday Enabled", + "birthday_date": "Birthday Date" }, "quote": { "title": "Quote", @@ -58,8 +60,20 @@ "search_engine": "Search Engine", "custom": "Custom Search URL" }, + "date": { + "title": "Date", + "short_date": "Short Date", + "short_format": "Short Format", + "short_separator": { + "title": "Short Separator", + "default": "Default", + "dash": "Dash", + "gaps": "Gaps" + } + }, "offline": "Offline Mode", "dark": "Dark Theme", + "custom_css": "Custom CSS", "experimental": { "title": "Experimental", "webp": "Enable WebP", From 7147dbef308a511aaade5125f22a68986422d909 Mon Sep 17 00:00:00 2001 From: David Ralph Date: Fri, 4 Dec 2020 14:15:38 +0000 Subject: [PATCH 029/162] fix bug (thanks @eartharoid) --- src/components/modals/settings/sections/BackgroundSettings.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/modals/settings/sections/BackgroundSettings.jsx b/src/components/modals/settings/sections/BackgroundSettings.jsx index 18f5b2aa..b48c05d6 100644 --- a/src/components/modals/settings/sections/BackgroundSettings.jsx +++ b/src/components/modals/settings/sections/BackgroundSettings.jsx @@ -40,7 +40,7 @@ export default class BackgroundSettings extends React.PureComponent { break; case 'brightness': localStorage.setItem('brightness', 100); - this.setState({ blur: 100 }); + this.setState({ brightness: 100 }); break; default: toast('resetItem requires a key!'); } From 408f8c4502cea8cc6534edf946c77f50725d7f4d Mon Sep 17 00:00:00 2001 From: David Ralph Date: Sat, 5 Dec 2020 13:48:14 +0000 Subject: [PATCH 030/162] optimise and fix quote api support for addons --- package.json | 11 ++- .../settings/sections/SearchSettings.jsx | 5 +- src/components/widgets/quote/Quote.jsx | 12 +-- .../widgets/quote/offline_quotes.json | 80 +++++++++++++++++++ src/modules/helpers/marketplace.js | 4 +- 5 files changed, 96 insertions(+), 16 deletions(-) create mode 100644 src/components/widgets/quote/offline_quotes.json diff --git a/package.json b/package.json index c47582d0..8a1a2fb2 100644 --- a/package.json +++ b/package.json @@ -11,15 +11,14 @@ "license": "BSD-3-Clause", "version": "5.0.0", "dependencies": { - "@material-ui/core": "4.11.1", - "@material-ui/icons": "4.9.1", - "@muetab/quotes": "^1.0.0", + "@material-ui/core": "4.11.2", + "@material-ui/icons": "4.11.2", "deepmerge": "^4.2.2", - "fontsource-lexend-deca": "^3.0.10", + "fontsource-lexend-deca": "^3.0.11", "fontsource-roboto": "^3.0.3", "react": "17.0.1", "react-beforeunload": "^2.4.0", - "react-clock": "^2.4.0", + "react-clock": "^3.0.0", "react-color-gradient-picker": "^0.1.2", "react-date-picker": "^8.0.5", "react-dom": "17.0.1", @@ -29,7 +28,7 @@ }, "devDependencies": { "node-sass": "4.14.1", - "react-scripts": "^3.4.4" + "react-scripts": "^4.0.1" }, "scripts": { "start": "react-scripts start", diff --git a/src/components/modals/settings/sections/SearchSettings.jsx b/src/components/modals/settings/sections/SearchSettings.jsx index 8b80f233..74d39f84 100644 --- a/src/components/modals/settings/sections/SearchSettings.jsx +++ b/src/components/modals/settings/sections/SearchSettings.jsx @@ -15,14 +15,15 @@ export default class SearchSettings extends React.PureComponent { } componentDidMount() { - if (localStorage.getItem('searchEngine') === 'custom') { + const searchEngine = localStorage.getItem('searchEngine'); + if (searchEngine === 'custom') { const input = document.getElementById('searchEngineInput'); input.style.display = 'block'; input.enabled = 'true'; document.getElementById('customSearchEngine').value = localStorage.getItem('customSearchEngine'); } else localStorage.removeItem('customSearchEngine'); - document.getElementById('searchEngine').value = localStorage.getItem('searchEngine'); + document.getElementById('searchEngine').value = searchEngine; } render() { diff --git a/src/components/widgets/quote/Quote.jsx b/src/components/widgets/quote/Quote.jsx index 535c57dd..6b0b15b8 100644 --- a/src/components/widgets/quote/Quote.jsx +++ b/src/components/widgets/quote/Quote.jsx @@ -1,5 +1,4 @@ import React from 'react'; -import Quotes from '@muetab/quotes'; import FileCopy from '@material-ui/icons/FilterNone'; import { toast } from 'react-toastify'; import * as Constants from '../../../modules/constants'; @@ -9,6 +8,8 @@ import StarIcon2 from '@material-ui/icons/StarBorder'; import './quote.scss'; +const quotes = require('./offline_quotes.json'); + export default class Quote extends React.PureComponent { constructor(...args) { super(...args); @@ -20,7 +21,7 @@ export default class Quote extends React.PureComponent { } doOffline() { - const quote = Quotes.random(); // Get a random quote from our local package + const quote = quotes[Math.floor(Math.random() * quotes.length)]; // Get a random quote from our local package this.setState({ quote: '"' + quote.quote + '"', author: quote.author @@ -42,14 +43,13 @@ export default class Quote extends React.PureComponent { } async getQuote() { - const quotePackAPI = JSON.parse(localStorage.getItem('quote_api')); + const quotePackAPI = JSON.parse(localStorage.getItem('quoteAPI')); if (quotePackAPI) { try { const data = await (await fetch(quotePackAPI.url)).json(); - const author = quotePackAPI.authorOverride || data[quotePackAPI.author]; return this.setState({ - quote: '"' + data[quotePackAPI.quote] + '"', - author: author + quote: '"' + data.quote + '"', + author: quotePackAPI.author || data.author }); } catch (e) { return this.getQuotePack(); diff --git a/src/components/widgets/quote/offline_quotes.json b/src/components/widgets/quote/offline_quotes.json new file mode 100644 index 00000000..687340dc --- /dev/null +++ b/src/components/widgets/quote/offline_quotes.json @@ -0,0 +1,80 @@ +[ + { + "author": "Robert De Niro", + "quote": "Time goes on. So whatever you’re going to do, do it. Do it now. Don’t wait." + }, + { + "author": "Walt Disney", + "quote": "All our dreams can come true, if we have the courage to pursue them." + }, + { + "author": "Confucius", + "quote": "It does not matter how slowly you go as long as you do not stop." + }, { + "author": "Roy T. Bennett", + "quote": "Believe in yourself. You are braver than you think, more talented than you know, and capable of more than you imagine." + }, { + "author": "Wayne Dyer", + "quote": "If you believe it will work out, you’ll see opportunities. If you believe it won’t, you will see obstacles." + }, { + "author": "George Addair", + "quote": "Everything you’ve ever wanted is on the other side of fear." + }, { + "author": "Winston Churchill", + "quote": "Success is not final, failure is not fatal: it is the courage to continue that counts." + }, { + "author": "Paulo Coelho", + "quote": "There is only one thing that makes a dream impossible to achieve: the fear of failure" + }, { + "author": "Brian Tracy", + "quote": "Your true success in life begins only when you make the commitment to become excellent at what you do." + }, { + "author": "Chantal Sutherland", + "quote": "Believe in yourself, take on your challenges, dig deep within yourself to conquer fears. Never let anyone bring you down. You got to keep going." + }, { + "author": "Les Brown", + "quote": "Too many of us are not living our dreams because we are living our fears." + }, { + "author": "Bob Riley", + "quote": "Hard times don’t create heroes. It is during the hard times when the ‘hero’ within us is revealed." + }, { + "author": "Jack Canfield", + "quote": "If you can tune into your purpose and really align with it, setting goals so that your vision is an expression of that purpose, then life flows much more easily." + }, { + "author": "Napolean Hill", + "quote": "Whatever the mind can conceive and believe, it can achieve." + }, { + "author": "Jim Rohn", + "quote": "Don’t wish it were easier. Wish you were better." + }, { + "author": "Serena Williams", + "quote": "A champion is defined not by their wins but by how they can recover when they fall." + }, { + "author": "Sheryl Sandberg", + "quote": "Motivation comes from working on things we care about." + }, { + "author": "Reese Witherspoon", + "quote": "With the right kind of coaching and determination you can accomplish anything." + }, { + "author": "Hazrat Inayat Khan", + "quote": "Some people look for a beautiful place. Others make a place beautiful." + }, { + "author": "Albert Einstein", + "quote": "Life is like riding a bicycle. To keep your balance, you must keep moving." + }, { + "author": "Walt Disney", + "quote": "The way to get started is to quit talking and begin doing." + }, { + "author": "Winston Churchill", + "quote": "A pessimist sees the difficulty in every opportunity; an optimist sees the opportunity in every difficulty." + }, { + "author": "Will Rogers", + "quote": "Don't let yesterday take up too much of today." + }, { + "author": "Vince Lombardi", + "quote": "It's not whether you get knocked down, it's whether you get up." + }, { + "author": "Steve Jobs", + "quote": "If you are working on something that you really care about, you don’t have to be pushed. The vision pulls you." + } +] \ No newline at end of file diff --git a/src/modules/helpers/marketplace.js b/src/modules/helpers/marketplace.js index b20e5360..1c710ebe 100644 --- a/src/modules/helpers/marketplace.js +++ b/src/modules/helpers/marketplace.js @@ -15,7 +15,7 @@ export default class MarketplaceFunctions { break; case 'quote_packs': localStorage.removeItem('quote_packs'); - localStorage.removeItem('quote_api'); + localStorage.removeItem('quoteAPI'); break; default: try { localStorage.removeItem(type); } @@ -46,7 +46,7 @@ export default class MarketplaceFunctions { break; case 'photo_packs': localStorage.setItem('photo_packs', JSON.stringify(input.photos)); break; case 'quote_packs': - if (input.quote_api) localStorage.setItem('quote_api', JSON.stringify(input.quote_api)); + if (input.quote_api) localStorage.setItem('quoteAPI', JSON.stringify(input.quote_api)); localStorage.setItem('quote_packs', JSON.stringify(input.quotes)); break; default: break; From 88e54ad26a613e5ab81ff5cd0fafe6c6addf30b3 Mon Sep 17 00:00:00 2001 From: David Ralph Date: Sat, 5 Dec 2020 14:34:52 +0000 Subject: [PATCH 031/162] WIP countdown widget --- package.json | 1 + src/App.jsx | 2 ++ .../settings/sections/CountdownSettings.jsx | 0 .../widgets/countdown/Countdown.jsx | 22 +++++++++++++++++++ .../widgets/countdown/countdown.scss | 5 +++++ 5 files changed, 30 insertions(+) create mode 100644 src/components/modals/settings/sections/CountdownSettings.jsx create mode 100644 src/components/widgets/countdown/Countdown.jsx create mode 100644 src/components/widgets/countdown/countdown.scss diff --git a/package.json b/package.json index 8a1a2fb2..76257bad 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "react-beforeunload": "^2.4.0", "react-clock": "^3.0.0", "react-color-gradient-picker": "^0.1.2", + "react-countdown": "^2.3.1", "react-date-picker": "^8.0.5", "react-dom": "17.0.1", "react-modal": "3.12.1", diff --git a/src/App.jsx b/src/App.jsx index 0015b80f..cf2d69e7 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -9,6 +9,7 @@ import Maximise from './components/widgets/background/Maximise'; import Favourite from './components/widgets/background/Favourite'; import PhotoInformation from './components/widgets/background/PhotoInformation'; import Date from './components/widgets/time/Date'; +import Countdown from './components/widgets/countdown/Countdown'; import Navbar from './components/widgets/navbar/Navbar'; @@ -72,6 +73,7 @@ export default class App extends React.PureComponent { +
        diff --git a/src/components/modals/settings/sections/CountdownSettings.jsx b/src/components/modals/settings/sections/CountdownSettings.jsx new file mode 100644 index 00000000..e69de29b diff --git a/src/components/widgets/countdown/Countdown.jsx b/src/components/widgets/countdown/Countdown.jsx new file mode 100644 index 00000000..0b859ccd --- /dev/null +++ b/src/components/widgets/countdown/Countdown.jsx @@ -0,0 +1,22 @@ +import React from 'react'; +import Countdown from 'react-countdown'; + +import './countdown.scss'; + +export default class CountdownWidget extends React.PureComponent { + constructor(...args) { + super(...args); + this.state = { + countdown: new Date(localStorage.getItem('birthday')), + message: localStorage.getItem('countdownmessage') || 'until tomorrow' + }; + } + + render() { + if (localStorage.getItem('countdown') === 'false') return; + return

        + this.setState({ message: 'Today\'s the day!'})} />
        + {this.state.message} +

        ; + } +} diff --git a/src/components/widgets/countdown/countdown.scss b/src/components/widgets/countdown/countdown.scss new file mode 100644 index 00000000..a02df73c --- /dev/null +++ b/src/components/widgets/countdown/countdown.scss @@ -0,0 +1,5 @@ +.countdown { + position: absolute; + bottom: 0; + font-size: 0.95em; +} \ No newline at end of file From 11b82fe944c03014aef74878cb2a4c34d7fee16e Mon Sep 17 00:00:00 2001 From: David Ralph Date: Sat, 5 Dec 2020 16:25:49 +0000 Subject: [PATCH 032/162] WIP CSS cleanup (some things broken atm) --- src/App.jsx | 6 +-- .../widgets/background/Favourite.jsx | 8 +-- .../widgets/background/Maximise.jsx | 2 +- .../background/scss/_photoinformation.scss | 15 ++---- .../widgets/background/scss/index.scss | 11 ++-- .../widgets/navbar/scss/_notes.scss | 25 +-------- src/components/widgets/navbar/scss/index.scss | 32 ----------- src/components/widgets/quote/quote.scss | 25 --------- src/components/widgets/search/search.scss | 5 +- src/components/widgets/time/clock.scss | 5 +- src/scss/modules/_buttons.scss | 10 ---- src/scss/modules/_marketplace.scss | 44 --------------- src/scss/modules/_modal.scss | 54 ++++++++++++++----- src/scss/modules/_settings.scss | 19 ------- 14 files changed, 59 insertions(+), 202 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index cf2d69e7..e867bfbf 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -75,10 +75,8 @@ export default class App extends React.PureComponent { -
        - - -
        + + this.setState({ mainModal: false })} isOpen={this.state.mainModal} className={modalClassList} overlayClassName={overlayClassList} ariaHideApp={false}>
        this.favourite()} /> + favourited: this.favourite()} /> }; } favourite() { if (localStorage.getItem('favourite')) { localStorage.removeItem('favourite'); - this.setState({ favourited: this.favourite()} /> }); + this.setState({ favourited: this.favourite()} /> }); } else { const url = document.getElementById('backgroundImage').style.backgroundImage.replace('url("', '').replace('")', ''); const credit = document.getElementById('credit').textContent; const location = document.getElementById('location').textContent; localStorage.setItem('favourite', JSON.stringify({ url: url, credit: credit, location: location })); - this.setState({ favourited: this.favourite()} /> }); + this.setState({ favourited: this.favourite()} /> }); } } componentDidMount() { - if (localStorage.getItem('favourite')) this.setState({ favourited: this.favourite()} /> }); + if (localStorage.getItem('favourite')) this.setState({ favourited: this.favourite()} /> }); } render() { diff --git a/src/components/widgets/background/Maximise.jsx b/src/components/widgets/background/Maximise.jsx index b74c5bf0..a339cbb1 100644 --- a/src/components/widgets/background/Maximise.jsx +++ b/src/components/widgets/background/Maximise.jsx @@ -38,7 +38,7 @@ export default class View extends React.PureComponent { render() { if (localStorage.getItem('view') === 'false' || localStorage.getItem('background') === 'false') return null; return
        - this.viewStuff()} /> + this.viewStuff()} />
        } } \ 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 ab3ab0b8..8bba3f82 100644 --- a/src/components/widgets/background/scss/_photoinformation.scss +++ b/src/components/widgets/background/scss/_photoinformation.scss @@ -7,19 +7,10 @@ svg { float: left; - vertical-align: middle; margin-right: 1rem; font-size: calc(10px + 2vmin); } - span { - display: none; - } - - h1 { - position: relative; - } - svg, h1 { display: inline; @@ -75,10 +66,10 @@ outline: none; border: none; } -} -.infoCard:hover { - display: block !important; + &:hover { + display: block !important; + } } .photoInformationHover { diff --git a/src/components/widgets/background/scss/index.scss b/src/components/widgets/background/scss/index.scss index 9e7a62f6..9730cd66 100644 --- a/src/components/widgets/background/scss/index.scss +++ b/src/components/widgets/background/scss/index.scss @@ -42,28 +42,23 @@ } .view { - bottom: 10px; right: 25px; } .favourite { - bottom: 10px; right: 50px; padding-right: 5px; } .view, .favourite { + bottom: 10px; position: absolute; transition: all 0.5s ease 0s; + width: auto; + cursor: pointer; &:hover { transform: scale(1.1); } -} - -#viewButton, -#favouriteButton { - width: auto; - cursor: pointer; } \ No newline at end of file diff --git a/src/components/widgets/navbar/scss/_notes.scss b/src/components/widgets/navbar/scss/_notes.scss index c58d72d0..288269b3 100644 --- a/src/components/widgets/navbar/scss/_notes.scss +++ b/src/components/widgets/navbar/scss/_notes.scss @@ -1,15 +1,4 @@ -.notes { - position: relative; - display: inline-block; - - h3 { - text-shadow: none; - margin: 0; - } -} - -.notes .notescontainer { - text-align: center; +.notescontainer { padding: 15px; visibility: hidden; background-color: #fff; @@ -48,33 +37,21 @@ } textarea { - overflow: none; border: none; - outline: none; width: 200px; resize: none; height: 100px; margin: 10px; } -.noteIcon { - display: inline; - font-size: 1em; - float: none; -} - .topbarnotes { - text-align: center; - svg { font-size: 48px; - float: left !important; padding: 9px; } h3 { font-size: 48px; - float: right; margin-right: 20px; } } diff --git a/src/components/widgets/navbar/scss/index.scss b/src/components/widgets/navbar/scss/index.scss index 2a48bb44..3d1d0ed2 100644 --- a/src/components/widgets/navbar/scss/index.scss +++ b/src/components/widgets/navbar/scss/index.scss @@ -34,38 +34,6 @@ } } -.bottom-navbar { - position: absolute; - bottom: 1rem; - right: 1rem; - - div { - display: inline; - } - - img { - height: 1em; - width: auto; - margin: 0.5rem; - } - - svg.topicons { - color: map-get($theme-colours, 'main-text-color'); - -webkit-font-smoothing: subpixel-antialiased; - font-size: 1em; - display: inline; - margin: 0.5rem; - filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.3)); - cursor: pointer; - transition: .2s ease; - - &:hover { - transform: translateZ(0); - transform: scale(1.3); - } - } -} - .visibilityshow { visibility: visible !important; } \ No newline at end of file diff --git a/src/components/widgets/quote/quote.scss b/src/components/widgets/quote/quote.scss index 04202718..da1c0ff3 100644 --- a/src/components/widgets/quote/quote.scss +++ b/src/components/widgets/quote/quote.scss @@ -15,24 +15,12 @@ .quoteauthor { font-size: 0.9em; letter-spacing: 0.5px; - margin: 0; -} - -.quoteAuthor, -.copyButton { - display: inline; - font-size: 0.8em; - position: relative !important; - display: block; - margin: 0 auto; } .copyButton { cursor: pointer; vertical-align: middle; - float: middle; margin: 0 auto; - text-align: right; transition: ease 0.2s !important; &:hover { @@ -45,19 +33,6 @@ h1.quoteauthor { display: inline; } -button.copyButton { - background: transparent; - border: none; - color: map-get($theme-colours, 'main'); - padding: 20px 20px; - text-align: center; - text-decoration: none; - font-size: 20px; - cursor: pointer; - border-radius: 5px; - display: table-cell -} - .quoteauthorlink { text-decoration: none; color: white; diff --git a/src/components/widgets/search/search.scss b/src/components/widgets/search/search.scss index aab31294..ef6b0560 100644 --- a/src/components/widgets/search/search.scss +++ b/src/components/widgets/search/search.scss @@ -20,6 +20,7 @@ background-color: rgba(0, 0, 0, 0.1); -webkit-transition: width 0.5s ease-in-out; transition: width 0.5s ease-in-out; + color: white; &:focus { width: 400px; @@ -41,8 +42,4 @@ .micIcon { margin-right: 10px; -} - -#searchEngine { - width: 130px; } \ No newline at end of file diff --git a/src/components/widgets/time/clock.scss b/src/components/widgets/time/clock.scss index 777a123e..8f8b9c4e 100644 --- a/src/components/widgets/time/clock.scss +++ b/src/components/widgets/time/clock.scss @@ -14,11 +14,10 @@ margin: 0 auto; border-radius: 100%; box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.3); - border: 1px solid map-get($theme-colours, "main"); + border: 1px solid map-get($theme-colours, 'main'); } .react-clock__hand__body { - background: map-get($theme-colours, "main"); - ; + background: map-get($theme-colours, 'main'); box-shadow: 0 0 25px rgba(0, 0, 0, 0.3); } \ No newline at end of file diff --git a/src/scss/modules/_buttons.scss b/src/scss/modules/_buttons.scss index 7477450f..a582691a 100644 --- a/src/scss/modules/_buttons.scss +++ b/src/scss/modules/_buttons.scss @@ -1,15 +1,10 @@ %settingsButton { - text-align: center; - border: none; transition: ease 0.33s; color: map-get($theme-colours, 'main'); cursor: pointer; - display: inline-block; - position: relative; padding: 10px 30px; font-size: 20px; border-radius: 24px; - background: none; box-shadow: 0 5px 15px rgba(128, 161, 144, 0.4); &:hover, &:active { @@ -92,14 +87,9 @@ cursor: pointer; font-size: 18px; float: right; - vertical-align: middle; padding: 5px 30px; background: none; - outline: none; - border: none; - border: 2px solid #2d3436; border-radius: 24px; - font-family: 'Lexend Deca', sans-serif; transition: ease 0.33s; &:hover { diff --git a/src/scss/modules/_marketplace.scss b/src/scss/modules/_marketplace.scss index 389f3314..669598c7 100644 --- a/src/scss/modules/_marketplace.scss +++ b/src/scss/modules/_marketplace.scss @@ -1,33 +1,3 @@ -.tab, -button.tablinks { - margin-top: -10px; - font-size: 24px; - background: none; - border: none; - outline: none; - color: map-get($modal, 'text'); -} - -button.tablinks { - cursor: pointer; - padding: 6px; - border-radius: 12px; - padding: 10px 30px 10px 30px; - - &:hover { - background: rgba(189, 195, 199, .075); - } - - &:after { - content: ''; - display: block; - margin: 0 auto; - width: 50%; - padding-top: 10px; - border-bottom: 3px solid map-get($modal, 'tab-underline'); - } -} - #item a { color: map-get($button-colours, 'other'); cursor: pointer; @@ -222,16 +192,6 @@ p.description { } } -.banner { - text-align: center; - background: #54a0ff; - border-radius: 24px; - padding: 10px; - margin: 0; - color: map-get($theme-colours, 'main'); - display: none !important; -} - .featured { background: #2d3436; margin-top: 20px; @@ -261,10 +221,6 @@ p.description { color: white; } -.requires { - float: right; -} - #seemore { display: none; diff --git a/src/scss/modules/_modal.scss b/src/scss/modules/_modal.scss index 1d008987..b6f926c6 100644 --- a/src/scss/modules/_modal.scss +++ b/src/scss/modules/_modal.scss @@ -149,18 +149,38 @@ } } -.updateContent { - width: 400px; - padding: 5px; +.tab, +button.tablinks { + margin-top: -10px; + font-size: 24px; + background: none; + border: none; + outline: none; + color: map-get($modal, 'text'); +} - .closeModal { - margin-top: 10px; - font-size: 45px; +.tablinks { + cursor: pointer; + padding: 6px; + border-radius: 12px; + padding: 10px 30px 10px 30px; + + &:hover { + background: rgba(189, 195, 199, .075); } - img { - width: 100%; - height: auto; + &:after { + content: ''; + display: block; + margin: 0 auto; + width: 50%; + padding-top: 10px; + border-bottom: 3px solid map-get($modal, 'tab-underline'); + } + + svg { + top: 0.125em; + position: relative; } } @@ -177,9 +197,19 @@ border-bottom-right-radius: map-get($modal, 'border-radius'); } -.tablinks svg { - top: 0.125em; - position: relative; +.updateContent { + width: 400px; + padding: 5px; + + .closeModal { + margin-top: 10px; + font-size: 45px; + } + + img { + width: 100%; + height: auto; + } } #feedbackmodal { diff --git a/src/scss/modules/_settings.scss b/src/scss/modules/_settings.scss index 4cc27925..eb7e014e 100644 --- a/src/scss/modules/_settings.scss +++ b/src/scss/modules/_settings.scss @@ -37,10 +37,6 @@ transition: 0.4s; border-radius: 50%; } - - &.round:before { - border-radius: 50%; - } } input { @@ -50,7 +46,6 @@ input { box-sizing: border-box; border-image-slice: 1; border-image-source: map-get($theme-colours, 'gradient'); - outline: none; background: transparent; } @@ -59,7 +54,6 @@ input { &:before { -webkit-transform: translateX(26px); - -ms-transform: translateX(26px); transform: translateX(26px); } } @@ -186,7 +180,6 @@ input[type=color] { } } -// This is duplicated because it didn't work with a comma, need to look into it later input[type=color]::-moz-color-swatch { border-radius: 100%; height: 30px; @@ -207,28 +200,16 @@ input[type=color]::-moz-color-swatch { } } -input[type=checkbox] { - vertical-align: middle; -} - .customBackgroundHex { font-size: 1.2em; padding-left: 7px; vertical-align: middle; } -input[type=number].stop { - margin-left: 7px; -} - button.remove + input[type=color].colour { margin-left: 7px; } -#customBackgroundColour { - cursor: pointer; -} - // Dark Theme .dark { #blurRange, #brightnessRange { From e2d7a9aebd9acbdd475fbf0c53d409cec9535847 Mon Sep 17 00:00:00 2001 From: David Ralph Date: Sat, 5 Dec 2020 17:09:14 +0000 Subject: [PATCH 033/162] fix --- src/components/widgets/navbar/scss/_notes.scss | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/components/widgets/navbar/scss/_notes.scss b/src/components/widgets/navbar/scss/_notes.scss index 288269b3..5d55021d 100644 --- a/src/components/widgets/navbar/scss/_notes.scss +++ b/src/components/widgets/navbar/scss/_notes.scss @@ -1,3 +1,12 @@ +.notes { + position: relative; + + h3 { + text-shadow: none; + margin: 0; + } +} + .notescontainer { padding: 15px; visibility: hidden; From e25f48cb140b63abe496e728cfcf7915414b0b33 Mon Sep 17 00:00:00 2001 From: David Ralph Date: Sat, 5 Dec 2020 18:43:16 +0000 Subject: [PATCH 034/162] more css cleanup --- src/components/widgets/navbar/scss/_notes.scss | 15 +-------------- src/components/widgets/navbar/scss/index.scss | 1 - src/components/widgets/quote/quote.scss | 1 - src/components/widgets/search/search.scss | 8 -------- src/scss/modules/_settings.scss | 3 --- 5 files changed, 1 insertion(+), 27 deletions(-) diff --git a/src/components/widgets/navbar/scss/_notes.scss b/src/components/widgets/navbar/scss/_notes.scss index 5d55021d..c88b3a63 100644 --- a/src/components/widgets/navbar/scss/_notes.scss +++ b/src/components/widgets/navbar/scss/_notes.scss @@ -15,20 +15,8 @@ text-align: center; border-radius: 12px; position: absolute; - z-index: 1; top: 80%; - left: 50%; - margin-left: -125px; - - input[type=text] { - border: none; - color: #2d3436; - } - - svg, - input[type=text] { - display: inline-flex; - } + margin-left: -150px; svg { float: left; @@ -40,7 +28,6 @@ } } - .notes:hover .notescontainer { visibility: visible; } diff --git a/src/components/widgets/navbar/scss/index.scss b/src/components/widgets/navbar/scss/index.scss index 3d1d0ed2..b6e4a91b 100644 --- a/src/components/widgets/navbar/scss/index.scss +++ b/src/components/widgets/navbar/scss/index.scss @@ -20,7 +20,6 @@ color: map-get($theme-colours, 'main-text-color'); -webkit-font-smoothing: subpixel-antialiased; font-size: 1em; - display: inline; margin: 0.5rem; filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.3)); cursor: pointer; diff --git a/src/components/widgets/quote/quote.scss b/src/components/widgets/quote/quote.scss index da1c0ff3..a80b4676 100644 --- a/src/components/widgets/quote/quote.scss +++ b/src/components/widgets/quote/quote.scss @@ -20,7 +20,6 @@ .copyButton { cursor: pointer; vertical-align: middle; - margin: 0 auto; transition: ease 0.2s !important; &:hover { diff --git a/src/components/widgets/search/search.scss b/src/components/widgets/search/search.scss index ef6b0560..2b7a65ec 100644 --- a/src/components/widgets/search/search.scss +++ b/src/components/widgets/search/search.scss @@ -4,9 +4,6 @@ position: absolute; left: 20px; top: 20px; - display: flex; - flex-direction: row; - display: block; color: map-get($theme-colours, 'main-text-color'); input[type=text] { @@ -14,7 +11,6 @@ margin-left: 12px; border-radius: 24px; font-size: calc(5px + 1.2vmin); - background: transparent; border: none; position: absolute; background-color: rgba(0, 0, 0, 0.1); @@ -36,10 +32,6 @@ } } -.input.searchtext { - border: none; -} - .micIcon { margin-right: 10px; } \ No newline at end of file diff --git a/src/scss/modules/_settings.scss b/src/scss/modules/_settings.scss index eb7e014e..b8f3e06d 100644 --- a/src/scss/modules/_settings.scss +++ b/src/scss/modules/_settings.scss @@ -81,10 +81,8 @@ h4, } .expandIcons { - position: relative; font-size: 25px; vertical-align: middle; - display: inline-flex; } h4, @@ -133,7 +131,6 @@ li { -webkit-appearance: none; width: 200px; height: 15px; - background: #ccc; border-radius: 12px; outline: none; background: #ecf0f1; From 3fec08a492343eff8c9a80c53cc93c48fdd08381 Mon Sep 17 00:00:00 2001 From: David Ralph Date: Sun, 6 Dec 2020 12:55:42 +0000 Subject: [PATCH 035/162] more cleanup and fixes --- .../widgets/countdown/countdown.scss | 1 + src/components/widgets/time/clock.scss | 5 ++- src/index.js | 1 + src/scss/index.scss | 1 - src/scss/modules/_checkbox.scss | 3 -- src/scss/modules/_marketplace.scss | 39 ------------------- src/scss/modules/_modal.scss | 37 ++++++++++-------- src/scss/modules/_settings.scss | 8 ++-- 8 files changed, 30 insertions(+), 65 deletions(-) delete mode 100644 src/scss/modules/_checkbox.scss diff --git a/src/components/widgets/countdown/countdown.scss b/src/components/widgets/countdown/countdown.scss index a02df73c..eeef9ba1 100644 --- a/src/components/widgets/countdown/countdown.scss +++ b/src/components/widgets/countdown/countdown.scss @@ -2,4 +2,5 @@ position: absolute; bottom: 0; font-size: 0.95em; + cursor: default; } \ No newline at end of file diff --git a/src/components/widgets/time/clock.scss b/src/components/widgets/time/clock.scss index 8f8b9c4e..b2f7dcd0 100644 --- a/src/components/widgets/time/clock.scss +++ b/src/components/widgets/time/clock.scss @@ -14,10 +14,11 @@ margin: 0 auto; border-radius: 100%; box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.3); - border: 1px solid map-get($theme-colours, 'main'); + border: none !important; + border: 1px solid map-get($theme-colours, 'main') !important; } .react-clock__hand__body { - background: map-get($theme-colours, 'main'); + background: map-get($theme-colours, 'main') !important; box-shadow: 0 0 25px rgba(0, 0, 0, 0.3); } \ No newline at end of file diff --git a/src/index.js b/src/index.js index 5a6054a8..7c997b57 100644 --- a/src/index.js +++ b/src/index.js @@ -4,6 +4,7 @@ import ReactDOM from 'react-dom'; import App from './App'; import './scss/index.scss'; +import 'react-clock/dist/Clock.css'; import 'react-toastify/dist/ReactToastify.css'; // the toast css is based on default so we need to import it import 'fontsource-lexend-deca/latin-400-normal.css'; diff --git a/src/scss/index.scss b/src/scss/index.scss index 4890ca30..f66476f3 100644 --- a/src/scss/index.scss +++ b/src/scss/index.scss @@ -5,7 +5,6 @@ @import 'modules/settings'; @import 'modules/toast'; @import 'modules/marketplace'; -@import 'modules/checkbox'; @import 'modules/buttons'; @import 'modules/dropdown'; @import 'modules/welcome'; diff --git a/src/scss/modules/_checkbox.scss b/src/scss/modules/_checkbox.scss deleted file mode 100644 index c9f6f28d..00000000 --- a/src/scss/modules/_checkbox.scss +++ /dev/null @@ -1,3 +0,0 @@ -.MuiCheckbox-colorPrimary.Mui-checked { - color: map-get($button-colours, 'reset') !important; -} \ No newline at end of file diff --git a/src/scss/modules/_marketplace.scss b/src/scss/modules/_marketplace.scss index 669598c7..7703ebe7 100644 --- a/src/scss/modules/_marketplace.scss +++ b/src/scss/modules/_marketplace.scss @@ -7,33 +7,8 @@ } } - -.active:after { - border-bottom: 3px solid map-get($modal, 'tab-underline-active') !important; -} - -.dark { - .tab, - button.tablinks { - color: white; - } - - .active:after { - border-image-slice: 1; - border-image-source: map-get($theme-colours, 'gradient'); - border-bottom: 3px solid; - } -} - -.tab { - margin-left: -3px; -} - .items { display: flex; - flex-flow: wrap; - align-items: left; - justify-content: left; margin-top: -10px; .item { @@ -45,8 +20,6 @@ transition: 0.5s; cursor: pointer; margin-right: 20px; - margin-bottom: 20px; - overflow: none; img { height: 100%; @@ -81,13 +54,6 @@ margin-top: 5px; } - p.desc { - margin-top: -14px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - &:hover { transform: scale(1.1); } @@ -127,14 +93,11 @@ p.description { svg { font-size: 50px; - line-height: 0px; - margin: 0; margin-bottom: -20px; } } .backArrow { - position: relative; cursor: pointer; &:hover { @@ -160,7 +123,6 @@ p.description { &.header { text-transform: uppercase; color: #787878; - list-style: none; margin-left: -5px; } } @@ -193,7 +155,6 @@ p.description { } .featured { - background: #2d3436; margin-top: 20px; border-radius: 24px; padding: 50px; diff --git a/src/scss/modules/_modal.scss b/src/scss/modules/_modal.scss index b6f926c6..20ea18dc 100644 --- a/src/scss/modules/_modal.scss +++ b/src/scss/modules/_modal.scss @@ -1,18 +1,11 @@ .Modal { - color: map-get($modal, 'text'); background-color: map-get($modal, 'background'); box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); - border: none; - opacity: 1; - z-index: -2; padding: 25px; - cursor: hand; transition: 0.6s; transition-timing-function: ease-in; border-radius: map-get($modal, 'border-radius'); - -moz-user-select: none; -webkit-user-select: none; - user-select: none; scrollbar-color: #34495e #bdc3c7; &:focus { @@ -46,11 +39,6 @@ color: white !important; } -.ReactModal__Html--open, -.ReactModal__Body--open { - overflow: hidden; -} - .zoom-in { @include animation('zoom-in'); } @@ -75,9 +63,6 @@ top: 0; left: 0; right: 0; - bottom: 0; - width: 100vw; - height: 90vh; display: flex; align-items: baseline; justify-content: center; @@ -161,7 +146,6 @@ button.tablinks { .tablinks { cursor: pointer; - padding: 6px; border-radius: 12px; padding: 10px 30px 10px 30px; @@ -184,6 +168,27 @@ button.tablinks { } } +.active:after { + border-bottom: 3px solid map-get($modal, 'tab-underline-active') !important; +} + +.dark { + .tab, + button.tablinks { + color: white; + } + + .active:after { + border-image-slice: 1; + border-image-source: map-get($theme-colours, 'gradient'); + border-bottom: 3px solid; + } +} + +.tab { + margin-left: -3px; +} + ::-webkit-scrollbar { width: 13px; background: #bdc3c7; diff --git a/src/scss/modules/_settings.scss b/src/scss/modules/_settings.scss index b8f3e06d..86564f36 100644 --- a/src/scss/modules/_settings.scss +++ b/src/scss/modules/_settings.scss @@ -203,10 +203,6 @@ input[type=color]::-moz-color-swatch { vertical-align: middle; } -button.remove + input[type=color].colour { - margin-left: 7px; -} - // Dark Theme .dark { #blurRange, #brightnessRange { @@ -239,4 +235,8 @@ button.remove + input[type=color].colour { font-family: Consolas !important; border: solid 1px black !important; margin-left: 0px; +} + +.MuiCheckbox-colorPrimary.Mui-checked { + color: map-get($button-colours, 'reset') !important; } \ No newline at end of file From c42e41ca15ac4afae1094ad327d3e27a1c05ff57 Mon Sep 17 00:00:00 2001 From: David Ralph Date: Sun, 3 Jan 2021 15:27:09 +0000 Subject: [PATCH 036/162] improve update modal etc --- package.json | 1 + src/App.jsx | 18 +++++------ src/components/modals/Update.jsx | 31 +++++++++++++------ .../widgets/countdown/Countdown.jsx | 22 ------------- .../widgets/countdown/countdown.scss | 6 ---- 5 files changed, 30 insertions(+), 48 deletions(-) delete mode 100644 src/components/widgets/countdown/Countdown.jsx delete mode 100644 src/components/widgets/countdown/countdown.scss diff --git a/package.json b/package.json index 76257bad..a8e603da 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "license": "BSD-3-Clause", "version": "5.0.0", "dependencies": { + "@eartharoid/dtf": "^1.0.8", "@material-ui/core": "4.11.2", "@material-ui/icons": "4.11.2", "deepmerge": "^4.2.2", diff --git a/src/App.jsx b/src/App.jsx index e867bfbf..8e565140 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -9,7 +9,6 @@ import Maximise from './components/widgets/background/Maximise'; import Favourite from './components/widgets/background/Favourite'; import PhotoInformation from './components/widgets/background/PhotoInformation'; import Date from './components/widgets/time/Date'; -import Countdown from './components/widgets/countdown/Countdown'; import Navbar from './components/widgets/navbar/Navbar'; @@ -22,7 +21,7 @@ import merge from 'deepmerge'; const Main = React.lazy(() => import('./components/modals/Main')); const Update = React.lazy(() => import('./components/modals/Update')); const Welcome = React.lazy(() => import('./components/modals/Welcome')); -const Feedback = React.lazy(() => import('./components/modals/Feedback')); +//const Feedback = React.lazy(() => import('./components/modals/Feedback')); const renderLoader = () =>
        ; export default class App extends React.PureComponent { @@ -51,6 +50,7 @@ export default class App extends React.PureComponent { // Render all the components render() { + // dark theme support for modals and info card let modalClassList = 'Modal'; let tooltipClassList = 'infoCard'; if ((localStorage.getItem('brightnessTime') && new Date().getHours() > 18) || localStorage.getItem('darkTheme') === 'true') { @@ -59,6 +59,7 @@ export default class App extends React.PureComponent { } const overlayClassList = (localStorage.getItem('animations') === 'true') ? 'Overlay modal-animation' : 'Overlay'; + /// language const languagecode = localStorage.getItem('language') || 'en'; const language = merge(require('./translations/en.json'), require(`./translations/${languagecode}.json`)); @@ -73,27 +74,22 @@ export default class App extends React.PureComponent { - this.setState({ mainModal: false })} isOpen={this.state.mainModal} className={modalClassList} overlayClassName={overlayClassList} ariaHideApp={false}> -
        this.setState({ mainModal: false })} /> +
        this.setState({ mainModal: false })} /> this.setState({ updateModal: false })} isOpen={this.state.updateModal} className={modalClassList} overlayClassName={overlayClassList} ariaHideApp={false}> - this.setState({ updateModal: false })} /> + this.setState({ updateModal: false })} /> this.closeWelcome()} isOpen={this.state.welcomeModal} className={modalClassList} overlayClassName={overlayClassList} ariaHideApp={false}> this.closeWelcome()} language={language.welcome} /> - this.setState({ feedbackModal: false })} isOpen={this.state.feedbackModal} className={modalClassList} overlayClassName={overlayClassList} ariaHideApp={false}> + {/* this.setState({ feedbackModal: false })} isOpen={this.state.feedbackModal} className={modalClassList} overlayClassName={overlayClassList} ariaHideApp={false}> this.setState({ feedbackModal: false })} /> - + */}
        diff --git a/src/components/modals/Update.jsx b/src/components/modals/Update.jsx index 6ba36737..5d7de5cf 100644 --- a/src/components/modals/Update.jsx +++ b/src/components/modals/Update.jsx @@ -16,17 +16,29 @@ export default class Update extends React.PureComponent { async getUpdate() { const supportText = `

        ${this.props.language.contact_support}: https://muetab.com/contact

        `; - if (localStorage.getItem('offlineMode') === 'true') return this.setState({ - title: this.props.language.offline.title, - html: this.props.language.offline.description - }); + const removeStuff = () => { // quick code to make update modal a bit better, will replace later + document.getElementById('author').innerText = ''; + const img = document.getElementsByTagName('img')[0]; + img.parentNode.removeChild(img); + } + + if (localStorage.getItem('offlineMode') === 'true') { + removeStuff(); + return this.setState({ + title: this.props.language.offline.title, + html: this.props.language.offline.description + }); + } try { // Get update log from the API const data = await (await fetch(Constants.API_URL + '/getUpdate')).json(); - if (data.statusCode === 500) return this.setState({ - title: this.props.language.error.title, - html: this.props.language.error.description + supportText - }); + if (data.statusCode === 500) { + removeStuff(); + return this.setState({ + title: this.props.language.error.title, + html: this.props.language.error.description + supportText + }); + } this.setState({ title: data.title, @@ -36,6 +48,7 @@ export default class Update extends React.PureComponent { html: data.content + `

        ${this.props.language.read_blog}: ${data.url}

        ` }); } catch (e) { // If it fails, we send an error + removeStuff(); this.setState({ title: this.props.language.error.title, html: this.props.language.error.description + supportText @@ -51,7 +64,7 @@ export default class Update extends React.PureComponent { return
        ×

        {this.state.title}

        -
        By {this.state.author} • {this.state.date}
        +
        By {this.state.author} • {this.state.date}
        Update

        ; diff --git a/src/components/widgets/countdown/Countdown.jsx b/src/components/widgets/countdown/Countdown.jsx deleted file mode 100644 index 0b859ccd..00000000 --- a/src/components/widgets/countdown/Countdown.jsx +++ /dev/null @@ -1,22 +0,0 @@ -import React from 'react'; -import Countdown from 'react-countdown'; - -import './countdown.scss'; - -export default class CountdownWidget extends React.PureComponent { - constructor(...args) { - super(...args); - this.state = { - countdown: new Date(localStorage.getItem('birthday')), - message: localStorage.getItem('countdownmessage') || 'until tomorrow' - }; - } - - render() { - if (localStorage.getItem('countdown') === 'false') return; - return

        - this.setState({ message: 'Today\'s the day!'})} />
        - {this.state.message} -

        ; - } -} diff --git a/src/components/widgets/countdown/countdown.scss b/src/components/widgets/countdown/countdown.scss deleted file mode 100644 index eeef9ba1..00000000 --- a/src/components/widgets/countdown/countdown.scss +++ /dev/null @@ -1,6 +0,0 @@ -.countdown { - position: absolute; - bottom: 0; - font-size: 0.95em; - cursor: default; -} \ No newline at end of file From 0a735384df6fde8f949951ea2d5df61906ac4f04 Mon Sep 17 00:00:00 2001 From: David Ralph Date: Sat, 16 Jan 2021 18:39:03 +0000 Subject: [PATCH 037/162] refactor and fix some things --- CONTRIBUTING.md | 3 +- package.json | 5 +- public/icons/mue_verified.svg | 10 ---- src/App.jsx | 19 ++----- src/components/modals/Update.jsx | 51 +++++++------------ .../settings/sections/BackgroundSettings.jsx | 5 +- .../settings/sections/CountdownSettings.jsx | 0 src/components/widgets/Widgets.jsx | 41 +++++++++++++++ .../widgets/background/Favourite.jsx | 5 +- .../widgets/background/Maximise.jsx | 46 ++++++++--------- .../widgets/background/PhotoInformation.jsx | 5 +- .../background/scss/_photoinformation.scss | 5 +- src/components/widgets/greeting/Greeting.jsx | 1 - src/components/widgets/navbar/Navbar.jsx | 4 ++ src/components/widgets/navbar/Notes.jsx | 5 +- src/components/widgets/quote/Quote.jsx | 3 -- src/components/widgets/search/Search.jsx | 11 ++-- src/components/widgets/search/search.scss | 2 +- src/components/widgets/time/Clock.jsx | 6 ++- src/components/widgets/time/Date.jsx | 2 +- src/index.js | 1 - src/modules/helpers/settings.js | 8 +-- src/scss/modules/_buttons.scss | 1 + 23 files changed, 122 insertions(+), 117 deletions(-) delete mode 100644 public/icons/mue_verified.svg delete mode 100644 src/components/modals/settings/sections/CountdownSettings.jsx create mode 100644 src/components/widgets/Widgets.jsx diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 4cd0530d..3979815b 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -32,6 +32,5 @@ Inspired features are fine. ### Bug Fixes See the note in general. - ## Final Note -Contact us before doing anything if you don't want to have to change 1000 things and/or have your pull request closed. +Contact us before doing anything if you don't want to have to change 1000 things and/or have your pull request closed. \ No newline at end of file diff --git a/package.json b/package.json index 6cdb9e5a..7f9c2d59 100644 --- a/package.json +++ b/package.json @@ -21,11 +21,10 @@ "react-beforeunload": "^2.4.0", "react-clock": "^3.0.0", "react-color-gradient-picker": "^0.1.2", - "react-date-picker": "^8.0.5", + "react-date-picker": "^8.0.6", "react-dom": "17.0.1", "react-modal": "3.12.1", - "react-toastify": "6.2.0", - "supports-webp": "2.0.1" + "react-toastify": "6.2.0" }, "devDependencies": { "node-sass": "^4.14.1", diff --git a/public/icons/mue_verified.svg b/public/icons/mue_verified.svg deleted file mode 100644 index 3db434a7..00000000 --- a/public/icons/mue_verified.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - diff --git a/src/App.jsx b/src/App.jsx index 8e565140..3fd0423a 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,15 +1,8 @@ import React from 'react'; import Background from './components/widgets/background/Background'; -import Clock from './components/widgets/time/Clock'; -import Greeting from './components/widgets/greeting/Greeting'; -import Quote from './components/widgets/quote/Quote'; -import Search from './components/widgets/search/Search'; -import Maximise from './components/widgets/background/Maximise'; -import Favourite from './components/widgets/background/Favourite'; +import Widgets from './components/widgets/Widgets'; import PhotoInformation from './components/widgets/background/PhotoInformation'; -import Date from './components/widgets/time/Date'; - import Navbar from './components/widgets/navbar/Navbar'; import SettingsFunctions from './modules/helpers/settings'; @@ -38,8 +31,10 @@ export default class App extends React.PureComponent { componentDidMount() { if (!localStorage.getItem('firstRun')) SettingsFunctions.setDefaultSettings(); if (localStorage.getItem('showWelcome') === 'true') this.setState({ welcomeModal: true }); + const css = localStorage.getItem('customcss'); if (css) document.head.insertAdjacentHTML('beforeend', ''); + if (localStorage.getItem('darkTheme') === 'true') document.getElementsByClassName('Toastify')[0].classList.add('dark'); } @@ -68,15 +63,9 @@ export default class App extends React.PureComponent {
        - this.setState({ mainModal: true })} updateModalOpen={() => this.setState({ updateModal: true })} feedbackModalOpen={() => this.setState({ feedbackModal: true })} language={language} /> - - - - + - - this.setState({ mainModal: false })} isOpen={this.state.mainModal} className={modalClassList} overlayClassName={overlayClassList} ariaHideApp={false}>
        this.setState({ mainModal: false })} /> diff --git a/src/components/modals/Update.jsx b/src/components/modals/Update.jsx index 5d7de5cf..c93e341e 100644 --- a/src/components/modals/Update.jsx +++ b/src/components/modals/Update.jsx @@ -6,54 +6,37 @@ export default class Update extends React.PureComponent { super(...args); this.state = { title: this.props.language.title, - date: '???', + date: null, content: this.props.language.title, - author: 'Mue', - html: this.props.language.loading + html: this.props.language.loading, + image: null }; } async getUpdate() { - const supportText = `

        ${this.props.language.contact_support}: https://muetab.com/contact

        `; - - const removeStuff = () => { // quick code to make update modal a bit better, will replace later - document.getElementById('author').innerText = ''; - const img = document.getElementsByTagName('img')[0]; - img.parentNode.removeChild(img); - } - if (localStorage.getItem('offlineMode') === 'true') { - removeStuff(); return this.setState({ title: this.props.language.offline.title, html: this.props.language.offline.description }); } - try { // Get update log from the API - const data = await (await fetch(Constants.API_URL + '/getUpdate')).json(); - if (data.statusCode === 500) { - removeStuff(); - return this.setState({ - title: this.props.language.error.title, - html: this.props.language.error.description + supportText - }); - } - - this.setState({ - title: data.title, - date: data.published, - image: data.image, - author: data.author, - html: data.content + `

        ${this.props.language.read_blog}: ${data.url}

        ` - }); - } catch (e) { // If it fails, we send an error - removeStuff(); - this.setState({ + const data = await (await fetch(Constants.API_URL + '/getUpdate')).json(); + if (data.statusCode === 500 || data.title === null) { + const supportText = `

        ${this.props.language.contact_support}: https://muetab.com/contact

        `; + return this.setState({ title: this.props.language.error.title, html: this.props.language.error.description + supportText }); } + + this.setState({ + title: data.title, + date: data.published, + image: data.image || null, + author: data.author, + html: data.content + }); } componentDidMount() { @@ -64,8 +47,8 @@ export default class Update extends React.PureComponent { return
        ×

        {this.state.title}

        -
        By {this.state.author} • {this.state.date}
        - Update +
        {this.state.date}
        + {this.state.image ? Update : null}

        ; } diff --git a/src/components/modals/settings/sections/BackgroundSettings.jsx b/src/components/modals/settings/sections/BackgroundSettings.jsx index b48c05d6..446cf265 100644 --- a/src/components/modals/settings/sections/BackgroundSettings.jsx +++ b/src/components/modals/settings/sections/BackgroundSettings.jsx @@ -1,12 +1,15 @@ import React from 'react'; -import { toast } from 'react-toastify'; + import Checkbox from '../Checkbox'; import Dropdown from '../Dropdown'; import Section from '../Section'; import FileUpload from '../FileUpload'; + import { ColorPicker } from 'react-color-gradient-picker'; import hexToRgb from '../../../../modules/helpers/background/hexToRgb'; import rgbToHex from '../../../../modules/helpers/background/rgbToHex'; + +import { toast } from 'react-toastify'; import { Beforeunload } from 'react-beforeunload'; import 'react-color-gradient-picker/dist/index.css'; diff --git a/src/components/modals/settings/sections/CountdownSettings.jsx b/src/components/modals/settings/sections/CountdownSettings.jsx deleted file mode 100644 index e69de29b..00000000 diff --git a/src/components/widgets/Widgets.jsx b/src/components/widgets/Widgets.jsx new file mode 100644 index 00000000..b2cad9d0 --- /dev/null +++ b/src/components/widgets/Widgets.jsx @@ -0,0 +1,41 @@ +import React from 'react'; + +import Clock from './time/Clock'; +import Greeting from './greeting/Greeting'; +import Quote from './quote/Quote'; +import Search from './search/Search'; +import Maximise from './background/Maximise'; +import Favourite from './background/Favourite'; +import Date from './time/Date'; + +export default class Widgets extends React.PureComponent { + enabled(key) { + const old = localStorage.getItem(key); + let val = true; + + if (old !== null) { + if (old === 'true') val = true; + if (old === 'false') val = false; + } + + return val; + } + + // Render all the components + render() { + const { language, languagecode } = this.props; + const enabled = this.enabled; + + return ( + + {enabled('searchBar') ? : null} + {enabled('greeting') ? : null} + {enabled('clock') ? : null} + {enabled('date') ? : null} + {enabled('quote') ? : null} + {enabled('view') ? : null} + {enabled('favouriteEnabled') ? : null} + + ); + } +} diff --git a/src/components/widgets/background/Favourite.jsx b/src/components/widgets/background/Favourite.jsx index ce3794d6..fd120f11 100644 --- a/src/components/widgets/background/Favourite.jsx +++ b/src/components/widgets/background/Favourite.jsx @@ -18,13 +18,16 @@ export default class Favourite extends React.PureComponent { const url = document.getElementById('backgroundImage').style.backgroundImage.replace('url("', '').replace('")', ''); const credit = document.getElementById('credit').textContent; const location = document.getElementById('location').textContent; + localStorage.setItem('favourite', JSON.stringify({ url: url, credit: credit, location: location })); this.setState({ favourited: this.favourite()} /> }); } } componentDidMount() { - if (localStorage.getItem('favourite')) this.setState({ favourited: this.favourite()} /> }); + if (localStorage.getItem('favourite')) { + this.setState({ favourited: this.favourite()} /> }); + } } render() { diff --git a/src/components/widgets/background/Maximise.jsx b/src/components/widgets/background/Maximise.jsx index a339cbb1..301f6287 100644 --- a/src/components/widgets/background/Maximise.jsx +++ b/src/components/widgets/background/Maximise.jsx @@ -16,29 +16,29 @@ export default class View extends React.PureComponent { ); } - viewStuff() { - const elements = ['#searchBar', '.navbar-container', '.clock', '.greeting', '.quotediv', 'time']; // elements to hide - elements.forEach((element) => { - try { - (this.state.hidden === false) ? document.querySelector(element).style.display = 'none' : document.querySelector(element).style.display = 'block'; - } catch (e) { - return; - } - }); + viewStuff() { + const elements = ['#searchBar', '.navbar-container', '.clock', '.greeting', '.quotediv', 'time']; // elements to hide + elements.forEach((element) => { + try { + (this.state.hidden === false) ? document.querySelector(element).style.display = 'none' : document.querySelector(element).style.display = 'block'; + } catch (e) { + return; + } + }); + + if (this.state.hidden === false) { + this.setState({ hidden: true }); + this.setAttribute(0, 100); + } else { + this.setState({ hidden: false }); + this.setAttribute(localStorage.getItem('blur'), localStorage.getItem('brightness')); + } + } - if (this.state.hidden === false) { - this.setState({ hidden: true }); - this.setAttribute(0, 100); - } else { - this.setState({ hidden: false }); - this.setAttribute(localStorage.getItem('blur'), localStorage.getItem('brightness')); + render() { + if (localStorage.getItem('background') === 'false') return null; + return
        + this.viewStuff()} /> +
        } - } - - render() { - if (localStorage.getItem('view') === 'false' || localStorage.getItem('background') === 'false') return null; - return
        - this.viewStuff()} /> -
        - } } \ No newline at end of file diff --git a/src/components/widgets/background/PhotoInformation.jsx b/src/components/widgets/background/PhotoInformation.jsx index f907ebf5..81c9a6b8 100644 --- a/src/components/widgets/background/PhotoInformation.jsx +++ b/src/components/widgets/background/PhotoInformation.jsx @@ -7,14 +7,11 @@ 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}

        diff --git a/src/components/widgets/background/scss/_photoinformation.scss b/src/components/widgets/background/scss/_photoinformation.scss index 8bba3f82..30131846 100644 --- a/src/components/widgets/background/scss/_photoinformation.scss +++ b/src/components/widgets/background/scss/_photoinformation.scss @@ -9,6 +9,7 @@ float: left; margin-right: 1rem; font-size: calc(10px + 2vmin); + cursor: pointer; } svg, @@ -72,10 +73,6 @@ } } -.photoInformationHover { - cursor: pointer; -} - .dark hr { background-color: white !important; } \ No newline at end of file diff --git a/src/components/widgets/greeting/Greeting.jsx b/src/components/widgets/greeting/Greeting.jsx index abecabc3..042d9d89 100644 --- a/src/components/widgets/greeting/Greeting.jsx +++ b/src/components/widgets/greeting/Greeting.jsx @@ -56,7 +56,6 @@ export default class Greeting extends React.PureComponent { } componentDidMount() { - if (localStorage.getItem('greeting') === 'false') return; this.getGreeting(); } diff --git a/src/components/widgets/navbar/Navbar.jsx b/src/components/widgets/navbar/Navbar.jsx index c4f06188..571ee800 100644 --- a/src/components/widgets/navbar/Navbar.jsx +++ b/src/components/widgets/navbar/Navbar.jsx @@ -1,10 +1,12 @@ import React from 'react'; + import RefreshIcon from '@material-ui/icons/RefreshRounded'; import Gear from '@material-ui/icons/SettingsRounded'; import NewReleases from '@material-ui/icons/NewReleasesRounded'; import NotesIcon from '@material-ui/icons/AssignmentRounded'; import Tooltip from '@material-ui/core/Tooltip'; import Report from '@material-ui/icons/SmsFailed'; + import * as Constants from '../../../modules/constants'; import './scss/index.scss'; @@ -20,6 +22,7 @@ export default class Navbar extends React.PureComponent { window.location.reload()} /> ); + if (localStorage.getItem('refresh') === 'false') refreshHTML = null; // toggle feedback button @@ -28,6 +31,7 @@ export default class Navbar extends React.PureComponent { ); + if (Constants.BETA_VERSION === false) feedbackHTML = null; return ( diff --git a/src/components/widgets/navbar/Notes.jsx b/src/components/widgets/navbar/Notes.jsx index e6fd5f89..71bd9c10 100644 --- a/src/components/widgets/navbar/Notes.jsx +++ b/src/components/widgets/navbar/Notes.jsx @@ -23,12 +23,15 @@ export default class Notes extends React.PureComponent { } componentDidMount() { - if (localStorage.getItem('notesPinned') === 'true') document.getElementById('noteContainer').classList.toggle('visibilityshow'); + if (localStorage.getItem('notesPinned') === 'true') { + document.getElementById('noteContainer').classList.toggle('visibilityshow'); + } } render() { let classList = 'notescontainer'; if (localStorage.getItem('darkTheme') === 'true') classList += ' dark'; + return (
        diff --git a/src/components/widgets/quote/Quote.jsx b/src/components/widgets/quote/Quote.jsx index 6b0b15b8..e489b918 100644 --- a/src/components/widgets/quote/Quote.jsx +++ b/src/components/widgets/quote/Quote.jsx @@ -93,15 +93,12 @@ export default class Quote extends React.PureComponent { } componentDidMount() { - if (localStorage.getItem('quote') === 'false') return; if (localStorage.getItem('favouriteQuote')) this.setState({ favourited: this.favourite()} /> }); if (localStorage.getItem('favouriteQuoteEnabled') === 'false') this.setState({ favourited: null }); this.getQuote(); } render() { - if (localStorage.getItem('quote') === 'false') return null; - let copy = this.copyQuote()}>; if (localStorage.getItem('copyButton') === 'false') copy = null; diff --git a/src/components/widgets/search/Search.jsx b/src/components/widgets/search/Search.jsx index 9873f497..2d906966 100644 --- a/src/components/widgets/search/Search.jsx +++ b/src/components/widgets/search/Search.jsx @@ -18,13 +18,12 @@ export default class Search extends React.PureComponent { startSpeechRecognition() { const voiceSearch = new window.webkitSpeechRecognition(); voiceSearch.start(); - voiceSearch.onresult = (event) => document.getElementById('searchtext').value = event.results[0][0].transcript; - voiceSearch.onend = () => setTimeout(() => window.location.href = this.state.url + `?${this.state.query}=` + document.getElementById('searchtext').value, 1000); + const searchText = document.getElementById('searchtext'); + voiceSearch.onresult = (event) => searchText.value = event.results[0][0].transcript; + voiceSearch.onend = () => setTimeout(() => window.location.href = this.state.url + `?${this.state.query}=` + searchText.value, 1000); } render() { - if (localStorage.getItem('searchBar') === 'false') return null; - let url; let query = 'q'; @@ -52,8 +51,8 @@ export default class Search extends React.PureComponent { } return ( -
        searchText.value = event.results[0][0].transcript; + + voiceSearch.onresult = (event) => { + searchText.value = event.results[0][0].transcript; + } + voiceSearch.onend = () =>{ setTimeout(() => { window.location.href = this.state.url + `?${this.state.query}=` + searchText.value; @@ -28,9 +34,11 @@ export default class Search extends React.PureComponent { } } - render() { + + componentDidMount() { let url; let query = 'q'; + let microphone = null; const setting = localStorage.getItem('searchEngine'); const info = searchEngines.find(i => i.settingsName === setting); @@ -44,27 +52,24 @@ export default class Search extends React.PureComponent { url = localStorage.getItem('customSearchEngine'); } - const searchButton = () => { - const value = document.getElementById('searchtext').value || 'mue fast'; - window.location.href = url + `?${query}=` + value; - }; - - let microphone = null; if (localStorage.getItem('voiceSearch') === 'true') { - this.setState({ - url: url, - query: query - }); microphone = this.startSpeechRecognition()}/>; } + this.setState({ + url: url, + query: query, + microphone: microphone + }); + } + + render() { return (
      - this.beforeUnload()}/> ); } diff --git a/src/components/modals/settings/sections/GreetingSettings.jsx b/src/components/modals/settings/sections/GreetingSettings.jsx index d0cf451d..04bc31d5 100644 --- a/src/components/modals/settings/sections/GreetingSettings.jsx +++ b/src/components/modals/settings/sections/GreetingSettings.jsx @@ -5,7 +5,6 @@ import Checkbox from '../Checkbox'; import DatePicker from 'react-date-picker'; import { toast } from 'react-toastify'; -import { Beforeunload } from 'react-beforeunload'; export default class GreetingSettings extends React.PureComponent { constructor(...args) { @@ -36,7 +35,7 @@ export default class GreetingSettings extends React.PureComponent { }); } - beforeUnload() { + componentDidUpdate() { localStorage.setItem('greetingName', this.state.greetingName); } @@ -54,7 +53,6 @@ export default class GreetingSettings extends React.PureComponent {

      {this.props.language.greeting.birthday_date}

      this.changeDate(data)} value={this.state.birthday}/>
    - this.beforeUnload()}/> ); } diff --git a/src/components/modals/settings/sections/SearchSettings.jsx b/src/components/modals/settings/sections/SearchSettings.jsx index 5a35b497..29a539bc 100644 --- a/src/components/modals/settings/sections/SearchSettings.jsx +++ b/src/components/modals/settings/sections/SearchSettings.jsx @@ -1,7 +1,5 @@ import React from 'react'; -import SettingsFunctions from '../../../../modules/helpers/settings'; - import { toast } from 'react-toastify'; import Section from '../Section'; @@ -35,6 +33,28 @@ export default class SearchSettings extends React.PureComponent { document.getElementById('searchEngine').value = searchEngine; } + componentDidUpdate() { + if (document.getElementById('searchEngineInput').enabled === 'true') { + const input = document.getElementById('customSearchEngine').value; + if (input) { + localStorage.setItem('searchEngine', 'custom'); + localStorage.setItem('customSearchEngine', input); + } + } + } + + setSearchEngine(input) { + const searchEngineInput = document.getElementById('searchEngineInput'); + if (input === 'custom') { + searchEngineInput.enabled = 'true'; + searchEngineInput.style.display = 'block'; + } else { + searchEngineInput.style.display = 'none'; + searchEngineInput.enabled = 'false'; + localStorage.setItem('searchEngine', input); + } + } + render() { return (
    @@ -43,7 +63,7 @@ export default class SearchSettings extends React.PureComponent { SettingsFunctions.setSearchEngine(document.getElementById('searchEngine').value)} > + onChange={() => this.setSearchEngine(document.getElementById('searchEngine').value)} > {searchEngines.map((engine) => )} diff --git a/src/components/modals/tabs/Settings.jsx b/src/components/modals/tabs/Settings.jsx index c282392f..b1670aa4 100644 --- a/src/components/modals/tabs/Settings.jsx +++ b/src/components/modals/tabs/Settings.jsx @@ -42,6 +42,10 @@ export default class Settings extends React.PureComponent { toast(this.props.toastLanguage.imported); } + componentWillUnmount() { + localStorage.setItem('customcss', document.getElementById('customcss').value); + } + render() { return (
    @@ -81,7 +85,7 @@ export default class Settings extends React.PureComponent {
    - +
    @@ -97,7 +101,7 @@ export default class Settings extends React.PureComponent { - + diff --git a/src/modules/helpers/settings.js b/src/modules/helpers/settings.js index c3aab985..76e6f106 100644 --- a/src/modules/helpers/settings.js +++ b/src/modules/helpers/settings.js @@ -43,36 +43,6 @@ export default class SettingsFunctions { localStorage.setItem(key, val); } - static setSearchEngine(input) { - const searchEngineInput = document.getElementById('searchEngineInput'); - if (input === 'custom') { - searchEngineInput.enabled = 'true'; - searchEngineInput.style.display = 'block'; - } else { - searchEngineInput.style.display = 'none'; - searchEngineInput.enabled = 'false'; - localStorage.setItem('searchEngine', input); - } - } - - static saveStuff(hexDisabled) { - localStorage.setItem('customcss', document.getElementById('customcss').value); - - if (document.getElementById('customBackgroundHex').value !== hexDisabled) { - localStorage.setItem('customBackgroundColour', document.getElementById('customBackgroundHex').value); - } - - if (document.getElementById('searchEngineInput').enabled === 'true') { - const input = document.getElementById('customSearchEngine').value; - if (input) { - localStorage.setItem('searchEngine', 'custom'); - localStorage.setItem('customSearchEngine', input); - } - } - - window.location.reload(); - } - static setDefaultSettings(reset) { localStorage.clear(); defaultSettings.forEach((element) => localStorage.setItem(element.name, element.value)); @@ -85,7 +55,7 @@ export default class SettingsFunctions { } // Languages - const languages = ['nl', 'no', 'fr', 'ru', 'es']; + const languages = ['es', 'fr', 'nl', 'no', 'ru']; const browserLanguage = (navigator.languages && navigator.languages[0]) || navigator.language; if (languages.includes(browserLanguage)) { From 412aa339d913795a80af6e92949ddb05bdd7627e Mon Sep 17 00:00:00 2001 From: David Ralph Date: Fri, 26 Feb 2021 15:35:50 +0000 Subject: [PATCH 047/162] better firefox dropdown --- package.json | 6 +++--- src/modules/helpers/marketplace.js | 6 +++++- src/scss/modules/_dropdown.scss | 9 +++++++++ 3 files changed, 17 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index 6fc76454..0f5e6e1c 100644 --- a/package.json +++ b/package.json @@ -14,16 +14,16 @@ "@eartharoid/dtf": "^1.0.8", "@fontsource/lexend-deca": "^4.2.2", "@fontsource/roboto": "^4.2.1", - "@material-ui/core": "4.11.2", + "@material-ui/core": "4.11.3", "@material-ui/icons": "4.11.2", "deepmerge": "^4.2.2", "react": "17.0.1", "react-clock": "^3.0.0", "react-color-gradient-picker": "^0.1.2", - "react-date-picker": "^8.0.6", + "react-date-picker": "^8.0.7", "react-dom": "17.0.1", "react-modal": "3.12.1", - "react-toastify": "6.2.0" + "react-toastify": "7.0.3" }, "devDependencies": { "@babel/core": "^7.12.10", diff --git a/src/modules/helpers/marketplace.js b/src/modules/helpers/marketplace.js index 15265d42..ac8cf606 100644 --- a/src/modules/helpers/marketplace.js +++ b/src/modules/helpers/marketplace.js @@ -69,6 +69,7 @@ export default class MarketplaceFunctions { } let installed = JSON.parse(localStorage.getItem('installed')); + if (sideload) { installed.push({ content: { @@ -76,7 +77,10 @@ export default class MarketplaceFunctions { data: input } }); - } else installed.push(input); + } else { + installed.push(input); + } + localStorage.setItem('installed', JSON.stringify(installed)); } } \ No newline at end of file diff --git a/src/scss/modules/_dropdown.scss b/src/scss/modules/_dropdown.scss index 3a0ed8b3..53de1787 100644 --- a/src/scss/modules/_dropdown.scss +++ b/src/scss/modules/_dropdown.scss @@ -14,3 +14,12 @@ float: right; } } + +// firefox dropdown +@supports (-moz-appearance:none) { + select { + -moz-appearance: none !important; + background: url('data:image/gif;base64,R0lGODlhBgAGAKEDAFVVVX9/f9TU1CgmNyH5BAEKAAMALAAAAAAGAAYAAAIODA4hCDKWxlhNvmCnGwUAOw==') right center no-repeat, linear-gradient(180deg, #ffb032 0%, #dd3b67 100%) !important; + background-position: calc(100% - 5px) center !important; + } +} \ No newline at end of file From d79baacc1a8af9fb0d46893d1d5207a47bc4e04b Mon Sep 17 00:00:00 2001 From: David Ralph Date: Fri, 26 Feb 2021 16:06:54 +0000 Subject: [PATCH 048/162] Make it easier to add languages and fix console error with marketplace/addons --- .babelrc | 2 +- src/components/modals/marketplace/Item.jsx | 7 ++++- .../settings/sections/LanguageSettings.jsx | 13 +++++----- src/modules/helpers/settings.js | 5 ++-- src/modules/languages.json | 26 +++++++++++++++++++ 5 files changed, 42 insertions(+), 11 deletions(-) create mode 100644 src/modules/languages.json diff --git a/.babelrc b/.babelrc index 7b4b42b2..e33295d9 100644 --- a/.babelrc +++ b/.babelrc @@ -2,5 +2,5 @@ "presets": ["@babel/preset-env", "@babel/preset-react"], "plugins": ["@babel/plugin-proposal-class-properties", ["@babel/transform-runtime", { "regenerator": true - }]] + }]] } \ No newline at end of file diff --git a/src/components/modals/marketplace/Item.jsx b/src/components/modals/marketplace/Item.jsx index 15a1c2ab..1e87bb41 100644 --- a/src/components/modals/marketplace/Item.jsx +++ b/src/components/modals/marketplace/Item.jsx @@ -19,6 +19,11 @@ export default function Item(props) { // ignore } + let iconsrc = 'https://external-content.duckduckgo.com/iu/?u=' + props.data.icon; // prevent console error + if (!props.data.icon) { + iconsrc = null; + } + return (

    @@ -27,7 +32,7 @@ export default function Item(props) {

    {props.data.name}

    {props.button}

    - product + product

    {props.language.information}

    diff --git a/src/components/modals/settings/sections/LanguageSettings.jsx b/src/components/modals/settings/sections/LanguageSettings.jsx index b84c78c7..ddb44e0d 100644 --- a/src/components/modals/settings/sections/LanguageSettings.jsx +++ b/src/components/modals/settings/sections/LanguageSettings.jsx @@ -1,6 +1,8 @@ import React from 'react'; import Dropdown from '../Dropdown'; +const languages = require('../../../../modules/languages.json'); + export default function LanguageSettings (props) { return (
    @@ -8,13 +10,10 @@ export default function LanguageSettings (props) { localStorage.setItem('language', document.getElementById('language').value)} > - - - - - - + onChange={() => localStorage.setItem('language', document.getElementById('language').value)}> + {languages.map(language => + + )}
    ); diff --git a/src/modules/helpers/settings.js b/src/modules/helpers/settings.js index 76e6f106..23387548 100644 --- a/src/modules/helpers/settings.js +++ b/src/modules/helpers/settings.js @@ -1,4 +1,5 @@ const defaultSettings = require('../default_settings.json'); +const languages = require('../languages.json'); const saveFile = (data, filename = 'file') => { if (typeof data === 'object') { @@ -55,10 +56,10 @@ export default class SettingsFunctions { } // Languages - const languages = ['es', 'fr', 'nl', 'no', 'ru']; + const languageCodes = languages.map(({ code }) => code).splice(1); // remove "en" from list const browserLanguage = (navigator.languages && navigator.languages[0]) || navigator.language; - if (languages.includes(browserLanguage)) { + if (languageCodes.includes(browserLanguage)) { localStorage.setItem('language', browserLanguage); document.documentElement.lang = browserLanguage; } else { diff --git a/src/modules/languages.json b/src/modules/languages.json new file mode 100644 index 00000000..964a503d --- /dev/null +++ b/src/modules/languages.json @@ -0,0 +1,26 @@ +[ + { + "text": "English", + "code": "en" + }, + { + "text": "Español", + "code": "es" + }, + { + "text": "Français", + "code": "fr" + }, + { + "text": "Nederlands", + "code": "nl" + }, + { + "text": "Norsk", + "code": "no" + }, + { + "text": "Pусский", + "code": "ru" + } +] \ No newline at end of file From 195b7839d06311af47d352966ec5799dbb5aa28c Mon Sep 17 00:00:00 2001 From: David Ralph Date: Fri, 26 Feb 2021 22:46:07 +0000 Subject: [PATCH 049/162] Add some appearance/accessibility settings (no ui yet) --- src/App.jsx | 15 +++++---------- src/modules/helpers/settings.js | 34 +++++++++++++++++++++++++++++++++ 2 files changed, 39 insertions(+), 10 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 28699e53..8f80bcc0 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -38,16 +38,9 @@ export default class App extends React.PureComponent { welcomeModal: true }); } + + SettingsFunctions.loadSettings(); - const css = localStorage.getItem('customcss'); - if (css) { - document.head.insertAdjacentHTML('beforeend', ''); - } - - if (localStorage.getItem('darkTheme') === 'true') { - document.getElementsByClassName('Toastify')[0].classList.add('dark'); - } - // These lines of code prevent double clicking the page or pressing CTRL + A from highlighting the page document.addEventListener('mousedown', (event) => { if (event.detail > 1) { @@ -92,10 +85,12 @@ export default class App extends React.PureComponent { const languagecode = localStorage.getItem('language') || 'en'; const language = merge(require('./translations/en.json'), require(`./translations/${languagecode}.json`)); + const toastDisplayTime = localStorage.getItem('toastDisplayTime') || 2500; + return ( - +
    this.setState({ [modal]: true })} language={language} /> diff --git a/src/modules/helpers/settings.js b/src/modules/helpers/settings.js index 23387548..4db6021e 100644 --- a/src/modules/helpers/settings.js +++ b/src/modules/helpers/settings.js @@ -74,4 +74,38 @@ export default class SettingsFunctions { localStorage.setItem('firstRun', true); window.location.reload(); } + + static loadSettings() { + const css = localStorage.getItem('customcss'); + if (css) { + document.head.insertAdjacentHTML('beforeend', ''); + } + + if (localStorage.getItem('darkTheme') === 'true') { + document.getElementsByClassName('Toastify')[0].classList.add('dark'); + } + + const font = localStorage.getItem('font'); + if (font) { + const data = JSON.parse(font); + + let url = ''; + if (data.google === true) { + url = `@import url('https://fonts.googleapis.com/css2?family=${data.name}&display=swap');`; + } + + document.head.insertAdjacentHTML('beforeend', ` + `); + } + + const zoom = localStorage.getItem('zoom'); + if (zoom !== 100) { // don't bother if it's default zoom + document.body.style.zoom = zoom + '%'; + } + } } \ No newline at end of file From caf4a07473c56dcc998be3751c4009c4c3ad2496 Mon Sep 17 00:00:00 2001 From: David Ralph Date: Sat, 27 Feb 2021 13:46:41 +0000 Subject: [PATCH 050/162] Add new modal (WIP) Currently broken: marketplace, addons, resizing the modal, gradient settings Not implemented: apply button, reset button, import/export buttons Co-authored-by: Alex Sparkes --- src/App.jsx | 2 +- src/components/modals/Main.jsx | 62 +-- src/components/modals/settings/Section.jsx | 56 --- .../modals/settings/sections/About.jsx | 41 ++ .../modals/settings/sections/Appearance.jsx | 26 ++ ...{BackgroundSettings.jsx => Background.jsx} | 8 +- .../{GreetingSettings.jsx => Greeting.jsx} | 6 +- .../{LanguageSettings.jsx => Language.jsx} | 3 +- .../modals/settings/sections/Quote.jsx | 19 + .../{SearchSettings.jsx => Search.jsx} | 6 +- .../modals/settings/sections/Time.jsx | 25 ++ src/components/modals/tabs-backend/Tab.jsx | 81 ++++ src/components/modals/tabs-backend/Tabs.jsx | 53 +++ src/components/modals/tabs/Settings.jsx | 142 ++----- src/scss/index.scss | 5 +- src/scss/modules/_modal.scss | 270 -------------- src/scss/modules/modals/_feedback.scss | 52 +++ src/scss/modules/modals/_main.scss | 352 ++++++++++++++++++ src/scss/modules/modals/_update.scss | 14 + 19 files changed, 733 insertions(+), 490 deletions(-) delete mode 100644 src/components/modals/settings/Section.jsx create mode 100644 src/components/modals/settings/sections/About.jsx create mode 100644 src/components/modals/settings/sections/Appearance.jsx rename src/components/modals/settings/sections/{BackgroundSettings.jsx => Background.jsx} (97%) rename src/components/modals/settings/sections/{GreetingSettings.jsx => Greeting.jsx} (92%) rename src/components/modals/settings/sections/{LanguageSettings.jsx => Language.jsx} (94%) create mode 100644 src/components/modals/settings/sections/Quote.jsx rename src/components/modals/settings/sections/{SearchSettings.jsx => Search.jsx} (95%) create mode 100644 src/components/modals/settings/sections/Time.jsx create mode 100644 src/components/modals/tabs-backend/Tab.jsx create mode 100644 src/components/modals/tabs-backend/Tabs.jsx delete mode 100644 src/scss/modules/_modal.scss create mode 100644 src/scss/modules/modals/_feedback.scss create mode 100644 src/scss/modules/modals/_main.scss create mode 100644 src/scss/modules/modals/_update.scss diff --git a/src/App.jsx b/src/App.jsx index 8f80bcc0..f3e3fbea 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -96,7 +96,7 @@ export default class App extends React.PureComponent { - this.setState({ mainModal: false })} isOpen={this.state.mainModal} className={modalClassList} overlayClassName={overlayClassList} ariaHideApp={false}> + this.setState({ mainModal: false })} isOpen={this.state.mainModal} className={modalClassList} overlayClassName={overlayClassList} ariaHideApp={false}>
    this.setState({ mainModal: false })} /> this.setState({ updateModal: false })} isOpen={this.state.updateModal} className={modalClassList} overlayClassName={overlayClassList} ariaHideApp={false}> diff --git a/src/components/modals/Main.jsx b/src/components/modals/Main.jsx index 3237ed3a..3dd2840a 100644 --- a/src/components/modals/Main.jsx +++ b/src/components/modals/Main.jsx @@ -4,61 +4,27 @@ import Settings from './tabs/Settings'; import Addons from './tabs/Addons'; import Marketplace from './tabs/Marketplace'; -import SettingsIcon from '@material-ui/icons/Settings'; -import AddonsIcon from '@material-ui/icons/Widgets'; -import MarketplaceIcon from '@material-ui/icons/ShoppingBasket'; +import Navigation from './tabs-backend/Tabs'; export default class MainModal extends React.PureComponent { - constructor(...args) { - super(...args); - this.state = { - tab: '', - currentTab: '' - } - this.tabs = { - settings: , - addons: this.changeEnabled('marketplace')}/>, - marketplace: - } - } - - componentDidMount() { - document.getElementById('backgroundImage').classList.toggle('backgroundEffects'); - document.getElementById('center').classList.toggle('backgroundEffects'); - - this.setState({ - tab: this.tabs.settings, - currentTab: 'settings' - }); - } - - componentWillUnmount() { - document.getElementById('backgroundImage').classList.toggle('backgroundEffects'); - document.getElementById('center').classList.toggle('backgroundEffects'); - } - - changeEnabled(input) { - document.getElementById(this.state.currentTab + 'TabLink').classList.toggle('active'); - document.getElementById(input + 'TabLink').classList.toggle('active'); - - this.setState({ - tab: this.tabs[input], - currentTab: input - }); - } - render() { return ( -
    +
    ×

    {this.props.language.modals.title}

    -
    - - - +
    + +
    + +
    +
    + +
    +
    + +
    +
    -
    - {this.state.tab}
    ); } diff --git a/src/components/modals/settings/Section.jsx b/src/components/modals/settings/Section.jsx deleted file mode 100644 index 574f949c..00000000 --- a/src/components/modals/settings/Section.jsx +++ /dev/null @@ -1,56 +0,0 @@ -import React from 'react'; - -import Slider from './Slider'; - -import ExpandMore from '@material-ui/icons/ExpandMore'; - -export default class Section extends React.PureComponent { - constructor(...args) { - super(...args); - this.state = { - display: 'none', - transform: 'rotate(0)' - }; - } - - toggleSection() { - const display = (this.state.display === 'none') ? 'block' : 'none'; - - this.setState({ - display: display, - transform: (this.state.transform === 'rotate(0)') ? 'rotate(-180deg)' : 'rotate(0)' - }); - - if (this.props.onToggle) { - this.props.onToggle(display); - } - } - - render() { - let extraHTML, expandMore; - - if (this.props.children) { - extraHTML = ( -
    -
  • {this.props.children}
    • -
    - ); - - expandMore = ( - this.toggleSection()} /> - ); - } - - return ( -
    -

    this.toggleSection()}>{this.props.title}

    - {expandMore} - {(this.props.slider !== false) ? : null} - {extraHTML} -
    - ); - } -} \ No newline at end of file diff --git a/src/components/modals/settings/sections/About.jsx b/src/components/modals/settings/sections/About.jsx new file mode 100644 index 00000000..eb4aac39 --- /dev/null +++ b/src/components/modals/settings/sections/About.jsx @@ -0,0 +1,41 @@ +import React from 'react'; + +import Tooltip from '@material-ui/core/Tooltip'; + +export default class About extends React.PureComponent { + constructor(...args) { + super(...args); + this.state = { + contributors: [] + } + } + + async getContributors() { + const data = await (await fetch('https://api.github.com/repos/mue/mue/contributors')).json(); + + this.setState({ + contributors: data // TODO: REMOVE BOTS AND MAKE IT ACTUALLY WORK + }); + } + + componentDidMount() { + this.getContributors(); + } + + render() { + return ( +
    +

    About

    + Mue logo +

    Copyright 2018-2021 Mue Tab (BSD-3 License)

    +

    Version 5.0.0

    +

    Contributors

    + {this.state.contributors.map((item) => + + {item.login} + + )} +
    + ); + } +} \ No newline at end of file diff --git a/src/components/modals/settings/sections/Appearance.jsx b/src/components/modals/settings/sections/Appearance.jsx new file mode 100644 index 00000000..d63f975c --- /dev/null +++ b/src/components/modals/settings/sections/Appearance.jsx @@ -0,0 +1,26 @@ +import React from 'react'; +import Checkbox from '../Checkbox'; + +export default function AppearanceSettings (props) { + return ( +
    +

    Appearance

    + + + +
      +

      {props.language.custom_css} this.resetItem()}>{props.language.reset} NEW

      + +
    +

    Accessibility

    +
      +

      Zoom (100%) {props.language.reset}

      + +
    +
      +

      Toast Duration (2500 milliseconds) {props.language.reset}

      + +
    +
    + ); +} \ No newline at end of file diff --git a/src/components/modals/settings/sections/BackgroundSettings.jsx b/src/components/modals/settings/sections/Background.jsx similarity index 97% rename from src/components/modals/settings/sections/BackgroundSettings.jsx rename to src/components/modals/settings/sections/Background.jsx index 2b598a85..7e840bd2 100644 --- a/src/components/modals/settings/sections/BackgroundSettings.jsx +++ b/src/components/modals/settings/sections/Background.jsx @@ -2,7 +2,6 @@ import React from 'react'; import Checkbox from '../Checkbox'; import Dropdown from '../Dropdown'; -import Section from '../Section'; import FileUpload from '../FileUpload'; import { ColorPicker } from 'react-color-gradient-picker'; @@ -227,8 +226,8 @@ export default class BackgroundSettings extends React.PureComponent { } return ( - -
    +
    +

    Background

      @@ -266,8 +265,7 @@ export default class BackgroundSettings extends React.PureComponent { {this.state.shown && colourSettings}
    -
    -     +
    ); } } \ No newline at end of file diff --git a/src/components/modals/settings/sections/GreetingSettings.jsx b/src/components/modals/settings/sections/Greeting.jsx similarity index 92% rename from src/components/modals/settings/sections/GreetingSettings.jsx rename to src/components/modals/settings/sections/Greeting.jsx index 04bc31d5..4b014537 100644 --- a/src/components/modals/settings/sections/GreetingSettings.jsx +++ b/src/components/modals/settings/sections/Greeting.jsx @@ -1,6 +1,5 @@ import React from 'react'; -import Section from '../Section'; import Checkbox from '../Checkbox'; import DatePicker from 'react-date-picker'; @@ -41,7 +40,8 @@ export default class GreetingSettings extends React.PureComponent { render() { return ( -
    +
    +

    Greeting

    @@ -53,7 +53,7 @@ export default class GreetingSettings extends React.PureComponent {

    {this.props.language.greeting.birthday_date}

    this.changeDate(data)} value={this.state.birthday}/> -
    +
    ); } } \ No newline at end of file diff --git a/src/components/modals/settings/sections/LanguageSettings.jsx b/src/components/modals/settings/sections/Language.jsx similarity index 94% rename from src/components/modals/settings/sections/LanguageSettings.jsx rename to src/components/modals/settings/sections/Language.jsx index ddb44e0d..15c25120 100644 --- a/src/components/modals/settings/sections/LanguageSettings.jsx +++ b/src/components/modals/settings/sections/Language.jsx @@ -5,7 +5,8 @@ const languages = require('../../../../modules/languages.json'); export default function LanguageSettings (props) { return ( -
    +
    +

    Language

    {props.language.language}

    +

    Quote

    + + + + localStorage.setItem('quotelanguage', document.getElementById('quotelanguage').value)}> + + + +
    + ); +} \ No newline at end of file diff --git a/src/components/modals/settings/sections/SearchSettings.jsx b/src/components/modals/settings/sections/Search.jsx similarity index 95% rename from src/components/modals/settings/sections/SearchSettings.jsx rename to src/components/modals/settings/sections/Search.jsx index 29a539bc..a8f418a2 100644 --- a/src/components/modals/settings/sections/SearchSettings.jsx +++ b/src/components/modals/settings/sections/Search.jsx @@ -2,7 +2,6 @@ import React from 'react'; import { toast } from 'react-toastify'; -import Section from '../Section'; import Dropdown from '../Dropdown'; import Checkbox from '../Checkbox'; @@ -57,7 +56,8 @@ export default class SearchSettings extends React.PureComponent { render() { return ( -
    +
    +

    Search

      {this.props.language.searchbar.custom} this.resetSearch()}>{this.props.language.reset}

    -
    +
    ); } } \ No newline at end of file diff --git a/src/components/modals/settings/sections/Time.jsx b/src/components/modals/settings/sections/Time.jsx new file mode 100644 index 00000000..e108416e --- /dev/null +++ b/src/components/modals/settings/sections/Time.jsx @@ -0,0 +1,25 @@ +import React from 'react'; + +import Checkbox from '../Checkbox'; +import Dropdown from '../Dropdown'; + +export default function TimeSettings (props) { + return ( +
    +

    Time

    + + + + + + +

    Date

    + + localStorage.setItem('dateFormat', document.getElementById('dateformat').value)}> + + + + +
    + ); +} \ No newline at end of file diff --git a/src/components/modals/tabs-backend/Tab.jsx b/src/components/modals/tabs-backend/Tab.jsx new file mode 100644 index 00000000..a5a8316d --- /dev/null +++ b/src/components/modals/tabs-backend/Tab.jsx @@ -0,0 +1,81 @@ +import React from 'react'; + +// navbar +import Settings from '@material-ui/icons/Settings'; +import Addons from '@material-ui/icons/Widgets'; +import Marketplace from '@material-ui/icons/ShoppingBasket'; + +// settings +import Time from '@material-ui/icons/AccessAlarm'; +import Greeting from '@material-ui/icons/EmojiPeople'; +import Quote from '@material-ui/icons/FormatQuote'; +import Background from '@material-ui/icons/Photo'; +import Search from '@material-ui/icons/Search'; +import About from '@material-ui/icons/Info'; +import Plugins from '@material-ui/icons/Widgets'; +import Added from '@material-ui/icons/AddCircle'; +import Appearance from '@material-ui/icons/FormatPaint'; +import Language from '@material-ui/icons/Translate'; +import Changelog from '@material-ui/icons/NewReleasesRounded'; + +export default class Tab extends React.PureComponent { + onClick = () => { + this.props.onClick(this.props.label); + }; + + render() { + let className = 'tab-list-item'; + if (this.props.currentTab === this.props.label) { + className += ' tab-list-active'; + } + + if (this.props.navbar === true) { + className = 'navbar-item'; + if (this.props.currentTab === this.props.label) { + className += ' navbar-item-active'; + } + } + + let icon; + let divider; + + switch (this.props.label) { + // Navbar + case 'Settings': icon = ; break; + case 'My Add-ons': icon = ; break; + case 'Marketplace': icon = ; break; + // Settings + case 'Time': icon =
    +     ); } diff --git a/src/components/modals/main/marketplace/sections/Marketplace.jsx b/src/components/modals/main/marketplace/sections/Marketplace.jsx index 32bc42de..a4f4a07f 100644 --- a/src/components/modals/main/marketplace/sections/Marketplace.jsx +++ b/src/components/modals/main/marketplace/sections/Marketplace.jsx @@ -169,6 +169,7 @@ export default class Marketplace extends React.PureComponent { items={this.state.items.slice(0, 3)} toggleFunction={(input) => this.toggle('item', input)} />
    + ); } diff --git a/src/components/modals/main/scss/index.scss b/src/components/modals/main/scss/index.scss index e426e877..00ad7736 100644 --- a/src/components/modals/main/scss/index.scss +++ b/src/components/modals/main/scss/index.scss @@ -29,7 +29,7 @@ } .modalLink { - color: #5352ed; + color: var(--modal-link); cursor: pointer; padding-left: 10px; diff --git a/src/components/modals/main/scss/settings/_buttons.scss b/src/components/modals/main/scss/settings/_buttons.scss index ed4de74e..7883c50e 100644 --- a/src/components/modals/main/scss/settings/_buttons.scss +++ b/src/components/modals/main/scss/settings/_buttons.scss @@ -203,3 +203,15 @@ input[type=number]::-webkit-outer-spin-button { color: map-get($button-colours, 'other'); } } + +.MuiCheckbox-root { + color: var(--modal-text) !important; +} + +.MuiIconButton-label > svg.MuiSvgIcon-root { + color: var(--modal-text) !important; +} + +legend { + color: var(--modal-text) !important; +} \ No newline at end of file diff --git a/src/components/modals/main/scss/settings/_main.scss b/src/components/modals/main/scss/settings/_main.scss index 2b327ca3..624185f5 100644 --- a/src/components/modals/main/scss/settings/_main.scss +++ b/src/components/modals/main/scss/settings/_main.scss @@ -65,7 +65,7 @@ li { height: 15px; border-radius: 12px; outline: none; - background: #ecf0f1; + background: var(--sidebar); border-radius: 12px; box-shadow: 0 0 100px rgba(0, 0, 0, 0.3); @@ -147,14 +147,21 @@ input[type=color]::-moz-color-swatch { #customcss, #customjs { font-family: Consolas !important; - border: solid 1px black !important; - margin-left: 0px; + padding: 15px; + border-radius: 15px; + background-color: var(--sidebar) !important; + border: none; + margin-left: 0; } -.MuiCheckbox-colorPrimary.Mui-checked { +.MuiCheckbox-colorPrimary.Mui-checked, .MuiSwitch-colorPrimary.Mui-checked { color: map-get($button-colours, 'reset') !important; } +.MuiSwitch-colorPrimary.Mui-checked + .MuiSwitch-track { + background-color: var(--sidebar) !important; +} + .reminder-info { position: absolute; bottom: 20px; diff --git a/src/components/modals/main/settings/Radio.jsx b/src/components/modals/main/settings/Radio.jsx index 34991758..1b0f5fa5 100644 --- a/src/components/modals/main/settings/Radio.jsx +++ b/src/components/modals/main/settings/Radio.jsx @@ -28,7 +28,7 @@ export default class Radio extends React.PureComponent { {this.props.title} this.handleChange(e.target.value)} value={this.state.value}> {this.props.options.map(option => - } label={option.name} /> + } label={option.name} key={option.name} /> )} diff --git a/src/components/modals/main/settings/Switch.jsx b/src/components/modals/main/settings/Switch.jsx new file mode 100644 index 00000000..231a9b43 --- /dev/null +++ b/src/components/modals/main/settings/Switch.jsx @@ -0,0 +1,44 @@ +import React from 'react'; + +import SettingsFunctions from '../../../../modules/helpers/settings'; + +import SwitchUI from '@material-ui/core/Switch'; +import FormControlLabel from '@material-ui/core/FormControlLabel'; + +export default class Switch extends React.PureComponent { + constructor(...args) { + super(...args); + this.state = { + checked: (localStorage.getItem(this.props.name) === 'true') + }; + } + + handleChange() { + SettingsFunctions.setItem(this.props.name); + + this.setState({ + checked: (this.state.checked === true) ? false : true + }); + } + + render() { + let text = this.props.text; + + if (this.props.newFeature) { + text = {this.props.text} NEW; + } else if (this.props.betaFeature) { + text = {this.props.text} BETA; + } + + return ( + + this.handleChange()} />} + label={text} + labelPlacement='start' + /> +
    +     + ); + } +} diff --git a/src/components/modals/main/settings/sections/About.jsx b/src/components/modals/main/settings/sections/About.jsx index e51329fe..c3eae952 100644 --- a/src/components/modals/main/settings/sections/About.jsx +++ b/src/components/modals/main/settings/sections/About.jsx @@ -24,7 +24,7 @@ export default class About extends React.PureComponent { const newVersion = versionData[0].tag_name; let updateMsg = this.language.version.no_update; - if (window.constants.VERSION < newVersion) { + if (Number(window.constants.VERSION) < newVersion) { updateMsg = `${this.language.version.update_available}: ${newVersion}`; } diff --git a/src/components/modals/main/settings/sections/Background.jsx b/src/components/modals/main/settings/sections/Background.jsx index e338ca69..a8a4731b 100644 --- a/src/components/modals/main/settings/sections/Background.jsx +++ b/src/components/modals/main/settings/sections/Background.jsx @@ -223,10 +223,8 @@ export default class BackgroundSettings extends React.PureComponent {

    {background.title}

    {background.buttons.title}

    -
      - - -
    + +

    {background.effects.title}

      @@ -239,12 +237,10 @@ export default class BackgroundSettings extends React.PureComponent {

    {background.source.title}

    -
      - - - - -
    + + + +

      {background.source.custom_url} this.resetItem('customBackground')}>{this.language.buttons.reset}

      this.setState({ customBackground: e.target.value })}> diff --git a/src/components/modals/main/settings/sections/Greeting.jsx b/src/components/modals/main/settings/sections/Greeting.jsx index b62a759b..0b2f9fb3 100644 --- a/src/components/modals/main/settings/sections/Greeting.jsx +++ b/src/components/modals/main/settings/sections/Greeting.jsx @@ -1,6 +1,7 @@ import React from 'react'; import Checkbox from '../Checkbox'; +import Switch from '../Switch'; import DatePicker from 'react-date-picker'; import { toast } from 'react-toastify'; @@ -46,7 +47,7 @@ export default class GreetingSettings extends React.PureComponent { return (

      {greeting.title}

      - +
        diff --git a/src/components/modals/main/settings/sections/Time.jsx b/src/components/modals/main/settings/sections/Time.jsx index 5874f0e4..b84231f2 100644 --- a/src/components/modals/main/settings/sections/Time.jsx +++ b/src/components/modals/main/settings/sections/Time.jsx @@ -67,7 +67,6 @@ export default class TimeSettings extends React.PureComponent {

        {time.date.title}

        - diff --git a/src/components/modals/welcome/welcome.scss b/src/components/modals/welcome/welcome.scss index 444a7594..f227563a 100644 --- a/src/components/modals/welcome/welcome.scss +++ b/src/components/modals/welcome/welcome.scss @@ -5,7 +5,7 @@ h2.subtitle { font-size: 24px; - color: #535353; + color: var(--modal-text); text-transform: uppercase; } @@ -21,7 +21,7 @@ a { text-decoration: none; line-height: 20px !important; - color: #5352ED; + color: var(--modal-link); cursor: pointer; &:hover { @@ -54,5 +54,5 @@ } .welcomeLink { - color: black !important; + color: var(--modal-text) !important; } diff --git a/src/components/widgets/Widgets.jsx b/src/components/widgets/Widgets.jsx index a54e6901..740bb65c 100644 --- a/src/components/widgets/Widgets.jsx +++ b/src/components/widgets/Widgets.jsx @@ -26,11 +26,41 @@ export default class Widgets extends React.PureComponent { return enabled; } + componentDidMount() { + const widget = document.getElementById('widgets'); + // These lines of code prevent double clicking the page or pressing CTRL + A from highlighting the page + widget.addEventListener('mousedown', (event) => { + if (event.detail > 1) { + event.preventDefault(); + } + }, false); + + document.onkeydown = (e) => { + e = e || window.event; + if (!e.ctrlKey) { + return; + } + let code = e.which || e.keyCode; + + const modals = document.getElementsByClassName('ReactModal__Overlay'); + if (modals.length > 0) { + return; + } + + switch (code) { + case 65: + e.preventDefault(); + e.stopPropagation(); + break; + } + }; + } + render() { const enabled = this.enabled; return ( - +
        {enabled('searchBar') ? : null} {enabled('greeting') ? : null} {enabled('time') ? : null} @@ -38,7 +68,7 @@ export default class Widgets extends React.PureComponent { {enabled('quote') ? : null} {enabled('view') ? : null} {enabled('favouriteEnabled') ? : null} - +
        ); } } diff --git a/src/components/widgets/time/Date.jsx b/src/components/widgets/time/Date.jsx index 13a63057..29e217f6 100644 --- a/src/components/widgets/time/Date.jsx +++ b/src/components/widgets/time/Date.jsx @@ -71,28 +71,11 @@ export default class DateWidget extends React.PureComponent { } } - // based on https://gist.github.com/IamSilviu/5899269#gistcomment-2773524 - getWeekNumber() { - const today = new Date(); - const firstDayOfYear = new Date(today.getFullYear(), 0, 1); - const pastDaysOfYear = (today - firstDayOfYear) / 86400000; - return Math.ceil((pastDaysOfYear + firstDayOfYear.getDay() + 1) / 7); - } - componentDidMount() { this.getDate(); } render() { - return ( -
        - {this.state.date} - {(localStorage.getItem('weeknumber') === 'true') ? -
        - {'Week ' + this.getWeekNumber()} -         - :null} -
        - ) + return {this.state.date}; } } diff --git a/src/modules/constants.js b/src/modules/constants.js index 6fdcbed8..1d9a206e 100644 --- a/src/modules/constants.js +++ b/src/modules/constants.js @@ -1,8 +1,8 @@ export const API_URL = 'https://api.muetab.com'; export const UNSPLASH_URL = 'https://unsplash.muetab.com'; -export const MARKETPLACE_URL = 'https://marketplace.muetab.com'; +export const MARKETPLACE_URL = 'http://127.0.0.1:8080'; export const WEBSITE_URL = 'https://muetab.com'; export const SPONSORS_URL = 'https://sponsors.muetab.com'; export const OFFLINE_IMAGES = 20; export const BETA_VERSION = false; -export const VERSION = 5.0; +export const VERSION = '5.0'; diff --git a/src/modules/default_settings.json b/src/modules/default_settings.json index 84b73510..fa92eda5 100644 --- a/src/modules/default_settings.json +++ b/src/modules/default_settings.json @@ -109,7 +109,7 @@ }, { "name": "shortFormat", - "value": "default" + "value": "dots" }, { "name": "zoom", @@ -120,11 +120,11 @@ "value": 2500 }, { - "name": "fontStyle", + "name": "fontstyle", "value": "normal" }, { - "name": "fontWeight", - "value": "normal" + "name": "fontweight", + "value": 400 } ] diff --git a/src/modules/helpers/settings.js b/src/modules/helpers/settings.js index 2f2ec0fd..947c27b3 100644 --- a/src/modules/helpers/settings.js +++ b/src/modules/helpers/settings.js @@ -50,9 +50,9 @@ export default class SettingsFunctions { // Set theme depending on user preferred if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { - localStorage.setItem('darkTheme', true); + localStorage.setItem('theme', 'dark'); } else { - localStorage.setItem('darkTheme', false); + localStorage.setItem('theme', 'light'); } // Languages @@ -123,6 +123,11 @@ export default class SettingsFunctions { document.body.style.zoom = zoom + '%'; } + const theme = localStorage.getItem('theme'); + if (theme === 'dark') { + document.body.classList.add('dark'); + } + // easter egg console.log(` █████████████████████████████████████████████████████████████ diff --git a/src/scss/_themes.scss b/src/scss/_themes.scss index 2760ea93..5defef21 100644 --- a/src/scss/_themes.scss +++ b/src/scss/_themes.scss @@ -6,6 +6,7 @@ $background: map-get($modal, 'background'); $sidebar: map-get($modal, 'sidebar'); $tab-active: map-get($modal, 'tab-active'); $photo-info: map-get($theme-colours, 'photo-info'); +$modal-link: map-get($modal, 'modal-link'); $main-text-dark: map-get($theme-colours, 'secondary'); $modal-text-dark: map-get($theme-colours, 'main'); @@ -13,6 +14,7 @@ $background-dark: map-get($modal, 'background-dark'); $sidebar-dark: map-get($modal, 'sidebar-dark'); $tab-active-dark: map-get($modal, 'tab-active-dark'); $photo-info-dark: map-get($theme-colours, 'photo-info-dark'); +$modal-link-dark: map-get($modal, 'modal-link-dark'); :root { --main-text: #{$main-text}; @@ -21,6 +23,7 @@ $photo-info-dark: map-get($theme-colours, 'photo-info-dark'); --sidebar: #{$sidebar}; --tab-active: #{$tab-active}; --photo-info: #{$photo-info}; + --modal-link: #{$modal-link}; } .dark { @@ -30,4 +33,5 @@ $photo-info-dark: map-get($theme-colours, 'photo-info-dark'); --sidebar: #{$sidebar-dark}; --tab-active: #{$tab-active-dark}; --photo-info: #{$photo-info-dark}; + --modal-link: #{$modal-link-dark}; } \ No newline at end of file diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index fcd62d4e..c499ed98 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -19,7 +19,9 @@ $modal: ( 'sidebar': #f0f0f0, 'tab-active': rgba(219, 219, 219, 0.72), 'sidebar-dark': #353b48, - 'tab-active-dark': rgba(65, 71, 84, .9) + 'tab-active-dark': rgba(65, 71, 84, .9), + 'modal-link': #5352ed, + 'modal-link-dark': #3498db ); $marketplace: ( diff --git a/src/translations/en-GB.json b/src/translations/en-GB.json index 01678b58..44cee06f 100644 --- a/src/translations/en-GB.json +++ b/src/translations/en-GB.json @@ -58,7 +58,6 @@ "date": { "title": "Date", "day_of_week": "Day of week", - "week_number": "Week Number", "datenth": "Date nth", "short_date": "Short Date", "short_format": "Short Format", From f6564fa758ad8ab6409217ab8382ef492e6275e7 Mon Sep 17 00:00:00 2001 From: David Ralph Date: Sat, 20 Mar 2021 20:21:59 +0000 Subject: [PATCH 090/162] fix: firefox dropdown --- .../modals/main/scss/settings/_dropdown.scss | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/components/modals/main/scss/settings/_dropdown.scss b/src/components/modals/main/scss/settings/_dropdown.scss index dab66f4d..c2c13bc7 100644 --- a/src/components/modals/main/scss/settings/_dropdown.scss +++ b/src/components/modals/main/scss/settings/_dropdown.scss @@ -15,11 +15,15 @@ } // firefox dropdown -@supports (-moz-appearance:none) { +@supports (-moz-appearance: none) { select { -moz-appearance: none !important; - background: url('data:image/gif;base64,R0lGODlhBgAGAKEDAFVVVX9/f9TU1CgmNyH5BAEKAAMALAAAAAAGAAYAAAIODA4hCDKWxlhNvmCnGwUAOw==') right center no-repeat, linear-gradient(180deg, #ffb032 0%, #dd3b67 100%) !important; - background-position: calc(100% - 5px) center !important; + background: url('data:image/gif;base64,R0lGODlhBgAGAKEDAFVVVX9/f9TU1CgmNyH5BAEKAAMALAAAAAAGAAYAAAIODA4hCDKWxlhNvmCnGwUAOw==') right center no-repeat, var(--sidebar) !important; + background-position: calc(100% - 15px) center !important; + } + + option { + font: -moz-pull-down-menu !important; } } From d99cc7869abc5076d4d36e55f9c2b3a572b44210 Mon Sep 17 00:00:00 2001 From: David Ralph Date: Sun, 21 Mar 2021 13:09:06 +0000 Subject: [PATCH 091/162] refactor: new settings components --- .../modals/main/scss/settings/_main.scss | 5 +- .../modals/main/settings/Slider.jsx | 38 ++++ src/components/modals/main/settings/Text.jsx | 46 +++++ .../main/settings/sections/Advanced.jsx | 27 +-- .../main/settings/sections/Appearance.jsx | 175 ++++++------------ .../main/settings/sections/Background.jsx | 35 +--- .../main/settings/sections/Greeting.jsx | 22 +-- .../modals/main/settings/sections/Quote.jsx | 80 ++------ .../widgets/background/PhotoInformation.jsx | 2 + src/modules/helpers/settings.js | 5 + 10 files changed, 182 insertions(+), 253 deletions(-) create mode 100644 src/components/modals/main/settings/Slider.jsx create mode 100644 src/components/modals/main/settings/Text.jsx diff --git a/src/components/modals/main/scss/settings/_main.scss b/src/components/modals/main/scss/settings/_main.scss index 624185f5..0e5fb808 100644 --- a/src/components/modals/main/scss/settings/_main.scss +++ b/src/components/modals/main/scss/settings/_main.scss @@ -144,8 +144,7 @@ input[type=color]::-moz-color-swatch { font-size: 12px; } -#customcss, -#customjs { +.settingsTextarea { font-family: Consolas !important; padding: 15px; border-radius: 15px; @@ -154,7 +153,7 @@ input[type=color]::-moz-color-swatch { margin-left: 0; } -.MuiCheckbox-colorPrimary.Mui-checked, .MuiSwitch-colorPrimary.Mui-checked { +.MuiCheckbox-colorPrimary.Mui-checked, .MuiSwitch-colorPrimary.Mui-checked, .MuIconButton-colorPrimary.Mui-checked{ color: map-get($button-colours, 'reset') !important; } diff --git a/src/components/modals/main/settings/Slider.jsx b/src/components/modals/main/settings/Slider.jsx new file mode 100644 index 00000000..cef48b93 --- /dev/null +++ b/src/components/modals/main/settings/Slider.jsx @@ -0,0 +1,38 @@ +import React from 'react'; + +import { toast } from 'react-toastify'; + +export default class Slider extends React.PureComponent { + constructor(...args) { + super(...args); + this.state = { + value: localStorage.getItem(this.props.name) || '' + }; + this.language = window.language.modals.main.settings; + } + + handleChange(value) { + localStorage.setItem(this.props.name, value); + this.setState({ + value: value + }); + } + + resetItem() { + localStorage.setItem(this.props.name, this.props.default); + this.setState({ + value: this.props.default + }); + + toast(this.language.toasts.reset); + } + + render() { + return ( + +

        {this.props.title} ({this.state.value}{this.props.display}) this.resetItem()}>{this.language.buttons.reset}

        + this.handleChange(e.target.value)} /> +         + ); + } +} diff --git a/src/components/modals/main/settings/Text.jsx b/src/components/modals/main/settings/Text.jsx new file mode 100644 index 00000000..91f1fd6d --- /dev/null +++ b/src/components/modals/main/settings/Text.jsx @@ -0,0 +1,46 @@ +import React from 'react'; + +import { toast } from 'react-toastify'; + +export default class Text extends React.PureComponent { + constructor(...args) { + super(...args); + this.state = { + value: localStorage.getItem(this.props.name) || '' + }; + this.language = window.language.modals.main.settings; + } + + handleChange(value) { + // Alex wanted font to work with montserrat and Montserrat, so I made it work + if (this.props.upperCaseFirst === true) { + value = value.charAt(0).toUpperCase() + value.slice(1); + } + + localStorage.setItem(this.props.name, value); + this.setState({ + value: value + }); + } + + resetItem() { + localStorage.setItem(this.props.name, this.props.default || ''); + this.setState({ + value: this.props.default || '' + }); + + toast(this.language.toasts.reset); + } + + render() { + return ( + +

        {this.props.title} this.resetItem()}>{this.language.buttons.reset}

        + {(this.props.textarea === true) ? + -
      -
        -

        {advanced.custom_js} this.resetItem('customjs')}>{this.language.buttons.reset}

        - -
      + + +

      {this.language.sections.experimental.title}

      {advanced.experimental_warning}

      diff --git a/src/components/modals/main/settings/sections/Appearance.jsx b/src/components/modals/main/settings/sections/Appearance.jsx index 1f207e5e..2cdde27d 100644 --- a/src/components/modals/main/settings/sections/Appearance.jsx +++ b/src/components/modals/main/settings/sections/Appearance.jsx @@ -3,127 +3,70 @@ import React from 'react'; import Checkbox from '../Checkbox'; import Dropdown from '../Dropdown'; import Radio from '../Radio'; +import Slider from '../Slider'; +import Text from '../Text'; -import { toast } from 'react-toastify'; +export default function AppearanceSettings(props) { + const { appearance } = window.language.modals.main.settings.sections; -export default class AppearanceSettings extends React.PureComponent { - constructor(...args) { - super(...args); - this.state = { - zoom: localStorage.getItem('zoom'), - toast_duration: localStorage.getItem('toastDisplayTime'), - font: localStorage.getItem('font') || '' - }; - this.language = window.language.modals.main.settings; - } - - resetItem(key) { - switch (key) { - case 'zoom': - localStorage.setItem('zoom', 100); - this.setState({ - zoom: 100 - }); - break; - - case 'toast_duration': - localStorage.setItem('toastDisplayTime', 2500); - this.setState({ - toast_duration: 2500 - }); - break; - - case 'font': - localStorage.setItem('font', ''); - this.setState({ - font: '' - }); - break; - - default: - toast('resetItem requires a key!'); + let themeOptions = [ + { + 'name': 'Auto', + 'value': 'auto' + }, + { + 'name': 'Light', + 'value': 'light' + }, { + 'name': 'Dark', + 'value': 'dark' } + ] - toast(this.language.toasts.reset); - } + return ( +
      +

      {appearance.title}

      + - componentDidUpdate() { - localStorage.setItem('zoom', this.state.zoom); - localStorage.setItem('toastDisplayTime', this.state.toast_duration); - localStorage.setItem('font', this.state.font.charAt(0).toUpperCase() + this.state.font.slice(1)); - } +

      {appearance.navbar.title}

      + + - render() { - const { appearance } = this.language.sections; +

      {appearance.font.title}

      + +
      + localStorage.setItem('fontWeight', document.getElementById('fontWeight').value)}> + {/* names are taken from https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight */} + + + + + + + + + +

      + localStorage.setItem('fontStyle', document.getElementById('fontStyle').value)}> + + + + +

      + - let themeOptions = [ - { - 'name': 'Auto', - 'value': 'auto' - }, - { - 'name': 'Light', - 'value': 'light' - }, { - 'name': 'Dark', - 'value': 'dark' - } - ] - - return ( -
      -

      {appearance.title}

      - - -

      {appearance.navbar.title}

      - - - -

      {appearance.font.title}

      -
        -

        {appearance.font.custom} this.resetItem('font')}>{this.language.buttons.reset}

        - this.setState({ font: e.target.value })}> -
      -
      - localStorage.setItem('fontWeight', document.getElementById('fontWeight').value)}> - {/* names are taken from https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight */} - - - - - - - - - -

      - localStorage.setItem('fontStyle', document.getElementById('fontStyle').value)}> - - - - -

      - - -

      {appearance.accessibility.title}

      - -
        -

        {appearance.accessibility.zoom} ({this.state.zoom}%) this.resetItem('zoom')}>{this.language.buttons.reset}

        - this.setState({ zoom: event.target.value })} /> -
      -
        -

        {appearance.accessibility.toast_duration} ({this.state.toast_duration} {appearance.accessibility.milliseconds}) this.resetItem('toast_duration')}>{this.language.buttons.reset}

        - this.setState({ toast_duration: event.target.value })} /> -
      -
      - ); - } +

      {appearance.accessibility.title}

      + + + +
      + ); } diff --git a/src/components/modals/main/settings/sections/Background.jsx b/src/components/modals/main/settings/sections/Background.jsx index a8a4731b..dfafb215 100644 --- a/src/components/modals/main/settings/sections/Background.jsx +++ b/src/components/modals/main/settings/sections/Background.jsx @@ -3,6 +3,8 @@ import React from 'react'; import Checkbox from '../Checkbox'; import Dropdown from '../Dropdown'; import FileUpload from '../FileUpload'; +import Slider from '../Slider'; +import Text from '../Text'; import { ColorPicker } from 'react-color-gradient-picker'; import hexToRgb from '../../../../../modules/helpers/background/hexToRgb'; @@ -20,8 +22,6 @@ export default class BackgroundSettings extends React.PureComponent { constructor(...args) { super(...args); this.state = { - blur: localStorage.getItem('blur'), - brightness: localStorage.getItem('brightness'), customBackground: localStorage.getItem('customBackground') || '', gradientSettings: this.DefaultGradientSettings }; @@ -44,20 +44,6 @@ export default class BackgroundSettings extends React.PureComponent { }); break; - case 'blur': - localStorage.setItem('blur', 0); - this.setState({ - blur: 0 - }); - break; - - case 'brightness': - localStorage.setItem('brightness', 100); - this.setState({ - brightness: 100 - }); - break; - default: toast('resetItem requires a key!'); } @@ -167,10 +153,6 @@ export default class BackgroundSettings extends React.PureComponent { } componentDidUpdate() { - localStorage.setItem('blur', this.state.blur); - localStorage.setItem('brightness', this.state.brightness); - localStorage.setItem('customBackground', this.state.customBackground); - if (document.getElementById('customBackgroundHex').value !== this.language.sections.background.source.disabled) { localStorage.setItem('customBackgroundColour', document.getElementById('customBackgroundHex').value); } @@ -227,20 +209,15 @@ export default class BackgroundSettings extends React.PureComponent {

      {background.effects.title}

      -
        -

        {background.effects.blur} ({this.state.blur}%) this.resetItem('blur')}>{this.language.buttons.reset}

        - this.setState({ blur: event.target.value })} /> -
      -
        -

        {background.effects.brightness} ({this.state.brightness}%) this.resetItem('brightness')}>{this.language.buttons.reset}

        - this.setState({ brightness: event.target.value })} /> -
      - + + +

      {background.source.title}

      + {/* */ }

        {background.source.custom_url} this.resetItem('customBackground')}>{this.language.buttons.reset}

        this.setState({ customBackground: e.target.value })}> diff --git a/src/components/modals/main/settings/sections/Greeting.jsx b/src/components/modals/main/settings/sections/Greeting.jsx index 0b2f9fb3..d79825e4 100644 --- a/src/components/modals/main/settings/sections/Greeting.jsx +++ b/src/components/modals/main/settings/sections/Greeting.jsx @@ -2,28 +2,19 @@ import React from 'react'; import Checkbox from '../Checkbox'; import Switch from '../Switch'; +import Text from '../Text'; import DatePicker from 'react-date-picker'; -import { toast } from 'react-toastify'; export default class GreetingSettings extends React.PureComponent { constructor(...args) { super(...args); this.state = { - birthday: new Date(localStorage.getItem('birthday')) || new Date(), - greetingName: localStorage.getItem('greetingName') || '' + birthday: new Date(localStorage.getItem('birthday')) || new Date() }; this.language = window.language.modals.main.settings; } - resetItem() { - this.setState({ - greetingName: '' - }); - - toast(this.language.toasts.reset); - } - changeDate(data) { //soon if (data === 'reset') { @@ -37,10 +28,6 @@ export default class GreetingSettings extends React.PureComponent { }); } - componentDidUpdate() { - localStorage.setItem('greetingName', this.state.greetingName); - } - render() { const { greeting } = this.language.sections; @@ -50,10 +37,7 @@ export default class GreetingSettings extends React.PureComponent { -
          -

          {greeting.name} this.resetItem()}>{this.language.buttons.reset}

          - this.setState({ greetingName: e.target.value })}> -
        +

        {greeting.birthday}

        diff --git a/src/components/modals/main/settings/sections/Quote.jsx b/src/components/modals/main/settings/sections/Quote.jsx index b8f20040..0d00d23c 100644 --- a/src/components/modals/main/settings/sections/Quote.jsx +++ b/src/components/modals/main/settings/sections/Quote.jsx @@ -1,69 +1,23 @@ import React from 'react'; import Checkbox from '../Checkbox'; +import Text from '../Text'; -import { toast } from 'react-toastify'; +export default function QuoteSettings(props) { + const { quote } = window.language.modals.main.settings.sections; -export default class QuoteSettings extends React.PureComponent { - constructor(...args) { - super(...args); - this.state = { - customQuote: localStorage.getItem('customQuote') || '', - customQuoteAuthor: localStorage.getItem('customQuoteAuthor') || 'Unknown' - }; - this.language = window.language.modals.main.settings; - } + return ( +
        +

        {quote.title}

        + + + + - - resetItem(key) { - switch (key) { - case 'customQuote': - localStorage.setItem('customQuote', ''); - this.setState({ - customQuote: '' - }); - break; - - case 'customQuoteAuthor': - localStorage.setItem('customQuoteAuthor', ''); - this.setState({ - customQuoteAuthor: 'Unknown' - }); - break; - - default: - toast('resetItem requires a key!'); - } - - toast(this.language.toasts.reset); - } - - componentDidUpdate() { - localStorage.setItem('customQuote', this.state.customQuote); - localStorage.setItem('customQuoteAuthor', this.state.customQuoteAuthor); - } - - render() { - const { quote } = this.language.sections; - - return ( -
        -

        {quote.title}

        - - -
          -

          {quote.custom} this.resetItem('customQuote')}>{this.language.buttons.reset}

          - this.setState({ customQuote: e.target.value })}> -
        -
          -

          {quote.custom_author} this.resetItem('customQuoteAuthor')}>{this.language.buttons.reset}

          - this.setState({ customQuoteAuthor: e.target.value })}> -
        -

        {quote.buttons.title}

        - - - -
        - ); - } -} +

        {quote.buttons.title}

        + + + +
        + ); +} \ No newline at end of file diff --git a/src/components/widgets/background/PhotoInformation.jsx b/src/components/widgets/background/PhotoInformation.jsx index 6d99232d..a5b0308b 100644 --- a/src/components/widgets/background/PhotoInformation.jsx +++ b/src/components/widgets/background/PhotoInformation.jsx @@ -9,6 +9,8 @@ import Photographer from '@material-ui/icons/Person'; export default function PhotoInformation(props) { const language = window.language.widgets.background; + if (props.info.hidden === true) return null; + return (

        {language.credit} {props.info.credit}

        diff --git a/src/modules/helpers/settings.js b/src/modules/helpers/settings.js index 947c27b3..2d34ad5e 100644 --- a/src/modules/helpers/settings.js +++ b/src/modules/helpers/settings.js @@ -128,6 +128,11 @@ export default class SettingsFunctions { document.body.classList.add('dark'); } + const tabName = localStorage.getItem('tabName'); + if (tabName) { + document.title = tabName; + } + // easter egg console.log(` █████████████████████████████████████████████████████████████ From c6dd27180a54d5a71c4601fe7b61b3356d4492d2 Mon Sep 17 00:00:00 2001 From: David Ralph Date: Sun, 21 Mar 2021 13:19:24 +0000 Subject: [PATCH 092/162] fix: welcome modal text and colour picker icon --- src/components/modals/main/scss/settings/_main.scss | 6 +++--- src/components/modals/welcome/Welcome.jsx | 2 +- src/components/widgets/background/PhotoInformation.jsx | 4 +++- src/translations/en-GB.json | 2 +- 4 files changed, 8 insertions(+), 6 deletions(-) diff --git a/src/components/modals/main/scss/settings/_main.scss b/src/components/modals/main/scss/settings/_main.scss index 0e5fb808..f4d8c1fe 100644 --- a/src/components/modals/main/scss/settings/_main.scss +++ b/src/components/modals/main/scss/settings/_main.scss @@ -93,11 +93,11 @@ input[type=color] { border-radius: 100%; height: 30px; width: 30px; - box-shadow: map-get($main-parts, 'shadow'); border: none; outline: none; -webkit-appearance: none; vertical-align: middle; + background: none; &::-webkit-color-swatch-wrapper { padding: 0; @@ -113,11 +113,11 @@ input[type=color]::-moz-color-swatch { border-radius: 100%; height: 30px; width: 30px; - box-shadow: map-get($main-parts, 'shadow'); border: none; outline: none; - -webkit-appearance: none; + -moz-appearance: none; vertical-align: middle; + background: none; &::-moz-color-swatch-wrapper { padding: 0; diff --git a/src/components/modals/welcome/Welcome.jsx b/src/components/modals/welcome/Welcome.jsx index f606dc59..754ad18b 100644 --- a/src/components/modals/welcome/Welcome.jsx +++ b/src/components/modals/welcome/Welcome.jsx @@ -17,7 +17,7 @@ export default function WelcomeModal(props) {

        Mue Tab

        celebration

        {language.information}

        -

        {language.thankyoumessage1},
        {language.thankyoumessage2}

        +

        {language.thankyoumessage1}
        {language.thankyoumessage2}

        {language.support}

        diff --git a/src/components/widgets/background/PhotoInformation.jsx b/src/components/widgets/background/PhotoInformation.jsx index a5b0308b..9542a49b 100644 --- a/src/components/widgets/background/PhotoInformation.jsx +++ b/src/components/widgets/background/PhotoInformation.jsx @@ -9,7 +9,9 @@ import Photographer from '@material-ui/icons/Person'; export default function PhotoInformation(props) { const language = window.language.widgets.background; - if (props.info.hidden === true) return null; + if (props.info.hidden === true) { + return null; + } return (
        diff --git a/src/translations/en-GB.json b/src/translations/en-GB.json index 44cee06f..06a23585 100644 --- a/src/translations/en-GB.json +++ b/src/translations/en-GB.json @@ -244,7 +244,7 @@ "welcome": { "title": "Welcome to", "information": "Information", - "thankyoumessage1": "Thank you for downloading Mue Tab,", + "thankyoumessage1": "Thank you for installing Mue Tab,", "thankyoumessage2": "we hope you enjoy your time with our extension.", "support": "Support", "close": "Close" From f89a2f880db55b76bd84987451f0a77a3a8ad2a0 Mon Sep 17 00:00:00 2001 From: David Ralph Date: Sun, 21 Mar 2021 14:39:12 +0000 Subject: [PATCH 093/162] feat: extra birthday feature, cleanup Co-authored-by: Alex Sparkes --- .../modals/main/scss/settings/_main.scss | 6 ++- .../modals/main/settings/Dropdown.jsx | 24 ++++++---- .../main/settings/sections/Appearance.jsx | 44 ++++++++----------- .../main/settings/sections/Background.jsx | 3 +- .../main/settings/sections/Greeting.jsx | 6 +-- .../main/settings/sections/Language.jsx | 2 +- .../modals/main/settings/sections/Quote.jsx | 3 +- .../modals/main/settings/sections/Search.jsx | 15 +++---- .../modals/main/settings/sections/Time.jsx | 9 ++-- src/components/widgets/greeting/Greeting.jsx | 15 ++++++- 10 files changed, 68 insertions(+), 59 deletions(-) diff --git a/src/components/modals/main/scss/settings/_main.scss b/src/components/modals/main/scss/settings/_main.scss index f4d8c1fe..f2ca1e3f 100644 --- a/src/components/modals/main/scss/settings/_main.scss +++ b/src/components/modals/main/scss/settings/_main.scss @@ -157,8 +157,12 @@ input[type=color]::-moz-color-swatch { color: map-get($button-colours, 'reset') !important; } +.MuiFormControlLabel-labelPlacementStart { + margin-left: 0px; +} + .MuiSwitch-colorPrimary.Mui-checked + .MuiSwitch-track { - background-color: var(--sidebar) !important; + background: darkgray !important; } .reminder-info { diff --git a/src/components/modals/main/settings/Dropdown.jsx b/src/components/modals/main/settings/Dropdown.jsx index 1619bbe8..9f54a932 100644 --- a/src/components/modals/main/settings/Dropdown.jsx +++ b/src/components/modals/main/settings/Dropdown.jsx @@ -1,18 +1,26 @@ import React from 'react'; export default class Dropdown extends React.PureComponent { + constructor(...args) { + super(...args); + this.state = { + value: localStorage.getItem(this.props.name) || '' + }; + } + getLabel() { return this.props.label ? : null; } - componentDidMount() { - document.getElementById(this.props.name).value = localStorage.getItem(this.props.name); - } - - onChange = () => { - localStorage.setItem(this.props.name, document.getElementById(this.props.name).value); + onChange(value) { + this.setState({ + value: value + }); + + localStorage.setItem(this.props.name, value); + if (this.props.onChange) { - this.props.onChange(); + this.props.onChange(value); } } @@ -21,7 +29,7 @@ export default class Dropdown extends React.PureComponent { {this.getLabel()}
        - this.onChange(e.target.value)}> {this.props.children}
        diff --git a/src/components/modals/main/settings/sections/Appearance.jsx b/src/components/modals/main/settings/sections/Appearance.jsx index 2cdde27d..85a93dc8 100644 --- a/src/components/modals/main/settings/sections/Appearance.jsx +++ b/src/components/modals/main/settings/sections/Appearance.jsx @@ -34,33 +34,25 @@ export default function AppearanceSettings(props) {

        {appearance.font.title}

        +

        + + {/* names are taken from https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight */} + + + + + + + + + +

        + + + + +
        - localStorage.setItem('fontWeight', document.getElementById('fontWeight').value)}> - {/* names are taken from https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight */} - - - - - - - - - -

        - localStorage.setItem('fontStyle', document.getElementById('fontStyle').value)}> - - - - -

        {appearance.accessibility.title}

        diff --git a/src/components/modals/main/settings/sections/Background.jsx b/src/components/modals/main/settings/sections/Background.jsx index dfafb215..af01789d 100644 --- a/src/components/modals/main/settings/sections/Background.jsx +++ b/src/components/modals/main/settings/sections/Background.jsx @@ -5,6 +5,7 @@ import Dropdown from '../Dropdown'; import FileUpload from '../FileUpload'; import Slider from '../Slider'; import Text from '../Text'; +import Switch from '../Switch'; import { ColorPicker } from 'react-color-gradient-picker'; import hexToRgb from '../../../../../modules/helpers/background/hexToRgb'; @@ -203,7 +204,7 @@ export default class BackgroundSettings extends React.PureComponent { return (

        {background.title}

        - +

        {background.buttons.title}

        diff --git a/src/components/modals/main/settings/sections/Greeting.jsx b/src/components/modals/main/settings/sections/Greeting.jsx index d79825e4..3123cc13 100644 --- a/src/components/modals/main/settings/sections/Greeting.jsx +++ b/src/components/modals/main/settings/sections/Greeting.jsx @@ -16,11 +16,6 @@ export default class GreetingSettings extends React.PureComponent { } changeDate(data) { - //soon - if (data === 'reset') { - return; - } - localStorage.setItem('birthday', data); this.setState({ @@ -41,6 +36,7 @@ export default class GreetingSettings extends React.PureComponent {

        {greeting.birthday}

        +

          {greeting.birthday_date}

          this.changeDate(data)} value={this.state.birthday}/> diff --git a/src/components/modals/main/settings/sections/Language.jsx b/src/components/modals/main/settings/sections/Language.jsx index bffb14d7..31c9888f 100644 --- a/src/components/modals/main/settings/sections/Language.jsx +++ b/src/components/modals/main/settings/sections/Language.jsx @@ -13,7 +13,7 @@ export default function LanguageSettings () {

          {language.title}


          - localStorage.setItem('quotelanguage', document.getElementById('quotelanguage').value)}> + diff --git a/src/components/modals/main/settings/sections/Quote.jsx b/src/components/modals/main/settings/sections/Quote.jsx index 0d00d23c..e939302b 100644 --- a/src/components/modals/main/settings/sections/Quote.jsx +++ b/src/components/modals/main/settings/sections/Quote.jsx @@ -2,6 +2,7 @@ import React from 'react'; import Checkbox from '../Checkbox'; import Text from '../Text'; +import Switch from '../Switch'; export default function QuoteSettings(props) { const { quote } = window.language.modals.main.settings.sections; @@ -9,7 +10,7 @@ export default function QuoteSettings(props) { return (

          {quote.title}

          - + diff --git a/src/components/modals/main/settings/sections/Search.jsx b/src/components/modals/main/settings/sections/Search.jsx index e5bcc7da..c72df335 100644 --- a/src/components/modals/main/settings/sections/Search.jsx +++ b/src/components/modals/main/settings/sections/Search.jsx @@ -28,8 +28,6 @@ export default class SearchSettings extends React.PureComponent { } else { localStorage.removeItem('customSearchEngine'); } - - document.getElementById('searchEngine').value = searchEngine; } componentDidUpdate() { @@ -64,14 +62,11 @@ export default class SearchSettings extends React.PureComponent {
            - this.setSearchEngine(document.getElementById('searchEngine').value)} > - {searchEngines.map((engine) => - - )} - + this.setSearchEngine(value)}> + {searchEngines.map((engine) => + + )} +
            diff --git a/src/components/modals/main/settings/sections/Time.jsx b/src/components/modals/main/settings/sections/Time.jsx index b84231f2..71f35ead 100644 --- a/src/components/modals/main/settings/sections/Time.jsx +++ b/src/components/modals/main/settings/sections/Time.jsx @@ -2,6 +2,7 @@ import React from 'react'; import Checkbox from '../Checkbox'; import Dropdown from '../Dropdown'; +import Switch from '../Switch'; export default class TimeSettings extends React.PureComponent { constructor(...args) { @@ -12,9 +13,7 @@ export default class TimeSettings extends React.PureComponent { this.language = window.language.modals.main.settings; } - changeType() { - const value = document.getElementById('timeType').value; - localStorage.setItem('timeType', value); + changeType(value) { this.setState({ timeType: value }); @@ -55,8 +54,8 @@ export default class TimeSettings extends React.PureComponent { return (

            {time.title}

            - - this.changeType()}> + + this.changeType(value)}> diff --git a/src/components/widgets/greeting/Greeting.jsx b/src/components/widgets/greeting/Greeting.jsx index c829ea95..b6b84718 100644 --- a/src/components/widgets/greeting/Greeting.jsx +++ b/src/components/widgets/greeting/Greeting.jsx @@ -1,5 +1,7 @@ import React from 'react'; +import dtf from '@eartharoid/dtf'; + import './greeting.scss'; export default class Greeting extends React.PureComponent { @@ -34,6 +36,12 @@ export default class Greeting extends React.PureComponent { return message; } + calculateAge(date) { + const diff = Date.now() - date.getTime(); + const birthday = new Date(diff); + return Math.abs(birthday.getUTCFullYear() - 1970); + } + getGreeting() { const now = new Date(); const hour = now.getHours(); @@ -73,7 +81,12 @@ export default class Greeting extends React.PureComponent { // Birthday const birth = new Date(localStorage.getItem('birthday')); if (localStorage.getItem('birthdayenabled') === 'true' && birth.getDate() === now.getDate() && birth.getMonth() === now.getMonth()) { - message = this.language.birthday; + 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 From 2bf8e0cfbc244c4ee28922953e8bcd024b8e2eb5 Mon Sep 17 00:00:00 2001 From: David Ralph Date: Sun, 21 Mar 2021 17:45:34 +0000 Subject: [PATCH 094/162] refactor: Reduce bundle size, replace date picker and merge function, add widget order feature etc Co-authored-by: Alex Sparkes --- .gitignore | 1 + package.json | 7 ++- public/icons/undraw_celebration.svg | 2 +- .../modals/main/scss/settings/_buttons.scss | 21 +++++++++ .../modals/main/scss/settings/_main.scss | 13 ++++- .../main/settings/sections/Appearance.jsx | 5 +- .../main/settings/sections/Background.jsx | 2 +- .../main/settings/sections/Greeting.jsx | 5 +- .../modals/main/settings/sections/Order.jsx | 47 +++++++++++++++++++ .../modals/main/settings/sections/Time.jsx | 2 +- src/components/modals/main/tabs/Settings.jsx | 2 + .../modals/main/tabs/backend/Tab.jsx | 2 + src/components/widgets/Widgets.jsx | 34 ++++++++++---- src/index.js | 2 +- src/modules/default_settings.json | 4 ++ src/modules/helpers/merge.js | 19 -------- 16 files changed, 129 insertions(+), 39 deletions(-) create mode 100644 src/components/modals/main/settings/sections/Order.jsx delete mode 100644 src/modules/helpers/merge.js diff --git a/.gitignore b/.gitignore index c43278be..7fb56cff 100644 --- a/.gitignore +++ b/.gitignore @@ -7,4 +7,5 @@ build/ package-lock.json yarn-error.log .eslintcache +stats.json yarn.lock diff --git a/package.json b/package.json index aeb6c8c9..81dc5414 100644 --- a/package.json +++ b/package.json @@ -16,12 +16,14 @@ "@fontsource/roboto": "^4.2.2", "@material-ui/core": "4.11.3", "@material-ui/icons": "4.11.2", + "array-move": "^3.0.1", "react": "17.0.1", "react-clock": "^3.0.0", "react-color-gradient-picker": "^0.1.2", - "react-date-picker": "^8.1.0", + "react-day-picker": "^7.4.10", "react-dom": "17.0.1", "react-modal": "3.12.1", + "react-sortable-hoc": "^2.0.0", "react-toastify": "7.0.3" }, "devDependencies": { @@ -39,12 +41,13 @@ "sass": "^1.32.8", "sass-loader": "^11.0.1", "webpack": "^5.27.0", + "webpack-bundle-analyzer": "^4.4.0", "webpack-cli": "^4.5.0", "webpack-dev-server": "^3.11.2" }, "scripts": { "start": "webpack serve", - "build": "rm -rf build && webpack --mode=production", + "build": "rm -rf build && webpack --mode=production -json > stats.json", "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/" diff --git a/public/icons/undraw_celebration.svg b/public/icons/undraw_celebration.svg index f0fcc804..5cce689d 100644 --- a/public/icons/undraw_celebration.svg +++ b/public/icons/undraw_celebration.svg @@ -1 +1 @@ -celebration \ No newline at end of file + \ No newline at end of file diff --git a/src/components/modals/main/scss/settings/_buttons.scss b/src/components/modals/main/scss/settings/_buttons.scss index 7883c50e..22a48035 100644 --- a/src/components/modals/main/scss/settings/_buttons.scss +++ b/src/components/modals/main/scss/settings/_buttons.scss @@ -214,4 +214,25 @@ input[type=number]::-webkit-outer-spin-button { legend { color: var(--modal-text) !important; +} + +.sortableitem { + background: var(--sidebar) !important; + padding: 10px 80px; + padding-left: 10px; + border-radius: 15px; + margin-bottom: 10px; + font-size: 1.5rem; + svg { + font-size: 1.3rem; + } + &:hover { + box-shadow: 0 2px 5px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); + transition: 0.3s; + } + z-index: 999 !important; +} + +li.stortableitem { + width: 200px; } \ No newline at end of file diff --git a/src/components/modals/main/scss/settings/_main.scss b/src/components/modals/main/scss/settings/_main.scss index f2ca1e3f..a08c89ae 100644 --- a/src/components/modals/main/scss/settings/_main.scss +++ b/src/components/modals/main/scss/settings/_main.scss @@ -3,7 +3,7 @@ } input { - &[type=text] { + &[type=text] { width: 200px; color: var(--modal-text); background: var(--sidebar); @@ -26,6 +26,17 @@ input { } } +.DayPickerInput { + input { + width: 200px; + color: var(--modal-text); + background: var(--sidebar); + border: none; + padding: 10px 10px; + border-radius: 5px; + } +} + h4, .switch { display: inline; diff --git a/src/components/modals/main/settings/sections/Appearance.jsx b/src/components/modals/main/settings/sections/Appearance.jsx index 85a93dc8..b13ac0d7 100644 --- a/src/components/modals/main/settings/sections/Appearance.jsx +++ b/src/components/modals/main/settings/sections/Appearance.jsx @@ -34,7 +34,8 @@ export default function AppearanceSettings(props) {

            {appearance.font.title}

            -

            +
            + {/* names are taken from https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight */} @@ -52,8 +53,6 @@ export default function AppearanceSettings(props) { -
            -

            {appearance.accessibility.title}

            diff --git a/src/components/modals/main/settings/sections/Background.jsx b/src/components/modals/main/settings/sections/Background.jsx index af01789d..62b29fa3 100644 --- a/src/components/modals/main/settings/sections/Background.jsx +++ b/src/components/modals/main/settings/sections/Background.jsx @@ -110,7 +110,7 @@ export default class BackgroundSettings extends React.PureComponent { const newState = { gradientSettings: { ...s.gradientSettings, - gradient: [...initGradients, lastGradient, { 'colour': localStorage.getItem('darkTheme') === 'true' ? '#000000' : '#ffffff', stop: 100 }].sort((a, b) => (a.stop > b.stop) ? 1 : -1) + gradient: [...initGradients, lastGradient, { 'colour': localStorage.getItem('theme') === 'dark' ? '#000000' : '#ffffff', stop: 100 }].sort((a, b) => (a.stop > b.stop) ? 1 : -1) } }; return newState; diff --git a/src/components/modals/main/settings/sections/Greeting.jsx b/src/components/modals/main/settings/sections/Greeting.jsx index 3123cc13..02ebe850 100644 --- a/src/components/modals/main/settings/sections/Greeting.jsx +++ b/src/components/modals/main/settings/sections/Greeting.jsx @@ -4,7 +4,8 @@ import Checkbox from '../Checkbox'; import Switch from '../Switch'; import Text from '../Text'; -import DatePicker from 'react-date-picker'; +import DayPickerInput from 'react-day-picker/DayPickerInput'; +import 'react-day-picker/lib/style.css'; export default class GreetingSettings extends React.PureComponent { constructor(...args) { @@ -39,7 +40,7 @@ export default class GreetingSettings extends React.PureComponent {

              {greeting.birthday_date}

              - this.changeDate(data)} value={this.state.birthday}/> + this.changeDate(data)} value={this.state.birthday} />
            ); diff --git a/src/components/modals/main/settings/sections/Order.jsx b/src/components/modals/main/settings/sections/Order.jsx new file mode 100644 index 00000000..dad87d0d --- /dev/null +++ b/src/components/modals/main/settings/sections/Order.jsx @@ -0,0 +1,47 @@ +import React from 'react'; +import { sortableContainer, sortableElement } from 'react-sortable-hoc'; +import arrayMove from 'array-move'; +import DragHandleIcon from '@material-ui/icons/DragIndicator'; + +const SortableItem = sortableElement(({value}) => ( +
          • + + {value.charAt(0).toUpperCase() + value.slice(1)} +
            • +)); + +const SortableContainer = sortableContainer(({children}) => { + return
              {children}
            ; +}); + +export default class OrderSettings extends React.PureComponent { + constructor(...args) { + super(...args); + this.state = { + items: JSON.parse(localStorage.getItem('order')) + }; + } + + onSortEnd = ({oldIndex, newIndex}) => { + this.setState(({items}) => ({ + items: arrayMove(items, oldIndex, newIndex) + })); + }; + + componentDidUpdate() { + localStorage.setItem('order', JSON.stringify(this.state.items)); + } + + render() { + return ( +
            +

            Order

            + + {this.state.items.map((value, index) => ( + + ))} + +
            + ); + } +} diff --git a/src/components/modals/main/settings/sections/Time.jsx b/src/components/modals/main/settings/sections/Time.jsx index 71f35ead..637872e4 100644 --- a/src/components/modals/main/settings/sections/Time.jsx +++ b/src/components/modals/main/settings/sections/Time.jsx @@ -64,7 +64,7 @@ export default class TimeSettings extends React.PureComponent { {timeSettings}

            {time.date.title}

            - + diff --git a/src/components/modals/main/tabs/Settings.jsx b/src/components/modals/main/tabs/Settings.jsx index bb107378..5333a7c2 100644 --- a/src/components/modals/main/tabs/Settings.jsx +++ b/src/components/modals/main/tabs/Settings.jsx @@ -10,6 +10,7 @@ import Appearance from '../settings/sections/Appearance'; import Background from '../settings/sections/Background'; import Advanced from '../settings/sections/Advanced'; import Changelog from '../settings/sections/Changelog'; +import Order from '../settings/sections/Order'; import SettingsTabs from './backend/Tabs'; @@ -25,6 +26,7 @@ export default function Settings () {
            +
            diff --git a/src/components/modals/main/tabs/backend/Tab.jsx b/src/components/modals/main/tabs/backend/Tab.jsx index 2c696e5c..9418c94e 100644 --- a/src/components/modals/main/tabs/backend/Tab.jsx +++ b/src/components/modals/main/tabs/backend/Tab.jsx @@ -16,6 +16,7 @@ import Language from '@material-ui/icons/Translate'; import Changelog from '@material-ui/icons/NewReleasesRounded'; import About from '@material-ui/icons/Info'; import Experimental from '@material-ui/icons/BugReport'; +import Order from '@material-ui/icons/List'; // Store import Colors from '@material-ui/icons/ColorLens'; @@ -49,6 +50,7 @@ export default function Tab(props) { case 'Background': icon = ; break; case 'Search': icon = ; break; case 'Appearance': icon = ; break; + case 'Order': icon = ; break; case 'Language': icon = ; divider = true; break; case 'Advanced': icon = ; break; case 'Experimental': icon = ; divider = true; break; diff --git a/src/components/widgets/Widgets.jsx b/src/components/widgets/Widgets.jsx index 740bb65c..483ee345 100644 --- a/src/components/widgets/Widgets.jsx +++ b/src/components/widgets/Widgets.jsx @@ -9,6 +9,17 @@ import Favourite from './background/Favourite'; import Date from './time/Date'; export default class Widgets extends React.PureComponent { + constructor(...args) { + super(...args); + // widgets we can re-order + this.widgets = { + time: this.enabled('time') ? : null, + greeting: this.enabled('greeting') ? : null, + quote: this.enabled('quote') ? : null, + date: this.enabled('date') ? : null + } + } + enabled(key) { const stringValue = localStorage.getItem(key); let enabled = true; @@ -57,17 +68,24 @@ export default class Widgets extends React.PureComponent { } render() { - const enabled = this.enabled; + // allow for re-ordering widgets + let elements = []; + const order = JSON.parse(localStorage.getItem('order')); + + if (order) { + order.forEach(element => { + elements.push(this.widgets[element]); + }); + } else { + elements = ['greeting', 'time', 'quote', 'date']; + } return (
            - {enabled('searchBar') ? : null} - {enabled('greeting') ? : null} - {enabled('time') ? : null} - {enabled('date') ? : null} - {enabled('quote') ? : null} - {enabled('view') ? : null} - {enabled('favouriteEnabled') ? : null} + {this.enabled('searchBar') ? : null} + {elements} + {this.enabled('view') ? : null} + {this.enabled('favouriteEnabled') ? : null}
            ); } diff --git a/src/index.js b/src/index.js index 145cdc1e..8fb8f1cb 100644 --- a/src/index.js +++ b/src/index.js @@ -11,7 +11,7 @@ import '@fontsource/lexend-deca/latin-400.css'; import '@fontsource/roboto/cyrillic-400.css'; // language -import merge from './modules/helpers/merge'; +import merge from '@material-ui/utils/deepmerge'; const languagecode = localStorage.getItem('language') || 'en-GB'; // we set things to window. so they're global and we avoid passing the translation strings as props to each component window.languagecode = languagecode; diff --git a/src/modules/default_settings.json b/src/modules/default_settings.json index fa92eda5..e850791c 100644 --- a/src/modules/default_settings.json +++ b/src/modules/default_settings.json @@ -126,5 +126,9 @@ { "name": "fontweight", "value": 400 + }, + { + "name": "order", + "value": "[\"greeting\", \"time\", \"quote\", \"date\"]" } ] diff --git a/src/modules/helpers/merge.js b/src/modules/helpers/merge.js deleted file mode 100644 index 23146f66..00000000 --- a/src/modules/helpers/merge.js +++ /dev/null @@ -1,19 +0,0 @@ -export default function deepmerge(...objects) { - let target = {}; - - const merge = (obj) => { - for (let prop in obj) { - if (obj.hasOwnProperty(prop)) { - if (typeof obj[prop] === 'object') { - target[prop] = deepmerge(target[prop], obj[prop]); - } else { - target[prop] = obj[prop]; - } - } - } - }; - - objects.forEach(object => merge(object)); - - return target; -} From 1b40f112af8eec09019388cc015ee4fedb049cae Mon Sep 17 00:00:00 2001 From: David Ralph Date: Sun, 21 Mar 2021 18:58:21 +0000 Subject: [PATCH 095/162] build: improve webpack config --- package.json | 4 ++-- webpack.config.js | 20 ++++++++++++++------ 2 files changed, 16 insertions(+), 8 deletions(-) diff --git a/package.json b/package.json index 81dc5414..04514f3d 100644 --- a/package.json +++ b/package.json @@ -40,14 +40,14 @@ "mini-css-extract-plugin": "^1.3.9", "sass": "^1.32.8", "sass-loader": "^11.0.1", + "source-map-loader": "^2.0.1", "webpack": "^5.27.0", - "webpack-bundle-analyzer": "^4.4.0", "webpack-cli": "^4.5.0", "webpack-dev-server": "^3.11.2" }, "scripts": { "start": "webpack serve", - "build": "rm -rf build && webpack --mode=production -json > stats.json", + "build": "rm -rf 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/" diff --git a/webpack.config.js b/webpack.config.js index fdd42782..4143854e 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -6,6 +6,9 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = { entry: path.resolve(__dirname, './src/index.js'), mode: 'development', + performance: { + hints: false + }, module: { rules: [{ test: /\.(js|jsx)$/, @@ -22,14 +25,19 @@ module.exports = { }, }, 'css-loader', - 'sass-loader', + 'sass-loader' ], }, { test: /\.(woff|woff2|svg)$/, use: { - loader: 'file-loader', + loader: 'file-loader' } + }, + { + test: /\.js$/, + enforce: 'pre', + use: ['source-map-loader'] }] }, resolve: { @@ -37,7 +45,7 @@ module.exports = { }, output: { path: path.resolve(__dirname, './build'), - filename: 'bundle.js', + filename: 'bundle.js' }, devServer: { contentBase: path.resolve(__dirname, './build'), @@ -56,12 +64,12 @@ module.exports = { { from: 'public/offline-images', to: 'offline-images' - }, - ], + } + ] }), new MiniCssExtractPlugin({ filename: '[name].css', - chunkFilename: '[id].css', + chunkFilename: '[id].css' }) ] }; From 177e4fdcdc7f7c4195258af10d093a08a4e274d3 Mon Sep 17 00:00:00 2001 From: David Ralph Date: Sun, 21 Mar 2021 22:21:37 +0000 Subject: [PATCH 096/162] feat: better settings for time, implement auto theme feature, add dark theme css for date picker etc --- src/components/modals/main/scss/index.scss | 2 + .../modals/main/scss/settings/_main.scss | 14 +++- ...-picker-gradient-picker-custom-styles.scss | 13 ++++ .../main/settings/sections/Appearance.jsx | 2 +- .../main/settings/sections/Background.jsx | 2 - .../main/settings/sections/Greeting.jsx | 2 +- .../modals/main/settings/sections/Quote.jsx | 2 +- .../modals/main/settings/sections/Search.jsx | 3 +- .../modals/main/settings/sections/Time.jsx | 66 ++++++++++++------- src/components/widgets/time/Date.jsx | 6 +- src/modules/default_settings.json | 4 ++ src/modules/helpers/settings.js | 15 ++--- 12 files changed, 87 insertions(+), 44 deletions(-) rename src/{scss => components/modals/main/scss/settings}/react-color-picker-gradient-picker-custom-styles.scss (61%) diff --git a/src/components/modals/main/scss/index.scss b/src/components/modals/main/scss/index.scss index 00ad7736..d507d489 100644 --- a/src/components/modals/main/scss/index.scss +++ b/src/components/modals/main/scss/index.scss @@ -5,6 +5,8 @@ @import 'settings/buttons'; @import 'settings/dropdown'; +@import './settings/react-color-picker-gradient-picker-custom-styles.scss'; + .Modal { color: var(--modal-text); background-color: var(--background); diff --git a/src/components/modals/main/scss/settings/_main.scss b/src/components/modals/main/scss/settings/_main.scss index a08c89ae..aece09cd 100644 --- a/src/components/modals/main/scss/settings/_main.scss +++ b/src/components/modals/main/scss/settings/_main.scss @@ -26,10 +26,10 @@ input { } } -.DayPickerInput { +.DayPickerInput, .input-container { input { width: 200px; - color: var(--modal-text); + color: var(--modal-text) ! important; background: var(--sidebar); border: none; padding: 10px 10px; @@ -195,4 +195,14 @@ input[type=color]::-moz-color-swatch { .radio-title { text-transform: uppercase; font-weight: bold; +} + +.DayPicker-Day--selected { + background-color: #ff4757 !important; + color: white; +} + +.DayPicker-Months, .DayPickerInput-Overlay { + background-color: var(--background) !important; + color: var(--modal-text) !important; } \ No newline at end of file diff --git a/src/scss/react-color-picker-gradient-picker-custom-styles.scss b/src/components/modals/main/scss/settings/react-color-picker-gradient-picker-custom-styles.scss similarity index 61% rename from src/scss/react-color-picker-gradient-picker-custom-styles.scss rename to src/components/modals/main/scss/settings/react-color-picker-gradient-picker-custom-styles.scss index 7b9de000..a29344d9 100644 --- a/src/scss/react-color-picker-gradient-picker-custom-styles.scss +++ b/src/components/modals/main/scss/settings/react-color-picker-gradient-picker-custom-styles.scss @@ -16,3 +16,16 @@ div.color-preview-area > div > div:nth-child(5) { .input-field .label { color: inherit; } + +// other styling for themes support etc +.ui-color-picker { + background-color: var(--background) !important; +} + +.gradient-degrees { + border: 3px solid var(--modal-text) !important; +} + +.gradient-degree-pointer { + background-color: var(--modal-text) !important; +} \ No newline at end of file diff --git a/src/components/modals/main/settings/sections/Appearance.jsx b/src/components/modals/main/settings/sections/Appearance.jsx index b13ac0d7..9300a342 100644 --- a/src/components/modals/main/settings/sections/Appearance.jsx +++ b/src/components/modals/main/settings/sections/Appearance.jsx @@ -6,7 +6,7 @@ import Radio from '../Radio'; import Slider from '../Slider'; import Text from '../Text'; -export default function AppearanceSettings(props) { +export default function AppearanceSettings() { const { appearance } = window.language.modals.main.settings.sections; let themeOptions = [ diff --git a/src/components/modals/main/settings/sections/Background.jsx b/src/components/modals/main/settings/sections/Background.jsx index 62b29fa3..c5e47e6d 100644 --- a/src/components/modals/main/settings/sections/Background.jsx +++ b/src/components/modals/main/settings/sections/Background.jsx @@ -4,7 +4,6 @@ import Checkbox from '../Checkbox'; import Dropdown from '../Dropdown'; import FileUpload from '../FileUpload'; import Slider from '../Slider'; -import Text from '../Text'; import Switch from '../Switch'; import { ColorPicker } from 'react-color-gradient-picker'; @@ -14,7 +13,6 @@ import rgbToHex from '../../../../../modules/helpers/background/rgbToHex'; import { toast } from 'react-toastify'; import 'react-color-gradient-picker/dist/index.css'; -import '../../../../../scss/react-color-picker-gradient-picker-custom-styles.scss'; export default class BackgroundSettings extends React.PureComponent { DefaultGradientSettings = { 'angle': '180', 'gradient': [{ 'colour': window.language.modals.main.settings.sections.background.source.disabled, 'stop': 0 }], 'type': 'linear' }; diff --git a/src/components/modals/main/settings/sections/Greeting.jsx b/src/components/modals/main/settings/sections/Greeting.jsx index 02ebe850..655b315f 100644 --- a/src/components/modals/main/settings/sections/Greeting.jsx +++ b/src/components/modals/main/settings/sections/Greeting.jsx @@ -36,7 +36,7 @@ export default class GreetingSettings extends React.PureComponent {

            {greeting.birthday}

            - +

              {greeting.birthday_date}

              diff --git a/src/components/modals/main/settings/sections/Quote.jsx b/src/components/modals/main/settings/sections/Quote.jsx index e939302b..3389d9e7 100644 --- a/src/components/modals/main/settings/sections/Quote.jsx +++ b/src/components/modals/main/settings/sections/Quote.jsx @@ -4,7 +4,7 @@ import Checkbox from '../Checkbox'; import Text from '../Text'; import Switch from '../Switch'; -export default function QuoteSettings(props) { +export default function QuoteSettings() { const { quote } = window.language.modals.main.settings.sections; return ( diff --git a/src/components/modals/main/settings/sections/Search.jsx b/src/components/modals/main/settings/sections/Search.jsx index c72df335..bc424813 100644 --- a/src/components/modals/main/settings/sections/Search.jsx +++ b/src/components/modals/main/settings/sections/Search.jsx @@ -4,6 +4,7 @@ import { toast } from 'react-toastify'; import Dropdown from '../Dropdown'; import Checkbox from '../Checkbox'; +import Switch from '../Switch'; const searchEngines = require('../../../../widgets/search/search_engines.json'); @@ -59,7 +60,7 @@ export default class SearchSettings extends React.PureComponent { return (

              {search.title}

              - +
                this.setSearchEngine(value)}> diff --git a/src/components/modals/main/settings/sections/Time.jsx b/src/components/modals/main/settings/sections/Time.jsx index 637872e4..82ad6e3e 100644 --- a/src/components/modals/main/settings/sections/Time.jsx +++ b/src/components/modals/main/settings/sections/Time.jsx @@ -8,17 +8,12 @@ export default class TimeSettings extends React.PureComponent { constructor(...args) { super(...args); this.state = { - timeType: localStorage.getItem('timeType') || 'digital' + timeType: localStorage.getItem('timeType') || 'digital', + dateType: localStorage.getItem('dateType') || 'long' }; this.language = window.language.modals.main.settings; } - changeType(value) { - this.setState({ - timeType: value - }); - } - render() { const { time } = this.language.sections; @@ -51,36 +46,57 @@ export default class TimeSettings extends React.PureComponent { default: timeSettings = null; break; } - return ( -
                -

                {time.title}

                - - this.changeType(value)}> - - - - - - {timeSettings} - -

                {time.date.title}

                - + let dateSettings; + + const longSettings = ( + - + + ); + + const shortSettings = ( + +
                -
                -
                +

                - + +                 + ); + + switch (this.state.dateType) { + case 'short': dateSettings = shortSettings; break; + case 'long': dateSettings = longSettings; break; + } + + return ( +
                +

                {time.title}

                + + this.setState({ timeType: value })}> + + + + + {timeSettings} + +

                {time.date.title}

                + + this.setState({ dateType: value })}> + + + +
                + {dateSettings}
                ); } diff --git a/src/components/widgets/time/Date.jsx b/src/components/widgets/time/Date.jsx index 29e217f6..ef2e5bf7 100644 --- a/src/components/widgets/time/Date.jsx +++ b/src/components/widgets/time/Date.jsx @@ -12,9 +12,9 @@ export default class DateWidget extends React.PureComponent { getDate() { const date = new Date(); - const short = localStorage.getItem('short'); + const type = localStorage.getItem('type'); - if (short === 'true') { + if (type === 'short') { const dateDay = date.getDate(); const dateMonth = date.getMonth() + 1; const dateYear = date.getFullYear(); @@ -56,7 +56,7 @@ export default class DateWidget extends React.PureComponent { date: format }); } else { - // Full date + // Long date const lang = localStorage.getItem('language'); const nth = (localStorage.getItem('datenth') === 'true') ? dtf.nth(date.getDate()) : date.getDate(); diff --git a/src/modules/default_settings.json b/src/modules/default_settings.json index e850791c..50a8475f 100644 --- a/src/modules/default_settings.json +++ b/src/modules/default_settings.json @@ -130,5 +130,9 @@ { "name": "order", "value": "[\"greeting\", \"time\", \"quote\", \"date\"]" + }, + { + "name": "theme", + "value": "auto" } ] diff --git a/src/modules/helpers/settings.js b/src/modules/helpers/settings.js index 2d34ad5e..c77e1950 100644 --- a/src/modules/helpers/settings.js +++ b/src/modules/helpers/settings.js @@ -24,6 +24,7 @@ export default class SettingsFunctions { for (const key of Object.keys(localStorage)) { settings[key] = localStorage.getItem(key); } + saveFile(settings, 'mue-settings.json'); } @@ -48,13 +49,6 @@ export default class SettingsFunctions { localStorage.clear(); defaultSettings.forEach((element) => localStorage.setItem(element.name, element.value)); - // Set theme depending on user preferred - if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { - localStorage.setItem('theme', 'dark'); - } else { - localStorage.setItem('theme', 'light'); - } - // Languages const languageCodes = languages.map(({ code }) => code); const browserLanguage = (navigator.languages && navigator.languages[0]) || navigator.language; @@ -126,6 +120,11 @@ export default class SettingsFunctions { const theme = localStorage.getItem('theme'); if (theme === 'dark') { document.body.classList.add('dark'); + } else if (theme === 'auto') { + // Set theme depending on user preferred + if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { + document.body.classList.add('dark'); + } } const tabName = localStorage.getItem('tabName'); @@ -147,7 +146,7 @@ export default class SettingsFunctions { ██ Copyright 2018-2021 Mue ██ ██ GitHub: https://github.com/mue/mue ██ ██ ██ - ██ Thank you for using! ██ + ██ Thank you for using Mue! ██ ██ Feedback: hello@muetab.com ██ █████████████████████████████████████████████████████████████ `); From 29171bce5d148870bcd6d89803b41070a9ee4d52 Mon Sep 17 00:00:00 2001 From: David Ralph Date: Mon, 22 Mar 2021 15:56:15 +0000 Subject: [PATCH 097/162] chore: remove unneeded files --- .babelrc | 6 -- .env | 3 - .github/FUNDING.yml | 3 - .github/ISSUE_TEMPLATE/feature-request.md | 14 ----- CODE_OF_CONDUCT.md | 76 ----------------------- CONTRIBUTING.md | 37 ----------- 6 files changed, 139 deletions(-) delete mode 100644 .babelrc delete mode 100644 .env delete mode 100644 .github/FUNDING.yml delete mode 100644 .github/ISSUE_TEMPLATE/feature-request.md delete mode 100644 CODE_OF_CONDUCT.md delete mode 100644 CONTRIBUTING.md diff --git a/.babelrc b/.babelrc deleted file mode 100644 index feb5ba89..00000000 --- a/.babelrc +++ /dev/null @@ -1,6 +0,0 @@ -{ - "presets": ["@babel/preset-env", "@babel/preset-react"], - "plugins": ["@babel/plugin-proposal-class-properties", ["@babel/transform-runtime", { - "regenerator": true - }]] -} diff --git a/.env b/.env deleted file mode 100644 index e1396d1f..00000000 --- a/.env +++ /dev/null @@ -1,3 +0,0 @@ -GENERATE_SOURCEMAP=false -INLINE_RUNTIME_CHUNK=false -SKIP_PREFLIGHT_CHECK=true diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml deleted file mode 100644 index ad97a13e..00000000 --- a/.github/FUNDING.yml +++ /dev/null @@ -1,3 +0,0 @@ -github: ohlookitsderpy -patreon: ohlookitsderpy -ko_fi: ohlookitsderpy diff --git a/.github/ISSUE_TEMPLATE/feature-request.md b/.github/ISSUE_TEMPLATE/feature-request.md deleted file mode 100644 index 39e93351..00000000 --- a/.github/ISSUE_TEMPLATE/feature-request.md +++ /dev/null @@ -1,14 +0,0 @@ ---- -name: Feature Request -about: Suggest an idea for Mue -title: "[Feature Request]" -labels: enhancement -assignees: '' - ---- - -**Description** -A clear and concise description of what you want in this new feature. - -**Additional context** -Add any other context or screenshots about the feature request here. diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md deleted file mode 100644 index 7f1074c7..00000000 --- a/CODE_OF_CONDUCT.md +++ /dev/null @@ -1,76 +0,0 @@ -# Contributor Covenant Code of Conduct - -## Our Pledge - -In the interest of fostering an open and welcoming environment, we as -contributors and maintainers pledge to making participation in our project and -our community a harassment-free experience for everyone, regardless of age, body -size, disability, ethnicity, sex characteristics, gender identity and expression, -level of experience, education, socio-economic status, nationality, personal -appearance, race, religion, or sexual identity and orientation. - -## Our Standards - -Examples of behavior that contributes to creating a positive environment -include: - -* Using welcoming and inclusive language -* Being respectful of differing viewpoints and experiences -* Gracefully accepting constructive criticism -* Focusing on what is best for the community -* Showing empathy towards other community members - -Examples of unacceptable behavior by participants include: - -* The use of sexualized language or imagery and unwelcome sexual attention or - advances -* Trolling, insulting/derogatory comments, and personal or political attacks -* Public or private harassment -* Publishing others' private information, such as a physical or electronic - address, without explicit permission -* Other conduct which could reasonably be considered inappropriate in a - professional setting - -## Our Responsibilities - -Project maintainers are responsible for clarifying the standards of acceptable -behavior and are expected to take appropriate and fair corrective action in -response to any instances of unacceptable behavior. - -Project maintainers have the right and responsibility to remove, edit, or -reject comments, commits, code, wiki edits, issues, and other contributions -that are not aligned to this Code of Conduct, or to ban temporarily or -permanently any contributor for other behaviors that they deem inappropriate, -threatening, offensive, or harmful. - -## Scope - -This Code of Conduct applies both within project spaces and in public spaces -when an individual is representing the project or its community. Examples of -representing a project or community include using an official project e-mail -address, posting via an official social media account, or acting as an appointed -representative at an online or offline event. Representation of a project may be -further defined and clarified by project maintainers. - -## Enforcement - -Instances of abusive, harassing, or otherwise unacceptable behavior may be -reported by contacting the project team at hello@muetab.com. All -complaints will be reviewed and investigated and will result in a response that -is deemed necessary and appropriate to the circumstances. The project team is -obligated to maintain confidentiality with regard to the reporter of an incident. -Further details of specific enforcement policies may be posted separately. - -Project maintainers who do not follow or enforce the Code of Conduct in good -faith may face temporary or permanent repercussions as determined by other -members of the project's leadership. - -## Attribution - -This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, -available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html - -[homepage]: https://www.contributor-covenant.org - -For answers to common questions about this code of conduct, see -https://www.contributor-covenant.org/faq diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md deleted file mode 100644 index 05d4f2f2..00000000 --- a/CONTRIBUTING.md +++ /dev/null @@ -1,37 +0,0 @@ -# Contributing -All contributions are welcome! However, there are some things you need to take note of before starting your contribution to the Mue project. - -By contributing to Mue, you agree that: -* None of the work submitted is plagiarised -* Your contribution will be distributed under the [BSD-3-Clause License](LICENSE) after it has been merged or implemented otherwise. - -## General -Test *everything*. That's right - make sure every feature still works depending on the change you just implemented. If it's a translation, check if all strings are translated. -A bug fix? See if it has fixed the issue fully on both Chromium and Firefox. For features, make sure that everything else still works fine and is compatible with what you -implemented. - -### Translations -Please don't use Google Translate. When submitting new translations, we'd prefer it if you waited until it's finished before pull requesting or if you opened it as a draft. -All translation work should be done by copying the ``en-GB.json`` file to a file with your language code as the name, e.g ``fr.json``. - -## Development -### Code -Here's some quick bullet points as to what your code should be like on Mue: -* Follow the general codestyle of the project (unless you can make it more optimised) -* Fix any React or JS errors/warnings created -* Use as few external dependencies as possible - -### Features -We prefer it if you implement features from our [projects board](https://github.com/mue/mue/projects). However, if you have an idea feel free to let us know first via a GitHub -issue or our Discord server (see README for invite). Here's a quick list of things to look out for: -* External APIs - Please refrain from requesting to servers not on the ``muetab.com``, ``unsplash.com``, ``backblazeb2.com`` or ``duckduckgo.com`` domains. Whenever possible, try to create -a "proxy" API service for requests to go through. Pull requests involving paid APIs or heavily limited free plans will be denied. -* Clones - Please don't go blatantly copying features from the alternative extensions out there unless you have written permission from the original author of the project. -Inspired features are fine. -* Removed Features - If a feature has been removed by us don't add it back again without asking us about it first for the reasons as to why it was removed in the first place. - -### Bug Fixes -See the note in general. - -## Final Note -Contact us before doing anything if you don't want to have to change 1000 things and/or have your pull request closed. From 5dd11aca94c00c76f40f02dbd3e48a6bacd7b07a Mon Sep 17 00:00:00 2001 From: David Ralph Date: Mon, 22 Mar 2021 22:17:52 +0000 Subject: [PATCH 098/162] perf: remove unneeded divs and replace with <>, remove outdated notes code --- src/App.jsx | 4 +-- src/components/modals/Modals.jsx | 6 ++--- src/components/modals/main/Main.jsx | 26 +++++++++---------- .../modals/main/scss/settings/_main.scss | 4 --- .../modals/main/settings/Checkbox.jsx | 4 +-- .../modals/main/settings/Dropdown.jsx | 4 +-- .../modals/main/settings/Slider.jsx | 4 +-- .../modals/main/settings/Switch.jsx | 4 +-- src/components/modals/main/settings/Text.jsx | 4 +-- .../modals/main/settings/sections/About.jsx | 4 +-- .../main/settings/sections/Advanced.jsx | 4 +-- .../main/settings/sections/Appearance.jsx | 4 +-- .../main/settings/sections/Background.jsx | 4 +-- .../main/settings/sections/Changelog.jsx | 4 +-- .../main/settings/sections/Experimental.jsx | 8 +++--- .../main/settings/sections/Greeting.jsx | 4 +-- .../main/settings/sections/Language.jsx | 6 ++--- .../modals/main/settings/sections/Order.jsx | 4 +-- .../modals/main/settings/sections/Quote.jsx | 4 +-- .../modals/main/settings/sections/Search.jsx | 4 +-- .../modals/main/settings/sections/Time.jsx | 20 +++++++------- src/components/modals/main/tabs/Addons.jsx | 6 ++--- .../modals/main/tabs/Marketplace.jsx | 6 ++--- src/components/modals/main/tabs/Settings.jsx | 7 +++-- .../modals/main/tabs/backend/Tab.jsx | 6 ++--- src/components/widgets/navbar/Notes.jsx | 7 +---- src/components/widgets/quote/Quote.jsx | 2 +- src/components/widgets/search/Search.jsx | 6 ++--- 28 files changed, 80 insertions(+), 90 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 593ea3d7..2f0ce920 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -25,14 +25,14 @@ export default class App extends React.PureComponent { render() { return ( - + <>
                -                 + ); } } diff --git a/src/components/modals/Modals.jsx b/src/components/modals/Modals.jsx index b9a816ad..a7712455 100644 --- a/src/components/modals/Modals.jsx +++ b/src/components/modals/Modals.jsx @@ -9,7 +9,7 @@ const Main = React.lazy(() => import('./main/Main')); const Update = React.lazy(() => import('./update/Update')); const Welcome = React.lazy(() => import('./welcome/Welcome')); //const Feedback = React.lazy(() => import('./components/modals/Feedback')); -const renderLoader = () =>
                ; +const renderLoader = () => <>; export default class Modals extends React.PureComponent { constructor(...args) { @@ -40,7 +40,7 @@ export default class Modals extends React.PureComponent { render() { return ( - + <> this.setState({ [modal]: true })}/> this.setState({ mainModal: false })} isOpen={this.state.mainModal} className='Modal' overlayClassName={this.state.overlayClassList} ariaHideApp={false}> @@ -56,7 +56,7 @@ export default class Modals extends React.PureComponent { this.setState({ feedbackModal: false })} /> */} - + ); } } \ No newline at end of file diff --git a/src/components/modals/main/Main.jsx b/src/components/modals/main/Main.jsx index e4c0eb91..5547c4e1 100644 --- a/src/components/modals/main/Main.jsx +++ b/src/components/modals/main/Main.jsx @@ -12,19 +12,19 @@ export default function MainModal(props) { const language = window.language; return ( -
                + <> × - -
                - -
                -
                - -
                -
                - -
                -                 -
                + +
                + +
                +
                + +
                +
                + +
                +                 + ); } diff --git a/src/components/modals/main/scss/settings/_main.scss b/src/components/modals/main/scss/settings/_main.scss index aece09cd..d8b0dff0 100644 --- a/src/components/modals/main/scss/settings/_main.scss +++ b/src/components/modals/main/scss/settings/_main.scss @@ -49,10 +49,6 @@ h4, display: inline; } -.section { - margin-bottom: 20px; -} - h4 { cursor: pointer; } diff --git a/src/components/modals/main/settings/Checkbox.jsx b/src/components/modals/main/settings/Checkbox.jsx index 56e80f22..409a2bff 100644 --- a/src/components/modals/main/settings/Checkbox.jsx +++ b/src/components/modals/main/settings/Checkbox.jsx @@ -31,13 +31,13 @@ export default class Checkbox extends React.PureComponent { } return ( - + <> this.handleChange()} />} label={text} />
                -                 + ); } } diff --git a/src/components/modals/main/settings/Dropdown.jsx b/src/components/modals/main/settings/Dropdown.jsx index 9f54a932..c1fb64fb 100644 --- a/src/components/modals/main/settings/Dropdown.jsx +++ b/src/components/modals/main/settings/Dropdown.jsx @@ -26,14 +26,14 @@ export default class Dropdown extends React.PureComponent { render() { return ( - + <> {this.getLabel()}
                -                 + ); } } diff --git a/src/components/modals/main/settings/Slider.jsx b/src/components/modals/main/settings/Slider.jsx index cef48b93..b214258a 100644 --- a/src/components/modals/main/settings/Slider.jsx +++ b/src/components/modals/main/settings/Slider.jsx @@ -29,10 +29,10 @@ export default class Slider extends React.PureComponent { render() { return ( - + <>

                {this.props.title} ({this.state.value}{this.props.display}) this.resetItem()}>{this.language.buttons.reset}

                this.handleChange(e.target.value)} /> -                 + ); } } diff --git a/src/components/modals/main/settings/Switch.jsx b/src/components/modals/main/settings/Switch.jsx index 231a9b43..bfdedd01 100644 --- a/src/components/modals/main/settings/Switch.jsx +++ b/src/components/modals/main/settings/Switch.jsx @@ -31,14 +31,14 @@ export default class Switch extends React.PureComponent { } return ( - + <> this.handleChange()} />} label={text} labelPlacement='start' />
                -                 + ); } } diff --git a/src/components/modals/main/settings/Text.jsx b/src/components/modals/main/settings/Text.jsx index 91f1fd6d..fbf4c3f3 100644 --- a/src/components/modals/main/settings/Text.jsx +++ b/src/components/modals/main/settings/Text.jsx @@ -34,13 +34,13 @@ export default class Text extends React.PureComponent { render() { return ( - + <>

                {this.props.title} this.resetItem()}>{this.language.buttons.reset}

                {(this.props.textarea === true) ?