Skip to content
Snippets Groups Projects
Commit 23f0fa7f authored by Loïs Poujade's avatar Loïs Poujade
Browse files

rework left menu + add playback rate control

parent 2d06fbc1
Branches
Tags
2 merge requests!92Tuleap 238 add tag to annotation,!91Tuleap 207 rework left menu
Show whitespace changes
Inline Side-by-side
capsule-prototype/css/left_menu.css
+ 54
− 23
View file @ 23f0fa7f
#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;
}
*/
capsule-prototype/css/online-theme.css
+ 1
− 1
View file @ 23f0fa7f
@import url("font/stylesheet.css");
@import 'font/stylesheet.css';
@import 'left_menu.css';
@import 'popup.css';
@import 'mosaic.css';
......
capsule-prototype/index.html
+ 38
− 0
View file @ 23f0fa7f
......@@ -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'>
......
capsule-prototype/js/online-script.js
+ 10
− 5
View file @ 23f0fa7f
......@@ -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;
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment