From 32688c5a9aa3903e548278b0c7e7a771cf855c68 Mon Sep 17 00:00:00 2001 From: Simon L Date: Wed, 24 May 2023 17:05:05 +0200 Subject: [PATCH] add counter bubbles component Signed-off-by: Simon L --- developer_manual/design/atomiccomponents.rst | 13 +++++++++++++ developer_manual/images/talk-counter-bubble.png | Bin 0 -> 3620 bytes 2 files changed, 13 insertions(+) create mode 100644 developer_manual/images/talk-counter-bubble.png diff --git a/developer_manual/design/atomiccomponents.rst b/developer_manual/design/atomiccomponents.rst index 6c6583b07..653280fb6 100644 --- a/developer_manual/design/atomiccomponents.rst +++ b/developer_manual/design/atomiccomponents.rst @@ -259,6 +259,19 @@ User bubbles When referring to a user inline in your app, a user bubble element can be used. In Talk and Comments, user bubbles are used in the content when someone mentions a user. In Mail, it is used in the header for the recipients of the message. +.. _Counter bubbles: + +Counter bubbles +------------ + +`Counter bubble Vue component `_. +`Penpot counter bubbles `_ + +.. image:: ../images/talk-counter-bubble.png + :alt: Talk counter bubble + +In Talk, it is used for showing which chats are unread and if you or your group is mentioned. + .. _Empty content: Empty content diff --git a/developer_manual/images/talk-counter-bubble.png b/developer_manual/images/talk-counter-bubble.png new file mode 100644 index 0000000000000000000000000000000000000000..5ae654a736324d371a15bfb15fb8f97fb55e6b7f GIT binary patch literal 3620 zcmbVP=OYx3A0|7ItdqS9;m(#lGY@BkP-kzEy+>!AJ3EIHvdPLSBiV$D%rnl&o*fyP zzrO#%@5S?ZKF^!y&GY7Y5)8r5sO~b~B_JT6($-Rk{Nu8JcuG$C?@k?Pd;cTCH;`wl z1T`4e?SF#UNkw0UfS^8^@(N1wPgA_svUo#4KF7q8iYoGYpJp?aMyThEs54JE zyXUCn+K)+*>Pe)PCnT$Dz#<8ugzHpC;XQN5ZD$9Gb)x=BJZ;S zZYhTG5PaJ3*R2wYzM z?-yv8EzNuVyN=O*?=070o;5KEX^LTb1wN~o-tD1Mh;$B^P2Kc`sFb}c-U6CF$t}h+ zLJ5jG`0Zz`EsV6ys1swH^jrO25LLg?1)6OOWZfkjSm@O74!4be>4OX zM>~ZlIUMgObnt_>$YepX3vTlv_*2-yg1f~z*S=z9PP}imQ|zWNq^g}s zjykQm_0kSDB%!Vk;Hp|o8#m~;C+V)xL;=H>ad&OOHiIAlrVy}oy`iNJTAmN55TQr9i*ctO1!iEjANMcuI#uI~AC_oVUVM$SQJj^gDVq2EZi z=ZY)~ub$+B&cvY1V@;f!C`P#&UmiF@0ntK+Gyl+4iGl`?H92UFmaAEIP+R&(yh!iH z_p3_A&L7+RU!9d{7NVQPNa6hF6b`aLK};-0@rj~I{2?};NrzmlC8=+fE3B~Ri})AR z2|{Krpf*3M+O<$7GTfe{^KB5Ixbne`)EVK`da7ZCBg@*Agt#|zNh|R#wIq*jCG+d! zZaftzzO1XXsvp;38fe|lKs21z&$aJVs$lX-iAdhW5WC%FfXju4ZbT-r?Z>j@mfl?w z`WgT6EU~WGtdiLfy0qhB&ca8XgieBMjc~NPmZy9bp{Oc%^UKuI?|^xH5O8~CdK6gv z<9>$gw2Hs8@0_G>L#FH3e!!#miJ8dRT3CeEX=8=03IrX|Z-js#ddPa&K zz0~T?+qbJXK$TylzBA@QtN8k5OFQL&XA-*qI4(6PP#`E3QodD^iB542T-8#q5N;HE zyysFpt8ElMH){3&FBLE0UQh#)(e`IlsQa*;L0u*7!>KeBI!?r8?rN8*X*XosE_|AI z%WHFLj(wQN+CLXdQ}B@2M@1gOP8H3v7?wfCPJ4e$obg7Wa_>PUeBhF2PJ?90<*T{s z=BYpT%-fQpxYdf&-+c(j3gRno%M_DVc!(`4SP=l1QJS8q;WDQc9(`vW*8L;OJx_@w z;O42?g;oQ9TW56cYFb^WE$1rg;i`0)gxT2jiSP0e=LFuW^?ZTaOq)vcyk`;wq39-! zvSMN=TUYjyZv0Tx|5^>*!uwtEItg$GQD*+Lw?8qjL4nW-K&HwgmCM(OI~|w)Xzu7G zeuR`>CCJQMNTpYUF=psq%ki0a_6Bi7fOfv+9uJuHR57Uvp)Un$%#-Dp5#yS6sE?z+ zCoc*;XfEZuXdZd0XWCzIU@#2)u=17~+gr(Nn6!!zn}Nx0-yw;&sCt|$%R=ms3Om#0 zBgdv=oULZ37NgrGMrjI(-zm2gsuk2Kg&=BhR}wpPAE72q^cR5H{x%SR)jPJ))sc91;I)Ilx%9m<=#FnG^@^%+s<9cB%k=M`w5lIdxJG<)Iu9p z0-DXZdqCSP>i(KVMz>55A7kc=Qq?woCbOA2%zq@35(9 ziY{s}Nx^k+^lB;p_|(dB+|+Crn%OUs<7XCCj-++AaK-&?V&^(u)hCJm6&w;j3!|B@ z)m+Gq9hks|6ZO4;G1b9RiE~2}S?)6cTOcoakMkizZI%!9TKAT;#<{uq5(+3D!4dVv z{`sk&?d|xkmgHo;Igjy}E0S`}vm$v{XJ-WBq52wjnNzwBD zL|K(X)}~#f!wf|w__TR2GUYDb=%C=YkC``5qIp@1m5U0$zOx8BO6(m*f(n-U#5!8` zai}`I?(iiI3fQ3dxW{$JE5Lx&hK^|TTUmLP`dmoRU`@*2>5i@a0xcX)(q;&I%XDAm zRa}ItG9e4GzLEq_%)yT-x`b$^I0L)~KA0!_Oa!3$3%#p2V;h02SjbqU^W^(4rB3!b2XS`X##n9D;@{^KaZ#%?$ z`+37NLyx-1UYU)B1y)|GEjCwx7*~Fn2>a05Y3I0!=_s8dyDDgR)xW)^i)aXfmZ{2 zK)sY8&M~m^IGJ0CHQ!D(N5fY3Z%uar@C(kY8|$ffSwsBWvA$1* z3bh!pS&b~*n-EW=b(zp_{@nV5XY{r}sQc?HSqsGI$le=XGq~}OlM8UD^|WAdvvs+% zTF{$hn)7DjQJ{9A4T}8$F~A*$lJS67U@7_fAeJm1(22|4X`DPZlU~W8l+P*~_)I5* zsPK92Z4ZCEopjE