Commit 036d6cea authored by Daniel Tian's avatar Daniel Tian

Use gl-badge for web IDE activity bar

Changelog: changed
MR: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/78965
parent ff777213
<script>
import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
import { GlIcon, GlTooltipDirective, GlBadge } from '@gitlab/ui';
import { mapActions, mapState } from 'vuex';
import { BV_HIDE_TOOLTIP } from '~/lib/utils/constants';
import { leftSidebarViews } from '../constants';
......@@ -7,6 +7,7 @@ import { leftSidebarViews } from '../constants';
export default {
components: {
GlIcon,
GlBadge,
},
directives: {
GlTooltip: GlTooltipDirective,
......@@ -82,9 +83,13 @@ export default {
@click.prevent="changedActivityView($event, $options.leftSidebarViews.commit.name)"
>
<gl-icon name="commit" />
<div v-if="stagedFiles.length > 0" class="ide-commit-badge badge badge-pill">
<gl-badge
v-if="stagedFiles.length"
class="gl-absolute gl-px-2 gl-top-3 gl-right-3 gl-font-weight-bold gl-bg-gray-900! gl-text-white!"
size="sm"
>
{{ stagedFiles.length }}
</div>
</gl-badge>
</button>
</li>
</ul>
......
......@@ -630,7 +630,6 @@ $ide-commit-header-height: 48px;
width: 1px;
background: var(--ide-highlight-background, $white);
}
}
&.is-right {
......@@ -642,17 +641,6 @@ $ide-commit-header-height: 48px;
left: -1px;
}
}
.ide-commit-badge {
background-color: var(--ide-highlight-accent, $almost-black) !important;
color: var(--ide-highlight-background, $white) !important;
position: absolute;
left: 38px;
top: $gl-padding-8;
font-size: $gl-font-size-12;
padding: 2px $gl-padding-4;
font-weight: $gl-font-weight-bold !important;
}
}
.ide-activity-bar {
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment