Quellcode durchsuchen

:red_circle: Chrome Extension Popup Redesign

Front vor 3 Jahren
Ursprung
Commit
0d0d46e598
3 geänderte Dateien mit 70 neuen und 22 gelöschten Zeilen
  1. 22 11
      Extensions/chrome/popup.css
  2. 22 10
      Extensions/chrome/popup.html
  3. 26 1
      Extensions/chrome/popup.js

+ 22 - 11
Extensions/chrome/popup.css

@@ -1,15 +1,26 @@
-button {
-    height: 30px;
-    width: 30px;
-    outline: none;
-    margin: 10px;
-    border: none;
-    border-radius: 2px;
+/* Variables */
+:root {
+    --background: #111;
+    --primary: #ff4444;
+    --secondary: #272727;
+    --white: #fff;
 }
 
-button.current {
-    box-shadow: 0 0 0 2px white,
-    0 0 0 4px black;
+/* Window Styling */
+html,body {
+    background-color: var(--background);
+    color: var(--white);
+    min-width: 300px;
+    padding: 0.5em;
 }
 
-
+button {
+    color: var(--white);
+    background: var(--secondary);
+    cursor: pointer;
+    padding: 5px 16px;
+    border: none;
+    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%);
+}

+ 22 - 10
Extensions/chrome/popup.html

@@ -1,12 +1,24 @@
 <!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>
+    </center>
+
+
+  </body>
+  <script src="popup.js"></script>
 </html>

+ 26 - 1
Extensions/chrome/popup.js

@@ -1,4 +1,28 @@
-/* popup-script.js */
+/*   Config   */
+const config = {
+  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});
+});
+
+
+
+/* popup-script.js 
 document.querySelector('#login')
 .addEventListener('click', function () {
   chrome.runtime.sendMessage({ message: 'get_auth_token' });
@@ -7,3 +31,4 @@ document.querySelector('#login')
 document.querySelector("#log_off").addEventListener("click", function () {
   chrome.runtime.sendMessage({ message: "log_off" });
 });
+*/