mirror of
https://github.com/gitbutlerapp/gitbutler.git
synced 2024-12-20 16:11:46 +03:00
Merge pull request #2579 from gitbutlerapp/refactor-tag-component-and-status-tag
Refactor Tag component and status-tag
This commit is contained in:
Pavel Laptev
GitHub
commit
9e95fdb304
@ -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"
|
||||
@ -462,56 +460,6 @@
|
||||
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 {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user