timeline UI - wip

This commit is contained in:
Zuzanna 2025-12-10 16:22:11 +01:00
parent 17c5db220e
commit 6e15d4fdcb
2 changed files with 65 additions and 26 deletions

View File

@ -168,7 +168,7 @@
.cp-history-timeline-container {
flex: 1;
position: relative;
background-color: @history_lineBg;
background-color: @history_userBg2;
height: 39px;
.cp-oohistory-bar-el {
background-color: @history_userBg2;
@ -262,8 +262,22 @@
}
}
.cp-history-oo-timeline-pos {
width: 2px;
border: 2px solid @cryptpad_text_col;
height: 37px;
//background: @pos-color;
// position: absolute;
&:before {
top: -17px;
font-size: 24px;
position: absolute;
// left: ~"calc(50% - 6px)";
}
}
.cp-history-timeline-pos {
//width: 2px;
width: 2px;
border: 2px solid @cryptpad_text_col;
height: 37px;
//background: @pos-color;

View File

@ -80,6 +80,7 @@ define([
lastKnownHash: fromHash,
toHash: toHash,
}, function (err, data) {
if (err) { return void console.error(err); }
if (!Array.isArray(data.messages)) { return void console.error('Not an array!'); }
@ -87,6 +88,7 @@ define([
var messages = (data.messages || []).slice(initialCp || config.docType() === 'spreadsheet' ? 0 : 1);
if (config.debug) { console.log(data.messages); }
id = typeof(id) !== "undefined" ? id : getId();
fillOO(messages);
loading = false;
@ -191,33 +193,47 @@ define([
snapshots
]);
if (!ooMessages[id]) { return; }
if (!ooMessages[id] && !initial) { return; }
var msgs = ooMessages[id];
var p;
var messageIndex = forward ? msgIndex+1 : msgIndex;
if (!Object.keys(hashes).length) {
p = 100-100*((messageIndex ) / (-msgs.length));
for (var i = 1; i < msgs.length; i++) {
var patchWidth;
var patchDiv;
for (var i = 0; i < msgs.length; i++) {
var msg = msgs[i]
var patchWidth = (1/msgs.length)*100
var patchDiv = h('div.cp-history-patch', {
patchWidth = (1/msgs.length)*100
patchDiv = h('div.cp-history-patch', {
style: 'width:'+patchWidth+'%; height: 100%',
title: new Date(msg.time).toLocaleString(),
data: [id, msgs.indexOf(msg)]
})
console.log("PATCH",msgs.indexOf(patch), i, msgs.length-1)
if (msgs[msgs.indexOf(patch)-1] === msg && !initial && patch && msgs[msgs.indexOf(patch)-1]) {
$(patchDiv).addClass('cp-history-oo-timeline-pos')
} else if (msgs.indexOf(patch) === -1 && i === msgs.length-1) {
$(patchDiv).addClass('cp-history-oo-timeline-pos')
}
snapshotsEl.push(patchDiv);
}
var emptyPatchDiv = h('div.cp-history-patch', {
style: 'width:'+patchWidth+'%; height: 100%',
title: new Date().toLocaleString(),
data: [0, 0]
})
if (msgs[0] === patch) {
$(emptyPatchDiv).addClass('cp-history-oo-timeline-pos')
}
snapshotsEl.unshift(emptyPatchDiv);
} else {
console.log("hashes,", hashes, id, ooMessages[id], hashes, Object.keys(hashes)[Object.keys(hashes).length-2])
console.log("hashes,", hashes, id, ooMessages[id], hashes, Object.keys(hashes)[Object.keys(hashes).length-2])
if (id === parseInt(Object.keys(hashes)[Object.keys(hashes).length-2])) {
p = 100-100*((messageIndex ) / (-msgs.length));
} else {
spanWidth = (nextCp/(nextCp+currentCp))*100
@ -240,7 +256,7 @@ define([
// p = 100*(segments);
// if (id === 0) { p = 0; }
// var percentage = ((position/msgs.length)*100);
// var timelinePosition = (percentage/100)*(100/hashLength);
// p += timelinePosition;
@ -264,23 +280,29 @@ define([
else { $time.text(''); }
update();
$('.cp-history-patch').on('click', function(e) {
var patchData = $(e.target).attr('data').split(',')
msgs = ooMessages[id]
if (parseInt(patchData[0]) === -1) {
var q = msgs.slice(0, patchData[1])
config.onPatchBack({}, q)
} else {
config.onPatchBack(hashes[patchData[0]], msgs[patchData[1]])
}
})
$('.cp-history-patch').on('click', function(e) {
var patchData = $(e.target).attr('data').split(',')
var cpNo = parseInt(patchData[0])
var patchNo = parseInt(patchData[1])
msgs = ooMessages[id]
if (cpNo === -1) {
var q = msgs.slice(0, patchNo+1)
config.onPatchBack({}, q)
patch = msgs[patchNo+1]
} else if (cpNo === 0 && patchNo === 0) {
config.onPatchBack({})
patch = msgs[0]
} else {
config.onPatchBack(hashes[patchData[0]], msgs[patchData[1]])
patch = msgs[patchData[1]]
}
position = msgs.indexOf(patch)+2
showVersion(false, position)
})
loadingFalse();
};
var loadingFalse = function () {
setTimeout(function () {
$('iframe').blur();
@ -637,10 +659,13 @@ define([
display();
showVersion(true);
setTimeout(() => {
showVersion(true);;
}, "1000");
//return void loadMoreOOHistory();
};