diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/project_selector/project_list_item.vue')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/project_selector/project_list_item.vue | 25 |
1 files changed, 12 insertions, 13 deletions
diff --git a/app/assets/javascripts/vue_shared/components/project_selector/project_list_item.vue b/app/assets/javascripts/vue_shared/components/project_selector/project_list_item.vue index e053a9ddaa6..154671fe9fa 100644 --- a/app/assets/javascripts/vue_shared/components/project_selector/project_list_item.vue +++ b/app/assets/javascripts/vue_shared/components/project_selector/project_list_item.vue @@ -1,14 +1,14 @@ <script> -import { GlDeprecatedButton } from '@gitlab/ui'; +/* eslint-disable vue/no-v-html */ +import { GlButton, GlIcon } from '@gitlab/ui'; import { isString } from 'lodash'; -import Icon from '~/vue_shared/components/icon.vue'; import ProjectAvatar from '~/vue_shared/components/project_avatar/default.vue'; import highlight from '~/lib/utils/highlight'; import { truncateNamespace } from '~/lib/utils/text_utility'; export default { name: 'ProjectListItem', - components: { Icon, ProjectAvatar, GlDeprecatedButton }, + components: { GlIcon, ProjectAvatar, GlButton }, props: { project: { type: Object, @@ -40,17 +40,16 @@ export default { }; </script> <template> - <gl-deprecated-button - class="d-flex align-items-center btn pt-1 pb-1 border-0 project-list-item" + <gl-button + category="tertiary" + class="gl-display-flex gl-align-items-center gl-justify-content-start! gl-mb-2 gl-w-full" @click="onClick" > - <icon - class="gl-ml-3 gl-mr-3 flex-shrink-0 position-top-0 js-selected-icon" - :class="{ 'js-selected visible': selected, 'js-unselected invisible': !selected }" - name="mobile-issue-close" - /> - <project-avatar class="flex-shrink-0 js-project-avatar" :project="project" :size="32" /> - <div class="d-flex flex-wrap project-namespace-name-container"> + <div + class="gl-display-flex gl-align-items-center gl-flex-wrap project-namespace-name-container" + > + <gl-icon v-if="selected" class="js-selected-icon" name="mobile-issue-close" /> + <project-avatar class="gl-flex-shrink-0 js-project-avatar" :project="project" :size="32" /> <div v-if="truncatedNamespace" :title="projectNameWithNamespace" @@ -65,5 +64,5 @@ export default { v-html="highlightedProjectName" ></div> </div> - </gl-deprecated-button> + </gl-button> </template> |