diff --git a/package.json b/package.json index 25443966..80fd3357 100644 --- a/package.json +++ b/package.json @@ -15,9 +15,10 @@ "license": "BSD-3-Clause", "version": "0.7.1", "dependencies": { - "@material-ui/core": "4.11.0", + "@material-ui/core": "^4.11.0", "@material-ui/icons": "^4.9.1", "@muetab/quotes": "^1.0.0", + "copy-text-to-clipboard": "^2.2.0", "react": "^16.13.1", "react-dom": "^16.13.1", "react-modal": "^3.11.2", diff --git a/src/App.jsx b/src/App.jsx index b96bd512..6009e046 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -9,6 +9,7 @@ import Credit from './components/Credit'; import Navbar from './components/Navbar'; import Settings from './components/Settings'; import Update from './components/Update'; +import Toast from './components/Toast'; import Modal from 'react-modal'; import './scss/index.scss'; @@ -20,7 +21,7 @@ export default class App extends React.Component { this.state = { settingsModal: false, - updateModal: false + updateModal: false }; } @@ -47,8 +48,9 @@ export default class App extends React.Component { this.setState({ settingsModal: true })} updateModalOpen={() => this.setState({ updateModal: true })} /> - + + this.setState({ settingsModal: false })} /> diff --git a/src/components/Background.jsx b/src/components/Background.jsx index 760b5603..fd7bcdc9 100644 --- a/src/components/Background.jsx +++ b/src/components/Background.jsx @@ -45,7 +45,10 @@ export default class Background extends React.Component { componentDidMount() { const enabled = localStorage.getItem('background'); - if (enabled === 'false') return; + if (enabled === 'false') { + document.getElementById('backgroundCredits').style.display = 'none'; + return; + } this.setBackground(); } diff --git a/src/components/Quote.jsx b/src/components/Quote.jsx index bcb1160b..133ee180 100644 --- a/src/components/Quote.jsx +++ b/src/components/Quote.jsx @@ -1,6 +1,8 @@ //* Imports import React from 'react'; import Quotes from '@muetab/quotes'; +import copy from 'copy-text-to-clipboard'; +import FileCopy from '@material-ui/icons/AttachFile'; export default class Quote extends React.Component { constructor(...args) { @@ -38,6 +40,13 @@ export default class Quote extends React.Component { } } + copyQuote() { + copy(`${this.state.quote} - ${this.state.author}`); + var x = document.getElementById('toast'); + x.className = "show"; + setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000); + } + componentDidMount() { const enabled = localStorage.getItem('quote'); if (enabled === 'false') return; @@ -46,9 +55,17 @@ export default class Quote extends React.Component { render() { return [ -

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

, - // perm_identity, -

{`${this.state.author}`}

, +

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

, +

{this.state.author} this.copyQuote() }>

, ]; } + + + + + + + + + } diff --git a/src/components/Settings.jsx b/src/components/Settings.jsx index af1ecf20..99a0a3dc 100644 --- a/src/components/Settings.jsx +++ b/src/components/Settings.jsx @@ -28,8 +28,16 @@ export default class Settings extends React.Component { } componentDidMount() { + document.getElementById('greetingName').value = localStorage.getItem('greetingName'); + for (const key of Object.keys(localStorage)) { let value = localStorage.getItem(key); + + if (key === 'blur') { + document.getElementById('blurAmount').innerText = value; + document.getElementById('blurRange').value = value; + } + const tag = document.getElementById(`${key}Status`); if (tag) { @@ -90,14 +98,20 @@ export default class Settings extends React.Component {

Quote

+ this.toggleExtra(document.getElementsByClassName('extraSettings')[2], document.getElementsByClassName('expandIcons')[2])} /> +
  • +
      + this.setItem('copyButton')} id='copyButtonStatus' /> + +
    +
  • Background

    - this.toggleExtra(document.getElementsByClassName('extraSettings')[2], document.getElementsByClassName('expandIcons')[2])} /> + this.toggleExtra(document.getElementsByClassName('extraSettings')[3], document.getElementsByClassName('expandIcons')[3])} />

    Search Bar

    - this.toggleExtra(document.getElementsByClassName('extraSettings')[3], document.getElementsByClassName('expandIcons')[3])} /> + this.toggleExtra(document.getElementsByClassName('extraSettings')[4], document.getElementsByClassName('expandIcons')[4])} />
    ; + } } \ No newline at end of file diff --git a/src/scss/index.scss b/src/scss/index.scss index e632ccc7..9ec3e3d1 100644 --- a/src/scss/index.scss +++ b/src/scss/index.scss @@ -7,6 +7,7 @@ @import 'modules/navbar'; @import 'modules/modal'; @import 'modules/settings'; +@import 'modules/toast'; @import 'modules/miscellaneous'; #backgroundImage { @@ -17,4 +18,4 @@ background-attachment: fixed; z-index: 0; border: none; -} \ No newline at end of file +} diff --git a/src/scss/modules/_quote.scss b/src/scss/modules/_quote.scss index ec80c98a..5158a49a 100644 --- a/src/scss/modules/_quote.scss +++ b/src/scss/modules/_quote.scss @@ -3,6 +3,8 @@ text-shadow: 0 0 25px rgba(0, 0, 0, 0.3); } + + @media screen and (min-width: 600px) { .quote { margin-left: 30%; @@ -16,7 +18,37 @@ 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; + transform: rotate(45deg); +} + i.material-icons, h1.quoteauthor { display: inline; +} + +button.copyButton { + background: transparent; + border: none; + color: #fff; + 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/_toast.scss b/src/scss/modules/_toast.scss new file mode 100644 index 00000000..3c819f81 --- /dev/null +++ b/src/scss/modules/_toast.scss @@ -0,0 +1,96 @@ +#toast { + visibility: hidden; + text-align: center; + position: fixed; + z-index: 2; + bottom: 30px; + padding: 10px; + box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2); + // backdrop-filter: blur(20px); stupid firefox :( + border-radius: 10px; + background: #fff; + color: #000; + text-align: left; + font-size: 16px; + width: auto; + bottom: 30px; + right: 30px; +} + +.copyButton, hr { + display: inline; + vertical-align: middle; +} + +hr { + height: 20px; + width: 1px; + margin: 0; + margin-left: 10px; + margin-right: 10px; +} + +#toast.show { + visibility: visible; + -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s; + animation: fadein 0.5s, fadeout 0.5s 2.5s; +} + +@-webkit-keyframes fadein { + from { + bottom: 0; + opacity: 0; + } + + to { + bottom: 30px; + opacity: 1; + } +} + +@keyframes fadein { + from { + bottom: 0; + opacity: 0; + } + + to { + bottom: 30px; + opacity: 1; + } +} + +@-webkit-keyframes fadeout { + from { + bottom: 30px; + opacity: 1; + } + + to { + bottom: 0; + opacity: 0; + } +} + +@keyframes fadeout { + from { + bottom: 30px; + opacity: 1; + } + + to { + bottom: 0; + opacity: 0; + } +} + +#toast>img { + height: 20px; + width: auto; + float: left; +} + +#toast>hr { + margin-left: 10px; + margin-right: 10px; +} \ No newline at end of file