diff options
Diffstat (limited to 'app/assets/javascripts/diffs/components/tree_list.vue')
-rw-r--r-- | app/assets/javascripts/diffs/components/tree_list.vue | 61 |
1 files changed, 18 insertions, 43 deletions
diff --git a/app/assets/javascripts/diffs/components/tree_list.vue b/app/assets/javascripts/diffs/components/tree_list.vue index ff1eb23cea3..f40a7b25fde 100644 --- a/app/assets/javascripts/diffs/components/tree_list.vue +++ b/app/assets/javascripts/diffs/components/tree_list.vue @@ -1,7 +1,7 @@ <script> import { mapActions, mapGetters, mapState } from 'vuex'; -import { GlTooltipDirective } from '@gitlab-org/gitlab-ui'; -import { convertPermissionToBoolean } from '~/lib/utils/common_utils'; +import { GlTooltipDirective } from '@gitlab/ui'; +import { parseBoolean } from '~/lib/utils/common_utils'; import Icon from '~/vue_shared/components/icon.vue'; import FileRow from '~/vue_shared/components/file_row.vue'; import FileRowStats from './file_row_stats.vue'; @@ -18,8 +18,7 @@ export default { }, data() { const treeListStored = localStorage.getItem(treeListStorageKey); - const renderTreeList = - treeListStored !== null ? convertPermissionToBoolean(treeListStored) : true; + const renderTreeList = treeListStored !== null ? parseBoolean(treeListStored) : true; return { search: '', @@ -72,16 +71,13 @@ export default { <div class="tree-list-holder d-flex flex-column"> <div class="append-bottom-8 position-relative tree-list-search d-flex"> <div class="flex-fill d-flex"> - <icon - name="search" - class="position-absolute tree-list-icon" - /> + <icon name="search" class="position-absolute tree-list-icon" /> <input v-model="search" :placeholder="s__('MergeRequest|Filter files')" type="search" class="form-control" - @focus="toggleFocusSearch(true)" + @focus="toggleFocusSearch(true);" @blur="blurSearch" /> <button @@ -91,50 +87,39 @@ export default { class="position-absolute bg-transparent tree-list-icon tree-list-clear-icon border-0 p-0" @click="clearSearch" > - <icon - name="close" - /> + <icon name="close" /> </button> </div> - <div - v-show="!focusSearch" - class="btn-group prepend-left-8 tree-list-view-toggle" - > + <div v-show="!focusSearch" class="btn-group prepend-left-8 tree-list-view-toggle"> <button v-gl-tooltip.hover :aria-label="__('List view')" :title="__('List view')" :class="{ - active: !renderTreeList + active: !renderTreeList, }" class="btn btn-default pt-0 pb-0 d-flex align-items-center" type="button" - @click="toggleRenderTreeList(false)" + @click="toggleRenderTreeList(false);" > - <icon - name="hamburger" - /> + <icon name="hamburger" /> </button> <button v-gl-tooltip.hover :aria-label="__('Tree view')" :title="__('Tree view')" :class="{ - active: renderTreeList + active: renderTreeList, }" class="btn btn-default pt-0 pb-0 d-flex align-items-center" type="button" - @click="toggleRenderTreeList(true)" + @click="toggleRenderTreeList(true);" > - <icon - name="file-tree" - /> + <icon name="file-tree" /> </button> </div> </div> - <div - class="tree-list-scroll" - > + <div class="tree-list-scroll"> <template v-if="filteredTreeList.length"> <file-row v-for="file in filteredTreeList" @@ -150,25 +135,15 @@ export default { @clickFile="scrollToFile" /> </template> - <p - v-else - class="prepend-top-20 append-bottom-20 text-center" - > + <p v-else class="prepend-top-20 append-bottom-20 text-center"> {{ s__('MergeRequest|No files found') }} </p> </div> - <div - v-once - class="pt-3 pb-3 text-center" - > + <div v-once class="pt-3 pb-3 text-center"> {{ n__('%d changed file', '%d changed files', diffFilesLength) }} <div> - <span class="cgreen"> - {{ n__('%d addition', '%d additions', addedLines) }} - </span> - <span class="cred"> - {{ n__('%d deleted', '%d deletions', removedLines) }} - </span> + <span class="cgreen"> {{ n__('%d addition', '%d additions', addedLines) }} </span> + <span class="cred"> {{ n__('%d deleted', '%d deletions', removedLines) }} </span> </div> </div> </div> |