wip drop down menu

tests_hugo/chat_node/README.md

@@ -2,8 +2,7 @@
 - [socket io multi room chat](http://psitsmike.com/2011/10/node-js-and-socket-io-multiroom-chat-tutorial/)
 
 first time :
-	npm install --save express
+	npm install --save express socket.io cors
-	npm install --save socket.io
 	sudo npm install -g nodemon
 
 next time :
@@ -19,8 +18,37 @@ anytime :
 - [ ] what to do with message not received ?
 
 ```
--> create_room('create_room', room_name);
+-> create_public_conv( room_name );
--> change_room('change_room', room_name);
+-> create_private_conv( room_name );
--> get_room_history('get_room_history', room_name);
+->   create_protected_conv( room_name );
-```
+-> create_direct_conv( room_name );
+
+-> change_conv( room_name );
+
+-> get_conv_history( room_name );
+-> get_last_conv();
+
+-> get_my_convs_directs( );
+-> get_my_convs_rooms( );
+-> get_public_convs( );
+
+[ list     ][ create   ][ join     ]
+  "directs"   . [direct]  (public and protected)
+  "rooms"     . [room]
+                . public
+                . private
+                . protected
+
+on connection :
+	get_convs_directs();
+	get_convs_rooms();
+	last_conv = get_last_conv();
+	if (last_conv)
+		get_conv_history(last_conv);
+
+
+```
+## todo:
+- check if drop down menu works also with buttons instead of <div tabindex=0>
+- add window for option when select 'room'
 

tests_hugo/chat_node/chat_client/chat.html

@@ -13,6 +13,33 @@
 		<div class="chat_box">
 
 			<div class="chat_item controls_area">
+				<div class="control list drop_down_menu" tabindex=0>
+					<!--
+					<p class="drop_down_title">list</p>
+					<p class="drop_down_items">directs</p>
+					<p class="drop_down_items">rooms</p>
+					-->
+					<div class="drop_down_title" tabindex=0><p>list</p></div>
+					<div class="drop_down_items" tabindex=0>
+						<p>directs chats</p>
+						<p>rooms</p>
+					</div>
+				</div>
+				<div class="control create drop_down_menu" tabindex=0>
+					<!--
+					<p class="drop_down_title">create</p>
+					<p class="drop_down_items">direct</p>
+					<p class="drop_down_items">room</p>
+					-->
+					<div class="drop_down_title" tabindex=0><p>create</p></div>
+					<div class="drop_down_items" tabindex=0>
+						<p>direct chat</p>
+						<p>room</p>
+					</div>
+				</div>
+				<div class="control join">
+					<p>join</p>
+				</div>
 			</div>
 
 			<label class="chat_item open_close button" for="chat_input">

tests_hugo/chat_node/chat_client/style/chat.css

@@ -1,6 +1,8 @@
 
 @import 'msg_thread.css';
 @import 'msg_write.css';
+@import 'msg_controls.css';
+@import 'drop_down_menu.css';
 
 /**
  * GRID

tests_hugo/chat_node/chat_client/style/drop_down_menu.css

@@ -0,0 +1,42 @@
+.drop_down_menu,
+.drop_down_menu * {
+	display: flex;
+	flex-direction: column;
+	margin: auto;
+	position: relative;
+}
+.drop_down_menu {
+	z-index: 1;
+}
+.drop_down_menu .drop_down_title {
+	padding: 5px;
+	pointer-events: none;
+}
+.drop_down_menu .drop_down_items {
+	position: absolute;
+	top: 100%;
+	left: 0%;
+	width: auto;
+	min-width: 100%;
+	background-color: white;
+	white-space: nowrap;
+	opacity: 0;
+	visibility: hidden;
+	transition: visibility 0.3s;
+}
+.drop_down_menu .drop_down_items > * {
+	padding: 5px;
+}
+
+.drop_down_menu:focus {
+}
+.drop_down_menu:focus .drop_down_title {
+	pointer-events: auto;
+}
+.drop_down_menu:focus .drop_down_items {
+	opacity: 1;
+	visibility: visible;
+}
+.drop_down_menu:focus .drop_down_items > * {
+}
+

tests_hugo/chat_node/chat_client/style/globals.css

@@ -0,0 +1,3 @@
+.cursor_pointer {
+	cursor: pointer;
+}

tests_hugo/chat_node/chat_client/style/msg_controls.css

@@ -0,0 +1,16 @@
+.chat_item.controls_area {
+}
+.chat_item.controls_area .control {
+	margin: auto;
+	cursor: pointer;
+}
+.chat_item.controls_area .control p {
+	margin: 0px;
+}
+.chat_item.controls_area .control.list {
+}
+.chat_item.controls_area .control.create {
+}
+.chat_item.controls_area .control.join {
+}
+

tests_hugo/chat_node/chat_server/package.json

@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "cors": "^2.8.5",
+    "express": "^4.18.2",
+    "socket.io": "^4.5.4"
+  }
+}