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

buttons and grid are working in chat with svelte method

Browse Source
This commit is contained in:
simplonco
2022-12-24 19:23:26 +01:00
parent bcea4a181d
commit aea7d5a4fc
13 changed files with 574 additions and 235 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
srcs/requirements/svelte/api_front/src/pieces/chat/Buttons.svelte Normal file
View File

@@ -0,0 +1,56 @@
<!--
<Button bind:layout={layout} new_layout="" my_class="" my_id"">
value
</Button>
-->
<script lang="ts">
export let my_id = "";
export let my_class = "";
export let layout = "";
export let new_layout = "";
function update_layout() {
layout = new_layout;
console.log(layout);
}
</script>
<button class={my_class} id={my_id} on:click={update_layout}>
<p><slot></slot></p>
</button>
<style>
button {
display: flex;
width: auto;
cursor: pointer;
outline: none;
border: none;
background-color: rgb(220, 220, 220);
}
button p {
width: 100%;
text-align: center;
}
button:hover {
background-color: rgb(200, 200, 200);
}
button:active {
background-color: rgb(190, 190, 190);
}
/* for btn list
add or remove '.btn' to toggle the hover effect
.list_btn button {
margin: 0px;
background-color: transparent;
}
.list_btn {
background-color: rgb(240, 240, 240);
}
*/
</style>

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

@@ -1,35 +1,124 @@
<script>
<script lang="ts">
import HomeLayout from './Layout_home.svelte';
import Button from './Buttons.svelte';
let active_layout = "home";
let room = "";
let admin = false;
let last_layout = "";
let layout = "close";
/*
function update_layout(new_layout) {
last_layout = active_layout;
active_layout = new_layout;
}
/*
layout close
layout home
layout room
layout new
layout settings
layout room_set
layout protected
layout create
layout mute
layout user
*/
</script>
<div class={active_layout} id="chat_box">
{#if active_layout === "home"}
<HomeLayout bind:layout={active_layout} />
<div class={layout} id="chat_box">
{#if layout === "home"}
<HomeLayout bind:layout={layout} />
{:else}
<!-- https://stackoverflow.com/questions/58262380/how-to-pass-parameters-to-onclick-in-svelte -->
<button on:click={function(){update_layout('home')}}>chat</button>
<Button bind:layout new_layout="home" my_class="chat_item" my_id="#chat_chat">
chat
</Button>
{/if}
</div>
<style>
/* chat_box default style
*/
#chat_box {
display: grid;
position: fixed;
bottom: 20px;
right: 20px;
height: 50px;
width: 50px;
border: 1px solid blue;
gap: 5px;
padding: 5px;
width: 300px;
height: 400px;
border: 1px solid black;
}
/* style if chat_box is closed
*/
#chat_box.close {
gap: 0px;
padding: 0px;
width: auto;
height: auto;
grid:
' chat ' auto
/ auto ;
}
/* * * * * * * * *
GLOBAL STYLES
* * * * * * * * */
/* for all childrens of chat_box
*/
:global(#chat_box *) {
display: flex;
flex-direction: column;
position: relative;
box-sizing: border-box;
padding: 0px;
margin: auto;
}
:global(#chat_box .chat_item) {
display: flex;
width: 100%;
height: 100%;
}
/* 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;}
/* all p
*/
:global(#chat_box p) {
padding: 10px;
font-size: 15px;
}
</style>

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

@@ -1,17 +1,13 @@
<script>
import Button from './Buttons.svelte';
export let layout;
function update_layout(new_layout) {
layout = new_layout;
}
</script>
<button on:click={function(){update_layout('close')}}>home</button>
<Button bind:layout new_layout="close" my_class="chat_item" my_id="#chat_close">
home
</Button>
<style>
#chat_box.home {
height: 500px;
width: 500px;
}
</style>

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

@@ -1,79 +0,0 @@
@import 'chat__global.css';
@import 'layout_close.css';
@import 'layout_home.css';
@import 'layout_room.css';
@import 'layout_new.css';
@import 'layout_settings.css';
@import 'layout_room_set.css';
@import 'layout_protected.css';
@import 'layout_create.css';
@import 'layout_user.css';
@import 'layout_mute.css';
@import 'chat_panels.css';
@import 'chat_buttons.css';
@import 'chat_back.css';
@import 'chat_close.css';
@import 'chat_write.css';
@import 'chat_msg.css';
@import 'chat_blocked.css';
@import 'chat_form.css';
/*
GRID
*/
#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;
*/
width: 100%;
height: 100%;
}
.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 { grid-area: user;}
.chat_item#chat_back { grid-area: back;}
.chat_item#chat_panel_home { grid-area: panel_home;}
.chat_item#chat_panel_new { grid-area: panel_new;}
.chat_item#chat_panel_msg { grid-area: panel_msg;}
.chat_item#chat_panel_write { grid-area: panel_write;}
.chat_item#chat_panel_settings { grid-area: panel_settings;}
.chat_item#chat_panel_room_set { grid-area: panel_room_set;}
.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 {
display: grid;
position: fixed;
bottom: 20px;
right: 20px;
gap: 5px;
padding: 5px;
width: 300px;
height: 400px;
border: 1px solid black;
}

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

@@ -11,15 +11,6 @@
}
/* p in chat_box
*/
#chat_box p {
padding: 10px;
font-size: 15px;
font-family: Cantarell;
}
/* show child only if it's alone
*/
#chat_box .__show_if_only_child {

1
srcs/requirements/svelte/api_front/src/styles/chat/chat_back.css
View File

@@ -1 +0,0 @@

31
srcs/requirements/svelte/api_front/src/styles/chat/chat_buttons.css
View File

@@ -1,36 +1,5 @@
#chat_box button {
display: flex;
width: auto;
cursor: pointer;
outline: none;
border: none;
background-color: rgb(220, 220, 220);
}
#chat_box button p {
width: 100%;
text-align: center;
}
#chat_box button.chat_item:hover,
#chat_box .chat_item button:hover {
background-color: rgb(200, 200, 200);
}
#chat_box button.chat_item:active,
#chat_box .chat_item button:active {
background-color: rgb(190, 190, 190);
}
/* BTN LIST
add or remove '.btn' to toggle the hover effect
*/
#chat_box .list_btn button {
margin: 0px;
background-color: transparent;
}
#chat_box .list_btn {
background-color: rgb(240, 240, 240);
}
/* BACK