Просмотр исходного кода

:red_circle: Firefox Extension Popup Redesign + Fix bugs on chrome

Front 3 лет назад
Родитель
Сommit
3cfef68bb3

+ 2 - 1
Extensions/chrome/popup.css

@@ -10,8 +10,9 @@
 html,body {
     background-color: var(--background);
     color: var(--white);
-    min-width: 300px;
+    width: 300px;
     padding: 0.5em;
+    font-family: Arial, Helvetica, sans-serif;
 }
 
 button {

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


BIN
Extensions/firefox/firefox.zip


BIN
Extensions/firefox/packed.zip


+ 34 - 8
Extensions/firefox/popup.css

@@ -1,13 +1,39 @@
+/* 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;
+}
+
 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/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" });
 });
+*/