From b06596bbb699ed32bbf727bdf956659d08488d40 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= Date: Tue, 4 Jan 2022 22:53:15 +0100 Subject: [PATCH 1/4] Filter bar animation MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- app/soapbox/components/filter_bar.js | Bin 0 -> 3308 bytes .../compose/components/search_results.js | Bin 4988 -> 5955 bytes .../notifications/components/filter_bar.js | Bin 4333 -> 3492 bytes app/soapbox/features/reactions/index.js | Bin 4416 -> 4640 bytes .../features/search/components/filter_bar.js | Bin 1369 -> 0 bytes app/styles/ui.scss | 28 ++++++++++++------ 6 files changed, 19 insertions(+), 9 deletions(-) create mode 100644 app/soapbox/components/filter_bar.js delete mode 100644 app/soapbox/features/search/components/filter_bar.js diff --git a/app/soapbox/components/filter_bar.js b/app/soapbox/components/filter_bar.js new file mode 100644 index 0000000000000000000000000000000000000000..d17c1a908288d0801ece567783f56889cc48b834 GIT binary patch literal 3308 zcmbtWU2oeq6n)RHV6dT*FL-l{(xg_=B zBwmLtfCHPnydUSDdq}lhX=B9|$;^tv=%t7Ze~(`8DZiDKvaUbMCDmcyEmXWP7+o5@ zx?Zn(n-zY~EHA)jj~-o+oC?{LRyYUZohmJvQ)vV}TB`EeCy`t>hTdw#uBfu2-P;qQ zw$iFhWV*7j^>I>c3H%w|z|E29Gf4FOPs;2RyBoyrPjgD!N0p^zJw7Rok?Ta&SM*n- z4CU-Y2%w?vX>3QCdIAj z)3Bx?v2j)#2CUEH4^@`GSI+KvDu$N&p8jJtE)H_Jq5`mFB7GAobxBq_XS6cTyR&=; z2+)|9%nRP4`~vOVI<pUkJj&%WRAQdn&%+ZZ>x3D=ewH zwF_+Q^nESoeUhpWD5qYi!h(`rO*~Ws0HgH(O}q_`0+Kesu*1_1AU5IDGeCaUOX{7=ya5rNQL!^qpA9>>TPIN4d0e<{18D{932Z8cJui*ub63iKV_y z0Dd_mxTGorfB{hd^ZJ+W*kmVJ16&Uh&4=-49#4tIF7r;85V;?y1Stj4=T3{N2<;eq&&sFoa6Ebr$N>$JT!RB9KiyFanP9KT;2Pp z4&NMURJixfY%a~sjfW}1!)9Gl+P0!ZN=IVIWZFgFh=VuIp~KXTv1bI2ajaL&NA$cS zA5+mUI(GBr(rw|XNvDuE$S+b=b(X5Y7J^JOzmG{^MtlVXOuuerH_ku=P>2&s64 zf^K!p<44(4EDRMqhWIF3f*F9=r?LYd8GsV*Xxg#^rX?mB|D*4sPObTo2bdygfyJQq z$E+I%dQ79kVG&N!R=MgA#ZO)j(DVNJaO5~XxYm`Er?h>lW@D31FSo45LOK`^QiU{z zWrqolGc?_*Z!F)2EkoEXA0Nn5d;CpoDE0 GH-7_`iT`5& literal 0 HcmV?d00001 diff --git a/app/soapbox/features/compose/components/search_results.js b/app/soapbox/features/compose/components/search_results.js index e316123b1e0b1ec479092e447150e6ab356c1aa2..13487887bfca8b36f22905dbcd20f578b92e27a6 100644 GIT binary patch delta 1023 zcmbu8!D`e{6oyIbxCjXCN|6eu8eWKOGlsPE4D(rv0h9v`A{IO+T!R)HBrDiT z%8AKUwz!Y@@|3-mecCnjl=3$ z@9VR5T2&~T>m8R_q>S0s!X>G7N99T-|YXT0Q5 z!y8U=l?j_^m|@tq?Q-we*|wL6ImzV+w6W+Is=fW&i!gBgbc9l5sOxbfi)ebPS?zz- zPycXYjM&;bd}pNBbz+4t)5YGP4x#^edilAE70_A&}^rB)Q=7nLZaq^2d7 z=9DOGKEZN;aq@b$^_#zQKIXEtam&mpNiA|pEK(>=%}GrzNlk%>*jA(RYoYQm*~tqy Q#93+;^zAl(5(#7i0CDRyl>h($ diff --git a/app/soapbox/features/notifications/components/filter_bar.js b/app/soapbox/features/notifications/components/filter_bar.js index f0802f66b9c48f0397c75605c4b32834ab6709cd..33d4f41f7842c9d797a431a0f574f5ecb01d6f23 100644 GIT binary patch literal 3492 zcmcInO>f&c5WV|XOi#7}TfVzh(QUB>3T%oX=&dLMS{lV{BvDIJZVEyFy~D4Fn=n!8 zMRQ8XnWuSgJ~-h`C!~feWQB%GiUyX_{Jwm>;O^>DitfwL4wb*|=qtw%BU5<8(XOe&n@A`JTzA z9V%;bePEK@7UZooG(INC9|XA?767cS_b>o2_poe*<`plP=H!?;tc(nn8{^6PT6=zE z`xhOWgiv}0&Do@ouCO!i z9;*{|Jp*M;Qb?EN3lbG68Q>~95ZK+(hW|zIh520CL zSWqo0O~qS)X;Ig*Ih_OjD6FX+9nv1|TRN-yw#c};!hd@%u{8A@jIn%duC(Os%_9d^ zo>*I8c_B)S(W$2DN5-n}40&ahv2%wco+2_nE(|j%;u~==Bjo|!NNNIz_Cw8!+g04b zMu4@aFH!fhh1DAJx1f()Wkw>E#j-qheoe@uftRE@O7eDMy16oVQG-q!h-KJ7f~Oga zb|B_a5S9Rd1EsES6iuqHHWA=IXp*8S`Frc1RYEo_%%WA8Z)Q@hopQ#W3XZ1I-hC+O zvozBzGHO{v3A3lc)6O)2Z$2zu!Rl2^EQkPLW6io=9qlAFAAL!fVG>4Rq+|7liFm`! zeazHT=Hnw^t?*v7X99d zCf!UjpGw9bWcjS}FD0greRJ6M-I?^Jw`Vqu_oj(NPIp0EGagMUi6m8CqKDSc)!j?k zH$s$K)$kh6?Iy*K`j(m0QjlnFT#10`QKxg>f7STq~6jVcqTWy!bBmbCzP>D5VOaB zgjTO8i(TE*%XQXN@{80gF=v;c<}dy?xhE^~AUReAQ|C6OUGHZ38LI?4d;E}_-2luE zU{{DY(>8XCKl34e8b`3p+h=-I^Z)!aaeZCce@sk4F5Udf2m3mW_MJXqKDbpREEDFv LF@umkJ}!O%%C&3N literal 4333 zcmeHKO>g5i5WV|XOfM@Nu;qI;+TC`s0TyVAAm}}yq*20MN>oY8O(FQdclaTTP8`d2 zyN3ex#kM%_apq}eIOKIJm4SO?g@H=R8WLrHC+}z6FWo8G{{B~sIxM&Je`V~0(WZwI zE8gHOYRw)|FM&7TurOa6BbIO@Rn3gSGAzS3-f6|jXr%gD$R;dn$=X~#uM0_@G}suu z=Cn$-Gy2j7jFiIgRzvn;|9L+Hs0qQz?h1O~mh6J`tBCOa(c8VLEpd9TEk^aiRlXRXjmr|PvHg9u?=^k4P4_vJjVuH$<9Adg7 zEGX0z{XkdIBl+h9VK6#GdE@cHxms?fRC6YWm~JgL@L(;!@duZo6RyRUhgiQ@CW@JI z-IH$@lvnud${}O|d>YeuRtTmw+_7;j^!p}pVLO-K)(S|au09!A< zelmIv^wB7&Hayc6?CLA6x~53EzQ;d0uCTNzHyC62+FTpOo5xoGR&H2RP_fApV|L0T z@yb|ttqoW^HCz)QSx1j7#=BvQG+vRpt?w6nTT&1}HlGDAzR%-wvjQwa_zF#@8kjF2 z`vB&N>(ol5(^!_*;P=G5we*TqM@48artbuO5OvUL39$@II1s1pQASWN$|5K1E&!g> zZ-nI+fwoDI-A^$oe1y5P2DmQy23&sp#%j#=8qLFlZ#1i%spLZd5G3!6ke!9s>t0L=_KOyGHC&O}q%8f;S zIMQooQoVUh7F#%yU>7u?-Bfc)?Tz3lx|3AdA$5ct8wdq*qAupCtMgUYo}^BH;J|=) z@6K=AExjIDv#V$vp_%j&3EyCfR5?k{$dP}lXf0*A(lr-&Ow;l3Is430m<#!MiC6)7 zt~h?yj!;vHRv|M_s8;q~qN!5LM~AxAfxb3(j;7aBG@IWbea;U6&+2!KcZjT`_v_xI9wFkNs743 lTLhZY58(|wgj>fXlj6c`CcO90|Gs%2yN}hEOYP9{0zx_T9G7EyiYSaJ@u1EK3Wj9X zvWfJ4>~q!{$0JumM8&ywT?Rm|+lCOFQ5)(MBbz(KXQoueleVFqxbEUz`(Deb)#6n* zL{8s6RVo;37D07ysn}%d z^Jt*5Wo2~W~taIR1OkaD~#)l;;0*JWiT+G xCrw1q>UQLFBJr$O7N2@)wW(5>$(&mZUD$_O4fw=iCdK{;(=4fBEWV2Ul^=X%9Py}G()t({{|j*ULVEOaZXVFnf3 z>!oGpl%y7Ez(f>m?G#{az2yATyb?{l+{6MDd6)~cQ!8!ZM(O1NomvZawKLS&=&rW4 twMCc>QjXsrYN54u=*A=XV7Jx6eW+QB5{x$bz~DvpwkBM9^I?HlMgTj3jIaOz diff --git a/app/soapbox/features/search/components/filter_bar.js b/app/soapbox/features/search/components/filter_bar.js deleted file mode 100644 index 917ad99c7a2dd291e44f335e15ee17294f354c2d..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1369 zcmb_b!EW0y488j+cvAy3&b^JhVFilqupuaRFI1UHv^kO|(nW{B|32DsWUT=PtcXt* z{T}(=Gi4904-Ai}4Z}A01E?^(tJ}iHPn+P|@4s85>2oXRB@cxebA$&U4w@P3uSleK zcn#M5K*L`gH_+#umsUzbE%0?5UE@}F4a3KoP?$y&!GmoW!zUd8Um0CZQD(X60^WO3 z=g=`6ivoaHvo$bii&`tGgFJ+dsED0zAbBaboinASNBq^%4xUKtshzjF^fTX(Sz}h#OLJY zBu`SUvaX|+ff{FyegM|BeStB}Z~B0hiXxw$wqvx*XC2ht1Qqae$Lw7?L&iKt(P?;9 zRiLynzH>|pJ`4x8FR0)KlK~!3S8~hZ&Mc-o+!ucU#f+I$ diff --git a/app/styles/ui.scss b/app/styles/ui.scss index f29c89ba00..c8de418e06 100644 --- a/app/styles/ui.scss +++ b/app/styles/ui.scss @@ -636,10 +636,8 @@ article:last-child > .domain { } } -.notification__filter-bar, -.search__filter-bar, -.account__section-headline, -.reaction__filter-bar { +.filter-bar, +.account__section-headline { border-bottom: 1px solid var(--brand-color--faint); cursor: default; display: flex; @@ -684,12 +682,24 @@ article:last-child > .domain { background-color: var(--accent-color); } } - } - button .svg-icon { - width: 18px; - height: 18px; - margin: 0 auto; + .svg-icon { + width: 18px; + height: 18px; + margin: 0 auto; + } + } +} + +.filter-bar { + position: relative; + + &__active { + position: absolute; + height: 3px; + bottom: 0; + background-color: var(--accent-color); + transition: all 0.3s; } } From 95bdfb6c2fd1cb122d4f5fddefa93192e0325b12 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= Date: Thu, 6 Jan 2022 18:06:38 +0100 Subject: [PATCH 2/4] FilterBar: handle resize MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- app/soapbox/components/filter_bar.js | Bin 3308 -> 3981 bytes 1 file changed, 0 insertions(+), 0 deletions(-) diff --git a/app/soapbox/components/filter_bar.js b/app/soapbox/components/filter_bar.js index d17c1a908288d0801ece567783f56889cc48b834..8aebf9bb1c98c43d7e501f1ba4a7332c1dbbf589 100644 GIT binary patch delta 682 zcmb7>y-EW?6ooMmlB|e=m4bK`A-k}~h*pLb{3`?t@vpNOcW#ow&CIehNzfS53xY6( z_z)Iit7YfMOsh zk@b6WIn--2PDQ&!DBWryS3689Y+qMJVDs&RWB#uP2uZTiBdHn>|=W?80qVB>{xom=` z5)okmhF2qSFmMk16>f0)vXhT8 Date: Thu, 6 Jan 2022 18:19:32 +0100 Subject: [PATCH 3/4] FilterBar: conditional animation MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- app/styles/ui.scss | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/app/styles/ui.scss b/app/styles/ui.scss index c8de418e06..a594752e54 100644 --- a/app/styles/ui.scss +++ b/app/styles/ui.scss @@ -699,10 +699,13 @@ article:last-child > .domain { height: 3px; bottom: 0; background-color: var(--accent-color); - transition: all 0.3s; } } +.no-reduce-motion .filter-bar__active { + transition: all 0.3s; +} + .reaction__filter-bar { overflow-x: auto; overflow-y: hidden; From 5e31c1206357e0001caea8f98f1deab59d860dd4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= Date: Thu, 6 Jan 2022 19:01:14 +0100 Subject: [PATCH 4/4] FilterBar: Do not trap Tab, Home/End keys MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- app/soapbox/components/filter_bar.js | Bin 3981 -> 3676 bytes 1 file changed, 0 insertions(+), 0 deletions(-) diff --git a/app/soapbox/components/filter_bar.js b/app/soapbox/components/filter_bar.js index 8aebf9bb1c98c43d7e501f1ba4a7332c1dbbf589..a2ba027754eed39a494dc5b1680b7fcfc7a73b2d 100644 GIT binary patch delta 12 TcmeB`zaz6Dm2LAh_V4TfA=w2E delta 149 zcmca3(<{Frl}#-;alh3e9Pc~yy z;jUFk%>inFiW%wGLNz57r6y)ugEYA5=DYMyz HO@RXdIt3`m