From b46432e2bf61e2b1044ce5bacc111d2af705ebc8 Mon Sep 17 00:00:00 2001
From: simplonco <simplonco@simplonco.co>
Date: Mon, 26 Dec 2022 12:32:01 +0100
Subject: [PATCH] wip layout mute

---
 .../api_front/src/pieces/chat/Chat.html       | 155 -------------
 .../api_front/src/pieces/chat/Chat.svelte     |  14 +-
 .../src/pieces/chat/Layout_mute.svelte        | 207 ++++++++++++++++++
 .../api_front/src/styles/chat/layout_mute.css |  30 ---
 4 files changed, 216 insertions(+), 190 deletions(-)
 create mode 100644 srcs/requirements/svelte/api_front/src/pieces/chat/Layout_mute.svelte
 delete mode 100644 srcs/requirements/svelte/api_front/src/styles/chat/layout_mute.css

diff --git a/srcs/requirements/svelte/api_front/src/pieces/chat/Chat.html b/srcs/requirements/svelte/api_front/src/pieces/chat/Chat.html
index 99db7417..d87e7876 100644
--- a/srcs/requirements/svelte/api_front/src/pieces/chat/Chat.html
+++ b/srcs/requirements/svelte/api_front/src/pieces/chat/Chat.html
@@ -61,161 +61,6 @@
 		</div>
 	</div>
 
-	<!-- MUTE -->
-	<div class="chat_item chat_panel chat_panel_mute" id="chat_panel_mute">
-		<p class="__center">mute this user for a time :</p>
-		<form>
-			<!-- forever -->
-			<input  id="chat_mute_forever" type="checkbox" class="_check_change_next"></input>
-			<label for="chat_mute_forever" class="_checkbox"><p>forever</p></label>
-			<div class="__content _is_not_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>
-
 
 </div>
 
diff --git a/srcs/requirements/svelte/api_front/src/pieces/chat/Chat.svelte b/srcs/requirements/svelte/api_front/src/pieces/chat/Chat.svelte
index d81c9a60..ddbb0137 100644
--- a/srcs/requirements/svelte/api_front/src/pieces/chat/Chat.svelte
+++ b/srcs/requirements/svelte/api_front/src/pieces/chat/Chat.svelte
@@ -10,6 +10,7 @@
 	import RoomsetLayout   from './Layout_room_set.svelte';
 	import ProtectedLayout from './Layout_protected.svelte';
 	import CreateLayout    from './Layout_create.svelte';
+	import MuteLayout      from './Layout_mute.svelte';
 
 	export let color = "transparent";
 
@@ -41,7 +42,7 @@
 		layout settings
 		layout room_set
 		layout protected
-	layout create
+		layout create
 	layout mute
 	layout user
 */
@@ -71,6 +72,9 @@
 	{:else if layout === "create"}
 		<CreateLayout bind:layout back={layouts[1]} />
 
+	{:else if layout === "mute"}
+		<MuteLayout bind:layout back={layouts[1]} />
+
 	{:else}
 		<div class="grid_box">
 			<Button bind:layout new_layout={layouts[0]} my_class="chat">
@@ -128,7 +132,7 @@
 			:global(#chat_box #settings        ){grid-area: settings;}
 			:global(#chat_box #room_name       ){grid-area: room_name;}
 			:global(#chat_box #send            ){grid-area: send;}
-		:global(#chat_box #create          ){grid-area: create;}
+			:global(#chat_box #create          ){grid-area: create;}
 		:global(#chat_box #user            ){grid-area: user;}
 			:global(#chat_box #back            ){grid-area: back;}
 			:global(#chat_box #panel_home      ){grid-area: panel_home;}
@@ -136,9 +140,9 @@
 			:global(#chat_box #panel_msg       ){grid-area: panel_msg;}
 			:global(#chat_box #panel_write     ){grid-area: panel_write;}
 			:global(#chat_box #panel_settings  ){grid-area: panel_settings;}
-		:global(#chat_box #panel_room_set  ){grid-area: panel_room_set;}
-		:global(#chat_box #panel_protected ){grid-area: panel_protected;}
-		:global(#chat_box #panel_create    ){grid-area: panel_create;}
+			:global(#chat_box #panel_room_set  ){grid-area: panel_room_set;}
+			:global(#chat_box #panel_protected ){grid-area: panel_protected;}
+			:global(#chat_box #panel_create    ){grid-area: panel_create;}
 		:global(#chat_box #panel_user      ){grid-area: panel_user;}
 		:global(#chat_box #panel_mute      ){grid-area: panel_mute;}
 
diff --git a/srcs/requirements/svelte/api_front/src/pieces/chat/Layout_mute.svelte b/srcs/requirements/svelte/api_front/src/pieces/chat/Layout_mute.svelte
new file mode 100644
index 00000000..377cc418
--- /dev/null
+++ b/srcs/requirements/svelte/api_front/src/pieces/chat/Layout_mute.svelte
@@ -0,0 +1,207 @@
+
+<script>
+
+	import Button from './Chat_button.svelte';
+	export let layout = "";
+	export let back = "";
+
+</script>
+
+<div class="grid_box">
+
+	<!-- back -->
+	<Button bind:layout new_layout={back} my_class="back icon" my_title="go back {back}">
+		back
+	</Button>
+
+	<!-- user -->
+	<Button my_class="user deactivate">
+		&lt;user&gt;
+	</Button>
+
+	<!-- close -->
+	<Button bind:layout new_layout="close" my_class="close icon">
+		close
+	</Button>
+
+	<!-- panel_mute -->
+
+	<!-- MUTE -->
+	<div class="chat_item chat_panel chat_panel_mute" id="chat_panel_mute">
+		<p class="__center">mute this user for a time :</p>
+		<form>
+			<!-- forever -->
+			<input  id="chat_mute_forever" type="checkbox" class="_check_change_next"></input>
+			<label for="chat_mute_forever" class="_checkbox"><p>forever</p></label>
+			<div class="__content _is_not_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>
+
+
+</div>
+
+<style>
+
+	/* grid layout "mute"
+	*/
+	.grid_box :global(.back        ) {grid-area: back;}
+
+	.grid_box :global(.back      ) {grid-area: back;}
+	.grid_box :global(.user      ) {grid-area: user;}
+	.grid_box :global(.close     ) {grid-area: close;}
+	.grid_box :global(.panel_mute) {grid-area: panel_mute;}
+	.grid_box {
+		grid:
+			' back        user        close       ' auto
+			' panel_mute  panel_mute  panel_mute  ' 1fr
+			/ auto        1fr         auto        ;
+	}
+
+
+</style>
+
+
diff --git a/srcs/requirements/svelte/api_front/src/styles/chat/layout_mute.css b/srcs/requirements/svelte/api_front/src/styles/chat/layout_mute.css
deleted file mode 100644
index 667809f8..00000000
--- a/srcs/requirements/svelte/api_front/src/styles/chat/layout_mute.css
+++ /dev/null
@@ -1,30 +0,0 @@
-
-#chat_box.mute {
-  grid:
-    ' back        user        close       ' auto
-    ' panel_mute  panel_mute  panel_mute  ' 1fr
-    / auto        1fr         auto        ;
-}
-#chat_box.mute .chat_item#chat_back,
-#chat_box.mute .chat_item#chat_user,
-#chat_box.mute .chat_item#chat_close,
-#chat_box.mute .chat_item#chat_panel_mute {
-	display: flex;
-}
-
-
-/* back btn
-*/
-#chat_box.mute .chat_item.chat_back button.back_user {
-	display: flex;
-}
-
-
-/* title "mute" appearance
-*/
-#chat_box.mute .chat_item.chat_user {
-	text-align: center;
-}
-
-
-