Add more banners and logos

m4tx · Mar 4, 2021 · b0a4fc5 · b0a4fc5
1 parent af94f96
commit b0a4fc5
Show file tree

Hide file tree

Showing 10 changed files with 166 additions and 8 deletions.
diff --git a/ext/images/alttcslogo_white.png b/ext/images/alttcslogo_white.png
diff --git a/ext/images/suspicious_satori_banner.png b/ext/images/suspicious_satori_banner.png
diff --git a/ext/images/suspicious_shitori_banner.png b/ext/images/suspicious_shitori_banner.png
diff --git a/ext/images/tcslogo_white.svg b/ext/images/tcslogo_white.svg
diff --git a/ext/images_src/alttcs_white.xcf b/ext/images_src/alttcs_white.xcf
diff --git a/ext/images_src/suspicious_satori_banner.xcf b/ext/images_src/suspicious_satori_banner.xcf
diff --git a/ext/images_src/suspicious_shitori_banner.xcf b/ext/images_src/suspicious_shitori_banner.xcf
diff --git a/ext/js/general.js b/ext/js/general.js
@@ -5,8 +5,12 @@
 
     const BANNER_URL = browser.extension.getURL('images/satori_banner.png');
     const SHITORI_BANNER_URL = browser.extension.getURL('images/shitori_banner.png');
+    const SUSPICIOUS_SATORI_BANNER_URL = browser.extension.getURL('images/suspicious_satori_banner.png');
+    const SUSPICIOUS_SHITORI_BANNER_URL = browser.extension.getURL('images/suspicious_shitori_banner.png');
     const TCS_LOGO_URL = browser.extension.getURL('images/tcslogo.svg');
+    const TCS_LOGO_WHITE_URL = browser.extension.getURL('images/tcslogo_white.svg');
     const ALT_TCS_LOGO_URL = browser.extension.getURL('images/alttcslogo.png');
+    const ALT_TCS_WHITE_LOGO_URL = browser.extension.getURL('images/alttcslogo_white.png');
 
     let storage = browser.storage.sync || browser.storage.local;
 
@@ -15,11 +19,11 @@
         storage.get({
             [CHOSEN_LOGO_PRIMARY_KEY]: DEFAULT_SETTINGS[CHOSEN_LOGO_PRIMARY_KEY]
         }).then(response => {
-            let newLogoUrl = {
+            const newLogoUrl = {
                 satoriPremium: BANNER_URL,
                 shitoriPremium: SHITORI_BANNER_URL,
-                tcs: TCS_LOGO_URL,
-                alternative: ALT_TCS_LOGO_URL,
+                suspiciousSatoriPremium: SUSPICIOUS_SATORI_BANNER_URL,
+                suspiciousShitoriPremium: SUSPICIOUS_SHITORI_BANNER_URL,
             }[response[CHOSEN_LOGO_PRIMARY_KEY]];
             $('img[src="/files/satori_banner.png"]').attr('src', newLogoUrl);
         });
@@ -42,10 +46,16 @@
             if (chosenLogo === 'none') {
                 return;
             }
-            let url = chosenLogo === 'alternative' ?
-                ALT_TCS_LOGO_URL : TCS_LOGO_URL;
-            let logo = $('<img/>').attr('src', url);
-            let div = $('<div id="satoriEnhancementsTCSLogo"/>').append(logo);
+
+            const newLogoUrl = {
+                tcs: TCS_LOGO_URL,
+                tcsWhite: TCS_LOGO_WHITE_URL,
+                alternative: ALT_TCS_LOGO_URL,
+                alternativeWhite: ALT_TCS_WHITE_LOGO_URL,
+            }[chosenLogo];
+
+            const logo = $('<img/>').attr('src', newLogoUrl);
+            const div = $('<div id="satoriEnhancementsTCSLogo"/>').append(logo);
             $('#navigationPanel').after(div);
         });
     }

diff --git a/ext/options.html b/ext/options.html
@@ -43,6 +43,24 @@ <h2>Primary logo</h2>
                    value="shitoriPremium">
         </label>
     </div>
+    <div class="image-chooser-tile">
+        <label>
+            <div class="image-chooser-content bg-dark">
+                <img src="images/suspicious_satori_banner.png"/>
+            </div>
+            <input type="radio" name="primary-logo-chooser"
+                   value="suspiciousSatoriPremium">
+        </label>
+    </div>
+    <div class="image-chooser-tile">
+        <label>
+            <div class="image-chooser-content bg-dark">
+                <img src="images/suspicious_shitori_banner.png"/>
+            </div>
+            <input type="radio" name="primary-logo-chooser"
+                   value="suspiciousShitoriPremium">
+        </label>
+    </div>
 </form>
 
 <h2>Secondary logo</h2>
@@ -70,6 +88,23 @@ <h2>Secondary logo</h2>
                    value="alternative">
         </label>
     </div>
+    <div class="image-chooser-tile">
+        <label>
+            <div class="image-chooser-content bg-dark">
+                <img src="images/tcslogo_white.svg"/>
+            </div>
+            <input type="radio" name="secondary-logo-chooser" value="tcsWhite">
+        </label>
+    </div>
+    <div class="image-chooser-tile">
+        <label>
+            <div class="image-chooser-content bg-dark">
+                <img src="images/alttcslogo_white.png"/>
+            </div>
+            <input type="radio" name="secondary-logo-chooser"
+                   value="alternativeWhite">
+        </label>
+    </div>
 </form>
 
 <h2>Syntax highlighter style</h2>

diff --git a/ext/scss/options.scss b/ext/scss/options.scss
@@ -6,7 +6,7 @@ h2:not(:first-child) {
   & > .image-chooser-tile {
     display: inline-block;
     text-align: center;
-    margin-right: 20px;
+    margin: 0 20px 20px 0;
 
     .image-chooser-content {
       width: 96px;
@@ -17,6 +17,10 @@ h2:not(:first-child) {
       align-items: center;
     }
 
+    .image-chooser-content.bg-dark {
+      background-color: #000;
+    }
+
     .image-chooser-content img {
       max-width: 96px;
       height: auto;