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

wip layout settings

Browse Source
This commit is contained in:
simplonco
2022-12-25 19:49:47 +01:00
parent 865a0cde11
commit 6e0d7adeed
11 changed files with 1046 additions and 352 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -41,28 +41,6 @@
- WRITE
--------------------------------- -->
<!-- SETTINGS -->
<div class="chat_item chat_panel chat_panel_settings" id="chat_panel_settings">
<p>blocked users :</p>
<div id="chat_api_blocked_users" class="chat_api chat_blocked_users list_btn">
<!-- placeholders
------------- -->
<button class="chat_user btn" onclick="chat_layout('user _settings')">
<p class="__left blocked">user 1</p>
</button>
<button class="chat_user btn" onclick="chat_layout('user _settings')">
<p class="__left blocked">user 2</p>
</button>
<button class="chat_user btn" onclick="chat_layout('user _settings')">
<p class="__left blocked">user 3</p>
</button>
<button class="chat_user btn" onclick="chat_layout('user _settings')">
<p class="__left blocked">user 4</p>
</button>
<!-- END placeholders -->
</div>
</div>
<!-- ROOM SET -->
<div class="chat_item chat_panel chat_panel_room_set" id="chat_panel_room_set">
<button class="chat_leave_btn btn"><p>leave</p></button>

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

@@ -1,10 +1,11 @@
<script lang="ts">
import Button from './Button.svelte';
import HomeLayout from './Layout_home.svelte';
import RoomLayout from './Layout_room.svelte';
import NewLayout from './Layout_new.svelte';
import Button from './Chat_button.svelte';
import HomeLayout from './Layout_home.svelte';
import RoomLayout from './Layout_room.svelte';
import NewLayout from './Layout_new.svelte';
import SettingsLayout from './Layout_settings.svelte';
export let color = "transparent";
@@ -29,7 +30,7 @@
layout close
layout home
layout room
layout new
layout new
layout settings
layout room_set
layout protected
@@ -51,6 +52,9 @@
{:else if layout === "new"}
<NewLayout bind:layout back={layouts[1]} />
{:else if layout === "settings"}
<SettingsLayout bind:layout back={layouts[1]} />
{:else}
<div class="grid_box">
<Button bind:layout new_layout={layouts[0]} my_class="chat">

0
srcs/requirements/svelte/api_front/src/pieces/chat/Button.svelte → srcs/requirements/svelte/api_front/src/pieces/chat/Chat_button.svelte
View File

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

@@ -1,7 +1,7 @@
<script>
import Button from './Button.svelte';
import Button from './Chat_button.svelte';
export let layout;
</script>
@@ -26,7 +26,7 @@
<!-- 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">
<div class="room_list">
<div class="__show_if_only_child">
<p class="no_chat">/ you have no chat room yet /</p>
</div>

60
srcs/requirements/svelte/api_front/src/pieces/chat/Layout_new.svelte
View File

@@ -1,7 +1,7 @@
<script>
import Button from './Button.svelte';
import Button from './Chat_button.svelte';
export let layout = "";
export let back = "";
@@ -30,29 +30,43 @@
create
</Button>
<p>join room :</p>
<div id="chat_api_publics_rooms" class="chat_api chat_public_rooms list_btn">
<div class="public_rooms">
<div class="__show_if_only_child">
<p class="__center">/ there are no public rooms yet /</p>
<p class="no_room">/ there are no public rooms yet /</p>
</div>
<!-- placeholders
<Button bind:layout new_layout="room" my_class="list">
placeholder
</Button>
<Button bind:layout new_layout="room" my_class="list">
join room
</Button>
<Button bind:layout new_layout="room" my_class="list">
one room
</Button>
<Button bind:layout new_layout="room" my_class="list">
another room
</Button>
<Button bind:layout new_layout="room" my_class="list">
one room
</Button>
<Button bind:layout new_layout="room" my_class="list">
another room
</Button>
<Button bind:layout new_layout="room" my_class="list">
one room
</Button>
<Button bind:layout new_layout="room" my_class="list">
another room
</Button>
<Button bind:layout new_layout="room" my_class="list">
one more room
</Button>
------------- -->
<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>
@@ -71,6 +85,20 @@
}
/* chat_panel
*/
.panel_new {
border-top: 1px solid black;
}
:global(#chat_box) .panel_new > :global(*) {
margin-top: 5px;
margin-bottom: 5px;
}
.panel_new p.no_room {
margin: 0px auto;
}
/* button "create" appearance
*/
button.create {

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

@@ -1,7 +1,7 @@
<script>
import Button from './Button.svelte';
import Button from './Chat_button.svelte';
export let layout = "";
export let back = "";

70
srcs/requirements/svelte/api_front/src/pieces/chat/Layout_settings.svelte Normal file
View File

@@ -0,0 +1,70 @@
<script>
import Button from './Chat_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>
<!-- settings -->
<Button my_class="new deactivate">
settings
</Button>
<!-- close -->
<Button bind:layout new_layout="close" my_class="close icon">
close
</Button>
<!-- panel_settings -->
<div class="chat_panel panel_settings">
<p>blocked users :</p>
<div class="blocked_users">
<!-- placeholders
------------- -->
<Button bind:layout new_layout="user" my_class="list blocked">
user 1
</Button>
<Button bind:layout new_layout="user" my_class="list blocked">
user 2
</Button>
<Button bind:layout new_layout="user" my_class="list blocked">
user 3
</Button>
<Button bind:layout new_layout="user" my_class="list blocked">
user 4
</Button>
<!-- END placeholders -->
</div>
</div>
</div>
<style>
/* grid layout "settings"
*/
.grid_box :global(.back ) {grid-area: back;}
.grid_box :global(.settings ) {grid-area: settings;}
.grid_box :global(.close ) {grid-area: close;}
.grid_box :global(.panel_settings) {grid-area: panel_settings;}
.grid_box {
grid:
' back settings close ' auto
' panel_settings panel_settings panel_settings ' 1fr
/ auto 1fr auto ;
}
</style>

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

@@ -1,32 +0,0 @@
#chat_box.settings {
grid:
' back settings close ' auto
' panel_settings panel_settings panel_settings ' 1fr
/ auto 1fr auto ;
}
#chat_box.settings .chat_item#chat_back,
#chat_box.settings .chat_item#chat_settings,
#chat_box.settings .chat_item#chat_close,
#chat_box.settings .chat_item#chat_panel_settings {
display: flex;
}
/* back btn
*/
#chat_box.settings .chat_item.chat_back button.back_home {
display: flex;
}
/* button "settings" appearance
*/
/* add or remove '.chat_item' to toggle the hover effect */
#chat_box.settings button.chat_item.chat_settings {
width: auto;
background-color: transparent;
pointer-events: none;
}