infra
/
cryptpad
2
1
Fork 0
Code Issues Pull Requests Projects Releases 1 Activity

Better cursor and snapshot markers

pull/1/head
yflory 2020-09-28 18:53:24 +02:00
parent 5f358f62ed
commit ad46e6818e
2 changed files with 102 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
customize.dist/src/less2/include/toolbar-history.less
View File

@ -49,6 +49,22 @@
}
}
&.cp-smallpatch {
.cp-history-snapshot {
border: none !important;
width: 2px !important;
background: @pos-color;
}
.cp-history-timeline-pos {
border: none !important;
width: 2px !important;
background: @pos-color;
&:after {
margin-left: -8px !important;
top: -8px !important;
}
}
}
.cp-history-timeline-line {
display: flex;
.cp-history-timeline-legend {
@ -105,6 +121,21 @@
}
}
}
.cp-history-snapshots {
position: absolute;
left: 1px;
right: 1px;
top: 1px;
bottom: 1px;
.cp-history-snapshot {
position: absolute;
border: 2px solid @cryptpad_text_col;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
}
}
}
.cp-history-timeline-actions {
@ -119,30 +150,31 @@
}
}
.cp-history-timeline-next {
button:last-child {
button:last-child {
margin-right: 0;
}
}
.cp-history-timeline-prev {
button:first-child {
button:first-child {
margin-left: 0;
}
}
}
.cp-history-timeline-pos {
width: 2px;
//width: 2px;
border: 2px solid @cryptpad_text_col;
height: 37px;
top: 1px;
background: @pos-color;
//background: @pos-color;
position: absolute;
&:after {
content: '';
border: 9px solid transparent;
border-top-color: @pos-color;
margin-left: -8px;
position: absolute;
top: -8px;
top: -9px;
margin-left: -1px;
width: 100%;
}
}

72
www/common/sframe-common-history.js
View File

@ -14,8 +14,11 @@ define([
History.create = function (common, config) {
if (!config.$toolbar) { return void console.error("config.$toolbar is undefined");}
if (History.loading) { return void console.error("History is already being loaded..."); }
if (History.state) { return void console.error("Already loaded"); }
History.loading = true;
History.state = true;
var $toolbar = config.$toolbar;
var $hist = $toolbar.find('.cp-toolbar-history');
if (!config.applyVal || !config.setHistory || !config.onLocal || !config.onRemote) {
throw new Error("Missing config element: applyVal, onLocal, onRemote, setHistory");
@ -58,6 +61,7 @@ define([
var realtime;
var states = [];
var patchWidth = 0;
var c = 0;//states.length - 1;
var getIndex = function (i) {
@ -82,9 +86,25 @@ define([
}
};
// Refresh the timeline UI with the block states
var bar = h('span.cp-history-timeline-bar');
var onResize = function () {
var $bar = $(bar);
if (!$bar.width() || !$bar.length) { return; }
var widthPx = patchWidth * $bar.width() / 100;
$hist.removeClass('cp-smallpatch');
$bar.find('.cp-history-snapshot').css('margin-left', "");
var $pos = $hist.find('.cp-history-timeline-pos');
$pos.css('margin-left', "");
if (widthPx < 18) {
$hist.addClass('cp-smallpatch');
$bar.find('.cp-history-snapshot').css('margin-left', (widthPx/2-2)+"px");
$pos.css('margin-left', (widthPx/2-2)+"px");
}
};
// Refresh the timeline UI with the block states
var refreshBar = function () {
var $pos = $hist.find('.cp-history-timeline-pos');
var $bar = $(bar).html('');
var users = {
list: [],
@ -99,6 +119,20 @@ define([
i: 0
};
var snapshotsData = {};
var snapshots = [];
try {
if (config.extractMetadata) {
var idx = states.length - 1;
var val = JSON.parse(states[idx].getContent().doc);
var md = config.extractMetadata(val);
if (md.snapshots) {
snapshotsData = md.snapshots;
snapshots = Object.keys(md.snapshots);
}
}
} catch (e) { console.error(e); }
var max = states.length - 1;
var check = function (obj, author, i) {
if (obj.author !== author) {
@ -112,7 +146,18 @@ define([
}
};
var snapshotsEl = [];
patchWidth = 100 / max;
var hash;
for (var i = 1; i < states.length; i++) {
hash = states[i].serverHash;
if (snapshots.indexOf(hash) !== -1) {
snapshotsEl.push(h('div.cp-history-snapshot', {
style: 'width:'+patchWidth+'%;left:'+(patchWidth * (i-1))+'%;',
title: snapshotsData[hash].title
}, h('i.fa.fa-camera')));
}
check(user, getAuthor(i, 1), i);
check(users, getAuthor(i, 2), i);
}
@ -122,8 +167,13 @@ define([
$bar.append([
h('span.cp-history-timeline-users', users.list),
h('span.cp-history-timeline-user', user.list),
h('div.cp-history-snapshots', [
$pos[0],
snapshotsEl
]),
]);
onResize();
};
var allMessages = [];
@ -181,7 +231,6 @@ define([
config.setHistory(true);
var $hist = $toolbar.find('.cp-toolbar-history');
var $bottom = $toolbar.find('.cp-toolbar-bottom');
var $cke = $toolbar.find('.cke_toolbox_main');
@ -269,7 +318,8 @@ define([
}
var $pos = $hist.find('.cp-history-timeline-pos');
var p = 100 * (1 - (-(c - 1) / (states.length-1)));
$pos.css('left', 'calc('+p+'% - 2px)');
$pos.css('left', p+'%');
$pos.css('width', patchWidth+'%');
// Display the version when the full history is loaded
// Note: the first version is always empty and probably can't be displayed, so
@ -350,7 +400,6 @@ define([
]),
h('span.cp-history-timeline-loadmore', _loadMore),
h('span.cp-history-timeline-container', [
pos,
bar
])
]),
@ -404,7 +453,8 @@ define([
]);
$hist.append([timeline, actions]);
onResize();
$(window).on('resize', onResize);
/*
var $rev = $('<button>', {
'class':'cp-toolbar-history-revert buttonSuccess fa fa-check-circle-o',
@ -475,18 +525,21 @@ define([
});
*/
var $bar = $(bar);
$bar.find('.cp-history-snapshots').append(pos);
$bar.click(function (e) {
e.stopPropagation();
console.log(e);
var $t = $(e.target);
var isEl = $t.is('.cp-history-bar-el');
if (!$t.is('.cp-history-timeline-bar') && !isEl) { return; }
if ($t.closest('.cp-history-snapshot').length) {
$t = $t.closest('.cp-history-snapshot');
}
var isEl = $t.is('.cp-history-snapshot');
if (!$t.is('.cp-history-snapshots') && !isEl) { return; }
var x = e.offsetX;
if (isEl) {
x += $t.position().left;
}
var p = x / $bar.width();
var v = -Math.floor((states.length - 1) * (1 - p));
var v = 1-Math.ceil((states.length - 1) * (1 - p));
render(get(v));
});
$loadMore = $(_loadMore).click(function () {
@ -497,6 +550,7 @@ define([
var onKeyDown, onKeyUp;
var closeUI = function () {
History.state = false;
$hist.hide();
$bottom.show();
$cke.show();