From 7780eb65925bd2308f1171e694d323396e2bb86e Mon Sep 17 00:00:00 2001 From: Layne Date: Sat, 3 Jul 2021 20:45:26 -0400 Subject: [PATCH] friend bar changes --- src/assets/images/toolbar/friend-search.png | Bin 0 -> 2213 bytes .../images/toolbar/icons/friend-bar/chat.png | Bin 0 -> 1740 bytes .../toolbar/icons/friend-bar/profile.png | Bin 0 -> 1819 bytes .../images/toolbar/icons/friend-bar/visit.png | Bin 0 -> 2150 bytes src/assets/styles/icons.scss | 18 ++++++ src/views/friend-list/FriendListView.scss | 1 - .../friend-bar-item/FriendBarItemView.scss | 28 +++++++++ .../friend-bar-item/FriendBarItemView.tsx | 54 +++++++++++++++++- .../views/friend-bar/FriendBarView.scss | 7 +++ .../views/friend-bar/FriendBarView.tsx | 10 +++- 10 files changed, 111 insertions(+), 7 deletions(-) create mode 100644 src/assets/images/toolbar/friend-search.png create mode 100644 src/assets/images/toolbar/icons/friend-bar/chat.png create mode 100644 src/assets/images/toolbar/icons/friend-bar/profile.png create mode 100644 src/assets/images/toolbar/icons/friend-bar/visit.png diff --git a/src/assets/images/toolbar/friend-search.png b/src/assets/images/toolbar/friend-search.png new file mode 100644 index 0000000000000000000000000000000000000000..7156c4fd2ef8a18ba27ed00b62cd7aaa474a74cc GIT binary patch literal 2213 zcmcImc~I0=9A4LBRK#i(wMaF_qgu@-+3XqJ3bG2Qs}v}%N|kK#7E*RM>n6Ahb*G+F zozV`8rJ!hS6&ZC<8MSpp>s3#%*4v7$SQVsr;a#b=FR*N#jyn9)%)I2iyzhO#?|0-k zSrk7ZCbVOCM}3Gd+$*PdOF`4&a0^5eg%Nrrha*B#7z4Yy1dq2fcCA(H_7^f+tB3 z9LS}b&&OOzNF3*yWs6pB*uJVzUV(EzlR4b$okET%DXBxVGx2D2IL zjD{h!M!?t`b;0vyfz6ZyD4%aCTuxviM=(aTR?9FHY0zVofiq$h(AY5p!4eqYILHSy zECck-Y!f{^{B{_}%dE004l?RAq+P?>IZRJd9HwD`0W$zQz!iiLPwzp$I^De z<78l^@J=QT;BHqMiu|i4T5t#+i@?E{Q*u2+cIZVcFT&(y1-_6(Fe5N?@JM6X(F`kB zy9s6GGy@I|yyjmKy_V^0qV=W&Ncx84H^D@~E_oRbh)RQzZb5nBuahq_Gv6$}WvTyP z#Ro#mrZcWI0NW>y%I@HDqiISE{@$O~};b+D{kv8-BRUkoHfPsuPNw zIZGxUpHyDXZi??$sXe^;){-atrxY%1(=B7=s^bx}t53#G7j_@jFN?JI!S>~knU*@> zd?#z^wDld1{=V*zyB>?qt`1#Zdi7Gwz(?m66&*F4D2&YPa!{KbQ+L1YOy#rIYyF+C z-F;yC?$^II+{LSMucF(c*5_ZI5_e{XvRhTe-^Xs|ZAz;?nnRThKUlPskDg7{-LNW$ z<`hs5?mZq_G%j`Imhy<_fR4$j_$?)ox-xgFzyBV}H+`S!=G0nM1^7PE-zTrokUVE^ zkLp$S6YtNibm$^>UGBUd;edE0&t_Oi$AF@fNb{#;lsD zLfGZbz0a?$y?A_0L3qh4=emWCryOCLFKn)7DZMHOjH=eP;>lAXOL7aItTql> zc%|6i$3(Avai|1rOAW8=_)Be%@XiNaI)}B&b?D-y0XnVsR&Q=g!Tgo6`uWFB$J7|+ z+`mNO&!){<({snXb=n)Mfm@!;W5aSjTxz?Q5cy}xu)bu>Th@0=Lsyj#zbidHy|W>6 zrcKzs{lVA5H%IEb>@K;}?ns+1ZHiZ8_2^6hk%awm5 N;zmy}ZyuF8_aErWD;59% literal 0 HcmV?d00001 diff --git a/src/assets/images/toolbar/icons/friend-bar/chat.png b/src/assets/images/toolbar/icons/friend-bar/chat.png new file mode 100644 index 0000000000000000000000000000000000000000..e0c1645933a97b4f9b66e57d9e2c9973c2ef928a GIT binary patch literal 1740 zcmcIlPl()97*9LxvUayJ(u%t(`ba%gH2*WnBy`-aGrOGuvmJJax&?AKu zvOBX2J=jvQ&_mTr(IN;v)XNGAB6v`2Q7`r)J$R5_JoKbq1nHsmW&T;DUFKpS$;->{ z`+dLfPrh8NFCE*z@7aAE$L+6GE6ePDkeyFYPO$6Z?OWH`?TM&*GU2$X1KGKY`|#=v z$L+o4H&)YC=M5XtK!ljOMC=9;Lv!4bxo!l}8cBgmntoW~|M>bF9{9M#zgci(Cn}Sc zU)_qy%GOc?ZLJ{-^K-9(BVC&j1SEx^8??j3?w0r-ug%ukw#0)TBwZ`<^O-}i>eNA* z#sm~ZLqLjN1g0e_hAwNyt3Z_%OOlI{q6xBM%Z6Pr!QkMTw-|f&a%FMgi#?V2R+>h( zBy~C+v7?DJZc2(}F%DHyRe>RdWHU@*R|u0sLxu`TQ0zykPeYI~LYJB0u{GSK@-;-s+|5owtubUj97VS|L}p`kO3 zMz+y<-0nq+kwn@gV6cP!RYj0ZLDm|oY%7MX>VmA>vfPI{tP?Oy;do$*eQ$FdsN>kR zFiByENUc)hnJCfsvF#GelTBg>1>#wPjtpIJ*@l2L=*kAtRa}HUUCh2h(R!A^%)Z~a zm?Fk8%8^|(O|{@+B$x&vg6!#v;9|m}b&FVcvE>;A57~~#KKpiH`(f5h6=sZ{Yie#$ zHw6fFPtX<35{e$t1k*JUhB9Vibsk`3do&Ip>l8nLO(I2MlL!B*DbqHM9g11bwXB~R zJBy;~C#-mzgD+%-oEfazKIpZb4N=zZB_3sE&h+-T{YPYPJe_^}PKz+o9g5$FCDcnh zFedX&mgzCtOM0CA1a9mse!SBEui^)(MJ*UM2^*ghpM@i3gQi~?>AyAWy?baV4dHCk zWy{fsWe=kvO+rQ;vk|Q2FTcme_qAGOzEOM%{r%vNW8}% z9|ZZyW9_4-uY7WF7T@`EX7BmiD>uN^iTBs?Cvq2+9|5#x4(Rz`<+iwcc2DlB=?nKR z?-Ds}`Xl%A>6_0iy)=9Mw=2ib=H|Pt=cDrT@y?ytuJ=^!r)z9w!j@!QT;u&e>_nX=OrnazD*?#@> GxqkpM;wUZv literal 0 HcmV?d00001 diff --git a/src/assets/images/toolbar/icons/friend-bar/profile.png b/src/assets/images/toolbar/icons/friend-bar/profile.png new file mode 100644 index 0000000000000000000000000000000000000000..2c8ec5c7132fe9905b256b61b003c99bdd6ed998 GIT binary patch literal 1819 zcmcIlZD`zN9M2{#vs*jSS!B4)%gZIXOWLz*d$m2*bjS5{b?!r-B+uQ2US3Sn z-dz_`oR{)aDvu#TJ5OFEEQ!U6gSz1Q-=t`WPY%ylg&jix9hbnU?J? zn9+O395^u6pH#<&RZ%0_AI0195+X352k^X+HC-tmA&R^bn)|OQ0xv?m;Rw;;8^j0Y zINoJB5a$B|sWMy`4~YRr;OL<62+q=sNYP=636eA;(SpQ>@bX0q1Go@y!uv(P{=7YSpkrtFO6S#HL8Ilf>bTG-%5+g_)Ptu%3(sGzD-X2}Ok^xs=F|fD4C6HYlJCJ|wWBQq+ac zM=f>451@a(RJfX@B93Z|B%TX19LKOED~1@72b@BR3L@u2v>Jwx5n$O%#J1DX(YFJ# zH?sPwG{hL6i(nhYtSAjt_Sg#>CCAbnwlr$t_50Y~7PDy1yP0H{)Q1Ee8kn`r|7 zS523dwH(>fP|SmVJtKBxw^w&j@(SfIWB@*0o@I5sSauRn{c4X8s-I@45#`tVO`^9t zoh8~_1|rfGl3#+kR?5o(2X>@Uq*qa1)UD*ZV02~it4sa=D!v?AH3Q5vMD3Fze0M0n z(UcNH{WoXDy&IZR1&%tMKdrV{w5T>|Xd-F{wczEogS%1tz7mUeB*QO%@G8^rDZQcF zZAb}1V@qv|d7|OPp$piCzRhd)kMB4(_x{!9+MerQFU~bTuzhNF`iZ}<8Apse$AAC$ z;;yAata0IunX8ktQ-`*^_QLjewwx+VIGyp?&+hR0&Yc5iwS~`zUq3!S|K-S;jryMZ z-(J2x0Z#}=4kzwCc^W&P=f7H;KJPXT)qV5K`atLSn-6bhzi^-0H@Bnax04&+{dL=9 z!{lDR{-y8sCcZs-y#41*coPEXK`DfeZ_=ks|C7Rmme!PH>pP9aIchi!1 z`Jr`Pzbx)M)pOvF$6J@bpFTFQ=cD+fK=zMKu6^%) zpZEDazu)`3zqXc@u1KEo#0&&Ml5JLt1OBGU&$J}?-TnBU4g^tHxT2!6g7W9e(dVsN zoxzGAndfMiE5(+bIRJpmHE?EW)(j!yXldE(aJ@3vced|z-`6|7MBnSIth}5y=d#k- zkL+$kGL$DjtwP%ye?F)l=(*6i-Z;FrXK3B=-vX7lI_~JkP3g(S@iYF79bBY7sr4J{g;gsfvgr3E!f%yZUE0~!ouWHH}*9HZ1 zQEXn>5#9tuya$}fo)TjhYM^k6;E#opC$HY53W3yxhjnR4R2#3bThEQ=VM2qtl5MuH4_%Sn&3? zMsRay(-*remRSvSR;kX=)LZvKT3W^Id(r5PJf(8|6y?cFVl*1N!d`|J@dAtHs0}!+(VI|Xu3BTzlR85- zswFkK1Zg5PI-Jx{q=CvYqOlJKqX~?Ma#%`YvEZ8-^GQ;OB8W&NqK@d)yx=7?xw()- zOK7z?MBrjwPy)4hP|O%-u&^R6a3P7~gQ(01+#-P%%6at|*ZBUGr2^Nf~1tCJC zCgqgIfp+_&p@BdgElR~<7$v6nfyAP-F2oWJR^)30nk^2qK`CQA7(>VRhH3==Xr>HJ zuzofGVImZ!iH8dLc!?K%{6q4HFUPY9QAGj^Bwldxynp! zrq~wN0wmUqX-TaHCyh9%b81OSW2EGs9C!eO>x>4ImNWsk5rEMwA=|S82k#E>Ph^!UkEcs%T8b! zEH=$Opum$$WsElBVsK!xaSU#GXKVe?Q`j#*maIu)*|NbSCHqDk?QL^c=Y8X7IDAT+-THm^mGoYz zeqDKWhWV!-#A?f8!=B3K%dPgTra$iA>caY^yYy3SCYA0PLXW;{X5v literal 0 HcmV?d00001 diff --git a/src/assets/styles/icons.scss b/src/assets/styles/icons.scss index fb508cdf..65b58de7 100644 --- a/src/assets/styles/icons.scss +++ b/src/assets/styles/icons.scss @@ -468,6 +468,24 @@ i { } } + &.icon-fb-profile { + background: url('../images/toolbar/icons/friend-bar/profile.png'); + width: 21px; + height: 21px; + } + + &.icon-fb-chat { + background: url('../images/toolbar/icons/friend-bar/chat.png'); + width: 20px; + height: 21px; + } + + &.icon-fb-visit { + background: url('../images/toolbar/icons/friend-bar/visit.png'); + width: 21px; + height: 21px; + } + &.spin { animation: rotating 1s linear infinite; } diff --git a/src/views/friend-list/FriendListView.scss b/src/views/friend-list/FriendListView.scss index 35e525e2..c4e98765 100644 --- a/src/views/friend-list/FriendListView.scss +++ b/src/views/friend-list/FriendListView.scss @@ -3,4 +3,3 @@ } @import './views//friend-bar/FriendBarView'; -@import './views/friend-bar-item/FriendBarItemView'; diff --git a/src/views/friend-list/views/friend-bar-item/FriendBarItemView.scss b/src/views/friend-list/views/friend-bar-item/FriendBarItemView.scss index e69de29b..73a7b073 100644 --- a/src/views/friend-list/views/friend-bar-item/FriendBarItemView.scss +++ b/src/views/friend-list/views/friend-bar-item/FriendBarItemView.scss @@ -0,0 +1,28 @@ +.friend-bar-item { + width: 130px; + margin: 0 3px; + z-index: 0; + position: relative; + padding-left:38px; + text-align: left; + + &.friend-bar-item-active { + margin-bottom:21px; + } + + .friend-bar-item-head { + top: -30px; + left: -30px; + pointer-events: none; + } + + &.friend-bar-search { + .friend-bar-item-head { + top: -3px; + left: 5px; + width: 31px; + height: 34px; + background-image: url('../../../../assets/images/toolbar/friend-search.png'); + } + } +} diff --git a/src/views/friend-list/views/friend-bar-item/FriendBarItemView.tsx b/src/views/friend-list/views/friend-bar-item/FriendBarItemView.tsx index c8aa355e..8cc36663 100644 --- a/src/views/friend-list/views/friend-bar-item/FriendBarItemView.tsx +++ b/src/views/friend-list/views/friend-bar-item/FriendBarItemView.tsx @@ -1,18 +1,66 @@ -import { FC } from 'react'; +import { FollowFriendComposer, MouseEventType, Nitro } from 'nitro-renderer'; +import { FC, useEffect, useRef, useState } from 'react'; +import { LocalizeText } from '../../../../utils/LocalizeText'; +import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView'; import { FriendBarItemViewProps } from './FriendBarItemView.types'; export const FriendBarItemView: FC = props => { const { friend = null } = props; + const [isVisible, setVisible] = useState(false); + + const toggleVisible = () => setVisible(prevCheck => !prevCheck); + + const elementRef = useRef(); + + useEffect(() => + { + function onClick(event: MouseEvent): void + { + const element = elementRef.current; + + if((event.target !== element) && !element.contains((event.target as Node))) + { + setVisible(false); + } + } + + document.addEventListener(MouseEventType.MOUSE_CLICK, onClick); + + return () => + { + document.removeEventListener(MouseEventType.MOUSE_CLICK, onClick); + } + }, [ elementRef, setVisible ]); + + + const followFriend = () => + { + + Nitro.instance.communication.connection.send(new FollowFriendComposer(friend.id)); + } if(!friend) { return ( -
offline
+
+
+
{ LocalizeText("friend.bar.find.title") }
+
); } return ( -
{ friend.name }
+
toggleVisible()}> +
+ +
+
{friend.name}
+ {isVisible &&
+ + {friend.followingAllowed && followFriend() } className="icon icon-fb-visit cursor-pointer" />} + +
} +
); } diff --git a/src/views/friend-list/views/friend-bar/FriendBarView.scss b/src/views/friend-list/views/friend-bar/FriendBarView.scss index e69de29b..abcef229 100644 --- a/src/views/friend-list/views/friend-bar/FriendBarView.scss +++ b/src/views/friend-list/views/friend-bar/FriendBarView.scss @@ -0,0 +1,7 @@ +.friend-bar { + .friend-bar-button { + z-index: 2; + } + + @import '../friend-bar-item/FriendBarItemView.scss'; +} diff --git a/src/views/friend-list/views/friend-bar/FriendBarView.tsx b/src/views/friend-list/views/friend-bar/FriendBarView.tsx index fb804eef..59748b94 100644 --- a/src/views/friend-list/views/friend-bar/FriendBarView.tsx +++ b/src/views/friend-list/views/friend-bar/FriendBarView.tsx @@ -24,12 +24,16 @@ export const FriendBarView: FC = props => }, [ indexOffset, friends ]); return ( -
- +
+ - +
); }