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

user layout works with classes

Browse Source
This commit is contained in:
hugogogo
2022-12-16 21:10:47 +01:00
parent 30faab336e
commit cdef20795b
2 changed files with 110 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,18 +8,53 @@
<body> <body>
<br><br><button onclick="chat_layout(this.innerText)">close</button> <br><br> <button onclick="chat_layout(this.innerText)">close</button>
<br><br><button onclick="chat_layout(this.innerText)">home</button> <br><br> <button onclick="chat_layout(this.innerText)">home</button>
<br><br><button onclick="chat_layout(this.innerText)">room</button> <br><br> <button onclick="chat_layout(this.innerText)">room</button>
<br><br><button onclick="chat_layout(this.innerText)">new</button> <br><br> <button onclick="chat_layout(this.innerText)">new</button>
<br><br><button onclick="chat_layout(this.innerText)">settings</button> <br><br> <button onclick="chat_layout(this.innerText)">settings</button>
<br><br><button onclick="chat_layout(this.innerText)">room_set</button> <br><br> <button onclick="chat_layout(this.innerText)">room_set</button>
<br><br><button onclick="chat_layout(this.innerText)">protected</button> <br><br> <button onclick="chat_layout(this.innerText)">protected</button>
<br><br><button onclick="chat_layout(this.innerText)">create</button> <br><br> <button onclick="chat_layout(this.innerText)">create</button>
<br><br><button onclick="chat_layout(this.innerText)">user</button> <br><br> <button onclick="chat_layout(this.innerText)">user</button>
<br><br><button onclick="chat_layout(this.innerText)">mute</button> <br><br>&nbsp;&nbsp;<button onclick="chat_layout(this.innerText)">user _blocked</button>
<br><br>&nbsp;&nbsp;<button onclick="chat_layout(this.innerText)">user _admin</button>
<br><br>&nbsp;&nbsp;<button onclick="chat_layout(this.innerText)">user _admin _muted</button>
<br><br>&nbsp;&nbsp;<button onclick="chat_layout(this.innerText)">user _admin _blocked</button>
<br><br>&nbsp;&nbsp;<button onclick="chat_layout(this.innerText)">user _admin _blocked _muted</button>
<br><br>&nbsp;&nbsp;<button onclick="chat_layout(this.innerText)">user _blocked _muted</button>
<br><br>&nbsp;&nbsp;<button onclick="chat_layout(this.innerText)">user _muted</button>
<br><br>&nbsp;&nbsp;<button onclick="chat_layout(this.innerText)">user _room_set _blocked</button>
<br><br>&nbsp;&nbsp;<button onclick="chat_layout(this.innerText)">user _room_set _admin</button>
<br><br>&nbsp;&nbsp;<button onclick="chat_layout(this.innerText)">user _room_set _admin _muted</button>
<br><br>&nbsp;&nbsp;<button onclick="chat_layout(this.innerText)">user _room_set _admin _blocked</button>
<br><br>&nbsp;&nbsp;<button onclick="chat_layout(this.innerText)">user _room_set _admin _blocked _muted</button>
<br><br>&nbsp;&nbsp;<button onclick="chat_layout(this.innerText)">user _room_set _blocked _muted</button>
<br><br>&nbsp;&nbsp;<button onclick="chat_layout(this.innerText)">user _room_set _muted</button>
<br><br> <button onclick="chat_layout(this.innerText)">mute</button>
<div class="close" id="chat_box"> <div class="close" id="chat_box">
<!--
classes:
close -> layout close
home -> layout home
room -> layout room
new -> layout new
settings -> layout settings
room_set -> layout room_set
protected -> layout protected
create -> layout create
mute -> layout mute
user -> layout user
_blocked -> for user layout : user is blocked
_muted -> for user layout : user is muted
_admin -> for user layout : you are admin
_room_set -> for user layout : comes from room_set
_settings -> for user layout : comes from settings
classes for layout must replace the entire previous class
but classes starting with "_" must be added to existing class
-->
<button class="chat_item chat_chat btn" id="chat_chat" onclick="chat_layout('home')" ><p>chat</p></button> <button class="chat_item chat_chat btn" id="chat_chat" onclick="chat_layout('home')" ><p>chat</p></button>
<button class="chat_item chat_close btn" id="chat_close" onclick="chat_layout('close')" title="close" ></button> <button class="chat_item chat_close btn" id="chat_close" onclick="chat_layout('close')" title="close" ></button>
@@ -173,7 +208,7 @@
<p class="__center" id="chat_protected_title">this room is protected</p> <p class="__center" id="chat_protected_title">this room is protected</p>
<form> <form>
<label for="chat_pswd"><p>password :</p></label> <label for="chat_pswd"><p>password :</p></label>
<input id="chat_pswd" type="password"> <input id="chat_pswd" type="password" required>
<input type="submit" value="&#x2BA1"> <input type="submit" value="&#x2BA1">
</form> </form>
</div> </div>
@@ -181,18 +216,19 @@
<!-- CREATE --> <!-- CREATE -->
<div class="chat_item chat_panel chat_panel_create" id="chat_panel_create"> <div class="chat_item chat_panel chat_panel_create" id="chat_panel_create">
<form> <form>
<!-- name: -->
<label for="chat_name"><p>name :</p></label> <label for="chat_name"><p>name :</p></label>
<input id="chat_name" required> <input id="chat_name" required>
<!-- [ ] pubic -->
<input id="chat_public" type="radio" name="chat_create_type" checked> <input id="chat_public" type="radio" name="chat_create_type" checked>
<label for="chat_public" class="_radio"><p>public</p></label> <label for="chat_public" class="_radio"><p>public</p></label>
<!-- [ ] private -->
<input id="chat_private" type="radio" name="chat_create_type"> <input id="chat_private" type="radio" name="chat_create_type">
<label for="chat_private" class="_radio"><p>private</p></label> <label for="chat_private" class="_radio"><p>private</p></label>
<!-- [ ] protected -->
<input id="chat_protected" class="_check_show_next" type="radio" name="chat_create_type"> <input id="chat_protected" class="_check_show_next" type="radio" name="chat_create_type">
<label for="chat_protected" class="_radio"><p>protected</p></label> <label for="chat_protected" class="_radio"><p>protected</p></label>
<!-- [x] protected -->
<div class="__content _is_hidden"> <div class="__content _is_hidden">
<label for="chat_pswd"><p>choose a password :</p></label> <label for="chat_pswd"><p>choose a password :</p></label>
<input id="chat_pswd" type="password" placeholder="minimum 8 characters" minlength="8"> <input id="chat_pswd" type="password" placeholder="minimum 8 characters" minlength="8">
@@ -205,8 +241,22 @@
<!-- USER --> <!-- USER -->
<div class="chat_item chat_panel chat_panel_user" id="chat_panel_user"> <div class="chat_item chat_panel chat_panel_user" id="chat_panel_user">
<!-- content --> <p class="__center">user options :</p>
panel user <div class="chat_user_btn_wrapper">
<button class="chat_profile_btn btn"><p>view profile</p></button>
<button class="chat_game_btn btn"><p>game invitation</p></button>
<button class="chat_block_btn btn">
<p id="chat_user_block">block</p>
<p id="chat_user_unblock">unblock</p>
</button>
<div id="chat_user_admin">
<button class="chat_admin_btn btn"><p>make admin</p></button>
<button class="chat_mute_btn btn" id="chat_mute_btn">
<p id="chat_user_mute">mute</p>
<p id="chat_user_unmute">unmute</p>
</button>
</div>
</div>
</div> </div>
<!-- MUTE --> <!-- MUTE -->

64
tests_hugo/chat_node/chat_client/style/layout_user.css
View File

@@ -13,30 +13,52 @@
} }
/* back btn
*/
#chat_box.user .chat_item.chat_back button.back_room {
display: flex;
}
/* from settings */
#chat_box._settings .chat_item.chat_back button.btn {
display: none;
}
#chat_box._settings .chat_item.chat_back button.back_settings {
display: flex;
}
/* from room settings */
#chat_box._room_set .chat_item.chat_back button.btn {
display: none;
}
#chat_box._room_set .chat_item.chat_back button.back_room_set {
display: flex;
}
/* title "user" appearance /* title "user" appearance
*/ */
#chat_box.user .chat_item.chat_user { #chat_box.user .chat_item.chat_user {
text-align: center; text-align: center;
} }
/* back btn
*/
#chat_box.user .chat_item.chat_back button.back_home {display: flex;}
/* from settings */
#chat_box._settings .chat_item.chat_back button.btn {display: none;}
#chat_box._settings .chat_item.chat_back button.back_settings {display: flex;}
/* from room settings */
#chat_box._room_set .chat_item.chat_back button.btn {display: none;}
#chat_box._room_set .chat_item.chat_back button.back_room_set {display: flex;}
/* buttons appearance
*/
#chat_box.user .chat_item.chat_panel_user .chat_user_btn_wrapper {
margin: 0px auto;
}
#chat_box.user .chat_item.chat_panel_user button {
margin: 10px;
}
#chat_box.user #chat_user_admin {
margin: 0px;
}
/* toggle buttons according to chat_box class
*/
/* block/unblock */
#chat_box.user #chat_user_unblock {display: none;}
#chat_box.user._blocked #chat_user_block {display: none;}
#chat_box.user._blocked #chat_user_unblock {display: flex;}
/* admin */
#chat_box.user #chat_user_admin {display: none;}
#chat_box.user._admin #chat_user_admin {display: flex;}
/* mute if from room */
#chat_box.user #chat_mute_btn {display: none;}
#chat_box.user._room_set #chat_mute_btn {display: flex;}
/* mute/unmute */
#chat_box.user #chat_user_unmute {display: none;}
#chat_box.user._muted #chat_user_mute {display: none;}
#chat_box.user._muted #chat_user_unmute {display: flex;}