From 08813f541d293f1411685ea30ce1e07f1dede20b Mon Sep 17 00:00:00 2001
From: Vincent Petry <vincent@nextcloud.com>
Date: Fri, 9 Oct 2020 11:50:54 +0200
Subject: [PATCH] UX improvements change status dialog
Focus on the custom message field after picking an emoji.
Hitting the enter key while in the custom message field now triggers
saving.
Disable save buttons while saving is in progress.
Signed-off-by: Vincent Petry <vincent@nextcloud.com>
---
apps/user_status/js/user-status-menu.js | Bin 581074 -> 581074 bytes
apps/user_status/js/user-status-menu.js.map | Bin 2080123 -> 2080123 bytes
apps/user_status/js/user-status-modal.js | Bin 15112 -> 15695 bytes
apps/user_status/js/user-status-modal.js.map | Bin 61697 -> 63129 bytes
.../src/components/CustomMessageInput.vue | 19 +++++++++++++++++-
.../src/components/SetStatusModal.vue | 16 ++++++++++++---
6 files changed, 31 insertions(+), 4 deletions(-)
diff --git a/apps/user_status/js/user-status-menu.js b/apps/user_status/js/user-status-menu.js
index 01098bfdfc4b6692fc63403b335a5f1c5e716dcb..bd9211e63b5a4c3e9a24d61fec6c4e6ac744edd0 100644
GIT binary patch
delta 88
zcmcb#Tlvy%<qhwcL{bcr(hN-!%`A=0&6120jVzK)Oq!XP+nJadftU%1L2MQvW(8t4
iAZFjr#LThhmPndWYHF%sim7p$fu*5QvU##$nlS)g8W$7*
delta 88
zcmcb#Tlvy%<qhwcM3R!t(~?q5&CM(l%?%Ax5)Ca)jGLL5+nJadftU%1L2MQvW(8t4
iAZFjr#LThhmWY|LMOsR-rKM47lA)nlijiefS{eXquoqhZ
diff --git a/apps/user_status/js/user-status-menu.js.map b/apps/user_status/js/user-status-menu.js.map
index 04c901225ba0cf75a5b1bbd56b6834b3f8c0b7a3..9209374d916a956e79546ea4dbb2a89fff27708a 100644
GIT binary patch
delta 169
zcmWN=$qj-)7zWU|ppN@8?pq7YB1jvYxB@d%2J!GGo~gsD2{((d3`>BE-%DOo7foF}
zs6}n+P?tRFQJ)5H_KCTZ)>>h1%K4Fyd6)~Qs&C9*9yfmGgieD<g+ZoLdC#?emI=cl
kj&O_<oZ<}UxWFZ@kmDLRxWygr@qkA>;TbPgnOuM74=i^*rvLx|
delta 169
zcmWN=Ne+TA7zWTdpw<z!D$ZvpXiKlbiY=w~7=*>2xaJ&gP1tz|kKqwu<M)!+HbvVM
zC3UDvJ?fK30~*rk%{~d2QS5B4b@(tsNE>S7T>VYh%i|_j&e*$>ai)Z@nb5cBS)~le
kIKe5-aE=S~afvHjBgYMHafbo!@qkA>;TbP=m0o}L4@j;(?f?J)
diff --git a/apps/user_status/js/user-status-modal.js b/apps/user_status/js/user-status-modal.js
index 09f1acc03094b830a8af0da96de04883da247b22..e08db72a7419c4488b1dc325aaa22a1b4b75aa39 100644
GIT binary patch
delta 1069
zcma)*y>HV%7{=wcv_XiLstrx4ln+zDt`65{H;H{Af-=#eQbkb(l!7kKId+>mk$nj*
zk%fu`f~iRN2Y^^vDtSV%z{J)WF~G=%!~{zr-yvdQyWjb_=RH5~drzx}4-UR^p(NDR
z1v#$=-?$fCNXBMTPU~8*KM03Hszzj8!#evoGT(*Z_eg3ul+2~DuHY2Qj`}_LFuL4>
zsj)&2o{W`ya5VO|2k%c^?m`e6-yEK(W<5bslVZlKI0m&#PTUF}PpKSdu{ROMS;6x3
zBF9yO{WE)mw?N+ZaIQ%5s780o1YIqaiUd0#PfT1XQj~zc54H)lN_h{}%#u;@P{&sg
zYt*tmY1SpCC)rN9LZzlc5PiUAqUjOfRdU-lWr^tYaC><r8s@gxTJ$1YIWMt;=*?A6
z;G1W8P^%lE4q!^%dP#m8?-YqspcapKP38gLxiOEZ)L8?*T*L;kO2s^JdBj%WBwLAT
z?3^|oF)Zv92;jHKZl%nlbt<)X*t2kk-3up{ns*e4=x@|*ut!P5xux-aaYOV)u)YBj
z5IB`$5%8V1@=X>cvQsX()Dyub`y9K(Z3dC}r{nd1{2@Lcx4l(dwVlE$#k8JW0tS0?
z?*>m)u^T7ZMtB*Pm12vam7_y;=ndQ05`@1ZChdId$<xyIGVwfIAWMB=i(+s`ddP_h
zD)ko>YeZ_8W|d6NC3wqs39YzJoE@r>lM1p;fk<VSRI>{EqJ-Jc`I#xbU)esNW^?jw
zF^$>?VM~=Uut(xLYTI_dve)um1YuX+Hf_nF+S50SLlqE-%2^^Am>QO#uyr-b?!&bK
z9kG}7P9CX~0}5on;DsRtKsA_Ez8{-z&dR@`@PJKd$<u&u&0C|D9<GvB1A=Q>j62(z
stj_Q>H2t~x%+!Pb(nZjt?(<`>(Dli@oHOA9PU&hol~b{z84C-403z9F*#H0l
delta 573
zcmYk(&ubGw6bEp|#B@byl(zJjG|3{gvD;*)lgVT^2~rSx>cxXd58`BZ(#?-<mdzxD
zmQZ@Ah?ffQ5Aa_o&Pj>~J?X`s1rLfBJ$Vtm6n_<x_4M9{_k{=Vo$WpDpL|4GvCgUG
zGOoU$XGkL^XB3-69mjB7E3yK!++qpdOytK<zbA?b%_OwOd4WQ8av0(D<W_{)<W7V~
z$soe7<Y|Og*KUuYwCl~plvnMptP`3o*L%Jr8y!F0S4Xo1p+3Br1JqYr^BV|x>UiNW
zc6Dg%3h8y+uDuV9B^DnJjV63pT7&JIYrs<XsaVk)e$bP;vCpLp|K{{vK4=SnM|!%g
zmrUKzgEn`B*J-;V)NScCx{x7L@FP`<{p)k-xr=(1UR)TRL^u3iyPeI6LC^_hH*2&Y
zo~fXg+Q_`Wf|{_n`c%DKJ&nP6em>D~I(}8E&-nwSiChqhe$|8%Y$67q@C>5x6K^k5
zTjYE(kX5T(3k7eL9o`jbW`{!dLO(qk!ruCWTh=Ix+5cgTqx8iVjNt~o1DoXDC1yiF
zrr{l(K^D9v%W>1dSbZnoF2lJ+)ux?7@TB}49##&=?|`qByVEs?)oU(g#S&*2yBu2u
F@(1}{x;p>>
diff --git a/apps/user_status/js/user-status-modal.js.map b/apps/user_status/js/user-status-modal.js.map
index 7e2045b3305f75e91a32271e2298311e3ef96a1d..83e87f35e228f21c1c67b47161cf8b6da8a38e5a 100644
GIT binary patch
delta 2932
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
G?ED+lhMqkD
delta 1933
zcmZuxZERCj7|x}g>jXwYEE~jqbRFyHDZBmdFs8is?5^3CZXKl~=)l~5?2~P5?bb3t
zVhAP*>f|*TGEq=}7=M_VON<5+KjJS*P+~-hMnzHhp%Ehxe;D+fd)IbL{BwGr=Y7xn
zKIb{_>FM7MPyS?>yJHkvMK=lt7w*4*Ej}!qH28gPJZEyf@Vps6JW{4wR=5R&+pjP#
zTo&>KJb^;CdevYP4Cz!7Cs#=<G~gM~zmoo-f|rFxRV_PYFuFWRvAAWr;*JpyR#xMg
z%2PNsY{9-Y=5@(^X=N&wRkG6=E3syjnY4On&HQR%6ssO;sC7sX1`>k^kRIq>{0ajF
zGEHfVgzq$LG7L+d_+EVo?^K)7P$M^lNdzE5C;%n90d|uvfG&~*n2mJvZ+CYNpRRGZ
zT6fG!9E-7GiM4=O9|;45^^FYA?2Pj8L|l~EZaUP5M{Bd?lvnS`;=Nj{X}SRHbwSfa
z0Sqk#Z!QHlmjKmX?-PU^?zL74dCXbcn!OS`BlM6sKz^rBla`75CDIGfONJ!?CX***
z)$7(XLT!hpSy#)p#9b1R0XiJ|S!VF8%~CO_J1|7C*RcVw*eoWuq`5PKw{7v&OFG8$
z*w-jA*H1UvDktQ2(m}`D#R!qx#_(d}qYW`RFZb%rDA1^fa%&<?0_~nG9K3t8XexrI
zHj51fK*<D?FY`M{lTit1Uh-0Yu9y$6ZgyG!H&0oXMw)7b1K8EHv3#6e{w|oneNCO+
z+9a^rj8dS7^HUNZl1a8Mi4976uvH5N3qhUENswjxV~|0!-FjrCjh7i_Yo-%q;L6!L
zCP62VK?+?!L}mbsYF$}03dBz#&KQm7#{)KZY+=C!+a$A#1Co;$DLpXGD7OUD>_^w1
zhCKWBo7;fv+YK$O>n?D}c*!oWn2q3r&2#<(l0KoDk7;J+$ReT5I-ipr+6;_QW(O$R
zb+JeC@g@uY*}P}{vhA!h>pqK7haI2U(zcq7Z*lr(@Y^i`ewF<B1o$Ma$xy-@66P#(
zcLYO@?DBfdM#wGJ`@`X?WN(8{rKVw=;tx&>mTj!Ueo|%5Ey`n7!KjqihjX5+6vFr}
zaii!k-N&WO>VZ0E{YsH?v%oF6bS~-KUg4&Eo{}EUG~t&{yG<^gKzlU08En#co+iXc
zF|^fIz08OMtS}>Z4tJvpe{q`2N13CeRK|;2!*$EDb=ykMk>)4S-4a@#NCpNHDPMs7
z`vqLCl;Udjdembr`^!!KfH%;Z@(1x2tyVt>Js_C;1B$OT6;M=HaHQNMdVC2*@%l<}
zkEjHEF42Ro;6`lt&57GXMs*<~2zYCb|1VeKzn-;tlh&(bNBc5Ty-5=l#g6L2-p2(z
z{!;x(uenIFHaBoZbe;LJl#*4PGtQ#Ezj|7VS?ZSP6O~12tk4Oeh_nh0rK&`9DThno
z3nfwljfue$crmfR1Xd+4l)&f7P!Xt>)EOgQ8hXTd_;B+cyf<J`L&J>%o*22T9viiY
zxG-OhH|CGxg_l3Y+}l>Hd*u`S^*Jx5U%gw@kJpaa@%Y(~N(6Hsw}19?iHP0};KKU@
zc>A@?CMBDl%4|E>Zyi(e`_kis*`a>xwtj0+?6=}uuRp8){l+N~&wu4tS6!(QF#Pp7
wwd|XJ3~KFn-y3klwOTdvquYSS8$NZz^$v6KB$|l1+viI}K}7M+qjx+00}mx!tN;K2
diff --git a/apps/user_status/src/components/CustomMessageInput.vue b/apps/user_status/src/components/CustomMessageInput.vue
index 2fc637d974d..f84714adddc 100644
--- a/apps/user_status/src/components/CustomMessageInput.vue
+++ b/apps/user_status/src/components/CustomMessageInput.vue
@@ -23,11 +23,16 @@
class="custom-input__form"
@submit.prevent>
<input
+ ref="input"
maxlength="80"
+ :disabled="disabled"
:placeholder="$t('user_status', 'What\'s your status?')"
type="text"
:value="message"
- @change="change">
+ @change="change"
+ @keyup="change"
+ @paste="change"
+ @keyup.enter="submit">
</form>
</template>
@@ -40,8 +45,16 @@ export default {
required: true,
default: () => '',
},
+ disabled: {
+ type: Boolean,
+ default: false,
+ },
},
methods: {
+ focus() {
+ this.$refs.input.focus()
+ },
+
/**
* Notifies the parent component about a changed input
*
@@ -50,6 +63,10 @@ export default {
change(event) {
this.$emit('change', event.target.value)
},
+
+ submit(event) {
+ this.$emit('submit', event.target.value)
+ },
},
}
</script>
diff --git a/apps/user_status/src/components/SetStatusModal.vue b/apps/user_status/src/components/SetStatusModal.vue
index 3ba15ec129d..0613a2be38c 100644
--- a/apps/user_status/src/components/SetStatusModal.vue
+++ b/apps/user_status/src/components/SetStatusModal.vue
@@ -49,8 +49,10 @@
</button>
</EmojiPicker>
<CustomMessageInput
+ ref="customMessageInput"
:message="message"
- @change="setMessage" />
+ @change="setMessage"
+ @submit="saveStatus" />
</div>
<PredefinedStatusesList
@selectStatus="selectPredefinedMessage" />
@@ -58,10 +60,10 @@
:clear-at="clearAt"
@selectClearAt="setClearAt" />
<div class="status-buttons">
- <button class="status-buttons__select" @click="clearStatus">
+ <button class="status-buttons__select" :disabled="isSavingStatus" @click="clearStatus">
{{ $t('user_status', 'Clear status message') }}
</button>
- <button class="status-buttons__primary primary" @click="saveStatus">
+ <button class="status-buttons__primary primary" :disabled="isSavingStatus" @click="saveStatus">
{{ $t('user_status', 'Set status message') }}
</button>
</div>
@@ -99,6 +101,7 @@ export default {
clearAt: null,
icon: null,
message: '',
+ isSavingStatus: false,
statuses: getAllStatusOptions(),
}
},
@@ -143,6 +146,9 @@ export default {
setIcon(icon) {
this.messageId = null
this.icon = icon
+ this.$nextTick(() => {
+ this.$refs.customMessageInput.focus()
+ })
},
/**
* Sets a new message
@@ -178,6 +184,10 @@ export default {
* @returns {Promise<void>}
*/
async saveStatus() {
+ if (this.isSavingStatus) {
+ return
+ }
+
try {
this.isSavingStatus = true
--
GitLab