From 9d4bb85c2d255b97a0bb5f9434b7dbb0c7344234 Mon Sep 17 00:00:00 2001
From: hugogogo <hulamy@e3r2p16.clusters.42paris.fr>
Date: Sat, 17 Dec 2022 11:04:29 +0100
Subject: [PATCH] wip mute panel

---
 tests_hugo/chat_node/chat_client/chat.html    | 153 +++++++++++++++++-
 .../chat_node/chat_client/style/chat_form.css |  40 +++++
 .../chat_client/style/layout_mute.css         |   2 +
 3 files changed, 193 insertions(+), 2 deletions(-)

diff --git a/tests_hugo/chat_node/chat_client/chat.html b/tests_hugo/chat_node/chat_client/chat.html
index aab91a18..f25c61e0 100644
--- a/tests_hugo/chat_node/chat_client/chat.html
+++ b/tests_hugo/chat_node/chat_client/chat.html
@@ -237,8 +237,157 @@
 
 			<!-- MUTE -->
 			<div class="chat_item chat_panel chat_panel_mute" id="chat_panel_mute">
-				<!-- content -->
-				panel mute
+				<p class="__center">mute this user for a time :</p>
+				<form>
+					<!-- forever -->
+					<input  id="chat_mute_forever" type="checkbox" class="_check_show_next"></input>
+					<label for="chat_mute_forever" class="_checkbox"><p>forever</p></label>
+					<div class="__content _is_gray">
+						<!-- minutes -->
+						<label for="chat_mute_minutes" class="_select">
+							<p>minutes :</p>
+							<select id="chat_mute_minutes">
+								<option value="01">00</option>
+								<option value="01">01</option>
+								<option value="02">02</option>
+								<option value="03">03</option>
+								<option value="04">04</option>
+								<option value="05">05</option>
+								<option value="06">06</option>
+								<option value="07">07</option>
+								<option value="10">10</option>
+								<option value="11">11</option>
+								<option value="12">12</option>
+								<option value="13">13</option>
+								<option value="14">14</option>
+								<option value="15">15</option>
+								<option value="16">16</option>
+								<option value="17">17</option>
+								<option value="20">20</option>
+								<option value="21">21</option>
+								<option value="22">22</option>
+								<option value="23">23</option>
+								<option value="24">24</option>
+								<option value="25">25</option>
+								<option value="26">26</option>
+								<option value="27">27</option>
+								<option value="30">30</option>
+								<option value="31">31</option>
+								<option value="32">32</option>
+								<option value="33">33</option>
+								<option value="34">34</option>
+								<option value="35">35</option>
+								<option value="36">36</option>
+								<option value="37">37</option>
+								<option value="40">40</option>
+								<option value="41">41</option>
+								<option value="42">42</option>
+								<option value="43">43</option>
+								<option value="44">44</option>
+								<option value="45">45</option>
+								<option value="46">46</option>
+								<option value="47">47</option>
+								<option value="50">50</option>
+								<option value="51">51</option>
+								<option value="52">52</option>
+								<option value="53">53</option>
+								<option value="54">54</option>
+								<option value="55">55</option>
+								<option value="56">56</option>
+								<option value="57">57</option>
+								<option value="60">60</option>
+							</select>
+						</label>
+						<!-- hours -->
+						<label for="chat_mute_hours" class="_select">
+							<p>hours :</p>
+							<select id="chat_mute_hours">
+								<option value="01">00</option>
+								<option value="01">01</option>
+								<option value="02">02</option>
+								<option value="03">03</option>
+								<option value="04">04</option>
+								<option value="05">05</option>
+								<option value="06">06</option>
+								<option value="07">07</option>
+								<option value="10">10</option>
+								<option value="11">11</option>
+								<option value="12">12</option>
+								<option value="13">13</option>
+								<option value="14">14</option>
+								<option value="15">15</option>
+								<option value="16">16</option>
+								<option value="17">17</option>
+								<option value="20">20</option>
+								<option value="21">21</option>
+								<option value="22">22</option>
+								<option value="23">23</option>
+								<option value="24">24</option>
+								<option value="25">25</option>
+								<option value="26">26</option>
+								<option value="27">27</option>
+								<option value="30">30</option>
+								<option value="31">31</option>
+								<option value="32">32</option>
+								<option value="33">33</option>
+								<option value="34">34</option>
+								<option value="35">35</option>
+								<option value="36">36</option>
+								<option value="37">37</option>
+								<option value="40">40</option>
+								<option value="41">41</option>
+								<option value="42">42</option>
+								<option value="43">43</option>
+								<option value="44">44</option>
+								<option value="45">45</option>
+								<option value="46">46</option>
+								<option value="47">47</option>
+								<option value="50">50</option>
+								<option value="51">51</option>
+								<option value="52">52</option>
+								<option value="53">53</option>
+								<option value="54">54</option>
+								<option value="55">55</option>
+								<option value="56">56</option>
+								<option value="57">57</option>
+								<option value="60">60</option>
+							</select>
+						</label>
+						<!-- days -->
+						<label for="chat_mute_days" class="_select">
+							<p>days :</p>
+							<select id="chat_mute_days">
+								<option value="00">00</option>
+								<option value="01">01</option>
+								<option value="02">02</option>
+								<option value="03">03</option>
+								<option value="04">04</option>
+								<option value="05">05</option>
+								<option value="06">06</option>
+								<option value="07">07</option>
+								<option value="10">10</option>
+								<option value="11">11</option>
+								<option value="12">12</option>
+								<option value="13">13</option>
+								<option value="14">14</option>
+								<option value="15">15</option>
+								<option value="16">16</option>
+								<option value="17">17</option>
+								<option value="20">20</option>
+								<option value="21">21</option>
+								<option value="22">22</option>
+								<option value="23">23</option>
+								<option value="24">24</option>
+								<option value="25">25</option>
+								<option value="26">26</option>
+								<option value="27">27</option>
+								<option value="30">30</option>
+								<option value="31">31</option>
+							</select>
+						</label>
+					</div>
+					<input type="submit" value="&#x2BA1">
+				</form>
 			</div>
 
 			<!-- WRITE -->
diff --git a/tests_hugo/chat_node/chat_client/style/chat_form.css b/tests_hugo/chat_node/chat_client/style/chat_form.css
index 22475524..148ac85f 100644
--- a/tests_hugo/chat_node/chat_client/style/chat_form.css
+++ b/tests_hugo/chat_node/chat_client/style/chat_form.css
@@ -63,3 +63,43 @@
 }
 
 
+/* select
+*/
+#chat_box .chat_item form label._select {
+	flex-direction: row;
+	margin-left: auto;
+}
+#chat_box .chat_item form select {
+	margin: auto 0px;
+}
+
+
+/* checkbox
+		<input  id="chat_mute_forever" type="checkbox" class="_checkbox"></input>
+		<label for="chat_mute_forever">forever</label>
+*/
+#chat_box .chat_item form input[type=checkbox] {
+	display: none;
+}
+#chat_box .chat_item form label._checkbox {
+	margin: 0px 0px 0px auto;
+	padding-right: 10px;
+	cursor: pointer;
+}
+#chat_box .chat_item form label._checkbox::after {
+	content: "";
+	position: absolute;
+	top: calc(50% - 6px);
+	right: 0px;
+	width: 12px;
+	height: 12px;
+	border: 2px solid rgb(150, 150, 150);
+	box-sizing: border-box;
+	cursor: pointer;
+}
+#chat_box .chat_item form input[type=checkbox]:checked
++ label._checkbox::after {
+	background-color: rgb(200, 200, 200);
+}
+
+
diff --git a/tests_hugo/chat_node/chat_client/style/layout_mute.css b/tests_hugo/chat_node/chat_client/style/layout_mute.css
index 46b649b1..667809f8 100644
--- a/tests_hugo/chat_node/chat_client/style/layout_mute.css
+++ b/tests_hugo/chat_node/chat_client/style/layout_mute.css
@@ -26,3 +26,5 @@
 	text-align: center;
 }
 
+
+