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

UI fixes

parent be71ffe8
No related branches found
No related tags found
1 merge request!96UI fixes
Pipeline #1062 passed
Stage: test
Show whitespace changes
Inline Side-by-side
capsule-prototype/css/common.css 0 → 100644
+ 25
− 0
View file @ ff3cec77
.playback_form {
padding: 0;
}
.playback_form input {
display: none;
}
.playback_form label {
background-color: rgba(0, 0, 0, .5);
padding: 4px;
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}
.playback_form input:checked+label {
background-color: rgba(255, 255, 255, .5);
color: black;
font-weight: bold;
}
.playback_form input:checked+label::before {
content: "\2713 ";
color: black;
}
capsule-prototype/css/left_menu.css
+ 0
− 24
View file @ ff3cec77
...@@ -37,30 +37,6 @@ ...@@ -37,30 +37,6 @@
visibility: visible; visibility: visible;
} }
#playback_speed_form {
padding: 0;
}
#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 { .btns_add_annotation li {
flex-direction: column; flex-direction: column;
} }
......
capsule-prototype/css/online-theme.css
+ 1
− 0
View file @ ff3cec77
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
@import 'popup.css'; @import 'popup.css';
@import 'mosaic.css'; @import 'mosaic.css';
@import 'flatten_timeline.css'; @import 'flatten_timeline.css';
@import 'common.css';
:root { :root {
--tab_selector_height: 30px; --tab_selector_height: 30px;
......
capsule-prototype/css/popup.css
+ 32
− 1
View file @ ff3cec77
#popupSpeedInput {
width: fit-content;
margin: auto;
margin-bottom: 10px;
}
.popupNewTitles {
font-size: 0.9em;
color: rgba(255,255,255,.25);
margin-bottom: 10px;
}
#popupSpeedInput label {
margin: 2px;
}
#popupSpeedInput label:first-child {
margin-left: 0;
}
#popupSpeedInput label:last-child {
margin-right: 0;
}
#popupLabelsInput { #popupLabelsInput {
padding: 0; padding: 0;
flex-wrap: wrap;
max-height: 300px;
align-content: first baseline;
overflow: auto;
} }
#popupLabelsInput label { #popupLabelsInput label {
cursor: pointer; cursor: pointer;
width: fit-content; width: fit-content;
padding: 1px; padding: 4px;
margin: 1px; margin: 1px;
} }
...@@ -14,6 +41,10 @@ ...@@ -14,6 +41,10 @@
background-color: rgba(255, 255, 255, .5); background-color: rgba(255, 255, 255, .5);
} }
#popupLabelsInput input:checked + label:before {
content: "\2713 ";
}
#new_annotation_label { #new_annotation_label {
color: white; color: white;
background-color: rgba(0, 0, 0, .5); background-color: rgba(0, 0, 0, .5);
......
capsule-prototype/index.html
+ 32
− 15
View file @ ff3cec77
...@@ -182,13 +182,30 @@ ...@@ -182,13 +182,30 @@
<div class="popupRightItem" id="popupLink" title="Link"></div> <div class="popupRightItem" id="popupLink" title="Link"></div>
<textarea class="popupInput" id="popupLinkInput" type="text"></textarea> <textarea class="popupInput" id="popupLinkInput" type="text"></textarea>
<div class="popupRightItem" id="popupSpeed" title="Speed"></div> <div class='popupNewTitles'>+ Playback rate</div>
<input type='range' min='0' max='4' class='popupInput' id='popupSpeedInput' /> <form id='popupSpeedInput' class='flex-row playback_form popupInput popupInputNoHide'>
<input type='radio' id='annotation_playback_speed_025' value='0.25' name='playback_rate' />
<label class='left_menu_item' for='annotation_playback_speed_025'>0.25</label>
<input type='radio' id='annotation_playback_speed_05' value='0.5' name='playback_rate' />
<label class='left_menu_item' for='annotation_playback_speed_05'>0.5</label>
<input type='radio' id='annotation_playback_speed_075' value='0.75' name='playback_rate' />
<label class='left_menu_item' for='annotation_playback_speed_075'>0.75</label>
<input type='radio' id='annotation_playback_speed_1' value='1' name='playback_rate' />
<label class='left_menu_item' for='annotation_playback_speed_1'>normal</label>
<input type='radio' id='annotation_playback_speed_125' value='1.25' name='playback_rate' />
<label class='left_menu_item' for='annotation_playback_speed_125'>1.25</label>
<input type='radio' id='annotation_playback_speed_15' value='1.5' name='playback_rate' />
<label class='left_menu_item' for='annotation_playback_speed_15'>1.5</label>
<input type='radio' id='annotation_playback_speed_175' value='1.75' name='playback_rate' />
<label class='left_menu_item' for='annotation_playback_speed_175'>1.75</label>
<input type='radio' id='annotation_playback_speed_2' value='2' name='playback_rate' />
<label class='left_menu_item' for='annotation_playback_speed_2'>2</label>
</form>
<div class="popupRightItem" id="popupLabels" title="Labels"></div> <div class='popupNewTitles'>+ Tags</div>
<!-- templates -->
<div id='popupLabelsInput' class='popupInput flex-col'>
<input type='text' id='new_annotation_label' placeholder='Add a new tag' class='editmode' /> <input type='text' id='new_annotation_label' placeholder='Add a new tag' class='editmode' />
<div id='popupLabelsInput' class='flex-col popupInput popupInputNoHide'>
<!-- templates -->
<input class='annotation_labels_template' type='checkbox' id='' value='' style='display: none;' /> <input class='annotation_labels_template' type='checkbox' id='' value='' style='display: none;' />
<label class='annotation_labels_template' for='' style='display: none;'></label> <label class='annotation_labels_template' for='' style='display: none;'></label>
</div> </div>
...@@ -211,7 +228,10 @@ ...@@ -211,7 +228,10 @@
</div> </div>
<div id='left_menu' class='flex-col editmode left_menu'> <div id='left_menu' class='flex-col editmode left_menu'>
<div class='flex-col'>
<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> <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 id='left_menu_item_preview' class='left_menu_item flex-col'>preview</div>
</div>
<div class='flex-col'> <div class='flex-col'>
<ul class='btns_add_annotation flex-col'> <ul class='btns_add_annotation flex-col'>
<input type='checkbox' id='inp_add_annotation_dropdown' class='dropdown_control' /> <input type='checkbox' id='inp_add_annotation_dropdown' class='dropdown_control' />
...@@ -224,7 +244,7 @@ ...@@ -224,7 +244,7 @@
<div class='flex-col'> <div class='flex-col'>
<input type='checkbox' id='inp_playback_rate_dropdown' class='dropdown_control' /> <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> <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'> <form id='playback_speed_form' class='dropdown_content flex-col playback_form'>
<input type='radio' id='playback_speed_025' value='0.25' name='playback_rate' /> <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> <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' /> <input type='radio' id='playback_speed_05' value='0.5' name='playback_rate' />
...@@ -244,10 +264,7 @@ ...@@ -244,10 +264,7 @@
</form> </form>
</div> </div>
</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 id='left_menu_item_settings' class='left_menu_item flex-col'>settings</div>
</div>
</div> </div>
<!-- <!--
......
capsule-prototype/js/online-rekall/Timeline.js
+ 3
− 21
View file @ ff3cec77
...@@ -45,26 +45,8 @@ Timeline.prototype.rewind = function(timeCurrentOffset) { ...@@ -45,26 +45,8 @@ Timeline.prototype.rewind = function(timeCurrentOffset) {
rekall.videoPlayer.rewind(); rekall.videoPlayer.rewind();
} }
Timeline.prototype.changeSpeed = function(speed) { Timeline.prototype.changeSpeed = function(speed) {
var _speed = 1; rekall.videoPlayer.playbackRate(speed);
switch (speed) { console.debug('changing playback speed to ' + speed);
case 0:
_speed = .0001;
break;
case 1:
_speed = .5;
break;
case 2:
_speed = 1;
break;
case 3:
_speed = 2;
break;
case 4:
_speed = 1000;
break;
}
rekall.videoPlayer.playbackRate(_speed);
console.debug('changing playback speed to ' + _speed);
} }
...@@ -94,7 +76,7 @@ Timeline.prototype.updateFlattenTimeline = function() { ...@@ -94,7 +76,7 @@ Timeline.prototype.updateFlattenTimeline = function() {
} else if (tag.shown && !should_shown) { } else if (tag.shown && !should_shown) {
tag.shown = false; tag.shown = false;
if (tag.getMetadata('Rekall->Speed')) { if (tag.getMetadata('Rekall->Speed')) {
this.changeSpeed(2); this.changeSpeed(1);
console.debug('speed was ' + tag.getMetadata('Rekall->Speed')); console.debug('speed was ' + tag.getMetadata('Rekall->Speed'));
} }
} }
......
capsule-prototype/js/online-script.js
+ 10
− 42
View file @ ff3cec77
...@@ -811,27 +811,16 @@ function closeInputs() { ...@@ -811,27 +811,16 @@ function closeInputs() {
} else if($(this).attr("id")=="popupSpeedInput") { } else if($(this).attr("id")=="popupSpeedInput") {
var keyDoc = $(this).parent().attr("keydoc"); var keyDoc = $(this).parent().attr("keydoc");
var newSpeed = $(this).val().trim(); var newSpeed = $('#popupSpeedInput input:checked').val();
setMetaFromDom(keyDoc, "Rekall->Speed", newSpeed); setMetaFromDom(keyDoc, "Rekall->Speed", newSpeed);
if(newSpeed!="") $("#popupSpeed").html(get_str_for_speed(newSpeed)).removeClass("empty");
else $("#popupSpeed").html("+ Set video speed during this annotation ").addClass("empty");
} else if($(this).attr("id")=="popupLabelsInput") { } else if($(this).attr("id")=="popupLabelsInput") {
var keyDoc = $(this).parent().attr("keydoc"); var keyDoc = $(this).parent().attr("keydoc");
var newLabels = ''; var newLabels = '';
$('input.annotation_labels:checked') $('input.annotation_labels:checked').toArray().forEach(e => newLabels += e.value + ';')
.toArray().forEach(e => {
newLabels += e.value + ';';
})
setMetaFromDom(keyDoc, "Rekall->Labels", newLabels); setMetaFromDom(keyDoc, "Rekall->Labels", newLabels);
if (newLabels === '') {
$('#popupLabels').html('+ Set annotation labels ').addClass('empty');
$('#popupLabelsInput').hide();
}
} else if($(this).attr("id")=="popupAuthorInput") { } else if($(this).attr("id")=="popupAuthorInput") {
var keyDoc = $(this).parent().attr("keydoc"); var keyDoc = $(this).parent().attr("keydoc");
...@@ -886,7 +875,7 @@ function closeInputs() { ...@@ -886,7 +875,7 @@ function closeInputs() {
//alert("ok"); //alert("ok");
}); });
$(".popupInput").hide(); $(".popupInput:not(.popupInputNoHide)").hide();
$(".popupRightItem").show(); $(".popupRightItem").show();
$("#popupTC").show(); $("#popupTC").show();
$("#popupTCedit").hide(); $("#popupTCedit").hide();
...@@ -923,6 +912,7 @@ function openMosaic() { ...@@ -923,6 +912,7 @@ function openMosaic() {
let div=$('<div/>').addClass('mosaic_item').on('click', function() {tagOrDoc.openPopupEdit();}); let div=$('<div/>').addClass('mosaic_item').on('click', function() {tagOrDoc.openPopupEdit();});
div.append($('<img/>').attr('src', url).attr('onerror', "this.src='../shared/css/images/img-document.png';")); div.append($('<img/>').attr('src', url).attr('onerror', "this.src='../shared/css/images/img-document.png';"));
div.append($('<span/>').addClass('caption').text(name)); div.append($('<span/>').addClass('caption').text(name));
div.attr('data-rekall-labels', '');
div.attr('data-rekall-labels', tagOrDoc.getMetadata('Rekall->Labels')); div.attr('data-rekall-labels', tagOrDoc.getMetadata('Rekall->Labels'));
return div; return div;
} }
...@@ -1003,6 +993,7 @@ function openMosaic() { ...@@ -1003,6 +993,7 @@ function openMosaic() {
$(f).removeClass('mosaic_label_filter_enabled'); $(f).removeClass('mosaic_label_filter_enabled');
}); });
} }
console.debug('filters: ', labels);
$('.mosaic_item').toArray().forEach(t => { $('.mosaic_item').toArray().forEach(t => {
if (!labels.size || Array.from(labels).map(l => t.dataset.rekallLabels.indexOf(l) != -1).includes(true)) if (!labels.size || Array.from(labels).map(l => t.dataset.rekallLabels.indexOf(l) != -1).includes(true))
$(t).show(); $(t).show();
...@@ -1096,8 +1087,10 @@ bgColorLeft = getTagGradientColor(tag); ...@@ -1096,8 +1087,10 @@ bgColorLeft = getTagGradientColor(tag);
$("#popupTCout").html(endVerb); $("#popupTCout").html(endVerb);
var speed = tag.getMetadata("Rekall->Speed"); var speed = tag.getMetadata("Rekall->Speed");
if((speed)&&(speed!="")) $("#popupSpeed").html(get_str_for_speed(speed)).removeClass("empty"); if (!speed || speed == '')
else $("#popupSpeed").html("+ Set video speed during this annotation").addClass("empty"); speed = 1;
$('#popupSpeedInput input').attr('checked', false);
$('#popupSpeedInput input[value="'+speed+'"]').attr('checked', true);
var labels = tag.getMetadata("Rekall->Labels"); var labels = tag.getMetadata("Rekall->Labels");
$('input.annotation_labels').attr('checked', false); $('input.annotation_labels').attr('checked', false);
...@@ -1106,10 +1099,6 @@ bgColorLeft = getTagGradientColor(tag); ...@@ -1106,10 +1099,6 @@ bgColorLeft = getTagGradientColor(tag);
$('input.annotation_labels').toArray().forEach(e => { $('input.annotation_labels').toArray().forEach(e => {
e.checked = (_labels.indexOf(e.value) != -1); e.checked = (_labels.indexOf(e.value) != -1);
}) })
$('#popupLabelsInput').show();
} else {
$('#popupLabelsInput').hide();
$('#popupLabels').html('+ Add labels');
} }
var comments = tag.getMetadata("Rekall->Comments"); var comments = tag.getMetadata("Rekall->Comments");
...@@ -1216,7 +1205,7 @@ function setMetaFromDom(keyDoc, metaType, meta) { ...@@ -1216,7 +1205,7 @@ function setMetaFromDom(keyDoc, metaType, meta) {
$.ajax("php/project.php", { $.ajax("php/project.php", {
type: "POST", type: "POST",
dataType: "json", dataType: "json",
data: {"key": keyDoc, "metadataKey": metaType, "metadataValue": meta.replace(/'/g, '’')}, data: {"key": keyDoc, "metadataKey": metaType, "metadataValue": meta.indexOf('\'') == -1 ? meta : meta.replace(/'/g, '’')},
success: function(retour) { success: function(retour) {
rouletteEnd(); rouletteEnd();
rekall.loadXMLFile(); rekall.loadXMLFile();
...@@ -1438,24 +1427,3 @@ $(window).trigger("resize"); ...@@ -1438,24 +1427,3 @@ $(window).trigger("resize");
function openPasteModal() { $('#paste_modal').css('display', 'flex'); $('#paste_modal_content').first().focus() } function openPasteModal() { $('#paste_modal').css('display', 'flex'); $('#paste_modal_content').first().focus() }
function closePasteModal() { $('#paste_modal').hide(); $('#paste_modal_content').empty(); } function closePasteModal() { $('#paste_modal').hide(); $('#paste_modal_content').empty(); }
function get_str_for_speed(speed) {
var html_value = 'normal';
switch (Number(speed)) {
case 0:
html_value = 'very slow';
break;
case 1:
html_value = 'half speed';
break;
case 2:
html_value = 'normal';
break;
case 3:
html_value = 'twice as speed';
break;
case 4:
html_value = 'very speed';
break;
}
return html_value;
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment