timeline UI wip

2026-09-12 19:49:59 +05:00 · 2025-12-26 17:38:57 +01:00 · 2025-12-26 17:38:57 +01:00 · ad59ca7b9c
commit ad59ca7b9c
parent a3aea8b048
6 changed files with 62 additions and 11 deletions
--- 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
+                    // }
                }
            }
        }
--- a/www/common/drive-ui.js
+++ b/www/common/drive-ui.js
@ -2273,6 +2273,7 @@ define([

            var $state = $('<span>', {'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);
            }

--- 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();
            });
--- 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();
--- 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', {
--- 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($('<span>', {'class': 'cp-toolbar-title-readonly'})
                .text('('+Messages.readonly+')'));
            return $titleContainer;
        }
        $hoverable.append($('<span>', {'class': 'cp-toolbar-title-readonly cp-toolbar-title-unsync'})
            .text('('+Messages.readonly+')'));
+                            console.log("hello5")
+
        var $input = $('<input>', {
            type: 'text',
            placeholder: placeholder,