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

wip layout new

Browse Source
This commit is contained in:
simplonco
2022-12-25 18:57:25 +01:00
parent 789d2e53c5
commit 865a0cde11
10 changed files with 848 additions and 270 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
srcs/requirements/svelte/api_front/src/pieces/chat/Button.svelte
View File

@@ -36,6 +36,7 @@
- for back btn
*/
/* default config
*/
button {

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

@@ -41,32 +41,6 @@
- WRITE
--------------------------------- -->
<!-- NEW -->
<div class="chat_item chat_panel chat_panel_new" id="chat_panel_new">
<button class="chat_create_btn btn"><p>create</p></button>
<p>join room :</p>
<div id="chat_api_publics_rooms" class="chat_api chat_public_rooms list_btn">
<div class="__show_if_only_child">
<p class="__center">/ there are no public rooms yet /</p>
</div>
<!-- placeholders
------------- -->
<button class="chat_room_name btn" onclick="chat_layout('room')">
<p class="__left">join room</p>
</button>
<button class="chat_room_name btn" onclick="chat_layout('room')">
<p class="__left">one room</p>
</button>
<button class="chat_room_name btn" onclick="chat_layout('room')">
<p class="__left">another room</p>
</button>
<button class="chat_room_name btn" onclick="chat_layout('room')">
<p class="__left">one more room</p>
</button>
<!-- END placeholders -->
</div>
</div>
<!-- SETTINGS -->
<div class="chat_item chat_panel chat_panel_settings" id="chat_panel_settings">
<p>blocked users :</p>

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

@@ -1,8 +1,10 @@
<script lang="ts">
import Button from './Button.svelte';
import HomeLayout from './Layout_home.svelte';
import RoomLayout from './Layout_room.svelte';
import Button from './Button.svelte';
import NewLayout from './Layout_new.svelte';
export let color = "transparent";
@@ -26,7 +28,7 @@
/*
layout close
layout home
layout room
layout room
layout new
layout settings
layout room_set
@@ -46,6 +48,9 @@
{:else if layout === "room"}
<RoomLayout bind:layout back={layouts[1]} />
{:else if layout === "new"}
<NewLayout bind:layout back={layouts[1]} />
{:else}
<div class="grid_box">
<Button bind:layout new_layout={layouts[0]} my_class="chat">

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

@@ -1,21 +1,29 @@
<script>
import Button from './Button.svelte';
export let layout;
</script>
<div class="grid_box">
<!-- settings -->
<Button bind:layout new_layout="settings" my_class="settings dots icon">
settings
</Button>
<!-- new -->
<Button bind:layout new_layout="new" my_class="new transparent">
new
</Button>
<!-- close -->
<Button bind:layout new_layout="close" my_class="close icon">
close
</Button>
<!-- panel home -->
<div class="chat_panel panel_home">
<p class="title">list of your rooms :</p>
<div class="room_list" id="chat_api_room_list">

81
srcs/requirements/svelte/api_front/src/pieces/chat/Layout_new.svelte Normal file
View File

@@ -0,0 +1,81 @@
<script>
import Button from './Button.svelte';
export let layout = "";
export let back = "";
</script>
<div class="grid_box">
<!-- back -->
<Button bind:layout new_layout={back} my_class="back icon" my_title="go back {back}">
back
</Button>
<!-- new -->
<Button my_class="new deactivate">
new
</Button>
<!-- close -->
<Button bind:layout new_layout="close" my_class="close icon">
close
</Button>
<!-- panel_new -->
<div class="chat_panel panel_new">
<Button bind:layout new_layout="create" my_class="create">
create
</Button>
<p>join room :</p>
<div id="chat_api_publics_rooms" class="chat_api chat_public_rooms list_btn">
<div class="__show_if_only_child">
<p class="__center">/ there are no public rooms yet /</p>
</div>
<!-- placeholders
------------- -->
<button class="chat_room_name btn" onclick="chat_layout('room')">
<p class="__left">join room</p>
</button>
<button class="chat_room_name btn" onclick="chat_layout('room')">
<p class="__left">one room</p>
</button>
<button class="chat_room_name btn" onclick="chat_layout('room')">
<p class="__left">another room</p>
</button>
<button class="chat_room_name btn" onclick="chat_layout('room')">
<p class="__left">one more room</p>
</button>
<!-- END placeholders -->
</div>
</div>
</div>
<style>
/* grid layout "new"
*/
.grid_box :global(.back ) {grid-area: back;}
.grid_box :global(.new ) {grid-area: new;}
.grid_box :global(.close ) {grid-area: close;}
.grid_box :global(.panel_new) {grid-area: panel_new;}
.grid_box {
grid:
' back new close ' auto
' panel_new panel_new panel_new ' 1fr
/ auto 1fr auto ;
}
/* button "create" appearance
*/
button.create {
margin: 10px 0px;
}
</style>

18
srcs/requirements/svelte/api_front/src/pieces/chat/Layout_room.svelte
View File

@@ -1,5 +1,6 @@
<script>
import Button from './Button.svelte';
export let layout = "";
export let back = "";
@@ -23,7 +24,7 @@
close
</Button>
<!-- MSG -->
<!-- msg -->
<div class="chat_panel panel_msg">
<div class="msg_thread">
<!-- placeholders
@@ -56,7 +57,7 @@
</div>
</div>
<!-- WRITE -->
<!-- write -->
<div class="chat_panel panel_write">
<div class="text_area" id="chat_msg_write" contenteditable="true">
</div>
@@ -71,15 +72,14 @@
<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 :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

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

@@ -1,40 +0,0 @@
#chat_box.new {
grid:
' back new close ' auto
' panel_new panel_new panel_new ' 1fr
/ auto 1fr auto ;
}
#chat_box.new .chat_item#chat_back,
#chat_box.new .chat_item#chat_new,
#chat_box.new .chat_item#chat_close,
#chat_box.new .chat_item#chat_panel_new {
display: flex;
}
/* back btn
*/
#chat_box.new .chat_item.chat_back button.back_home {
display: flex;
}
/* button "new" appearance
*/
/* add or remove '.chat_item' to toggle the hover effect */
#chat_box.new button.chat_item.chat_new {
width: auto;
background-color: transparent;
pointer-events: none;
}
/* button "create" appearance
*/
#chat_box.new .chat_item button.chat_create_btn {
margin: 10px 0px;
}