Преглед на файлове

Merge pull request #70 from Frontesque/main

Redesigned Extension UI
Dmitrii Selivanov преди 3 години
родител
ревизия
5e4ca1e21e

+ 38 - 9
Extensions/chrome/popup.css

@@ -1,15 +1,44 @@
+/* Variables */
+:root {
+    --background: #111;
+    --primary: #ff4444;
+    --secondary: #272727;
+    --white: #fff;
+}
+
+/* Window Styling */
+html,body {
+    background-color: var(--background);
+    color: var(--white);
+    min-width: 300px;
+    padding: 0.5em;
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 14px;
+}
+
+h1 {
+    font-size: 26px;
+}
+
 button {
-    height: 30px;
-    width: 30px;
-    outline: none;
-    margin: 10px;
+    color: var(--white);
+    background: var(--secondary);
+    cursor: pointer;
+    padding: 5px 16px;
     border: none;
-    border-radius: 2px;
+    border-radius: 4px;
+    font-weight: 500;
+    box-shadow: 0 2px 4px -1px rgb(0 0 0 / 20%), 0 4px 5px 0 rgb(0 0 0 / 14%), 0 1px 10px 0 rgb(0 0 0 / 12%);
 }
 
-button.current {
-    box-shadow: 0 0 0 2px white,
-    0 0 0 4px black;
+#advancedToggle {
+    margin-top: 1em;
+    margin-bottom: 2em;
 }
 
-
+#advancedSettings {
+    display: none;
+    border: 2px solid var(--secondary);
+    border-radius: 4px;
+    padding: 0.5em;
+}

+ 30 - 10
Extensions/chrome/popup.html

@@ -1,12 +1,32 @@
 <!DOCTYPE html>
-<html>
-<head>
-  <link rel="stylesheet" href="button.css">
-</head>
-<body>
-<!--<button id="login">Login</button>-->
-<!--<button id="log_off">Log off</button>-->
-<!--<script src="popup.js"></script>-->
-<p>Returns ability to see dislikes</p>
-</body>
+<html lang="en">
+  <head>
+    <meta content="text/html; charset=utf-8">
+    <title>Return Youtube Dislike</title>
+    <link rel="stylesheet" href="popup.css">
+  </head>
+  <body>
+
+
+    <center>
+      <img src="icons/icon48.png" alt="Logo" />
+      <h1>Return Youtube Dislike</h1>
+      <p>by Dmitrii Selivanov & Community</p>
+
+      <button id="link_website">Website</button>
+      <button id="link_github">Github</button>
+      <button id="link_discord">Discord</button>
+
+      <br>
+      <button id="advancedToggle">Show Advanced</button>
+
+    </center>
+
+    <div id="advancedSettings">
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo laboriosam, veritatis sint dolores assumenda harum quidem molestiae ad repellendus aliquid?
+    </div>
+
+
+  </body>
+  <script src="popup.js"></script>
 </html>

+ 45 - 1
Extensions/chrome/popup.js

@@ -1,4 +1,47 @@
-/* popup-script.js */
+/*   Config   */
+const config = {
+  advanced: false,
+  showAdvancedMessage: "Show Advanced",
+  hideAdvancedMessage: "Hide Advanced",
+
+  links: {
+    website: 'https://returnyoutubedislike.com',
+    github: 'https://github.com/Anarios/return-youtube-dislike',
+    discord: 'https://discord.gg/mYnESY4Md5'
+  },
+};
+
+/*   Links   */
+document.getElementById('link_website').addEventListener('click', () => {
+  chrome.tabs.create({url: config.links.website});
+});
+
+document.getElementById('link_github').addEventListener('click', () => {
+  chrome.tabs.create({url: config.links.github});
+});
+
+document.getElementById('link_discord').addEventListener('click', () => {
+  chrome.tabs.create({url: config.links.discord});
+});
+
+/*   Advanced Toggle   */
+const advancedToggle = document.getElementById('advancedToggle');
+advancedToggle.addEventListener('click', () => {
+  const adv = document.getElementById('advancedSettings');
+  if (config.advanced) {
+    adv.style.display = "none";
+    advancedToggle.innerHTML = config.showAdvancedMessage;
+    config.advanced = false;
+  } else {
+    adv.style.display = "block";
+    advancedToggle.innerHTML = config.hideAdvancedMessage;
+    config.advanced = true;
+  }
+});
+
+
+
+/* popup-script.js 
 document.querySelector('#login')
 .addEventListener('click', function () {
   chrome.runtime.sendMessage({ message: 'get_auth_token' });
@@ -7,3 +50,4 @@ document.querySelector('#login')
 document.querySelector("#log_off").addEventListener("click", function () {
   chrome.runtime.sendMessage({ message: "log_off" });
 });
+*/

BIN
Extensions/chrome/return-youtube-dislike.content-script.zip


BIN
Extensions/firefox/packed.zip


+ 40 - 8
Extensions/firefox/popup.css

@@ -1,13 +1,45 @@
+/* Variables */
+:root {
+    --background: #111;
+    --primary: #ff4444;
+    --secondary: #272727;
+    --white: #fff;
+}
+
+/* Window Styling */
+html,body {
+    background-color: var(--background);
+    color: var(--white);
+    width: 300px;
+    padding: 0.5em;
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 14px;
+}
+
+h1 {
+    font-size: 26px;
+}
+
 button {
-    height: 30px;
-    width: 30px;
-    outline: none;
-    margin: 10px;
+    color: var(--white);
+    background: var(--secondary);
+    cursor: pointer;
+    padding: 5px 16px;
     border: none;
-    border-radius: 2px;
+    border-radius: 4px;
+    font-weight: 500;
+    box-shadow: 0 2px 4px -1px rgb(0 0 0 / 20%), 0 4px 5px 0 rgb(0 0 0 / 14%), 0 1px 10px 0 rgb(0 0 0 / 12%);
 }
 
-button.current {
-    box-shadow: 0 0 0 2px white,
-    0 0 0 4px black;
+#advancedToggle {
+    margin-top: 1em;
+    margin-bottom: 2em;
 }
+
+#advancedSettings {
+    display: none;
+    border: 2px solid var(--secondary);
+    border-radius: 4px;
+    padding: 0.5em;
+    margin-right: 1em; /* FIREFOX ONLY */
+}

+ 30 - 10
Extensions/firefox/popup.html

@@ -1,12 +1,32 @@
 <!DOCTYPE html>
-<html>
-<head>
-  <link rel="stylesheet" href="button.css">
-</head>
-<body>
-<!--<button id="login">Login</button>-->
-<!--<button id="log_off">Log off</button>-->
-<!--<script src="popup.js"></script>-->
-<p>Returns ability to see dislikes</p>
-</body>
+<html lang="en">
+  <head>
+    <meta content="text/html; charset=utf-8">
+    <title>Return Youtube Dislike</title>
+    <link rel="stylesheet" href="popup.css">
+  </head>
+  <body>
+
+
+    <center>
+      <img src="icons/icon48.png" alt="Logo" />
+      <h1>Return Youtube Dislike</h1>
+      <p>by Dmitrii Selivanov & Community</p>
+
+      <button id="link_website">Website</button>
+      <button id="link_github">Github</button>
+      <button id="link_discord">Discord</button>
+
+      <br>
+      <button id="advancedToggle">Show Advanced</button>
+
+    </center>
+
+    <div id="advancedSettings">
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo laboriosam, veritatis sint dolores assumenda harum quidem molestiae ad repellendus aliquid?
+    </div>
+
+
+  </body>
+  <script src="popup.js"></script>
 </html>

+ 47 - 4
Extensions/firefox/popup.js

@@ -1,10 +1,53 @@
-/* popup-script.js */
+/*   Config   */
+const config = {
+  advanced: false,
+  showAdvancedMessage: "Show Advanced",
+  hideAdvancedMessage: "Hide Advanced",
+
+  links: {
+    website: 'https://returnyoutubedislike.com',
+    github: 'https://github.com/Anarios/return-youtube-dislike',
+    discord: 'https://discord.gg/mYnESY4Md5'
+  },
+};
+
+/*   Links   */
+document.getElementById('link_website').addEventListener('click', () => {
+  chrome.tabs.create({url: config.links.website});
+});
+
+document.getElementById('link_github').addEventListener('click', () => {
+  chrome.tabs.create({url: config.links.github});
+});
+
+document.getElementById('link_discord').addEventListener('click', () => {
+  chrome.tabs.create({url: config.links.discord});
+});
+
+/*   Advanced Toggle   */
+const advancedToggle = document.getElementById('advancedToggle');
+advancedToggle.addEventListener('click', () => {
+  const adv = document.getElementById('advancedSettings');
+  if (config.advanced) {
+    adv.style.display = "none";
+    advancedToggle.innerHTML = config.showAdvancedMessage;
+    config.advanced = false;
+  } else {
+    adv.style.display = "block";
+    advancedToggle.innerHTML = config.hideAdvancedMessage;
+    config.advanced = true;
+  }
+});
+
+
+
+/* popup-script.js 
 document.querySelector('#login')
 .addEventListener('click', function () {
   chrome.runtime.sendMessage({ message: 'get_auth_token' });
 });
 
-document.querySelector('#log_off')
-.addEventListener('click', function () {
-  chrome.runtime.sendMessage({ message: 'log_off' });
+document.querySelector("#log_off").addEventListener("click", function () {
+  chrome.runtime.sendMessage({ message: "log_off" });
 });
+*/