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

wip layout room

Browse Source
This commit is contained in:
simplonco
2022-12-25 08:15:23 +01:00
parent 0c368d32dd
commit 7187d7dadd
10 changed files with 199 additions and 157 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

@@ -11,6 +11,7 @@
export let my_class = "";
export let layout = "";
export let new_layout = "";
function update_layout() {
layout = new_layout;
console.log(layout);
@@ -48,6 +49,7 @@
background-color: rgb(190, 190, 190);
}
/* for btn list
*/
button.list:not(:hover) {
@@ -57,6 +59,5 @@
text-align: left;
}
</style>

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

@@ -22,17 +22,11 @@
but classes starting with "_" must be added to existing class
-->
<button class="chat_item chat_chat btn" id="chat_chat" onclick="chat_layout('home')" ><p>chat</p></button>
<button class="chat_item chat_close btn" id="chat_close" onclick="chat_layout('close')" title="close" ></button>
<button class="chat_item chat_new btn" id="chat_new" onclick="chat_layout('new')" title="new" ><p>new</p></button>
<button class="chat_item chat_settings btn" id="chat_settings" onclick="chat_layout('settings')" title="settings"><p>settings</p></button>
<button class="chat_item chat_room_name btn" id="chat_room_name" onclick="chat_layout('room_set')" ><p>&lt;room_name&gt;</p></button>
<p class="chat_item chat_create" id="chat_create" >create</p>
<p class="chat_item chat_user" id="chat_user" >&lt;user_name&gt;</p>
<div class="chat_item chat_back" id="chat_back"></button>
<button class="btn back_room" onclick="chat_layout('room')" title="go back room"></button>
<button class="btn back_home" onclick="chat_layout('home')" title="go back home"></button>
<button class="btn back_new" onclick="chat_layout('new')" title="go back new"></button>
<button class="btn back_user" onclick="chat_layout('user')" title="go back user"></button>
<button class="btn back_settings" onclick="chat_layout('settings')" title="go back settings"></button>

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

@@ -11,13 +11,8 @@
let layout = "close";
/*
function update_layout(new_layout) {
last_layout = active_layout;
active_layout = new_layout;
}
layout close
layout home
layout close
layout home
layout room
layout new
layout settings
@@ -33,7 +28,10 @@
<div class={layout} id="chat_box" style="background-color: {color};">
{#if layout === "home"}
<HomeLayout bind:layout={layout} />
<HomeLayout bind:layout />
{:else if layout === "room"}
<RoomLayout bind:layout />
{:else}
<div class="grid_box">
@@ -86,22 +84,6 @@
GLOBAL STYLES
* * * * * * * * */
/* for grid_box and all childrens
*/
#chat_box :global(.grid_box) {
display: grid;
margin: 0px;
gap: 5px;
width: 100%;
height: 100%;
}
#chat_box :global(.grid_box *) {
display: flex;
flex-direction: column;
position: relative;
box-sizing: border-box;
}
/* all grid elements names
:global(#chat_box #chat ){grid-area: chat;}
:global(#chat_box #close ){grid-area: close;}
@@ -124,6 +106,22 @@
:global(#chat_box #panel_mute ){grid-area: panel_mute;}
*/
/* for grid_box and all childrens
*/
#chat_box :global(.grid_box) {
display: grid;
margin: 0px;
gap: 5px;
width: 100%;
height: 100%;
}
#chat_box :global(.grid_box *) {
display: flex;
flex-direction: column;
position: relative;
box-sizing: border-box;
}
/* all panels
*/
#chat_box :global(.chat_panel) {
@@ -138,6 +136,12 @@
}
/* * * * * * * * * *
GLOBAL UTILITIES
* * * * * * * * * */
/* show child only if it's alone
*/
#chat_box :global(.__show_if_only_child) {

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

@@ -48,10 +48,10 @@
.grid_box :global(#new ) {grid-area: new;}
.grid_box :global(#panel_home) {grid-area: panel_home;}
.grid_box {
grid:
' settings new close ' auto
' panel_home panel_home panel_home ' 1fr
/ auto 1fr auto ;
grid:
' settings new close ' auto
' panel_home panel_home panel_home ' 1fr
/ auto 1fr auto ;
}

59
srcs/requirements/svelte/api_front/src/pieces/chat/RoomLayout.svelte Normal file
View File

@@ -0,0 +1,59 @@
<script>
import Button from './Buttons.svelte';
export let layout;
</script>
<div class="grid_box">
<Button bind:layout new_layout="room_set" my_id="room_name">
&lt;room_name&gt;
</Button>
<Button bind:layout new_layout="close" my_id="close">
close
</Button>
<!-- <button class="btn back_home" onclick="chat_layout('home')" title="go back home"></button> -->
<Button bind:layout new_layout="home" my_id="back_home">
close
</Button>
</div>
<style>
/* 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(#panel_msg ) {grid-area: panel_msg;}
.grid_box :global(#send ) {grid-area: send;}
.grid_box :global(#panel_write ) {grid-area: panel_write;}
.grid_box {
grid:
' back room_name room_name close ' auto
' panel_msg panel_msg panel_msg panel_msg ' 1fr
' panel_write panel_write send send ' auto
/ auto 1fr auto auto ;
}
/* back btn
*/
#chat_box.room .chat_item.chat_back button.back_home {
display: flex;
}
/* button "<room_name>" appearance
*/
#chat_box.room button.chat_room_name {
width: auto;
background-color: transparent;
}
</style>

58
srcs/requirements/svelte/api_front/src/styles/chat/layout_close.css
View File

@@ -1,58 +0,0 @@
#chat_box.close {
gap: 0px;
padding: 0px;
width: auto;
height: auto;
grid:
' chat ' auto
/ auto ;
}
#chat_box.close .chat_item#chat_chat {
display: flex;
}
/*
* COLLAPSE
.chat._item:not(.open_close) {
display: none;
}
#chat_input:checked ~
#chat_box {
gap: 5px;
padding: 5px;
width: 300px;
height: 400px;
}
#chat_input:checked ~
#chat_box .chat._item {
display: flex;
}
#chat_input:checked ~
#chat_box .chat._item.open_close p {
display: none;
}
#chat_input:checked ~
#chat_box .chat._item.open_close {
width: 30px;
height: 20px;
padding: 0px;
justify-self: end;
background-color: transparent;
border: none;
}
#chat_input:checked ~
#chat_box .chat._item.open_close::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
height: 4px;
width: 15px;
background-color: black;
}
*/

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

@@ -1,34 +1 @@
#chat_box.room {
grid:
' back room_name room_name close ' auto
' panel_msg panel_msg panel_msg panel_msg ' 1fr
' panel_write panel_write send send ' auto
/ auto 1fr auto auto ;
}
#chat_box.room .chat_item#chat_back,
#chat_box.room .chat_item#chat_room_name,
#chat_box.room .chat_item#chat_close,
#chat_box.room .chat_item#chat_panel_msg,
#chat_box.room .chat_item#chat_send,
#chat_box.room .chat_item#chat_panel_write {
display: flex;
}
/* back btn
*/
#chat_box.room .chat_item.chat_back button.back_home {
display: flex;
}
/* button "<room_name>" appearance
*/
/* add or remove '.chat_item' to toggle the hover effect */
#chat_box.room button.chat_room_name {
width: auto;
background-color: transparent;
}