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

write panel ok

Browse Source
This commit is contained in:
simplonco
2022-12-25 17:52:51 +01:00
parent d95d8a4ae5
commit fb358efaf4
7 changed files with 158 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -326,32 +326,6 @@
</form>
</div>
<!-- MSG -->
<div class="chat_item chat_panel chat_panel_msg" id="chat_panel_msg">
<div id="chat_api_msg_thread" class="chat_api">
<!-- placeholders
------------- -->
<div class="chat_msg bob">
<p class="name">bob</p>
<p class="msg">hello</p>
</div>
<div class="chat_msg me">
<p class="name">me</p>
<p class="msg">hello</p>
</div>
<!-- END placeholders -->
</div>
</div>
<!-- WRITE -->
<div class="chat_item chat_panel chat_panel_write" id="chat_panel_write">
<!--
<textarea class="text_area" id="chat_msg_write" onkeypress="send_msg_if(event)" placeholder="type here"></textarea>
-->
<div class="text_area" id="chat_msg_write" onkeypress="send_msg_if(event)" contenteditable="true" ></div>
</div>
<!-- send -->
<button class="chat_item chat_send btn" id="chat_send" onclick="send_msg()" title="send"><p>send</p></button>
</div>

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

@@ -8,20 +8,49 @@
<div class="grid_box">
<!-- back -->
<Button bind:layout new_layout={back} my_class="back icon" my_title="go back {back}">
back
</Button>
<!-- room_name -->
<Button bind:layout new_layout="room_set" my_class="room_name transparent">
&lt;room_name&gt;
</Button>
<!-- close -->
<Button bind:layout new_layout="close" my_class="close icon">
close
</Button>
<!-- MSG -->
<div class="chat_item chat_panel chat_panel_msg" id="chat_panel_msg">
<div id="chat_api_msg_thread" class="chat_api">
<!-- placeholders
------------- -->
<div class="chat_msg bob">
<p class="name">bob</p>
<p class="msg">hello</p>
</div>
<div class="chat_msg me">
<p class="name">me</p>
<p class="msg">hello</p>
</div>
<!-- END placeholders -->
</div>
</div>
<!-- WRITE -->
<div class="chat_panel panel_write">
<div class="text_area" id="chat_msg_write" contenteditable="true">
</div>
</div>
<!-- send -->
<Button my_class="send">
send
</Button>
</div>
<style>
@@ -29,11 +58,11 @@
/* grid layout "home"
*/
.grid_box :global(.back ) {grid-area: back;}
.grid_box :global(.room_name ) {grid-area: room_name;}
.grid_box :global(.close ) {grid-area: close;}
.grid_box :global(.back ) {grid-area: back;}
.grid_box :global(.room_name ) {grid-area: room_name;}
.grid_box :global(.close ) {grid-area: close;}
.grid_box :global(.panel_msg ) {grid-area: panel_msg;}
.grid_box :global(.send ) {grid-area: send;}
.grid_box :global(.send ) {grid-area: send;}
.grid_box :global(.panel_write ) {grid-area: panel_write;}
.grid_box {
grid:
@@ -51,6 +80,33 @@
background-color: transparent;
}
/* write area
*/
:global(#chat_box) .panel_write {
border: none;
overflow: visible;
}
:global(#chat_box) .text_area {
display: block;
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: auto;
min-height: 100%;
max-height: 300px;
overflow-x: hidden;
overflow-y: scroll;
background-color: white;
border: 1px solid black;
}
:global(#chat_box) .text_area :global(*) {
display: block ruby;
}
</style>

36
srcs/requirements/svelte/api_front/src/styles/chat/chat_write.css
View File

@@ -1,36 +0,0 @@
#chat_box .chat_item#chat_panel_write {
border: none;
overflow: visible;
}
#chat_box .chat_item#chat_panel_write .text_area {
display: block;
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
overflow-x: hidden;
overflow-y: scroll;
background-color: white;
border: 1px solid black;
}
#chat_box .chat_item#chat_panel_write .text_area * {
display: block ruby;
}
/* if .text_area is a contenteditable div
*/
#chat_box .chat_item#chat_panel_write .text_area {
height: auto;
min-height: 100%;
max-height: 300px;
}
/* if .text_area is a textarea
*/
#chat_box .chat_item#chat_panel_write textarea.text_area {
resize: none;
height: 100px;
}
#chat_box .chat_item#chat_panel_write textarea.text_area:placeholder-shown {
height: 100%;
}

1
srcs/requirements/svelte/api_front/src/styles/chat/layout_room.css
View File

@@ -1 +0,0 @@