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