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

added lock logo to blocked users

Browse Source
This commit is contained in:
hugogogo
2022-12-16 14:35:46 +01:00
parent 41184ecdce
commit 0b326ad853
7 changed files with 105 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -21,18 +21,18 @@
<div class="close" id="chat_box"> <div class="close" id="chat_box">
<button class="chat_item chat_chat _btn" id="chat_chat" onclick="layout('home')" ><p>chat</p></button> <button class="chat_item chat_chat btn" id="chat_chat" onclick="layout('home')" ><p>chat</p></button>
<button class="chat_item chat_close _btn" id="chat_close" onclick="layout('close')" title="close" ></button> <button class="chat_item chat_close btn" id="chat_close" onclick="layout('close')" title="close" ></button>
<button class="chat_item chat_new _btn" id="chat_new" onclick="layout('new')" title="new" ><p>new</p></button> <button class="chat_item chat_new btn" id="chat_new" onclick="layout('new')" title="new" ><p>new</p></button>
<button class="chat_item chat_settings _btn" id="chat_settings" onclick="layout('settings')" title="settings"><p>settings</p></button> <button class="chat_item chat_settings btn" id="chat_settings" onclick="layout('settings')" title="settings"><p>settings</p></button>
<button class="chat_item chat_room_name _btn" id="chat_room_name" onclick="layout('room_set')" ><p>placeholder</p></button> <button class="chat_item chat_room_name btn" id="chat_room_name" onclick="layout('room_set')" ><p>placeholder</p></button>
<button class="chat_item chat_send _btn" id="chat_send" onclick="send_msg()" title="send" ><p>send</p></button> <button class="chat_item chat_send btn" id="chat_send" onclick="send_msg()" title="send" ><p>send</p></button>
<p class="chat_item chat_create" id="chat_create" >create</p> <p class="chat_item chat_create" id="chat_create" >create</p>
<p class="chat_item chat_user" id="chat_user" >placeholder</p> <p class="chat_item chat_user" id="chat_user" >placeholder</p>
<button class="chat_item _back chat_back_room _btn" id="chat_back_room" onclick="layout('room')" title="go_back" ></button> <button class="chat_item _back chat_back_room btn" id="chat_back_room" onclick="layout('room')" title="go_back" ></button>
<button class="chat_item _back chat_back_home _btn" id="chat_back_home" onclick="layout('home')" title="go_back" ></button> <button class="chat_item _back chat_back_home btn" id="chat_back_home" onclick="layout('home')" title="go_back" ></button>
<button class="chat_item _back chat_back_new _btn" id="chat_back_new" onclick="layout('new')" title="go_back" ></button> <button class="chat_item _back chat_back_new btn" id="chat_back_new" onclick="layout('new')" title="go_back" ></button>
<button class="chat_item _back chat_back_user _btn" id="chat_back_user" onclick="layout('user')" title="go_back" ></button> <button class="chat_item _back chat_back_user btn" id="chat_back_user" onclick="layout('user')" title="go_back" ></button>
<!-- -------------------------------- <!-- --------------------------------
@@ -42,19 +42,19 @@
<!-- HOME --> <!-- HOME -->
<div class="chat_item chat_panel chat_panel_home" id="chat_panel_home"> <div class="chat_item chat_panel chat_panel_home" id="chat_panel_home">
<p class="__center">list of your rooms :</p> <p class="__center">list of your rooms :</p>
<div id="chat_api_room_list" class="chat_api __list_btn"> <div id="chat_api_room_list" class="chat_api list_btn">
<div class="chat_room_name __show_if_only_child"> <div class="chat_room_name __show_if_only_child">
<p class="__center">/ you have no chat room yet /</p> <p class="__center">/ you have no chat room yet /</p>
</div> </div>
<!-- placeholders ------- <!-- placeholders -------
--> -->
<button class="chat_room_name _btn" onclick="layout('room')"> <button class="chat_room_name btn" onclick="layout('room')">
<p class="__left">a room</p> <p class="__left">a room</p>
</button> </button>
<button class="chat_room_name _btn" onclick="layout('room')"> <button class="chat_room_name btn" onclick="layout('room')">
<p class="__left">another room</p> <p class="__left">another room</p>
</button> </button>
<button class="chat_room_name _btn" onclick="layout('room')"> <button class="chat_room_name btn" onclick="layout('room')">
<p class="__left">placeholder</p> <p class="__left">placeholder</p>
</button> </button>
<!-- END placeholders --> <!-- END placeholders -->
@@ -80,24 +80,24 @@
<!-- NEW --> <!-- NEW -->
<div class="chat_item chat_panel chat_panel_new" id="chat_panel_new"> <div class="chat_item chat_panel chat_panel_new" id="chat_panel_new">
<button class="chat_create_btn _btn"><p>create</p></button> <button class="chat_create_btn btn"><p>create</p></button>
<p>join room :</p> <p>join room :</p>
<div id="chat_api_publics_rooms" class="chat_api chat_public_rooms __list_btn"> <div id="chat_api_publics_rooms" class="chat_api chat_public_rooms list_btn">
<div class="chat_public_rooms __show_if_only_child"> <div class="__show_if_only_child">
<p class="__center">/ there are no public rooms yet /</p> <p class="__center">/ there are no public rooms yet /</p>
</div> </div>
<!-- placeholders ------- <!-- placeholders -------
--> -->
<button class="chat_room_name _btn" onclick="layout('room')"> <button class="chat_room_name btn" onclick="layout('room')">
<p class="__left">join room</p> <p class="__left">join room</p>
</button> </button>
<button class="chat_room_name _btn" onclick="layout('room')"> <button class="chat_room_name btn" onclick="layout('room')">
<p class="__left">one room</p> <p class="__left">one room</p>
</button> </button>
<button class="chat_room_name _btn" onclick="layout('room')"> <button class="chat_room_name btn" onclick="layout('room')">
<p class="__left">another room</p> <p class="__left">another room</p>
</button> </button>
<button class="chat_room_name _btn" onclick="layout('room')"> <button class="chat_room_name btn" onclick="layout('room')">
<p class="__left">one more room</p> <p class="__left">one more room</p>
</button> </button>
<!-- END placeholders --> <!-- END placeholders -->
@@ -107,23 +107,20 @@
<!-- SETTINGS --> <!-- SETTINGS -->
<div class="chat_item chat_panel chat_panel_settings" id="chat_panel_settings"> <div class="chat_item chat_panel chat_panel_settings" id="chat_panel_settings">
<p>blocked users :</p> <p>blocked users :</p>
<div id="chat_api_blocked_users" class="chat_api chat_blocked_users __list_btn"> <div id="chat_api_blocked_users" class="chat_api chat_blocked_users list_btn">
<div class="__show_if_only_child">
<p class="__center">/ you haven't block any one /</p>
</div>
<!-- placeholders ------- <!-- placeholders -------
--> -->
<button class="chat_user _blocked _btn" onclick="layout('user')"> <button class="chat_user btn" onclick="layout('user')">
<p class="__left">user 1</p> <p class="__left blocked">user 1</p>
</button> </button>
<button class="chat_user _blocked _btn" onclick="layout('user')"> <button class="chat_user btn" onclick="layout('user')">
<p class="__left">user 2</p> <p class="__left blocked">user 2</p>
</button> </button>
<button class="chat_user _blocked _btn" onclick="layout('user')"> <button class="chat_user btn" onclick="layout('user')">
<p class="__left">user 3</p> <p class="__left blocked">user 3</p>
</button> </button>
<button class="chat_user _blocked _btn" onclick="layout('user')"> <button class="chat_user btn" onclick="layout('user')">
<p class="__left">user 4</p> <p class="__left blocked">user 4</p>
</button> </button>
<!-- END placeholders --> <!-- END placeholders -->
</div> </div>
@@ -131,8 +128,28 @@
<!-- ROOM SET --> <!-- ROOM SET -->
<div class="chat_item chat_panel chat_panel_room_set" id="chat_panel_room_set"> <div class="chat_item chat_panel chat_panel_room_set" id="chat_panel_room_set">
<!-- content --> <button class="chat_leave_btn btn"><p>leave</p></button>
panel room settings <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="layout('room')">
<p class="__left">join room</p>
</button>
<button class="chat_room_name btn" onclick="layout('room')">
<p class="__left">one room</p>
</button>
<button class="chat_room_name btn" onclick="layout('room')">
<p class="__left">another room</p>
</button>
<button class="chat_room_name btn" onclick="layout('room')">
<p class="__left">one more room</p>
</button>
<!-- END placeholders -->
</div>
</div> </div>
<!-- PROTECTED --> <!-- PROTECTED -->

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

@@ -21,7 +21,7 @@ cxv
@import 'chat_close.css'; @import 'chat_close.css';
@import 'chat_write.css'; @import 'chat_write.css';
@import 'chat_msg.css'; @import 'chat_msg.css';
@import 'chat_room_list.css'; @import 'chat_blocked.css';
/* /*
@import '_chat_controls.css'; @import '_chat_controls.css';

13
tests_hugo/chat_node/chat_client/style/chat__global.css
View File

@@ -45,16 +45,3 @@
} }
/* style btn when it's a list
*/
/* add or remove '._btn' to toggle the hover effect */
#chat_box .chat_item .__list_btn button {
margin: 0px;
background-color: transparent;
}
#chat_box .chat_item .__list_btn {
background-color: rgb(240, 240, 240);
}

39
tests_hugo/chat_node/chat_client/style/chat_blocked.css Normal file
View File

@@ -0,0 +1,39 @@
/*
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);
}

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

@@ -20,3 +20,15 @@
background-color: rgb(190, 190, 190); background-color: rgb(190, 190, 190);
} }
/* style btn when it's a list
add or remove '.btn' to toggle the hover effect
*/
#chat_box .list_btn button {
margin: 0px;
background-color: transparent;
}
#chat_box .list_btn {
background-color: rgb(240, 240, 240);
}

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

@@ -51,10 +51,3 @@
*/ */
} }
/* button "settings" as 3 dots
*/
#chat_box.home #chat_api_room_list {
background-color: rgb(240, 240, 240);
}

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

@@ -12,6 +12,7 @@
display: flex; display: flex;
} }
/* button "new" appearance /* button "new" appearance
*/ */
/* add or remove '.chat_item' to toggle the hover effect */ /* add or remove '.chat_item' to toggle the hover effect */