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

better button gestion and wip room layout

Browse Source
This commit is contained in:
simplonco
2022-12-25 17:01:30 +01:00
parent 7187d7dadd
commit f43bfbac46
10 changed files with 889 additions and 394 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7,7 +7,10 @@ header.svelte-7t4byu.svelte-7t4byu{overflow-y:hidden}.grid-container.svelte-7t4b
var(--violet),
var(--pink),
var(--purple)
);background-size:200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent;white-space:nowrap}.card.svelte-8smyff{background:white;padding:20px;border-radius:6px;box-shadow:0px 2px 4px rgba(0,0,0,0.1)}button.svelte-1u0z9cq{border:0;cursor:pointer;border-radius:6px;padding:8px 12px;font-weight:bold;box-shadow:1px 2px 3px rgba(0,0,0,0.2)}.primary.svelte-1u0z9cq{background:#d91b42;color:white}.secondary.svelte-1u0z9cq{background:#45c496;color:white}.flat.svelte-1u0z9cq{box-shadow:none}.primary.inverse.svelte-1u0z9cq{color:#d91b42;background:white;border:2px solid #d91b42}.secondary.inverse.svelte-1u0z9cq{color:#45c496;background:white;border:2px solid #45c496}#chat_box.svelte-1dyzxml.svelte-1dyzxml{display:flex;position:fixed;bottom:20px;right:20px;padding:5px;width:300px;height:400px;border:1px solid black}#chat_box.close.svelte-1dyzxml .grid_box.svelte-1dyzxml{gap:0px;grid:' chat ' auto
/ auto }#chat_box.close.svelte-1dyzxml.svelte-1dyzxml{padding:0px;width:auto;height:auto}#chat_box.svelte-1dyzxml .grid_box{display:grid;margin:0px;gap:5px;width:100%;height:100%}#chat_box.svelte-1dyzxml .grid_box *{display:flex;flex-direction:column;position:relative;box-sizing:border-box}#chat_box.svelte-1dyzxml .chat_panel{overflow-y:scroll}#chat_box.svelte-1dyzxml .grid_box p{padding:10px;font-size:15px}#chat_box.svelte-1dyzxml .__show_if_only_child{display:none}#chat_box.svelte-1dyzxml .__show_if_only_child:only-child{display:flex;color:rgb(100, 100, 100)}.grid_box.svelte-redhuf #settings {grid-area:settings}.grid_box.svelte-redhuf #close {grid-area:close}.grid_box.svelte-redhuf #new {grid-area:new}.grid_box.svelte-redhuf #panel_home{grid-area:panel_home}.grid_box.svelte-redhuf.svelte-redhuf{grid:' settings new close ' auto
);background-size:200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent;white-space:nowrap}.card.svelte-8smyff{background:white;padding:20px;border-radius:6px;box-shadow:0px 2px 4px rgba(0,0,0,0.1)}button.svelte-1u0z9cq{border:0;cursor:pointer;border-radius:6px;padding:8px 12px;font-weight:bold;box-shadow:1px 2px 3px rgba(0,0,0,0.2)}.primary.svelte-1u0z9cq{background:#d91b42;color:white}.secondary.svelte-1u0z9cq{background:#45c496;color:white}.flat.svelte-1u0z9cq{box-shadow:none}.primary.inverse.svelte-1u0z9cq{color:#d91b42;background:white;border:2px solid #d91b42}.secondary.inverse.svelte-1u0z9cq{color:#45c496;background:white;border:2px solid #45c496}#chat_box.svelte-1njtw54.svelte-1njtw54{display:flex;position:fixed;bottom:20px;right:20px;padding:5px;width:300px;height:400px;border:1px solid black}#chat_box.close.svelte-1njtw54 .grid_box.svelte-1njtw54{gap:0px;grid:' chat ' auto
/ auto }#chat_box.close.svelte-1njtw54.svelte-1njtw54{padding:0px;width:auto;height:auto}#chat_box.svelte-1njtw54 .grid_box{display:grid;margin:0px;gap:5px;width:100%;height:100%}#chat_box.svelte-1njtw54 .grid_box *{display:flex;flex-direction:column;position:relative;box-sizing:border-box}#chat_box.svelte-1njtw54 .chat_panel{overflow-y:scroll}#chat_box.svelte-1njtw54 .grid_box p{padding:10px;font-size:15px}#chat_box.svelte-1njtw54 .__show_if_only_child{display:none}#chat_box.svelte-1njtw54 .__show_if_only_child:only-child{display:flex;color:rgb(100, 100, 100)}.grid_box.svelte-16qwzsm .settings {grid-area:settings}.grid_box.svelte-16qwzsm .close {grid-area:close}.grid_box.svelte-16qwzsm .new {grid-area:new}.grid_box.svelte-16qwzsm .panel_home{grid-area:panel_home}.grid_box.svelte-16qwzsm.svelte-16qwzsm{grid:' settings new close ' auto
' panel_home panel_home panel_home ' 1fr
/ auto 1fr auto }.grid_box.svelte-redhuf button#settings p{display:none}.grid_box.svelte-redhuf button#settings{width:30px;height:100%}.grid_box.svelte-redhuf button#settings:not(:hover){background-color:transparent}.grid_box.svelte-redhuf button#settings::after{content:'\2807';font-size:20px;position:absolute;top:50%;left:0px;width:100%;height:auto;text-align:center;transform:translateY(-50%);cursor:pointer}.grid_box.svelte-redhuf button#new:not(:hover){background-color:transparent}.grid_box.svelte-redhuf button#close p{display:none}.grid_box.svelte-redhuf button#close{width:30px;height:100%;padding:0px;background-color:transparent}.grid_box.svelte-redhuf button#close::before{content:"";position:absolute;top:calc(50% - 1px);left:5px;width:20px;height:2px;background-color:black}#panel_home.svelte-redhuf.svelte-redhuf{border-top:1px solid black}#panel_home.svelte-redhuf p.title.svelte-redhuf{margin:10px auto 0px auto}#panel_home.svelte-redhuf p.no_chat.svelte-redhuf{margin:0px auto}button.svelte-8bk9pb.svelte-8bk9pb{display:flex;padding:0px;margin:auto;width:100%;cursor:pointer;outline:none;border:none;background-color:rgb(220, 220, 220)}button.svelte-8bk9pb p.svelte-8bk9pb{width:100%;margin:auto;text-align:center}button.svelte-8bk9pb.svelte-8bk9pb:hover{background-color:rgb(200, 200, 200)}button.svelte-8bk9pb.svelte-8bk9pb:active{background-color:rgb(190, 190, 190)}button.list.svelte-8bk9pb.svelte-8bk9pb:not(:hover){background-color:rgb(240, 240, 240)}button.list.svelte-8bk9pb p.svelte-8bk9pb{text-align:left}
/ auto 1fr auto }.panel_home.svelte-16qwzsm.svelte-16qwzsm{border-top:1px solid black}.panel_home.svelte-16qwzsm p.title.svelte-16qwzsm{margin:10px auto 0px auto}.panel_home.svelte-16qwzsm p.no_chat.svelte-16qwzsm{margin:0px auto}button.svelte-8bk9pb.svelte-8bk9pb{display:flex;padding:0px;margin:auto;width:100%;cursor:pointer;outline:none;border:none;background-color:rgb(220, 220, 220)}button.svelte-8bk9pb p.svelte-8bk9pb{width:100%;margin:auto;text-align:center}button.svelte-8bk9pb.svelte-8bk9pb:hover{background-color:rgb(200, 200, 200)}button.svelte-8bk9pb.svelte-8bk9pb:active{background-color:rgb(190, 190, 190)}button.list.svelte-8bk9pb.svelte-8bk9pb:not(:hover){background-color:rgb(240, 240, 240)}button.list.svelte-8bk9pb p.svelte-8bk9pb{text-align:left}.grid_box.svelte-1d2ekny .back {grid-area:back}.grid_box.svelte-1d2ekny .room_name {grid-area:room_name}.grid_box.svelte-1d2ekny .close {grid-area:close}.grid_box.svelte-1d2ekny .panel_msg {grid-area:panel_msg}.grid_box.svelte-1d2ekny .send {grid-area:send}.grid_box.svelte-1d2ekny .panel_write {grid-area:panel_write}.grid_box.svelte-1d2ekny{grid:' back room_name room_name close ' auto
' panel_msg panel_msg panel_msg panel_msg ' 1fr
' panel_write panel_write send send ' auto
/ auto 1fr auto auto }button.svelte-1xlp56i.svelte-1xlp56i{display:flex;padding:0px;margin:auto;width:100%;cursor:pointer;outline:none;border:none;background-color:rgb(220, 220, 220)}button.svelte-1xlp56i p.svelte-1xlp56i{width:100%;margin:auto;text-align:center}button.svelte-1xlp56i.svelte-1xlp56i:hover{background-color:rgb(200, 200, 200)}button.svelte-1xlp56i.svelte-1xlp56i:active{background-color:rgb(190, 190, 190)}button.list.svelte-1xlp56i.svelte-1xlp56i:not(:hover){background-color:rgb(240, 240, 240)}button.list.svelte-1xlp56i p.svelte-1xlp56i{text-align:left}button.transparent.svelte-1xlp56i.svelte-1xlp56i:not(:hover){background-color:transparent}button.deactivate.svelte-1xlp56i.svelte-1xlp56i{background-color:transparent;pointer-events:none}#chat_box button.icon.svelte-1xlp56i p.svelte-1xlp56i{display:none}button.icon.svelte-1xlp56i.svelte-1xlp56i:not(:hover){background-color:transparent}button.icon.svelte-1xlp56i.svelte-1xlp56i{width:30px;height:100%;padding:0px}button.dots.svelte-1xlp56i.svelte-1xlp56i::after{content:'\2807';font-size:20px;position:absolute;top:50%;left:0px;width:100%;height:auto;text-align:center;transform:translateY(-50%);cursor:pointer}button.close.svelte-1xlp56i.svelte-1xlp56i::before{content:"";position:absolute;top:calc(50% - 1px);left:5px;width:20px;height:2px;background-color:black}button.back.svelte-1xlp56i.svelte-1xlp56i::before{content:"";position:absolute;top:calc(50% - 6px - 1px);left:6px;width:14px;height:14px;border-left:1px solid black;border-bottom:1px solid black;transform:rotate(45deg)}

819
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

152
srcs/requirements/svelte/api_front/src/pieces/chat/Button.svelte Normal file
View File

@@ -0,0 +1,152 @@
<!--
<Button bind:layout={layout} new_layout="" my_title="">
value
</Button>
-->
<script lang="ts">
export let my_class = "";
export let my_title = "";
export let layout = "";
export let new_layout = "";
function update_layout() {
layout = new_layout;
console.log(layout);
}
</script>
<button class={my_class} on:click={update_layout} title={my_title}>
<p><slot></slot></p>
</button>
<style>
/*
- default config
- for btn list
- for transparent btn
- for deactivated btn
- for icon
- for 3 dots btn
- for close btn
- for back btn
*/
/* default config
*/
button {
display: flex;
padding: 0px;
margin: auto;
width: 100%;
cursor: pointer;
outline: none;
border: none;
background-color: rgb(220, 220, 220);
}
button p {
width: 100%;
margin: auto;
text-align: center;
}
button:hover {
background-color: rgb(200, 200, 200);
}
button:active {
background-color: rgb(190, 190, 190);
}
/* for btn list
*/
button.list:not(:hover) {
background-color: rgb(240, 240, 240);
}
button.list p {
text-align: left;
}
/* for transparent btn
*/
button.transparent:not(:hover) {
background-color: transparent;
}
/* for deactivated btn
*/
button.deactivate {
background-color: transparent;
pointer-events: none;
}
/* for icon
*/
:global(#chat_box) button.icon p {
display: none;
}
button.icon:not(:hover) {
background-color: transparent;
}
button.icon {
width: 30px;
height: 100%;
padding: 0px;
}
/* for 3 dots btn
*/
button.dots::after {
content: '\2807';
font-size: 20px;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: auto;
text-align: center;
transform: translateY(-50%);
cursor: pointer;
}
/* for close btn
*/
button.close::before {
content: "";
position: absolute;
top: calc(50% - 1px);
left: 5px;
width: 20px;
height: 2px;
background-color: black;
}
/* for back btn
*/
button.back::before {
content: "";
position: absolute;
top: calc(50% - 6px - 1px);
left: 6px;
width: 14px;
height: 14px;
border-left: 1px solid black;
border-bottom: 1px solid black;
transform: rotate(45deg);
}
</style>

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

@@ -1,63 +0,0 @@
<!--
<Button bind:layout={layout} new_layout="" my_class="" my_id"">
value
</Button>
-->
<script lang="ts">
export let my_id = "";
export let my_class = "";
export let layout = "";
export let new_layout = "";
function update_layout() {
layout = new_layout;
console.log(layout);
}
</script>
<button class={my_class} id={my_id} on:click={update_layout}>
<p><slot></slot></p>
</button>
<style>
/* default config
*/
button {
display: flex;
padding: 0px;
margin: auto;
width: 100%;
cursor: pointer;
outline: none;
border: none;
background-color: rgb(220, 220, 220);
}
button p {
width: 100%;
margin: auto;
text-align: center;
}
button:hover {
background-color: rgb(200, 200, 200);
}
button:active {
background-color: rgb(190, 190, 190);
}
/* for btn list
*/
button.list:not(:hover) {
background-color: rgb(240, 240, 240);
}
button.list p {
text-align: left;
}
</style>

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

@@ -1,15 +1,23 @@
<script lang="ts">
import HomeLayout from './Layout_home.svelte';
import Button from './Buttons.svelte';
import RoomLayout from './Layout_room.svelte';
import Button from './Button.svelte';
export let color = "transparent";
let room = "";
let admin = false;
let last_layout = "";
let layout = "close";
// hold previous versions of layout, to go back
let layouts = [""];
function set_layouts(layout)
{
layouts = [layout, ...layouts];
}
$: set_layouts(layout);
/*
layout close
layout home
@@ -31,11 +39,11 @@
<HomeLayout bind:layout />
{:else if layout === "room"}
<RoomLayout bind:layout />
<RoomLayout bind:layout back={layouts[1]} />
{:else}
<div class="grid_box">
<Button bind:layout new_layout="home" my_id="chat">
<Button bind:layout new_layout="home" my_class="chat">
chat
</Button>
</div>
@@ -65,7 +73,7 @@
/* style if chat_box is closed
*/
#chat_box #chat {grid-area: chat;}
#chat_box .chat {grid-area: chat;}
#chat_box.close .grid_box {
gap: 0px;
grid:

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

@@ -1,22 +1,22 @@
<script>
import Button from './Buttons.svelte';
import Button from './Button.svelte';
export let layout;
</script>
<div class="grid_box">
<Button bind:layout new_layout="settings" my_id="settings">
<Button bind:layout new_layout="settings" my_class="settings dots icon">
settings
</Button>
<Button bind:layout new_layout="new" my_id="new">
<Button bind:layout new_layout="new" my_class="new transparent">
new
</Button>
<Button bind:layout new_layout="close" my_id="close">
<Button bind:layout new_layout="close" my_class="close icon">
close
</Button>
<div class="chat_panel" id="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="__show_if_only_child">
@@ -29,10 +29,10 @@
<Button bind:layout new_layout="room" my_class="list">
another room
</Button>
------------- -->
<Button bind:layout new_layout="room" my_class="list">
placeholder
</Button>
------------- -->
<!-- END placeholders -->
</div>
</div>
@@ -43,10 +43,10 @@
/* grid layout "home"
*/
.grid_box :global(#settings ) {grid-area: settings;}
.grid_box :global(#close ) {grid-area: close;}
.grid_box :global(#new ) {grid-area: new;}
.grid_box :global(#panel_home) {grid-area: panel_home;}
.grid_box :global(.settings ) {grid-area: settings;}
.grid_box :global(.close ) {grid-area: close;}
.grid_box :global(.new ) {grid-area: new;}
.grid_box :global(.panel_home) {grid-area: panel_home;}
.grid_box {
grid:
' settings new close ' auto
@@ -55,70 +55,15 @@
}
/* button "settings" as 3 dots
*/
.grid_box :global(button#settings p) {
display: none;
}
.grid_box :global(button#settings) {
width: 30px;
height: 100%;
}
.grid_box :global(button#settings:not(:hover)) {
background-color: transparent;
}
.grid_box :global(button#settings::after) {
content: '\2807';
font-size: 20px;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: auto;
text-align: center;
transform: translateY(-50%);
cursor: pointer;
}
/* button "new"
*/
.grid_box :global(button#new:not(:hover)) {
background-color: transparent;
}
/* button "close"
*/
.grid_box :global(button#close p) {
display: none;
}
.grid_box :global(button#close) {
width: 30px;
height: 100%;
padding: 0px;
background-color: transparent;
}
.grid_box :global(button#close::before) {
content: "";
position: absolute;
top: calc(50% - 1px);
left: 5px;
width: 20px;
height: 2px;
background-color: black;
}
/* panel home
*/
#panel_home {
.panel_home {
border-top: 1px solid black;
}
#panel_home p.title {
.panel_home p.title {
margin: 10px auto 0px auto;
}
#panel_home p.no_chat {
.panel_home p.no_chat {
margin: 0px auto;
}

56
srcs/requirements/svelte/api_front/src/pieces/chat/Layout_room.svelte Normal file
View File

@@ -0,0 +1,56 @@
<script>
import Button from './Button.svelte';
export let layout = "";
export let back = "";
</script>
<div class="grid_box">
<Button bind:layout new_layout={back} my_class="back icon" my_title="go back {back}">
back
</Button>
<Button bind:layout new_layout="room_set" my_class="room_name transparent">
&lt;room_name&gt;
</Button>
<Button bind:layout new_layout="close" my_class="close icon">
close
</Button>
<Button my_class="send">
send
</Button>
</div>
<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 {
grid:
' back room_name room_name close ' auto
' panel_msg panel_msg panel_msg panel_msg ' 1fr
' panel_write panel_write send send ' auto
/ auto 1fr auto auto ;
}
/* button "<room_name>" appearance
*/
#chat_box.room button.chat_room_name {
width: auto;
background-color: transparent;
}
</style>

59
srcs/requirements/svelte/api_front/src/pieces/chat/RoomLayout.svelte
View File

@@ -1,59 +0,0 @@
<script>
import Button from './Buttons.svelte';
export let layout;
</script>
<div class="grid_box">
<Button bind:layout new_layout="room_set" my_id="room_name">
&lt;room_name&gt;
</Button>
<Button bind:layout new_layout="close" my_id="close">
close
</Button>
<!-- <button class="btn back_home" onclick="chat_layout('home')" title="go back home"></button> -->
<Button bind:layout new_layout="home" my_id="back_home">
close
</Button>
</div>
<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 {
grid:
' back room_name room_name close ' auto
' panel_msg panel_msg panel_msg panel_msg ' 1fr
' panel_write panel_write send send ' auto
/ auto 1fr auto auto ;
}
/* back btn
*/
#chat_box.room .chat_item.chat_back button.back_home {
display: flex;
}
/* button "<room_name>" appearance
*/
#chat_box.room button.chat_room_name {
width: auto;
background-color: transparent;
}
</style>

24
srcs/requirements/svelte/api_front/src/styles/chat/chat_buttons.css
View File

@@ -1,24 +0,0 @@
/* BACK
*/
#chat_box .chat_item.chat_back button {
width: 30px;
height: 100%;
background-color: transparent;
display: none;
}
#chat_box .chat_item.chat_back button::before {
content: "";
position: absolute;
top: calc(50% - 6px - 1px);
left: 6px;
width: 14px;
height: 14px;
border-left: 1px solid black;
border-bottom: 1px solid black;
transform: rotate(45deg);
}