added subject progress to profile, closing #12

CHANGELOG.md

@@ -1,11 +1,18 @@
+# Changelog v1.0.8
+
+## Popup
+- Added subject progress bar to subject tiles in the Profile Page ([#12](https://github.com/digas99/wanikani-kanji-highlighter/issues/12))
+
 # [Changelog v1.0.7](https://github.com/digas99/wanikani-kanji-highlighter/releases/tag/v1.0.7)
+Released on 14/04/2024
 
 ## Bug Fixes
 - Radicals images now load correctly ([#8](https://github.com/digas99/wanikani-kanji-highlighter/issues/8))
 - Fixed level not updating on level up ([#10](https://github.com/digas99/wanikani-kanji-highlighter/issues/10))
 - Details Popup navbar buttons have now a better click area ([#13](https://github.com/digas99/wanikani-kanji-highlighter/issues/13))
 
 # [Changelog v1.0.6](https://github.com/digas99/wanikani-kanji-highlighter/releases/tag/v1.0.6)
+Released on 03/09/2023
 
 ## Popup
 - Added Extension Rating stars

manifest.json

@@ -1,7 +1,7 @@
 {
     "name": "WaniKani Kanji Highlighter",
     "description": "Unofficial kanji highlighter, matching kanji learned with WaniKani.",
-    "version": "1.0.7",
+    "version": "1.0.8",
     "manifest_version": 3,
     "icons": {
         "16":  "logo/logo_bb_16x16.png",

popup/scripts/profile.js

@@ -202,24 +202,41 @@ const subjectTile = (type, subject) => {
     if (characters !== "L" && subjectWrapper.children.length > 0 && subjectWrapper.style.color == "rgb(255, 255, 255)")
         subjectWrapper.children[0].style.filter = "invert(1) drop-shadow(-1px 1px 0px gray)";
 
+
+    const reviewsInfoWrapper = document.createElement("div");
+    subjectWrapper.appendChild(reviewsInfoWrapper);
+    reviewsInfoWrapper.classList.add("reviews-info");
+
     if (subject["passed_at"]) {
         const check = document.createElement("img");
-        subjectWrapper.appendChild(check);
+        reviewsInfoWrapper.appendChild(check);
         check.src = "../images/check.png";
-        check.classList.add("passed-subject-check", "reviews-info");
-        // fix issues with radicals that are images
-        if (subjectWrapper.firstChild.tagName == "IMG") {
-            subjectWrapper.firstChild.style.marginTop = "unset";
-        }
+        check.classList.add("passed-subject-check");
     }
     else if(subject["available_at"]) {
         if (new Date(subject["available_at"]) - new Date() < 0) {
             const time = document.createElement("div");
-            subjectWrapper.appendChild(time);
+            reviewsInfoWrapper.appendChild(time);
             time.appendChild(document.createTextNode("now"));
-            time.classList.add("time-next-review-subject", "reviews-info");
+            time.classList.add("time-next-review-subject");
+        }
+    }
+
+    // subject passed progress bar
+    const progressBar = document.createElement("div");
+    reviewsInfoWrapper.appendChild(progressBar);
+    progressBar.classList.add("subject-passed-progress");
+    for (let i = 0; i < 5; i++) {
+        const progress = document.createElement("div");
+        progressBar.appendChild(progress);
+        if (subject["srs_stage"] !== null) {
+            if (subject["srs_stage"] > i || subject["passed_at"]) {
+                progress.style.backgroundColor = "#42f541";
+            }
         }
     }
+    if (subject["srs_stage"] >= 5 || subject["passed_at"])
+        progressBar.style.columnGap = "0px";
 
     if (subject["available_at"])
         subjectWrapper.setAttribute("data-available_at", subject["available_at"]);

popup/styles/profile.css

@@ -300,8 +300,9 @@ body {
     padding: 5px;
 }
 
-.subject-container > ul > li {
+.subject-container > ul li {
     position: relative;
+    min-height: 40px;
 }
 
 .time-next-review-subject {
@@ -328,6 +329,7 @@ body {
     border-bottom-right-radius: 6px;
     display: flex;
     flex-direction: row;
+    column-gap: 1px;
     overflow: hidden;
 }