Skip to content

Commit 444b03f

Browse files
PavelLaptevPavelLaptev
authored
style(sidebar): Update padding and color for PR tags in SidebarEntry (#4811)
* style(sidebar): Update padding and color for PR tags in SidebarEntry * Tooltip update
1 parent 5821d92 commit 444b03f

File tree

7 files changed

+105
-35
lines changed

7 files changed

+105
-35
lines changed

‎apps/desktop/src/lib/pr/PullRequestCard.svelte‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -231,7 +231,6 @@
231231
!$pr.mergeable ||
232232
['dirty', 'unknown', 'blocked', 'behind'].includes($pr.mergeableState)}
233233
loading={isMerging}
234-
tooltip="Merge pull request and refresh"
235234
on:click={async (e) => {
236235
if (!$pr) return;
237236
isMerging = true;

‎packages/ui/src/lib/SidebarEntry.svelte‎

Lines changed: 19 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@
6363
</h4>
6464

6565
<div class="row">
66-
<div class="row-group authors-and-tags">
66+
<div class="authors-and-tags">
6767
{@render authorAvatars()}
6868
<div class="branch-remotes">
6969
<!-- NEED API -->
@@ -187,12 +187,6 @@
187187
}
188188
}
189189
190-
.authors-and-tags {
191-
:global(& > *:first-child:empty) {
192-
display: none;
193-
}
194-
}
195-
196190
/* ROW */
197191
198192
.row {
@@ -209,22 +203,34 @@
209203
gap: 4px;
210204
}
211205
206+
.authors-and-tags {
207+
display: flex;
208+
align-items: center;
209+
gap: 6px;
210+
}
211+
212212
/* TAG */
213213
214214
.branch-tag {
215215
display: flex;
216216
align-items: center;
217217
justify-content: center;
218218
gap: 2px;
219-
padding: 0 4px;
219+
padding: 4px;
220220
height: 16px;
221221
border-radius: var(--radius-s);
222222
}
223223
224224
.tag-local,
225225
.tag-remote {
226-
background-color: var(--clr-theme-ntrl-soft-hover);
227-
color: var(--clr-text-1);
226+
border: 1px solid var(--clr-border-2);
227+
/* background-color: color-mix(in srgb, var(--clr-scale-ntrl-60), transparent 70%);
228+
color: var(--clr-text-1); */
229+
}
230+
231+
.tag-pr,
232+
.tag-draft-pr {
233+
padding: 0 2px 0 4px;
228234
}
229235
230236
.tag-pr {
@@ -234,7 +240,8 @@
234240
235241
.tag-draft-pr {
236242
background-color: var(--clr-theme-ntrl-soft);
237-
color: var(--clr-theme-ntrl-on-soft);
243+
color: var(--clr-text-2);
244+
border: 1px solid var(--clr-border-2);
238245
}
239246
240247
.tag-applied {
@@ -280,7 +287,7 @@
280287
281288
.branch-remotes {
282289
display: flex;
283-
gap: 6px;
290+
gap: 4px;
284291
}
285292
286293
.branch-name {

‎packages/ui/src/lib/Tooltip.svelte‎

Lines changed: 68 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
children: Snippet;
1717
}
1818
19-
const { text, delay = 700, align = 'center', position = 'bottom', children }: Props = $props();
19+
const { text, delay = 700, align, position, children }: Props = $props();
2020
2121
let targetEl: HTMLElement | undefined = $state();
2222
let tooltipEl: HTMLElement | undefined = $state();
@@ -38,6 +38,26 @@
3838
show = false;
3939
}
4040
41+
function isNoSpaceOnRight() {
42+
if (!targetEl || !tooltipEl) return false;
43+
44+
const tooltipRect = tooltipEl.getBoundingClientRect();
45+
const targetChild = targetEl.children[0];
46+
const targetRect = targetChild.getBoundingClientRect();
47+
48+
return targetRect.left + tooltipRect.width / 2 > window.innerWidth;
49+
}
50+
51+
function isNoSpaceOnLeft() {
52+
if (!targetEl || !tooltipEl) return false;
53+
54+
const tooltipRect = tooltipEl.getBoundingClientRect();
55+
const targetChild = targetEl.children[0];
56+
const targetRect = targetChild.getBoundingClientRect();
57+
58+
return targetRect.left - tooltipRect.width / 2 < 0;
59+
}
60+
4161
function adjustPosition() {
4262
if (!targetEl || !tooltipEl) return;
4363
@@ -52,27 +72,61 @@
5272
let transformOriginLeft = 'center';
5373
const gap = 4;
5474
55-
if (position === 'bottom') {
56-
top = targetRect.bottom + window.scrollY + gap;
57-
58-
transformOriginTop = 'top';
59-
} else if (position === 'top') {
60-
top = targetRect.top - tooltipRect.height + window.scrollY - gap;
61-
62-
transformOriginTop = 'bottom';
63-
}
64-
65-
if (align === 'start') {
75+
function alignLeft() {
6676
left = targetRect.left + window.scrollX;
6777
transformOriginLeft = 'left';
68-
} else if (align === 'end') {
78+
}
79+
80+
function alignRight() {
6981
left = targetRect.right - tooltipRect.width + window.scrollX;
7082
transformOriginLeft = 'right';
71-
} else if (align === 'center') {
83+
}
84+
85+
function alignCenter() {
7286
left = targetRect.left + targetRect.width / 2 - tooltipRect.width / 2 + window.scrollX;
7387
transformOriginLeft = 'center';
7488
}
7589
90+
function positionTop() {
91+
top = targetRect.top - tooltipRect.height + window.scrollY - gap;
92+
transformOriginTop = 'bottom';
93+
}
94+
95+
function positionBottom() {
96+
top = targetRect.bottom + window.scrollY + gap;
97+
transformOriginTop = 'top';
98+
}
99+
100+
// Vertical position
101+
if (position) {
102+
if (position === 'bottom') {
103+
positionBottom();
104+
} else if (position === 'top') {
105+
positionTop();
106+
}
107+
} else {
108+
positionBottom();
109+
}
110+
111+
// Auto check horizontal position
112+
if (align) {
113+
if (align === 'start') {
114+
alignLeft();
115+
} else if (align === 'end') {
116+
alignRight();
117+
} else if (align === 'center') {
118+
alignCenter();
119+
}
120+
} else {
121+
if (isNoSpaceOnLeft()) {
122+
alignLeft();
123+
} else if (isNoSpaceOnRight()) {
124+
alignRight();
125+
} else {
126+
alignCenter();
127+
}
128+
}
129+
76130
tooltipEl.style.top = `${top}px`;
77131
tooltipEl.style.left = `${left}px`;
78132
tooltipEl.style.transformOrigin = `${transformOriginTop} ${transformOriginLeft}`;

‎packages/ui/src/lib/avatar/Avatar.svelte‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,21 @@
11
<script lang="ts">
2-
import Tooltip from '$lib/Tooltip.svelte';
2+
import Tooltip, { type TooltipAlign, type TooltipPosition } from '$lib/Tooltip.svelte';
33
import { stringToColor } from '$lib/utils/stringToColor';
44
55
interface Props {
66
srcUrl: string;
77
tooltip: string;
8+
tooltipAlign?: TooltipAlign;
9+
tooltipPosition?: TooltipPosition;
810
size?: 'small' | 'medium';
911
}
1012
1113
let isLoaded = $state(false);
1214
13-
const { srcUrl, tooltip, size = 'small' }: Props = $props();
15+
const { srcUrl, tooltip, tooltipAlign, tooltipPosition, size = 'small' }: Props = $props();
1416
</script>
1517

16-
<Tooltip text={tooltip}>
18+
<Tooltip text={tooltip} align={tooltipAlign} position={tooltipPosition}>
1719
<div class="image-wrapper {size}" style:background-color={stringToColor(tooltip)}>
1820
<img
1921
class="avatar"

‎packages/ui/src/stories/avatar/AvatarGrouping.stories.ts‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,11 @@ type Story = StoryObj<typeof meta>;
1010

1111
export const AvatarGroup: Story = {
1212
args: {
13-
maxAvatars: 3,
13+
maxAvatars: 6,
1414
avatars: [
1515
{
1616
srcUrl: 'https://avatars.githubusercontent.com/u/76307?s=80&v=4',
17-
name: 'Davo'
17+
name: 'Sebastian Markbåge'
1818
},
1919
{
2020
srcUrl: 'https://gravatar.com/avatar/f43ef760d895a84ca7bb35ff6f4c6b7c',
@@ -23,6 +23,14 @@ export const AvatarGroup: Story = {
2323
{
2424
srcUrl: 'https://avatars.githubusercontent.com/u/869934?s=80&v=4',
2525
name: 'Benjamin den Boer'
26+
},
27+
{
28+
srcUrl: 'https://avatars.githubusercontent.com/u/14818017?s=64&v=4',
29+
name: 'Paperstick'
30+
},
31+
{
32+
srcUrl: 'https://avatars.githubusercontent.com/u/11708259?s=64&v=4',
33+
name: 'Andy Hook'
2634
}
2735
]
2836
}
@@ -34,7 +42,7 @@ export const AvatarGroupMany: Story = {
3442
avatars: [
3543
{
3644
srcUrl: 'https://avatars.githubusercontent.com/u/76307?s=80&v=4',
37-
name: 'Davo'
45+
name: 'Sebastian Markbåge'
3846
},
3947
{
4048
srcUrl: 'https://gravatar.com/avatar/f43ef760d895a84ca7bb35ff6f4c6b7c',

‎packages/ui/src/stories/sidebarEntry/DemoSidebarEntry.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
avatars={[
3030
{
3131
srcUrl: 'https://avatars.githubusercontent.com/u/76307?s=80&v=4',
32-
name: 'Davo'
32+
name: 'Sebastian Markbåge'
3333
},
3434
{
3535
srcUrl: 'https://gravatar.com/avatar/f43ef760d895a84ca7bb35ff6f4c6b7c',

‎packages/ui/src/stories/tooltip/DemoTooltip.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66

77
<div class="wrapper">
88
<p class="text-13 text">
9-
hello world! Here is a <Tooltip text={props.text}>
9+
hello world! Here is a <Tooltip text={props.text} align={props.align} position={props.position}>
1010
<span class="tooltip-text">tooltip</span>
1111
</Tooltip> for you.
1212
</p>

0 commit comments

Comments
 (0)