start all new architecture for chat
This commit is contained in:
lenovo
12
docs/transcendence_chat.drawio.html
Normal file
12
docs/transcendence_chat.drawio.html
Normal file
File diff suppressed because one or more lines are too long
@@ -8,70 +8,110 @@
|
||||
|
||||
<body>
|
||||
|
||||
<input type="button" class="vanish input_outside" id="input_outside">
|
||||
<input type="checkbox" class="vanish" id="chat_input">
|
||||
<input type="button" class="vanish" id="new_room_form">
|
||||
<br><br><button onclick="layout(this.innerText)">close</button>
|
||||
<br><br><button onclick="layout(this.innerText)">room</button>
|
||||
<br><br><button onclick="layout(this.innerText)">new</button>
|
||||
<br><br><button onclick="layout(this.innerText)">settings</button>
|
||||
<br><br><button onclick="layout(this.innerText)">room_settings</button>
|
||||
<br><br><button onclick="layout(this.innerText)">protected</button>
|
||||
<br><br><button onclick="layout(this.innerText)">create</button>
|
||||
<br><br><button onclick="layout(this.innerText)">user</button>
|
||||
<br><br><button onclick="layout(this.innerText)">mute</button>
|
||||
|
||||
<div class="chat _box">
|
||||
<div class="close" id="chat_box">
|
||||
|
||||
<div class="chat _item controls_area">
|
||||
<!-- MENU
|
||||
<div class="control rooms drop_down">
|
||||
<p class="_title" tabindex=0>rooms</p>
|
||||
<div class="_items" tabindex=0 id="rooms">
|
||||
<button class="chat_item" id="chat_chat" onclick="layout('open')" >chat</button>
|
||||
<button class="chat_item" id="chat_close" onclick="layout('close')" >new</button>
|
||||
<button class="chat_item" id="chat_new" onclick="layout('new')" >new</button>
|
||||
<button class="chat_item" id="chat_settings" onclick="layout('settings')" >settings</button>
|
||||
<button class="chat_item" id="chat_room_name" onclick="layout('room_settings')" >placeholder</button>
|
||||
<button class="chat_item" id="chat_send" onclick="send_msg()" >send</button>
|
||||
<p class="chat_item" id="chat_create" >create</p>
|
||||
<p class="chat_item" id="chat_user_name" >placeholder</p>
|
||||
<div class="chat_item" id="chat_msg_thread" ><!-- messages go there --></div>
|
||||
<div class="chat_item" id="chat_write" contenteditable ><!-- write message here --></div>
|
||||
<button class="chat_item chat_back" id="chat_back_home" onclick="layout('home')" ></button>
|
||||
<button class="chat_item chat_back" id="chat_back_room" onclick="layout('room')" ></button>
|
||||
<button class="chat_item chat_back" id="chat_back_new" onclick="layout('new')" ></button>
|
||||
<button class="chat_item chat_back" id="chat_back_user" onclick="layout('user')" ></button>
|
||||
|
||||
<!-- --------------------------------
|
||||
PANELS
|
||||
--------------------------------- -->
|
||||
<div class="chat_item chat_panel" id="chat_panel_home">
|
||||
<div id="chat_room_list" class="_first_child_vanish">
|
||||
<div class="chat_room_name">
|
||||
<p>you don't have any chat yet</p>
|
||||
</div>
|
||||
</div>
|
||||
-------------- -->
|
||||
<select class="control rooms">
|
||||
<option class="_title">rooms</option>
|
||||
</select>
|
||||
<!-- MENU -------------- -->
|
||||
<div class="control new">
|
||||
<label for="new_room_form"><p>new</p></label>
|
||||
</div>
|
||||
<!-- MENU -------------- -->
|
||||
<div class="control settings">
|
||||
<p onclick="">settings</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label class="chat _item open_close button" for="chat_input">
|
||||
<p>chat</p>
|
||||
</label>
|
||||
|
||||
<div class="chat _item main_window">
|
||||
<!-- THREAD ------------ -->
|
||||
<div class="msg_box" id="msg_thread">
|
||||
<!-- messages go there -->
|
||||
</div>
|
||||
<p id="msg_box_room_name">room name</p>
|
||||
<!-- ACTION BOARD ------ -->
|
||||
<div class="action_board" id="action_board">
|
||||
<!-- CREATE ------------ -->
|
||||
<div class="action_pannel _create" id="create" tabindex=0>
|
||||
<p class="_title">new room</p>
|
||||
<input class="_search" type="text" onkeyup="search_room()" placeholder="type the name of a room">
|
||||
<div class="_list">
|
||||
<p>create a new group</p>
|
||||
</div>
|
||||
<label for="input_outside" class="close_croice"></label>
|
||||
<!-- placeholders -->
|
||||
<div class="chat_room_name">
|
||||
<p>placeholder</p>
|
||||
</div>
|
||||
<div class="chat_room_name">
|
||||
<p>placeholder</p>
|
||||
</div>
|
||||
<div class="chat_room_name">
|
||||
<p>placeholder</p>
|
||||
</div>
|
||||
<!-- END placeholders -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chat _item msg_write">
|
||||
<div class="text_area" id="msg_write" contenteditable>
|
||||
<!-- write message here -->
|
||||
</div>
|
||||
<div class="chat_item chat_panel" id="chat_panel_room">
|
||||
<!-- content -->
|
||||
panel room
|
||||
</div>
|
||||
<div class="chat_item chat_panel" id="chat_panel_new">
|
||||
<!-- content -->
|
||||
panel new
|
||||
</div>
|
||||
<div class="chat_item chat_panel" id="chat_panel_settings">
|
||||
<!-- content -->
|
||||
panel settings
|
||||
</div>
|
||||
<div class="chat_item chat_panel" id="chat_panel_room_settings">
|
||||
<!-- content -->
|
||||
panel room settings
|
||||
</div>
|
||||
<div class="chat_item chat_panel" id="chat_panel_protected">
|
||||
<!-- content -->
|
||||
panel protected
|
||||
</div>
|
||||
<div class="chat_item chat_panel" id="chat_panel_create">
|
||||
<!-- content -->
|
||||
panel create
|
||||
</div>
|
||||
<div class="chat_item chat_panel" id="chat_panel_user">
|
||||
<!-- content -->
|
||||
panel user
|
||||
</div>
|
||||
<div class="chat_item chat_panel" id="chat_panel_mute">
|
||||
<!-- content -->
|
||||
panel mute
|
||||
</div>
|
||||
|
||||
<button class="chat _item msg_send button" onclick="send_msg()">
|
||||
<p>send</p>
|
||||
</button>
|
||||
<!-- --------------------------------
|
||||
MODELS
|
||||
<div class="chat_model" id="chat_model_myroom_name">
|
||||
</div>
|
||||
<div class="chat_model" id="chat_model_msg">
|
||||
</div>
|
||||
<div class="chat_model" id="chat_model_room_name">
|
||||
</div>
|
||||
<div class="chat_model" id="chat_model_blocked_user">
|
||||
</div>
|
||||
<div class="chat_model" id="chat_model_room_user">
|
||||
</div>
|
||||
--------------------------------- -->
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
function layout(layout_class) {
|
||||
document.getElementById('chat_box').className = layout_class;
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- https://socket.io/docs/v4/client-installation/ -->
|
||||
<script src="https://cdn.socket.io/4.5.3/socket.io.min.js" integrity="sha384-WPFUvHkB1aHA5TDSZi6xtDgkF0wXJcIIxXhC6h8OT8EH3fC5PWro5pWJ1THjcfEi" crossorigin="anonymous"></script>
|
||||
<script>
|
||||
|
||||
@@ -50,7 +50,7 @@ label.close_croice::after {
|
||||
*/
|
||||
|
||||
/* show action board and _create */
|
||||
input#new_room_form:focus ~ .chat._box #action_board ._create,
|
||||
input#new_room_form:focus ~ #chat_box #action_board ._create,
|
||||
#action_board ._create:focus-within {
|
||||
/*
|
||||
display: flex;
|
||||
|
||||
@@ -1,90 +1,115 @@
|
||||
|
||||
@import 'chat_buttons.css';
|
||||
/*
|
||||
@import 'chat_thread.css';
|
||||
@import 'chat_write.css';
|
||||
@import 'chat_controls.css';
|
||||
@import 'action_board.css';
|
||||
*/
|
||||
|
||||
@import 'chat_buttons.css';
|
||||
@import 'layout_close.css';
|
||||
|
||||
|
||||
/* vanish elements wihtout display:none; */
|
||||
/* vanish elements wihtout display:none;
|
||||
input.vanish {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
*/
|
||||
|
||||
/* Hide scrollbar */
|
||||
.chat._box * {
|
||||
/* Hide scrollbar
|
||||
*/
|
||||
#chat_box * {
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
.chat._box *::-webkit-scrollbar {
|
||||
#chat_box *::-webkit-scrollbar {
|
||||
display: none; /* Chrome, Safari and Opera */
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* GRID
|
||||
/* GRID
|
||||
*/
|
||||
|
||||
.chat._box * {
|
||||
#chat_box * {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
padding: 0px;
|
||||
margin: auto;
|
||||
}
|
||||
#chat_box .chat_item {
|
||||
display: none;
|
||||
/*
|
||||
border: 1px solid black;
|
||||
*/
|
||||
}
|
||||
.chat._item.controls_area { grid-area: controls;}
|
||||
.chat._item.open_close { grid-area: open_close;}
|
||||
.chat._item.main_window { grid-area: main_window;}
|
||||
.chat._item.msg_write { grid-area: msg_write;}
|
||||
.chat._item.msg_send { grid-area: msg_send;}
|
||||
|
||||
.chat._box {
|
||||
.chat_item#chat_chat { grid-area: chat;}
|
||||
.chat_item#chat_close { grid-area: close;}
|
||||
.chat_item#chat_new { grid-area: new;}
|
||||
.chat_item#chat_settings { grid-area: settings;}
|
||||
.chat_item#chat_room_name { grid-area: room_name;}
|
||||
.chat_item#chat_send { grid-area: send;}
|
||||
.chat_item#chat_create { grid-area: create;}
|
||||
.chat_item#chat_user_name { grid-area: user_name;}
|
||||
.chat_item#chat_msg_thread { grid-area: msg_thread;}
|
||||
.chat_item#chat_write { grid-area: write;}
|
||||
.chat_item#chat_back_home { grid-area: back_home;}
|
||||
.chat_item#chat_back_room { grid-area: back_room;}
|
||||
.chat_item#chat_back_new { grid-area: back_new;}
|
||||
.chat_item#chat_back_user { grid-area: back_user;}
|
||||
.chat_item#chat_panel_home { grid-area: panel_home;}
|
||||
.chat_item#chat_panel_room { grid-area: panel_room;}
|
||||
.chat_item#chat_panel_new { grid-area: panel_new;}
|
||||
.chat_item#chat_panel_settings { grid-area: panel_settings;}
|
||||
.chat_item#chat_panel_room_settings { grid-area: panel_room_settings;}
|
||||
.chat_item#chat_panel_protected { grid-area: panel_protected;}
|
||||
.chat_item#chat_panel_create { grid-area: panel_create;}
|
||||
.chat_item#chat_panel_user { grid-area: panel_user;}
|
||||
.chat_item#chat_panel_mute { grid-area: panel_mute;}
|
||||
|
||||
#chat_box {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
display: grid;
|
||||
grid:
|
||||
' controls open_close ' auto
|
||||
' main_window main_window ' 1fr
|
||||
' msg_write msg_send ' auto
|
||||
/ 1fr auto;
|
||||
gap: 0px;
|
||||
padding: 0px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
|
||||
border: 1px solid green;
|
||||
}
|
||||
.chat._item > * {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
padding: 5px;
|
||||
width: 300px;
|
||||
height: 400px;
|
||||
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* COLLAPSE
|
||||
*/
|
||||
|
||||
.chat._item:not(.open_close) {
|
||||
display: none;
|
||||
}
|
||||
#chat_input:checked ~
|
||||
.chat._box {
|
||||
#chat_box {
|
||||
gap: 5px;
|
||||
padding: 5px;
|
||||
width: 300px;
|
||||
height: 400px;
|
||||
}
|
||||
#chat_input:checked ~
|
||||
.chat._box .chat._item {
|
||||
#chat_box .chat._item {
|
||||
display: flex;
|
||||
}
|
||||
#chat_input:checked ~
|
||||
.chat._box .chat._item.open_close p {
|
||||
#chat_box .chat._item.open_close p {
|
||||
display: none;
|
||||
}
|
||||
#chat_input:checked ~
|
||||
.chat._box .chat._item.open_close {
|
||||
#chat_box .chat._item.open_close {
|
||||
width: 30px;
|
||||
height: 20px;
|
||||
padding: 0px;
|
||||
@@ -93,7 +118,7 @@ input.vanish {
|
||||
border: none;
|
||||
}
|
||||
#chat_input:checked ~
|
||||
.chat._box .chat._item.open_close::before {
|
||||
#chat_box .chat._item.open_close::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
@@ -103,4 +128,5 @@ input.vanish {
|
||||
width: 15px;
|
||||
background-color: black;
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
* BUTTONS
|
||||
*/
|
||||
|
||||
.chat._box .button {
|
||||
#chat_box button {
|
||||
display: flex;
|
||||
width: auto;
|
||||
padding: 10px;
|
||||
@@ -12,14 +12,11 @@
|
||||
border: none;
|
||||
background-color: rgb(220, 220, 220);
|
||||
}
|
||||
.chat._box .button p {
|
||||
margin: auto;
|
||||
}
|
||||
.chat._box .button:focus,
|
||||
.chat._box .button:hover {
|
||||
#chat_box button:focus,
|
||||
#chat_box button:hover {
|
||||
background-color: rgb(200, 200, 200);
|
||||
}
|
||||
.chat_box .button:active {
|
||||
.chat_box button:active {
|
||||
background-color: rgb(220, 220, 220);
|
||||
}
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
width: 100%;
|
||||
padding: 5px;
|
||||
}
|
||||
.chat._box #msg_thread div {
|
||||
#chat_box #msg_thread div {
|
||||
white-space: pre-wrap;
|
||||
margin: 5px auto;
|
||||
padding: 5px;
|
||||
@@ -21,7 +21,7 @@
|
||||
ROOM NAME
|
||||
*/
|
||||
|
||||
.chat._box #msg_box_room_name {
|
||||
#chat_box #msg_box_room_name {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
@@ -38,17 +38,17 @@
|
||||
ALL MSG
|
||||
*/
|
||||
|
||||
.chat._box #msg_thread div {
|
||||
#chat_box #msg_thread div {
|
||||
margin-left: 0px;
|
||||
background-color: rgb(210, 210, 210);
|
||||
max-width: 80%;
|
||||
}
|
||||
.chat._box #msg_thread div p.name {
|
||||
#chat_box #msg_thread div p.name {
|
||||
margin: 0px;
|
||||
font-size: 12px;
|
||||
color: rgb(100, 100, 100);
|
||||
}
|
||||
.chat._box #msg_thread div p.msg {
|
||||
#chat_box #msg_thread div p.msg {
|
||||
margin: 5px 0px;
|
||||
}
|
||||
|
||||
@@ -57,12 +57,12 @@
|
||||
MSG PERSO
|
||||
*/
|
||||
|
||||
.chat._box #msg_thread div.me {
|
||||
#chat_box #msg_thread div.me {
|
||||
margin-right: 0px;
|
||||
margin-left: auto;
|
||||
background-color: rgb(210, 110, 10);
|
||||
}
|
||||
.chat._box #msg_thread div.me p.name {
|
||||
#chat_box #msg_thread div.me p.name {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -71,14 +71,14 @@
|
||||
MSG SERVER
|
||||
*/
|
||||
|
||||
.chat._box #msg_thread div.SERVER {
|
||||
#chat_box #msg_thread div.SERVER {
|
||||
margin-left: auto;
|
||||
background-color: transparent;
|
||||
}
|
||||
.chat._box #msg_thread div.SERVER p.name {
|
||||
#chat_box #msg_thread div.SERVER p.name {
|
||||
display: none;
|
||||
}
|
||||
.chat._box #msg_thread div.SERVER p.msg {
|
||||
#chat_box #msg_thread div.SERVER p.msg {
|
||||
margin: 0px auto;
|
||||
font-size: 12px;
|
||||
color: rgb(100, 100, 100);
|
||||
|
||||
27
tests_hugo/chat_node/chat_client/style/layout_close.css
Normal file
27
tests_hugo/chat_node/chat_client/style/layout_close.css
Normal file
@@ -0,0 +1,27 @@
|
||||
|
||||
/*
|
||||
grid:
|
||||
' controls close ' auto
|
||||
' main_window main_window ' 1fr
|
||||
' msg_write msg_send ' auto
|
||||
/ 1fr auto;
|
||||
|
||||
#chat_box.close {
|
||||
grid:
|
||||
' close ' auto
|
||||
/ auto;
|
||||
}
|
||||
*/
|
||||
#chat_box.close {
|
||||
gap: 0px;
|
||||
padding: 0px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
grid:
|
||||
' chat ' auto
|
||||
/ auto;
|
||||
}
|
||||
#chat_box.close .chat_item#chat_chat {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user