From 3b7919501a4954bcf765a900bda8454f578bb71e Mon Sep 17 00:00:00 2001 From: Felix Kling Date: Thu, 20 Jun 2024 10:28:29 +0200 Subject: [PATCH] chore(svelte): Update fuzzy finder designs (#63354) Closes srch-458 This implements the new fuzzy finder design, specifically: - Backdrop and dropshadow - Border radius - Tab header (affects all tab headers) - Options Note 1: Some aspects of the options UI (such as how paths are rendered and highlighted), and the "footer" depend on how the highlighted parts are computed. This will change when the local matching and ranking logic is removed and will be updated when that happens. Note 2: The symbol icon coloring was broken by #63288 and will be fixed in a separate PR. ## Test plan Manual testing --- .../src/lib/KeyboardShortcut.svelte | 5 +- .../web-sveltekit/src/lib/TabsHeader.svelte | 16 ++- client/web-sveltekit/src/lib/common.ts | 1 + .../src/lib/fuzzyfinder/FuzzyFinder.svelte | 104 ++++++++++++++---- .../src/routes/svelte-overrides.scss | 7 ++ 5 files changed, 101 insertions(+), 32 deletions(-) diff --git a/client/web-sveltekit/src/lib/KeyboardShortcut.svelte b/client/web-sveltekit/src/lib/KeyboardShortcut.svelte index dc121bb1c13..c3487b98ac4 100644 --- a/client/web-sveltekit/src/lib/KeyboardShortcut.svelte +++ b/client/web-sveltekit/src/lib/KeyboardShortcut.svelte @@ -52,12 +52,11 @@ A component to display the keyboard shortcuts for the application. line-height: 1; background-color: var(--secondary-4); - color: var(--text-muted); + color: var(--text-body); // When inside a selected container, show the selected variant :global([aria-selected='true']) & { - color: white; - background-color: var(--primary); + color: var(--primary); } } diff --git a/client/web-sveltekit/src/lib/TabsHeader.svelte b/client/web-sveltekit/src/lib/TabsHeader.svelte index 9eb9e19cac2..530ca2dc018 100644 --- a/client/web-sveltekit/src/lib/TabsHeader.svelte +++ b/client/web-sveltekit/src/lib/TabsHeader.svelte @@ -77,7 +77,7 @@ align-items: center; min-height: 2rem; padding: 0.25rem 0.75rem; - color: var(--text-body); + color: var(--text-muted); display: inline-flex; flex-flow: row nowrap; justify-content: center; @@ -95,6 +95,8 @@ } &:hover { + --icon-color: currentColor; + color: var(--text-title); background-color: var(--secondary-2); } @@ -102,9 +104,7 @@ &[aria-selected='true'] { --icon-color: currentColor; - font-weight: 500; - color: var(--text-title); - background-color: var(--secondary-2); + color: var(--primary); &::after { border-color: var(--primary); @@ -119,10 +119,16 @@ &::before { content: attr(data-tab-title); display: block; - font-weight: 500; height: 0; visibility: hidden; } } + + &[aria-selected='true'] span, + span::before { + // Hidden rendering of the bold tab title to prevent + // shifting when the tab is selected. + font-weight: 500; + } } diff --git a/client/web-sveltekit/src/lib/common.ts b/client/web-sveltekit/src/lib/common.ts index 138c24e5659..450730696f1 100644 --- a/client/web-sveltekit/src/lib/common.ts +++ b/client/web-sveltekit/src/lib/common.ts @@ -18,6 +18,7 @@ export { isLinuxPlatform, getPlatform, } from '@sourcegraph/common/src/util/browserDetection' +export { dirname, basename } from '@sourcegraph/common/src/util/path' let highlightingLoaded = false diff --git a/client/web-sveltekit/src/lib/fuzzyfinder/FuzzyFinder.svelte b/client/web-sveltekit/src/lib/fuzzyfinder/FuzzyFinder.svelte index 91424605fed..373318256f7 100644 --- a/client/web-sveltekit/src/lib/fuzzyfinder/FuzzyFinder.svelte +++ b/client/web-sveltekit/src/lib/fuzzyfinder/FuzzyFinder.svelte @@ -13,6 +13,7 @@ import { isMacPlatform } from '@sourcegraph/common' + import { dirname } from '$lib/common' import { nextSibling, onClickOutside, previousSibling } from '$lib/dom' import { getGraphQLClient } from '$lib/graphql' import Icon from '$lib/Icon.svelte' @@ -20,6 +21,7 @@ import CodeHostIcon from '$lib/search/CodeHostIcon.svelte' import EmphasizedLabel from '$lib/search/EmphasizedLabel.svelte' import SymbolKindIcon from '$lib/search/SymbolKindIcon.svelte' + import { displayRepoName } from '$lib/shared' import TabsHeader, { type Tab } from '$lib/TabsHeader.svelte' import { Input } from '$lib/wildcard' import Button from '$lib/wildcard/Button.svelte' @@ -181,6 +183,8 @@ +
dialog?.close()}>
- + + +
@@ -223,41 +229,51 @@
    {#if $source.value} {#each $source.value as item, index (item.item)} + {@const repo = item.item.repository.name} + {@const displayRepo = displayRepoName(repo)}
  • {#if item.item.type === 'repo'} + {@const matchOffset = repo.length - displayRepo.length} - - + + {repo} {:else if item.item.type == 'symbol'} - - + - - - - {#if !useScope}{item.item.repository.name}/{/if}{item.item.file.path}{#if !useScope}{displayRepo} · {/if}{item.item.file.path} {:else if item.item.type == 'file'} + {@const fileName = item.item.file.name} + {@const folderName = dirname(item.item.file.path)} - - {#if !useScope}{item.item.repository.name}/{/if} + + + {#if !useScope}{displayRepo} · {/if} + + {/if}
    • @@ -274,14 +290,17 @@ dialog { width: 80vw; height: 80vh; + border: none; + border-radius: 0.75rem; padding: 0; overflow: hidden; border: 1px solid var(--border-color); - border-radius: var(--border-radius); - background-color: var(--body-bg); + background-color: var(--color-bg-1); + + box-shadow: var(--fuzzy-finder-shadow); &::backdrop { - background-color: var(--modal-bg); + background: var(--fuzzy-finder-backdrop); } } @@ -316,14 +335,18 @@ [role='option'] { a { - display: flex; - align-items: center; - padding: 0.25rem 1rem; + display: grid; + grid-template-columns: [icon] auto [label] 1fr; + grid-template-rows: auto; + grid-template-areas: 'icon label' '. info'; + column-gap: 0.5rem; + cursor: pointer; - color: var(--body-color); - gap: 0.25rem; + padding: 0.25rem 0.75rem; text-decoration: none; + color: var(--body-color); + font-size: var(--font-size-small); } small { @@ -334,6 +357,28 @@ a:hover { background-color: var(--color-bg-2); } + + .icon { + grid-area: icon; + + // Centers the icon vertically + display: flex; + align-items: center; + } + + .label { + grid-area: label; + } + + .info { + grid-area: info; + color: var(--text-muted); + font-size: var(--font-size-extra-small); + + &.mono { + font-family: var(--code-font-family); + } + } } .empty { @@ -358,5 +403,16 @@ bottom: 0; left: 0; } + + .close { + position: fixed; + right: 2rem; + background-color: var(--color-bg-1); + border-radius: 50%; + + &:hover { + background-color: var(--color-bg-2); + } + } } diff --git a/client/web-sveltekit/src/routes/svelte-overrides.scss b/client/web-sveltekit/src/routes/svelte-overrides.scss index fde8c3c21cc..341fd7cfd63 100644 --- a/client/web-sveltekit/src/routes/svelte-overrides.scss +++ b/client/web-sveltekit/src/routes/svelte-overrides.scss @@ -16,6 +16,7 @@ body { --code-font-family: var(--monospace-font-family); --font-size-base: 0.9375rem; --font-size-small: 0.875rem; + --font-size-extra-small: 0.6875rem; --font-size-tiny: 0.8125rem; --code-font-size: 13px; --border-radius: 4px; @@ -43,6 +44,7 @@ label { --code-bg: var(--white); --modal-bg: rgba(219, 226, 240, 0.5); --code-selection-bg: rgba(231, 238, 250, 0.8); + --fuzzy-finder-backdrop: rgba(255, 255, 255, 0.96); // Shadows --sidebar-shadow: 0 79px 22px 0 rgba(30, 4, 47, 0), 0 51px 20px 0 rgba(30, 4, 47, 0.01), @@ -57,6 +59,8 @@ label { 0 -18px 11px 0 rgba(1, 6, 12, 0.02), 0 -8px 8px 0 rgba(1, 6, 12, 0.03), 0 -2px 4px 0 rgba(1, 6, 12, 0.04); --popover-shadow: 0 174px 49px 0 rgba(0, 0, 0, 0), 0 112px 45px 0 rgba(0, 0, 0, 0.01), 0 63px 38px 0 rgba(0, 0, 0, 0.02), 0 28px 28px 0 rgba(0, 0, 0, 0.03), 0 7px 15px 0 rgba(0, 0, 0, 0.04); + --fuzzy-finder-shadow: 0 186px 52px 0 rgba(0, 0, 0, 0), 0 119px 48px 0 rgba(0, 0, 0, 0.01), + 0 67px 40px 0 rgba(0, 0, 0, 0.02), 0 30px 30px 0 rgba(0, 0, 0, 0.03), 0 7px 16px 0 rgba(0, 0, 0, 0.04); } // Theme Dark @@ -71,6 +75,7 @@ label { --code-selection-bg: var(--color-bg-2); --code-bg: var(--gray-12); --modal-bg: rgba(52, 58, 77, 0.5); + --fuzzy-finder-backdrop: rgba(20, 23, 31, 0.96); // Shadows --sidebar-shadow: 0 240px 80px 0 rgba(12, 1, 19, 0.01), 0 160px 80px 0 rgba(12, 1, 19, 0.02), @@ -85,4 +90,6 @@ label { 0 -16px 8px 0 rgba(0, 0, 0, 0.08), 0 -8px 4px 0 rgba(0, 0, 0, 0.16), 0 -2px 4px 0 rgba(0, 0, 0, 0.32); --popover-shadow: 0 174px 49px 0 rgba(0, 0, 0, 0.01), 0 112px 45px 0 rgba(0, 0, 0, 0.05), 0 63px 38px 0 rgba(0, 0, 0, 0.16), 0 28px 28px 0 rgba(0, 0, 0, 0.27), 0 7px 15px 0 rgba(0, 0, 0, 0.31); + --fuzzy-finder-shadow: 0 186px 52px 0 rgba(0, 0, 0, 0.01), 0 119px 48px 0 rgba(0, 0, 0, 0.03), + 0 67px 40px 0 rgba(0, 0, 0, 0.06), 0 30px 30px 0 rgba(0, 0, 0, 0.12), 0 7px 16px 0 rgba(0, 0, 0, 0.24); }