[Themes] Add a toggle for the forum activity dot (#869)

app/javascript/src/javascripts/themes.js

@@ -3,7 +3,7 @@ import LStorage from "./utility/storage";
 
 const Theme = {};
 
-Theme.Values = ["Main", "Extra", "StickyHeader", "Palette", "Navbar", "Gestures"];
+Theme.Values = ["Main", "Extra", "StickyHeader", "ForumNotif", "Palette", "Navbar", "Gestures"];
 
 for (const one of Theme.Values) {
   Object.defineProperty(Theme, one, {

app/javascript/src/javascripts/utility/storage.js

@@ -65,6 +65,9 @@ LStorage.Theme = {
 
   /** @returns {boolean} True if the sticky header is enabled */
   StickyHeader: ["theme-sheader", false],
+
+  /** @returns {boolean} True if the forum notification dot is enabled */
+  ForumNotif: ["theme-forumnotif", false],
 };
 StorageUtils.bootstrapMany(LStorage.Theme);
 

app/javascript/src/styles/common/navigation.scss

@@ -104,22 +104,6 @@ nav.navigation {
       }
 
       &.current a { background-color: themed("color-foreground"); }
-      &.forum-updated {
-        position: relative;
-
-        &::after {
-          content: "";
-          width: 6px;
-          height: 6px;
-          border-radius: 3px;
-
-          background: var(--palette-text-red);
-
-          position: absolute;
-          right: 0.2em;
-          top: 1em;
-        }
-      }
     }
   }
 
@@ -255,6 +239,28 @@ body[data-th-sheader="true"] nav.navigation {
 }
 
 
+// Forum notification
+body[data-th-forumnotif="true"] nav.navigation .nav-primary li.forum-updated {
+  position: relative;
+
+  &::after {
+    content: "";
+    width: 6px;
+    height: 6px;
+    border-radius: 3px;
+
+    background: var(--palette-text-red);
+
+    position: absolute;
+    right: 0.2em;
+    top: 1em;
+  
+    @include window-larger-than(800px) {
+      top: 0.2em;
+    }
+  }
+}
+
 // Mobile toggle
 html.nav-toggled {
 
@@ -333,10 +339,6 @@ nav.navigation, html.nav-toggled nav.navigation {
           padding: 0 0.75em;
           i { display: none; }
         }
-
-        &.forum-updated::after {
-          top: 0.2em;
-        }
       }
     }
 

app/views/layouts/_theme_include.html.erb

@@ -4,12 +4,14 @@
     var theme = localStorage.getItem('theme') || 'hexagon';
     var extra = localStorage.getItem('theme-extra') || 'hexagon';
     var sheader = localStorage.getItem('theme-sheader') || false;
+    var forumnotif = localStorage.getItem('theme-forumnotif') || false;
     var palette = localStorage.getItem('theme-palette') || 'default';
     var nav = localStorage.getItem('theme-nav') || 'top';
     var b = document.body;
     b.setAttribute('data-th-main', theme);
     b.setAttribute('data-th-extra', extra);
     b.setAttribute('data-th-sheader', sheader);
+    b.setAttribute('data-th-forumnotif', forumnotif);
     b.setAttribute('data-th-palette', palette);
     b.setAttribute('data-th-nav', nav);
   } catch(e) {}

app/views/static/theme.html.erb

@@ -43,6 +43,12 @@
       <option value="true">Enabled</option>
     </select>
 
+    <label for="theme_forumnotif">Forum Activity Dot</label>
+    <select id="theme_forumnotif">
+      <option value="false">Disabled</option>
+      <option value="true">Enabled</option>
+    </select>
+
   <h3>Accessibility</h3>
     <label for="theme_palette">Palette</label>
     <select id="theme_palette">