From 8c6b40ad4d1df742b751bc456f346b0a9d60c20b Mon Sep 17 00:00:00 2001 From: dheerajdlalwani Date: Mon, 24 Jan 2022 10:34:48 +0530 Subject: [PATCH] :bug: fix: Fix same site addition bug, invalid domain check, add quotes feature, reduce code complexity & UI revamp --- src/options/options.css | 84 +++++++++++++++++++++++++++++----------- src/options/options.html | 52 ++++++++++++++++++++++++- src/options/options.js | 46 +++++++++++++++------- src/popup/popup.css | 69 ++++++++++++++++++++++++++++----- src/popup/popup.html | 2 + src/popup/popup.js | 64 ++++++++++++++++++++++-------- src/popup/quotes.json | 30 ++++++++++++++ 7 files changed, 286 insertions(+), 61 deletions(-) create mode 100644 src/popup/quotes.json diff --git a/src/options/options.css b/src/options/options.css index 6f899e0..570c2dc 100644 --- a/src/options/options.css +++ b/src/options/options.css @@ -38,6 +38,29 @@ header > img { font-style: italic; } +.new_website { + border-radius: 10px; + width: 70%; + margin: 15px; + padding: 10px 15px; + border: none; + outline: none; + font-size: 20px; + text-align: center; + filter: drop-shadow(0 0 2px #1f283f); +} + +.new_website:focus { + filter: drop-shadow(0 0 7px #006eff); +} + +.new_website_field_error { + border: solid rgb(255, 93, 93) 2px; +} +.new_website_field_error::placeholder { + color: rgb(255, 93, 93); +} + #list_container { display: flex; flex-direction: column; @@ -97,22 +120,6 @@ header > img { width: clamp(500px, 65vw, 900px); } -#new_website { - border-radius: 10px; - width: 70%; - margin: 15px; - padding: 10px 15px; - border: none; - outline: none; - font-size: 20px; - text-align: center; - filter: drop-shadow(0 0 2px #1f283f); -} - -#new_website:focus { - filter: drop-shadow(0 0 7px #006eff); -} - #add_button { width: 15%; border-radius: 10px; @@ -131,10 +138,6 @@ header > img { filter: drop-shadow(0 0 7px #006eff); } -.new_website_field::placeholder { - color: rgb(255, 93, 93); -} - #list_wrapper { display: flex; flex-direction: row; @@ -155,8 +158,45 @@ header > img { font-size: 20px; border: none; outline: none; - background-color: #000e24; - color: #afcaff; + background-color: #afcaff; + color: #000e24; filter: drop-shadow(0 0 2px #1f283f); cursor: pointer; } + +footer { + display: flex; + flex-direction: column; + text-align: center; + align-items: center; + justify-content: center; + font-size: 20px; + margin-top: 1em; + padding: 1em; +} + +footer a { + color: #000e24; + font-weight: 700; +} + +.github-corner:hover .octo-arm { + animation: octocat-wave 560ms ease-in-out; +} + +@keyframes octocat-wave { + 0%, + 100% { + transform: rotate(0); + } + + 20%, + 60% { + transform: rotate(-25deg); + } + + 40%, + 80% { + transform: rotate(10deg); + } +} diff --git a/src/options/options.html b/src/options/options.html index 6fd79ce..fd21da5 100644 --- a/src/options/options.html +++ b/src/options/options.html @@ -8,6 +8,40 @@ Back To Work + + +
logo
@@ -21,7 +55,7 @@

- Your addictive websites -

@@ -30,6 +64,22 @@

- Your addictive websites -

    + diff --git a/src/options/options.js b/src/options/options.js index b2e8991..3b826b6 100644 --- a/src/options/options.js +++ b/src/options/options.js @@ -60,19 +60,39 @@ document.addEventListener("DOMContentLoaded", () => { // implementing logic for adding new website. let addButton = document.querySelector("#add_button"); console.log(addButton); +const domain_dot_tld_regex = /\w+\.[a-zA-B]+/g; addButton.addEventListener("click", () => { console.log("Ha bhai click ho gaya..."); - let newWebsite = document.querySelector("#new_website"); - if (newWebsite.value.trim() !== "") { - chrome.storage.sync.get("blockedWebsites", ({ blockedWebsites }) => { - blockedWebsites.push(newWebsite.value); - chrome.storage.sync.set({ blockedWebsites }); - }); - location.reload(); - } else { - newWebsite.value = ""; - newWebsite.placeholder = "Field is empty!"; - newWebsite.style.border = "solid rgb(255, 93, 93) 2px"; - newWebsite.classList.add("new_website_field"); - } + chrome.storage.sync.get("mode", ({ mode }) => { + // checking if mode is work. + if (mode === "Work") { + alert("Cannot add when in work mode!"); // TODO while refactoring, replace alert with a modal or a message toast. + } else { + let newWebsite = document.querySelector(".new_website"); + if (newWebsite.value.trim() !== "") { + if (domain_dot_tld_regex.test(newWebsite.value)) { + chrome.storage.sync.get("blockedWebsites", ({ blockedWebsites }) => { + if (blockedWebsites.indexOf(newWebsite.value) === -1) { + blockedWebsites.push(newWebsite.value); + chrome.storage.sync.set({ blockedWebsites }); + location.reload(); + } else { + newWebsite.value = ""; + newWebsite.placeholder = "Website already exists!"; + newWebsite.classList.add("new_website_field_error"); + } + }); + } else { + newWebsite.value = ""; + newWebsite.placeholder = + "Error. Please enter a valid website domain."; + newWebsite.classList.add("new_website_field_error"); + } + } else { + newWebsite.value = ""; + newWebsite.placeholder = "Field is empty!"; + newWebsite.classList.add("new_website_field_error"); + } + } + }); }); diff --git a/src/popup/popup.css b/src/popup/popup.css index 90c601e..8f698b7 100644 --- a/src/popup/popup.css +++ b/src/popup/popup.css @@ -12,21 +12,22 @@ body { font-family: "Manrope", sans-serif; display: flex; flex-direction: column; - align-items: center; + /* align-items: center; */ background-color: #e7efff; color: #000000; } #popup_header { display: flex; - flex-direction: row; align-items: center; - justify-content: center; + justify-content: space-around; margin: 1em; } #popup_header > img { margin: 10px; + width: 75px; + height: auto; filter: drop-shadow(0 0 7px #1f283f); } @@ -36,30 +37,80 @@ body { } #header_content > #main_title { - font-size: 7vw; + font-size: 6vw; font-weight: 600; } #header_content > #sub_title { - font-size: 5vw; + font-size: 4vw; font-weight: 400; font-style: italic; } +#options_page { + margin: 10px; + padding: 10px; + font-size: 3vw; + font-weight: 700; + background-color: #000e24; + color: #ffffff; + border: none; + border-radius: 5px; + cursor: pointer; +} + #mode_button { width: 30vw; margin: 15px; padding: 15px; font-size: 25px; font-weight: 700; + background-color: #e7efff; color: #1f283f; border: none; - border-radius: 10px; + border-radius: 5px; cursor: pointer; + align-self: center; } -.random { - background-color: #f95050; - color: #00d660; +.chill_mode_background { + background: rgb(110, 231, 183); + background: radial-gradient( + circle, + rgba(110, 231, 183, 1) 0%, + rgba(52, 211, 153, 1) 25%, + rgba(16, 185, 129, 1) 50%, + rgba(5, 150, 105, 1) 100% + ); + color: #000000; +} +.work_mode_background { + background: rgb(248, 113, 113); + background: radial-gradient( + circle, + rgba(248, 113, 113, 1) 0%, + rgba(248, 113, 113, 1) 25%, + rgba(239, 68, 68, 1) 75%, + rgba(239, 68, 68, 1) 100% + ); } +#quote_section { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-size: 1.5em; + text-align: center; + background-color: #000e24; + color: #e7efff; + border-radius: 15px 15px 0 0; +} + +.quote { + padding: 1em; +} + +.author { + font-weight: 700; +} diff --git a/src/popup/popup.html b/src/popup/popup.html index 2364ec6..6f20053 100644 --- a/src/popup/popup.html +++ b/src/popup/popup.html @@ -11,8 +11,10 @@ Back to work Get shit done ☑️ + +
    diff --git a/src/popup/popup.js b/src/popup/popup.js index 15ff4a7..80a176f 100644 --- a/src/popup/popup.js +++ b/src/popup/popup.js @@ -1,21 +1,20 @@ let modeButton = document.getElementById("mode_button"); - +let optionsPageButton = document.getElementById("options_page"); console.log("Yo bro. From popup.js"); -// Initializing button color as per default mode +// Initializing background color as per default mode chrome.storage.sync.get("mode", ({ mode }) => { console.log("popup.js line 7, mode = ", mode); modeButton.innerHTML = mode; if (mode === "Chill") { - bgColor = "#00d660"; - color = "#000000"; + document.getElementsByTagName("body")[0].className = + "chill_mode_background"; + modeButton.innerHTML = "Chilling..."; } else { - bgColor = "#f95050"; - color = "#ffffff"; + document.getElementsByTagName("body")[0].className = "work_mode_background"; + modeButton.innerHTML = "Working."; } - modeButton.innerHTML = mode; - modeButton.style.backgroundColor = bgColor; - modeButton.style.color = color; + // modeButton.innerHTML = mode; console.log("Default mode was: ", mode); }); @@ -24,8 +23,9 @@ function changeMode() { chrome.storage.sync.get("mode", ({ mode }) => { if (mode === "Chill") { mode = "Work"; - bgColor = "#f95050"; - color = "#ffffff"; + modeButton.innerHTML = "Working."; + document.getElementsByTagName("body")[0].className = + "work_mode_background"; console.log("Mode was 'Chill'. Now setting to 'Work'."); chrome.storage.sync.get("blockedWebsites", ({ blockedWebsites }) => { console.log("The following websites shall be blocked."); @@ -57,8 +57,9 @@ function changeMode() { }); } else { mode = "Chill"; - bgColor = "#00d660"; - color = "#000000"; + modeButton.innerHTML = "Chilling..."; + document.getElementsByTagName("body")[0].className = + "chill_mode_background"; console.log("Mode was 'Work'. Now setting to 'Chill'."); chrome.declarativeNetRequest.getDynamicRules((rules) => { console.log( @@ -81,10 +82,41 @@ function changeMode() { }); } chrome.storage.sync.set({ mode }); - modeButton.innerHTML = mode; - modeButton.style.backgroundColor = bgColor; - modeButton.style.color = color; }); } +let openOptionsPage = () => { + console.log("Opening options page"); + chrome.tabs.create({ + url: chrome.runtime.getURL("options/options.html"), + }); +}; + +// Note to self: Refactor this with a better approach using