From b1e19d97c8efd43e55ab88879e8868389f1f0fb9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=AFs=20Poujade?= <lois.poujade@tetras-libre.fr>
Date: Wed, 20 Apr 2022 10:56:31 +0200
Subject: [PATCH] show dropdown on click

---
 capsule-prototype/css/left_menu.css | 15 ++++--
 capsule-prototype/index.html        | 74 +++++++++++++++--------------
 2 files changed, 51 insertions(+), 38 deletions(-)

diff --git a/capsule-prototype/css/left_menu.css b/capsule-prototype/css/left_menu.css
index a5fad2c..1a7aed2 100644
--- a/capsule-prototype/css/left_menu.css
+++ b/capsule-prototype/css/left_menu.css
@@ -1,5 +1,5 @@
 
-#left_menu * {
+.left_menu * {
 	padding: 2px;
 	margin: 2px;
 }
@@ -21,17 +21,26 @@
 	text-align: center;
 	vertical-align: center;
 }
-.left_menu_item:hover { background: rgba(0,0,0,.1); }
+
+.left_menu_item:hover,  .dropdown_control:checked ~ label { background: rgba(0,0,0,.1); }
 
 .dropdown_content {
 	display: flex;
 	visibility: hidden;
 }
 
-.dropdown:hover .dropdown_content {
+.dropdown_control {
+  display: none;
+}
+
+.dropdown_control:checked ~ .dropdown_content {
 	visibility: visible;
 }
 
+#playback_speed_form {
+  padding: 0;
+}
+
 #playback_speed_form input {
 	display: none;
 }
diff --git a/capsule-prototype/index.html b/capsule-prototype/index.html
index 1c46db2..fbe9317 100644
--- a/capsule-prototype/index.html
+++ b/capsule-prototype/index.html
@@ -202,41 +202,45 @@
 		</div>
 	</div>
 
-	<div id='left_menu' class='flex-col editmode'>
-			<a id='btn_home' class='left_menu_item flex-col' href="javascript:window.app.rekall.Rekall('openUrl', 'home')"><i class="fas fa-home fa-3x left_menu_item_icn"></i>Go back to my capsules</a>
-		<div class='flex-col'>
-			<ul class='dropdown btns_add_annotation left_menu_item'>
-				<li class='dropdown_content left_menu_item' id='btn_add_note'>note</li>
-				<li class='dropdown_content left_menu_item' id='btn_add_link'>link</li>
-				<li class='dropdown_content left_menu_item' id='btn_add_paste'>clipboard</li>
-				<li class='dropdown_content left_menu_item' id='btn_add_file'>file</li>
-				<i class="fas fa-plus"></i>
-			</ul>
-			<form id='playback_speed_form' class='dropdown left_menu_item'>
-				<i class="fas fa-random"></i>
-				<input type='radio' id='playback_speed_025' value='0.25' name='playback_rate' />
-				<label class='dropdown_content left_menu_item' for='playback_speed_025'>0.25</label>
-				<input type='radio' id='playback_speed_05' value='0.5' name='playback_rate' />
-				<label class='dropdown_content left_menu_item' for='playback_speed_05'>0.5</label>
-				<input type='radio' id='playback_speed_075' value='0.75' name='playback_rate' />
-				<label class='dropdown_content left_menu_item' for='playback_speed_075'>0.75</label>
-				<input type='radio' id='playback_speed_1' value='1' name='playback_rate' checked />
-				<label class='dropdown_content left_menu_item' for='playback_speed_1'>normal</label>
-				<input type='radio' id='playback_speed_125' value='1.25' name='playback_rate' />
-				<label class='dropdown_content left_menu_item' for='playback_speed_125'>1.25</label>
-				<input type='radio' id='playback_speed_15' value='1.5' name='playback_rate' />
-				<label class='dropdown_content left_menu_item' for='playback_speed_15'>1.5</label>
-				<input type='radio' id='playback_speed_175' value='1.75' name='playback_rate' />
-				<label class='dropdown_content left_menu_item' for='playback_speed_175'>1.75</label>
-				<input type='radio' id='playback_speed_2' value='2' name='playback_rate' />
-				<label class='dropdown_content left_menu_item' for='playback_speed_2'>2</label>
-			</form>
-		</div>
-		<div class='flex-col'>
-			<div id='left_menu_item_preview' class='left_menu_item flex-col'>preview</div>
-			<div id='left_menu_item_settings' class='left_menu_item flex-col'>settings</div>
-		</div>
-	</div>
+  <div id='left_menu' class='flex-col editmode left_menu'>
+    <a id='btn_home' class='left_menu_item flex-col' href='javascript:window.app.rekall.Rekall('openUrl', 'home')'><i class='fas fa-home fa-3x left_menu_item_icn'></i>Go back to my capsules</a>
+    <div class='flex-col'>
+      <ul class='btns_add_annotation flex-col'>
+        <input type='checkbox' id='inp_add_annotation_dropdown' class='dropdown_control' />
+        <li class='dropdown_content left_menu_item' id='btn_add_note'>note</li>
+        <li class='dropdown_content left_menu_item' id='btn_add_link'>link</li>
+        <li class='dropdown_content left_menu_item' id='btn_add_paste'>clipboard</li>
+        <li class='dropdown_content left_menu_item' id='btn_add_file'>file</li>
+        <label for='inp_add_annotation_dropdown' class='left_menu_item' title='add annotation'><i class='fas fa-plus'></i></label>
+      </ul>
+      <div class='flex-col'>
+        <input type='checkbox' id='inp_playback_rate_dropdown' class='dropdown_control' />
+        <label for ='inp_playback_rate_dropdown' class='left_menu_item' title='change playback rate'><i class='fas fa-play'></i></label>
+        <form id='playback_speed_form' class='dropdown_content flex-col'>
+          <input type='radio' id='playback_speed_025' value='0.25' name='playback_rate' />
+          <label class='left_menu_item' for='playback_speed_025'>0.25</label>
+          <input type='radio' id='playback_speed_05' value='0.5' name='playback_rate' />
+          <label class='left_menu_item' for='playback_speed_05'>0.5</label>
+          <input type='radio' id='playback_speed_075' value='0.75' name='playback_rate' />
+          <label class='left_menu_item' for='playback_speed_075'>0.75</label>
+          <input type='radio' id='playback_speed_1' value='1' name='playback_rate' checked />
+          <label class='left_menu_item' for='playback_speed_1'>normal</label>
+          <input type='radio' id='playback_speed_125' value='1.25' name='playback_rate' />
+          <label class='left_menu_item' for='playback_speed_125'>1.25</label>
+          <input type='radio' id='playback_speed_15' value='1.5' name='playback_rate' />
+          <label class='left_menu_item' for='playback_speed_15'>1.5</label>
+          <input type='radio' id='playback_speed_175' value='1.75' name='playback_rate' />
+          <label class='left_menu_item' for='playback_speed_175'>1.75</label>
+          <input type='radio' id='playback_speed_2' value='2' name='playback_rate' />
+          <label class='left_menu_item' for='playback_speed_2'>2</label>
+        </form>
+      </div>
+    </div>
+    <div class='flex-col'>
+      <div id='left_menu_item_preview' class='left_menu_item flex-col'>preview</div>
+      <div id='left_menu_item_settings' class='left_menu_item flex-col'>settings</div>
+    </div>
+  </div>
 
 	<!--
 	<div id='left_menu' class='flex-col editmode'>
-- 
GitLab