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

wip style of chat layouts, alreade done home and room

Browse Source
This commit is contained in:
lenovo
2022-12-14 20:32:41 +01:00
parent 302a2409fc
commit e18010a1ef
16 changed files with 240 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/transcendence_chat.drawio.html
View File

File diff suppressed because one or more lines are too long

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

@@ -1,4 +1,4 @@
.grid-container.svelte-16gr88w.svelte-16gr88w{position:absolute;left:0;top:0;box-sizing:border-box;width:100%;height:100%;white-space:nowrap;margin-bottom:0px;overflow:hidden;padding:20px 40px;display:grid;grid-template-columns:repeat(12, 1fr);grid-template-rows:1fr 1fr 1fr 1fr 1fr;align-items:center}header.svelte-16gr88w h1.svelte-16gr88w,header.svelte-16gr88w nav a.svelte-16gr88w{color:bisque}header.svelte-16gr88w h1.svelte-16gr88w{grid-column:1 / 7;grid-row:1;padding:20px;border:1px solid bisque}header.svelte-16gr88w nav.svelte-16gr88w{grid-column:7 / 13;grid-row:1;justify-self:end;padding:20px;border:1px solid bisque}header.svelte-16gr88w nav a.svelte-16gr88w{margin-left:10px;text-decoration:none}header.svelte-16gr88w nav a.svelte-16gr88w:hover{font-weight:bold;background-color:blue}header.svelte-16gr88w h2.svelte-16gr88w:hover{background:blue}header.svelte-16gr88w h2.svelte-16gr88w{grid-row:3;grid-column:5 / span 4;justify-self:center;border:1px solid black;z-index:3}header.svelte-16gr88w h2 div.svelte-16gr88w{font-size:2em}nav.svelte-16gr88w div.svelte-16gr88w{display:inline;color:bisque;font-weight:bold}canvas.svelte-1bstsd0{width:100%;height:100%;background-color:#666}footer.svelte-3gs9wc{padding:40px;padding-bottom:10px;text-align:center}.copyright.svelte-3gs9wc{color:#aaa;font-size:14px;display:inline-block;padding:20px;border-top:1px solid #ddd}@font-face{font-family:'Bondi';src:url('/fonts/Bondi.ttf.woff') format('woff'),
.grid-container.svelte-16gr88w.svelte-16gr88w{position:absolute;left:0;top:0;box-sizing:border-box;width:100%;height:100%;white-space:nowrap;margin-bottom:0px;overflow:hidden;padding:20px 40px;display:grid;grid-template-columns:repeat(12, 1fr);grid-template-rows:1fr 1fr 1fr 1fr 1fr;align-items:center}header.svelte-16gr88w h1.svelte-16gr88w,header.svelte-16gr88w nav a.svelte-16gr88w{color:bisque}header.svelte-16gr88w h1.svelte-16gr88w{grid-column:1 / 7;grid-row:1;padding:20px;border:1px solid bisque}header.svelte-16gr88w nav.svelte-16gr88w{grid-column:7 / 13;grid-row:1;justify-self:end;padding:20px;border:1px solid bisque}header.svelte-16gr88w nav a.svelte-16gr88w{margin-left:10px;text-decoration:none}header.svelte-16gr88w nav a.svelte-16gr88w:hover{font-weight:bold;background-color:blue}header.svelte-16gr88w h2.svelte-16gr88w:hover{background:blue}header.svelte-16gr88w h2.svelte-16gr88w{grid-row:3;grid-column:5 / span 4;justify-self:center;border:1px solid black;z-index:3}header.svelte-16gr88w h2 div.svelte-16gr88w{font-size:2em}nav.svelte-16gr88w div.svelte-16gr88w{display:inline;color:bisque;font-weight:bold}@font-face{font-family:'Bondi';src:url('/fonts/Bondi.ttf.woff') format('woff'),
url('/fonts/Bondi.ttf.svg#Bondi') format('svg'),
url('/fonts/Bondi.ttf.eot'),
url('/fonts/Bondi.ttf.eot?#iefix') format('embedded-opentype');font-weight:normal;font-style:normal}header.svelte-1rtggu1.svelte-1rtggu1{background:#618174;margin:0}header.svelte-1rtggu1.svelte-1rtggu1{position:sticky;display:grid;grid-template-columns:1fr 1fr 1fr}h1.svelte-1rtggu1.svelte-1rtggu1{font-family:'Bondi'}h1.svelte-1rtggu1.svelte-1rtggu1{margin:0;text-align:left;display:flex;justify-self:center;align-self:center}img.svelte-1rtggu1.svelte-1rtggu1{cursor:pointer;max-width:40px;padding:7px 20px;justify-self:left}nav.svelte-1rtggu1.svelte-1rtggu1{display:flex;justify-content:right}nav.svelte-1rtggu1 button.svelte-1rtggu1{margin:7px 20px;border-radius:4px}main.svelte-clru56.svelte-clru56{max-width:960px;margin:40px auto;text-align:center}.icon.svelte-clru56.svelte-clru56{max-width:150px}section.main-stats.svelte-clru56.svelte-clru56{max-width:600px;margin:40px auto;text-align:center;display:grid;grid-template-columns:repeat(3, 1fr);grid-template-rows:repeat(3, 1fr)}section.main-stats.svelte-clru56 h4.svelte-clru56{grid-column:1 / span 3}
url('/fonts/Bondi.ttf.eot?#iefix') format('embedded-opentype');font-weight:normal;font-style:normal}header.svelte-1rtggu1.svelte-1rtggu1{background:#618174;margin:0}header.svelte-1rtggu1.svelte-1rtggu1{position:sticky;display:grid;grid-template-columns:1fr 1fr 1fr}h1.svelte-1rtggu1.svelte-1rtggu1{font-family:'Bondi'}h1.svelte-1rtggu1.svelte-1rtggu1{margin:0;text-align:left;display:flex;justify-self:center;align-self:center}img.svelte-1rtggu1.svelte-1rtggu1{cursor:pointer;max-width:40px;padding:7px 20px;justify-self:left}nav.svelte-1rtggu1.svelte-1rtggu1{display:flex;justify-content:right}nav.svelte-1rtggu1 button.svelte-1rtggu1{margin:7px 20px;border-radius:4px}canvas.svelte-1bstsd0{width:100%;height:100%;background-color:#666}footer.svelte-3gs9wc{padding:40px;padding-bottom:10px;text-align:center}.copyright.svelte-3gs9wc{color:#aaa;font-size:14px;display:inline-block;padding:20px;border-top:1px solid #ddd}main.svelte-clru56.svelte-clru56{max-width:960px;margin:40px auto;text-align:center}.icon.svelte-clru56.svelte-clru56{max-width:150px}section.main-stats.svelte-clru56.svelte-clru56{max-width:600px;margin:40px auto;text-align:center;display:grid;grid-template-columns:repeat(3, 1fr);grid-template-rows:repeat(3, 1fr)}section.main-stats.svelte-clru56 h4.svelte-clru56{grid-column:1 / span 3}

78
tests_hugo/chat_node/chat_client/chat.html
View File

@@ -21,25 +21,42 @@
<div class="close" id="chat_box">
<button class="chat_item" id="chat_chat" onclick="layout('home')" >chat</button>
<button class="chat_item" id="chat_close" onclick="layout('close')" ></button>
<button class="chat_item" id="chat_new" onclick="layout('new')" >new</button>
<button class="chat_item" id="chat_settings" onclick="layout('settings')" >settings</button>
<button class="chat_item" id="chat_room_name" onclick="layout('room_set')" >placeholder</button>
<button class="chat_item" id="chat_send" onclick="send_msg()" >send</button>
<p class="chat_item" id="chat_create" >create</p>
<p class="chat_item" id="chat_user" >placeholder</p>
<div class="chat_item" id="chat_msg_thread" ><!-- messages go there --></div>
<div class="chat_item" id="chat_write" contenteditable ><!-- write message here --></div>
<button class="chat_item chat_back" id="chat_back_home" onclick="layout('home')" ></button>
<button class="chat_item chat_back" id="chat_back_room" onclick="layout('room')" ></button>
<button class="chat_item chat_back" id="chat_back_new" onclick="layout('new')" ></button>
<button class="chat_item chat_back" id="chat_back_user" onclick="layout('user')" ></button>
<button class="chat_item chat_chat" id="chat_chat" onclick="layout('home')" ><p>chat</p></button>
<button class="chat_item chat_close" id="chat_close" onclick="layout('close')" ></button>
<button class="chat_item chat_new" id="chat_new" onclick="layout('new')" ><p>new</p></button>
<button class="chat_item chat_settings" id="chat_settings" onclick="layout('settings')" ><p>settings</p></button>
<button class="chat_item chat_room_name" id="chat_room_name" onclick="layout('room_set')" ><p>placeholder</p></button>
<button class="chat_item chat_send" id="chat_send" onclick="send_msg()" ><p>send</p></button>
<p class="chat_item" id="chat_create" >create</p>
<p class="chat_item" id="chat_user" >placeholder</p>
<button class="chat_item _back chat_back_room" id="chat_back_room" onclick="layout('room')" ></button>
<button class="chat_item _back chat_back_home" id="chat_back_home" onclick="layout('home')" ></button>
<button class="chat_item _back chat_back_new" id="chat_back_new" onclick="layout('new')" ></button>
<button class="chat_item _back chat_back_user" id="chat_back_user" onclick="layout('user')" ></button>
<!-- --------------------------------
PANELS
id="chat_msg_thread"
id="msg_thread"
--------------------------------- -->
<div class="chat_item chat_panel" id="chat_panel_home">
<div class="chat_item chat_panel chat_panel_msg" id="chat_panel_msg">
<div id="chat_msg_thread">
<!-- placeholder -->
<div class="chat_msg bob">
<p class="name">bob</p>
<p class="msg">hello</p>
</div>
<div class="chat_msg me">
<p class="name">me</p>
<p class="msg">hello</p>
</div>
<!-- -->
</div>
</div>
<div class="chat_item chat_panel " id="chat_panel_home">
<div id="chat_room_list" class="_first_child_vanish">
<div class="chat_room_name">
<p>you don't have any chat yet</p>
@@ -57,41 +74,50 @@
<!-- END placeholders -->
</div>
</div>
<div class="chat_item chat_panel" id="chat_panel_room">
<!-- content -->
panel room
</div>
<div class="chat_item chat_panel" id="chat_panel_new">
<div class="chat_item chat_panel chat_panel_new" id="chat_panel_new">
<!-- content -->
panel new
</div>
<div class="chat_item chat_panel" id="chat_panel_settings">
<div class="chat_item chat_panel chat_panel_settings" id="chat_panel_settings">
<!-- content -->
panel settings
</div>
<div class="chat_item chat_panel" id="chat_panel_room_set">
<div class="chat_item chat_panel chat_panel_room_set" id="chat_panel_room_set">
<!-- content -->
panel room settings
</div>
<div class="chat_item chat_panel" id="chat_panel_protected">
<div class="chat_item chat_panel chat_panel_protected" id="chat_panel_protected">
<!-- content -->
panel protected
</div>
<div class="chat_item chat_panel" id="chat_panel_create">
<div class="chat_item chat_panel chat_panel_create" id="chat_panel_create">
<!-- content -->
panel create
</div>
<div class="chat_item chat_panel" id="chat_panel_user">
<div class="chat_item chat_panel chat_panel_user" id="chat_panel_user">
<!-- content -->
panel user
</div>
<div class="chat_item chat_panel" id="chat_panel_mute">
<div class="chat_item chat_panel chat_panel_mute" id="chat_panel_mute">
<!-- content -->
panel mute
</div>
<div class="chat_item chat_panel chat_panel_write" id="chat_panel_write">
<div class="text_area" contenteditable></div>
</div>
<!-- --------------------------------
MODELS
<div class="chat_model" id="chat_model_myroom_name">
</div>
<div class="chat_model" id="chat_model_msg">

2
tests_hugo/chat_node/chat_client/chat_add_msg.js
View File

@@ -1,6 +1,6 @@
const add_message = (from, message ) => {
const div_thread = document.getElementById('msg_thread');
const div_thread = document.getElementById('chat_msg_thread');
//console.log("received message:");
//console.log(`[${message}]`);

85
tests_hugo/chat_node/chat_client/style/_chat_thread.css
View File

@@ -1,85 +0,0 @@
.chat._item.main_window {
flex-direction: column-reverse;
overflow: scroll;
border: 1px solid blue;
}
.chat._item .msg_box {
flex-direction: column;
width: 100%;
padding: 5px;
}
#chat_box #msg_thread div {
white-space: pre-wrap;
margin: 5px auto;
padding: 5px;
border-radius: 5px;
}
/* * * * * * * * * * * * * *
ROOM NAME
*/
#chat_box #msg_box_room_name {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
text-align: center;
margin: 0px;
padding: 2px 5px;
font-weight: bold;
color: rgb(120, 120, 120);
}
/* * * * * * * * * * * * * *
ALL MSG
*/
#chat_box #msg_thread div {
margin-left: 0px;
background-color: rgb(210, 210, 210);
max-width: 80%;
}
#chat_box #msg_thread div p.name {
margin: 0px;
font-size: 12px;
color: rgb(100, 100, 100);
}
#chat_box #msg_thread div p.msg {
margin: 5px 0px;
}
/* * * * * * * * * * * * * *
MSG PERSO
*/
#chat_box #msg_thread div.me {
margin-right: 0px;
margin-left: auto;
background-color: rgb(210, 110, 10);
}
#chat_box #msg_thread div.me p.name {
display: none;
}
/* * * * * * * * * * * * * *
MSG SERVER
*/
#chat_box #msg_thread div.SERVER {
margin-left: auto;
background-color: transparent;
}
#chat_box #msg_thread div.SERVER p.name {
display: none;
}
#chat_box #msg_thread div.SERVER p.msg {
margin: 0px auto;
font-size: 12px;
color: rgb(100, 100, 100);
}

25
tests_hugo/chat_node/chat_client/style/chat.css
View File

@@ -1,10 +1,5 @@
/*
@import 'chat_thread.css';
@import 'chat_write.css';
@import 'chat_controls.css';
@import 'action_board.css';
*/
@import 'chat__global.css';
@import 'layout_close.css';
@import 'layout_home.css';
@@ -16,8 +11,17 @@
@import 'layout_create.css';
@import 'layout_user.css';
@import 'layout_mute.css';
@import 'chat_buttons.css';
@import 'chat_back.css';
@import 'chat_close.css';
@import 'chat_write.css';
@import 'chat_msg.css';
/*
@import '_chat_controls.css';
@import '_action_board.css';
*/
/* vanish elements wihtout display:none;
@@ -54,8 +58,8 @@ input.vanish {
#chat_box .chat_item {
display: none;
/*
*/
border: 1px solid black;
*/
width: 100%;
height: 100%;
}
@@ -68,15 +72,14 @@ input.vanish {
.chat_item#chat_send { grid-area: send;}
.chat_item#chat_create { grid-area: create;}
.chat_item#chat_user { grid-area: user;}
.chat_item#chat_msg_thread { grid-area: msg_thread;}
.chat_item#chat_write { grid-area: write;}
.chat_item#chat_back_home { grid-area: back_home;}
.chat_item#chat_back_room { grid-area: back_room;}
.chat_item#chat_back_new { grid-area: back_new;}
.chat_item#chat_back_user { grid-area: back_user;}
.chat_item#chat_panel_home { grid-area: panel_home;}
.chat_item#chat_panel_room { grid-area: panel_room;}
.chat_item#chat_panel_new { grid-area: panel_new;}
.chat_item#chat_panel_msg { grid-area: panel_msg;}
.chat_item#chat_panel_write { grid-area: panel_write;}
.chat_item#chat_panel_settings { grid-area: panel_settings;}
.chat_item#chat_panel_room_set { grid-area: panel_room_set;}
.chat_item#chat_panel_protected { grid-area: panel_protected;}
@@ -85,10 +88,10 @@ input.vanish {
.chat_item#chat_panel_mute { grid-area: panel_mute;}
#chat_box {
display: grid;
position: fixed;
bottom: 20px;
right: 20px;
display: grid;
gap: 5px;
padding: 5px;

3
tests_hugo/chat_node/chat_client/style/chat__global.css Normal file
View File

@@ -0,0 +1,3 @@
#chat_box p {
padding: 10px;
}

4
tests_hugo/chat_node/chat_client/style/chat_back.css
View File

@@ -1,8 +1,8 @@
#chat_box .chat_item.chat_back {
#chat_box button.chat_item._back {
width: 30px;
background-color: transparent;
}
.chat_back::before {
.chat_item._back::before {
content: "";
position: absolute;
top: calc(50% - 10px - 1px);

7
tests_hugo/chat_node/chat_client/style/chat_buttons.css
View File

@@ -2,16 +2,17 @@
#chat_box button {
display: flex;
width: auto;
padding: 10px;
cursor: pointer;
outline: none;
border: none;
background-color: rgb(220, 220, 220);
}
#chat_box button:hover {
#chat_box button.chat_item:hover,
#chat_box .chat_item button:hover {
background-color: rgb(200, 200, 200);
}
#chat_box button:active {
#chat_box button.chat_item:active,
#chat_box .chat_item button:active {
background-color: rgb(190, 190, 190);
}

20
tests_hugo/chat_node/chat_client/style/chat_close.css Normal file
View File

@@ -0,0 +1,20 @@
#chat_box .chat_item#chat_close {
width: 30px;
}
/* add or remove '.chat_item' to toggle the hover effect */
#chat_box button.chat_item.chat_close {
width: 100%;
height: 100%;
padding: 0px;
background-color: transparent;
}
#chat_close::before {
content: "";
position: absolute;
top: calc(50% - 1px);
left: 5px;
width: 20px;
height: 2px;
background-color: black;
}

73
tests_hugo/chat_node/chat_client/style/chat_msg.css Normal file
View File

@@ -0,0 +1,73 @@
.chat_item#chat_panel_msg {
flex-direction: column-reverse;
overflow: scroll;
border: 1px solid black;
}
.chat_item#chat_panel_msg #chat_msg_thread {
flex-direction: column;
width: 100%;
padding: 0px 5px;
margin-bottom: 0px;
}
.chat_item#chat_panel_msg #chat_msg_thread .chat_msg {
white-space: pre-wrap;
margin: 5px auto;
padding: 5px;
border-radius: 5px;
}
/* * * * * * * * * * * * * *
ALL MSG
*/
.chat_item#chat_panel_msg #chat_msg_thread .chat_msg {
margin-left: 0px;
background-color: rgb(210, 210, 210);
max-width: 80%;
}
.chat_item#chat_panel_msg #chat_msg_thread .chat_msg p {
padding: 0px;
}
.chat_item#chat_panel_msg #chat_msg_thread .chat_msg p.name {
margin: 0px;
font-size: 12px;
color: rgb(100, 100, 100);
}
.chat_item#chat_panel_msg #chat_msg_thread .chat_msg p.msg {
margin: 5px 0px;
}
/* * * * * * * * * * * * * *
MSG PERSO
*/
.chat_item#chat_panel_msg #chat_msg_thread .chat_msg.me {
margin-right: 0px;
margin-left: auto;
background-color: rgb(210, 110, 10);
}
.chat_item#chat_panel_msg #chat_msg_thread .chat_msg.me p.name {
display: none;
}
/* * * * * * * * * * * * * *
MSG SERVER
*/
.chat_item#chat_panel_msg #chat_msg_thread .chat_msg.SERVER {
margin-left: auto;
background-color: transparent;
}
.chat_item#chat_panel_msg #chat_msg_thread .chat_msg.SERVER p.name {
display: none;
}
.chat_item#chat_panel_msg #chat_msg_thread .chat_msg.SERVER p.msg {
margin: 0px auto;
font-size: 12px;
color: rgb(100, 100, 100);
}

6
tests_hugo/chat_node/chat_client/style/_chat_write.css → tests_hugo/chat_node/chat_client/style/chat_write.css
View File

@@ -1,4 +1,4 @@
.chat._item .text_area {
.chat_item#chat_panel_write .text_area {
display: block;
position: absolute;
bottom: 0px;
@@ -13,8 +13,8 @@
overflow-x: hidden;
overflow-y: scroll;
background-color: white;
border: 1px solid red;
border: 1px solid black;
}
.chat._item .text_area div {
.chat_item#chat_panel_write .text_area div {
display: block ruby;
}

40
tests_hugo/chat_node/chat_client/style/layout_home.css
View File

@@ -12,3 +12,43 @@
display: flex;
}
/* button "new" appearance
*/
/* add or remove '.chat_item' to toggle the hover effect */
#chat_box.home button.chat_new {
width: auto;
background-color: transparent;
}
/* button "settings" as 3 dots
*/
#chat_box.home .chat_item#chat_settings p {
display: none;
}
#chat_box.home button.chat_item#chat_settings {
width: 30px;
height: 100%;
padding: 0px;
}
/* add or remove '.chat_item' to toggle the hover effect */
#chat_box.home button.chat_item#chat_settings {
background-color: transparent;
}
#chat_box.home .chat_item#chat_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;
/*
background-color: black;
*/
}

8
tests_hugo/chat_node/chat_client/style/layout_new.css
View File

@@ -12,3 +12,11 @@
display: flex;
}
/* button "new" appearance
.chat_item#chat_new button {
background-color: transparent;
}
*/

22
tests_hugo/chat_node/chat_client/style/layout_room.css
View File

@@ -1,17 +1,27 @@
#chat_box.room {
grid:
' back_home room_name close ' auto
' msg_thread msg_thread msg_thread ' 1fr
' write write send ' auto
/ auto 1fr auto ;
' back_home 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 ;
}
#chat_box.room .chat_item#chat_back_home,
#chat_box.room .chat_item#chat_room_name,
#chat_box.room .chat_item#chat_close,
#chat_box.room .chat_item#chat_msg_thread,
#chat_box.room .chat_item#chat_panel_msg,
#chat_box.room .chat_item#chat_send,
#chat_box.room .chat_item#chat_write {
#chat_box.room .chat_item#chat_panel_write {
display: flex;
}
/* button "<room_name>" appearance
*/
/* add or remove '.chat_item' to toggle the hover effect */
#chat_box.room button.chat_room_name {
width: auto;
background-color: transparent;
}

1
tests_hugo/chat_node/chat_client/style/layout_settings.css
View File

@@ -12,3 +12,4 @@
display: flex;
}