Merge pull request #12 from tuckerchapin/settings-inside

Settings inside

Author: tuckerchapin

dev/docs/notes.md

@@ -9,7 +9,7 @@ color: #302e42;
 color: #474658;
 color: #1b1a26;
 
-title: #f9f9f9
+title: #f9f9fa
 description: #b0aebb
 
 yellow: #fd0

dev/source images/BetterVRV plus no bg.svg

@@ -3,7 +3,7 @@ chrome.runtime.onInstalled.addListener(
         if(details.reason == "install"){
             chrome.storage.sync.get({"firstInstall": true}, (firstInstall) => {
                 if (firstInstall) {
-                    alert(`Thanks for installing BetterVRV!\n\nThe default controls are similar to YouTube's keyboard shortcuts, but you can customize the controls (and the rest of this extension) to your liking in the options page.\n\nDo note that content blockers like uBlock Origin and AdBlock may impact BetterVRV's functionality. Consider disabling these on https://vrv.co/.`);
+                    alert(`Thanks for installing BetterVRV!\n\nThe default controls are similar to YouTube's keyboard shortcuts, but you can customize the controls (and the rest of this extension) to your liking in the options page.\n\nDo note that content blockers like uBlock Origin or AdBlock may impact BetterVRV's functionality. Consider disabling these on https://vrv.co/.`);
 
                     chrome.storage.sync.set({"firstInstall": false});
                 }

public/background/onInstall.js

@@ -0,0 +1,14 @@
+.bvrv-dropdown-item {
+    margin-top: 0 !important;
+    padding-top: 20px !important;
+    padding-bottom: 20px !important;
+    border-bottom: .125rem solid #474658;
+}
+
+.bvrv-dropdown-icon {
+    opacity: .7 !important;
+}
+
+    .bvrv-dropdown-item:hover .bvrv-dropdown-icon {
+        opacity: 1 !important;
+    }

public/content_scripts/css/vrvStyling.css

@@ -12,5 +12,41 @@ chrome.storage.sync.get(
         if (options.showWatchedThumbnails) {
             insertCSS("content_scripts/css/showWatchedThumbnails.css");
         }
+
+        addSettingsDropdown();
     }
 );
+// #b0aebb
+// #f9f9fa //rgba(249, 249, 250, 1)
+function addSettingsDropdown() {
+    checkExist = setInterval(
+        () => {
+            let dropdownItems = document.getElementsByClassName("erc-user-dropdown-item");
+            console.log(chrome.extension.getURL("index.html"));
+            if (dropdownItems.length === 8) {
+                clearInterval(checkExist);
+
+                dropdownItems[0].insertAdjacentHTML(
+                    'beforebegin',
+                    `
+                    <a
+                        href=${chrome.extension.getURL("index.html")}
+                        target="_blank"
+                        tabindex="0"
+                        class="bvrv-dropdown-item erc-user-dropdown-item"
+                    >
+                        <img
+                            class="bvrv-dropdown-icon user-dropdown-icon" src=${chrome.extension.getURL("images/vrv_dropdown.svg")}
+                        />
+                        <div class="user-dropdown-info">
+                            <h3 class="user-dropdown-title">BetterVRV Settings</h3>
+                            <p class="user-dropdown-description">Edit defaults, keybinds, and more.</p>
+                        </div>
+                    </a>
+                    `
+                );
+            }
+        },
+        100
+    );
+}

public/content_scripts/vrvStyling.js

@@ -21,6 +21,9 @@
             "matches": [
                 "https://vrv.co/*"
             ],
+            "css": [
+                "content_scripts/css/vrvStyling.css"
+            ],
             "js": [
                 "content_scripts/lib.js",
                 "content_scripts/vrvStyling.js"
@@ -45,7 +48,8 @@
     "web_accessible_resources": [
         "images/*",
         "fonts/*",
-        "content_scripts/css/*"
+        "content_scripts/css/*",
+        "index.html"
     ],
     "content_security_policy": "script-src 'self' 'sha256-GgRxrVOKNdB4LrRsVPDSbzvfdV4UqglmviH9GoBJ5jk='; object-src 'self'"
 }

public/images/vrv_dropdown.svg

@@ -81,7 +81,19 @@ class Options extends Component {
             <div>
 
                 <div id="header">
-                    <img id="logo" src="../images/logotype.png" alt="logo"/>
+                    <img
+                        id="logo"
+                        className="header-img"
+                        src="images/logotype.png"
+                        alt="logo"
+                    />
+                    <img
+                        id="vrv-logo"
+                        className="header-img"
+                        src="images/vrv_logo.svg"
+                        alt="vrv-logo"
+                        onClick={() => {window.location.href = "https://vrv.co"}}
+                    />
                 </div>
 
                 <div id="container">
@@ -305,9 +317,9 @@ class Options extends Component {
                 </div>
 
                 <div id="footer">
-                    <div className="footer-entry">
+                    {/* <div className="footer-entry">
                         Issues? Suggestions? Complaints? <a href="mailto:tuckerchapin@gmail.com">Let me know.</a>
-                    </div>
+                    </div> */}
                     <div className="footer-entry">
                         <a href="https://github.com/tuckerchapin/BetterVRV/">Github.</a>
                     </div>

public/images/vrv_logo.svg

@@ -8,7 +8,7 @@
     font-weight: 500;
     line-height: 1.43;
     text-rendering: optimizeLegibility;
-    color: #f9f9f9;
+    color: #f9f9fa;
     text-transform: uppercase;
     opacity: inherit;
 }