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

user panel ok

Browse Source
This commit is contained in:
simplonco
2022-12-26 18:18:41 +01:00
parent 7bb53b1312
commit 863679f029
9 changed files with 1610 additions and 1365 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
srcs/requirements/svelte/api_front/public/build/bundle.css
View File

@@ -25,4 +25,7 @@ header.svelte-7t4byu.svelte-7t4byu{overflow-y:hidden}.grid-container.svelte-7t4b
' panel_create panel_create panel_create ' 1fr
/ auto 1fr auto }form.svelte-1cmnkcw input[type=radio].svelte-1cmnkcw.svelte-1cmnkcw{display:none}form.svelte-1cmnkcw label._radio.svelte-1cmnkcw.svelte-1cmnkcw{margin:0px 20px 0px auto;padding-right:10px;cursor:pointer}form.svelte-1cmnkcw label._radio p.svelte-1cmnkcw.svelte-1cmnkcw{margin-top:0px;margin-bottom:0px}form.svelte-1cmnkcw label._radio.svelte-1cmnkcw.svelte-1cmnkcw::after{content:"";position:absolute;top:calc(50% - 6px);right:0px;width:12px;height:12px;border-radius:6px;border:2px solid rgb(150, 150, 150);box-sizing:border-box;cursor:pointer}form.svelte-1cmnkcw input[type=radio].svelte-1cmnkcw:checked+label._radio.svelte-1cmnkcw::after{background-color:rgb(200, 200, 200)}form.svelte-1cmnkcw input[type=submit].svelte-1cmnkcw.svelte-1cmnkcw{margin-top:20px}.grid_box.svelte-yo0any .back {grid-area:back}.grid_box.svelte-yo0any .back {grid-area:back}.grid_box.svelte-yo0any .user {grid-area:user}.grid_box.svelte-yo0any .close {grid-area:close}.grid_box.svelte-yo0any .panel_mute{grid-area:panel_mute}.grid_box.svelte-yo0any.svelte-yo0any.svelte-yo0any{grid:' back user close ' auto
' panel_mute panel_mute panel_mute ' 1fr
/ auto 1fr auto }form.svelte-yo0any input[type=checkbox].svelte-yo0any.svelte-yo0any{display:none}form.svelte-yo0any label._checkbox.svelte-yo0any.svelte-yo0any{margin:0px auto 0px 10px;padding-left:10px;cursor:pointer}form.svelte-yo0any label._checkbox.svelte-yo0any.svelte-yo0any::after{content:"";position:absolute;top:calc(50% - 6px);left:0px;width:12px;height:12px;border:2px solid rgb(150, 150, 150);box-sizing:border-box;cursor:pointer}form.svelte-yo0any input[type=checkbox].svelte-yo0any:checked+label._checkbox.svelte-yo0any::after{background-color:rgb(200, 200, 200)}form.svelte-yo0any label._select.svelte-yo0any.svelte-yo0any{flex-direction:row}form.svelte-yo0any label._select p.svelte-yo0any.svelte-yo0any{margin:0px}form.svelte-yo0any select.svelte-yo0any.svelte-yo0any{margin:auto auto auto 10px;background-color:rgb(220, 220, 220);border:none;padding:5px;cursor:pointer}form.svelte-yo0any select.svelte-yo0any.svelte-yo0any:hover{background-color:rgb(200, 200, 200)}form.svelte-yo0any input[type=submit].svelte-yo0any.svelte-yo0any{margin-top:20px}
/ auto 1fr auto }form.svelte-yo0any input[type=checkbox].svelte-yo0any.svelte-yo0any{display:none}form.svelte-yo0any label._checkbox.svelte-yo0any.svelte-yo0any{margin:0px auto 0px 10px;padding-left:10px;cursor:pointer}form.svelte-yo0any label._checkbox.svelte-yo0any.svelte-yo0any::after{content:"";position:absolute;top:calc(50% - 6px);left:0px;width:12px;height:12px;border:2px solid rgb(150, 150, 150);box-sizing:border-box;cursor:pointer}form.svelte-yo0any input[type=checkbox].svelte-yo0any:checked+label._checkbox.svelte-yo0any::after{background-color:rgb(200, 200, 200)}form.svelte-yo0any label._select.svelte-yo0any.svelte-yo0any{flex-direction:row}form.svelte-yo0any label._select p.svelte-yo0any.svelte-yo0any{margin:0px}form.svelte-yo0any select.svelte-yo0any.svelte-yo0any{margin:auto auto auto 10px;background-color:rgb(220, 220, 220);border:none;padding:5px;cursor:pointer}form.svelte-yo0any select.svelte-yo0any.svelte-yo0any:hover{background-color:rgb(200, 200, 200)}form.svelte-yo0any input[type=submit].svelte-yo0any.svelte-yo0any{margin-top:20px}.grid_box.svelte-1fj8iha .back {grid-area:back}.grid_box.svelte-1fj8iha .user {grid-area:user}.grid_box.svelte-1fj8iha .close {grid-area:close}.grid_box.svelte-1fj8iha .room_name {grid-area:room_name}.grid_box.svelte-1fj8iha .panel_user{grid-area:panel_user}.grid_box.svelte-1fj8iha{grid:' back user close ' auto
' room_name room_name room_name ' auto
' panel_user panel_user panel_user ' 1fr
/ auto 1fr auto }.panel_user.svelte-1fj8iha{margin-top:-5px}

2698
srcs/requirements/svelte/api_front/public/build/bundle.js
View File

File diff suppressed because it is too large Load Diff

2
srcs/requirements/svelte/api_front/public/build/bundle.js.map
View File

File diff suppressed because one or more lines are too long

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

@@ -41,26 +41,6 @@
- WRITE
--------------------------------- -->
<!-- USER -->
<div class="chat_item chat_panel chat_panel_user" id="chat_panel_user">
<p class="__center">user options :</p>
<div class="chat_user_btn_wrapper">
<button class="chat_profile_btn btn"><p>view profile</p></button>
<button class="chat_game_btn btn"><p>game invitation</p></button>
<button class="chat_block_btn btn">
<p id="chat_user_block">block</p>
<p id="chat_user_unblock">unblock</p>
</button>
<div id="chat_user_admin">
<button class="chat_admin_btn btn"><p>make admin</p></button>
<button class="chat_mute_btn btn" id="chat_mute_btn">
<p id="chat_user_mute">mute</p>
<p id="chat_user_unmute">unmute</p>
</button>
</div>
</div>
</div>
</div>

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

@@ -11,6 +11,7 @@
import ProtectedLayout from './Layout_protected.svelte';
import CreateLayout from './Layout_create.svelte';
import MuteLayout from './Layout_mute.svelte';
import UserLayout from './Layout_user.svelte';
export let color = "transparent";
@@ -34,19 +35,6 @@
}
$: set_layouts(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="{layout} chat_box" style="background-color: {color};">
@@ -75,6 +63,9 @@
{:else if layout === "mute"}
<MuteLayout bind:layout back={layouts[1]} />
{:else if layout === "user"}
<UserLayout bind:layout back={layouts[1]} />
{:else}
<div class="grid_box">
<Button bind:layout new_layout={layouts[0]} my_class="chat">
@@ -84,8 +75,32 @@
{/if}
</div>
<!-- TEMP for test -->
<div style="display: flex; flex-direction: column; font-size: 12px; position: fixed; top: 20px; left: 20px; background-color: white;">
<p>temp, for testing :</p>
<button on:click={function(){layout = "close" }}>close</button>
<button on:click={function(){layout = "home" }}>home</button>
<button on:click={function(){layout = "room" }}>room</button>
<button on:click={function(){layout = "new" }}>new</button>
<button on:click={function(){layout = "settings" }}>settings</button>
<button on:click={function(){layout = "room_set" }}>room_set</button>
<button on:click={function(){layout = "protected"}}>protected</button>
<button on:click={function(){layout = "create" }}>create</button>
<button on:click={function(){layout = "mute" }}>mute</button>
<button on:click={function(){
layouts = ["settings", "settings"];
layout = "user";
}}>user from settings</button>
<button on:click={function(){
layouts = ["room_set", "room_set"];
layout = "user";
}}>user from room_set</button>
</div>
<!-- END TEMP for test -->
<style>
/* chat_box and default style

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

@@ -47,18 +47,6 @@
------------- -->
<!-- END placeholders -->
</div>
<!-- TEMP for test -->
<Button bind:layout new_layout="close" >close</Button>
<Button bind:layout new_layout="home" >home</Button>
<Button bind:layout new_layout="room" >room</Button>
<Button bind:layout new_layout="new" >new</Button>
<Button bind:layout new_layout="settings" >settings</Button>
<Button bind:layout new_layout="room_set" >room_set</Button>
<Button bind:layout new_layout="protected">protected</Button>
<Button bind:layout new_layout="create" >create</Button>
<Button bind:layout new_layout="mute" >mute</Button>
<Button bind:layout new_layout="user" >user</Button>
</div>
</div>

91
srcs/requirements/svelte/api_front/src/pieces/chat/Layout_user.svelte Normal file
View File

@@ -0,0 +1,91 @@
<script>
import Button from './Chat_button.svelte';
export let layout = "";
export let back = "";
let mute = "mute";
let block = "block";
</script>
<div class="grid_box">
<!-- back -->
<Button bind:layout new_layout={back} my_class="back icon" my_title="go back {back}">
back
</Button>
<!-- user -->
<Button my_class="user deactivate">
&lt;user&gt;
</Button>
<!-- close -->
<Button bind:layout new_layout="close" my_class="close icon">
close
</Button>
<!-- room_name -->
{#if back === "room_set"}
<Button my_class="room_name deactivate __border_top">
&lt;room_name&gt;
</Button>
{/if}
<!-- panel_user -->
<div class="panel panel_user __border_top">
<p class="__center">user options :</p>
<Button>
view profile
</Button>
<Button>
game invitation
</Button>
<Button>
{block}
</Button>
{#if back === "room_set"}
<Button>
make admin
</Button>
<Button>
{mute}
</Button>
{/if}
</div>
</div>
<style>
/* grid layout "user"
*/
.grid_box :global(.back ) {grid-area: back;}
.grid_box :global(.user ) {grid-area: user;}
.grid_box :global(.close ) {grid-area: close;}
.grid_box :global(.room_name ) {grid-area: room_name;}
.grid_box :global(.panel_user) {grid-area: panel_user;}
.grid_box {
grid:
' back user close ' auto
' room_name room_name room_name ' auto
' panel_user panel_user panel_user ' 1fr
/ auto 1fr auto ;
}
/* for line height
*/
.panel_user {
margin-top: -5px;
}
</style>

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

@@ -1,26 +0,0 @@
/* submit button
https://www.fileformat.info/info/unicode/category/So/list.htm
U+21AA RIGHTWARDS ARROW WITH HOOK ↪
U+21B3 DOWNWARDS ARROW WITH TIP RIGHTWARDS ↳
U+2BA1 DOWNWARDS TRIANGLE-HEADED ARROW WITH LONG TIP RIGHTWARDS ⮡
U+2BB1 RIBBON ARROW DOWN RIGHT ⮱
U+2BA9 BLACK CURVED DOWNWARDS AND RIGHTWARDS ARROW ⮩
*/
#chat_box .chat_item form input[type=submit] {
padding: 0px 10px;
border: none;
margin: 10px 0px 0px auto;
cursor: pointer;
background-color: rgb(220, 220, 220);
}
#chat_box .chat_item form input[type=submit]:hover {
background-color: rgb(200, 200, 200);
}

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

@@ -1,80 +0,0 @@
#chat_box.user {
grid:
' back user close ' auto
' room_name room_name room_name ' auto
' panel_user panel_user panel_user ' 1fr
/ auto 1fr auto ;
}
#chat_box.user .chat_item#chat_back,
#chat_box.user .chat_item#chat_user,
#chat_box.user .chat_item#chat_close,
#chat_box.user .chat_item#chat_panel_user {
display: flex;
}
/* title "user" appearance
*/
#chat_box.user .chat_item.chat_user {
text-align: center;
}
/* for line height
*/
#chat_box.user .chat_item.chat_panel_user {
margin-top: -5px;
}
/* room_name appearance
*/
#chat_box.user button.chat_item#chat_room_name {
background-color: transparent;
border-top: 1px solid black;
}
/* back btn
*/
#chat_box.user .chat_item.chat_back button.back_home {display: flex;}
/* from settings */
#chat_box._settings .chat_item.chat_back button.btn {display: none;}
#chat_box._settings .chat_item.chat_back button.back_settings {display: flex;}
/* from room settings */
#chat_box._room_set .chat_item.chat_back button.btn {display: none;}
#chat_box._room_set .chat_item.chat_back button.back_room_set {display: flex;}
/* buttons appearance
*/
#chat_box.user .chat_item.chat_panel_user .chat_user_btn_wrapper {
margin: 0px auto;
}
#chat_box.user .chat_item.chat_panel_user button {
margin: 10px;
}
#chat_box.user #chat_user_admin {
margin: 0px;
}
/* toggle buttons according to chat_box class
*/
/* block/unblock */
#chat_box.user #chat_user_unblock {display: none;}
#chat_box.user._blocked #chat_user_block {display: none;}
#chat_box.user._blocked #chat_user_unblock {display: flex;}
/* admin if from room */
#chat_box.user #chat_user_admin {display: none;}
#chat_box.user._room_set._admin #chat_user_admin {display: flex;}
/* room_name if from room */
#chat_box.user #chat_room_name {display: none;}
#chat_box.user._room_set #chat_room_name {display: flex;}
/* mute/unmute */
#chat_box.user #chat_user_unmute {display: none;}
#chat_box.user._muted #chat_user_mute {display: none;}
#chat_box.user._muted #chat_user_unmute {display: flex;}