More icons

Author: tim-we

src/assets/bootstrap-icons/check-circle-fill.svg

@@ -26,7 +26,7 @@ const App: Preact.FunctionComponent = () => {
   const showSelector = extensions.length === 0 || selector;
 
   useEffect(() => {
-    wrappedWorker.loadExtension("/test/extension.xpi").then((data) => setExtensions([data]));
+    wrappedWorker.loadExtension("/test/extension3.xpi").then((data) => setExtensions([data]));
   }, []);
 
   return (

src/main/index.tsx

@@ -18,7 +18,7 @@ const DonutChart: FunctionComponent<ChartProps> = ({ data }) => {
   let offset = 0;
 
   return (
-    <svg viewBox="0 0 100 100" aria-hidden="true">
+    <svg class="donut-chart" viewBox="0 0 100 100" aria-hidden="true">
       {data.map((dp, i) => {
         const size = Math.ceil(circumference * dp.amount / total);
         const angle = Math.round((360 * offset) - 90);

src/main/ui/common/DonutChart.tsx

@@ -3,37 +3,48 @@ import type { ExtensionData } from "../../../extension/types/ExtensionData";
 import Tile from "./Tile";
 import TranslationsViewer from "../translations/TranslationsViewer";
 import type { PopupWindowOptions } from "../popups/PopupWindow";
+import DonutChart from "../common/DonutChart";
 
 const TranslationsTile: FunctionComponent<ExtensionData["translations"]> = (meta) => {
   const { locales, messages, defaultLocale, percentage } = meta;
+  const donutData =
+    percentage === undefined
+      ? []
+      : [
+          { amount: percentage, color: `hsl(${Math.round(10 + 65 * percentage)} 90% 48%)` },
+          { amount: 1 - percentage, color: "rgb(128, 128, 128)" }
+        ];
 
   return (
     <Tile title="Translations" cssClass="translations" popup={(id) => createPopupOptions(id, meta)}>
       {locales.length === 0 ? (
-        <span>no translations</span>
+        <span class="none">no translations</span>
       ) : (
-        <table>
-          <tbody>
-            <tr>
-              <td class="count">{locales.length}</td>
-              <td>Locales</td>
-            </tr>
-            <tr>
-              <td class="count">{messages}</td>
-              <td>Strings</td>
-            </tr>
-            <tr>
-              <td title="Default locale">{defaultLocale ?? "-"}</td>
-              <td>Default</td>
-            </tr>
-            {percentage !== undefined ? (
+        <div>
+          {percentage === 1 ? <span class="full" /> : <DonutChart data={donutData} />}
+          <table>
+            <tbody>
               <tr>
-                <td class="count">{Math.floor(100 * percentage)}%</td>
-                <td>translated</td>
+                <td class="count">{locales.length}</td>
+                <td>Locales</td>
               </tr>
-            ) : null}
-          </tbody>
-        </table>
+              <tr>
+                <td class="count">{messages}</td>
+                <td>Strings</td>
+              </tr>
+              <tr>
+                <td title="Default locale">{defaultLocale ?? "-"}</td>
+                <td>Default</td>
+              </tr>
+              {percentage !== undefined ? (
+                <tr>
+                  <td class="count">{Math.floor(100 * percentage)}%</td>
+                  <td>translated</td>
+                </tr>
+              ) : null}
+            </tbody>
+          </table>
+        </div>
       )}
     </Tile>
   );

src/main/ui/tiles/TranslationsTile.tsx

@@ -89,6 +89,11 @@
     }
   }
 
+  .donut-chart {
+    aspect-ratio: 1;
+    width: 64px;
+  }
+
   &.meta > .content {
     flex-direction: row;
     justify-content: space-around;
@@ -147,11 +152,6 @@
       flex-direction: column;
     }
 
-    svg {
-      aspect-ratio: 1;
-      width: 64px;
-    }
-
     table {
       font-size: 0.9em;
       margin-bottom: 0.5em;
@@ -183,6 +183,47 @@
       border-radius: 8px;
       border: 1px solid rgba(255, 255, 255, 0.25);
       margin-left: 0.2em;
+
+      tr.none & {
+        display: none;
+      }
+    }
+  }
+
+  &.translations {
+    & > .content > div {
+      display: flex;
+      flex-direction: row;
+      gap: var(--base-offset);
+    }
+
+    span.none,
+    span.full {
+      line-height: 2rem;
+
+      &::before {
+        content: " ";
+        display: inline-block;
+        vertical-align: middle;
+        background-size: cover;
+        width: 2rem;
+        height: 2rem;
+        margin-right: var(--base-offset);
+      }
+    }
+
+    span.none::before {
+      background-image: url("../../../assets/bootstrap-icons/x-circle-fill.svg");
+
+      /* Make it red-ish (gray -> add color -> change color -> increase saturation */
+      filter: invert(0.5) sepia(1) hue-rotate(320deg) saturate(6);
+    }
+
+    span.full::before {
+      background-image: url("../../../assets/bootstrap-icons/check-circle-fill.svg");
+
+      /* Make it green-ish */
+      filter: invert(0.5) sepia(1) hue-rotate(39deg) saturate(10);
     }
   }