Merge pull request #219 from salcido/dark-theme-update

Dark Theme Update

css/new-release-page-fixes.scss

@@ -1,45 +1,4 @@
 #app {
-  // header nav line height for hover states
-  div[class*="header_"] {
-    div[class*="content_"] {
-      line-height: 12px !important;
-    }
-  }
-
-  div[class*="profile_"] {
-
-    // even out the spacing at the bottom of the profile menu
-    nav[class*="dropdown_"] {
-      padding-bottom: .3rem !important;
-    }
-
-    a[class*="headericon_"] {
-      font-size: 13px !important;
-      margin-right: 0 !important;
-      padding-right: .75rem !important;
-
-      svg {
-        vertical-align: middle !important;
-        padding-bottom: 4px !important;
-      }
-    }
-  }
-
-  // Credits
-  #Credits {
-    span[class*="fallback_"] {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-  }
-
-  #release-header {
-    h1 {
-      margin-bottom: .5rem !important;
-    }
-  }
-
   #release-stats {
     div[class*="items_"] h4 {
       width: auto !important;
@@ -50,7 +9,8 @@
   }
 
   // in Collection box
-  div[class*="collection_"] {
+  div[class*="collection_"],
+  div[class*="wantlist_"] {
     font-size: 14px !important;
     margin: 10px 5px;
 
@@ -75,11 +35,6 @@
     }
   }
 
-  // In Wantlist box
-  div[class*="wantlist_"] {
-    margin-top: 10px !important;
-  }
-
   // make an exception for the share button icon
   div[class*="ratings_"] + div[class*="wrapper_"] button svg {
     margin-right: 2px !important;
@@ -94,7 +49,7 @@
     button[class*="remove_"] {
       height: auto !important;
       margin-top: -2px !important;
-      margin-left: .3em !important;
+      margin-left: 0.3em !important;
       svg {
         height: 1.2em !important;
         top: 0 !important;
@@ -110,7 +65,7 @@
 
     div[class*="buttons_"] {
       button[class*="button_"] svg[class*="icon_"] {
-        margin-right: .5rem !important;
+        margin-right: 0.5rem !important;
       }
     }
   }
@@ -130,13 +85,12 @@
   // reviews
   #release-reviews {
     div[class*="review_"] {
-
       div[class*="header_"] {
         // margin-bottom: .2rem !important;
       }
 
       div[class*="content_"]:first-of-type {
-        margin-left: .4rem !important;
+        margin-left: 0.4rem !important;
       }
 
       div[class*="content_"] {
@@ -145,21 +99,21 @@
           padding: 0;
         }
         div[class*="content_"] {
-          margin: .3rem 0 !important;
+          margin: 0.3rem 0 !important;
         }
       }
 
       div[class*="edited_"] {
-        margin-top: .1rem !important;
-        margin-bottom: .2rem !important;
+        margin-top: 0.1rem !important;
+        margin-bottom: 0.2rem !important;
         font-size: 12px !important;
         text-transform: lowercase;
       }
 
       span[class*="content_"] {
         display: block !important;
         margin-top: 0 !important;
-        margin-bottom: .3rem !important;
+        margin-bottom: 0.3rem !important;
         line-height: 1.3rem !important;
         max-width: 645px !important;
       }
@@ -176,12 +130,12 @@
 
       // review text block
       div[class*="markup_"] {
-        margin-top: .25rem;
+        margin-top: 0.25rem;
       }
 
       // reply / helpful buttons
       div[class*="markup_"] + div {
-        margin-top: .5rem;
+        margin-top: 0.5rem;
 
         button {
           margin-right: 1rem;
@@ -190,8 +144,8 @@
 
       // Star ratings on release and reviews
       span[class*="rating_"] {
-        margin-top: .2rem !important;
-          svg {
+        margin-top: 0.2rem !important;
+        svg {
           margin: 0 2px 0 0 !important;
         }
       }
@@ -205,7 +159,7 @@
 
   #site_footer_wrap > div[class*="content_"] {
     ul li {
-      padding-top: .5rem !important;
+      padding-top: 0.5rem !important;
     }
   }
 }

css/popup/learn.css

@@ -394,6 +394,15 @@ h2.highlight {
   font-weight: bold;
 }
 
+.themes li {
+  list-style: none;
+  margin-bottom: 1rem;
+}
+
+.themes li b {
+  font-style: normal;
+}
+
 
 .mint {
   color: #00B4DB !important;

css/popup/popup.scss

@@ -680,6 +680,12 @@ input[type="checkbox"]:focus {
   z-index: 10;
 }
 
+#themeSelect {
+  margin-left: 9px;
+  margin-top: 1rem;
+  z-index: 10;
+}
+
 .status,
 .condition-status {
   position: absolute;

css/suggested-prices.css

@@ -24,9 +24,7 @@
   display: block;
 }
 
-.red,
-.de-dark-theme .red {
-  color: #BF3A38 !important;
+.red {
   font-weight: bold;
 }
 

html/learn.html

@@ -270,7 +270,14 @@ <h2 id="currencyConverter">Currency Converter</h2>
 
     <div class="feature-block">
       <h2 id="darkTheme">Dark Theme</h2>
-      <p>This makes Discogs much easier on the eyes at night... or all the time. Completely re-themed from top to bottom! The Dark Theme does not work on Discogs subdomains (e.g.: blog.discogs.com, data.discogs.com, etc...)</p>
+      <p>This makes Discogs much easier on the eyes at night... or all the time. Completely re-themed from top to bottom! There are currently three differen themes to choose from: Meteor, Gravity, and Nebula.</p>
+      <ul class="themes">
+        <li><b>Meteor:</b> This is the original Dark Theme that Discogs Enhancer launched with.</li>
+        <li><b>Gravity:</b> A darker version of the original Dark Theme.</li>
+        <li><b>Nebula:</b> The darkest of the three themes.</li>
+      </ul>
+
+      <p><em>Note:</em> The Dark Theme does not work on Discogs subdomains (e.g.: blog.discogs.com, data.discogs.com, etc...)</p>
     </div>
 
     <!-- Demand Index -->

html/popup.html

@@ -206,6 +206,11 @@ <h2>&#x1F44B; Heads up!</h2>
     <div class="toggle-group">
       <p class="label">Dark theme</p>
       <div class="meta hide">Dark Theme Colors Skin</div>
+      <select id="themeSelect">
+        <option value="" selected>Meteor</option>
+        <option value="gravity">Gravity</option>
+        <option value="nebula">Nebula</option>
+      </select>
       <div class="onoffswitch">
         <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="toggleDarkTheme" checked>
         <label class="onoffswitch-label" for="toggleDarkTheme">

js/extension/background.js

@@ -26,6 +26,7 @@ prefs = {
   commentScanner: false,
   converter: true,
   darkTheme: false,
+  darkThemeVariant: '',
   demandIndex: false,
   editingNotepad: false,
   everlastingCollection: false,

js/extension/features/comment-scanner.js

@@ -144,11 +144,6 @@ rl.ready(() => {
       left: calc(50% - 160px);
     }
 
-    .de-dark-theme #dashboard_list_${existingId} .de-comment-overlay {
-      background: #333333f0 !important;
-      box-shadow: 0px 0px 0px 1px rgb(0 0 0 / 70%) inset;
-    }
-
     .loader {
       text-align: center;
       margin: 1rem auto;

js/extension/features/everlasting-collection-notes.js

@@ -107,7 +107,9 @@ function saveNotes(event) {
       folderId, // TODO: what is this value for?
       val = event.target.closest('.notes_field').querySelector('.notes_textarea').value,
       notes = event.target.closest('.notes_field').querySelector('.notes_textarea').value,
+      releaseId = event.target.closest('.notes_field').dataset.id,
       notesObj = {
+        release_id: releaseId,
         coll_id: colId,
         field_id: fieldId,
         folder_id: folderId || null,
@@ -130,7 +132,7 @@ rl.ready(() => {
       let target = event.target;
 
       // cancel button
-      if ( target.id === 'notes_edit_cancel' ) {
+      if ( target.className.includes('notes_edit_cancel') ) {
         return cancelNotes(event);
       }
       // edit/add notes
@@ -140,7 +142,7 @@ rl.ready(() => {
       // save notes
       if ( target.parentElement.previousElementSibling
            && target.parentElement.previousElementSibling.closest('.de-notes-show')
-           && target.id == 'notes_edit_save') {
+           && target.className.includes('notes_edit_save') ) {
         return saveNotes(event);
       }
     });

js/extension/features/filter-shipping-country.js

@@ -66,7 +66,13 @@ rl.ready(() => {
   // ========================================================
   let rules = `
       .de-hide-country {
-        display: none;
+        clip: rect(0 0 0 0);
+        clip-path: inset(50%);
+        height: 1px;
+        overflow: hidden;
+        position: absolute;
+        white-space: nowrap;
+        width: 1px;
       }`;
 
   // ========================================================

js/extension/features/force-dashboard.js

@@ -13,6 +13,7 @@ rl.ready(() => {
   if ( document.querySelector('#header_logo') ) {
     // normal release page
     document.querySelector('#header_logo').href = '/my';
+    document.querySelector('#header_logo').title = 'Go to Dashboard';
     // Hide Dashboard Icon
     let dashboardIcons = document.querySelectorAll('.icon-dashboard');
     dashboardIcons.forEach(icon => {
@@ -21,6 +22,7 @@ rl.ready(() => {
 
   } else if ( document.querySelector('header[class*="_header_"]') ) {
       document.querySelector('a[class*="_home_"]').href = '/my';
+      document.querySelector('a[class*="_home_"]').title = 'Go to Dashboard';
       // Hide Dashboard Icon
       let dashboardIcons = document.querySelectorAll('nav[class*="_user_"] a[href="/my"]');
       dashboardIcons.forEach(icon => {
@@ -32,6 +34,7 @@ rl.ready(() => {
 
       rl.waitForElement(selector).then(() => {
         document.querySelector(selector).href = '/my';
+        document.querySelector(selector).title = 'Go to Dashboard';
         // Hide Dashboard Icon
         let dashboardIcon = document.querySelector('nav[class*="profile_"] a[href^="/my"]');
         dashboardIcon.style.display = 'none';

js/extension/user-preferences.js

@@ -220,6 +220,8 @@ chrome.storage.sync.get('prefs', result => {
   prefs = result.prefs;
   // Disable the Dark Theme
   if (!prefs.darkTheme) document.documentElement.classList.remove('de-dark-theme');
+  // Set theme variant
+  if (prefs.darkThemeVariant) document.documentElement.classList.add(`theme-${prefs.darkThemeVariant}`);
 })
 
 // Resource Library

js/popup/change-log.js

@@ -1,5 +1,24 @@
 module.exports = {
   current: [
+    {
+      version: '3.2.0',
+      features: [
+        {
+          name: 'More Dark Themes',
+          description: 'Three dark themes are now available! Meteor, Gravity, and Nebula. Check them out and let me know what you think!',
+          link: '#darkTheme'
+        },
+      ],
+      updates: [
+        {
+          name: 'Bug Fix',
+          description: 'Fixed an issue where the "Has x more items I want" links in the Marketplace might not show up when using the Filter By Country feature.'
+        },
+      ],
+      thanks: [],
+    },
+  ],
+  previous: [
     {
       version: '3.1.1',
       features: [
@@ -17,8 +36,6 @@ module.exports = {
       ],
       thanks: ['Massive thank you to Jason F. for the donation! I really apprecaite it.'],
     },
-  ],
-  previous: [
     {
       version: '3.1.0',
       features: [

js/popup/popup-logic/features/dark-theme.js

@@ -22,3 +22,34 @@ export async function useDarkTheme(event) {
     files: ['js/extension/features/toggle-dark-theme.js']
   }, () => { applySave(null, event) });
 }
+
+/**
+ * Sets the theme's classname to the root documentElement
+ * @method selectTheme
+ * @param {string} name - The name of the theme to apply
+ */
+function selectTheme(name) {
+  let prefix = "theme-",
+      classes = document.documentElement.className.split(' ').filter(c => !c.startsWith(prefix));
+
+  document.documentElement.className = classes.join(' ').trim();
+  document.documentElement.classList.add(`${prefix}${name}`);
+}
+
+/**
+ * Sets a specific dark theme
+ * @method   setDarkTheme
+ * @param    {Object}  event [The event object]
+ * @return   {undefined}
+ */
+export async function setDarkTheme(event) {
+
+  let tabId = await getTabId(),
+      select = document.getElementById('themeSelect')
+
+  chrome.scripting.executeScript({
+    target: {tabId: tabId},
+    func: selectTheme,
+    args: [select.value]
+  }, () => { applySave(null, event) });
+}