Added version indicator option 3 (#3393) lukew3

* Fix missing step in contributing advanced

* Removed condition that will never be hit

* Replace version banner with newVersionIndicator

* Update CONTRIBUTING_ADVANCED.md

* Changed newVersionIndicator to text

* Add negative margin to indicator to fix alignment

* close newVersionIndicator on click

* Removed show x on hover

* style touch ups

Co-authored-by: Miodec <bartnikjack@gmail.com>

CONTRIBUTING_ADVANCED.md

@@ -52,7 +52,7 @@ Alternatively, if you use `nvm` then you can run `nvm install` and `nvm use` (yo
 
    - Run `firebase projects:list` to find your firebase project id.
 
-1. Within the `frontend/src/ts/constants` directory, duplicate `firebase-config-example.ts`, rename it to `firebase-config.ts` and paste in your firebase config
+1. Within the `frontend/src/ts/constants` directory, duplicate `firebase-config-example.ts`, rename it to `firebase-config.ts` and paste in your firebase config object
 
    - To find it, go to the Firebase console
    - Navigate to `Project Settings > General > Your apps`

frontend/src/styles/footer.scss

@@ -87,8 +87,19 @@
     }
   }
 
-  .version {
-    opacity: 0;
+  #versionGroup {
+    display: flex;
+    .version {
+      opacity: 0;
+    }
+    #newVersionIndicator {
+      background-color: var(--main-color);
+      border-radius: calc(var(--roundness) / 2);
+      color: var(--bg-color);
+      text-align: center;
+      cursor: pointer;
+      transition: 0.125s;
+    }
   }
 }
 
@@ -99,6 +110,9 @@
   a {
     opacity: 0 !important;
   }
+  #newVersionIndicator {
+    opacity: 0 !important;
+  }
   #commandLineMobileButton {
     opacity: 0 !important;
     pointer-events: none !important;

frontend/src/ts/elements/version-check.ts

@@ -1,5 +1,3 @@
-import * as Notifications from "./notifications";
-
 function setMemory(v: string): void {
   window.localStorage.setItem("lastSeenVersion", v);
 }
@@ -14,23 +12,10 @@ export async function show(version: string): Promise<void> {
     setMemory(version);
     return;
   }
-  if (
-    window.location.hostname === "localhost" ||
-    window.location.hostname === "127.0.0.1"
-  ) {
-    caches.keys().then(function (names) {
-      for (const name of names) caches.delete(name);
-    });
-  }
   if (memory === version) return;
   caches.keys().then(function (names) {
     for (const name of names) caches.delete(name);
   });
-  Notifications.addBanner(
-    `Version ${version} has been released. Click the version number in the bottom right to view the changelog.`,
-    1,
-    "code-branch",
-    false
-  );
+  $("#newVersionIndicator").removeClass("hidden");
   setMemory(version);
 }

frontend/src/ts/popups/version-popup.ts

@@ -3,8 +3,13 @@ export function show(): void {
     .css("opacity", 0)
     .removeClass("hidden")
     .animate({ opacity: 1 }, 125);
+  $("#newVersionIndicator").addClass("hidden");
 }
 
+$(document.body).on("click", "#newVersionIndicator", () => {
+  $("#newVersionIndicator").addClass("hidden");
+});
+
 $(document.body).on("click", ".version", (e) => {
   if (e.shiftKey) return;
   show();

frontend/static/html/bottom.html

@@ -77,10 +77,13 @@
         <i class="fas fa-fw fa-palette"></i>
         <div class="text">serika dark</div>
       </a>
-      <a class="version textButton">
-        <i class="fas fa-fw fa-code-branch"></i>
-        <div class="text">version</div>
-      </a>
+      <div id="versionGroup">
+        <a class="version textButton">
+          <i class="fas fa-fw fa-code-branch"></i>
+          <div class="text">version</div>
+        </a>
+        <key id="newVersionIndicator" class="">new</key>
+      </div>
       <!-- <div>
         <i class="fas fa-file"></i>
         Terms & Conditions