Radish alpha
r
radicle-desktop
rad:z4D5UCArafTzTQpDZNQRuqswh3ury
Radicle desktop app
Radicle
Git
Commits › d01cf9b
Add filter icon
Rūdolfs Ošiņš committed 1 year ago
commit d01cf9b4332885d465a52e24a223620e1fa8c1dc
parent 8a3e480
3 files changed +34 -5
modified src/components/Icon.svelte
@@ -36,6 +36,7 @@
      | "eye"

      | "face"

      | "file"
+ 
      | "filter"

      | "home"

      | "info"

      | "inbox"
@@ -545,6 +546,21 @@
    <path d="M4 2H9V3L4 3V2Z" />

    <path d="M13 6V13H12V6L13 6Z" />

    <path d="M4 3V13H3L3 3L4 3Z" />
+ 
  {:else if name === "filter"}
+ 
    <path d="M3 2L13 2V3L3 3V2Z" />
+ 
    <path d="M13 3L14 3V4L13 4V3Z" />
+ 
    <path d="M12 4L13 4V5H12V4Z" />
+ 
    <path d="M11 5L12 5V7H11V5Z" />
+ 
    <path d="M5 5H4V7H5V5Z" />
+ 
    <path d="M10 7L11 7V9H10V7Z" />
+ 
    <path d="M6 7L5 7L5 9H6V7Z" />
+ 
    <path d="M9 9L10 9L10 13L9 13L9 9Z" />
+ 
    <path d="M7 9H6V12H7V9Z" />
+ 
    <path d="M2 3L3 3L3 4H2L2 3Z" />
+ 
    <path d="M3 4H4L4 5L3 5L3 4Z" />
+ 
    <path d="M8 13H9L9 14H8V13Z" />
+ 
    <path d="M6 4L12 4V5L6 5V4Z" />
+ 
    <path d="M7 12H8L8 13H7L7 12Z" />

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

    <path d="M7 1.50003H9V2.50003H7V1.50003Z" />

    <path d="M6 2.50003L7 2.50003V3.50003H6V2.50003Z" />
modified src/components/TextInput.svelte
@@ -1,8 +1,10 @@
<script lang="ts">
+ 
  import type { FormEventHandler } from "svelte/elements";
+ 
  import type { Snippet } from "svelte";
+ 


  import { onMount } from "svelte";



  import Border from "./Border.svelte";
- 
  import type { FormEventHandler } from "svelte/elements";



  interface Props {

    name?: string;
@@ -17,6 +19,7 @@
    valid?: boolean;

    oninput?: FormEventHandler<HTMLInputElement>;

    keyShortcuts?: string;
+ 
    left?: Snippet;

  }



  /* eslint-disable prefer-const */
@@ -33,6 +36,7 @@
    valid = true,

    oninput,

    keyShortcuts,
+ 
    left,

  }: Props = $props();

  /* eslint-enable prefer-const */
@@ -78,7 +82,6 @@
    height: 100%;

    margin: 0;

    height: 32px;
- 
    padding: 0.25rem 0.75rem;

    border: 0;

  }

  input::placeholder {
@@ -94,7 +97,9 @@
<Border

  variant={valid ? (focussed ? "secondary" : "ghost") : "danger"}

  styleWidth="100%">
+ 
  {@render left?.()}

  <input
+ 
    style:padding={left ? "0.25rem 0.75rem 0.25rem 0" : "0.25rem 0.75rem"}

    aria-keyshortcuts={keyShortcuts}

    onfocus={() => {

      focussed = true;
modified src/views/home/Repos.svelte
@@ -122,7 +122,7 @@
  <div class="container">

    <div class="global-flex" style:margin-bottom="0.5rem">

      <div class="header">Repositories</div>
- 
      <div style:margin-left="auto">
+ 
      <div class="global-flex" style:margin-left="auto">

        <TextInput

          onSubmit={async () => {

            if (searchResults.length === 1) {
@@ -136,9 +136,17 @@
          onDismiss={() => {

            searchInput = "";

          }}
- 
          placeholder={`Filter repositories ${modifierKey()} + f`}
+ 
          placeholder={`Fuzzy filter repositories ${modifierKey()} + f`}

          keyShortcuts="ctrl+f"
- 
          bind:value={searchInput} />
+ 
          bind:value={searchInput}>
+ 
          {#snippet left()}
+ 
            <div
+ 
              style:color="var(--color-foreground-dim)"
+ 
              style:padding-left="0.5rem">
+ 
              <Icon name="filter" />
+ 
            </div>
+ 
          {/snippet}
+ 
        </TextInput>

      </div>

    </div>

    {#if repos.length > 0}