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

fixed back layout when succeded multiple back

Browse Source
This commit is contained in:
simplonco
2022-12-26 10:48:21 +01:00
parent cdf3d9207a
commit 010ecfe8c5
13 changed files with 958 additions and 396 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -41,32 +41,6 @@
- WRITE
--------------------------------- -->
<!-- CREATE -->
<div class="chat_item chat_panel chat_panel_create" id="chat_panel_create">
<form>
<!-- name: -->
<label for="chat_name"><p>name :</p></label>
<input id="chat_name" required>
<!-- [ ] pubic -->
<input id="chat_public" type="radio" name="chat_create_type" checked>
<label for="chat_public" class="_radio"><p>public</p></label>
<!-- [ ] private -->
<input id="chat_private" type="radio" name="chat_create_type">
<label for="chat_private" class="_radio"><p>private</p></label>
<!-- [ ] protected -->
<input id="chat_protected" class="_check_change_next" type="radio" name="chat_create_type">
<label for="chat_protected" class="_radio"><p>protected</p></label>
<!-- [x] protected -->
<div class="__content _is_hidden">
<label for="chat_pswd"><p>choose a password :</p></label>
<input id="chat_pswd" type="password" placeholder="minimum 8 characters" minlength="8">
<p>confirm password :</p>
<input type="password">
</div>
<input type="submit" value="&#x2BA1">
</form>
</div>
<!-- USER -->
<div class="chat_item chat_panel chat_panel_user" id="chat_panel_user">
<p class="__center">user options :</p>

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

@@ -2,28 +2,33 @@
<script lang="ts">
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';
import RoomsetLayout from './Layout_room_set.svelte';
import ProtectedLayout from './Layout_protected.svelte';
import CreateLayout from './Layout_create.svelte';
export let color = "transparent";
let room = "";
let admin = false;
let layout = "close";
let layouts = ["home"];
let layouts = ["home", "home"];
// hold previous versions of layout, to go back
// hold previous version of layout, to go back
function set_layouts(layout)
{
if (layout === "close")
return;
if (layout === layouts[0])
return;
layouts = [layout, ...layouts];
if (layout === layouts[1])
layouts = [layout, "home"];
else
layouts = [layout, layouts[0]];
console.log(layouts);
}
$: set_layouts(layout);
@@ -35,7 +40,7 @@
layout new
layout settings
layout room_set
layout protected
layout protected
layout create
layout mute
layout user
@@ -63,6 +68,9 @@
{:else if layout === "protected"}
<ProtectedLayout bind:layout back={layouts[1]} />
{:else if layout === "create"}
<CreateLayout bind:layout back={layouts[1]} />
{:else}
<div class="grid_box">
<Button bind:layout new_layout={layouts[0]} my_class="chat">
@@ -173,6 +181,17 @@
}
/* all panel
*/
#chat_box :global(.panel) {
overflow-y: scroll;
}
#chat_box :global(.panel > *) {
margin-top: 10px;
margin-bottom: 10px;
}
/* * * * * * * * * * * * * * * * * * * * *
@@ -194,7 +213,8 @@
/* __center
*/
#chat_box :global(.__center) {
margin: auto;
margin-left: auto;
margin-right: auto;
}
@@ -205,20 +225,5 @@
}
/* __top
*/
#chat_box :global(.__top > *) {
margin-top: 10px;
margin-bottom: 10px;
}
/* __overflow_y_scroll
*/
#chat_box :global(.__overflow_y_scroll) {
overflow-y: scroll;
}
</style>

74
srcs/requirements/svelte/api_front/src/pieces/chat/Layout_create.svelte Normal file
View File

@@ -0,0 +1,74 @@
<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>
<!-- create -->
<Button my_class="create deactivate">
create
</Button>
<!-- close -->
<Button bind:layout new_layout="close" my_class="close icon">
close
</Button>
<!-- panel_create -->
<div class="panel panel_create">
<form>
<!-- name: -->
<label for="chat_name"><p>name :</p></label>
<input id="chat_name" required>
<!-- [ ] pubic -->
<input id="chat_public" type="radio" name="chat_create_type" checked>
<label for="chat_public" class="_radio"><p>public</p></label>
<!-- [ ] private -->
<input id="chat_private" type="radio" name="chat_create_type">
<label for="chat_private" class="_radio"><p>private</p></label>
<!-- [ ] protected -->
<input id="chat_protected" class="_check_change_next" type="radio" name="chat_create_type">
<label for="chat_protected" class="_radio"><p>protected</p></label>
<!-- [x] protected -->
<div class="__content _is_hidden">
<label for="chat_pswd"><p>choose a password :</p></label>
<input id="chat_pswd" type="password" placeholder="minimum 8 characters" minlength="8">
<p>confirm password :</p>
<input type="password">
</div>
<input type="submit" value="&#x2BA1">
</form>
</div>
</div>
<style>
/* grid layout "create"
*/
.grid_box :global(back ) {grid-area: back;}
.grid_box :global(create ) {grid-area: create;}
.grid_box :global(close ) {grid-area: close;}
.grid_box :global(panel_create) {grid-area: panel_create;}
.grid_box {
grid:
' back create close ' auto
' panel_create panel_create panel_create ' 1fr
/ auto 1fr auto ;
}
</style>

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

@@ -24,7 +24,7 @@
</Button>
<!-- panel home -->
<div class="panel_home __overflow_y_scroll __border_top __top">
<div class="panel panel_home __border_top">
<p class="title">list of your rooms :</p>
<div class="room_list">
<div class="__show_if_only_child">

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

@@ -25,7 +25,7 @@
</Button>
<!-- panel_new -->
<div class="panel_new __overflow_y_scroll __border_top __top">
<div class="panel panel_new __border_top">
<Button bind:layout new_layout="create" my_class="create">
create
</Button>

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

@@ -15,7 +15,7 @@
</Button>
<!-- room_name -->
<Button my_class="deactivate">
<Button my_class="room_name deactivate">
&lt;room_name&gt;
</Button>
@@ -25,7 +25,7 @@
</Button>
<!-- panel_protected -->
<div class="panel_protected __overflow_y_scroll __border_top __top">
<div class="panel panel_protected __border_top">
<p class="title __center">this room is protected</p>
<form>
<label for="chat_pswd"><p>password :</p></label>
@@ -39,13 +39,13 @@
<style>
/* grid layout "room_set"
/* grid layout "protected"
*/
.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_protected) {grid-area: panel_protected;}
#chat_box.protected {
.grid_box {
grid:
' back room_name close ' auto
' panel_protected panel_protected panel_protected ' 1fr
@@ -53,12 +53,6 @@
}
.title {
margin-top: 30px;
}
</style>

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

@@ -15,7 +15,7 @@
</Button>
<!-- room_name -->
<Button bind:layout new_layout="room_set" my_class="transparent">
<Button bind:layout new_layout="room_set" my_class="room_name transparent">
&lt;room_name&gt;
</Button>
@@ -25,7 +25,7 @@
</Button>
<!-- msg -->
<div class="chat_panel panel_msg">
<div class="panel panel_msg">
<div class="msg_thread">
<!-- placeholders
------------- -->
@@ -58,7 +58,7 @@
</div>
<!-- write -->
<div class="chat_panel panel_write">
<div class="panel_write">
<div class="text_area" id="chat_msg_write" contenteditable="true">
</div>
</div>
@@ -72,7 +72,7 @@
<style>
/* grid layout "home"
/* grid layout "room"
*/
.grid_box :global(.back ) {grid-area: back;}
.grid_box :global(.room_name ) {grid-area: room_name;}
@@ -101,15 +101,18 @@
bottom: 0px;
left: 0px;
width: 100%;
height: auto;
min-height: 100%;
max-height: 300px;
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
background-color: white;
border: 1px solid black;
}
:global(#chat_box) .text_area:focus {
height: auto;
min-height: 100%;
max-height: 300px;
}
:global(#chat_box) .text_area :global(*) {
display: block ruby;
}
@@ -117,16 +120,13 @@
/* msg area
*/
.panel_msg {
:global(#chat_box) .panel_msg {
flex-direction: column-reverse;
overflow: scroll;
border: 1px solid black;
}
.msg_thread {
flex-direction: column;
width: 100%;
padding: 0px 5px;
margin-bottom: 0px;
}
.chat_msg {
white-space: pre-wrap;

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

@@ -15,7 +15,7 @@
</Button>
<!-- room_name -->
<Button my_class="deactivate">
<Button my_class="room_name deactivate">
&lt;room_name&gt;
</Button>
@@ -25,7 +25,7 @@
</Button>
<!-- panel_room_set -->
<div class="panel_room_set __overflow_y_scroll __border_top __top">
<div class="panel panel_room_set __border_top">
<Button bind:layout new_layout="create" my_class="create">
leave
</Button>

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

@@ -15,7 +15,7 @@
</Button>
<!-- settings -->
<Button my_class="deactivate">
<Button my_class="room_name deactivate">
settings
</Button>
@@ -25,7 +25,7 @@
</Button>
<!-- panel_settings -->
<div class="panel_settings __overflow_y_scroll __border_top __top">
<div class="panel panel_settings __border_top">
<p>blocked users :</p>
<div class="blocked_users">
<div class="__show_if_only_child">

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

@@ -1,28 +0,0 @@
#chat_box.create {
grid:
' back create close ' auto
' panel_create panel_create panel_create ' 1fr
/ auto 1fr auto ;
}
#chat_box.create .chat_item#chat_back,
#chat_box.create .chat_item#chat_create,
#chat_box.create .chat_item#chat_close,
#chat_box.create .chat_item#chat_panel_create {
display: flex;
}
/* back btn
*/
#chat_box.create .chat_item.chat_back button.back_new {
display: flex;
}
/* title "create" appearance
*/
#chat_box.create .chat_item.chat_create {
text-align: center;
}