2018-04-13 14:35:03 +00:00
|
|
|
<script>
|
2020-06-11 09:08:16 +00:00
|
|
|
import { mapActions, mapState } from 'vuex';
|
2020-10-15 06:09:14 +00:00
|
|
|
import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
|
2020-02-18 06:09:06 +00:00
|
|
|
import { leftSidebarViews } from '../constants';
|
2018-04-13 14:35:03 +00:00
|
|
|
|
|
|
|
export default {
|
|
|
|
components: {
|
2020-08-24 15:10:11 +00:00
|
|
|
GlIcon,
|
2018-04-13 14:35:03 +00:00
|
|
|
},
|
2018-05-06 08:52:32 +00:00
|
|
|
directives: {
|
2020-10-15 06:09:14 +00:00
|
|
|
GlTooltip: GlTooltipDirective,
|
2018-05-06 08:52:32 +00:00
|
|
|
},
|
2018-04-13 14:35:03 +00:00
|
|
|
computed: {
|
|
|
|
...mapState(['currentActivityView']),
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
...mapActions(['updateActivityBarView']),
|
2018-05-31 10:18:21 +00:00
|
|
|
changedActivityView(e, view) {
|
|
|
|
e.currentTarget.blur();
|
|
|
|
|
|
|
|
this.updateActivityBarView(view);
|
|
|
|
|
2020-10-15 06:09:14 +00:00
|
|
|
this.$root.$emit('bv::hide::tooltip');
|
2018-05-31 10:18:21 +00:00
|
|
|
},
|
2018-04-13 14:35:03 +00:00
|
|
|
},
|
2020-02-18 06:09:06 +00:00
|
|
|
leftSidebarViews,
|
2018-04-13 14:35:03 +00:00
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<template>
|
2020-09-29 18:09:52 +00:00
|
|
|
<nav class="ide-activity-bar" data-testid="left-sidebar">
|
2018-04-13 14:35:03 +00:00
|
|
|
<ul class="list-unstyled">
|
|
|
|
<li>
|
2018-04-16 15:29:34 +00:00
|
|
|
<button
|
2020-10-15 06:09:14 +00:00
|
|
|
v-gl-tooltip.right.viewport
|
2018-04-13 14:35:03 +00:00
|
|
|
:class="{
|
2020-02-18 06:09:06 +00:00
|
|
|
active: currentActivityView === $options.leftSidebarViews.edit.name,
|
2018-04-13 14:35:03 +00:00
|
|
|
}"
|
2018-05-06 08:52:32 +00:00
|
|
|
:title="s__('IDE|Edit')"
|
|
|
|
:aria-label="s__('IDE|Edit')"
|
2018-06-11 09:49:47 +00:00
|
|
|
data-container="body"
|
|
|
|
data-placement="right"
|
2020-09-09 21:08:33 +00:00
|
|
|
data-qa-selector="edit_mode_tab"
|
2018-06-11 09:49:47 +00:00
|
|
|
type="button"
|
|
|
|
class="ide-sidebar-link js-ide-edit-mode"
|
2020-02-18 06:09:06 +00:00
|
|
|
@click.prevent="changedActivityView($event, $options.leftSidebarViews.edit.name)"
|
2018-04-13 14:35:03 +00:00
|
|
|
>
|
2020-08-24 15:10:11 +00:00
|
|
|
<gl-icon name="code" />
|
2018-04-16 15:29:34 +00:00
|
|
|
</button>
|
2018-04-13 14:35:03 +00:00
|
|
|
</li>
|
2018-05-03 13:21:45 +00:00
|
|
|
<li>
|
2018-04-20 08:09:19 +00:00
|
|
|
<button
|
2020-10-15 06:09:14 +00:00
|
|
|
v-gl-tooltip.right.viewport
|
2018-04-20 08:09:19 +00:00
|
|
|
:class="{
|
2020-02-18 06:09:06 +00:00
|
|
|
active: currentActivityView === $options.leftSidebarViews.review.name,
|
2018-04-20 08:09:19 +00:00
|
|
|
}"
|
2018-05-06 08:52:32 +00:00
|
|
|
:title="s__('IDE|Review')"
|
|
|
|
:aria-label="s__('IDE|Review')"
|
2018-06-11 09:49:47 +00:00
|
|
|
data-container="body"
|
|
|
|
data-placement="right"
|
|
|
|
type="button"
|
|
|
|
class="ide-sidebar-link js-ide-review-mode"
|
2020-02-18 06:09:06 +00:00
|
|
|
@click.prevent="changedActivityView($event, $options.leftSidebarViews.review.name)"
|
2018-04-20 08:09:19 +00:00
|
|
|
>
|
2020-08-24 15:10:11 +00:00
|
|
|
<gl-icon name="file-modified" />
|
2018-04-20 08:09:19 +00:00
|
|
|
</button>
|
|
|
|
</li>
|
2020-06-11 09:08:16 +00:00
|
|
|
<li>
|
2018-04-16 15:29:34 +00:00
|
|
|
<button
|
2020-10-15 06:09:14 +00:00
|
|
|
v-gl-tooltip.right.viewport
|
2018-04-13 14:35:03 +00:00
|
|
|
:class="{
|
2020-02-18 06:09:06 +00:00
|
|
|
active: currentActivityView === $options.leftSidebarViews.commit.name,
|
2018-04-13 14:35:03 +00:00
|
|
|
}"
|
2018-05-06 08:52:32 +00:00
|
|
|
:title="s__('IDE|Commit')"
|
|
|
|
:aria-label="s__('IDE|Commit')"
|
2018-06-11 09:49:47 +00:00
|
|
|
data-container="body"
|
|
|
|
data-placement="right"
|
2020-09-09 21:08:33 +00:00
|
|
|
data-qa-selector="commit_mode_tab"
|
2018-06-11 09:49:47 +00:00
|
|
|
type="button"
|
2020-09-09 21:08:33 +00:00
|
|
|
class="ide-sidebar-link js-ide-commit-mode"
|
2020-02-18 06:09:06 +00:00
|
|
|
@click.prevent="changedActivityView($event, $options.leftSidebarViews.commit.name)"
|
2018-04-13 14:35:03 +00:00
|
|
|
>
|
2020-08-24 15:10:11 +00:00
|
|
|
<gl-icon name="commit" />
|
2018-04-16 15:29:34 +00:00
|
|
|
</button>
|
2018-04-13 14:35:03 +00:00
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</nav>
|
|
|
|
</template>
|