diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-04-21 02:50:22 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-04-21 02:50:22 +0300 |
commit | 9dc93a4519d9d5d7be48ff274127136236a3adb3 (patch) | |
tree | 70467ae3692a0e35e5ea56bcb803eb512a10bedb /app/assets/javascripts/set_status_modal | |
parent | 4b0f34b6d759d6299322b3a54453e930c6121ff0 (diff) |
Add latest changes from gitlab-org/gitlab@13-11-stable-eev13.11.0-rc43
Diffstat (limited to 'app/assets/javascripts/set_status_modal')
-rw-r--r-- | app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue | 65 |
1 files changed, 61 insertions, 4 deletions
diff --git a/app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue b/app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue index bed264341a5..bff90254c04 100644 --- a/app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue +++ b/app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue @@ -1,14 +1,23 @@ <script> /* eslint-disable vue/no-v-html */ -import { GlToast, GlModal, GlTooltipDirective, GlIcon, GlFormCheckbox } from '@gitlab/ui'; +import { + GlToast, + GlModal, + GlTooltipDirective, + GlIcon, + GlFormCheckbox, + GlDropdown, + GlDropdownItem, +} from '@gitlab/ui'; import $ from 'jquery'; import Vue from 'vue'; import GfmAutoComplete from 'ee_else_ce/gfm_auto_complete'; import * as Emoji from '~/emoji'; import { deprecatedCreateFlash as createFlash } from '~/flash'; import { BV_SHOW_MODAL, BV_HIDE_MODAL } from '~/lib/utils/constants'; -import { __, s__ } from '~/locale'; +import { __, s__, sprintf } from '~/locale'; import { updateUserStatus } from '~/rest_api'; +import { timeRanges } from '~/vue_shared/constants'; import EmojiMenuInModal from './emoji_menu_in_modal'; import { isUserBusy } from './utils'; @@ -20,11 +29,21 @@ export const AVAILABILITY_STATUS = { Vue.use(GlToast); +const statusTimeRanges = [ + { + label: __('Never'), + name: 'never', + }, + ...timeRanges, +]; + export default { components: { GlIcon, GlModal, GlFormCheckbox, + GlDropdown, + GlDropdownItem, }, directives: { GlTooltip: GlTooltipDirective, @@ -53,6 +72,11 @@ export default { required: false, default: false, }, + currentClearStatusAfter: { + type: String, + required: false, + default: '', + }, }, data() { return { @@ -65,6 +89,10 @@ export default { modalId: 'set-user-status-modal', noEmoji: true, availability: isUserBusy(this.currentAvailability), + clearStatusAfter: statusTimeRanges[0].label, + clearStatusAfterMessage: sprintf(s__('SetStatusModal|Your status resets on %{date}.'), { + date: this.currentClearStatusAfter, + }), }; }, computed: { @@ -161,12 +189,16 @@ export default { this.setStatus(); }, setStatus() { - const { emoji, message, availability } = this; + const { emoji, message, availability, clearStatusAfter } = this; updateUserStatus({ emoji, message, availability: availability ? AVAILABILITY_STATUS.BUSY : AVAILABILITY_STATUS.NOT_SET, + clearStatusAfter: + clearStatusAfter === statusTimeRanges[0].label + ? null + : clearStatusAfter.replace(' ', '_'), }) .then(this.onUpdateSuccess) .catch(this.onUpdateFail); @@ -183,7 +215,11 @@ export default { this.closeModal(); }, + setClearStatusAfter(after) { + this.clearStatusAfter = after; + }, }, + statusTimeRanges, }; </script> @@ -268,10 +304,31 @@ export default { </div> <div class="gl-display-flex"> <span class="gl-text-gray-600 gl-ml-5"> - {{ s__('SetStatusModal|"Busy" will be shown next to your name') }} + {{ s__('SetStatusModal|A busy indicator is shown next to your name and avatar.') }} </span> </div> </div> + <div class="form-group"> + <div class="gl-display-flex gl-align-items-baseline"> + <span class="gl-mr-3">{{ s__('SetStatusModal|Clear status after') }}</span> + <gl-dropdown :text="clearStatusAfter" data-testid="clear-status-at-dropdown"> + <gl-dropdown-item + v-for="after in $options.statusTimeRanges" + :key="after.name" + :data-testid="after.name" + @click="setClearStatusAfter(after.label)" + >{{ after.label }}</gl-dropdown-item + > + </gl-dropdown> + </div> + <div + v-if="currentClearStatusAfter.length" + class="gl-mt-3 gl-text-gray-400 gl-font-sm" + data-testid="clear-status-at-message" + > + {{ clearStatusAfterMessage }} + </div> + </div> </div> </div> </gl-modal> |