Refactor/redesign checkbox component, clean up old code.

BetterDiscord · Jul 13, 2021 · dddc3ef · dddc3ef
1 parent d947de5
commit dddc3ef
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 38 deletions.
diff --git a/src/renderer/App.svelte b/src/renderer/App.svelte
@@ -1,18 +1,15 @@
 <script>
+    import "focus-visible";
+
     // import Page from "./containers/Page.svelte";
     import Titlebar from "./common/Titlebar.svelte";
     import Footer from "./common/Footer.svelte";
     import Router from "svelte-spa-router";
     import routes from "./routes";
-    require("focus-visible");
 </script>
 
-<div class="main-window platform-{process.platform}">
-    {#if process.platform === "darwin"}
-        <Titlebar macButtons />
-    {:else}
-        <Titlebar />
-    {/if}
+<div class="main-window platform-{process.platform || "win32"}">
+    <Titlebar macButtons={process.platform === "darwin"} />
     <main class="installer-body">
         <div class="sections">
             <Router {routes} />
@@ -24,7 +21,7 @@
 <style>
     @import url("https://rsms.me/inter/inter.css");
 
-    :global(.focus-visible) {
+    :global([data-focus-visible-added]) {
         box-shadow: 0 0 0 4px var(--accent-faded) !important;
     }
 

diff --git a/src/renderer/common/Checkbox.svelte b/src/renderer/common/Checkbox.svelte
@@ -2,9 +2,8 @@
     // NOTES: preventing the default click event behavior is needed to stop the change event being fired twice when the spacebar is pressed.
     import {handleKeyboardToggle, checkItem} from "../stores/controls.js";
 
-    export let label;
     export let checked = false;
-    export let disabled = false;
+    export let label = undefined;
 
     let checkbox;
 
@@ -16,31 +15,60 @@
     }
 </script>
 
-<div class="checkbox" on:keypress={handleKeyboardToggle(checkbox)}>
-    <label>
-        <input type="checkbox" {disabled} bind:this={checkbox} bind:checked on:change on:keydown={handleKeyDown} {...$$restProps} />
-        {#if label}
-            <span>{label}</span>
-        {/if}
-    </label>
-</div>
+<!-- svelte-ignore a11y-label-has-associated-control -->
+<!-- https://github.com/sveltejs/svelte/issues/5528 -->
+<label class="checkbox-container" on:keypress={handleKeyboardToggle(checkbox)}>
+    <div class="checkbox-inner">
+        <input class="checkbox" type="checkbox" bind:this={checkbox} bind:checked on:change on:keydown={handleKeyDown} {...$$restProps} />
+        <svg class="checkbox-glyph" viewBox="0 0 24 24">
+            <path d="M0.73, 11.91 8.1,19.28 22.79,4.59" fill="none"/>
+        </svg>
+    </div>
+    {#if label}
+        <span class="checkbox-label">{label}</span>
+    {/if}
+</label>
 
 <style>
-    .checkbox label {
+    .checkbox-container {
         display: flex;
         align-items: center;
         cursor: pointer;
     }
 
-    .checkbox span {
+    .checkbox-label {
         display: inline-block;
         color: var(--text-normal);
         font-size: 13px;
         line-height: normal;
         font-weight: 400;
     }
 
-    .checkbox input {
+    .checkbox-inner {
+        position: relative;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-right: 8px;
+    }
+
+    .checkbox-glyph {
+        position: absolute;
+        width: 12px;
+        height: 12px;
+        color: #fff;
+    }
+
+    .checkbox-glyph path {
+        transform: scale(0.8);
+        transform-origin: center;
+        stroke: currentColor;
+        stroke-width: 2.45;
+        stroke-dasharray: 32;
+        stroke-dashoffset: 32;
+    }
+
+    .checkbox {
         cursor: pointer;
         display: inline-flex;
         align-items: center;
@@ -54,29 +82,24 @@
         width: 20px;
         height: 20px;
         border: 1px solid var(--bg4);
-        margin-right: 8px;
     }
 
-    .checkbox input:active {
+    .checkbox:active {
         background-color: var(--bg3);
     }
 
-    .checkbox input:checked {
+    .checkbox:checked {
         background-color: var(--accent);
         border-color: var(--accent);
     }
 
-    .checkbox input:checked:active {
-        background-color: var(--accent-hover);
-        border-color: var(--accent-hover);
+    .checkbox:checked + .checkbox-glyph path {
+        transition: 250ms cubic-bezier(0.55, 0, 0, 1) stroke-dashoffset;
+        stroke-dashoffset: 0;
     }
 
-    .checkbox input:checked::after {
-        content: "";
-        width: 14px;
-        height: 14px;
-        background-color: #fff;
-        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48' fill='none'%3E%3Cpath d='M40.1389 12.8711C40.6243 13.362 40.6198 14.1535 40.1289 14.6389L17.8789 36.6389C17.3947 37.1176 16.6163 37.1208 16.1283 36.6459L6.87831 27.6459C6.38351 27.1645 6.37267 26.3731 6.85409 25.8783C7.33552 25.3835 8.1269 25.3727 8.62169 25.8541L16.993 33.9991L38.3711 12.8611C38.862 12.3757 39.6535 12.3802 40.1389 12.8711Z' fill='%23ffffff'/%3E%3C/svg%3E") center/contain no-repeat;
-        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48' fill='none'%3E%3Cpath d='M40.1389 12.8711C40.6243 13.362 40.6198 14.1535 40.1289 14.6389L17.8789 36.6389C17.3947 37.1176 16.6163 37.1208 16.1283 36.6459L6.87831 27.6459C6.38351 27.1645 6.37267 26.3731 6.85409 25.8783C7.33552 25.3835 8.1269 25.3727 8.62169 25.8541L16.993 33.9991L38.3711 12.8611C38.862 12.3757 39.6535 12.3802 40.1389 12.8711Z' fill='%23ffffff'/%3E%3C/svg%3E") center/contain no-repeat;
+    .checkbox:checked:active {
+        background-color: var(--accent-hover);
+        border-color: var(--accent-hover);
     }
 </style>
diff --git a/src/renderer/common/Multiselect.svelte b/src/renderer/common/Multiselect.svelte
@@ -18,7 +18,7 @@
 </script>
 
 <label class="check-container" {...$$restProps}>
-    <input bind:this={checkbox} type="checkbox" hidden {disabled} {checked} on:change {value}>
+    <input bind:this={checkbox} type="checkbox" hidden {disabled} {checked} on:change {value} />
     <div on:keypress={handleKeyboardToggle(checkbox)} tabindex="0" class="check-item" class:disabled>
         <div class="icon">
             <slot name="icon" />

diff --git a/src/renderer/common/RadioGroup.svelte b/src/renderer/common/RadioGroup.svelte
@@ -5,7 +5,15 @@
     let container;
 </script>
 
-<div on:keydown={handleArrowKeys(container)} bind:this={container} tabindex="0" selected-index={index} style="--index: {index};" class="radio-group" {...$$restProps}>
+<div
+    on:keydown={handleArrowKeys(container)}
+    bind:this={container}
+    tabindex="0"
+    selected-index={index}
+    style="--index: {index};"
+    class="radio-group"
+    {...$$restProps}
+>
     <slot />
     <div class="selection-indicator"></div>
 </div>

diff --git a/src/renderer/common/TextDisplay.svelte b/src/renderer/common/TextDisplay.svelte
@@ -41,7 +41,12 @@
 </script>
 
 {#if value}
-    <article on:mousemove={() => copyButtonVisible = true} on:mouseleave={() => copyButtonVisible = false} class="text-display{value ? "" : " loading"}" bind:this={element}>
+    <article
+        bind:this={element}
+        on:mousemove={() => copyButtonVisible = true}
+        on:mouseleave={() => copyButtonVisible = false}
+        class="text-display{value ? "" : " loading"}"
+    >
         <div bind:this={scroller} on:scroll={() => copyButtonVisible = false} class="display-inner" tabindex="0">
             {value}
         </div>

diff --git a/src/renderer/pages/Platforms.svelte b/src/renderer/pages/Platforms.svelte
@@ -51,9 +51,9 @@
 
     {#each Object.entries(platformLabels) as [channel, label]}
         <Multiselect
-            description={$paths[channel] ? $paths[channel] : "Not Found"}
             on:change={change}
             on:click={click}
+            description={$paths[channel] || "Not Found"}
             value={channel}
             checked={$paths[channel] && $platforms[channel]}
             disabled={!$paths[channel]}