Radish alpha
r
radicle-desktop
rad:z4D5UCArafTzTQpDZNQRuqswh3ury
Radicle desktop app
Radicle
Git
Commits › 5232b85
Adjust font size
Sebastian Martinez committed 1 year ago
commit 5232b85e12454c1b6a69e07311f157249c7a2d18
parent c754c4f
11 files changed +130 -16
modified public/typography.css
@@ -58,6 +58,7 @@
}



:root {
+ 
  --font-size: 16px;

  --font-family-sans-serif: Inter, sans-serif;

  --font-family-monospace: monospace;

  --font-weight-regular: 400;
@@ -89,7 +90,7 @@ html {
  font-feature-settings: "zero";

  /* The root element font size has to be set in px,

   * otherwise Safari breaks. */
- 
  font-size: 16px;
+ 
  font-size: var(--font-size);

  font-weight: var(--font-weight-regular);

  /* On Safari this aligns text with different font-faces properly vertically. */

  line-height: 22px;
modified src/App.svelte
@@ -7,11 +7,17 @@


  import * as router from "@app/lib/router";

  import { checkAuth, startup } from "@app/lib/auth.svelte";
- 
  import { dynamicInterval } from "@app/lib/interval";

  import { createEventEmittersOnce } from "@app/lib/startup.svelte";
+ 
  import { dynamicInterval } from "@app/lib/interval";

  import { invoke } from "@app/lib/invoke";
+ 
  import {
+ 
    resetFontSize,
+ 
    increaseFontSize,
+ 
    decreaseFontSize,
+ 
    fontSettings,
+ 
  } from "@app/lib/appearance.svelte";

  import { theme } from "@app/components/ThemeSwitch.svelte";
- 
  import { unreachable } from "@app/lib/utils";
+ 
  import { unreachable, isMac } from "@app/lib/utils";



  import Auth from "@app/views/booting/Auth.svelte";

  import CreateIdentity from "@app/views/booting/CreateIdentity.svelte";
@@ -70,9 +76,29 @@
    }

  });
+ 
  $effect(() =>
+ 
    document.documentElement.style.setProperty(
+ 
      "--font-size",
+ 
      `${fontSettings.size}px`,
+ 
    ),
+ 
  );

  $effect(() => document.documentElement.setAttribute("data-theme", $theme));

</script>
+ 
<svelte:document
+ 
  onkeydown={e => {
+ 
    const auxiliarKey = isMac() ? e.metaKey : e.ctrlKey;
+ 
    // Handles the position of the plus key on different keyboard layouts.
+ 
    const plusKey = e.key === "1" || e.key === "=";
+ 
    if (auxiliarKey && (e.key === "+" || plusKey)) {
+ 
      increaseFontSize();
+ 
    } else if (auxiliarKey && e.key === "-") {
+ 
      decreaseFontSize();
+ 
    } else if (auxiliarKey && e.key.toLowerCase() === "0") {
+ 
      resetFontSize();
+ 
    }
+ 
  }} />
+ 


{#if $activeRouteStore.resource === "booting"}

  {#if startup.error?.code === "IdentityError.MissingProfile"}

    <CreateIdentity />
modified src/components/AssigneeInput.svelte
@@ -144,7 +144,7 @@
            }}

            name="cross" />

        {:else}
- 
          <Icon name="plus" onclick={() => (showInput = true)}></Icon>
+ 
          <Icon name="add" onclick={() => (showInput = true)}></Icon>

        {/if}

      </div>

    {/if}
added src/components/FontSizeSwitch.svelte
@@ -0,0 +1,37 @@
+ 
<script lang="ts">
+ 
  import {
+ 
    decreaseFontSize,
+ 
    fontSettings,
+ 
    increaseFontSize,
+ 
  } from "@app/lib/appearance.svelte";
+
+ 
  import Button from "./Button.svelte";
+ 
  import Icon from "./Icon.svelte";
+ 
</script>
+
+ 
<style>
+ 
</style>
+
+ 
<div class="global-flex" style:gap="0">
+ 
  <Button
+ 
    flatRight
+ 
    variant="ghost"
+ 
    onclick={() => {
+ 
      decreaseFontSize();
+ 
    }}>
+ 
    <Icon name="minus" />
+ 
  </Button>
+
+ 
  <Button flatRight flatLeft active variant="ghost">
+ 
    {fontSettings.size}
+ 
  </Button>
+
+ 
  <Button
+ 
    flatLeft
+ 
    variant="ghost"
+ 
    onclick={() => {
+ 
      increaseFontSize();
+ 
    }}>
+ 
    <Icon name="plus" />
+ 
  </Button>
+ 
</div>
modified src/components/Icon.svelte
@@ -8,6 +8,7 @@
    styleDisplay?: string;

    styleVerticalAlign?: string;

    name:
+ 
      | "add"

      | "arrow-left"

      | "arrow-right"

      | "arrow-right-hollow"
@@ -39,13 +40,14 @@
      | "file"

      | "filter"

      | "home"
- 
      | "info"

      | "inbox"
+ 
      | "info"

      | "issue"

      | "issue-closed"

      | "label"

      | "lock"

      | "markdown"
+ 
      | "minus"

      | "moon"

      | "more-vertical"

      | "none"
@@ -115,7 +117,14 @@
  height={size}

  fill="currentColor"

  viewBox="0 0 16 16">
- 
  {#if name === "arrow-left"}
+ 
  {#if name === "add"}
+ 
    <path d="M2 3H3V13H2V3Z" />
+ 
    <path d="M3 13H13V14H3L3 13Z" />
+ 
    <path d="M3 2H13V3L3 3L3 2Z" />
+ 
    <path d="M13 3L14 3V13H13V3Z" />
+ 
    <path d="M7 5H9V11H7V5Z" />
+ 
    <path d="M5 7H11V9H5V7Z" />
+ 
  {:else if name === "arrow-left"}

    <path d="M1.99997 7L1.99997 8L2.99997 8L2.99997 7L1.99997 7Z" />

    <path d="M2.99997 6L2.99997 7L3.99997 7L3.99997 6L2.99997 6Z" />

    <path d="M2.99997 9L2.99997 8L3.99997 8L3.99997 9L2.99997 9Z" />
@@ -734,6 +743,8 @@
    <path d="M8 11H9V12H8V11Z" />

    <path d="M7 10H8V12H7V10Z" />

    <path d="M3 4.00003H4V6.00003H3V4.00003Z" />
+ 
  {:else if name === "minus"}
+ 
    <path d="M14 7V9L2 9L2 7L14 7Z" />

  {:else if name === "moon"}

    <path d="M4 3H6V4H4V3Z" />

    <path d="M3 4L4 4L4 6H3V4Z" />
@@ -929,12 +940,8 @@
    <path d="M3 12H4V13H3V12Z" />

    <path d="M3 13H4V14H3V13Z" />

  {:else if name === "plus"}
- 
    <path d="M2 3H3V13H2V3Z" />
- 
    <path d="M3 13H13V14H3L3 13Z" />
- 
    <path d="M3 2H13V3L3 3L3 2Z" />
- 
    <path d="M13 3L14 3V13H13V3Z" />
- 
    <path d="M7 5H9V11H7V5Z" />
- 
    <path d="M5 7H11V9H5V7Z" />
+ 
    <path d="M9 14H7L7 2L9 2L9 14Z" />
+ 
    <path d="M14 7V9L2 9L2 7L14 7Z" />

  {:else if name === "reply"}

    <path d="M2.5 9V8H3.5V9H2.5Z" />

    <path d="M3.5 10L3.5 9L4.5 9V10L3.5 10Z" />
modified src/components/IssueSecondColumn.svelte
@@ -150,7 +150,7 @@
          });

        }

      }}>
- 
      <Icon name="plus" />New
+ 
      <Icon name="add" />New

    </OutlineButton>

  </div>

</div>
modified src/components/LabelInput.svelte
@@ -120,7 +120,7 @@
            }}

            name="cross" />

        {:else}
- 
          <Icon name="plus" onclick={() => (showInput = true)}></Icon>
+ 
          <Icon name="add" onclick={() => (showInput = true)}></Icon>

        {/if}

      </div>

    {/if}
modified src/components/Reviews.svelte
@@ -103,7 +103,7 @@
            disabled={hasOwnReview}

            {onclick}

            title={hasOwnReview ? "You already published a review" : undefined}>
- 
            <Icon name="plus" />
+ 
            <Icon name="add" />

            <span class="txt-small">Review</span>

          </NakedButton>

        {/snippet}
modified src/components/Settings.svelte
@@ -3,6 +3,7 @@


  import AnnounceSwitch from "./AnnounceSwitch.svelte";

  import Border from "./Border.svelte";
+ 
  import FontSizeSwitch from "./FontSizeSwitch.svelte";

  import Icon from "./Icon.svelte";

  import NakedButton from "./NakedButton.svelte";

  import Popover from "./Popover.svelte";
@@ -50,6 +51,12 @@
          style:width="100%">

          Announce changes <AnnounceSwitch />

        </div>
+ 
        <div
+ 
          class="global-flex"
+ 
          style:justify-content="space-between"
+ 
          style:width="100%">
+ 
          Font size <FontSizeSwitch />
+ 
        </div>

      </div>

    </Border>

  {/snippet}
added src/lib/appearance.svelte.ts
@@ -0,0 +1,36 @@
+ 
export const fontSettings = $state({ size: loadFontSize() });
+ 
const step = 2;
+ 
const minFontSize = 14;
+ 
const maxFontSize = 24;
+
+
+ 
export function increaseFontSize() {
+ 
  if (fontSettings.size + step <= maxFontSize) {
+ 
    setFontSize(fontSettings.size + step);
+ 
  }
+ 
}
+
+ 
export function decreaseFontSize() {
+ 
  if (fontSettings.size - step >= minFontSize) {
+ 
    setFontSize(fontSettings.size - step);
+ 
  }
+ 
}
+
+ 
export function resetFontSize() {
+ 
  setFontSize(16);
+ 
}
+
+ 
function loadFontSize(): number {
+ 
  const storedFontSize = localStorage ? localStorage.getItem("fontSize") : "16";
+
+ 
  if (storedFontSize === null) {
+ 
    return 16;
+ 
  } else {
+ 
    return parseInt(storedFontSize);
+ 
  }
+ 
}
+
+ 
function setFontSize(size: number) {
+ 
  fontSettings.size = size;
+ 
  localStorage.setItem("fontSize", size.toString());
+ 
}
modified src/views/repo/Issues.svelte
@@ -142,7 +142,7 @@
                rid: repo.rid,

              });

            }}>
- 
            <Icon name="plus" />New
+ 
            <Icon name="add" />New

          </Button>

        </div>

      </div>