diff options
author | Nikita Krupin <krupin.nikita0110@gmail.com> | 2021-12-17 00:43:23 +0300 |
---|---|---|
committer | Nikita Krupin <krupin.nikita0110@gmail.com> | 2022-01-05 22:38:17 +0300 |
commit | aed075646eea01e606e01415e45ead6831be6895 (patch) | |
tree | 8f83f34c533330254eac907cfb5040a0c97a89e0 | |
parent | a537f465c8921a2599920ce3c4b5a71bbfa8d18b (diff) |
settings menu UI change, rebase to latest
-rw-r--r-- | Extensions/combined/popup.css | 32 | ||||
-rw-r--r-- | Extensions/combined/popup.html | 13 | ||||
-rw-r--r-- | Extensions/combined/popup.js | 11 |
3 files changed, 50 insertions, 6 deletions
diff --git a/Extensions/combined/popup.css b/Extensions/combined/popup.css index 757692d..8aae769 100644 --- a/Extensions/combined/popup.css +++ b/Extensions/combined/popup.css @@ -5,7 +5,7 @@ --background: #111; --secondary: #272727; - --tertiary: #333333; + --tertiary: #424242; --lightGrey: #999; --white: #fff; } @@ -43,12 +43,36 @@ button:hover { } #advancedToggle { - margin-top: 1em; - margin-bottom: 2em; + position: fixed; + background: none; + box-shadow: none; + color: var(--lightGrey); + top: 22px; right: 22px; + padding: 2px; + z-index: 69; + height: 2rem; + width: 2rem; +} + +#advancedToggle:hover { + color: var(--white); + transform: rotate(-90deg); +} + +#advancedToggle:active { + transform: scale(1.5); } #advancedSettings { - display: none; + opacity: 0; + transition-duration: .15s; + transition-timing-function: ease-in-out; + transform: scale(1.1); + position: fixed; + background: var(--background); + top: 4px; right: 9px; + width: calc(100% - 55px); + height: calc(100% - 48px); border: 2px solid var(--secondary); border-radius: 0.5rem; padding: 1rem; diff --git a/Extensions/combined/popup.html b/Extensions/combined/popup.html index 130f557..a2d3e7f 100644 --- a/Extensions/combined/popup.html +++ b/Extensions/combined/popup.html @@ -25,6 +25,9 @@ <p>API Status: <span id="status"></span></p> <p>by Dmitrii Selivanov & Community</p> <p id="ext-version"></p> + <svg width="48" viewBox="0 0 24 24"><path d="M14.9 3H6c-.9 0-1.6.5-1.9 1.2l-3 7c-.1.3-.1.5-.1.7v2c0 1.1.9 2 2 2h6.3l-.9 4.5c-.1.5 0 1 .4 1.4l1.1 1.1 6.5-6.6c.4-.4.6-.9.6-1.4V5c-.1-1.1-1-2-2.1-2zm7.4 12.8h-2.9c-.4 0-.7-.3-.7-.7V3.9c0-.4.3-.7.7-.7h2.9c.4 0 .7.3.7.7V15c0 .4-.3.8-.7.8z" fill="red"/><path d="m8 12.5 5.1-2.9L8 6.7v5.8z" fill="#fff"/></svg> + <h1 style="margin-bottom: 0;">Return YouTube Dislike</h1> + <p style="color: var(--lightGrey); margin-top: .25rem;">by Dmitrii Selivanov & Community</p> <button id="link_website">Website</button> <button id="link_github">GitHub</button> @@ -38,8 +41,14 @@ <br /> <button id="advancedToggle">Show Settings</button> <br /> + <br> + </center> + <button id="advancedToggle"> + <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"><rect fill="none" height="24" width="24"/><path d="M19.5,12c0-0.23-0.01-0.45-0.03-0.68l1.86-1.41c0.4-0.3,0.51-0.86,0.26-1.3l-1.87-3.23c-0.25-0.44-0.79-0.62-1.25-0.42 l-2.15,0.91c-0.37-0.26-0.76-0.49-1.17-0.68l-0.29-2.31C14.8,2.38,14.37,2,13.87,2h-3.73C9.63,2,9.2,2.38,9.14,2.88L8.85,5.19 c-0.41,0.19-0.8,0.42-1.17,0.68L5.53,4.96c-0.46-0.2-1-0.02-1.25,0.42L2.41,8.62c-0.25,0.44-0.14,0.99,0.26,1.3l1.86,1.41 C4.51,11.55,4.5,11.77,4.5,12s0.01,0.45,0.03,0.68l-1.86,1.41c-0.4,0.3-0.51,0.86-0.26,1.3l1.87,3.23c0.25,0.44,0.79,0.62,1.25,0.42 l2.15-0.91c0.37,0.26,0.76,0.49,1.17,0.68l0.29,2.31C9.2,21.62,9.63,22,10.13,22h3.73c0.5,0,0.93-0.38,0.99-0.88l0.29-2.31 c0.41-0.19,0.8-0.42,1.17-0.68l2.15,0.91c0.46,0.2,1,0.02,1.25-0.42l1.87-3.23c0.25-0.44,0.14-0.99-0.26-1.3l-1.86-1.41 C19.49,12.45,19.5,12.23,19.5,12z M12.04,15.5c-1.93,0-3.5-1.57-3.5-3.5s1.57-3.5,3.5-3.5s3.5,1.57,3.5,3.5S13.97,15.5,12.04,15.5z"/></svg> + </button> + <fieldset id="advancedSettings"> <legend id="advancedLegend">Settings</legend> @@ -49,12 +58,16 @@ <span class="switchLabel">Disable like/dislike submission</span> </label> <br /> + <span class="switchLabel">Green/Red Ratio Bar</span> </label + ><br /> <!-- <label class="switch"> <input type="checkbox" id="disable_api_unlisted" /> <span class="slider" /> <span class="switchLabel">Lorem ipsum dolor sit amet</span> </label ><br /> --> + <span class="switchLabel">5-star Rating Bar</span> </label + ><br /> </fieldset> </body> <script src="popup.js"></script> diff --git a/Extensions/combined/popup.js b/Extensions/combined/popup.js index 1e3264a..6bab5ee 100644 --- a/Extensions/combined/popup.js +++ b/Extensions/combined/popup.js @@ -5,6 +5,9 @@ const config = { hideAdvancedMessage: "Hide Settings", disableVoteSubmission: false, + showAdvancedMessage: '<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"><rect fill="none" height="24" width="24"/><path d="M19.5,12c0-0.23-0.01-0.45-0.03-0.68l1.86-1.41c0.4-0.3,0.51-0.86,0.26-1.3l-1.87-3.23c-0.25-0.44-0.79-0.62-1.25-0.42 l-2.15,0.91c-0.37-0.26-0.76-0.49-1.17-0.68l-0.29-2.31C14.8,2.38,14.37,2,13.87,2h-3.73C9.63,2,9.2,2.38,9.14,2.88L8.85,5.19 c-0.41,0.19-0.8,0.42-1.17,0.68L5.53,4.96c-0.46-0.2-1-0.02-1.25,0.42L2.41,8.62c-0.25,0.44-0.14,0.99,0.26,1.3l1.86,1.41 C4.51,11.55,4.5,11.77,4.5,12s0.01,0.45,0.03,0.68l-1.86,1.41c-0.4,0.3-0.51,0.86-0.26,1.3l1.87,3.23c0.25,0.44,0.79,0.62,1.25,0.42 l2.15-0.91c0.37,0.26,0.76,0.49,1.17,0.68l0.29,2.31C9.2,21.62,9.63,22,10.13,22h3.73c0.5,0,0.93-0.38,0.99-0.88l0.29-2.31 c0.41-0.19,0.8-0.42,1.17-0.68l2.15,0.91c0.46,0.2,1,0.02,1.25-0.42l1.87-3.23c0.25-0.44,0.14-0.99-0.26-1.3l-1.86-1.41 C19.49,12.45,19.5,12.23,19.5,12z M12.04,15.5c-1.93,0-3.5-1.57-3.5-3.5s1.57-3.5,3.5-3.5s3.5,1.57,3.5,3.5S13.97,15.5,12.04,15.5z"/></svg>', + hideAdvancedMessage: '<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#f44"><rect fill="none" height="24" width="24"/><path d="M3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5c0-1.1-0.9-2-2-2H5C3.9,3,3,3.9,3,5z M16.3,16.29L16.3,16.29 c-0.39,0.39-1.02,0.39-1.41,0L12,13.41l-2.89,2.89c-0.39,0.39-1.02,0.39-1.41,0l0,0c-0.39-0.39-0.39-1.02,0-1.41L10.59,12L7.7,9.11 c-0.39-0.39-0.39-1.02,0-1.41l0,0c0.39-0.39,1.02-0.39,1.41,0L12,10.59l2.89-2.88c0.39-0.39,1.02-0.39,1.41,0l0,0 c0.39,0.39,0.39,1.02,0,1.41L13.41,12l2.89,2.88C16.68,15.27,16.68,15.91,16.3,16.29z"/></svg>', + links: { website: "https://returnyoutubedislike.com", github: "https://github.com/Anarios/return-youtube-dislike", @@ -46,11 +49,15 @@ const advancedToggle = document.getElementById("advancedToggle"); advancedToggle.addEventListener("click", () => { const adv = document.getElementById("advancedSettings"); if (config.advanced) { - adv.style.display = "none"; + adv.style.transform = "scale(1.1)"; + adv.style.pointerEvents = "none"; + adv.style.opacity = "0"; advancedToggle.innerHTML = config.showAdvancedMessage; config.advanced = false; } else { - adv.style.display = "block"; + adv.style.transform = "scale(1)"; + adv.style.pointerEvents = "auto"; + adv.style.opacity = "1"; advancedToggle.innerHTML = config.hideAdvancedMessage; config.advanced = true; } |