diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/sidebar')
9 files changed, 89 insertions, 37 deletions
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/collapsed_calendar_icon.vue b/app/assets/javascripts/vue_shared/components/sidebar/collapsed_calendar_icon.vue index cc24fedceed..0ed5a050fe4 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/collapsed_calendar_icon.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/collapsed_calendar_icon.vue @@ -1,4 +1,5 @@ <script> +import { GlIcon } from '@gitlab/ui'; import tooltip from '~/vue_shared/directives/tooltip'; export default { @@ -6,6 +7,9 @@ export default { directives: { tooltip, }, + components: { + GlIcon, + }, props: { containerClass: { type: String, @@ -47,7 +51,7 @@ export default { data-boundary="viewport" @click="click" > - <i v-if="showIcon" class="fa fa-calendar" aria-hidden="true"> </i> + <gl-icon v-if="showIcon" name="calendar" /> <slot> <span> {{ text }} </span> </slot> diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/base.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/base.vue index 5eef439aa90..1ef3d5627ae 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/base.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/base.vue @@ -14,7 +14,10 @@ import DropdownSearchInput from './dropdown_search_input.vue'; import DropdownFooter from './dropdown_footer.vue'; import DropdownCreateLabel from './dropdown_create_label.vue'; +import { DropdownVariant } from '../labels_select_vue/constants'; + export default { + DropdownVariant, components: { DropdownTitle, DropdownValue, @@ -80,6 +83,11 @@ export default { required: false, default: false, }, + variant: { + type: String, + required: false, + default: DropdownVariant.Sidebar, + }, }, computed: { hiddenInputName() { @@ -123,7 +131,7 @@ export default { <template> <div class="block labels js-labels-block"> <dropdown-value-collapsed - v-if="showCreate" + v-if="showCreate && variant === $options.DropdownVariant.Sidebar" :labels="context.labels" @onValueClick="handleCollapsedValueClick" /> @@ -150,18 +158,21 @@ export default { :labels-path="labelsPath" :namespace="namespace" :labels="context.labels" - :show-extra-options="!showCreate" + :show-extra-options="!showCreate || variant !== $options.DropdownVariant.Sidebar" :enable-scoped-labels="enableScopedLabels" /> <div - class="dropdown-menu dropdown-select dropdown-menu-paging -dropdown-menu-labels dropdown-menu-selectable" + class="dropdown-menu dropdown-select dropdown-menu-paging dropdown-menu-labels dropdown-menu-selectable" > <div class="dropdown-page-one"> - <dropdown-header v-if="showCreate" /> + <dropdown-header v-if="showCreate && variant === $options.DropdownVariant.Sidebar" /> <dropdown-search-input /> <div class="dropdown-content" data-qa-selector="labels_dropdown_content"></div> - <div class="dropdown-loading"><gl-loading-icon /></div> + <div class="dropdown-loading"> + <gl-loading-icon + class="gl-display-flex gl-justify-content-center gl-align-items-center gl-h-full" + /> + </div> <dropdown-footer v-if="showCreate" :labels-web-url="labelsWebUrl" diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_create_label.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_create_label.vue index 74c5e063c3d..434aabc3df9 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_create_label.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_create_label.vue @@ -1,7 +1,14 @@ <script> +import { GlButton, GlTooltipDirective } from '@gitlab/ui'; import { __ } from '~/locale'; export default { + components: { + GlButton, + }, + directives: { + GlTooltip: GlTooltipDirective, + }, props: { headerTitle: { type: String, @@ -10,29 +17,35 @@ export default { }, }, created() { - this.suggestedColors = gon.suggested_label_colors; + const rawLabelsColors = gon.suggested_label_colors; + this.suggestedColors = Object.keys(rawLabelsColors).map(colorCode => ({ + colorCode, + title: rawLabelsColors[colorCode], + })); }, }; </script> <template> <div class="dropdown-page-two dropdown-new-label"> - <div class="dropdown-title"> - <button + <div + class="dropdown-title gl-display-flex gl-justify-content-space-between gl-align-items-center" + > + <gl-button :aria-label="__('Go back')" - type="button" - class="dropdown-title-button dropdown-menu-back" - > - <i aria-hidden="true" class="fa fa-arrow-left" data-hidden="true"> </i> - </button> + category="tertiary" + class="dropdown-menu-back" + icon="arrow-left" + size="small" + /> {{ headerTitle }} - <button + <gl-button :aria-label="__('Close')" - type="button" - class="dropdown-title-button dropdown-menu-close" - > - <i aria-hidden="true" class="fa fa-times dropdown-menu-close-icon" data-hidden="true"> </i> - </button> + category="tertiary" + class="dropdown-menu-close" + icon="close" + size="small" + /> </div> <div class="dropdown-content"> <div class="dropdown-labels-error js-label-error"></div> @@ -46,10 +59,12 @@ export default { <a v-for="(color, index) in suggestedColors" :key="index" - :data-color="color" + v-gl-tooltip + :data-color="color.colorCode" :style="{ - backgroundColor: color, + backgroundColor: color.colorCode, }" + :title="color.title" href="#" > @@ -65,12 +80,12 @@ export default { /> </div> <div class="clearfix"> - <button type="button" class="btn btn-primary float-left js-new-label-btn disabled"> + <gl-button category="secondary" class="float-left js-new-label-btn disabled"> {{ __('Create') }} - </button> - <button type="button" class="btn btn-default float-right js-cancel-label-btn"> + </gl-button> + <gl-button category="secondary" class="float-right js-cancel-label-btn"> {{ __('Cancel') }} - </button> + </gl-button> </div> </div> </div> diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_header.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_header.vue index eb837be165b..7b2802650a2 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_header.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_header.vue @@ -1,16 +1,22 @@ <script> -export default {}; +import { GlIcon } from '@gitlab/ui'; + +export default { + components: { + GlIcon, + }, +}; </script> <template> - <div class="dropdown-title"> - <span>{{ __('Assign labels') }}</span> + <div class="dropdown-title gl-display-flex gl-justify-content-center"> + <span class="gl-ml-auto">{{ __('Assign labels') }}</span> <button :aria-label="__('Close')" type="button" - class="dropdown-title-button dropdown-menu-close" + class="dropdown-title-button dropdown-menu-close gl-ml-auto" > - <i aria-hidden="true" class="fa fa-times dropdown-menu-close-icon" data-hidden="true"> </i> + <gl-icon name="close" aria-hidden="true" class="dropdown-menu-close-icon" /> </button> </div> </template> diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed.vue index 05446903286..c2ebf78d541 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed.vue @@ -1,4 +1,5 @@ <script> +import { GlIcon } from '@gitlab/ui'; import { s__, sprintf } from '~/locale'; import tooltip from '~/vue_shared/directives/tooltip'; @@ -6,6 +7,9 @@ export default { directives: { tooltip, }, + components: { + GlIcon, + }, props: { labels: { type: Array, @@ -49,7 +53,7 @@ export default { data-boundary="viewport" @click="handleClick" > - <i aria-hidden="true" data-hidden="true" class="fa fa-tags"> </i> + <gl-icon name="labels" /> <span>{{ labels.length }}</span> </div> </template> diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/labels_select_root.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/labels_select_root.vue index 248e9929833..34f5517ef99 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/labels_select_root.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/labels_select_root.vue @@ -166,7 +166,11 @@ export default { !state.showDropdownButton && !state.showDropdownContents ) { - this.handleDropdownClose(state.labels.filter(label => label.touched)); + let filterFn = label => label.touched; + if (this.isDropdownVariantEmbedded) { + filterFn = label => label.set; + } + this.handleDropdownClose(state.labels.filter(filterFn)); } }, /** @@ -186,7 +190,7 @@ export default { ].some( className => target?.classList.contains(className) || - target?.parentElement.classList.contains(className), + target?.parentElement?.classList.contains(className), ); const hadExceptionParent = ['.js-btn-back', '.js-labels-list'].some( @@ -248,10 +252,10 @@ export default { :allow-label-edit="allowLabelEdit" :labels-select-in-progress="labelsSelectInProgress" /> - <dropdown-value v-show="!showDropdownButton"> + <dropdown-value> <slot></slot> </dropdown-value> - <dropdown-button v-show="dropdownButtonVisible" /> + <dropdown-button v-show="dropdownButtonVisible" class="gl-mt-2" /> <dropdown-contents v-if="dropdownButtonVisible && showDropdownContents" ref="dropdownContents" diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/store/actions.js b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/store/actions.js index e624bd1eaee..2d236566b3d 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/store/actions.js +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/store/actions.js @@ -54,5 +54,8 @@ export const createLabel = ({ state, dispatch }, label) => { }); }; +export const replaceSelectedLabels = ({ commit }, selectedLabels) => + commit(types.REPLACE_SELECTED_LABELS, selectedLabels); + export const updateSelectedLabels = ({ commit }, labels) => commit(types.UPDATE_SELECTED_LABELS, { labels }); diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/store/mutation_types.js b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/store/mutation_types.js index 2e044dc3b3c..af92665d4eb 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/store/mutation_types.js +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/store/mutation_types.js @@ -15,6 +15,7 @@ export const RECEIVE_CREATE_LABEL_FAILURE = 'RECEIVE_CREATE_LABEL_FAILURE'; export const TOGGLE_DROPDOWN_BUTTON = 'TOGGLE_DROPDOWN_VISIBILITY'; export const TOGGLE_DROPDOWN_CONTENTS = 'TOGGLE_DROPDOWN_CONTENTS'; +export const REPLACE_SELECTED_LABELS = 'REPLACE_SELECTED_LABELS'; export const UPDATE_SELECTED_LABELS = 'UPDATE_SELECTED_LABELS'; export const TOGGLE_DROPDOWN_CONTENTS_CREATE_VIEW = 'TOGGLE_DROPDOWN_CONTENTS_CREATE_VIEW'; diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/store/mutations.js b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/store/mutations.js index 54f8c78b4e1..7edd290a819 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/store/mutations.js +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/store/mutations.js @@ -57,6 +57,10 @@ export default { state.labelCreateInProgress = false; }, + [types.REPLACE_SELECTED_LABELS](state, selectedLabels = []) { + state.selectedLabels = selectedLabels; + }, + [types.UPDATE_SELECTED_LABELS](state, { labels }) { // Find the label to update from all the labels // and change `set` prop value to represent their current state. |