Skip to content
This repository was archived by the owner on Sep 30, 2024. It is now read-only.

Commit 4087e1a

Browse files
authored
Svelte: repo header followups (#63319)
Two followups from implementing the repo menu: 1) Remove the rounded corners from the trigger button to match the rest of the header 2) Add an external link icon to the code host link
1 parent d4948d2 commit 4087e1a

File tree

1 file changed

+24
-6
lines changed

1 file changed

+24
-6
lines changed

client/web-sveltekit/src/routes/[...repo=reporev]/RepoMenu.svelte

Lines changed: 24 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
export let externalServiceKind: string | undefined
2020
</script>
2121

22-
<DropdownMenu triggerButtonClass={getButtonClassName({ variant: 'text' })}>
22+
<DropdownMenu triggerButtonClass="{getButtonClassName({ variant: 'text' })} triggerButton">
2323
<svelte:fragment slot="trigger">
2424
<div class="trigger">
2525
<CodeHostIcon repository={repoName} codeHost={externalServiceKind} />
@@ -62,16 +62,22 @@
6262
View on code host
6363
{/if}
6464
</small>
65-
<div>
65+
<div class="repo-name">
6666
<CodeHostIcon repository={repoName} codeHost={externalServiceKind} />
6767
<span>{displayRepoName}</span>
6868
</div>
69+
<div class="external-link-icon">
70+
<Icon icon={ILucideExternalLink} aria-hidden />
71+
</div>
6972
</div>
7073
</MenuLink>
7174
{/if}
7275
</DropdownMenu>
7376

7477
<style lang="scss">
78+
:global(.triggerButton) {
79+
border-radius: 0;
80+
}
7581
.trigger {
7682
--icon-color: currentColor;
7783
@@ -111,18 +117,30 @@
111117
.code-host-item {
112118
--icon-color: currentColor;
113119
114-
display: flex;
115-
flex-direction: column;
120+
display: grid;
116121
gap: 0.25rem;
122+
align-items: center;
123+
grid-template-columns: 1fr min-content;
124+
grid-template-rows: min-content min-content;
117125
118126
small {
119127
color: var(--text-muted);
128+
grid-column: 1;
129+
grid-row: 1;
120130
}
121131
122-
div {
132+
div.repo-name {
133+
grid-column: 1;
134+
grid-row: 2;
123135
display: flex;
124-
gap: 0.5em;
136+
gap: 0.5rem;
125137
align-items: center;
126138
}
139+
140+
div.external-link-icon {
141+
grid-column: 2;
142+
grid-row: 1 / span 2;
143+
--icon-size: 1rem;
144+
}
127145
}
128146
</style>

0 commit comments

Comments
 (0)