首頁 探索 說明
登入
noah
/
return-youtube-dislike
1
0
複刻 0
檔案 問題管理 0 合併請求 0 Wiki
瀏覽代碼

Merge pull request #70 from Frontesque/main

Redesigned Extension UI
Dmitrii Selivanov 3 年之前
父節點
81facd85eb 4d37e4cd44
當前提交
5e4ca1e21e
共有 8 個文件被更改，包括 230 次插入 和 42 次删除
分割檢視 顯示文件統計
  1. 38 9
      Extensions/chrome/popup.css
  2. 30 10
      Extensions/chrome/popup.html
  3. 45 1
      Extensions/chrome/popup.js
  4. 二進制
      Extensions/chrome/return-youtube-dislike.content-script.zip
  5. 二進制
      Extensions/firefox/packed.zip
  6. 40 8
      Extensions/firefox/popup.css
  7. 30 10
      Extensions/firefox/popup.html
  8. 47 4
      Extensions/firefox/popup.js

+ 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" });
 
 });
 
+*/

二進制
Extensions/chrome/return-youtube-dislike.content-script.zip
查看文件


二進制
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" });
 
 });
 
+*/