gitbutlerapp/gitbutler
1
1
Fork 0
mirror of https://github.com/gitbutlerapp/gitbutler.git synced 2024-12-21 00:21:35 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2579 from gitbutlerapp/refactor-tag-component-and-status-tag

Browse Source 
Refactor Tag component and status-tag
This commit is contained in:
Pavel Laptev 2024-02-09 12:13:54 +01:00 committed by GitHub
commit 9e95fdb304
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 42 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
gitbutler-ui/src/lib/components/BranchHeader.svelte
View File

@ -130,46 +130,44 @@
<div class="header__remote-branch"> <div class="header__remote-branch">
{#if !branch.upstream} {#if !branch.upstream}
{#if !branch.active} {#if !branch.active}
<div <Tag
class="status-tag text-base-11 text-semibold unapplied" icon="virtual-branch-small"
use:tooltip={'These changes are stashed away from your working directory.'} color="light"
help="These changes are stashed away from your working directory."
reversedDirection>unapplied</Tag
> >
<Icon name="removed-branch-small" /> unapplied
</div>
{:else if hasIntegratedCommits} {:else if hasIntegratedCommits}
<div <Tag
class="status-tag text-base-11 text-semibold integrated" icon="removed-branch-small"
use:tooltip={'These changes have been integrated upstream, update your workspace to make this lane disappear.'} color="success"
help="These changes have been integrated upstream, update your workspace to make this lane disappear."
reversedDirection>integrated</Tag
> >
<Icon name="removed-branch-small" /> integrated
</div>
{:else} {:else}
<div <Tag
class="status-tag text-base-11 text-semibold pending" icon="virtual-branch-small"
use:tooltip={'These changes are in your working directory.'} color="light"
help="These changes are in your working directory."
reversedDirection>virtual</Tag
> >
<Icon name="virtual-branch-small" /> virtual
</div>
{/if} {/if}
{#if !isUnapplied} {#if !isUnapplied}
<div <Tag
class="pending-name" disabled
use:tooltip={'Branch name that will be used when pushing. You can change it from the lane menu.'} help="Branch name that will be used when pushing. You can change it from the lane menu."
> >
<span class="text-base-11 text-semibold">
origin/{branch.upstreamName origin/{branch.upstreamName
? branch.upstreamName ? branch.upstreamName
: normalizeBranchName(branch.name)} : normalizeBranchName(branch.name)}</Tag
</span> >
</div>
{/if} {/if}
{:else} {:else}
<div <Tag
class="status-tag text-base-11 text-semibold remote" color="dark"
use:tooltip={'At least some of your changes have been pushed'} icon="remote-branch-small"
help="At least some of your changes have been pushed"
reversedDirection>remote</Tag
> >
<Icon name="remote-branch-small" /> remote
</div>
<Tag <Tag
icon="open-link" icon="open-link"
color="ghost" color="ghost"
@ -462,56 +460,6 @@
align-items: center; align-items: center;
} }
.status-tag {
cursor: default;
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-6) var(--space-2) var(--space-4);
border-radius: var(--radius-m);
}
.pending {
color: var(--clr-theme-scale-pop-30);
background: var(--clr-theme-scale-pop-80);
}
.pending-name {
background: color-mix(in srgb, var(--clr-theme-scale-ntrl-50) 10%, transparent);
border-radius: var(--radius-m);
line-height: 120%;
height: var(--space-20);
display: flex;
align-items: center;
padding: 0 var(--space-6);
overflow: hidden;
& span {
overflow: hidden;
text-overflow: ellipsis;
}
}
.pending {
color: var(--clr-theme-scale-ntrl-30);
background: color-mix(in srgb, var(--clr-theme-scale-ntrl-50) 20%, transparent);
}
.integrated {
color: var(--clr-theme-succ-on-element);
background: var(--clr-theme-succ-element);
}
.remote {
color: var(--clr-theme-scale-ntrl-100);
background: var(--clr-theme-scale-ntrl-40);
}
.unapplied {
color: var(--clr-theme-scale-ntrl-30);
background: var(--clr-theme-scale-ntrl-80);
}
.pr-status { .pr-status {
cursor: default; cursor: default;
} }

31
gitbutler-ui/src/lib/components/Tag.svelte
View File

@ -77,7 +77,7 @@
} }
.clickable { .clickable {
cursor: default; cursor: default;
&:hover { &:not(.not-button):hover {
background: var(--clr-theme-container-sub); background: var(--clr-theme-container-sub);
} }
} }
@ -86,7 +86,7 @@
.ghost { .ghost {
color: var(--clr-theme-scale-ntrl-40); color: var(--clr-theme-scale-ntrl-40);
&:hover { &:not(.not-button):hover {
background: color-mix(in srgb, var(--clr-core-ntrl-50), transparent 85%); background: color-mix(in srgb, var(--clr-core-ntrl-50), transparent 85%);
} }
&.tag-border { &.tag-border {
@ -97,7 +97,7 @@
.light { .light {
color: var(--clr-theme-scale-ntrl-40); color: var(--clr-theme-scale-ntrl-40);
background: color-mix(in srgb, var(--clr-core-ntrl-50), transparent 85%); background: color-mix(in srgb, var(--clr-core-ntrl-50), transparent 85%);
&:hover { &:not(.not-button):hover {
background: color-mix(in srgb, var(--clr-core-ntrl-50), transparent 75%); background: color-mix(in srgb, var(--clr-core-ntrl-50), transparent 75%);
} }
&.tag-border { &.tag-border {
@ -108,7 +108,7 @@
.dark { .dark {
color: var(--clr-theme-scale-ntrl-100); color: var(--clr-theme-scale-ntrl-100);
background: var(--clr-theme-scale-ntrl-40); background: var(--clr-theme-scale-ntrl-40);
&:hover { &:not(.not-button):hover {
background: var(--clr-theme-scale-ntrl-30); background: var(--clr-theme-scale-ntrl-30);
} }
} }
@ -116,7 +116,7 @@
.success { .success {
color: var(--clr-theme-scale-succ-20); color: var(--clr-theme-scale-succ-20);
background: color-mix(in srgb, var(--clr-core-succ-50), transparent 80%); background: color-mix(in srgb, var(--clr-core-succ-50), transparent 80%);
&:hover { &:not(.not-button):hover {
background: color-mix(in srgb, var(--clr-core-succ-50), transparent 70%); background: color-mix(in srgb, var(--clr-core-succ-50), transparent 70%);
} }
&.tag-border { &.tag-border {
@ -125,7 +125,7 @@
&.filled { &.filled {
color: var(--clr-theme-succ-on-element); color: var(--clr-theme-succ-on-element);
background: var(--clr-theme-succ-element); background: var(--clr-theme-succ-element);
&:hover { &:not(.not-button):hover {
background: var(--clr-theme-succ-element-dim); background: var(--clr-theme-succ-element-dim);
} }
} }
@ -134,7 +134,7 @@
.error { .error {
color: var(--clr-theme-scale-err-20); color: var(--clr-theme-scale-err-20);
background: color-mix(in srgb, var(--clr-core-err-50), transparent 80%); background: color-mix(in srgb, var(--clr-core-err-50), transparent 80%);
&:hover { &:not(.not-button):hover {
background: color-mix(in srgb, var(--clr-core-err-50), transparent 70%); background: color-mix(in srgb, var(--clr-core-err-50), transparent 70%);
} }
&.tag-border { &.tag-border {
@ -143,7 +143,7 @@
&.filled { &.filled {
color: var(--clr-theme-err-on-element); color: var(--clr-theme-err-on-element);
background: var(--clr-theme-err-element); background: var(--clr-theme-err-element);
&:hover { &:not(.not-button):hover {
background: var(--clr-theme-err-element-dim); background: var(--clr-theme-err-element-dim);
} }
} }
@ -152,7 +152,7 @@
.warning { .warning {
color: var(--clr-theme-scale-warn-20); color: var(--clr-theme-scale-warn-20);
background: color-mix(in srgb, var(--clr-core-warn-50), transparent 80%); background: color-mix(in srgb, var(--clr-core-warn-50), transparent 80%);
&:hover { &:not(.not-button):hover {
background: color-mix(in srgb, var(--clr-core-warn-50), transparent 70%); background: color-mix(in srgb, var(--clr-core-warn-50), transparent 70%);
} }
&.tag-border { &.tag-border {
@ -161,7 +161,7 @@
&.filled { &.filled {
color: var(--clr-theme-warn-on-element); color: var(--clr-theme-warn-on-element);
background: var(--clr-theme-warn-element); background: var(--clr-theme-warn-element);
&:hover { &:not(.not-button):hover {
background: var(--clr-theme-warn-element-dim); background: var(--clr-theme-warn-element-dim);
} }
} }
@ -170,7 +170,7 @@
.purple { .purple {
color: var(--clr-theme-scale-purple-20); color: var(--clr-theme-scale-purple-20);
background: color-mix(in srgb, var(--clr-core-purple-50), transparent 80%); background: color-mix(in srgb, var(--clr-core-purple-50), transparent 80%);
&:hover { &:not(.not-button):hover {
background: color-mix(in srgb, var(--clr-core-purple-50), transparent 70%); background: color-mix(in srgb, var(--clr-core-purple-50), transparent 70%);
} }
&.tag-border { &.tag-border {
@ -179,7 +179,7 @@
&.filled { &.filled {
color: var(--clr-theme-purple-on-element); color: var(--clr-theme-purple-on-element);
background: var(--clr-theme-purple-element); background: var(--clr-theme-purple-element);
&:hover { &:not(.not-button):hover {
background: var(--clr-theme-purple-element-dim); background: var(--clr-theme-purple-element-dim);
} }
} }
@ -188,7 +188,7 @@
.pop { .pop {
color: var(--clr-theme-scale-pop-20); color: var(--clr-theme-scale-pop-20);
background: color-mix(in srgb, var(--clr-core-pop-50), transparent 80%); background: color-mix(in srgb, var(--clr-core-pop-50), transparent 80%);
&:hover { &:not(.not-button):hover {
background: color-mix(in srgb, var(--clr-core-pop-50), transparent 70%); background: color-mix(in srgb, var(--clr-core-pop-50), transparent 70%);
} }
&.tag-border { &.tag-border {
@ -197,7 +197,7 @@
&.filled { &.filled {
color: var(--clr-theme-pop-on-element); color: var(--clr-theme-pop-on-element);
background: var(--clr-theme-pop-element); background: var(--clr-theme-pop-element);
&:hover { &:not(.not-button):hover {
background: var(--clr-theme-pop-element-dim); background: var(--clr-theme-pop-element-dim);
} }
} }
@ -206,11 +206,10 @@
/* modifiers */ /* modifiers */
.not-button { .not-button {
pointer-events: none; user-select: none;
} }
.disabled { .disabled {
pointer-events: none;
background-color: color-mix(in srgb, var(--clr-theme-scale-ntrl-50) 10%, transparent); background-color: color-mix(in srgb, var(--clr-theme-scale-ntrl-50) 10%, transparent);
color: var(--clr-core-ntrl-50); color: var(--clr-core-ntrl-50);
} }