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

refactor: update status tags and tooltips in UI

Browse Source 
- Removed duplicate icons and unnecessary div elements
- Replaced div elements with custom Tag components for better consistency and readability
- Updated tooltips for each status tag to provide clearer information to the user
- Updated CSS selector to exclude elements with the "not-button" class from hover effect
This commit is contained in:
Pavel Laptev 2024-02-09 12:11:21 +01:00 committed by GitButler
parent 3251e15d40
commit 77646b66f7
2 changed files with 42 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -130,46 +130,44 @@
<div class="header__remote-branch">
{#if !branch.upstream}
{#if !branch.active}
<div
class="status-tag text-base-11 text-semibold unapplied"
use:tooltip={'These changes are stashed away from your working directory.'}
<Tag
icon="virtual-branch-small"
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}
<div
class="status-tag text-base-11 text-semibold integrated"
use:tooltip={'These changes have been integrated upstream, update your workspace to make this lane disappear.'}
<Tag
icon="removed-branch-small"
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}
<div
class="status-tag text-base-11 text-semibold pending"
use:tooltip={'These changes are in your working directory.'}
<Tag
icon="virtual-branch-small"
color="light"
help="These changes are in your working directory."
reversedDirection>virtual</Tag
>
<Icon name="virtual-branch-small" /> virtual
</div>
{/if}
{#if !isUnapplied}
<div
class="pending-name"
use:tooltip={'Branch name that will be used when pushing. You can change it from the lane menu.'}
<Tag
disabled
help="Branch name that will be used when pushing. You can change it from the lane menu."
>
origin/{branch.upstreamName
? branch.upstreamName
: normalizeBranchName(branch.name)}</Tag
>
<span class="text-base-11 text-semibold">
origin/{branch.upstreamName
? branch.upstreamName
: normalizeBranchName(branch.name)}
</span>
</div>
{/if}
{:else}
<div
class="status-tag text-base-11 text-semibold remote"
use:tooltip={'At least some of your changes have been pushed'}
<Tag
color="dark"
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
icon="open-link"
color="ghost"

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

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