diff --git a/capsule-prototype/css/left_menu.css b/capsule-prototype/css/left_menu.css index 41803b28561ef85f54d8081bb4ed1cb88c101cd4..b5f8bb8135208dbde7129a2c6959814e0af1fd73 100644 --- a/capsule-prototype/css/left_menu.css +++ b/capsule-prototype/css/left_menu.css @@ -1,32 +1,67 @@ -#left_menu, #left_menu.div { +#left_menu * { + padding: 2px; + margin: 2px; +} + +#left_menu { width: 80px; justify-content: space-between; background: var(--rk-light-blue); - padding-top: 10px; - padding-bottom: 10px; } - .left_menu_item { - color: rgba(255,255,255,.5); cursor: pointer; + text-align: center; + vertical-align: center; +} +.left_menu_item:hover { background: rgba(0,0,0,.1); } + +.dropdown_content { display: flex; + visibility: hidden; +} + +.dropdown:hover .dropdown_content { + visibility: visible; +} + +#playback_speed_form input { + display: none; +} + +#playback_speed_form label { + background-color: rgba(0, 0, 0, .5); + padding: 4px; + box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); +} + +#playback_speed_form input:checked+label { + background-color: rgba(255, 255, 255, .5); + color: black; +} + +#playback_speed_form input:checked+label::before { + content: "\2713 "; + color: black; +} + +.btns_add_annotation li { flex-direction: column; - align-items: center; - text-align: center; - /* - font-size: 10px; - width: 70px; - margin: 0 5px; - height: 60px; - border-radius: 2px; - padding: 5px 0; - text-align: center; - display: inline-block; - */ } +.btns_control { +} + +#btn_add_note::before { content: url("images/icn-menu-addnote.png"); } +#btn_add_link::before { content: url("images/icn-menu-addlink.png"); } +#btn_add_file::before { content: url("images/icn-menu-addfile.png"); } +#btn_add_paste::before { content: url("images/icn-image.png"); } +#left_menu_item_preview::before { content: url("images/icn-menu-preview.png"); } +#left_menu_item_settings::before { content: url("images/icn-menu-settings.png"); } + +/* + .left_menu_item:hover { background: rgba(0,0,0,.1); } .left_menu_item.selected { background: rgba(0,0,0,.15); } @@ -59,12 +94,6 @@ #left_menu_item_icn_settings { background:url("images/icn-menu-settings.png"); } -#left_menu_item_icn_addfile { background:url("images/icn-menu-addfile.png"); } - -#left_menu_item_icn_addnote { background:url("images/icn-menu-addnote.png"); } - -#left_menu_item_icn_addlink { background:url("images/icn-menu-addlink.png"); } - .left_menu_item_title { height:20px; line-height:20px; @@ -81,3 +110,5 @@ opacity: 0; cursor: pointer !important; } + +*/ diff --git a/capsule-prototype/css/online-theme.css b/capsule-prototype/css/online-theme.css index 92a45e4a3fcd897159632416b79330a65a7ebd43..d131ceda62a0c10f6138505862b3e94e5b0f5ba8 100644 --- a/capsule-prototype/css/online-theme.css +++ b/capsule-prototype/css/online-theme.css @@ -1,4 +1,4 @@ -@import url("font/stylesheet.css"); +@import 'font/stylesheet.css'; @import 'left_menu.css'; @import 'popup.css'; @import 'mosaic.css'; diff --git a/capsule-prototype/index.html b/capsule-prototype/index.html index 970c40a6e842dba94ffe84bbd4762822f6586152..b51412beff7a536bc55e71a3de809f4ab0544f44 100644 --- a/capsule-prototype/index.html +++ b/capsule-prototype/index.html @@ -202,6 +202,43 @@ </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'>preview</div> + <div id='left_menu_item_settings' class='left_menu_item'>settings</div> + </div> + </div> + + <!-- <div id='left_menu' class='flex-col editmode'> <div class='top'> <a class="left_menu_item dropable" href="javascript:window.app.rekall.Rekall('openUrl', 'home')"> @@ -236,6 +273,7 @@ </div> </div> </div> + --> <div id='tabs' class='flex flex-col'> diff --git a/capsule-prototype/js/online-rekall/RekallApplication.js b/capsule-prototype/js/online-rekall/RekallApplication.js index 135f3733138a2d544be99be304c398d5e55a09a7..ce1cd2a023cf94b817e15b767810012cc8a6bd34 100644 --- a/capsule-prototype/js/online-rekall/RekallApplication.js +++ b/capsule-prototype/js/online-rekall/RekallApplication.js @@ -37,7 +37,7 @@ return localOptions.PubSub; }, rekall: function () { - return localOptions.Rekall; + return localOptions.Rekall; }, setPlaybackRate: function () { if (arguments.length > 0 && 'number' === typeof arguments[0] && 0 < arguments[0] && arguments[0] < 10) { @@ -68,4 +68,4 @@ } } app.rekall = new RekallApplication(); -})(window.app = window.app || {}) \ No newline at end of file +})(window.app = window.app || {}) diff --git a/capsule-prototype/js/online-script.js b/capsule-prototype/js/online-script.js index 8f53cf8fa0bc0660838410e9cefe4471bdcc590f..cf840c2f874b019e0445f1c964d5ae7481856245 100644 --- a/capsule-prototype/js/online-script.js +++ b/capsule-prototype/js/online-script.js @@ -319,13 +319,13 @@ function setEditionControls() { openAlert("Do you really want to delete this project ?", "yesnodeleteproject"); }); - $("#left_menu_item_addnote").click(function(event){ + $("#btn_add_note").click(function(event){ event.stopPropagation(); rekall.timeline.pause(); uploadFiles(["New note"]); }); - $("#left_menu_item_addfile").mousedown(function(event) { + $("#btn_add_file").mousedown(function(event) { rekall.timeline.pause(); $("#left_menu_item_btn_addfile").click(); }); @@ -334,7 +334,7 @@ function setEditionControls() { uploadFiles($("#left_menu_item_btn_addfile").get(0).files); }); - $("#left_menu_item_pastefile").click(function(event) { pubSub.publish('open_paste_modal'); }); + $("#btn_add_paste").click(function(event) { pubSub.publish('open_paste_modal'); }); $("#paste_modal button.cancel").click(function(event) { pubSub.publish('close_paste_modal'); }); $("#paste_modal_content").on("paste", function(event) { @@ -352,13 +352,13 @@ function setEditionControls() { var n = b64data.length; var uar = new Uint8Array(n); while (n--) uar[n] = bin_str.charCodeAt(n); - var file = new File([uar], 'pasted_' + Math.floor(random()*100000) + '.' + subtype, {type: type+'/'+subtype}); + var file = new File([uar], 'pasted_' + Math.floor(Math.random()*100000) + '.' + subtype, {type: type+'/'+subtype}); $('#left_menu_item_btn_addfile').files += file; uploadFiles([file]); pubSub.publish('close_paste_modal'); }); - $("#left_menu_item_addlink").click(function(event){ + $("#btn_add_link").click(function(event){ event.stopPropagation(); rekall.timeline.pause(); $("#popupAddLinkSpace").show(); @@ -561,6 +561,11 @@ function setEditionControls() { $("#popupEditSupprimer").click(function(){ openAlert("Do you really want to delete this file from the project ?", "yesnodelete"); }); + + $("#playback_speed_form").change(function(event) { + console.debug("set playback rate to " + event.target.value); + window.app.rekall.Rekall().videoPlayer.playbackRate(Number(event.target.value)); + }); } /*var rubanTimeout = 0;