From ff95dcade8fa0d65e163184613a8c81c7762ce25 Mon Sep 17 00:00:00 2001 From: Adrien Date: Sun, 20 Aug 2023 20:04:09 +0200 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20first=20static=20(no=20reacti?= =?UTF-8?q?vity,=20static=20data)=20implementation=20of=20ChatsWindow?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- images/add_user2.png | Bin 0 -> 1055 bytes images/ban_user.png | Bin 0 -> 1104 bytes images/games.png | Bin 0 -> 864 bytes images/medias.png | Bin 0 -> 853 bytes images/phone.png | Bin 0 -> 639 bytes images/webcam.svg | 1 + images/wizz.png.old | Bin 0 -> 719 bytes src/_base.scss | 2 + src/components/chats_window/chats_window.rs | 178 +++++++++++++- src/components/chats_window/chats_window.scss | 231 ++++++++++++++++++ src/components/chats_window/edit_section.rs | 52 ++++ src/components/chats_window/edit_section.scss | 55 +++++ src/components/chats_window/mod.rs | 2 + 13 files changed, 520 insertions(+), 1 deletion(-) create mode 100644 images/add_user2.png create mode 100644 images/ban_user.png create mode 100644 images/games.png create mode 100644 images/medias.png create mode 100644 images/phone.png create mode 100644 images/webcam.svg create mode 100644 images/wizz.png.old create mode 100644 src/components/chats_window/chats_window.scss create mode 100644 src/components/chats_window/edit_section.rs create mode 100644 src/components/chats_window/edit_section.scss diff --git a/images/add_user2.png b/images/add_user2.png new file mode 100644 index 0000000000000000000000000000000000000000..82eea876f94ae4ecc0d1ad79f736ebaf880c5424 GIT binary patch literal 1055 zcmV+)1mOFLP)Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D1GGs*K~zXf?Nm=_ z6jvC3#~g~?DAEXmYf!pKiGgkEdfGwJPNlSKVdEAPvUO!04eBcX8R=o>(9pF~n3NtS z80xg9Fa$z}TH;hI&LP-=D$GG)E+KOed>6@_;@&>L@6BvnZPO;=u|N3n=Dm6E_kHhs zzxUYdK-090rd^Y+&(1cc-FpV{@}#4bHLV|icO|o43n)B(y>V;qLGbwTQ_gt|aU26j zhWLHs(fs1r2|;3K=G9OFC6t%@6o7&SxYJYm&!7bt2wb=6ZK zhyzjIAojorbU>1}aB8a|HuX+a~QIz&T#T;nNG>97|=F(Y5Q+R<|=ih^@s9 zs9Flxekd{{0a0&cJM(s5B!KJ2CZ_&mtnyB(n?hrm_fBnft9A*j$N(R+cew**q(j54 zfUH;G`0?vhVIPRpKIhBsaf+&J7QGEOM1G`eym$A9F&XA1)G`y-PjTtpT_Zvxo z@eiWDp?#H_cGZ}ex#>TgpO2T8mRh&(Ka8hu{1IOHX~y~F$Ylj(GKtzhq0Vvx=eBqy zQvwx(G=m1V3e;vkdzM#wFQ&5ynS(=$qfOolwiHJsRxD<5Y*m-6t8iwAQBZTBI3*0A zV)j+|=sRga`XXCQ=OoyaFR`+?y{iK~0riQ`t@4i_#}!K!0TibK6|^ax%h9RB3&ZD! z52e%BjIP?ZHN%cf^sxsXckzI2a3Tw7i!tK(Tyt^o?BLp;g1S~OHSsXrmIGewqJxMY zTGAJ7LKmFag8I}DT9CbB!GA}lcD3Rfkt$qc@}}^L7c-yj4Sz7t6c@^?W zxj;47(J|zjW~hRJLP?+`APE~dPXEcmy$5@LNtgdO^7Xu0vLxXavL^YS+(Y+(0wuy~ zdLOFdz_%S;{FY)v-^(X^w341KAjtUPJCgzD+tS zqNn_pT}4awD_NjYk$7hS%3KipQnP?u4)8T{RfpZrHZX;CGj-2bg^+}(G*)bY-AWFZ z`m~GefsJ=@-bJ>N(IKzNNp0lVCRXascdG-#IdkvmfVpG;W@G&}*1&%Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D1La9XK~zXf?Nw2T z8&wp2pDT!)wa7NO?q;_E$JkA>WYe9c3zJrknXh7ZX}Y9F1oRb9ra`8W5EHb z41SG@F#6-LP@E6Zf&L5>aSBpH5jzwiL&fbBY#k8O{9W&xeZ@-uQt-;UQ=xUG){{CS6F91Vc=is3lS!db9VWRbbDVjWV z{AOAjD>6V2I;lYY%=|TSgp^q7kZ2RG`qq>$Sv62m#OQW#RG@Ws^;SilInA=}2_yU) z1(R1fP_XVsSH;~o;hB$Wz1mATf#nPbP17>%kB{1o&krZEEv5pBD}#(SrF}WMeIjgY zZ3)^H?rNiM{@!>t?61}18_(C{Kc8Fit_wmFaD$BQE{wF!v`i;*B4)ic2*A!&OdoD`Q*TCw9S{opYZd|LyLpogo>>Zl3|?xfbPt|W_kk` z{KP{C(eTl(K{}=pIuI!`B(elu5qmT{X*38a7cjJJR{DNnzt=~Ra~x+O<-bmnX?-et zW~8RBv0@|jz8mB2G3c$P^T1Rfl0*ok8iXhitSo%{-7=YC9QX*3z46L|x3f4mcyoMQ zX3K<#uZcXZxsHyZt}#LtO!WS)(5@i83y~s$kHm(q!1jqo2&>D3=;=!EL#4toD$*?$ z(Qm0VwQ@5l-fwFrVB&MT|^9ThT6fkTQcMUjos%>9f zT0)VzL9bf%x3NT5@_D{L|9Jf6zI`#H$JNID4t;CN_}0);QSv(l=!s}_J6Qi3o&bAc zdIoH6Zt9vK(Is98;=|f|L`uwwe-l1-x4W%_-A05?^8TtP+5b`&h W9b#>b+}?2j0000^f literal 0 HcmV?d00001 diff --git a/images/games.png b/images/games.png new file mode 100644 index 0000000000000000000000000000000000000000..11cfa770986ada45c6e87f4ef3798bdcc70f0475 GIT binary patch literal 864 zcmV-m1E2hfP)Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0`*BmK~zXfy;U)6 z(?AsM$VSJGY;?mzCA{H*!K0T7kDiJrFUa7JGm4RuR6h)C( zyofNw^QhbX&C8cFK!m>UQ^qN&3xdYkqdok5*Qmu=hRc^-{e6p=&R@gp*vfK->}$n|^?z3m1Rwi0SZDVerUs&0{#nUBh#5+9C6B66H6 zUDt(yqA28tEsBzq49lY+j9A>Hhg#?K_lMAW+J(7K{g zyS+q;>IOM?Euw~j$4A$)ta1lINEWBa0liR|m|P1fGar=!iU`68rz9H;S@o9m`4Qlwih?d<@mzrc@TVJiQA>p9Mla) z9H}72l87GvVK;{Dak^T<=*#)}F&~J#Qff9jozmb+mIa=pCK%TlUnA0k=y8f%KNJQ}U%h=SrRD>lMy9gWY_4PcfGNk-oPr)mIX(Ewp$0JV z{FX3z`KEny!!5!Szd44e_=K{_v_aW)?#&Ii2qxzq9qda{TyzFE8oF8ITNU?`eD$Ak q3no>85jE<8w4on1Hl}-FW#tct<_Sv9H)K8l0000Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0_sUbK~zXf?Nm)@ z6G0T-V{aBcG=V}r=4K@z8=-Usl~G$=3yVt>Ts_nQ5f+ND;K4o4as2_eUK*j`QhSJh zH7eo?{^U?_DTVB%WRH8yt+_qt&1Ohan)HVr{opZ~eKX%T^Sw7w{$o#=rU{HOz;UmT z>pENa2i%}(8aR#%VVpocP9aKK5T`s^ZAf_FhK^ku#4SiUX^WG01yYg6b=0!N4bI$rVk-)a2$Ert7TMJ4 zvqf5iHww9Jn8$ULQX!yI9|#SgIQ#ONAQ}X;XmfMZGIb(I@znC|u>+uf43-d_*xW;Jg&2CTik$H74X6Y z+#mt!#c=ul$8FVk)ld|6Ob|<;fU2rMbZyVTby7exE8zH5@M@6|qJ9Fp6GCb3`F6h7 zHneDKYs=AzIkZhNkKHCMDwUVp`I&b*^8+E|26eDdgj+T`$@n4OjtK#25f*V+n_}Mc zJpLXWaf8xaCV;mB&!|s8bO-l%Seqib8^qvLBGBy`OzM@c4Lfk0tR)lE-!(Boi}(ZL zk5ujZ=ahjjmtk?;08}#oBFFlP z3cyHle!V~*tf@H5om*{>8@~@G(80*W^pb}D3XhA61^hTOzpk4PzeLufAL(`bQ$1H2 zT%SYX0{vWNwOG^$>r>FYf%Y8=r>2)&LaU%zRhZPx#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0u)I^K~zXf?NmKa z+fWqEPhseQn3!5`c%ZGTBJg50QiPIph%8kW78URcgUwKp2&y^-LBxl!)Jj-@)JQDe z$e4|c9zA-@Ke&D8@{BqZ^3jYO=_-!jedoM$-@Pt8V`zBixB9n}IM@tt647eY-?6@b zaku&7>SFc#^;?xb8p__e4x(1OL!E9yakoc76jP-hQZGqlq!h(nUPm6p{KKoV+CCT{ z!{#*2C`nU_J3Xq0G3gb-gm{K%zu)H^h>av9g6M%D%QEWp5+*U+I%!3lg-kafQw03} zKCjO%UAec`INnfH|Ar}AOjPt+OaKR5B0nU<_6a$-Bg1LB$bnE>=HM`)bj~8;36Z(7 zr-Nu(GdOHndp~UR#$|u^w@Q0};dm}YP&(Wh4rSLPvYrwFUX~merQlPdBr+_~cy!a3 z=4FKP!cE>314V$vwNra>t-+yQJqoA!)3sRyE<$!v-QJ#4%aZ{_P)-CIW4M;Zt@`JpA)n$rW|+iUL5VH)bTK5d9zEadl_a&E4nNI7jT8SdROvSROJKQsUU002ovPDHLkV1hS089D#} literal 0 HcmV?d00001 diff --git a/images/webcam.svg b/images/webcam.svg new file mode 100644 index 0000000..7c3f49d --- /dev/null +++ b/images/webcam.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/wizz.png.old b/images/wizz.png.old new file mode 100644 index 0000000000000000000000000000000000000000..d7b1d5d0765b3ad71df28650daaa4a2df48411b6 GIT binary patch literal 719 zcmV;=0xPx#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0%S=>UmrOhvemex4J8nF zvI-?!zz|b{qotsR8am#n?fU+wJ6D$6qz8}pbh`Kbr+23(=8mnciit$8*Q*SNJN5HV z>#xr~y8AH16Pm+2vuq~k+OZlw_wPQ~?IRuxTEUorN#to22U;az=10Cx`mR3zPN-^oV-){}g*r_j0tEbX=5J4 z;Kjn~{oU@ezZb&aS#JfG-!_}c*P2uWjk*EbRKy6_d59z@D-t=#&9lH3JQ-$Sc+_=# z=t@N(02+%6x*04|Y`%o%B?Qxy4Y8809v`kq@iKpOUwAbP(u3 zh)jTDE5NZ4;22-gcQkVIEO_BQej`O~$F=^~*{yvXrWKe0nKM8PQHWas6}cL@c^3P7 z8*PPJSl* zmAzJ=SfZcb*V?%288B~u;cPL1VFb4<%<#Y6rv+<2AHVg{0R>kcIo$iNX}ZaQxS zk|ReWw{*zGYkG0f^G387e=DE>$+n|M9ZyFuJbp$DLu_{+Qx0-V*A%tN{~Yj_N1M%< zt{sa|x$KS^m@5mORpc-nISelTXc+%$6=(xW63o^+2e&()e7?C=%#32QiwS_A2)ATv z1jZaUyW{_8cBN5h*H@=6L$qjgRv2Q;-Q2E)_yf#p)?`A9Rr>${002ovPDHLkV1nr^ BMos_# literal 0 HcmV?d00001 diff --git a/src/_base.scss b/src/_base.scss index 6dbde92..f210d6e 100644 --- a/src/_base.scss +++ b/src/_base.scss @@ -1,6 +1,8 @@ $font-size: 100vh * 0.01; $icon-size: $font-size * 2; +$border-style: thin solid #BED6E0; + body { height: 100vh; width: 100vw; diff --git a/src/components/chats_window/chats_window.rs b/src/components/chats_window/chats_window.rs index e542ab2..2d5edff 100644 --- a/src/components/chats_window/chats_window.rs +++ b/src/components/chats_window/chats_window.rs @@ -1,8 +1,184 @@ use dioxus::prelude::*; +use crate::components::avatar_selector::AvatarSelector; +use crate::components::chats_window::edit_section::EditSection; +use crate::components::icons::DownArrowIcon; + +turf::style_sheet!("src/components/chats_window/chats_window.scss"); + pub fn ChatsWindow(cx: Scope) -> Element { + let room_names = vec![ + "MON POTE", + "Second room", + "Third room", + "AAAAAAAAAAAA", + "BBBBBBBBBBBBBBBBBBB", + "CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC", + ]; + + let rendered_room_tabs = room_names.into_iter().map(|room_name| { + rsx!( + div { + class: ClassName::TAB, + + button { + img { + src: "./images/status_online.png", + }, + + "{room_name}", + }, + }, + ) + }); + cx.render(rsx! { + style { STYLE_SHEET }, + div { - } + class: ClassName::CHATS_WINDOW, + + div { + class: ClassName::TABS, + + rendered_room_tabs.into_iter(), + }, + + div { + class: ClassName::CHAT, + + div { + class: ClassName::HEADER, + + div { + class: ClassName::INFO, + + p { + class: ClassName::ROOM_NAME, + + "MON POTE", + }, + + p { + class: ClassName::ROOM_TOPIC, + + "LE STATUT A MON POTE", + }, + }, + + div { + class: ClassName::NAVBAR, + + button { + style: "background: url(./images/add_user2.png) center no-repeat", + }, + + button { + style: "background: url(./images/directory.png) center no-repeat", + }, + + button { + style: "background: url(./images/phone.png) center no-repeat", + }, + + button { + style: "background: url(./images/medias.png) center no-repeat", + }, + + button { + style: "background: url(./images/games.png) center no-repeat", + }, + + button { + style: "background: url(./images/ban_user.png) center no-repeat", + }, + + button { + class: ClassName::FLEX_RIGHT_AERO_BUTTON, + style: "background: url(./images/brush.png) center no-repeat", + }, + + button { + class: ClassName::FLEX_LAST_BUTTON, + style: "background: url(./images/settings.png) center no-repeat", + }, + }, + }, + + div { + class: ClassName::CONVERSATION, + + div { + class: ClassName::ROOM_EVENTS, + + ul { + li { + class: ClassName::ROOM_EVENT, + div { + p { + class: ClassName::TITLE, + "MON POTE says:" + }, + p { + class: ClassName::CONTENT, + "Coucou mon pote", + }, + }, + }, + }, + }, + + div { + class: ClassName::OTHER_AVATAR_SELECTOR_CONTAINER, + + div { + + class: ClassName::AVATAR_SELECTOR, + AvatarSelector {}, + }, + div { + class: ClassName::WEBCAM, + img { + src: "images/webcam.svg" + }, + }, + + div { + class: ClassName::ARROW_ICON, + DownArrowIcon {} + }, + }, + + div { + class: ClassName::HOLDER, + "••••••" + }, + + div { + class: ClassName::EDIT_SECTION, + EditSection {}, + }, + + div { + class: ClassName::MY_AVATAR_SELECTOR_CONTAINER, + + div { + class: ClassName::AVATAR_SELECTOR, + AvatarSelector {}, + }, + div { + class: ClassName::WEBCAM, + img { + src: "images/webcam.svg" + }, + }, + div { + class: ClassName::ARROW_ICON, + DownArrowIcon {} + }, + }, + }, + }, + }, }) } diff --git a/src/components/chats_window/chats_window.scss b/src/components/chats_window/chats_window.scss new file mode 100644 index 0000000..a0379a2 --- /dev/null +++ b/src/components/chats_window/chats_window.scss @@ -0,0 +1,231 @@ +@import "../../_base.scss" + +.chats-window { + height: 100%; + width: 100%; + + $horizontal-padding-margin: calc((2*100%)/1980); + + .tabs { + height: 2%; + width: 100%; + + display: flex; + flex-flow: row; + overflow-x: scroll; + + &::-webkit-scrollbar { + height: 0px; + } + + .tab { + height: 100%; + flex-grow: 1; + padding: 0 $horizontal-padding-margin; + + display: flex; + + button { + height: 100%; + width: 100%; + + display: flex; + flex-direction: row; + align-items: center; + + $clamped-horizontal-padding-margin: clamp(5px, $horizontal-padding-margin, $horizontal-padding-margin); + margin: 0 $clamped-horizontal-padding-margin; + padding: 0 $clamped-horizontal-padding-margin; + + white-space: nowrap; + + background-color: #EFF9F9; + border: $border-style; + + $radius: calc((6*100%)/1980); + $clamped-radius: clamp(6px, $radius, $radius); + border-radius: $clamped-radius $clamped-radius 0 0; + + font-size: $font-size; + + img { + height: $icon-size; + aspect-ratio: 1; + } + } + } + } + + .chat { + height: 98%; + width: 100%; + + background-color: #ECF6F9; + + .header { + height: 7%; + + border: $border-style; + + .info { + height: 45%; + display: flex; + flex-direction: column; + + padding-left: 2%; + + background: linear-gradient(180deg, #BFE3EB, #DEFBFE); + + font-size: $font-size; + + .room-name { + margin: 0; + margin-top: 1%; + font-weight: bold; + } + + .room-topic { + margin: 0; + color: darkgrey; + } + } + + .navbar { + height: 55%; + padding-left: 2%; + padding-right: 2%; + + background: linear-gradient(180deg, #A9D3E0, #F0F9FA); + + display: flex; + flex-direction: row; + align-items: center; + + button { + @extend .aeroButton; + padding-right: 2%; + } + + .flex-right-aero-button { + margin-left: auto; + } + + .flex-last-button { + margin: 0; + } + } + } + + .conversation { + $padding-top: 2%; + + height: calc(93% - $padding-top); + + padding-left: 2%; + padding-top: $padding-top; + + display: grid; + grid-template-columns: 75% 25%; + grid-template-rows: 70% 1% 29%; + cursor: pointer; + + .holder { + display: flex; + justify-content: center; + align-items: center; + + grid-column: 1; + grid-row: 2; + + color: darkgrey; + } + + .room-events { + display: flex; + flex-flow: column; + justify-content: flex-start; + + border: $border-style; + background-color: #FFFFFF; + + ul { + margin: 0; + padding-left: 0; + } + + li { + list-style-type: none; + } + + .room-event { + display: flex; + flex-flow: column; + justify-content: space-between; + + padding-top: 1%; + + font-size: $font-size; + + .title { + margin: 0; + } + + .content { + margin: 0; + padding-left: 2%; + } + } + } + + %selector-container { + aspect-ratio: 1; + + grid-column: 2; + + display: grid; + grid-template-columns: 10% 15% 50% 15% 10%; + grid-template-rows: 80% 20%; + + .avatar-selector { + grid-column-start: 1; + grid-column-end: 6; + aspect-ratio: 1; + } + + .webcam { + grid-column: 2; + grid-row: 2; + + aspect-ratio: 1; + } + + .arrow-icon { + grid-column: 4; + grid-row: 2; + + svg { + path:last-child { + fill: black; + } + } + } + } + + .other-avatar-selector-container { + @extend %selector-container; + + grid-row: 1; + } + + .my-avatar-selector-container { + @extend %selector-container; + + grid-row: 3; + } + + .edit-section { + grid-row: 3; + } + } + } +} diff --git a/src/components/chats_window/edit_section.rs b/src/components/chats_window/edit_section.rs new file mode 100644 index 0000000..285a4d0 --- /dev/null +++ b/src/components/chats_window/edit_section.rs @@ -0,0 +1,52 @@ +use dioxus::prelude::*; + +turf::style_sheet!("src/components/chats_window/edit_section.scss"); + +pub fn EditSection(cx: Scope) -> Element { + cx.render(rsx! { + style { STYLE_SHEET }, + + div { + class: ClassName::INPUT_AREA, + + div { + class: ClassName::BUTTONS, + + button { + "😀" + }, + + button { + "😉" + }, + + button { + "😴" + }, + + button { + "🔊" + }, + }, + + textarea { + class: ClassName::EDIT, + placeholder: "Type your message here...", + }, + + div { + class: ClassName::CMD_BUTTONS, + + button { + class: ClassName::SEND_BUTTON, + + "Send" + }, + + button { + "🔎" + }, + }, + }, + }) +} diff --git a/src/components/chats_window/edit_section.scss b/src/components/chats_window/edit_section.scss new file mode 100644 index 0000000..97c94b6 --- /dev/null +++ b/src/components/chats_window/edit_section.scss @@ -0,0 +1,55 @@ +@import "../../_base.scss" + +.input-area { + height: 100%; + width: 100%; + + margin-bottom: 2%; + + .buttons { + $padding-top-bottom: 0.5%; + + height: calc(10% - ($padding-top-bottom * 2)); + padding-left: 2%; + padding-top: $padding-top-bottom; + padding-bottom: $padding-top-bottom; + + display: flex; + flex-direction: row; + align-items: center; + + border: $border-style; + background: linear-gradient(180deg, #F5FDFF, #E3ECF0, #F5FDFF); + + button { + @extend .aeroButton; + height: $icon-size; + + padding: 0; + margin: 0; + margin-right: 2%; + + font-size: larger; + } + } + + .edit { + height: 80%; + // Remove border from width + width: calc(100% - 2px); + + padding: 0; + margin: 0; + } + + .cmd-buttons { + height: 7%; + display: flex; + flex-direction: row; + justify-content: flex-end; + } + + .send-button { + width: 15%; + } +} diff --git a/src/components/chats_window/mod.rs b/src/components/chats_window/mod.rs index 42160ea..8e7c844 100644 --- a/src/components/chats_window/mod.rs +++ b/src/components/chats_window/mod.rs @@ -1 +1,3 @@ pub mod chats_window; + +mod edit_section;