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

panel home ok

Browse Source
This commit is contained in:
simplonco
2022-12-25 01:10:27 +01:00
parent 4f0d1be6e3
commit 0c368d32dd
8 changed files with 137 additions and 356 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
srcs/requirements/svelte/api_front/src/pieces/chat/Buttons.svelte
View File

@@ -53,6 +53,9 @@
button.list:not(:hover) {
background-color: rgb(240, 240, 240);
}
button.list p {
text-align: left;
}
</style>

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

@@ -37,7 +37,7 @@
{:else}
<div class="grid_box">
<Button bind:layout new_layout="home" my_class="chat_item" my_id="chat_chat">
<Button bind:layout new_layout="home" my_id="chat">
chat
</Button>
</div>
@@ -67,7 +67,7 @@
/* style if chat_box is closed
*/
#chat_box .chat_item#chat_chat {grid-area: chat;}
#chat_box #chat {grid-area: chat;}
#chat_box.close .grid_box {
gap: 0px;
grid:
@@ -103,25 +103,25 @@
}
/* all grid elements names
:global(#chat_box .chat_item#chat_chat ){grid-area: chat;}
:global(#chat_box .chat_item#chat_close ){grid-area: close;}
:global(#chat_box .chat_item#chat_new ){grid-area: new;}
:global(#chat_box .chat_item#chat_settings ){grid-area: settings;}
:global(#chat_box .chat_item#chat_room_name ){grid-area: room_name;}
:global(#chat_box .chat_item#chat_send ){grid-area: send;}
:global(#chat_box .chat_item#chat_create ){grid-area: create;}
:global(#chat_box .chat_item#chat_user ){grid-area: user;}
:global(#chat_box .chat_item#chat_back ){grid-area: back;}
:global(#chat_box .chat_item#chat_panel_home ){grid-area: panel_home;}
:global(#chat_box .chat_item#chat_panel_new ){grid-area: panel_new;}
:global(#chat_box .chat_item#chat_panel_msg ){grid-area: panel_msg;}
:global(#chat_box .chat_item#chat_panel_write ){grid-area: panel_write;}
:global(#chat_box .chat_item#chat_panel_settings ){grid-area: panel_settings;}
:global(#chat_box .chat_item#chat_panel_room_set ){grid-area: panel_room_set;}
:global(#chat_box .chat_item#chat_panel_protected ){grid-area: panel_protected;}
:global(#chat_box .chat_item#chat_panel_create ){grid-area: panel_create;}
:global(#chat_box .chat_item#chat_panel_user ){grid-area: panel_user;}
:global(#chat_box .chat_item#chat_panel_mute ){grid-area: panel_mute;}
: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 #create ){grid-area: create;}
:global(#chat_box #user ){grid-area: user;}
: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_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;}
:global(#chat_box #panel_create ){grid-area: panel_create;}
:global(#chat_box #panel_user ){grid-area: panel_user;}
:global(#chat_box #panel_mute ){grid-area: panel_mute;}
*/
/* all panels
@@ -137,5 +137,16 @@
font-size: 15px;
}
/* show child only if it's alone
*/
#chat_box :global(.__show_if_only_child) {
display: none;
}
#chat_box :global(.__show_if_only_child:only-child) {
display: flex;
color: rgb(100, 100, 100);
}
</style>

83
srcs/requirements/svelte/api_front/src/pieces/chat/Layout_home.svelte
View File

@@ -6,24 +6,23 @@
<div class="grid_box">
<Button bind:layout new_layout="settings" my_class="chat_item" my_id="chat_settings">
<Button bind:layout new_layout="settings" my_id="settings">
settings
</Button>
<Button bind:layout new_layout="new" my_class="chat_item" my_id="chat_new">
<Button bind:layout new_layout="new" my_id="new">
new
</Button>
<Button bind:layout new_layout="close" my_class="chat_item" my_id="chat_close">
<Button bind:layout new_layout="close" my_id="close">
close
</Button>
<div class="chat_item chat_panel" id="chat_panel_home">
<p class="__center">list of your rooms :</p>
<div id="chat_api_room_list" class="chat_api list_btn">
<div class="chat_room_name __show_if_only_child">
<p class="__center">/ you have no chat room yet /</p>
<div class="chat_panel" id="panel_home">
<p class="title">list of your rooms :</p>
<div class="room_list" id="chat_api_room_list">
<div class="__show_if_only_child">
<p class="no_chat">/ you have no chat room yet /</p>
</div>
<!-- placeholders
------------- -->
<Button bind:layout new_layout="room" my_class="list">
a room
</Button>
@@ -33,6 +32,7 @@
<Button bind:layout new_layout="room" my_class="list">
placeholder
</Button>
------------- -->
<!-- END placeholders -->
</div>
</div>
@@ -43,10 +43,10 @@
/* grid layout "home"
*/
.grid_box :global(.chat_item#chat_settings ) {grid-area: settings;}
.grid_box :global(.chat_item#chat_close ) {grid-area: close;}
.grid_box :global(.chat_item#chat_new ) {grid-area: new;}
.grid_box :global(.chat_item#chat_panel_home) {grid-area: panel_home;}
.grid_box :global(#settings ) {grid-area: settings;}
.grid_box :global(#close ) {grid-area: close;}
.grid_box :global(#new ) {grid-area: new;}
.grid_box :global(#panel_home) {grid-area: panel_home;}
.grid_box {
grid:
' settings new close ' auto
@@ -54,26 +54,20 @@
/ auto 1fr auto ;
}
/* button "new"
*/
.grid_box :global(button#chat_new:not(:hover)) {
background-color: transparent;
}
/* button "settings" as 3 dots
*/
.grid_box :global(button#chat_settings p) {
.grid_box :global(button#settings p) {
display: none;
}
:global(#chat_box) .grid_box :global(button#chat_settings) {
.grid_box :global(button#settings) {
width: 30px;
height: 100%;
}
.grid_box :global(button#chat_settings:not(:hover)) {
.grid_box :global(button#settings:not(:hover)) {
background-color: transparent;
}
.grid_box :global(button#chat_settings::after) {
.grid_box :global(button#settings::after) {
content: '\2807';
font-size: 20px;
position: absolute;
@@ -87,11 +81,46 @@
}
/* panel home
#panel_home > * {
margin: 0px;
}
/* button "new"
*/
.grid_box :global(button#new:not(:hover)) {
background-color: transparent;
}
/* button "close"
*/
.grid_box :global(button#close p) {
display: none;
}
.grid_box :global(button#close) {
width: 30px;
height: 100%;
padding: 0px;
background-color: transparent;
}
.grid_box :global(button#close::before) {
content: "";
position: absolute;
top: calc(50% - 1px);
left: 5px;
width: 20px;
height: 2px;
background-color: black;
}
/* panel home
*/
#panel_home {
border-top: 1px solid black;
}
#panel_home p.title {
margin: 10px auto 0px auto;
}
#panel_home p.no_chat {
margin: 0px auto;
}
</style>

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

@@ -11,17 +11,6 @@
}
/* show child only if it's alone
*/
#chat_box .__show_if_only_child {
display: none;
}
#chat_box .__show_if_only_child:only-child {
display: flex;
color: rgb(100, 100, 100);
}
/* separation line under controls
*/
#chat_box .chat_item.chat_panel {

20
srcs/requirements/svelte/api_front/src/styles/chat/chat_close.css
View File

@@ -1,20 +0,0 @@
#chat_box .chat_item#chat_close {
width: 30px;
}
/* add or remove '.chat_item' to toggle the hover effect */
#chat_box button.chat_item.chat_close {
width: 100%;
height: 100%;
padding: 0px;
background-color: transparent;
}
#chat_close::before {
content: "";
position: absolute;
top: calc(50% - 1px);
left: 5px;
width: 20px;
height: 2px;
background-color: black;
}