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

base layout ok

Browse Source
This commit is contained in:
lenovo
2022-12-12 14:14:37 +01:00
parent 9392c81fa2
commit 7ab4aca458
18 changed files with 174 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/transcendence_chat.drawio.html
View File

File diff suppressed because one or more lines are too long

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

@@ -9,10 +9,11 @@
<body> <body>
<br><br><button onclick="layout(this.innerText)">close</button> <br><br><button onclick="layout(this.innerText)">close</button>
<br><br><button onclick="layout(this.innerText)">home</button>
<br><br><button onclick="layout(this.innerText)">room</button> <br><br><button onclick="layout(this.innerText)">room</button>
<br><br><button onclick="layout(this.innerText)">new</button> <br><br><button onclick="layout(this.innerText)">new</button>
<br><br><button onclick="layout(this.innerText)">settings</button> <br><br><button onclick="layout(this.innerText)">settings</button>
<br><br><button onclick="layout(this.innerText)">room_settings</button> <br><br><button onclick="layout(this.innerText)">room_set</button>
<br><br><button onclick="layout(this.innerText)">protected</button> <br><br><button onclick="layout(this.innerText)">protected</button>
<br><br><button onclick="layout(this.innerText)">create</button> <br><br><button onclick="layout(this.innerText)">create</button>
<br><br><button onclick="layout(this.innerText)">user</button> <br><br><button onclick="layout(this.innerText)">user</button>
@@ -20,14 +21,14 @@
<div class="close" id="chat_box"> <div class="close" id="chat_box">
<button class="chat_item" id="chat_chat" onclick="layout('open')" >chat</button> <button class="chat_item" id="chat_chat" onclick="layout('home')" >chat</button>
<button class="chat_item" id="chat_close" onclick="layout('close')" >new</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_new" onclick="layout('new')" >new</button>
<button class="chat_item" id="chat_settings" onclick="layout('settings')" >settings</button> <button class="chat_item" id="chat_settings" onclick="layout('settings')" >settings</button>
<button class="chat_item" id="chat_room_name" onclick="layout('room_settings')" >placeholder</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> <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_create" >create</p>
<p class="chat_item" id="chat_user_name" >placeholder</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_msg_thread" ><!-- messages go there --></div>
<div class="chat_item" id="chat_write" contenteditable ><!-- write message here --></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_home" onclick="layout('home')" ></button>
@@ -68,7 +69,7 @@
<!-- content --> <!-- content -->
panel settings panel settings
</div> </div>
<div class="chat_item chat_panel" id="chat_panel_room_settings"> <div class="chat_item chat_panel" id="chat_panel_room_set">
<!-- content --> <!-- content -->
panel room settings panel room settings
</div> </div>

0
tests_hugo/chat_node/chat_client/style/action_board.css → tests_hugo/chat_node/chat_client/style/_action_board.css
View File

0
tests_hugo/chat_node/chat_client/style/chat_controls.css → tests_hugo/chat_node/chat_client/style/_chat_controls.css
View File

0
tests_hugo/chat_node/chat_client/style/chat_thread.css → tests_hugo/chat_node/chat_client/style/_chat_thread.css
View File

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

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

@@ -8,6 +8,15 @@
@import 'chat_buttons.css'; @import 'chat_buttons.css';
@import 'layout_close.css'; @import 'layout_close.css';
@import 'layout_home.css';
@import 'layout_room.css';
@import 'layout_new.css';
@import 'layout_settings.css';
@import 'layout_room_set.css';
@import 'layout_protected.css';
@import 'layout_create.css';
@import 'layout_user.css';
@import 'layout_mute.css';
/* vanish elements wihtout display:none; /* vanish elements wihtout display:none;
@@ -44,33 +53,35 @@ input.vanish {
#chat_box .chat_item { #chat_box .chat_item {
display: none; display: none;
/* /*
border: 1px solid black;
*/ */
border: 1px solid black;
width: 100%;
height: 100%;
} }
.chat_item#chat_chat { grid-area: chat;} .chat_item#chat_chat { grid-area: chat;}
.chat_item#chat_close { grid-area: close;} .chat_item#chat_close { grid-area: close;}
.chat_item#chat_new { grid-area: new;} .chat_item#chat_new { grid-area: new;}
.chat_item#chat_settings { grid-area: settings;} .chat_item#chat_settings { grid-area: settings;}
.chat_item#chat_room_name { grid-area: room_name;} .chat_item#chat_room_name { grid-area: room_name;}
.chat_item#chat_send { grid-area: send;} .chat_item#chat_send { grid-area: send;}
.chat_item#chat_create { grid-area: create;} .chat_item#chat_create { grid-area: create;}
.chat_item#chat_user_name { grid-area: user_name;} .chat_item#chat_user { grid-area: user;}
.chat_item#chat_msg_thread { grid-area: msg_thread;} .chat_item#chat_msg_thread { grid-area: msg_thread;}
.chat_item#chat_write { grid-area: write;} .chat_item#chat_write { grid-area: write;}
.chat_item#chat_back_home { grid-area: back_home;} .chat_item#chat_back_home { grid-area: back_home;}
.chat_item#chat_back_room { grid-area: back_room;} .chat_item#chat_back_room { grid-area: back_room;}
.chat_item#chat_back_new { grid-area: back_new;} .chat_item#chat_back_new { grid-area: back_new;}
.chat_item#chat_back_user { grid-area: back_user;} .chat_item#chat_back_user { grid-area: back_user;}
.chat_item#chat_panel_home { grid-area: panel_home;} .chat_item#chat_panel_home { grid-area: panel_home;}
.chat_item#chat_panel_room { grid-area: panel_room;} .chat_item#chat_panel_room { grid-area: panel_room;}
.chat_item#chat_panel_new { grid-area: panel_new;} .chat_item#chat_panel_new { grid-area: panel_new;}
.chat_item#chat_panel_settings { grid-area: panel_settings;} .chat_item#chat_panel_settings { grid-area: panel_settings;}
.chat_item#chat_panel_room_settings { grid-area: panel_room_settings;} .chat_item#chat_panel_room_set { grid-area: panel_room_set;}
.chat_item#chat_panel_protected { grid-area: panel_protected;} .chat_item#chat_panel_protected { grid-area: panel_protected;}
.chat_item#chat_panel_create { grid-area: panel_create;} .chat_item#chat_panel_create { grid-area: panel_create;}
.chat_item#chat_panel_user { grid-area: panel_user;} .chat_item#chat_panel_user { grid-area: panel_user;}
.chat_item#chat_panel_mute { grid-area: panel_mute;} .chat_item#chat_panel_mute { grid-area: panel_mute;}
#chat_box { #chat_box {
position: fixed; position: fixed;

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

@@ -1,8 +1,4 @@
/*
* BUTTONS
*/
#chat_box button { #chat_box button {
display: flex; display: flex;
width: auto; width: auto;

15
tests_hugo/chat_node/chat_client/style/layout_close.css
View File

@@ -1,17 +1,4 @@
/*
grid:
' controls close ' auto
' main_window main_window ' 1fr
' msg_write msg_send ' auto
/ 1fr auto;
#chat_box.close {
grid:
' close ' auto
/ auto;
}
*/
#chat_box.close { #chat_box.close {
gap: 0px; gap: 0px;
padding: 0px; padding: 0px;
@@ -19,7 +6,7 @@
height: auto; height: auto;
grid: grid:
' chat ' auto ' chat ' auto
/ auto; / auto ;
} }
#chat_box.close .chat_item#chat_chat { #chat_box.close .chat_item#chat_chat {
display: flex; display: flex;

14
tests_hugo/chat_node/chat_client/style/layout_create.css Normal file
View File

@@ -0,0 +1,14 @@
#chat_box.create {
grid:
' back_new create close ' auto
' panel_create panel_create panel_create ' 1fr
/ auto 1fr auto ;
}
#chat_box.create .chat_item#chat_back_new,
#chat_box.create .chat_item#chat_create,
#chat_box.create .chat_item#chat_close,
#chat_box.create .chat_item#chat_panel_create {
display: flex;
}

14
tests_hugo/chat_node/chat_client/style/layout_home.css Normal file
View File

@@ -0,0 +1,14 @@
#chat_box.home {
grid:
' settings new close ' auto
' panel_home panel_home panel_home ' 1fr
/ auto 1fr auto ;
}
#chat_box.home .chat_item#chat_settings,
#chat_box.home .chat_item#chat_new,
#chat_box.home .chat_item#chat_close,
#chat_box.home .chat_item#chat_panel_home {
display: flex;
}

14
tests_hugo/chat_node/chat_client/style/layout_mute.css Normal file
View File

@@ -0,0 +1,14 @@
#chat_box.mute {
grid:
' back_user user close ' auto
' panel_mute panel_mute panel_mute ' 1fr
/ auto 1fr auto ;
}
#chat_box.mute .chat_item#chat_back_user,
#chat_box.mute .chat_item#chat_user,
#chat_box.mute .chat_item#chat_close,
#chat_box.mute .chat_item#chat_panel_mute {
display: flex;
}

14
tests_hugo/chat_node/chat_client/style/layout_new.css Normal file
View File

@@ -0,0 +1,14 @@
#chat_box.new {
grid:
' back_home new close ' auto
' panel_new panel_new panel_new ' 1fr
/ auto 1fr auto ;
}
#chat_box.new .chat_item#chat_back_home,
#chat_box.new .chat_item#chat_new,
#chat_box.new .chat_item#chat_close,
#chat_box.new .chat_item#chat_panel_new {
display: flex;
}

14
tests_hugo/chat_node/chat_client/style/layout_protected.css Normal file
View File

@@ -0,0 +1,14 @@
#chat_box.protected {
grid:
' back_new room_name close ' auto
' panel_protected panel_protected panel_protected ' 1fr
/ auto 1fr auto ;
}
#chat_box.protected .chat_item#chat_back_new,
#chat_box.protected .chat_item#chat_room_name,
#chat_box.protected .chat_item#chat_close,
#chat_box.protected .chat_item#chat_panel_protected {
display: flex;
}

17
tests_hugo/chat_node/chat_client/style/layout_room.css Normal file
View File

@@ -0,0 +1,17 @@
#chat_box.room {
grid:
' back_home room_name close ' auto
' msg_thread msg_thread msg_thread ' 1fr
' write write send ' auto
/ auto 1fr 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_send,
#chat_box.room .chat_item#chat_write {
display: flex;
}

14
tests_hugo/chat_node/chat_client/style/layout_room_set.css Normal file
View File

@@ -0,0 +1,14 @@
#chat_box.room_set {
grid:
' back_room 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_room,
#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;
}

14
tests_hugo/chat_node/chat_client/style/layout_settings.css Normal file
View File

@@ -0,0 +1,14 @@
#chat_box.settings {
grid:
' back_home settings close ' auto
' panel_settings panel_settings panel_settings ' 1fr
/ auto 1fr auto ;
}
#chat_box.settings .chat_item#chat_back_home,
#chat_box.settings .chat_item#chat_settings,
#chat_box.settings .chat_item#chat_close,
#chat_box.settings .chat_item#chat_panel_settings {
display: flex;
}

14
tests_hugo/chat_node/chat_client/style/layout_user.css Normal file
View File

@@ -0,0 +1,14 @@
#chat_box.user {
grid:
' back_room user close ' auto
' panel_user panel_user panel_user ' 1fr
/ auto 1fr auto ;
}
#chat_box.user .chat_item#chat_back_room,
#chat_box.user .chat_item#chat_user,
#chat_box.user .chat_item#chat_close,
#chat_box.user .chat_item#chat_panel_user {
display: flex;
}