mirror of
https://github.com/sourcegraph/sourcegraph.git
synced 2026-02-06 17:31:43 +00:00
Svelte: implement keyboard shortcut design (#63253)
This commit is contained in:
Camden Cheek
GitHub
parent
f8bbc3f2d8
commit
bb359cde47
@ -5,14 +5,14 @@ A component to display the keyboard shortcuts for the application.
|
||||
import { isMacPlatform } from '$lib/common'
|
||||
import { formatShortcutParts, type Keys } from '$lib/Hotkey'
|
||||
|
||||
export let shorcut: Keys
|
||||
export let shortcut: Keys
|
||||
export let inline: boolean = false
|
||||
|
||||
const separator = isMacPlatform() ? '' : '+'
|
||||
|
||||
$: parts = (() => {
|
||||
const result: string[] = []
|
||||
let parts = formatShortcutParts(shorcut)
|
||||
let parts = formatShortcutParts(shortcut)
|
||||
for (let i = 0; i < parts.length; i++) {
|
||||
if (i > 0) {
|
||||
result.push(separator)
|
||||
@ -31,16 +31,33 @@ A component to display the keyboard shortcuts for the application.
|
||||
|
||||
<style lang="scss">
|
||||
kbd {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.125rem;
|
||||
}
|
||||
all: unset;
|
||||
display: inline-block;
|
||||
&.inline {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.inline {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
background-color: transparent;
|
||||
// NOTE: the height of the kdb element is based on the base
|
||||
// line height. There is no way to query the line height of the
|
||||
// parent, so we assume that the container has the standard
|
||||
// line height. In the case the parent has a line height of 1,
|
||||
// this will grow the container slightly. This can be overridden
|
||||
// by setting `--line-height-base` if overriding it in the parent.
|
||||
--height: calc(var(--line-height-base) * 1em);
|
||||
--vertical-padding: calc(var(--height) * 0.25);
|
||||
padding: var(--vertical-padding) calc(1.5 * var(--vertical-padding));
|
||||
font-size: calc(var(--height) - 2 * var(--vertical-padding));
|
||||
font-family: var(--font-family-base);
|
||||
border-radius: 0.5em;
|
||||
line-height: 1;
|
||||
|
||||
background-color: var(--secondary-4);
|
||||
color: var(--text-muted);
|
||||
|
||||
// When inside a selected container, show the selected variant
|
||||
:global([aria-selected='true']) & {
|
||||
color: white;
|
||||
background-color: var(--primary);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -54,7 +54,7 @@
|
||||
{tab.title}
|
||||
</span>
|
||||
{#if tab.shortcut}
|
||||
<KeyboardShortcut shorcut={tab.shortcut} />
|
||||
<KeyboardShortcut shortcut={tab.shortcut} />
|
||||
{/if}
|
||||
</svelte:element>
|
||||
{/each}
|
||||
@ -82,7 +82,7 @@
|
||||
flex-flow: row nowrap;
|
||||
justify-content: center;
|
||||
white-space: nowrap;
|
||||
gap: 0.25rem;
|
||||
gap: 0.5rem;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
@ -106,13 +106,6 @@
|
||||
color: var(--text-title);
|
||||
background-color: var(--secondary-2);
|
||||
|
||||
:global(kbd) {
|
||||
color: white;
|
||||
box-shadow: none;
|
||||
border-color: var(--primary);
|
||||
background-color: var(--primary);
|
||||
}
|
||||
|
||||
&::after {
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
@ -94,7 +94,7 @@
|
||||
-->
|
||||
<label>
|
||||
<Switch checked={searchPanelState.overrideBrowserSearch} on:change={handleOverrideBrowserSearchChange} />
|
||||
<KeyboardShortcut shorcut={keyboardShortcut} />
|
||||
<KeyboardShortcut shortcut={keyboardShortcut} />
|
||||
</label>
|
||||
<Tooltip
|
||||
tooltip="When enabled, {formatShortcut(
|
||||
|
||||
@ -7,22 +7,6 @@
|
||||
const filters = tokens.term.filter((token): token is QueryFilter => token.type === 'filter')
|
||||
return filters.some(filter => filter.field.value === 'type')
|
||||
}
|
||||
|
||||
function inferOperatingSystem(userAgent: string): 'Windows' | 'MacOS' | 'Linux' | undefined {
|
||||
if (userAgent.includes('Win')) {
|
||||
return 'Windows'
|
||||
}
|
||||
|
||||
if (userAgent.includes('Mac')) {
|
||||
return 'MacOS'
|
||||
}
|
||||
|
||||
if (userAgent.includes('Linux')) {
|
||||
return 'Linux'
|
||||
}
|
||||
|
||||
return undefined
|
||||
}
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
@ -34,6 +18,7 @@
|
||||
import { page } from '$app/stores'
|
||||
import { getGraphQLClient } from '$lib/graphql'
|
||||
import Icon from '$lib/Icon.svelte'
|
||||
import KeyboardShortcut from '$lib/KeyboardShortcut.svelte'
|
||||
import LanguageIcon from '$lib/LanguageIcon.svelte'
|
||||
import Popover from '$lib/Popover.svelte'
|
||||
import RepoPopover, { fetchRepoPopoverData } from '$lib/repo/RepoPopover/RepoPopover.svelte'
|
||||
@ -77,7 +62,6 @@
|
||||
}
|
||||
})
|
||||
|
||||
$: resetModifier = inferOperatingSystem(navigator.userAgent) === 'MacOS' ? '⌥' : 'Alt'
|
||||
$: resetURL = resetFilters($page.url).toString()
|
||||
$: enableReset = selectedFilters.length > 0
|
||||
|
||||
@ -104,9 +88,10 @@
|
||||
<div class="header">
|
||||
<h3>Filter results</h3>
|
||||
{#if enableReset}
|
||||
<a href={resetURL}>
|
||||
<small>Reset all <kbd>{resetModifier} ⌫</kbd></small>
|
||||
</a>
|
||||
<div class="reset">
|
||||
<a href={resetURL}>Reset all</a>
|
||||
<KeyboardShortcut shortcut={{ key: 'alt+⌫' }} />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
@ -226,17 +211,9 @@
|
||||
h3 {
|
||||
margin: 0;
|
||||
}
|
||||
a {
|
||||
.reset {
|
||||
font-size: var(--font-size-tiny);
|
||||
margin-left: auto;
|
||||
line-height: 1;
|
||||
kbd {
|
||||
// TODO: use this style globally
|
||||
font-family: var(--font-family-base);
|
||||
color: var(--text-muted);
|
||||
background: var(--color-bg-1);
|
||||
box-shadow: inset 0 -2px 0 var(--border-color-2);
|
||||
border: 1px solid var(--border-color-2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,37 +1,17 @@
|
||||
<script lang="ts">
|
||||
import type { Action } from '$lib/branded'
|
||||
import { shortcutDisplayName } from '$lib/shared'
|
||||
import type { Keys } from '$lib/Hotkey'
|
||||
import KeyboardShortcut from '$lib/KeyboardShortcut.svelte'
|
||||
|
||||
export let action: Action
|
||||
export let shortcut: string
|
||||
|
||||
$: displayName = shortcutDisplayName(shortcut)
|
||||
export let shortcut: Keys
|
||||
</script>
|
||||
|
||||
Press <kbd>{displayName}</kbd> to
|
||||
Press <KeyboardShortcut {shortcut} inline /> to
|
||||
{#if action.type === 'completion'}
|
||||
<strong>add</strong> to your query
|
||||
<strong>add</strong> to your query.
|
||||
{:else if action.type === 'goto'}
|
||||
<strong>go to</strong> the suggestion
|
||||
<strong>go to</strong> the suggestion.
|
||||
{:else if action.type === 'command'}
|
||||
<strong>execute</strong> the command
|
||||
<strong>execute</strong> the command.
|
||||
{/if}
|
||||
|
||||
<style lang="scss">
|
||||
kbd {
|
||||
all: unset;
|
||||
// This is the code live on S2 but I can't ind it in our code base
|
||||
font-family: var(--code-font-family);
|
||||
font-size: var(--code-font-size);
|
||||
display: inline-block;
|
||||
line-height: 1.3333333333;
|
||||
height: 1.125rem;
|
||||
padding: 0 0.25rem;
|
||||
margin: 0 0.125rem;
|
||||
vertical-align: middle;
|
||||
border-radius: 3px;
|
||||
color: var(--body-color);
|
||||
background-color: var(--color-bg-2);
|
||||
box-shadow: inset 0 -2px 0 var(--color-bg-3);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -85,9 +85,13 @@
|
||||
{#if selectedOption}
|
||||
<div class="footer">
|
||||
<span>
|
||||
<ActionInfo action={selectedOption.action} shortcut="Enter" />{' '}
|
||||
<ActionInfo action={selectedOption.action} shortcut={{ key: 'enter' }} />
|
||||
{#if selectedOption.alternativeAction}
|
||||
<ActionInfo action={selectedOption.alternativeAction} shortcut="Mod+Enter" />
|
||||
{' '}
|
||||
<ActionInfo
|
||||
action={selectedOption.alternativeAction}
|
||||
shortcut={{ key: 'mod+enter', mac: 'cmd+enter' }}
|
||||
/>
|
||||
{/if}
|
||||
</span>
|
||||
<Icon icon={ILucideInfo} aria-hidden="true" inline />
|
||||
|
||||
@ -232,7 +232,7 @@
|
||||
<Icon icon={ILucideSquareSlash} inline aria-hidden />
|
||||
{:else}
|
||||
<span>Search files</span>
|
||||
<KeyboardShortcut shorcut={filesHotkey} inline={isCollapsed} />
|
||||
<KeyboardShortcut shortcut={filesHotkey} />
|
||||
{/if}
|
||||
</button>
|
||||
</Tooltip>
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
|
||||
import type { RepositoryGitRevAuthor } from './RepositoryRevPicker.gql'
|
||||
|
||||
export let icon: ComponentProps<Icon>['icon']|undefined = undefined
|
||||
export let icon: ComponentProps<Icon>['icon'] | undefined = undefined
|
||||
export let label: string
|
||||
export let author: RepositoryGitRevAuthor['author'] | null | undefined
|
||||
</script>
|
||||
|
||||
@ -42,21 +42,3 @@ button:focus-visible {
|
||||
input:focus-visible {
|
||||
box-shadow: 0 0 0 2px var(--primary-2);
|
||||
}
|
||||
|
||||
kbd {
|
||||
display: inline;
|
||||
height: 1.125rem;
|
||||
margin: 0 0.125rem;
|
||||
padding: 0 0.25rem 0.1rem 0.25rem;
|
||||
line-height: (16/12);
|
||||
vertical-align: middle;
|
||||
|
||||
font-size: var(--code-font-size);
|
||||
font-family: var(--monospace-font-family);
|
||||
color: var(--text-muted);
|
||||
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--border-color-2);
|
||||
background-color: var(--color-bg-1);
|
||||
box-shadow: inset 0 -2px 0 var(--color-bg-2);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user