✨ Add first static (no reactivity, static data) implementation of ChatsWindow
This commit is contained in:
@@ -1,6 +1,8 @@
|
||||
$font-size: 100vh * 0.01;
|
||||
$icon-size: $font-size * 2;
|
||||
|
||||
$border-style: thin solid #BED6E0;
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
|
||||
@@ -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 {}
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
231
src/components/chats_window/chats_window.scss
Normal file
231
src/components/chats_window/chats_window.scss
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
52
src/components/chats_window/edit_section.rs
Normal file
52
src/components/chats_window/edit_section.rs
Normal file
@@ -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 {
|
||||
"🔎"
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
55
src/components/chats_window/edit_section.scss
Normal file
55
src/components/chats_window/edit_section.scss
Normal file
@@ -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%;
|
||||
}
|
||||
}
|
||||
@@ -1 +1,3 @@
|
||||
pub mod chats_window;
|
||||
|
||||
mod edit_section;
|
||||
|
||||
Reference in New Issue
Block a user