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>
<input type="button" class="input_outside" id="input_outside">
<input type="checkbox" id="chat_input" style="display: none;"/>
<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">
<div class="chat_box">
@@ -25,11 +26,14 @@
</div>
</div>
<!-- MENU -------------- -->
<div class="control new">
<label for="new_room_form"><p>new</p></label>
</div>
<!-- MENU
<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>
<label for="input_outside"><p onclick="create_room()">direct chat</p></label>
<!-- SUBMENU ----------- -->
<div class="drop_down _push">
<p class="_title" tabindex=0>room</p>
<div class="_items" tabindex=0>
@@ -40,9 +44,10 @@
</div>
</div>
</div>
-------------- -->
<!-- MENU -------------- -->
<div class="control join">
<p>join</p>
<div class="control settings">
<p onclick="">settings</p>
</div>
</div>
@@ -55,8 +60,16 @@
<div class="msg_box" id="msg_thread">
<!-- messages go there -->
</div>
<!-- INFO WINDOW ------- -->
<div class="action_board">
<p id="msg_box_room_name">test</p>
<!-- 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>

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 {
/*
display: none;
*/
position: absolute;
top: 0px;
left: 0px;
width: 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;
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 'drop_down_menu.css';
input.vanish {
opacity: 0;
position: absolute;
pointer-events: none;
}
/**
* GRID
*/
/* Hide scrollbar */
.chat_box * {
-ms-overflow-style: none; /* IE and Edge */
@@ -21,6 +27,8 @@
/* global settings */
.chat_box * {
display: flex;
flex-direction: column;
position: relative;
box-sizing: border-box;
/* Hide scrollbar for IE, Edge and Firefox */
@@ -76,22 +84,22 @@
.chat_box .chat_item:not(.open_close) {
display: none;
}
#chat_input:checked +
#chat_input:checked ~
.chat_box {
gap: 5px;
padding: 5px;
width: 300px;
height: 400px;
}
#chat_input:checked +
#chat_input:checked ~
.chat_box .chat_item {
display: flex;
}
#chat_input:checked +
#chat_input:checked ~
.chat_box .chat_item.open_close p {
display: none;
}
#chat_input:checked +
#chat_input:checked ~
.chat_box .chat_item.open_close {
/*
*/
@@ -102,7 +110,7 @@
background-color: transparent;
border: none;
}
#chat_input:checked +
#chat_input:checked ~
.chat_box .chat_item.open_close::before {
--collapse_width: 20px;
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 {
flex-direction: row;
}
.chat_item.controls_area .control {
margin: auto;
cursor: pointer;
}
.chat_item.controls_area .control > p {
.chat_item.controls_area .control p {
margin: 0px;
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 {
background-color: rgb(210, 210, 210);
}
.chat_item.controls_area .control p:active {
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 {
flex-direction: column-reverse;
overflow: scroll;
border: 1px solid blue;
}
.chat_box .chat_item .msg_box {
flex-direction: column;
width: 100%;
padding: 5px;
}
.chat_box #msg_thread div {
white-space: pre-wrap;
margin: 5px auto;
padding: 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;
}
/* * * * * * * * * * * * * *