diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-06-27 15:09:11 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-06-27 15:09:11 +0300 |
commit | bbd945a9eaeaf8ff084fcd5f697902fe9f67ccdb (patch) | |
tree | 13b9560127c27ab667f2d365ee8f19f6887de4d0 /app/assets/javascripts/vue_shared/components/color_select_dropdown | |
parent | 1f84ff323d6928b7be627484fdc88d5aa651f0f4 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/color_select_dropdown')
6 files changed, 51 insertions, 17 deletions
diff --git a/app/assets/javascripts/vue_shared/components/color_select_dropdown/color_item.vue b/app/assets/javascripts/vue_shared/components/color_select_dropdown/color_item.vue index 92817d5fa70..70cac061ca6 100644 --- a/app/assets/javascripts/vue_shared/components/color_select_dropdown/color_item.vue +++ b/app/assets/javascripts/vue_shared/components/color_select_dropdown/color_item.vue @@ -14,12 +14,12 @@ export default { </script> <template> - <div> + <div class="color-item"> <span - class="dropdown-label-box gl-flex-shrink-0 gl-top-1 gl-mr-0" + class="dropdown-label-box color-item-color" data-testid="color-item" :style="{ backgroundColor: color }" ></span> - <span class="hide-collapsed">{{ title }}</span> + <span class="color-item-text">{{ title }}</span> </div> </template> diff --git a/app/assets/javascripts/vue_shared/components/color_select_dropdown/color_select_root.vue b/app/assets/javascripts/vue_shared/components/color_select_dropdown/color_select_root.vue index 6b79883d76b..e567040bc51 100644 --- a/app/assets/javascripts/vue_shared/components/color_select_dropdown/color_select_root.vue +++ b/app/assets/javascripts/vue_shared/components/color_select_dropdown/color_select_root.vue @@ -1,4 +1,5 @@ <script> +import { isString } from 'lodash'; import createFlash from '~/flash'; import { s__ } from '~/locale'; import SidebarEditableItem from '~/sidebar/components/sidebar_editable_item.vue'; @@ -52,13 +53,23 @@ export default { required: false, default: s__('ColorWidget|Assign epic color'), }, + defaultColor: { + type: Object, + required: false, + validator(value) { + return isString(value?.color) && isString(value?.title); + }, + default() { + return { + color: '', + title: '', + }; + }, + }, }, data() { return { - issuableColor: { - color: '', - title: '', - }, + issuableColor: this.defaultColor, colorUpdateInProgress: false, oldIid: null, sidebarExpandedOnClick: false, diff --git a/app/assets/javascripts/vue_shared/components/color_select_dropdown/constants.js b/app/assets/javascripts/vue_shared/components/color_select_dropdown/constants.js index c70785abd1e..701ac71d755 100644 --- a/app/assets/javascripts/vue_shared/components/color_select_dropdown/constants.js +++ b/app/assets/javascripts/vue_shared/components/color_select_dropdown/constants.js @@ -1,4 +1,4 @@ -import { __, s__ } from '~/locale'; +import { s__ } from '~/locale'; export const COLOR_WIDGET_COLOR = s__('ColorWidget|Color'); @@ -7,7 +7,7 @@ export const DROPDOWN_VARIANT = { Embedded: 'embedded', }; -export const DEFAULT_COLOR = { title: __('SuggestedColors|Blue'), color: '#1068bf' }; +export const DEFAULT_COLOR = { title: s__('SuggestedColors|Blue'), color: '#1068bf' }; export const ISSUABLE_COLORS = [ DEFAULT_COLOR, diff --git a/app/assets/javascripts/vue_shared/components/color_select_dropdown/dropdown_contents.vue b/app/assets/javascripts/vue_shared/components/color_select_dropdown/dropdown_contents.vue index 4eb1d3d08ca..315ae126e3e 100644 --- a/app/assets/javascripts/vue_shared/components/color_select_dropdown/dropdown_contents.vue +++ b/app/assets/javascripts/vue_shared/components/color_select_dropdown/dropdown_contents.vue @@ -1,11 +1,13 @@ <script> import { GlDropdown } from '@gitlab/ui'; +import ColorItem from './color_item.vue'; import DropdownContentsColorView from './dropdown_contents_color_view.vue'; import DropdownHeader from './dropdown_header.vue'; import { isDropdownVariantSidebar } from './utils'; export default { components: { + ColorItem, DropdownContentsColorView, DropdownHeader, GlDropdown, @@ -42,12 +44,15 @@ export default { }, computed: { buttonText() { - if (!this.localSelectedColor?.title) { + if (!this.hasSelectedColor()) { return this.dropdownButtonText; } return this.localSelectedColor.title; }, + hasSelectedColor() { + return this.localSelectedColor?.title; + }, }, watch: { localSelectedColor: { @@ -91,7 +96,15 @@ export default { </script> <template> - <gl-dropdown ref="dropdown" :text="buttonText" class="gl-w-full" @hide="handleDropdownHide"> + <gl-dropdown ref="dropdown" class="gl-w-full" @hide="handleDropdownHide"> + <template #button-text> + <color-item + v-if="hasSelectedColor" + :color="localSelectedColor.color" + :title="localSelectedColor.title" + /> + <span v-else>{{ buttonText }}</span> + </template> <template #header> <dropdown-header ref="header" diff --git a/app/assets/javascripts/vue_shared/components/color_select_dropdown/dropdown_contents_color_view.vue b/app/assets/javascripts/vue_shared/components/color_select_dropdown/dropdown_contents_color_view.vue index 62f4cf59c14..91906388049 100644 --- a/app/assets/javascripts/vue_shared/components/color_select_dropdown/dropdown_contents_color_view.vue +++ b/app/assets/javascripts/vue_shared/components/color_select_dropdown/dropdown_contents_color_view.vue @@ -36,8 +36,8 @@ export default { </script> <template> - <gl-dropdown-form> - <div> + <gl-dropdown-form class="js-colors-list"> + <div data-testid="dropdown-content"> <gl-dropdown-item v-for="color in colors" :key="color.color" diff --git a/app/assets/javascripts/vue_shared/components/color_select_dropdown/dropdown_value.vue b/app/assets/javascripts/vue_shared/components/color_select_dropdown/dropdown_value.vue index 4cba66eefd2..7ae803ebf4d 100644 --- a/app/assets/javascripts/vue_shared/components/color_select_dropdown/dropdown_value.vue +++ b/app/assets/javascripts/vue_shared/components/color_select_dropdown/dropdown_value.vue @@ -20,6 +20,11 @@ export default { required: true, }, }, + computed: { + hasColor() { + return this.selectedColor.color !== ''; + }, + }, }; </script> @@ -31,13 +36,18 @@ export default { class="sidebar-collapsed-icon" > <gl-icon name="appearance" /> + <color-item :color="selectedColor.color" :title="selectedColor.title" /> + </div> + + <span v-if="!hasColor" class="no-value hide-collapsed"> + <slot></slot> + </span> + <template v-else> <color-item + class="hide-collapsed" :color="selectedColor.color" :title="selectedColor.title" - class="gl-font-base gl-line-height-24" /> - </div> - - <color-item class="hide-collapsed" :color="selectedColor.color" :title="selectedColor.title" /> + </template> </div> </template> |