mirror of
https://github.com/sourcegraph/sourcegraph.git
synced 2026-02-06 17:31:43 +00:00
Svelte: File view visual updates (#62126)
* New panel color added. * File header styling. * Shadow added to sidebar panel. * Svelte:Visual updates made to file view. * Svelte overrides removed to specific SCSS file rather than global. * More overrides moved to svelte-overrides.scss. * Fix stylelint problems * Fix CI issues --------- Co-authored-by: Vova Kulikov <vova@sourcegraph.com> Co-authored-by: Felix Kling <felix@felix-kling.de>
This commit is contained in:
Taiyab Raja
GitHub
parent
503f2e563b
commit
c146d937c6
@ -2,7 +2,7 @@
|
||||
"extends": ["../../.stylelintrc.json"],
|
||||
"overrides": [
|
||||
{
|
||||
"files": ["src/routes/styles.scss", "src/lib/**/*.scss"],
|
||||
"files": ["src/**/*.scss"],
|
||||
"rules": {
|
||||
"@sourcegraph/filenames-match-regex": null
|
||||
}
|
||||
|
||||
@ -56,7 +56,7 @@
|
||||
backgroundColor: 'transparent',
|
||||
},
|
||||
'.cm-gutters': {
|
||||
'background-color': 'var(--code-bg)',
|
||||
'background-color': 'transparent',
|
||||
border: 'none',
|
||||
color: 'var(--line-number-color)',
|
||||
},
|
||||
|
||||
@ -98,7 +98,7 @@
|
||||
letter-spacing: normal;
|
||||
margin: 0;
|
||||
min-height: 2rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.125rem;
|
||||
color: var(--body-color);
|
||||
text-transform: none;
|
||||
@ -115,13 +115,13 @@
|
||||
}
|
||||
|
||||
&[aria-selected='true'] {
|
||||
font-weight: 700;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: attr(data-tab-title);
|
||||
display: block;
|
||||
font-weight: 700;
|
||||
font-weight: 500;
|
||||
height: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
@ -14,18 +14,18 @@
|
||||
|
||||
<script lang="ts">
|
||||
import { mdiMenu } from '@mdi/js'
|
||||
|
||||
import { browser } from '$app/environment'
|
||||
|
||||
import { Badge, Button } from '$lib/wildcard'
|
||||
import { mark } from '$lib/images'
|
||||
import Icon from '$lib/Icon.svelte'
|
||||
import Popover from '$lib/Popover.svelte'
|
||||
import { mainNavigation } from '$lib/navigation/mainNavigation'
|
||||
import { mark } from '$lib/images'
|
||||
import GlobalSidebarNavigation from '$lib/navigation/GlobalSidebarNavigation.svelte'
|
||||
import { mainNavigation } from '$lib/navigation/mainNavigation'
|
||||
import MainNavigationEntry from '$lib/navigation/MainNavigationEntry.svelte'
|
||||
import Popover from '$lib/Popover.svelte'
|
||||
import { Badge, Button } from '$lib/wildcard'
|
||||
|
||||
import UserMenu from './UserMenu.svelte'
|
||||
import { GlobalNavigation_User } from './GlobalNavigation.gql'
|
||||
import UserMenu from './UserMenu.svelte'
|
||||
|
||||
export let authenticatedUser: GlobalNavigation_User | null | undefined
|
||||
export let handleOptOut: (() => Promise<void>) | undefined
|
||||
@ -108,7 +108,7 @@
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.5rem;
|
||||
border-bottom: 1px solid var(--border-color-2);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
background-color: var(--color-bg-1);
|
||||
|
||||
position: relative;
|
||||
|
||||
@ -1,14 +1,15 @@
|
||||
<script lang="ts">
|
||||
import { mdiDotsHorizontal } from '@mdi/js'
|
||||
|
||||
import { page } from '$app/stores'
|
||||
import { overflow } from '$lib/dom'
|
||||
import Icon from '$lib/Icon.svelte'
|
||||
import { DropdownMenu } from '$lib/wildcard'
|
||||
import { mdiDotsHorizontal } from '@mdi/js'
|
||||
import { getButtonClassName } from '$lib/wildcard/Button'
|
||||
|
||||
import SidebarToggleButton from './SidebarToggleButton.svelte'
|
||||
import { sidebarOpen } from './stores'
|
||||
import { navFromPath } from './utils'
|
||||
import { getButtonClassName } from '$lib/wildcard/Button'
|
||||
import { overflow } from '$lib/dom'
|
||||
|
||||
$: breadcrumbs = navFromPath($page.params.path, $page.params.repo)
|
||||
</script>
|
||||
@ -38,7 +39,7 @@
|
||||
{' '}
|
||||
<span class:last={index === breadcrumbs.length - 1}>
|
||||
{#if index > 0}
|
||||
/
|
||||
<span class="slash">/</span>
|
||||
{/if}
|
||||
{#if path}
|
||||
<a href={path}>{name}</a>
|
||||
@ -75,6 +76,7 @@
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
background-color: var(--color-bg-1);
|
||||
box-shadow: var(--fileheader-shadow);
|
||||
z-index: 1;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
@ -99,7 +101,11 @@
|
||||
margin: 0;
|
||||
|
||||
a {
|
||||
color: var(--body-color);
|
||||
color: var(--text-body);
|
||||
}
|
||||
|
||||
.slash {
|
||||
color: var(--text-disabled);
|
||||
}
|
||||
|
||||
span {
|
||||
@ -107,7 +113,7 @@
|
||||
}
|
||||
|
||||
.last {
|
||||
font-weight: bold;
|
||||
color: var(--text-title);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -18,9 +18,9 @@
|
||||
|
||||
import type { LayoutData, Snapshot } from './$types'
|
||||
import FileTree from './FileTree.svelte'
|
||||
import RepositoryRevPicker from './RepositoryRevPicker.svelte'
|
||||
import { createFileTreeStore } from './fileTreeStore'
|
||||
import { type GitHistory_HistoryConnection } from './layout.gql'
|
||||
import RepositoryRevPicker from './RepositoryRevPicker.svelte'
|
||||
|
||||
interface Capture {
|
||||
selectedTab: number | null
|
||||
@ -91,7 +91,7 @@
|
||||
$: lastCommit = $lastCommitQuery?.data?.repository?.lastCommit?.ancestors?.nodes[0] ?? null
|
||||
|
||||
const sidebarSize = getSeparatorPosition('repo-sidebar', 0.2)
|
||||
$: sidebarWidth = `max(200px, ${$sidebarSize * 100}%)`
|
||||
$: sidebarWidth = `max(320px, ${$sidebarSize * 100}%)`
|
||||
</script>
|
||||
|
||||
<section>
|
||||
@ -171,9 +171,11 @@
|
||||
}
|
||||
display: none;
|
||||
overflow: hidden;
|
||||
background-color: var(--body-bg);
|
||||
background-color: var(--color-bg-1);
|
||||
padding: 0.5rem;
|
||||
padding-bottom: 0;
|
||||
box-shadow: var(--sidebar-shadow);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.main {
|
||||
@ -201,7 +203,7 @@
|
||||
.bottom-panel {
|
||||
background-color: var(--code-bg);
|
||||
--align-tabs: flex-start;
|
||||
border-top: 1px solid var(--border-color);
|
||||
box-shadow: var(--bottom-panel-shadow);
|
||||
max-height: 50vh;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
|
||||
@ -8,6 +8,7 @@
|
||||
|
||||
import { afterNavigate, goto, preloadData } from '$app/navigation'
|
||||
import { page } from '$app/stores'
|
||||
import type { ScrollSnapshot } from '$lib/codemirror/utils'
|
||||
import CodeMirrorBlob from '$lib/CodeMirrorBlob.svelte'
|
||||
import { isErrorLike, SourcegraphURL, type LineOrPositionOrRange, pluralize } from '$lib/common'
|
||||
import { toGraphQLResult } from '$lib/graphql'
|
||||
@ -17,6 +18,7 @@
|
||||
import FileDiff from '$lib/repo/FileDiff.svelte'
|
||||
import FileHeader from '$lib/repo/FileHeader.svelte'
|
||||
import FileIcon from '$lib/repo/FileIcon.svelte'
|
||||
import OpenInEditor from '$lib/repo/open-in-editor/OpenInEditor.svelte'
|
||||
import Permalink from '$lib/repo/Permalink.svelte'
|
||||
import { createCodeIntelAPI } from '$lib/shared'
|
||||
import { formatBytes } from '$lib/utils'
|
||||
@ -26,9 +28,7 @@
|
||||
import type { PageData, Snapshot } from './$types'
|
||||
import FileViewModeSwitcher from './FileViewModeSwitcher.svelte'
|
||||
import OpenInCodeHostAction from './OpenInCodeHostAction.svelte'
|
||||
import OpenInEditor from '$lib/repo/open-in-editor/OpenInEditor.svelte'
|
||||
import { toViewMode, ViewMode } from './util'
|
||||
import type { ScrollSnapshot } from '$lib/codemirror/utils'
|
||||
|
||||
export let data: PageData
|
||||
|
||||
@ -247,6 +247,7 @@
|
||||
flex-direction: column;
|
||||
overflow: auto;
|
||||
flex: 1;
|
||||
background-color: var(--color-bg-1);
|
||||
|
||||
&.compare {
|
||||
flex-direction: column;
|
||||
@ -260,7 +261,8 @@
|
||||
}
|
||||
|
||||
.file-info {
|
||||
padding: 0.5rem 0.5rem;
|
||||
background: var(--color-bg-1);
|
||||
padding: 0.5rem;
|
||||
color: var(--text-muted);
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
@import 'wildcard/src/global-styles/base.scss';
|
||||
@import 'svelte-overrides.scss';
|
||||
|
||||
.match-highlight {
|
||||
background-color: var(--mark-bg);
|
||||
|
||||
41
client/web-sveltekit/src/routes/svelte-overrides.scss
Normal file
41
client/web-sveltekit/src/routes/svelte-overrides.scss
Normal file
@ -0,0 +1,41 @@
|
||||
// This file defines all the Svelte overrides that eventually get propogated into the global Wildcard JS design system.
|
||||
// Treat this file as almost a set of recommendations to what we may want to shift all of Wildcard to use.
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
// Theme Light
|
||||
|
||||
.theme-light {
|
||||
// Colors
|
||||
--color-bg-1: var(--white);
|
||||
|
||||
// Shadows
|
||||
--sidebar-shadow: 0 79px 22px 0 rgba(30, 4, 47, 0), 0 51px 20 0 rgba(30, 4, 47, 0.01),
|
||||
0 29px 17px 0 rgba(30, 4, 47, 0.02), 0 13px 13px 0 rgba(30, 4, 47, 0.03), 0 3px 7px 0 rgba(30, 4, 47, 0.04);
|
||||
--fileheader-shadow: 0 6px 2px 0 rgba(0, 0, 0, 0), 0 4px 2px 0 rgba(0, 0, 0, 0.01), 0 2px 1px 0 rgba(0, 0, 0, 0.02),
|
||||
0 1px 1px 0 rgba(0, 0, 0, 0.03), 0 0 1px 0 rgba(0, 0, 0, 0.04);
|
||||
--bottom-panel-shadow: 0 -37px 10 0 rgba(1, 6, 12, 0), 0 -24px 10 0 rgba(1, 6, 12, 0.01),
|
||||
0 -13px 8px 0 rgba(1, 6, 12, 0.02), 0 -6px 6px 0 rgba(1, 6, 12, 0.03), 0 -1px 3px 0 rgba(1, 6, 12, 0.04);
|
||||
}
|
||||
|
||||
// Theme Dark
|
||||
|
||||
.theme-dark {
|
||||
// Colors
|
||||
--color-bg-1: var(--gray-12);
|
||||
|
||||
// Shadows
|
||||
--sidebar-shadow: 0 318px 89px 0 rgba(12, 1, 19, 0.01), 0 203px 81px 0 rgba(12, 1, 19, 0.05),
|
||||
0 114px 69px 0 rgba(12, 1, 19, 0.16), 0 51px 51px 0 rgba(12, 1, 19, 0.27), 0 13px 28px 0 rgba(12, 1, 19, 0.31);
|
||||
--fileheader-shadow: 0 6px 2px 0 rgba(15, 2, 24, 0.01), 0 4px 2px 0 rgba(15, 2, 24, 0.05),
|
||||
0 2px 1px 0 rgba(15, 2, 24, 0.16), 0 1px 1px 0 rgba(15, 2, 24, 0.27), 0 0 1px 0 rgba(15, 2, 24, 0.31);
|
||||
--bottom-panel-shadow: 0 -37px 10 0 rgba(1, 6, 12, 0.01), 0 -24px 10 0 rgba(1, 6, 12, 0.05),
|
||||
0 -13px 8px 0 rgba(1, 6, 12, 0.16), 0 -6px 6px 0 rgba(1, 6, 12, 0.27), 0 -1px 3px 0 rgba(1, 6, 12, 0.31);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user