diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-12-20 17:22:11 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-12-20 17:22:11 +0300 |
commit | 0c872e02b2c822e3397515ec324051ff540f0cd5 (patch) | |
tree | ce2fb6ce7030e4dad0f4118d21ab6453e5938cdd /app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_create_view.vue | |
parent | f7e05a6853b12f02911494c4b3fe53d9540d74fc (diff) |
Add latest changes from gitlab-org/gitlab@15-7-stable-eev15.7.0-rc42
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_create_view.vue')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_create_view.vue | 122 |
1 files changed, 0 insertions, 122 deletions
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_create_view.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_create_view.vue deleted file mode 100644 index 3ff3755de46..00000000000 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_create_view.vue +++ /dev/null @@ -1,122 +0,0 @@ -<script> -import { GlTooltipDirective, GlButton, GlFormInput, GlLink, GlLoadingIcon } from '@gitlab/ui'; -import { mapState, mapActions } from 'vuex'; - -// @deprecated This component should only be used when there is no GraphQL API. -// In most cases you should use -// `app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_create_view.vue` instead. -export default { - components: { - GlButton, - GlFormInput, - GlLink, - GlLoadingIcon, - }, - directives: { - GlTooltip: GlTooltipDirective, - }, - data() { - return { - labelTitle: '', - selectedColor: '', - }; - }, - computed: { - ...mapState(['labelsCreateTitle', 'labelCreateInProgress']), - disableCreate() { - return !this.labelTitle.length || !this.selectedColor.length || this.labelCreateInProgress; - }, - suggestedColors() { - const colorsMap = gon.suggested_label_colors; - return Object.keys(colorsMap).map((color) => ({ [color]: colorsMap[color] })); - }, - }, - methods: { - ...mapActions(['toggleDropdownContents', 'toggleDropdownContentsCreateView', 'createLabel']), - getColorCode(color) { - return Object.keys(color).pop(); - }, - getColorName(color) { - return Object.values(color).pop(); - }, - handleColorClick(color) { - this.selectedColor = this.getColorCode(color); - }, - handleCreateClick() { - this.createLabel({ - title: this.labelTitle, - color: this.selectedColor, - }); - }, - }, -}; -</script> - -<template> - <div class="labels-select-contents-create js-labels-create"> - <div class="dropdown-title d-flex align-items-center pt-0 pb-2 gl-mb-0"> - <gl-button - :aria-label="__('Go back')" - category="tertiary" - size="small" - class="js-btn-back dropdown-header-button p-0" - icon="arrow-left" - @click="toggleDropdownContentsCreateView" - /> - <span class="flex-grow-1">{{ labelsCreateTitle }}</span> - <gl-button - :aria-label="__('Close')" - category="tertiary" - size="small" - class="dropdown-header-button p-0" - icon="close" - @click="toggleDropdownContents" - /> - </div> - <div class="dropdown-input"> - <gl-form-input - v-model.trim="labelTitle" - :placeholder="__('Name new label')" - :autofocus="true" - /> - </div> - <div class="dropdown-content px-2"> - <div class="suggest-colors suggest-colors-dropdown mt-0 mb-2"> - <gl-link - v-for="(color, index) in suggestedColors" - :key="index" - v-gl-tooltip:tooltipcontainer - :style="{ backgroundColor: getColorCode(color) }" - :title="getColorName(color)" - @click.prevent="handleColorClick(color)" - /> - </div> - <div class="color-input-container gl-display-flex"> - <span - class="dropdown-label-color-preview position-relative position-relative d-inline-block" - :style="{ backgroundColor: selectedColor }" - ></span> - <gl-form-input - v-model.trim="selectedColor" - class="gl-rounded-top-left-none gl-rounded-bottom-left-none gl-mb-2" - :placeholder="__('Use custom color #FF0000')" - /> - </div> - </div> - <div class="dropdown-actions clearfix pt-2 px-2"> - <gl-button - :disabled="disableCreate" - category="primary" - variant="confirm" - class="float-left d-flex align-items-center" - @click="handleCreateClick" - > - <gl-loading-icon v-show="labelCreateInProgress" size="sm" :inline="true" class="mr-1" /> - {{ __('Create') }} - </gl-button> - <gl-button class="float-right js-btn-cancel-create" @click="toggleDropdownContentsCreateView"> - {{ __('Cancel') }} - </gl-button> - </div> - </div> -</template> |