[stable33] fix(user_status): mount emoji picker outside of dialog

apps/user_status/src/components/CustomMessageInput.vue

@@ -4,7 +4,7 @@
 -->
 <template>
 	<div class="custom-input" role="group">
-		<NcEmojiPicker container=".custom-input" @select="setIcon">
+		<NcEmojiPicker container="#user_status-dialog" @select="setIcon">
 			<NcButton
 				variant="tertiary"
 				:aria-label="t('user_status', 'Emoji for your status message')">

apps/user_status/src/components/SetStatusModal.vue

@@ -5,6 +5,7 @@
 
 <template>
 	<NcModal
+		id="user_status-dialog"
 		size="normal"
 		labelId="user_status-set-dialog"
 		dark

dist/SetStatusModal-0WpUw_Vf.chunk.mjs

@@ -0,0 +1,2 @@
+import{a as v}from"./index-JpgrUA2Z-BYgeawUc.chunk.mjs";import{t as s}from"./translation-DoG5ZELJ-Bni_xMHF.chunk.mjs";import{g as O}from"./createElementId-DhjFt1I9-C_WKCRq3.chunk.mjs";import{N as A}from"./logger-D3RVzcfQ-CklyzrxW.chunk.mjs";import{b as q}from"./index-BrC2bLMO.chunk.mjs";import{N as x}from"./NcSelect-DLheQ2yp-CP6uPo1K.chunk.mjs";import{c as C,m as R,a as T,O as j,l as I}from"./user_status-menu.mjs";import{a as S}from"./index-DCpg1aui.chunk.mjs";import{f as c,j as m,o as n,k as a,e as p,t as l,w as g,g as b,F as $,C as B,c as y,_ as M,z as U,H as V,l as k}from"./runtime-dom.esm-bundler-CU8rrbZA.chunk.mjs";import{N as L}from"./NcEmojiPicker-Djc9a0gw-BS_Juv3z.chunk.mjs";import{_ as E}from"./TrashCanOutline-B5FsJrKA.chunk.mjs";import{N as H}from"./NcUserStatusIcon-XiwrgeCm-Bx6e8UaI.chunk.mjs";import"./index-Bndk0DrU.chunk.mjs";import"./NcNoteCard-Cok_4Fld-C71YD40i.chunk.mjs";import"./mdi-Bm11w6Fn.chunk.mjs";import"./TrayArrowDown-D8ycvjKQ.chunk.mjs";import"./index-BT4ljBnH.chunk.mjs";import"./string_decoder-BO00msnV.chunk.mjs";import"./NcColorPicker-DDHxR-iN-BXwxdmCO.chunk.mjs";import"./colors-BHGKZFDI-BKHpzg2v.chunk.mjs";import"./NcInputField-o5OFv3z6-DJtp_yB7.chunk.mjs";function z(){return[{label:s("user_status","Don't clear"),clearAt:null},{label:s("user_status","30 minutes"),clearAt:{type:"period",time:1800}},{label:s("user_status","1 hour"),clearAt:{type:"period",time:3600}},{label:s("user_status","4 hours"),clearAt:{type:"period",time:14400}},{label:s("user_status","Today"),clearAt:{type:"end-of",time:"day"}},{label:s("user_status","This week"),clearAt:{type:"end-of",time:"week"}}]}const D={name:"ClearAtSelect",components:{NcSelect:x},props:{clearAt:{type:Object,default:null}},emits:["selectClearAt"],data(){return{options:z()}},computed:{option(){return{clearAt:this.clearAt,label:C(this.clearAt)}}},methods:{t:s,select(t){t&&this.$emit("selectClearAt",t.clearAt)}}},W={class:"clear-at-select"},K={class:"clear-at-select__label",for:"clearStatus"};function Y(t,i,u,_,o,e){const d=c("NcSelect");return n(),m("div",W,[a("label",K,l(e.t("user_status","Clear status after")),1),p(d,{inputId:"clearStatus",class:"clear-at-select__select",options:o.options,modelValue:e.option,clearable:!1,placement:"top",labelOutside:"","onOption:selected":e.select},null,8,["options","modelValue","onOption:selected"])])}const G=S(D,[["render",Y],["__scopeId","data-v-83a07433"]]),J={name:"CustomMessageInput",components:{NcTextField:E,NcButton:A,NcEmojiPicker:L},props:{icon:{type:String,default:"😀"},message:{type:String,default:""},disabled:{type:Boolean,default:!1}},emits:["change","selectIcon"],computed:{visibleIcon(){return this.icon||"😀"}},methods:{t:s,focus(){this.$refs.input.focus()},onChange(t){this.$emit("change",t)},setIcon(t){this.$emit("selectIcon",t)}}},Q={class:"custom-input",role:"group"},X={class:"custom-input__container"};function Z(t,i,u,_,o,e){const d=c("NcButton"),r=c("NcEmojiPicker"),f=c("NcTextField");return n(),m("div",Q,[p(r,{container:"#user_status-dialog",onSelect:e.setIcon},{default:g(()=>[p(d,{variant:"tertiary","aria-label":e.t("user_status","Emoji for your status message")},{icon:g(()=>[b(l(e.visibleIcon),1)]),_:1},8,["aria-label"])]),_:1},8,["onSelect"]),a("div",X,[p(f,{ref:"input",maxlength:"80",disabled:u.disabled,placeholder:e.t("user_status","What is your status?"),modelValue:u.message,type:"text",label:e.t("user_status","What is your status?"),"onUpdate:modelValue":e.onChange},null,8,["disabled","placeholder","modelValue","label","onUpdate:modelValue"])])])}const ee=S(J,[["render",Z],["__scopeId","data-v-90dc6f12"]]),te={name:"OnlineStatusSelect",components:{NcUserStatusIcon:H},props:{checked:{type:Boolean,default:!1},type:{type:String,required:!0},label:{type:String,required:!0},subline:{type:String,default:null}},emits:["select"],computed:{id(){return`user-status-online-status-${this.type}`}},methods:{onChange(){this.$emit("select",this.type)}}},se={class:"user-status-online-select"},ae=["id","checked"],ie=["for"],re={class:"user-status-online-select__icon-wrapper"},ue={class:"user-status-online-select__subline"};function le(t,i,u,_,o,e){const d=c("NcUserStatusIcon");return n(),m("div",se,[a("input",{id:e.id,checked:u.checked,class:"hidden-visually user-status-online-select__input",type:"radio",name:"user-status-online",onChange:i[0]||(i[0]=(...r)=>e.onChange&&e.onChange(...r))},null,40,ae),a("label",{for:e.id,class:"user-status-online-select__label"},[a("span",re,[p(d,{status:u.type,class:"user-status-online-select__icon","aria-hidden":"true"},null,8,["status"])]),b(" "+l(u.label)+" ",1),a("em",ue,l(u.subline),1)],8,ie)])}const ne=S(te,[["render",le],["__scopeId","data-v-16876893"]]),ce={name:"PredefinedStatus",props:{messageId:{type:String,required:!0},icon:{type:String,required:!0},message:{type:String,required:!0},clearAt:{type:Object,required:!1,default:null},selected:{type:Boolean,required:!1,default:!1}},emits:["select"],computed:{id(){return`user-status-predefined-status-${this.messageId}`},formattedClearAt(){return C(this.clearAt)}},methods:{select(){this.$emit("select")}}},oe={class:"predefined-status"},de=["id","checked"],pe=["for"],me={"aria-hidden":"true",class:"predefined-status__label--icon"},he={class:"predefined-status__label--message"},ge={class:"predefined-status__label--clear-at"};function Se(t,i,u,_,o,e){return n(),m("li",oe,[a("input",{id:e.id,class:"hidden-visually predefined-status__input",type:"radio",name:"predefined-status",checked:u.selected,onChange:i[0]||(i[0]=(...d)=>e.select&&e.select(...d))},null,40,de),a("label",{class:"predefined-status__label",for:e.id},[a("span",me,l(u.icon),1),a("span",he,l(u.message),1),a("span",ge,l(e.formattedClearAt),1)],8,pe)])}const _e=S(ce,[["render",Se],["__scopeId","data-v-200bf95b"]]),fe={name:"PredefinedStatusesList",components:{PredefinedStatus:_e},emits:["selectStatus"],data(){return{lastSelected:null}},computed:{...T({predefinedStatuses:t=>t.predefinedStatuses.predefinedStatuses,messageId:t=>t.userStatus.messageId}),...R(["statusesHaveLoaded"])},watch:{messageId:{immediate:!0,handler(){this.lastSelected=this.messageId}}},created(){this.$store.dispatch("loadAllPredefinedStatuses")},methods:{t:s,selectStatus(t){this.lastSelected=t.id,this.$emit("selectStatus",t)}}},be=["aria-label"],ye={key:1,class:"predefined-statuses-list"};function ve(t,i,u,_,o,e){const d=c("PredefinedStatus");return t.statusesHaveLoaded?(n(),m("ul",{key:0,class:"predefined-statuses-list","aria-label":e.t("user_status","Predefined statuses")},[(n(!0),m($,null,B(t.predefinedStatuses,r=>(n(),y(d,{key:r.id,messageId:r.id,icon:r.icon,message:r.message,clearAt:r.clearAt,selected:o.lastSelected===r.id,onSelect:f=>e.selectStatus(r)},null,8,["messageId","icon","message","clearAt","selected","onSelect"]))),128))],8,be)):(n(),m("div",ye,[...i[0]||(i[0]=[a("div",{class:"icon icon-loading-small"},null,-1)])]))}const Ie=S(fe,[["render",ve],["__scopeId","data-v-b7009355"]]),ke={name:"PreviousStatus",components:{NcButton:A},props:{icon:{type:[String,null],required:!0},message:{type:String,required:!0}},emits:["select"],methods:{t:s,select(){this.$emit("select")}}},Ae={class:"predefined-status__icon"},Me={class:"predefined-status__message"},Ce={class:"predefined-status__clear-at"},$e={class:"backup-status__reset-button"};function Be(t,i,u,_,o,e){const d=c("NcButton");return n(),m("div",{class:"predefined-status backup-status",tabindex:"0",onKeyup:[i[0]||(i[0]=M((...r)=>e.select&&e.select(...r),["enter"])),i[1]||(i[1]=M((...r)=>e.select&&e.select(...r),["space"]))],onClick:i[2]||(i[2]=(...r)=>e.select&&e.select(...r))},[a("span",Ae,l(u.icon),1),a("span",Me,l(u.message),1),a("span",Ce,l(e.t("user_status","Previously set")),1),a("div",$e,[p(d,{onClick:e.select},{default:g(()=>[b(l(e.t("user_status","Reset status")),1)]),_:1},8,["onClick"])])],32)}const Ne=S(ke,[["render",Be],["__scopeId","data-v-5fa747a0"]]);function Pe(){return[{type:"online",label:s("user_status","Online")},{type:"away",label:s("user_status","Away")},{type:"busy",label:s("user_status","Busy")},{type:"dnd",label:s("user_status","Do not disturb"),subline:s("user_status","Mute all notifications")},{type:"invisible",label:s("user_status","Invisible"),subline:s("user_status","Appear offline")}]}const we={name:"SetStatusModal",components:{ClearAtSelect:G,CustomMessageInput:ee,NcModal:q,OnlineStatusSelect:ne,PredefinedStatusesList:Ie,PreviousStatus:Ne,NcButton:A},mixins:[j],props:{inline:{type:Boolean,default:!1}},emits:["close"],data(){return{clearAt:null,editedMessage:"",predefinedMessageId:null,isSavingStatus:!1,statuses:Pe()}},computed:{messageId(){return this.$store.state.userStatus.messageId},icon(){return this.$store.state.userStatus.icon},message(){return this.$store.state.userStatus.message||""},hasBackupStatus(){return this.messageId&&(this.backupIcon||this.backupMessage)},backupIcon(){return this.$store.state.userBackupStatus.icon||""},backupMessage(){return this.$store.state.userBackupStatus.message||""},absencePageUrl(){return O("settings/user/availability#absence")},resetButtonText(){return this.backupIcon&&this.backupMessage?s("user_status",'Reset status to "{icon} {message}"',{icon:this.backupIcon,message:this.backupMessage}):this.backupMessage?s("user_status",'Reset status to "{message}"',{message:this.backupMessage}):this.backupIcon?s("user_status",'Reset status to "{icon}"',{icon:this.backupIcon}):s("user_status","Reset status")},setReturnFocus(){if(!this.inline)return document.querySelector('[aria-controls="header-menu-user-menu"]')??void 0}},watch:{message:{immediate:!0,handler(t){this.editedMessage=t}}},mounted(){this.$store.dispatch("fetchBackupFromServer"),this.predefinedMessageId=this.$store.state.userStatus.messageId,this.$store.state.userStatus.clearAt!==null&&(this.clearAt={type:"_time",time:this.$store.state.userStatus.clearAt})},methods:{t:s,closeModal(){this.$emit("close")},setIcon(t){this.predefinedMessageId=null,this.$store.dispatch("setCustomMessage",{message:this.message,icon:t,clearAt:this.clearAt}),this.$nextTick(()=>{this.$refs.customMessageInput.focus()})},setMessage(t){this.predefinedMessageId=null,this.editedMessage=t},setClearAt(t){this.clearAt=t},selectPredefinedMessage(t){this.predefinedMessageId=t.id,this.clearAt=t.clearAt,this.$store.dispatch("setPredefinedMessage",{messageId:t.id,clearAt:t.clearAt})},async saveStatus(){if(!this.isSavingStatus){try{this.isSavingStatus=!0,this.predefinedMessageId===null?await this.$store.dispatch("setCustomMessage",{message:this.editedMessage,icon:this.icon,clearAt:this.clearAt}):this.$store.dispatch("setPredefinedMessage",{messageId:this.predefinedMessageId,clearAt:this.clearAt})}catch(t){v(s("user_status","There was an error saving the status")),I.debug(t),this.isSavingStatus=!1;return}this.isSavingStatus=!1,this.closeModal()}},async clearStatus(){try{this.isSavingStatus=!0,await this.$store.dispatch("clearMessage")}catch(t){v(s("user_status","There was an error clearing the status")),I.debug(t),this.isSavingStatus=!1;return}this.isSavingStatus=!1,this.predefinedMessageId=null,this.closeModal()},async revertBackupFromServer(){try{this.isSavingStatus=!0,await this.$store.dispatch("revertBackupFromServer",{messageId:this.messageId})}catch(t){v(s("user_status","There was an error reverting the status")),I.debug(t),this.isSavingStatus=!1;return}this.isSavingStatus=!1,this.predefinedMessageId=this.$store.state.userStatus?.messageId}}},Fe={class:"set-status-modal"},Oe={id:"user_status-set-dialog",class:"set-status-modal__header"},qe=["aria-label"],xe={class:"set-status-modal__header"},Re={class:"set-status-modal__custom-input"},Te={key:0,class:"set-status-modal__automation-hint"},je={class:"status-buttons"};function Ue(t,i,u,_,o,e){const d=c("OnlineStatusSelect"),r=c("CustomMessageInput"),f=c("NcButton"),N=c("PreviousStatus"),P=c("PredefinedStatusesList"),w=c("ClearAtSelect"),F=c("NcModal");return n(),y(F,{id:"user_status-dialog",size:"normal",labelId:"user_status-set-dialog",dark:"",setReturnFocus:e.setReturnFocus,onClose:e.closeModal},{default:g(()=>[a("div",Fe,[a("h2",Oe,l(e.t("user_status","Online status")),1),a("div",{class:"set-status-modal__online-status",role:"radiogroup","aria-label":e.t("user_status","Online status")},[(n(!0),m($,null,B(o.statuses,h=>(n(),y(d,U({key:h.type},{ref_for:!0},h,{checked:h.type===t.statusType,onSelect:t.changeStatus}),null,16,["checked","onSelect"]))),128))],8,qe),a("form",{onSubmit:i[0]||(i[0]=V((...h)=>e.saveStatus&&e.saveStatus(...h),["prevent"])),onReset:i[1]||(i[1]=(...h)=>e.clearStatus&&e.clearStatus(...h))},[a("h3",xe,l(e.t("user_status","Status message")),1),a("div",Re,[p(r,{ref:"customMessageInput",icon:e.icon,message:o.editedMessage,onChange:e.setMessage,onSelectIcon:e.setIcon},null,8,["icon","message","onChange","onSelectIcon"]),e.messageId==="vacationing"?(n(),y(f,{key:0,href:e.absencePageUrl,target:"_blank",variant:"secondary","aria-label":e.t("user_status","Set absence period")},{default:g(()=>[b(l(e.t("user_status","Set absence period and replacement")+" ↗"),1)]),_:1},8,["href","aria-label"])):k("",!0)]),e.hasBackupStatus?(n(),m("div",Te,l(e.t("user_status","Your status was set automatically")),1)):k("",!0),e.hasBackupStatus?(n(),y(N,{key:1,icon:e.backupIcon,message:e.backupMessage,onSelect:e.revertBackupFromServer},null,8,["icon","message","onSelect"])):k("",!0),p(P,{onSelectStatus:e.selectPredefinedMessage},null,8,["onSelectStatus"]),p(w,{clearAt:o.clearAt,onSelectClearAt:e.setClearAt},null,8,["clearAt","onSelectClearAt"]),a("div",je,[p(f,{wide:!0,variant:"tertiary",type:"reset","aria-label":e.t("user_status","Clear status message"),disabled:o.isSavingStatus},{default:g(()=>[b(l(e.t("user_status","Clear status message")),1)]),_:1},8,["aria-label","disabled"]),p(f,{wide:!0,variant:"primary",type:"submit","aria-label":e.t("user_status","Set status message"),disabled:o.isSavingStatus},{default:g(()=>[b(l(e.t("user_status","Set status message")),1)]),_:1},8,["aria-label","disabled"])])],32)])]),_:1},8,["setReturnFocus","onClose"])}const lt=S(we,[["render",Ue],["__scopeId","data-v-e87f4d59"]]);export{lt as default};
+//# sourceMappingURL=SetStatusModal-0WpUw_Vf.chunk.mjs.map