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

wip drop down menu

Browse Source
This commit is contained in:
lenovo
2022-12-04 22:50:43 +01:00
parent 823e1dc588
commit 3d9c9f56f4
8 changed files with 1491 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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">

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

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

42
tests_hugo/chat_node/chat_client/style/drop_down_menu.css Normal file
View File

@@ -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 > * {
}

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

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

16
tests_hugo/chat_node/chat_client/style/msg_controls.css Normal file
View File

@@ -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 {
}