Commit 3366ff9e authored by Phil Hughes's avatar Phil Hughes

added tooltip to bar buttons

parent 442eb843
<script> <script>
import { mapActions, mapGetters, mapState } from 'vuex'; import { mapActions, mapGetters, mapState } from 'vuex';
import Icon from '~/vue_shared/components/icon.vue'; import Icon from '~/vue_shared/components/icon.vue';
import tooltip from '~/vue_shared/directives/tooltip';
import { activityBarViews } from '../constants'; import { activityBarViews } from '../constants';
export default { export default {
components: { components: {
Icon, Icon,
}, },
directives: {
tooltip,
},
computed: { computed: {
...mapGetters(['currentProject', 'hasChanges']), ...mapGetters(['currentProject', 'hasChanges']),
...mapState(['currentActivityView']), ...mapState(['currentActivityView']),
...@@ -26,8 +30,12 @@ export default { ...@@ -26,8 +30,12 @@ export default {
<ul class="list-unstyled"> <ul class="list-unstyled">
<li v-once> <li v-once>
<a <a
v-tooltip
data-container="body"
data-placement="right"
:href="goBackUrl" :href="goBackUrl"
class="ide-sidebar-link" class="ide-sidebar-link"
:title="s__('IDE|Go back')"
:aria-label="s__('IDE|Go back')" :aria-label="s__('IDE|Go back')"
> >
<icon <icon
...@@ -38,13 +46,17 @@ export default { ...@@ -38,13 +46,17 @@ export default {
</li> </li>
<li> <li>
<button <button
v-tooltip
data-container="body"
data-placement="right"
type="button" type="button"
class="ide-sidebar-link js-ide-edit-mode" class="ide-sidebar-link js-ide-edit-mode"
:class="{ :class="{
active: currentActivityView === $options.activityBarViews.edit active: currentActivityView === $options.activityBarViews.edit
}" }"
@click.prevent="updateActivityBarView($options.activityBarViews.edit)" @click.prevent="updateActivityBarView($options.activityBarViews.edit)"
:aria-label="s__('IDE|Edit mode')" :title="s__('IDE|Edit')"
:aria-label="s__('IDE|Edit')"
> >
<icon <icon
name="code" name="code"
...@@ -53,12 +65,17 @@ export default { ...@@ -53,12 +65,17 @@ export default {
</li> </li>
<li> <li>
<button <button
v-tooltip
data-container="body"
data-placement="right"
type="button" type="button"
class="ide-sidebar-link js-ide-review-mode" class="ide-sidebar-link js-ide-review-mode"
:class="{ :class="{
active: currentActivityView === $options.activityBarViews.review active: currentActivityView === $options.activityBarViews.review
}" }"
@click.prevent="updateActivityBarView($options.activityBarViews.review)" @click.prevent="updateActivityBarView($options.activityBarViews.review)"
:title="s__('IDE|Review')"
:aria-label="s__('IDE|Review')"
> >
<icon <icon
name="file-modified" name="file-modified"
...@@ -67,13 +84,17 @@ export default { ...@@ -67,13 +84,17 @@ export default {
</li> </li>
<li v-show="hasChanges"> <li v-show="hasChanges">
<button <button
v-tooltip
data-container="body"
data-placement="right"
type="button" type="button"
class="ide-sidebar-link js-ide-commit-mode" class="ide-sidebar-link js-ide-commit-mode"
:class="{ :class="{
active: currentActivityView === $options.activityBarViews.commit active: currentActivityView === $options.activityBarViews.commit
}" }"
@click.prevent="updateActivityBarView($options.activityBarViews.commit)" @click.prevent="updateActivityBarView($options.activityBarViews.commit)"
:aria-label="s__('IDE|Commit mode')" :title="s__('IDE|Commit')"
:aria-label="s__('IDE|Commit')"
> >
<icon <icon
name="commit" name="commit"
......
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