diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-08-06 12:09:42 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-08-06 12:09:42 +0300 |
commit | deb069c0c1afe18cb4ce3a94623272628e11674e (patch) | |
tree | 0d6141fc4b1e60233f4b561082ee8576743b5eb7 /app/assets/javascripts/monitoring/components/dashboards_dropdown.vue | |
parent | 145295d7b3390c14bd5766ae95f00c4acf290f23 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/monitoring/components/dashboards_dropdown.vue')
-rw-r--r-- | app/assets/javascripts/monitoring/components/dashboards_dropdown.vue | 54 |
1 files changed, 27 insertions, 27 deletions
diff --git a/app/assets/javascripts/monitoring/components/dashboards_dropdown.vue b/app/assets/javascripts/monitoring/components/dashboards_dropdown.vue index 040fce1bec2..aed27b5ea51 100644 --- a/app/assets/javascripts/monitoring/components/dashboards_dropdown.vue +++ b/app/assets/javascripts/monitoring/components/dashboards_dropdown.vue @@ -2,10 +2,10 @@ import { mapState, mapGetters } from 'vuex'; import { GlIcon, - GlDeprecatedDropdown, - GlDeprecatedDropdownItem, - GlDeprecatedDropdownHeader, - GlDeprecatedDropdownDivider, + GlNewDropdown, + GlNewDropdownItem, + GlNewDropdownHeader, + GlNewDropdownDivider, GlSearchBoxByType, GlModalDirective, } from '@gitlab/ui'; @@ -17,10 +17,10 @@ const events = { export default { components: { GlIcon, - GlDeprecatedDropdown, - GlDeprecatedDropdownItem, - GlDeprecatedDropdownHeader, - GlDeprecatedDropdownDivider, + GlNewDropdown, + GlNewDropdownItem, + GlNewDropdownHeader, + GlNewDropdownDivider, GlSearchBoxByType, }, directives: { @@ -73,16 +73,13 @@ export default { }; </script> <template> - <gl-deprecated-dropdown + <gl-new-dropdown toggle-class="dropdown-menu-toggle" menu-class="monitor-dashboard-dropdown-menu" :text="selectedDashboardText" > <div class="d-flex flex-column overflow-hidden"> - <gl-deprecated-dropdown-header class="monitor-dashboard-dropdown-header text-center">{{ - __('Dashboard') - }}</gl-deprecated-dropdown-header> - <gl-deprecated-dropdown-divider /> + <gl-new-dropdown-header>{{ __('Dashboard') }}</gl-new-dropdown-header> <gl-search-box-by-type ref="monitorDashboardsDropdownSearch" v-model="searchTerm" @@ -90,33 +87,36 @@ export default { /> <div class="flex-fill overflow-auto"> - <gl-deprecated-dropdown-item + <gl-new-dropdown-item v-for="dashboard in starredDashboards" :key="dashboard.path" - :active="dashboard.path === selectedDashboardPath" - active-class="is-active" + :is-check-item="true" + :is-checked="dashboard.path === selectedDashboardPath" @click="selectDashboard(dashboard)" > - <div class="d-flex"> - {{ dashboardDisplayName(dashboard) }} - <gl-icon class="text-muted ml-auto" name="star" /> + <div class="gl-display-flex"> + <div class="gl-flex-grow-1 gl-min-w-0"> + <div class="gl-word-break-all"> + {{ dashboardDisplayName(dashboard) }} + </div> + </div> + <gl-icon class="text-muted gl-flex-shrink-0" name="star" /> </div> - </gl-deprecated-dropdown-item> - - <gl-deprecated-dropdown-divider + </gl-new-dropdown-item> + <gl-new-dropdown-divider v-if="starredDashboards.length && nonStarredDashboards.length" ref="starredListDivider" /> - <gl-deprecated-dropdown-item + <gl-new-dropdown-item v-for="dashboard in nonStarredDashboards" :key="dashboard.path" - :active="dashboard.path === selectedDashboardPath" - active-class="is-active" + :is-check-item="true" + :is-checked="dashboard.path === selectedDashboardPath" @click="selectDashboard(dashboard)" > {{ dashboardDisplayName(dashboard) }} - </gl-deprecated-dropdown-item> + </gl-new-dropdown-item> </div> <div @@ -127,5 +127,5 @@ export default { {{ __('No matching results') }} </div> </div> - </gl-deprecated-dropdown> + </gl-new-dropdown> </template> |