42/42_INT_14_transcendence
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

pane msg ok

Browse Source
This commit is contained in:
simplonco
2022-12-25 18:35:06 +01:00
parent fb358efaf4
commit 789d2e53c5
7 changed files with 270 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
srcs/requirements/svelte/api_front/src/pieces/chat/Chat.svelte
View File

@@ -93,24 +93,25 @@
/* * * * * * * * *
/* * * * * * * * * * * * * * * * * * * * *
GLOBAL STYLES
* * * * * * * * */
*/
/* all grid elements names
:global(#chat_box #chat ){grid-area: chat;}
:global(#chat_box #close ){grid-area: close;}
:global(#chat_box #new ){grid-area: new;}
:global(#chat_box #settings ){grid-area: settings;}
:global(#chat_box #room_name ){grid-area: room_name;}
:global(#chat_box #send ){grid-area: send;}
:global(#chat_box #room_name ){grid-area: room_name;}
:global(#chat_box #send ){grid-area: send;}
:global(#chat_box #create ){grid-area: create;}
:global(#chat_box #user ){grid-area: user;}
:global(#chat_box #back ){grid-area: back;}
:global(#chat_box #back ){grid-area: back;}
:global(#chat_box #panel_home ){grid-area: panel_home;}
:global(#chat_box #panel_new ){grid-area: panel_new;}
:global(#chat_box #panel_msg ){grid-area: panel_msg;}
:global(#chat_box #panel_write ){grid-area: panel_write;}
:global(#chat_box #panel_msg ){grid-area: panel_msg;}
:global(#chat_box #panel_write ){grid-area: panel_write;}
:global(#chat_box #panel_settings ){grid-area: panel_settings;}
:global(#chat_box #panel_room_set ){grid-area: panel_room_set;}
:global(#chat_box #panel_protected ){grid-area: panel_protected;}
@@ -119,6 +120,16 @@
:global(#chat_box #panel_mute ){grid-area: panel_mute;}
*/
/* Hide scrollbar
*/
#chat_box :global(*) {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
#chat_box :global(*::-webkit-scrollbar) {
display: none; /* Chrome, Safari and Opera */
}
/* for grid_box and all childrens
*/
#chat_box :global(.grid_box) {
@@ -151,9 +162,9 @@
/* * * * * * * * * *
/* * * * * * * * * * * * * * * * * * * * *
GLOBAL UTILITIES
* * * * * * * * * */
*/
/* show child only if it's alone
*/

84
srcs/requirements/svelte/api_front/src/pieces/chat/Layout_room.svelte
View File

@@ -24,11 +24,19 @@
</Button>
<!-- MSG -->
<div class="chat_item chat_panel chat_panel_msg" id="chat_panel_msg">
<div id="chat_api_msg_thread" class="chat_api">
<div class="chat_panel panel_msg">
<div class="msg_thread">
<!-- placeholders
------------- -->
<div class="chat_msg bob">
<div class="chat_msg blub">
<p class="name">bob</p>
<p class="msg">hello hello<br>hello hello hello hello</p>
</div>
<div class="chat_msg blob">
<p class="name">me</p>
<p class="msg">hello</p>
</div>
<div class="chat_msg me">
<p class="name">bob</p>
<p class="msg">hello</p>
</div>
@@ -36,6 +44,14 @@
<p class="name">me</p>
<p class="msg">hello</p>
</div>
<div class="chat_msg bleb">
<p class="name">bob</p>
<p class="msg">hello</p>
</div>
<div class="chat_msg SERVER">
<p class="name">me</p>
<p class="msg">hello</p>
</div>
<!-- END placeholders -->
</div>
</div>
@@ -107,6 +123,68 @@
}
/* msg area
*/
.panel_msg {
flex-direction: column-reverse;
overflow: scroll;
border: 1px solid black;
}
.msg_thread {
flex-direction: column;
width: 100%;
padding: 0px 5px;
margin-bottom: 0px;
}
.chat_msg {
white-space: pre-wrap;
margin: 5px auto;
padding: 5px;
border-radius: 5px;
}
/* all msg
*/
.msg_thread .chat_msg {
margin-left: 0px;
background-color: rgb(210, 210, 210);
max-width: 80%;
}
:global(#chat_box) .chat_msg p {
padding: 0px;
}
:global(#chat_box) .chat_msg p.name {
margin: 0px;
font-size: 12px;
color: rgb(100, 100, 100);
}
.chat_msg p.msg {
margin: 5px 0px;
}
/* msg perso
*/
.chat_msg.me {
margin-right: 0px;
margin-left: auto;
background-color: rgb(210, 110, 10);
}
.chat_msg.me p.name {
display: none;
}
/* msg server
*/
.chat_msg.SERVER {
margin-left: auto;
background-color: transparent;
}
:global(#chat_box) .chat_msg.SERVER p.name {
display: none;
}
.chat_msg.SERVER p.msg {
margin: 0px auto;
font-size: 12px;
color: rgb(100, 100, 100);
}
</style>

11
srcs/requirements/svelte/api_front/src/styles/chat/chat__global.css
View File

@@ -1,16 +1,5 @@
/* Hide scrollbar
*/
#chat_box * {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
#chat_box *::-webkit-scrollbar {
display: none; /* Chrome, Safari and Opera */
}
/* separation line under controls
*/
#chat_box .chat_item.chat_panel {

75
srcs/requirements/svelte/api_front/src/styles/chat/chat_msg.css
View File

@@ -1,75 +0,0 @@
#chat_box #chat_panel_msg {
flex-direction: column-reverse;
overflow: scroll;
border: 1px solid black;
}
#chat_box #chat_panel_msg #chat_api_msg_thread {
flex-direction: column;
width: 100%;
padding: 0px 5px;
margin-bottom: 0px;
}
#chat_box #chat_panel_msg #chat_api_msg_thread .chat_msg {
white-space: pre-wrap;
margin: 5px auto;
padding: 5px;
border-radius: 5px;
}
/* * * * * * * * * * * * * *
ALL MSG
*/
#chat_box #chat_panel_msg #chat_api_msg_thread .chat_msg {
margin-left: 0px;
background-color: rgb(210, 210, 210);
max-width: 80%;
}
#chat_box #chat_panel_msg #chat_api_msg_thread .chat_msg p {
padding: 0px;
}
#chat_box #chat_panel_msg #chat_api_msg_thread .chat_msg p.name {
margin: 0px;
margin-bottom: 5px;
font-size: 12px;
color: rgb(100, 100, 100);
}
#chat_box #chat_panel_msg #chat_api_msg_thread .chat_msg p.msg {
/*
margin: 5px 0px;
line-height: 8px;
*/
}
/* * * * * * * * * * * * * *
MSG PERSO
*/
#chat_box #chat_panel_msg #chat_api_msg_thread .chat_msg.me {
margin-right: 0px;
margin-left: auto;
background-color: rgb(210, 110, 10);
}
#chat_box #chat_panel_msg #chat_api_msg_thread .chat_msg.me p.name {
display: none;
}
/* * * * * * * * * * * * * *
MSG SERVER
*/
#chat_box #chat_panel_msg #chat_api_msg_thread .chat_msg.SERVER {
margin-left: auto;
background-color: transparent;
}
#chat_box #chat_panel_msg #chat_api_msg_thread .chat_msg.SERVER p.name {
display: none;
}
#chat_box #chat_panel_msg #chat_api_msg_thread .chat_msg.SERVER p.msg {
margin: 0px auto;
font-size: 12px;
color: rgb(100, 100, 100);
}