From 3fb0f5bc6c5e29d5b579836696910aedad65fb16 Mon Sep 17 00:00:00 2001 From: Francisco Pessano Date: Tue, 3 May 2022 15:34:01 -0300 Subject: [PATCH] Notification permission ask added --- public/css_styles/styles.css | 60 ++++++++- public/css_styles/styles.css.map | 2 +- public/sass_styles/_header.scss | 115 +++++++++++++++--- src/App.js | 15 +++ src/components/Header.jsx | 29 ++++- .../MainPomodoroTimer.jsx | 26 +--- src/components/MainPomodoro.jsx | 7 +- 7 files changed, 204 insertions(+), 50 deletions(-) diff --git a/public/css_styles/styles.css b/public/css_styles/styles.css index 0f6184a..814612e 100644 --- a/public/css_styles/styles.css +++ b/public/css_styles/styles.css @@ -3,16 +3,20 @@ display: flex; flex-direction: column; justify-content: center; - height: 17vh; + height: 14vh; padding: 0vh 1vw; box-sizing: border-box; } .header-main-page a { text-decoration: none; } +.header-main-page .title-link { + width: fit-content; +} .header-main-page h1 { color: #ffffff; font-size: 3vw; + display: inline; font-family: "Raleway", sans-serif; font-weight: 700; margin: 0; @@ -25,6 +29,41 @@ color: #4c8ad5; } +.notification-select { + background-color: #1FAB89; + height: 3vh; + display: flex; + align-items: flex-end; + padding-left: 1vw; + box-sizing: border-box; + color: #fff; + font-family: "Rambla", sans-serif; +} +.notification-select p { + display: inline-block; + align-self: center; + padding: 0; + margin: 0; + margin-right: 1vw; +} +.notification-select button { + height: 80%; + width: 5%; + margin-right: 0.5vw; + border: none; + border-radius: 2px; + align-self: center; + color: #fff; + font-weight: bold; + cursor: pointer; +} +.notification-select button.yes { + background-color: #4caf50; +} +.notification-select button.no { + background-color: #d32f2f; +} + @media (max-width: 991.98px) { .header-main-page { height: auto; @@ -37,12 +76,31 @@ .header-main-page h3 { font-size: 13pt; } + + .notification-select { + height: auto; + flex-wrap: wrap; + } + .notification-select p { + width: 100%; + margin-top: 1vh; + margin-bottom: 1vh; + } + .notification-select button { + height: 30px; + width: 20%; + margin-bottom: 1vh; + } } .header-main-page.dark-mode-component { background-color: #303841; border-bottom: 1px solid #ffffff72; } +.notification-select.dark-mode-component { + background-color: #3A4750; +} + .banner-login { background-color: #D17262; color: white; diff --git a/public/css_styles/styles.css.map b/public/css_styles/styles.css.map index bc972b7..9f5de15 100644 --- a/public/css_styles/styles.css.map +++ b/public/css_styles/styles.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../sass_styles/_header.scss","../sass_styles/styles.scss","../sass_styles/_banner-login.scss","../sass_styles/_mainPomodoro.scss","../sass_styles/_styleSelector.scss","../sass_styles/_goDownArrow.scss","../sass_styles/_aboutThis.scss","../sass_styles/_historyButton.scss","../sass_styles/_pomodoro-counter.scss","../sass_styles/_identify.scss","../sass_styles/_dark-mode_toogle-switch.scss","../sass_styles/_account.scss","../sass_styles/_goToAccount.scss","../sass_styles/_clockify-tasks-display.scss","../sass_styles/_made-with-love.scss"],"names":[],"mappings":"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","file":"styles.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../sass_styles/_header.scss","../sass_styles/styles.scss","../sass_styles/_banner-login.scss","../sass_styles/_mainPomodoro.scss","../sass_styles/_styleSelector.scss","../sass_styles/_goDownArrow.scss","../sass_styles/_aboutThis.scss","../sass_styles/_historyButton.scss","../sass_styles/_pomodoro-counter.scss","../sass_styles/_identify.scss","../sass_styles/_dark-mode_toogle-switch.scss","../sass_styles/_account.scss","../sass_styles/_goToAccount.scss","../sass_styles/_clockify-tasks-display.scss","../sass_styles/_made-with-love.scss"],"names":[],"mappings":"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","file":"styles.css"} \ No newline at end of file diff --git a/public/sass_styles/_header.scss b/public/sass_styles/_header.scss index 364c4c9..fec432a 100644 --- a/public/sass_styles/_header.scss +++ b/public/sass_styles/_header.scss @@ -7,7 +7,7 @@ // align-items: center; justify-content: center; - height: 17vh; + height: 14vh; padding: 0vh 1vw; box-sizing: border-box; @@ -15,11 +15,18 @@ a { text-decoration: none; } + + .title-link { + width: fit-content; + } h1 { color: #ffffff; font-size: 3vw; + + display: inline; + @include titleFont(); @include normalizeTitle(); } @@ -30,28 +37,98 @@ color: $lightest-color-dark; } } +.notification-select { + background-color: $second-color; + height: 3vh; + display: flex; + align-items: flex-end; - - @media (max-width: 991.98px) { - .header-main-page { - height: auto; - padding: 3vw 0px; - - align-items: center; + padding-left: 1vw; - h1 { - font-size: 26pt; + box-sizing: border-box; + + color: #fff; + + @include bodyFont(); + + p { + display: inline-block; + + align-self: center; + + padding: 0; + + margin: 0; + margin-right: 1vw; } - h3 { - font-size: 13pt; - } - } - } + button { + height: 80%; + width: 5%; - .header-main-page.dark-mode-component { - background-color: $main-color-dark; - border-bottom: 1px solid #ffffff72; - } \ No newline at end of file + margin-right: 0.5vw; + + border: none; + border-radius: 2px; + + align-self: center; + + color: #fff; + font-weight: bold; + + cursor: pointer; + } + + button.yes { + background-color: rgb(76, 175, 80); + } + + button.no { + background-color: rgb(211, 47, 47); + } +} + +@media (max-width: 991.98px) { + .header-main-page { + height: auto; + padding: 3vw 0px; + + align-items: center; + + h1 { + font-size: 26pt; + } + + h3 { + font-size: 13pt; + } + } + + .notification-select { + height: auto; + flex-wrap: wrap; + + p { + width: 100%; + margin-top: 1vh; + margin-bottom: 1vh; + } + + button { + height: 30px; + width: 20%; + margin-bottom: 1vh; + } + } +} + +.header-main-page.dark-mode-component { + background-color: $main-color-dark; + border-bottom: 1px solid #ffffff72; +} + +.notification-select.dark-mode-component { + background-color: $second-color-dark; +} \ No newline at end of file diff --git a/src/App.js b/src/App.js index 51d72b6..0474202 100644 --- a/src/App.js +++ b/src/App.js @@ -28,6 +28,8 @@ function App() { const [KonamiCodeActive, setKonamiCodeActive] = useState(false) + const [notificationPermission, setNotificationPermission] = useState(undefined) + const auth = getAuth() onAuthStateChanged(auth, (user) => { @@ -49,6 +51,14 @@ function App() { root.style.flexDirection ='column' } + + React.useEffect(() => { + const permission = localStorage.getItem("notification-permission") + + if (permission !== undefined && permission !== null) { + setNotificationPermission(permission === "true" ? true : false) + } + }, []) return ( @@ -60,6 +70,9 @@ function App() { setDarkmode={setDarkmode} KonamiCodeActive= {KonamiCodeActive} + + notificationPermission={notificationPermission} + setNotificationPermission={setNotificationPermission} /> @@ -128,6 +141,8 @@ function App() { setKonamiCodeActive = {setKonamiCodeActive} KonamiCodeActive= {KonamiCodeActive} + + notificationPermission={notificationPermission} /> { + const getPermisionDesktopNotification = async () => { + + let permission = await Notification.requestPermission(); + + if (permission === 'granted') { + props.setNotificationPermission(true) + localStorage.setItem("notification-permission", true) + } else { + props.setNotificationPermission(false) + localStorage.setItem("notification-permission", false) + } + } + return ( + <>
- +

Clockify Pomodoro Timer

 { {props.KonamiCodeActive ? 'Konami Code ON' : null}
+ { + props.notificationPermission === undefined || process.env.REACT_APP_ENVIROMENT !== "production" ? +
+

Do you want to recibe a notification when a Pomodoro cicle ends?

+ + +
+ : null + } + ) } diff --git a/src/components/Main Pomodoro Childrens/MainPomodoroTimer.jsx b/src/components/Main Pomodoro Childrens/MainPomodoroTimer.jsx index 3202d56..18723f4 100644 --- a/src/components/Main Pomodoro Childrens/MainPomodoroTimer.jsx +++ b/src/components/Main Pomodoro Childrens/MainPomodoroTimer.jsx @@ -29,26 +29,9 @@ const MainPomodoroTimer = (props) => { const [controlKonamiCode, setControlKonamiCode] = useState(true) const [velocity, setVelocity] = useState(1) - - const [notificationPermission, setNotificationPermission] = useState('') const setTimeStyle = () => setTimeStyleExternal(props, setMinutes, setSeconds, setBreakTime, setActualStyle, breakTime) - const getPermisionDesktopNotification = async () => { - - let permission = await Notification.requestPermission(); - - if (permission === 'granted') { - - await setNotificationPermission(true) - - } else { - - setNotificationPermission(false) - } - - } - React.useEffect (() => { if (actualStyle !== props.style) { @@ -61,10 +44,7 @@ const MainPomodoroTimer = (props) => { detectKeys(props.setKonamiCodeActive) setControlKonamiCode(false) - } - - getPermisionDesktopNotification() - + } }) const startTimer = () => { @@ -188,7 +168,7 @@ const MainPomodoroTimer = (props) => { playAudio('work') - if (notificationPermission) { + if (props.notificationPermission) { new Notification('Pomodoro ended'); } @@ -245,7 +225,7 @@ const MainPomodoroTimer = (props) => { playAudio('rest') - if (notificationPermission) { + if (props.notificationPermission) { new Notification('Rest ended'); } diff --git a/src/components/MainPomodoro.jsx b/src/components/MainPomodoro.jsx index 859ee43..aa0e967 100644 --- a/src/components/MainPomodoro.jsx +++ b/src/components/MainPomodoro.jsx @@ -20,8 +20,6 @@ const MainPomodoro = (props) => { const showStyles = () => { - - setDisplayHidden(!displayHidden) } @@ -37,9 +35,6 @@ const MainPomodoro = (props) => { } }) - - - return (
@@ -86,6 +81,8 @@ const MainPomodoro = (props) => { setKonamiCodeActive={props.setKonamiCodeActive} KonamiCodeActive= {props.KonamiCodeActive} + notificationPermission={props.notificationPermission} + />