Browse Source

working on extension ui

Front 3 years ago
parent
commit
36dffffff9
3 changed files with 212 additions and 0 deletions
  1. 46 0
      temp/index.html
  2. 107 0
      temp/popup.css
  3. 59 0
      temp/popup.js

+ 46 - 0
temp/index.html

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<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">
+        <label class="switch">
+            <input type="checkbox" id="disable_ratio_bar" />
+            <span class="slider" />
+            <span class="switchLabel">Disable ratio bar</span>
+        </label><br>
+
+        <label class="switch">
+            <input type="checkbox" id="disable_api_unlisted" />
+            <span class="slider" />
+            <span class="switchLabel">Disable using the API for unlisted videos</span>
+        </label><br>
+
+
+    </div>
+
+</body>
+<script src="popup.js"></script>
+
+</html>

+ 107 - 0
temp/popup.css

@@ -0,0 +1,107 @@
+/* Variables */
+:root {
+    --primary: #ff6666;
+    --accent: #ffaaaa;
+
+    --background: #111;
+    --secondary: #272727;
+    --lightGrey: #999;
+    --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 {
+    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%);
+}
+
+#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 */
+}
+
+#ratio_bar_colour {
+    border: none;
+    outline: none;
+    background: none;
+}
+
+/*   Switches   */
+.switch {
+    position: relative;
+    display: inline-block;
+    width: 30px;
+    height: 17px;
+    margin-bottom: 0.5em;
+}
+
+.switch input {
+    display: none;
+}
+
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: var(--secondary);
+    transition: .4s;
+    border-radius: 34px;
+}
+
+.slider:before {
+    position: absolute;
+    content: '';
+    height: 13px;
+    width: 13px;
+    left: 2px;
+    bottom: 2px;
+    background: var(--lightGrey);
+    transition: .4s;
+    border-radius: 50%;
+}
+
+input:checked+.slider {
+    background: var(--accent);
+}
+
+input:checked+.slider:before {
+    transform: translateX(13px);
+    background: var(--primary);
+}
+
+.switchLabel {
+    width: 250px !important;
+    transform: translateX(35px);
+    display: inline-block;
+}

+ 59 - 0
temp/popup.js

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