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

added new room pannel

Browse Source
This commit is contained in:
lenovo
2022-12-07 19:54:15 +01:00
parent 556c16e3f2
commit e65695cc5c
6 changed files with 191 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
tests_hugo/chat_node/chat_client/chat.html
View File

@@ -8,8 +8,9 @@
<body> <body>
<input type="button" class="input_outside" id="input_outside"> <input type="button" class="vanish input_outside" id="input_outside">
<input type="checkbox" id="chat_input" style="display: none;"/> <input type="checkbox" class="vanish" id="chat_input">
<input type="button" class="vanish" id="new_room_form">
<div class="chat_box"> <div class="chat_box">
@@ -25,11 +26,14 @@
</div> </div>
</div> </div>
<!-- MENU -------------- --> <!-- MENU -------------- -->
<div class="control new">
<label for="new_room_form"><p>new</p></label>
</div>
<!-- MENU
<div class="control create drop_down"> <div class="control create drop_down">
<p class="_title" tabindex=0>create</p> <p class="_title" tabindex=0>new</p>
<div class="_items" tabindex=0> <div class="_items" tabindex=0>
<label for="input_outside"><p onclick="create_room()">direct chat</p></label> <label for="input_outside"><p onclick="create_room()">direct chat</p></label>
<!-- SUBMENU ----------- -->
<div class="drop_down _push"> <div class="drop_down _push">
<p class="_title" tabindex=0>room</p> <p class="_title" tabindex=0>room</p>
<div class="_items" tabindex=0> <div class="_items" tabindex=0>
@@ -40,9 +44,10 @@
</div> </div>
</div> </div>
</div> </div>
-------------- -->
<!-- MENU -------------- --> <!-- MENU -------------- -->
<div class="control join"> <div class="control settings">
<p>join</p> <p onclick="">settings</p>
</div> </div>
</div> </div>
@@ -55,8 +60,16 @@
<div class="msg_box" id="msg_thread"> <div class="msg_box" id="msg_thread">
<!-- messages go there --> <!-- messages go there -->
</div> </div>
<!-- INFO WINDOW ------- --> <p id="msg_box_room_name">test</p>
<div class="action_board"> <!-- ACTION BOARD ------ -->
<div class="action_board" id="action_board">
<div class="action_pannel _create" id="create" tabindex=0>
<p>new room</p>
<input class="_search" type="text" onkeyup="search_room()" placeholder="type the name of a room">
<div class="_list">
</div>
<label for="input_outside" class="close_croice"></label>
</div>
</div> </div>
</div> </div>

68
tests_hugo/chat_node/chat_client/style/action_board.css
View File

@@ -1,18 +1,78 @@
.chat_box .chat_item.main_window .action_board { .chat_box .chat_item.main_window .action_board {
/*
display: none;
*/
position: absolute; position: absolute;
top: 0px; top: 0px;
left: 0px; left: 0px;
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden;
background-color: transparent;
pointer-events: none;
}
.chat_box .chat_item.main_window .action_board .action_pannel {
/*
display: none;
visibility: hidden;
*/
opacity: 0;
background-color: white; background-color: white;
pointer-events: none;
}
/* style the close croice */
label.close_croice {
position: absolute;
top: 0px;
right: 0px;
width: 30px;
height: 30px;
cursor: pointer;
}
label.close_croice::before,
label.close_croice::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 1px;
background-color: black;
}
label.close_croice::before {
transform: translate(-50%, -50%) rotate(45deg);
}
label.close_croice::after {
transform: translate(-50%, -50%) rotate(-45deg);
} }
/* * * * * * * * * * * * * * /* * * * * * * * * * * * * *
INFO WINDOW DIRECT MESSAGES
*/ */
/* show action board and _create */
input#new_room_form:focus ~ .chat_box #action_board ._create,
#action_board ._create:focus-within {
/*
display: flex;
visibility: visible;
*/
opacity: 1;
pointer-events: auto;
}
/* settings */
#action_board ._create {
height: 100%;
}
#action_board ._create p {
text-align: center;
}
#action_board ._create ._search {
position: sticky;
top: 0px;
margin: 10px;
}
#action_board ._create ._list {
border: 1px solid red;
}

20
tests_hugo/chat_node/chat_client/style/chat.css
View File

@@ -5,11 +5,17 @@
@import 'msg_controls.css'; @import 'msg_controls.css';
@import 'drop_down_menu.css'; @import 'drop_down_menu.css';
input.vanish {
opacity: 0;
position: absolute;
pointer-events: none;
}
/** /**
* GRID * GRID
*/ */
/* Hide scrollbar */ /* Hide scrollbar */
.chat_box * { .chat_box * {
-ms-overflow-style: none; /* IE and Edge */ -ms-overflow-style: none; /* IE and Edge */
@@ -21,6 +27,8 @@
/* global settings */ /* global settings */
.chat_box * { .chat_box * {
display: flex;
flex-direction: column;
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
/* Hide scrollbar for IE, Edge and Firefox */ /* Hide scrollbar for IE, Edge and Firefox */
@@ -76,22 +84,22 @@
.chat_box .chat_item:not(.open_close) { .chat_box .chat_item:not(.open_close) {
display: none; display: none;
} }
#chat_input:checked + #chat_input:checked ~
.chat_box { .chat_box {
gap: 5px; gap: 5px;
padding: 5px; padding: 5px;
width: 300px; width: 300px;
height: 400px; height: 400px;
} }
#chat_input:checked + #chat_input:checked ~
.chat_box .chat_item { .chat_box .chat_item {
display: flex; display: flex;
} }
#chat_input:checked + #chat_input:checked ~
.chat_box .chat_item.open_close p { .chat_box .chat_item.open_close p {
display: none; display: none;
} }
#chat_input:checked + #chat_input:checked ~
.chat_box .chat_item.open_close { .chat_box .chat_item.open_close {
/* /*
*/ */
@@ -102,7 +110,7 @@
background-color: transparent; background-color: transparent;
border: none; border: none;
} }
#chat_input:checked + #chat_input:checked ~
.chat_box .chat_item.open_close::before { .chat_box .chat_item.open_close::before {
--collapse_width: 20px; --collapse_width: 20px;
content: ""; content: "";

98
tests_hugo/chat_node/chat_client/style/drop_down_menu.css
View File

@@ -1,98 +0,0 @@
/* * * * * * * * * * * * * * * * * * * *
MENU APPEARENCE
*/
.drop_down,
.drop_down * {
display: flex;
flex-direction: column;
margin: auto;
position: relative;
cursor: pointer;
}
.drop_down {
z-index: 1;
}
.drop_down ._title {
padding: 5px;
}
.drop_down ._items {
position: absolute;
top: 100%;
left: 0%;
width: auto;
min-width: 100%;
background-color: white;
white-space: nowrap;
border: 1px solid blue;
}
.drop_down ._items > * {
margin: 0px;
}
.drop_down ._title {
text-align: center;
}
.drop_down label {
margin: 0px;
padding: 0px;
}
.drop_down p {
padding: 5px;
margin: 0px;
margin-left: 0px;
cursor: pointer;
}
.drop_down p._section {
color: rgb(100, 100, 100);
}
.drop_down p._section:hover,
.drop_down p._section:active {
background-color: transparent !important;
cursor: default !important;
}
.drop_down p._subsection {
padding-left: 20px;
}
/* * * * * * * * * * * * * * * * * * * *
SUB MENU APPEARENCE
*/
.drop_down._push ._title {
text-align: left;
}
.drop_down._push > ._items {
position: relative;
width: auto;
margin: 0px;
margin-left: 10px;
}
/* * * * * * * * * * * * * * * * * * * *
DROP MECHANISM
*/
input.input_outside {
opacity: 0;
position: absolute;
pointer-events: none;
}
.drop_down > ._title {
pointer-events: auto;
}
.drop_down > ._items {
display: none;
}
.drop_down:focus-within > ._title {
pointer-events: none;
}
.drop_down:focus-within > ._items {
display: flex;
}

88
tests_hugo/chat_node/chat_client/style/msg_controls.css
View File

@@ -1,23 +1,97 @@
.chat_item.controls_area { .chat_item.controls_area {
flex-direction: row;
} }
.chat_item.controls_area .control { .chat_item.controls_area .control {
margin: auto; margin: auto;
cursor: pointer; cursor: pointer;
} }
.chat_item.controls_area .control > p { .chat_item.controls_area .control p {
margin: 0px; margin: 0px;
padding: 5px; padding: 5px;
cursor: pointer;
} }
.chat_item.controls_area .control.list { .chat_item.controls_area .control label {
margin: 0px;
padding: 0px;
} }
.chat_item.controls_area .control.create {
}
.chat_item.controls_area .control.join {
}
.chat_item.controls_area .control p:hover { .chat_item.controls_area .control p:hover {
background-color: rgb(210, 210, 210); background-color: rgb(210, 210, 210);
} }
.chat_item.controls_area .control p:active { .chat_item.controls_area .control p:active {
background-color: rgb(180, 180, 180); background-color: rgb(180, 180, 180);
} }
/* * * * * * * * * * * * * * * * * * * *
MENU APPEARENCE
*/
.drop_down,
.drop_down * {
display: flex;
flex-direction: column;
margin: auto;
position: relative;
cursor: pointer;
}
.drop_down {
z-index: 1;
}
.drop_down ._title {
padding: 5px;
}
.drop_down ._items {
position: absolute;
top: 100%;
left: 0%;
width: auto;
min-width: 100%;
background-color: white;
white-space: nowrap;
border: 1px solid blue;
}
.drop_down p {
margin-left: 0px;
}
.drop_down ._items > * {
margin: 0px;
}
.drop_down ._title {
text-align: center;
}
/* * * * * * * * * * * * * * * * * * * *
SUB MENU APPEARENCE
*/
.drop_down._push ._title {
text-align: left;
}
.drop_down._push > ._items {
position: relative;
width: auto;
margin: 0px;
margin-left: 10px;
}
/* * * * * * * * * * * * * * * * * * * *
DROP MECHANISM
*/
.drop_down > ._title {
pointer-events: auto;
}
.drop_down > ._items {
display: none;
}
.drop_down:focus-within > ._title {
pointer-events: none;
}
.drop_down:focus-within > ._items {
display: flex;
}

13
tests_hugo/chat_node/chat_client/style/msg_thread.css
View File

@@ -1,21 +1,30 @@
.chat_box .chat_item.main_window { .chat_box .chat_item.main_window {
flex-direction: column-reverse; flex-direction: column-reverse;
overflow: scroll; overflow: scroll;
border: 1px solid blue; border: 1px solid blue;
} }
.chat_box .chat_item .msg_box { .chat_box .chat_item .msg_box {
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
padding: 5px; padding: 5px;
} }
.chat_box #msg_thread div { .chat_box #msg_thread div {
white-space: pre-wrap; white-space: pre-wrap;
margin: 5px auto; margin: 5px auto;
padding: 5px; padding: 5px;
border-radius: 5px; border-radius: 5px;
} }
.chat_box #msg_box_room_name {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
text-align: center;
margin: 0px;
padding: 2px 5px;
font-weight: bold;
}
/* * * * * * * * * * * * * * /* * * * * * * * * * * * * *