From 0b326ad853a77032a39851b36ea38fce3f6bd1d0 Mon Sep 17 00:00:00 2001
From: hugogogo <hulamy@e3r2p8.clusters.42paris.fr>
Date: Fri, 16 Dec 2022 14:35:46 +0100
Subject: [PATCH] added lock logo to blocked users

---
 tests_hugo/chat_node/chat_client/chat.html    | 87 +++++++++++--------
 .../chat_node/chat_client/style/chat.css      |  2 +-
 .../chat_client/style/chat__global.css        | 13 ---
 .../chat_client/style/chat_blocked.css        | 39 +++++++++
 .../chat_client/style/chat_buttons.css        | 12 +++
 .../chat_client/style/layout_home.css         |  7 --
 .../chat_client/style/layout_new.css          |  1 +
 7 files changed, 105 insertions(+), 56 deletions(-)
 create mode 100644 tests_hugo/chat_node/chat_client/style/chat_blocked.css

diff --git a/tests_hugo/chat_node/chat_client/chat.html b/tests_hugo/chat_node/chat_client/chat.html
index 14c2497b..a282f67e 100644
--- a/tests_hugo/chat_node/chat_client/chat.html
+++ b/tests_hugo/chat_node/chat_client/chat.html
@@ -21,18 +21,18 @@
 
 		<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_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_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_send      _btn" id="chat_send"       onclick="send_msg()"         title="send"    ><p>send</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_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_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>
 			<p      class="chat_item       chat_create"         id="chat_create"                                                  >create</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_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_user _btn" id="chat_back_user"  onclick="layout('user')"     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_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>
 
 
 			<!-- --------------------------------
@@ -42,19 +42,19 @@
 			<!-- HOME -->
 			<div class="chat_item chat_panel chat_panel_home" id="chat_panel_home">
 				<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">
 						<p class="__center">/ you have no chat room yet /</p>
 					</div>
 					<!-- 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>
 					</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>
 					</button>
-					<button class="chat_room_name _btn" onclick="layout('room')">
+					<button class="chat_room_name btn" onclick="layout('room')">
 						<p class="__left">placeholder</p>
 					</button>
 					<!-- END placeholders -->
@@ -80,24 +80,24 @@
 
 			<!-- 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>
-				<div id="chat_api_publics_rooms" class="chat_api chat_public_rooms __list_btn">
-					<div class="chat_public_rooms __show_if_only_child">
+				<div id="chat_api_publics_rooms" class="chat_api chat_public_rooms list_btn">
+					<div class="__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')">
+					<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')">
+					<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')">
+					<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')">
+					<button class="chat_room_name btn" onclick="layout('room')">
 						<p class="__left">one more room</p>
 					</button>
 					<!-- END placeholders -->
@@ -107,23 +107,20 @@
 			<!-- SETTINGS -->
 			<div class="chat_item chat_panel chat_panel_settings" id="chat_panel_settings">
 				<p>blocked users :</p>
-				<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>
+				<div id="chat_api_blocked_users" class="chat_api chat_blocked_users list_btn">
 					<!-- placeholders -------
 					-->
-					<button class="chat_user _blocked _btn" onclick="layout('user')">
-						<p class="__left">user 1</p>
+					<button class="chat_user btn" onclick="layout('user')">
+						<p class="__left blocked">user 1</p>
 					</button>
-					<button class="chat_user _blocked _btn" onclick="layout('user')">
-						<p class="__left">user 2</p>
+					<button class="chat_user btn" onclick="layout('user')">
+						<p class="__left blocked">user 2</p>
 					</button>
-					<button class="chat_user _blocked _btn" onclick="layout('user')">
-						<p class="__left">user 3</p>
+					<button class="chat_user btn" onclick="layout('user')">
+						<p class="__left blocked">user 3</p>
 					</button>
-					<button class="chat_user _blocked _btn" onclick="layout('user')">
-						<p class="__left">user 4</p>
+					<button class="chat_user btn" onclick="layout('user')">
+						<p class="__left blocked">user 4</p>
 					</button>
 					<!-- END placeholders -->
 				</div>
@@ -131,8 +128,28 @@
 
 			<!-- ROOM SET -->
 			<div class="chat_item chat_panel chat_panel_room_set" id="chat_panel_room_set">
-				<!-- content -->
-				panel room settings
+				<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="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>
 
 			<!-- PROTECTED -->
diff --git a/tests_hugo/chat_node/chat_client/style/chat.css b/tests_hugo/chat_node/chat_client/style/chat.css
index 511b3ef4..ce53c085 100644
--- a/tests_hugo/chat_node/chat_client/style/chat.css
+++ b/tests_hugo/chat_node/chat_client/style/chat.css
@@ -21,7 +21,7 @@ cxv
 @import 'chat_close.css';
 @import 'chat_write.css';
 @import 'chat_msg.css';
-@import 'chat_room_list.css';
+@import 'chat_blocked.css';
 
 /*
 @import '_chat_controls.css';
diff --git a/tests_hugo/chat_node/chat_client/style/chat__global.css b/tests_hugo/chat_node/chat_client/style/chat__global.css
index e8e26590..4eafe842 100644
--- a/tests_hugo/chat_node/chat_client/style/chat__global.css
+++ b/tests_hugo/chat_node/chat_client/style/chat__global.css
@@ -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);
-}
-
-
-
diff --git a/tests_hugo/chat_node/chat_client/style/chat_blocked.css b/tests_hugo/chat_node/chat_client/style/chat_blocked.css
new file mode 100644
index 00000000..1d000227
--- /dev/null
+++ b/tests_hugo/chat_node/chat_client/style/chat_blocked.css
@@ -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);
+}
+
diff --git a/tests_hugo/chat_node/chat_client/style/chat_buttons.css b/tests_hugo/chat_node/chat_client/style/chat_buttons.css
index 3f1147f1..2eb5cf94 100644
--- a/tests_hugo/chat_node/chat_client/style/chat_buttons.css
+++ b/tests_hugo/chat_node/chat_client/style/chat_buttons.css
@@ -20,3 +20,15 @@
   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);
+}
+
diff --git a/tests_hugo/chat_node/chat_client/style/layout_home.css b/tests_hugo/chat_node/chat_client/style/layout_home.css
index e209f441..3915877a 100644
--- a/tests_hugo/chat_node/chat_client/style/layout_home.css
+++ b/tests_hugo/chat_node/chat_client/style/layout_home.css
@@ -51,10 +51,3 @@
 	*/
 }
 
-
-/* button "settings" as 3 dots
-*/
-#chat_box.home #chat_api_room_list {
-	background-color: rgb(240, 240, 240);
-}
-
diff --git a/tests_hugo/chat_node/chat_client/style/layout_new.css b/tests_hugo/chat_node/chat_client/style/layout_new.css
index fadb6d6c..c1513e4a 100644
--- a/tests_hugo/chat_node/chat_client/style/layout_new.css
+++ b/tests_hugo/chat_node/chat_client/style/layout_new.css
@@ -12,6 +12,7 @@
 	display: flex;
 }
 
+
 /* button "new" appearance
 */
 /* add or remove '.chat_item' to toggle the hover effect */