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

layout settings and room_set ok

Browse Source
This commit is contained in:
simplonco
2022-12-25 22:07:07 +01:00
parent 6e0d7adeed
commit ebf5d72116
12 changed files with 1342 additions and 660 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
--------------------------------- -->
<!-- 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>
<p>room users :</p>
<div id="chat_api_room_users" class="chat_api chat_room_users list_btn">
<div class="chat_public_rooms __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('user _room_set')">
<p class="__left">user 1</p>
</button>
<button class="chat_room_name btn" onclick="chat_layout('user _room_set')">
<p class="__left blocked">user 2</p>
</button>
<button class="chat_room_name btn" onclick="chat_layout('user _room_set')">
<p class="__left">user 3</p>
</button>
<button class="chat_room_name btn" onclick="chat_layout('user _room_set')">
<p class="__left">user 4</p>
</button>
<!-- END placeholders -->
</div>
</div>
<!-- PROTECTED -->
<div class="chat_item chat_panel chat_panel_protected" id="chat_panel_protected">
<p class="__center" id="chat_protected_title">this room is protected</p>

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

@@ -6,6 +6,7 @@
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';
export let color = "transparent";
@@ -31,7 +32,7 @@
layout home
layout room
layout new
layout settings
layout settings
layout room_set
layout protected
layout create
@@ -55,6 +56,9 @@
{:else if layout === "settings"}
<SettingsLayout bind:layout back={layouts[1]} />
{:else if layout === "room_set"}
<RoomsetLayout bind:layout back={layouts[1]} />
{:else}
<div class="grid_box">
<Button bind:layout new_layout={layouts[0]} my_class="chat">
@@ -79,12 +83,9 @@
width: 300px;
height: 400px;
border: 1px solid black;
/*
background-color: {bg_color};
background-color: bisque;
*/
}
/* style if chat_box is closed
*/
#chat_box .chat {grid-area: chat;}
@@ -108,27 +109,30 @@
*/
/* all grid elements names
:global(#chat_box #chat ){grid-area: chat;}
:global(#chat_box #close ){grid-area: close;}
:global(#chat_box #new ){grid-area: new;}
:global(#chat_box #settings ){grid-area: settings;}
:global(#chat_box #room_name ){grid-area: room_name;}
:global(#chat_box #send ){grid-area: send;}
:global(#chat_box #create ){grid-area: create;}
:global(#chat_box #user ){grid-area: user;}
:global(#chat_box #back ){grid-area: back;}
:global(#chat_box #panel_home ){grid-area: panel_home;}
:global(#chat_box #panel_new ){grid-area: panel_new;}
:global(#chat_box #panel_msg ){grid-area: panel_msg;}
:global(#chat_box #panel_write ){grid-area: panel_write;}
:global(#chat_box #panel_settings ){grid-area: panel_settings;}
:global(#chat_box #panel_room_set ){grid-area: panel_room_set;}
:global(#chat_box #panel_protected ){grid-area: panel_protected;}
:global(#chat_box #panel_create ){grid-area: panel_create;}
:global(#chat_box #panel_user ){grid-area: panel_user;}
:global(#chat_box #panel_mute ){grid-area: panel_mute;}
:global(#chat_box #chat ){grid-area: chat;}
:global(#chat_box #close ){grid-area: close;}
:global(#chat_box #new ){grid-area: new;}
:global(#chat_box #settings ){grid-area: settings;}
:global(#chat_box #room_name ){grid-area: room_name;}
:global(#chat_box #send ){grid-area: send;}
:global(#chat_box #create ){grid-area: create;}
:global(#chat_box #user ){grid-area: user;}
:global(#chat_box #back ){grid-area: back;}
:global(#chat_box #panel_home ){grid-area: panel_home;}
:global(#chat_box #panel_new ){grid-area: panel_new;}
:global(#chat_box #panel_msg ){grid-area: panel_msg;}
:global(#chat_box #panel_write ){grid-area: panel_write;}
:global(#chat_box #panel_settings ){grid-area: panel_settings;}
:global(#chat_box #panel_room_set ){grid-area: panel_room_set;}
:global(#chat_box #panel_protected ){grid-area: panel_protected;}
:global(#chat_box #panel_create ){grid-area: panel_create;}
:global(#chat_box #panel_user ){grid-area: panel_user;}
:global(#chat_box #panel_mute ){grid-area: panel_mute;}
*/
/* Hide scrollbar
*/
#chat_box :global(*) {
@@ -139,6 +143,7 @@
display: none; /* Chrome, Safari and Opera */
}
/* for grid_box and all childrens
*/
#chat_box :global(.grid_box) {
@@ -155,12 +160,14 @@
box-sizing: border-box;
}
/* all panels
*/
#chat_box :global(.chat_panel) {
overflow-y: scroll;
}
/* all p
*/
#chat_box :global(.grid_box p) {
@@ -175,6 +182,7 @@
GLOBAL UTILITIES
*/
/* show child only if it's alone
*/
#chat_box :global(.__show_if_only_child) {
@@ -185,5 +193,12 @@
color: rgb(100, 100, 100);
}
/* center text
*/
#chat_box :global(.__center) {
margin: auto;
}
</style>

52
srcs/requirements/svelte/api_front/src/pieces/chat/Chat_button.svelte
View File

@@ -64,24 +64,24 @@
/* for btn list
*/
button.list:not(:hover) {
.list:not(:hover) {
background-color: rgb(240, 240, 240);
}
button.list p {
.list p {
text-align: left;
}
/* for transparent btn
*/
button.transparent:not(:hover) {
.transparent:not(:hover) {
background-color: transparent;
}
/* for deactivated btn
*/
button.deactivate {
.deactivate {
background-color: transparent;
pointer-events: none;
}
@@ -89,13 +89,13 @@
/* for icon
*/
:global(#chat_box) button.icon p {
:global(#chat_box) .icon p {
display: none;
}
button.icon:not(:hover) {
.icon:not(:hover) {
background-color: transparent;
}
button.icon {
.icon {
width: 30px;
height: 100%;
padding: 0px;
@@ -104,7 +104,7 @@
/* for 3 dots btn
*/
button.dots::after {
.dots::after {
content: '\2807';
font-size: 20px;
position: absolute;
@@ -120,7 +120,7 @@
/* for close btn
*/
button.close::before {
.close::before {
content: "";
position: absolute;
top: calc(50% - 1px);
@@ -133,7 +133,7 @@
/* for back btn
*/
button.back::before {
.back::before {
content: "";
position: absolute;
top: calc(50% - 6px - 1px);
@@ -146,7 +146,37 @@
}
/* for blocked user
https://www.fileformat.info/info/unicode/category/So/list.htm
U+1F512 LOCK 🔒
U+1F513 OPEN LOCK 🔓
*/
.blocked {
padding-left: 30px;
}
.blocked::before {
content: "";
position: absolute;
top: calc(50% - 2px);
left: 10px;
cursor: pointer;
width: 13px;
height: 10px;
border-radius: 2px;
background-color: rgb(110, 110, 110);
}
.blocked::after {
content: "";
position: absolute;
top: calc(50% - 9px);
left: 12px;
cursor: pointer;
width: 9px;
height: 13px;
border-radius: 5px;
box-sizing: border-box;
border: 3px solid rgb(110, 110, 110);
}
</style>

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

@@ -28,16 +28,16 @@
<p class="title">list of your rooms :</p>
<div class="room_list">
<div class="__show_if_only_child">
<p class="no_chat">/ you have no chat room yet /</p>
<p class="__center">/ you have no chat room yet /</p>
</div>
<!-- placeholders
------------- -->
<Button bind:layout new_layout="room" my_class="list">
a room
</Button>
<Button bind:layout new_layout="room" my_class="list">
another room
</Button>
------------- -->
<Button bind:layout new_layout="room" my_class="list">
placeholder
</Button>
@@ -71,9 +71,6 @@
.panel_home p.title {
margin: 10px auto 0px auto;
}
.panel_home p.no_chat {
margin: 0px auto;
}
</style>

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

@@ -32,7 +32,7 @@
<p>join room :</p>
<div class="public_rooms">
<div class="__show_if_only_child">
<p class="no_room">/ there are no public rooms yet /</p>
<p class="__center">/ there are no public rooms yet /</p>
</div>
<!-- placeholders
<Button bind:layout new_layout="room" my_class="list">
@@ -85,17 +85,14 @@
}
/* chat_panel
/* panel_new
*/
.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;
margin-top: 10px;
margin-bottom: 0px;
}

87
srcs/requirements/svelte/api_front/src/pieces/chat/Layout_room_set.svelte Normal file
View File

@@ -0,0 +1,87 @@
<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>
<!-- room_name -->
<Button my_class="new deactivate">
&lt;room_name&gt;
</Button>
<!-- close -->
<Button bind:layout new_layout="close" my_class="close icon">
close
</Button>
<!-- panel_room_set -->
<div class="chat_panel panel_room_set">
<Button bind:layout new_layout="create" my_class="create">
leave
</Button>
<p>room users :</p>
<div class="room_users">
<div class="__show_if_only_child">
<p class="__center">/ there are no public rooms yet /</p>
</div>
<!-- placeholders
------------- -->
<Button bind:layout new_layout="user" my_class="list">
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">
user 3
</Button>
<Button bind:layout new_layout="user" my_class="list">
user 4
</Button>
<!-- END placeholders -->
</div>
</div>
</div>
<style>
/* grid layout "room_set"
*/
.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_room_set) {grid-area: panel_room_set;}
.grid_box {
grid:
' back room_name close ' auto
' panel_room_set panel_room_set panel_room_set ' 1fr
/ auto 1fr auto ;
}
/* panel room_set
*/
.panel_room_set {
border-top: 1px solid black;
}
:global(#chat_box) .panel_room_set > :global(*) {
margin-top: 10px;
margin-bottom: 0px;
}
</style>

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

@@ -28,8 +28,10 @@
<div class="chat_panel panel_settings">
<p>blocked users :</p>
<div class="blocked_users">
<div class="__show_if_only_child">
<p class="__center">/ you have blocked no one /</p>
</div>
<!-- placeholders
------------- -->
<Button bind:layout new_layout="user" my_class="list blocked">
user 1
</Button>
@@ -42,6 +44,7 @@
<Button bind:layout new_layout="user" my_class="list blocked">
user 4
</Button>
------------- -->
<!-- END placeholders -->
</div>
</div>
@@ -65,6 +68,12 @@
}
/* panel_settings
*/
.panel_settings {
border-top: 1px solid black;
}
</style>

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

@@ -1,39 +0,0 @@
/*
https://www.fileformat.info/info/unicode/category/So/list.htm
U+1F512 LOCK 🔒
U+1F513 OPEN LOCK 🔓
*/
#chat_box .blocked {
padding-left: 30px;
}
#chat_box .blocked::before {
content: "";
position: absolute;
top: calc(50% - 2px);
left: 10px;
cursor: pointer;
width: 13px;
height: 10px;
border-radius: 2px;
/*
*/
background-color: rgb(110, 110, 110);
}
#chat_box .blocked::after {
content: "";
position: absolute;
top: calc(50% - 9px);
left: 12px;
cursor: pointer;
width: 9px;
height: 13px;
border-radius: 5px;
box-sizing: border-box;
/*
background-color: red;
*/
border: 3px solid rgb(110, 110, 110);
}

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

@@ -1,38 +0,0 @@
#chat_box.room_set {
grid:
' back room_name close ' auto
' panel_room_set panel_room_set panel_room_set ' 1fr
/ auto 1fr auto ;
}
#chat_box.room_set .chat_item#chat_back,
#chat_box.room_set .chat_item#chat_room_name,
#chat_box.room_set .chat_item#chat_close,
#chat_box.room_set .chat_item#chat_panel_room_set {
display: flex;
}
/* back btn
*/
#chat_box.room_set .chat_item.chat_back button.back_room {
display: flex;
}
/* button "<room_name>" appearance
*/
/* add or remove '.chat_item' to toggle the hover effect */
#chat_box.room_set button.chat_item.chat_room_name {
width: auto;
background-color: transparent;
pointer-events: none;
}
/* button "leave" appearance
*/
#chat_box.room_set .chat_item button.chat_leave_btn {
margin: 10px 0px;
}