From 1bbf9f0262072c15030ebe89b6db919087c90bce Mon Sep 17 00:00:00 2001 From: Fedor Date: Tue, 22 Sep 2026 22:27:45 +0300 Subject: [PATCH 1/2] fix(ui): center profile notification bell --- docs/bell-alignment/README.md | 13 ++++ docs/bell-alignment/after-1024.png | Bin 0 -> 1624 bytes docs/bell-alignment/after-1280.png | Bin 0 -> 1669 bytes docs/bell-alignment/after-1440.png | Bin 0 -> 1730 bytes .../profile-control-panel.component.html | 5 +- .../profile-control-panel.component.scss | 17 ++++++ .../profile-control-panel.component.spec.ts | 56 ++++++++++++++++++ 7 files changed, 90 insertions(+), 1 deletion(-) create mode 100644 docs/bell-alignment/README.md create mode 100644 docs/bell-alignment/after-1024.png create mode 100644 docs/bell-alignment/after-1280.png create mode 100644 docs/bell-alignment/after-1440.png create mode 100644 projects/ui/src/lib/components/layout/profile-control-panel/profile-control-panel.component.spec.ts diff --git a/docs/bell-alignment/README.md b/docs/bell-alignment/README.md new file mode 100644 index 000000000..9c74fc74d --- /dev/null +++ b/docs/bell-alignment/README.md @@ -0,0 +1,13 @@ + + +# Выравнивание колокольчика в панели профиля + +Проверка в браузере на 1440, 1280 и 1024 px использует разметку панели, SVG-иконки и скомпилированные стили компонента. Контейнер уведомлений теперь центрирует SVG независимо от текстовой базовой линии, а красный индикатор расположен относительно него и не влияет на размеры строки. + +| Ширина | Центр SVG колокольчика | Центр SVG выхода | Центр аватара | Центр блока действий | Скриншот | +| ------- | ---------------------: | ---------------: | ------------: | -------------------: | ---------------------- | +| 1440 px | 34,5 px | 34,5 px | 34,5 px | 34,5 px | [1440](after-1440.png) | +| 1280 px | 34,5 px | 34,5 px | 34,5 px | 34,5 px | [1280](after-1280.png) | +| 1024 px | 34,5 px | 34,5 px | 34,5 px | 34,5 px | [1024](after-1024.png) | + +Снимки показывают изолированную панель без пользовательских данных; работу выпадающего блока, clickOutside, выхода и перехода в профиль проверяют компонентные тесты. diff --git a/docs/bell-alignment/after-1024.png b/docs/bell-alignment/after-1024.png new file mode 100644 index 0000000000000000000000000000000000000000..633ff6ebcb0aa428bb3a07aa81efcfa4633797c9 GIT binary patch literal 1624 zcmcIlX;70_6#W1NL@5f$QiOm4LSZab0VT!=#j>c8vdAX;k}5$ES!@sz7mSW#z_Ln6 zKqt}~7NbPe5Ee~{Kr%QI2%-=X0a*-d77~*53)AWU{^*}GckX-l+;i^CyYFTI!be~4 zdp!UE^!6iq>q)(0@V(hQQu$~|Ljh` zmwyfJu6;St-=Ld(ZI3f~1@bi&uL#Oc%MH_=OSLHx#vOCntZyfBEPrT&JMvpi;dpaK z08&0suMYc@NOxHtB|oSwQL8c=69>-9 zN>PmWFlqb#$sZt>A}~{m2nTbu`s?AXYf^fX`>SIIG3O^=_eF0`Qv2ypdVCu#$Hd6T z7&|dNYWJ%<46#2?u$x8|5|#%w!a+yPn@wl% z(9=^&$#x3sUhM_~XsYPtDaycfCXp6Vde-$)?gNE@CB*lZx|`0BF73ZC?e!+8ENQV# zA;9y_iqNo<*CMCz11M^;x!cCQ>gr}1jfQh_qHvQrK)X^^1yL$UG!kYSfnaWVti)qd zPcuw1jM6OU>C00HLo>QXC`nms2{&*Uyj}YGc_k>yHx$*$=MP4cNKFGo{BhNji!c-_ z*@p;8l-D7@N%zS=Q`YP?UREQ9Ra$cvqh+?+i7g9@6Cx*7*jPB@LX-N(b7O zCcTEN-hOayb9Ym$4pyWNypbfRY)WcOwi9j;3d4EPyo@ zwE&M8vD(&c5O^W~nr4XPMvQf~3d%M%PIy+Fh9l%CiaBbZyYDF28p@#%gENZ>s*(1G zZzgjC*3MnUm297scKchg0fRw<1iST{+Snn1#6Z&`BfQl<`d}IG7OoS!Q1s*#_-xuF zd3T^$U9z}(^_;)#_+aAioQ&U@qcqQy&8@sEw}Dgh&74v|nm~Tc)*a7~+F~KAk|Mm7 z=3XX*dx*rmn+2`sES=c@Fz{GyD$toKBoU}+;6HV~ zq-G0k;-BPjS=%I6LO*uNyP(3`E2fv0I=0S7c??%T*T^ra$@M$BQt$IEmi<6!0d6hj z5i0o<`am#dHFCUK!hTAAXT1+(dK@{&>x((WVQ0nD_GYR)!4x(xPx?M3jgfl*DrWxs z{=|~SDRwkWi>XINIOwY_#a6I-@$GW-uGW%eQ)JIRv0yit?a&2V@tYE7xx!8r`KQp; zPyJ{=q8wtYKD+$!xol;URyZ)R&Bu9RKk+9yXRHqbU(6=oj*9AzP<;Udyf2H`*MA`770K}DiwK_zY7es)gOZva8u{I UA5Hd@6oMJR?+93&ki*&^9i{7yf^Mc~ zL=at8pNDSwz26M4A6U}RalE~-&Sqn}=nJ*7QV%6T=#G22-+?bf^;8J}c>e&90s!^> zdyWA>s;+b(7-;?v1FlYB!r%AFv5+fte?J^{n|niuSh8)jsBv~u3A?Il1)Q=-5m_ z^m$i!LKQdzT?9F|g7f^>uC~zk`P~Aw5FT ziUi#CvBe=9B{^i8I81G%ACeDpR#FyAA&g;v%mt5rE0Cvrj5{R4~B(1PE)`N+j}sj*6-sdm<$mpbJ;0%7o4Q6}9bL`9U%U%16xgw0aca z?)jpa1FeTu@kQRHJFn$)IA=oNF^t2!zz(LW*gj}`kx##n(Bj353Ry$fQz<=RJhBI0 zP`@z69TUvd&nTwxNdCbbJ4El~o3^rmWSaigWamS~tJeSo0LC&j=rwfv4>xum!Pu6g z%z=A6CS({UscMxgBd->S_O>_;Ka_kIOKACUr8B+T0Gjn&q-Qhb4z_-HaeMD*&&2wd zx$(%k&guA&XlCJ>t+Jj;QPaf|N0g8wSms}-+aieib}{=@DphzL)J1414Elia8iBeu za|6+fY*_i(jZvr)Tmo-r6;nw;45*{>X>@B1=a zs)4$sY)x{_QDX@?-XZ<;JQ1Vl7IWRoxLJd(=$QFJJl>B zG=gMrtDPWd5KYR{66t4In90iO}H*+q^)k%E;EyqU#(Hq>`|>L6ERd!cDY9r1{Ul8$mb%p z?Yczv!t8LIi?&;AE*Eg?2=6+QKkHgKYOM>B5UYPYqm>Su&Z?U{8C3~Iul!(SMa>*g zR4Zp}A4KPP!u$4Y);``syb=?BCO!Rm0_GdRjC=1&)S{XH3aFMsCJRb_6fUl7Rj;J@ zOgq?qYmcEJ@0wEZAT5N&C(<$~6w~&rof%-FNyq^JV1(mNdL`fuiCelA)@*FYr2V3) z3e+U_W_!(*E(TbGqi8U;9<%PZ;LMVqA18xNLK03K^$R;U>$XrT`X zH7jX&iG4aIrfCMgmhB!jg_{|7jO^BuTbTxjEDOIwuhSM!tNg=1(_K!9b}eZVKe#oa z=7R{>nMY-z=xTj0#+R;(_F-Dft?riI@&Yw4c-(9#a(Caqe!3M&T&D?^M^$2i;7W4h z1U_y7Cg~elg?IcU{xf0T8&w8T#JSTs1v#L0&aqok{J7mwm6I4sm2^7vC7Yz zMAaC?b73I@#s(;Cmy1)CfhH&eXr+GT|G%T|n)BNf5J@P+O6vK5&LkzeMIeB=uB;x^ SCPooF0UT_dZ5pftAN&J6p!_ZX literal 0 HcmV?d00001 diff --git a/docs/bell-alignment/after-1440.png b/docs/bell-alignment/after-1440.png new file mode 100644 index 0000000000000000000000000000000000000000..277e38e6121582011c4f3bded7939c84f4adaf22 GIT binary patch literal 1730 zcmcgtX;_k36sF9{)WodR6eV*ZhZ)f^k;o+tEi|!F$4M=>#(fJ+(NuJrDRUB9OieMD z7Ijj_a?K6#Q5?;M%7xOvawAteCaWD9|{o!oZdYZ^VY3k3Rxh{f2r#pTU$TEp%JX)~5!Ip%nO?mR{@EdBel zJHX5trt7o~LjRJV;bZafsD!zK%7l@&D^KfW4LNP9yA(2+ybELIUBf!Tx6a9#LPSm7-2g{7S;;N_J2_Y*qiy}Zsx^#0vu9}s*+26 za<&!7mmwE=L<2lDG&H;R2DK$(B`1m5EoNIQu0+BiBxR~#s}esM+Ue93)5Nc`F36-5 zHIgQ~D$sib`2d_h5BaE1j}AbHYNkw~x9;xT?p{BWAJmk;Uw z=pjmE*5DLLReq{t@V8CEi|7m%LQCmHfb34-0A2m=%CqMF{vX-oQc>H?2OP1uKSIl) zA!F}nqHW}u%-m8)!YKvx0%xJTB2Wj4C*(n|IlKpc^nFzANz=o|8Wol{RjJpqBi(8* zJHsXV*#^=u}p7jnD^?bUnWJ-Q z)l0`Yo;8{+X%5DzG@B1E5hFLOO77^%SXI{yhR$33AUL}85a87BU?mPQVaWgYaII&N z)g$x6j+9`Uds(l&uD9van7tvn?mli_+U2x>k&>=!HrQeVLWDA&r2Z{69T2}UdgElN zn@{BxT{_g7%>I3wLu?vYdA8%()vMW-LE3>~>#8YDJbt&lv}8;pClaagOk?i0vA@qp zAJfj~%CXm3s!(4>j4qnc^tzn)931@L4Pe?Cdqj3w0lk)BKQg-=o~nWxtD>=IYwGJ; zN0XKYRyllvMVDD0_=NsNfKcN@Q?*yO--rmf1uL1mwA{1$;%6OeNumkTXzqq4<=T9v zRwFC4_b1_Gou&ilIxa6C-Efah8=pW~D`rah3jX8#cC`* zYDwdN{Z(M{c{M zdDAlimCtg7;HmZu6bz@pJSeGz5w|{Zqux9Ug161vE8nIq)iedr^oD>+Ui9ocpJ&)N zOt$(}G8a1rXqkeVZdzcoXh!Tptw{Xj;dv{`JXYFFzUBX)M*BWs-l$2VDHr*%yoKK0 z!DCb~p9nRt19~MV_a4nj`>3~vg;^3na9Y1>5ktyF;cDIk$y0DQUpkS#p5clCRIym> hcn}6GzL7jZG9VsO3GtCc)c`yotQ`*Xm#y!We*htp>wN$K literal 0 HcmV?d00001 diff --git a/projects/ui/src/lib/components/layout/profile-control-panel/profile-control-panel.component.html b/projects/ui/src/lib/components/layout/profile-control-panel/profile-control-panel.component.html index 7727bd3eb..e498caed9 100644 --- a/projects/ui/src/lib/components/layout/profile-control-panel/profile-control-panel.component.html +++ b/projects/ui/src/lib/components/layout/profile-control-panel/profile-control-panel.component.html @@ -3,7 +3,10 @@
-
+
@if (hasNotifications() || hasInvites) {
} diff --git a/projects/ui/src/lib/components/layout/profile-control-panel/profile-control-panel.component.scss b/projects/ui/src/lib/components/layout/profile-control-panel/profile-control-panel.component.scss index d0652ceab..3605c3121 100644 --- a/projects/ui/src/lib/components/layout/profile-control-panel/profile-control-panel.component.scss +++ b/projects/ui/src/lib/components/layout/profile-control-panel/profile-control-panel.component.scss @@ -50,6 +50,23 @@ &__bell { position: relative; + &--notifications { + display: flex; + align-items: center; + justify-content: center; + line-height: 0; + + > .attention { + position: absolute; + top: 0; + right: 0; + width: 7px; + height: 7px; + background-color: var(--red); + border-radius: 50%; + } + } + &--hasInvites { position: absolute; top: -5%; diff --git a/projects/ui/src/lib/components/layout/profile-control-panel/profile-control-panel.component.spec.ts b/projects/ui/src/lib/components/layout/profile-control-panel/profile-control-panel.component.spec.ts new file mode 100644 index 000000000..5ad5b18d8 --- /dev/null +++ b/projects/ui/src/lib/components/layout/profile-control-panel/profile-control-panel.component.spec.ts @@ -0,0 +1,56 @@ +/** @format */ + +import { provideRouter } from "@angular/router"; +import { TestBed } from "@angular/core/testing"; +import { User } from "@domain/auth/user.model"; +import { ProfileControlPanelComponent } from "./profile-control-panel.component"; + +describe("ProfileControlPanelComponent: колокольчик", () => { + function render(hasNotifications = false) { + TestBed.configureTestingModule({ + providers: [provideRouter([])], + }); + const fixture = TestBed.createComponent(ProfileControlPanelComponent); + fixture.componentRef.setInput("user", { id: 42, personal: {} } as User); + fixture.componentRef.setInput("invites", []); + fixture.componentRef.setInput("hasNotifications", hasNotifications); + fixture.detectChanges(); + return fixture; + } + + it("оставляет индикатор уведомлений внутри локально центрируемого контейнера", () => { + const element = render(true).nativeElement as HTMLElement; + const bell = element.querySelector(".control-panel__bell--notifications"); + + expect(bell?.querySelector('i[appIcon][icon="bell"]')).not.toBeNull(); + expect(bell?.querySelector(".attention")).not.toBeNull(); + expect(element.querySelectorAll(".control-panel__bell--notifications")).toHaveLength(1); + }); + + it("открывает уведомления и закрывает их через clickOutside", async () => { + const fixture = render(); + const element = fixture.nativeElement as HTMLElement; + + element.querySelector(".control-panel__bell--notifications")?.click(); + fixture.detectChanges(); + expect(element.querySelector(".control-panel__notifications")).not.toBeNull(); + + document.body.click(); + await fixture.whenStable(); + fixture.detectChanges(); + expect(fixture.componentInstance.showNotifications).toBe(false); + expect(element.querySelector(".control-panel__notifications")).toBeNull(); + }); + + it("сохраняет действие выхода и ссылку аватара на профиль", () => { + const fixture = render(); + const element = fixture.nativeElement as HTMLElement; + const emitLogout = vi.spyOn(fixture.componentInstance.logout, "emit"); + const actions = element.querySelectorAll(".control-panel__action"); + + expect(actions[1].querySelector(".control-panel__bell--notifications")).toBeNull(); + actions[1].click(); + expect(emitLogout).toHaveBeenCalledOnce(); + expect(element.querySelector(".user")?.getAttribute("href")).toBe("/office/profile/42"); + }); +}); From 1858d402fd873541ef9e6362de3f93428c7d1527 Mon Sep 17 00:00:00 2001 From: Fedor Date: Tue, 22 Sep 2026 22:35:12 +0300 Subject: [PATCH 2/2] fix(ui): use native bell symbol viewbox --- docs/bell-alignment/README.md | 2 +- docs/bell-alignment/after-1024.png | Bin 1624 -> 1633 bytes docs/bell-alignment/after-1280.png | Bin 1669 -> 1678 bytes docs/bell-alignment/after-1440.png | Bin 1730 -> 1739 bytes .../profile-control-panel.component.html | 2 +- .../profile-control-panel.component.spec.ts | 3 +++ 6 files changed, 5 insertions(+), 2 deletions(-) diff --git a/docs/bell-alignment/README.md b/docs/bell-alignment/README.md index 9c74fc74d..28e3ddf3a 100644 --- a/docs/bell-alignment/README.md +++ b/docs/bell-alignment/README.md @@ -2,7 +2,7 @@ # Выравнивание колокольчика в панели профиля -Проверка в браузере на 1440, 1280 и 1024 px использует разметку панели, SVG-иконки и скомпилированные стили компонента. Контейнер уведомлений теперь центрирует SVG независимо от текстовой базовой линии, а красный индикатор расположен относительно него и не влияет на размеры строки. +Проверка в браузере на 1440, 1280 и 1024 px использует разметку панели, SVG-иконки и скомпилированные стили компонента. Контейнер уведомлений теперь центрирует SVG независимо от текстовой базовой линии, а красный индикатор расположен относительно него и не влияет на размеры строки. Локальный `viewBox` колокольчика приведён к размеру исходного символа 17 × 19 без изменения внешнего размера 15 × 17, чтобы рисунок не обрезался. | Ширина | Центр SVG колокольчика | Центр SVG выхода | Центр аватара | Центр блока действий | Скриншот | | ------- | ---------------------: | ---------------: | ------------: | -------------------: | ---------------------- | diff --git a/docs/bell-alignment/after-1024.png b/docs/bell-alignment/after-1024.png index 633ff6ebcb0aa428bb3a07aa81efcfa4633797c9..1d8f29af14153b1007571eb7a0df2259de2d2e23 100644 GIT binary patch delta 1467 zcmZuxdpy%?82?Gl^&kfoWpn8aQ*-h;D72!J%QVL!B%O*}=N3!iv>%;RNK_3 z2|S4>{q&VS2IH9%{@%NrbNK`{^R&J01yL-EQ>KO52dwV)V|xXbQm@d&>g~#JBlRAV z^t|^82d!QezIhzcZmgvr9?Z`0n0wF+nx1g1%G}B{smqY?(ia_+(<&;2^a-i`q%fg_ zNKAAN_=5Pig6FY)U zyleWrt4r$C#wW42XeqIlI(*kB11bQ}h^md{ysWOQVhzrKAExUTN-(*|-|V-ly1^Aw z6~udDgseV)MlD5_`++n)jxCdbJ}O&G(2hiI2UNN_Z1PdU^xA?Sbt&^RWnmr{b#{n0wt;9%hTJ+5r7iw#xyqkYv{ zP%zR+UeU8XE#*MYEs<5BW`GpN9>oxebU{qpN_^>{Y!oVlWU2Utxw#2 zuCy;aDq8kV&(p_(7x|M;Q@KHQ+(=NDv8C!c1OT8Sh(sc$v(wWMClr22-pBoS90%1b zuezm>OhZ$bxEsOaBByqb`p=OKoR#xf6?MUUA(lLpNpsO5wsxH5zm;>qFh9-`iD6-( z7J2z51D>MT^z3=CwYf7p3aaGYlw>owT`}4Z1d%)fM@LoE{rbG{OEqJm*H+nD5dd7CBRAm4IY*We1VPC&U37epuLGA030xK zQ9`QRCX_+?&MfrE)DFy@Ha)WJ{m zYHMqwZRMfpbLO+_its1`=9vOWBnq9^#mD(t*ib{X>cWr5JDJYiEZLz@ zxcHs#+hpSaI9Dcpv04R*i*v&k1sGYa@K{HDLL~EUi%nz0QqwPT8gDWbP|GWV?8fyX zy`GFPjokogMPW+t$kH}pTPsqQGv-dMB5${l_hLU9yqLZz>%B=&9+*t!+HqEowG*Bp zuXR|%bxLOsYVAx6LugdA+%H|GV{Pw>aR*j}{OP)9dv{^l*3UkL)si~c!h!Ph^2C@P z!0LFpjed4gA1~RF6HgYsq~QI2aJG3)|D7bCgPAhk46>(a2kqXy`_!(*Vrh~9?jV?A zvaw&{(A#!>h%oq=0(lAit$j6`Z2G6wFQMTyvx1bYLTF8zZ08HE%d?BdDm;@b$p;YI~u!<$*I0wvf^MR@WGX(reKx5^-A9~b5v01f>V5Z&! zBj2R|Rrw$+eZ8e!EZf=fS85@$1#Kta0bj*;<^Oj&_hP3Lf$sunDMa v&DBTf-Yz+4-p+up5cGMZwG}oH^2MwOc#LSGUp<^QkcYbcOgK{Ebmq!`z=p-_ delta 1438 zcmX|Bc~p{l6#djvD;rDA<+z}wrlY5EDzzjcotn~$oYdTMUzifp%%#EQqs5p`8Pd2W zg4Qu-!X-+wLR<kZPS8o*i>`tGLUlsnYV=39su&d_!F4vl6*tcYYG9WW0J4Amr z*{(0Hy?@X*;-#>zKuX_x#=?JyN}lI!6} zpwzjN$`9sd%K0Ays#%WMHIiRnToh07k}Rn`m7}GVA%Bw@Zc8II52}mSK^@FTC8uZP z#Te!Xgsg4v#E-C?FmO^C=47D-1#g75tjZXTp0AGY2QN;%?u`UDC2WWAc9qxnky0>9 zF{Og=`U_r`XeMnv%2k(v;7efRcm- zuvIA}@Xw2}h@#hGm(YC}TB3!=`rVrHCOVytcX6Te61hN|N?id{DJgUcIE6y73?8cp zVDed}X_|40^&Deq5@lr0uneZCs;!ZRP6M}#Uq3I0raBgk=@1A8A}N%{elp>N`pIPk z29tP{42xIPqQA@bD85j^RY$Ftm8h}7OV#lgBH>&-m>FcF(27ZfG#PEfuf|DX;q!S? z82dN%gYTjfj0)?2I(=~}xSi+1CWDnG_lFy5hErCIcAMGM{;!`HKZ#2d`8wxYNpB}SP2p#LviVBz)gl${zb?GL8_qP zjIPi*WHt7w7)z>hI;i6+CinY9`3J@$ zKzqnw+aokZ3O%gA4AT)x?H>>fd~we&U~oEALwV=Ej&}Q@vzy=f7ftgIHz2T(Io;c% z0i21r8F<8u*0pVgAqxcHb?qSOpHa4%YBk81y9OS61f_sJMSntTB^Yy!*dI9 z>fyGBZzi(+S1(+{7j2u6b@|zF0K);pIES@NUEH8hYN&0Q7TV$%xxWN>ht!LnFMRR} zTAo&E?j3kWr#z-k@xVi)DB6@Gj~aXcuotVwpcww>qATa_-VlV#&6RyfN?~U2 zgG*Tduc1V`Fv*ET=&&}@P)?gQnxf0tJ%ly|c1KImk{P;tk3_f=LfiGBR)WU(nHZj^ zLtXQ8@XF^ttS?ysv)2T#e0nZlo}d@>k8eHdKw7&m0XM9XQjOQ`uv9flF;dSPXH*bu z(kXQ*8AHrzJ_{4KDC_EeRX){+uI1zn%%y5W$@Z*Whlp(lh;Qwj3x&{Mt*)67?0_D+ cn%k=b+|>KwC(~U;1rP%G9zh*$@QJ?qFNXNZ!vFvP diff --git a/docs/bell-alignment/after-1280.png b/docs/bell-alignment/after-1280.png index ee24b11c06672d71304fe8cecf059ce586aa6236..f5bc33996f925e9ecf4f7474ee440a33d6f3b90d 100644 GIT binary patch literal 1678 zcmb_ddpOg382_OZGN;pp2N~z#@T9EEIb*r3&~eG_QD=zLJY;ffhBR_Xk=AhwGa{nX zSuSag%M`X%bVy7|*)XD6E;AY%!*+h#d3w%2=gu|b`cDH72Wnso`~9a3~)6*0jK~# z-WH`D0C4>KEr-A@mv3k=+Xgzcx?!s2pDVx~uwmnA!wIb6Na|B=Wm*G!Vy61-a@R)< zQYI6vtG*RJz>f!$0rck=_&(xk6iJ(%N$0;CfdJAE#2KQf7bZURQye4{{S9H=Wq+-N*_+uOl>^ z_7lUKb#HwH^R^1ZVRphZT9m>2#^E6$Az`>B)*xALZjOoJ(PVSusB*ix9gt4diyJer zS}M;TGx>ltx57tKPqhjbI4LWsckyvewxEFc%G11ni4mj^ zWlwi|ZERZ3Jz8yC<9=WrRKCpSvsXRspN*DU_rQ>XJ4sQ~XFi*oGr*$9u=(+I zlVOCFww4x@^~Cln*9UKX{Ro1dsIi|dL?}`15|mWL_9vTUv=?To9*KHqgouTN3dugHD;Qk45i@X9GI)tNZ31o1_cyx6ZLFj;fvQ18w57wcM(tM;{e4xth z5`-3jp0zxd8us~h9Ey}vF!j}i&pZbNn3!v$g0DLp1utEy>Rm}p`qa*QZ&V)u)ns*F z{IVpUO2glV!dIxFOh|5)n}<6$ff?1l@T8}QPvn$&8rXFJ{EEuRx4W6*Fx@<7GG=F5M{CxZbCsy^3&%SZd<4BqmhD^!Zo>r_Es zSy(r142~_^Ma~FP2-Uo(M|%p(VJN2eg)P|9z&uto{X3TKr}>yWoBd|8Zd0Vtfd5gB zgWbt=YlW=jM2khWS7K{>HJtQ`NtmZeT*-x<9yV+epb7vJzU4NNwlsRf;)SWTAYMpt ztwR)pmruKz`!mw%xrhD{IH=~e465;kPTx+=zPPgN+9Xi{U@%Dt}H?01JthX{5)zLgigfdN|hG2VVOJLx<-Z literal 1669 zcmcIl`#V&57(W`xs_02n2-Tv+<{lDLmR!m$w`p7>+93&ki*&^9i{7yf^Mc~ zL=at8pNDSwz26M4A6U}RalE~-&Sqn}=nJ*7QV%6T=#G22-+?bf^;8J}c>e&90s!^> zdyWA>s;+b(7-;?v1FlYB!r%AFv5+fte?J^{n|niuSh8)jsBv~u3A?Il1)Q=-5m_ z^m$i!LKQdzT?9F|g7f^>uC~zk`P~Aw5FT ziUi#CvBe=9B{^i8I81G%ACeDpR#FyAA&g;v%mt5rE0Cvrj5{R4~B(1PE)`N+j}sj*6-sdm<$mpbJ;0%7o4Q6}9bL`9U%U%16xgw0aca z?)jpa1FeTu@kQRHJFn$)IA=oNF^t2!zz(LW*gj}`kx##n(Bj353Ry$fQz<=RJhBI0 zP`@z69TUvd&nTwxNdCbbJ4El~o3^rmWSaigWamS~tJeSo0LC&j=rwfv4>xum!Pu6g z%z=A6CS({UscMxgBd->S_O>_;Ka_kIOKACUr8B+T0Gjn&q-Qhb4z_-HaeMD*&&2wd zx$(%k&guA&XlCJ>t+Jj;QPaf|N0g8wSms}-+aieib}{=@DphzL)J1414Elia8iBeu za|6+fY*_i(jZvr)Tmo-r6;nw;45*{>X>@B1=a zs)4$sY)x{_QDX@?-XZ<;JQ1Vl7IWRoxLJd(=$QFJJl>B zG=gMrtDPWd5KYR{66t4In90iO}H*+q^)k%E;EyqU#(Hq>`|>L6ERd!cDY9r1{Ul8$mb%p z?Yczv!t8LIi?&;AE*Eg?2=6+QKkHgKYOM>B5UYPYqm>Su&Z?U{8C3~Iul!(SMa>*g zR4Zp}A4KPP!u$4Y);``syb=?BCO!Rm0_GdRjC=1&)S{XH3aFMsCJRb_6fUl7Rj;J@ zOgq?qYmcEJ@0wEZAT5N&C(<$~6w~&rof%-FNyq^JV1(mNdL`fuiCelA)@*FYr2V3) z3e+U_W_!(*E(TbGqi8U;9<%PZ;LMVqA18xNLK03K^$R;U>$XrT`X zH7jX&iG4aIrfCMgmhB!jg_{|7jO^BuTbTxjEDOIwuhSM!tNg=1(_K!9b}eZVKe#oa z=7R{>nMY-z=xTj0#+R;(_F-Dft?riI@&Yw4c-(9#a(Caqe!3M&T&D?^M^$2i;7W4h z1U_y7Cg~elg?IcU{xf0T8&w8T#JSTs1v#L0&aqok{J7mwm6I4sm2^7vC7Yz zMAaC?b73I@#s(;Cmy1)CfhH&eXr+GT|G%T|n)BNf5J@P+O6vK5&LkzeMIeB=uB;x^ SCPooF0UT_dZ5pftAN&J6p!_ZX diff --git a/docs/bell-alignment/after-1440.png b/docs/bell-alignment/after-1440.png index 277e38e6121582011c4f3bded7939c84f4adaf22..ed04b86eeeb23edca29d478658880c6b99f809e6 100644 GIT binary patch literal 1739 zcmcgt`#;lb9ABJ6SsiD|gj6TF4aX(7CC5n2X=<*eAuJKOMsnQclG~0c3a>29 z+~+>GXm%vGm?3jnc6Qd-T$-Klc%6TtU!KqN{d}J1^L{_?=kxtMNe*z>A*rKMAQ0$~ z&1FkR5a`DeU~aWv3>dY8#}0r%60tUxmz=_|tF+EQ8JFW7oV*DerF?vRf1C_5Nh-<0 zYObr2x$nI5$6SQ-XiQ0iG0%RomF4kEnK5ghGmVV!Kc7~sp2u)ZhAKZlS*NN2?XrFX zB^=}H23)mNex6D2S*5}dmaFdq7YAIZY*`X50DuPd6FDN287w9#G7;a+^oU?nTecq{ z`2lzF)3k@RpTZsK0S(PPNrX}c$16BtQ#-qyYFBJ%1i9#6HN}zu*1J2=8hLArA9}a0 zLy$G0(LS9CipRI~6XY9);ljw%aO@Bnf zuvXZH5T0yL0p^~9jwTdHqM)ax_0g{`JNHWE+TcK3V#+wV7vbf5a%Wq*2){w(FveHT z%`ewZF$&xsr#3a+&v%1|2Yl^GIOS1NH4E%_uc)13{h{yaxjdRy!6gqoMffz2qJNhK zNVGmM_njAC<)VYlz=r?O(fI0G3&Z&ZsOiBR(S39{pmmP+cw+cs$z4WV4>FiOCZd-8UyR}vS<7V&G&*6F~6T=tWcl>}`i}GF#o`MbeoDiT>MEPo) ze&<~7m38Df)JQ{!j7?S!%E>hv>FUSEo>ts?3DtV$8~-PlY&PkA1gNLEVI%XGYgw{N z9Ki;<<@DNBOvVO?5P+?6Lh-O@C=%WP5*-<_tB-0S<#sC~Wz-$_7_x27E{yI?cxxM3 zzX6JRqc}`xGH)%MHz~nHE2xV~J5~iE4qKIHg_7FXDpj1qFou~JEV6#xx9&IX5h00+ zD`?^0Ojc{^-SjB=;U_@;C*AMUGd&3SHSR(V4UQ|iv2&(OZAe=Dmh^7)S|EA&EwRRn zeH~xPZ21-{Ua2@-NtEeZ8fgx}DlH{G+EW-#@cULr$)VmX?LdGPSE~PV+ znoTZA3n6I~$AJNw-hC{_V$2RoI+1A~qtVXqbWbmvq)3T4D##KnZ!|{cyQw9O)HvwJ z?KK8QDV6?^FCZImRELsA%=Pw*eyiXsgA^U~w@ZzV+?F!e=`W=6Z<_NkU< z;Jk7oF|-sm3%Fw;ArVdC0^d>;t7Qw9;{!es{mk2&o<`eMO#!X{#<;bqmeBTLMp*Ni z+r!O!MGQK*3O*o$F>8z|4`Gju4bbqg*MF(4vqE3HVik;#$4&KI@=dkFx26{W4OPgy zsg(KH7os;|p?H`0_cJq8097cwyu6(cOe92akvQmvjkKDtdp8d7fNZSbmT%16#(fJ+(NuJrDRUB9OieMD z7Ijj_a?K6#Q5?;M%7xOvawAteCaWD9|{o!oZdYZ^VY3k3Rxh{f2r#pTU$TEp%JX)~5!Ip%nO?mR{@EdBel zJHX5trt7o~LjRJV;bZafsD!zK%7l@&D^KfW4LNP9yA(2+ybELIUBf!Tx6a9#LPSm7-2g{7S;;N_J2_Y*qiy}Zsx^#0vu9}s*+26 za<&!7mmwE=L<2lDG&H;R2DK$(B`1m5EoNIQu0+BiBxR~#s}esM+Ue93)5Nc`F36-5 zHIgQ~D$sib`2d_h5BaE1j}AbHYNkw~x9;xT?p{BWAJmk;Uw z=pjmE*5DLLReq{t@V8CEi|7m%LQCmHfb34-0A2m=%CqMF{vX-oQc>H?2OP1uKSIl) zA!F}nqHW}u%-m8)!YKvx0%xJTB2Wj4C*(n|IlKpc^nFzANz=o|8Wol{RjJpqBi(8* zJHsXV*#^=u}p7jnD^?bUnWJ-Q z)l0`Yo;8{+X%5DzG@B1E5hFLOO77^%SXI{yhR$33AUL}85a87BU?mPQVaWgYaII&N z)g$x6j+9`Uds(l&uD9van7tvn?mli_+U2x>k&>=!HrQeVLWDA&r2Z{69T2}UdgElN zn@{BxT{_g7%>I3wLu?vYdA8%()vMW-LE3>~>#8YDJbt&lv}8;pClaagOk?i0vA@qp zAJfj~%CXm3s!(4>j4qnc^tzn)931@L4Pe?Cdqj3w0lk)BKQg-=o~nWxtD>=IYwGJ; zN0XKYRyllvMVDD0_=NsNfKcN@Q?*yO--rmf1uL1mwA{1$;%6OeNumkTXzqq4<=T9v zRwFC4_b1_Gou&ilIxa6C-Efah8=pW~D`rah3jX8#cC`* zYDwdN{Z(M{c{M zdDAlimCtg7;HmZu6bz@pJSeGz5w|{Zqux9Ug161vE8nIq)iedr^oD>+Ui9ocpJ&)N zOt$(}G8a1rXqkeVZdzcoXh!Tptw{Xj;dv{`JXYFFzUBX)M*BWs-l$2VDHr*%yoKK0 z!DCb~p9nRt19~MV_a4nj`>3~vg;^3na9Y1>5ktyF;cDIk$y0DQUpkS#p5clCRIym> hcn}6GzL7jZG9VsO3GtCc)c`yotQ`*Xm#y!We*htp>wN$K diff --git a/projects/ui/src/lib/components/layout/profile-control-panel/profile-control-panel.component.html b/projects/ui/src/lib/components/layout/profile-control-panel/profile-control-panel.component.html index e498caed9..23e34392a 100644 --- a/projects/ui/src/lib/components/layout/profile-control-panel/profile-control-panel.component.html +++ b/projects/ui/src/lib/components/layout/profile-control-panel/profile-control-panel.component.html @@ -10,7 +10,7 @@ @if (hasNotifications() || hasInvites) {
} - + @if (invites().length) {
} diff --git a/projects/ui/src/lib/components/layout/profile-control-panel/profile-control-panel.component.spec.ts b/projects/ui/src/lib/components/layout/profile-control-panel/profile-control-panel.component.spec.ts index 5ad5b18d8..c8dc6a7b1 100644 --- a/projects/ui/src/lib/components/layout/profile-control-panel/profile-control-panel.component.spec.ts +++ b/projects/ui/src/lib/components/layout/profile-control-panel/profile-control-panel.component.spec.ts @@ -23,6 +23,9 @@ describe("ProfileControlPanelComponent: колокольчик", () => { const bell = element.querySelector(".control-panel__bell--notifications"); expect(bell?.querySelector('i[appIcon][icon="bell"]')).not.toBeNull(); + expect(bell?.querySelector("svg")?.getAttribute("viewBox")).toBe("0 0 17 19"); + expect(bell?.querySelector("svg")?.getAttribute("width")).toBe("15"); + expect(bell?.querySelector("svg")?.getAttribute("height")).toBe("17"); expect(bell?.querySelector(".attention")).not.toBeNull(); expect(element.querySelectorAll(".control-panel__bell--notifications")).toHaveLength(1); });