From ad59ca7b9c01ec79e45735d8121403e2d7471644 Mon Sep 17 00:00:00 2001 From: Zuzanna Date: Fri, 26 Dec 2025 17:38:57 +0100 Subject: [PATCH] timeline UI wip --- .../src/less2/include/toolbar-history.less | 24 +++++++++--- www/common/drive-ui.js | 5 +++ www/common/onlyoffice/history.js | 38 ++++++++++++++++--- www/common/onlyoffice/inner.js | 2 + www/common/sframe-common-history.js | 1 + www/common/toolbar.js | 3 ++ 6 files changed, 62 insertions(+), 11 deletions(-) diff --git a/customize.dist/src/less2/include/toolbar-history.less b/customize.dist/src/less2/include/toolbar-history.less index 006d8f266..abab30fa2 100644 --- a/customize.dist/src/less2/include/toolbar-history.less +++ b/customize.dist/src/less2/include/toolbar-history.less @@ -129,9 +129,10 @@ } &.cp-smallpatch { .cp-history-snapshot { - border: none !important; - width: 2px !important; - background: @pos-color; + border: 2px solid !important; + // border: none !important; + // width: 2px !important; + // background: @pos-color; } .cp-history-timeline-pos { border-right: none; @@ -190,10 +191,13 @@ // } } } + .cp-history-patch:nth-child(odd) { + background-color: @history_userBg1 + } .cp-history-timeline-bar { display: flex; flex-flow: column; - padding: 1px; + // padding: 1px; & > span { height: 18px; display: flex; @@ -215,8 +219,13 @@ } } } + // .cp-history-patch-color { + // background-color: red !important + + // // background-color: @history_lineBg + // } .cp-history-snapshots { - position: absolute; + // position: absolute; left: 1px; right: 1px; top: 1px; @@ -230,6 +239,11 @@ align-items: center; justify-content: center; } + // .cp-history-patch-color { + // background-color: red !important + + // // background-color: @history_lineBg + // } } } } diff --git a/www/common/drive-ui.js b/www/common/drive-ui.js index 0466f4e3b..88b596074 100644 --- a/www/common/drive-ui.js +++ b/www/common/drive-ui.js @@ -2273,6 +2273,7 @@ define([ var $state = $('', {'class': 'cp-app-drive-element-state'}); if (hrefData.hashData && hrefData.hashData.mode === 'view') { + console.log("hello2") var $ro = $readonlyIcon.clone().appendTo($state); $ro.attr('title', Messages.readonly); } @@ -2377,6 +2378,8 @@ define([ } if (hrefData.hashData && hrefData.hashData.mode === 'view') { $ro = $readonlyIcon.clone().appendTo($state); + console.log("hello3") + $ro.attr('title', Messages.readonly); } @@ -2389,6 +2392,8 @@ define([ $shared.attr('title', Messages.fm_canBeShared); } else if ($content.data('readOnlyFolder') || APP.readOnly) { $ro = $readonlyIcon.clone().appendTo($state); + console.log("hello4") + $ro.attr('title', Messages.readonly); } diff --git a/www/common/onlyoffice/history.js b/www/common/onlyoffice/history.js index fe87879bd..479aa8711 100644 --- a/www/common/onlyoffice/history.js +++ b/www/common/onlyoffice/history.js @@ -7,8 +7,9 @@ define([ '/common/common-interface.js', '/common/hyperscript.js', '/common/common-icons.js', + '/common/common-util.js', -], function ($, UI, h, Icons) { +], function ($, UI, h, Icons, Util) { //var ChainPad = window.ChainPad; var History = {}; @@ -189,7 +190,7 @@ define([ currentVersion = getVersion(position, initial); if (initial) { currentVersion = Messages.oo_version_latest; } - $version.text(Messages.oo_version + currentVersion); + $version.text(Messages.oo_version + currentVersion + ' ' + new Date(patch.time).toLocaleString()); $('.cp-history-timeline-pos-oo').remove(); $('.cp-history-oo-timeline-pos').removeClass('cp-history-oo-timeline-pos'); if (position === msgs.length && id < Object.keys(hashes)[Object.keys(hashes).length-1]) { @@ -205,9 +206,9 @@ define([ loadingFalse(); }; - var displayCheckpointTimeline = function(initial) { + var displayCheckpointTimeline = function(initial) { var bar = $hist.find('.cp-history-timeline-container'); - + $(bar).addClass('cp-history-timeline-bar') if (initial) { var snapshotsEl = []; loadMoreOOHistory(); @@ -216,9 +217,16 @@ define([ } else { msgs = ooMessages[id]; snapshotsEl = Array.from($hist.find('.cp-history-snapshots')[0].childNodes); + var patchColor = snapshotsEl[0] + console.log("hello!", $(patchColor).css('background-color')) msgsRev = msgs.slice().reverse(); } + var cpNfInner = common.startRealtime(config); + + var md = Util.clone(cpNfInner.metadataMgr.getMetadata()); + var snapshots = md.snapshots; + var patchWidth; var patchDiv; for (var i = 0; i < msgs.length; i++) { @@ -228,8 +236,9 @@ define([ } else { patchWidth = (1/(msgs.length+Array.from($hist.find('.cp-history-snapshots')[0].childNodes).length))*100; } - patchDiv = h('div.cp-history-patch', { - style: 'width:'+patchWidth+'%; height: 100%; position: relative', + + patchDiv = h(`div.cp-history-patch`, { + style: 'width:'+patchWidth+'%; height: 100%; position: relative; display: flex; justify-content: center; box-sizing: border-box;', title: new Date(msg.time).toLocaleString(), data: [id, msgsRev.indexOf(msg)] }); @@ -238,6 +247,14 @@ define([ } else { snapshotsEl.unshift(patchDiv); } + if (snapshots) { + var match = Object.values(snapshots).find(item => item.time === msg.time); + if (match) { + $(patchDiv).addClass('cp-history-snapshot').append(Icons.get('snapshot', {title: match.title})) + } + } + + // if (msg.time) } var finalpatchDiv = h('div.cp-history-patch', { @@ -270,6 +287,14 @@ define([ if (initial) { $('.cp-history-patch').last().addClass('cp-history-oo-timeline-pos').append(pos); } + var cpNfInner = common.startRealtime(config); + + var md = Util.clone(cpNfInner.metadataMgr.getMetadata()); + var snapshots = md.snapshots + // Object.keys(snapshots).forEach(function(snap) { + // if (snap.time === + // }) + console.log('snapshots', snapshots) $('.cp-history-patch').on('click', function(e) { if ($('.cp-history-timeline-pos-oo')) { @@ -569,6 +594,7 @@ define([ showVersion(false, 0); update(true); }); + patch = msgs[msgs.length + msgIndex]; position = 0; loadingFalse(); }); diff --git a/www/common/onlyoffice/inner.js b/www/common/onlyoffice/inner.js index 8eb127ebc..d1c9179cb 100644 --- a/www/common/onlyoffice/inner.js +++ b/www/common/onlyoffice/inner.js @@ -3188,6 +3188,8 @@ Uncaught TypeError: Cannot read property 'calculatedType' of null var deleteSnapshot = function (hash) { var md = Util.clone(cpNfInner.metadataMgr.getMetadata()); var snapshots = md.snapshots = md.snapshots || {}; + console.log("hello", snapshots) + delete snapshots[hash]; metadataMgr.updateMetadata(md); APP.onLocal(); diff --git a/www/common/sframe-common-history.js b/www/common/sframe-common-history.js index 65068d700..73c4ce211 100644 --- a/www/common/sframe-common-history.js +++ b/www/common/sframe-common-history.js @@ -158,6 +158,7 @@ define([ var hash; for (var i = 1; i < states.length; i++) { + console.log("snapshots", snapshots) hash = states[i].serverHash; if (snapshots.indexOf(hash) !== -1) { snapshotsEl.push(h('div.cp-history-snapshot', { diff --git a/www/common/toolbar.js b/www/common/toolbar.js index 8a0accaa1..45a7604b3 100644 --- a/www/common/toolbar.js +++ b/www/common/toolbar.js @@ -748,12 +748,15 @@ MessengerUI, Messages, Pages, PadTypes, Icons) { 'title': Messages.saveTitle }).hide(); if (config.readOnly === 1) { + console.log("hello!!") $hoverable.append($('', {'class': 'cp-toolbar-title-readonly'}) .text('('+Messages.readonly+')')); return $titleContainer; } $hoverable.append($('', {'class': 'cp-toolbar-title-readonly cp-toolbar-title-unsync'}) .text('('+Messages.readonly+')')); + console.log("hello5") + var $input = $('', { type: 'text', placeholder: placeholder,