Merge branch 'history' into historyOO

customize.dist/src/less2/include/alertify.less

@@ -167,7 +167,7 @@
                 margin-bottom: @alertify_padding-base;
                 margin: 0;
                 overflow: auto;
-                :last-child {
+                &:last-child {
                     margin-bottom: 0;
                 }
             }
@@ -198,7 +198,7 @@
                             background-color: @alertify-light-bg;
                         }
                         &.disabled {
-                            color: #949494;
+                            color: @colortheme_alertify-cancel-border;
                             cursor: not-allowed;
                         }
                     }

customize.dist/src/less2/include/forms.less

@@ -98,6 +98,7 @@
         text-decoration: none;
         cursor: pointer;
         border-radius: 0;
+        transition: none;
 
         .fa, .cptools {
             margin-right: 0.2em;
@@ -160,6 +161,15 @@
             }
         }
 
+        &.btn-light {
+            border-color: @cryptpad_text_col;
+            color: @cryptpad_text_col;
+            background-color: transparent;
+            &:hover, &:hover, &:focus {
+                background-color: fade(@cryptpad_text_col, 25%);
+            }
+        }
+
         &.cancel, &.btn-cancel {
             border-color: @colortheme_alertify-cancel-border;
             color: @colortheme_alertify-cancel-border;

customize.dist/src/less2/include/modals-ui-elements.less

@@ -112,6 +112,69 @@
         margin-left: 10px;
     }
 
+    .cp-snapshots-modal {
+        & > input:last-child {
+            margin-bottom: 0 !important;
+        }
+    }
+    .cp-snapshots-container {
+        @snapshot_spacing: 10px;
+        display: flex;
+        flex-flow: column;
+        color: @cryptpad_text_col;
+        margin-bottom: @snapshot_spacing;
+        max-height: 245px;
+        overflow: auto;
+        outline: none;
+        .cp-snapshot-spinner {
+            min-height: 90px;
+            text-align: center;
+        }
+        .cp-snapshot-element {
+            display: flex;
+            align-items: center;
+            padding: 5px 0;
+            outline: none;
+            & > i {
+                margin-left: @snapshot_spacing;
+                text-align: center;
+            }
+            .cp-snapshot-title {
+                margin-left: @snapshot_spacing;
+                display: flex;
+                flex-flow: column;
+                flex: 1;
+                min-width: 0;
+                span {
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                }
+                .cp-snapshot-time {
+                    font-size: 12px;
+                }
+            }
+            .cp-snapshot-buttons {
+                margin-left: @snapshot_spacing;
+                display: none;
+                align-items: flex-start;
+                margin-bottom: -3px;
+                .cp-button-confirm {
+                    margin-right: @snapshot_spacing;
+                }
+                button {
+                    margin-right: @snapshot_spacing;
+                }
+            }
+            &:hover, &:focus, &:focus-within {
+                .cp-snapshot-buttons {
+                    display: flex;
+                }
+                background-color: #DDD;
+            }
+        }
+    }
+
     // mediatag preview
     #cp-mediatag-preview-modal {
         .cp-modal {

customize.dist/src/less2/include/toolbar-history.less

@@ -22,6 +22,35 @@
             font: @colortheme_app-font;
         }
 
+
+        @media screen and (max-width: 870px) {
+            flex-flow: column;
+            .cp-toolbar-history-actions {
+                width: 100%;
+                .cp-history-actions-first {
+                    margin-right: 0 !important;
+                }
+            }
+            .cp-toolbar-history-timeline {
+                width: ~"calc(100% - 20px)";
+                margin-right: 10px !important;
+            }
+        }
+
+        @media screen and (max-height: 500px) {
+            padding-top: 0px;
+            .cp-history-timeline-line {
+                display: none !important;
+            }
+            .cp-toolbar-history-timeline {
+                width: 100% !important;
+                margin: 0 !important;
+            }
+            .cp-history-timeline-actions {
+                margin-left: 0 !important;
+            }
+        }
+
         &.cp-history-init {
             padding: 0;
             height: 32px;
@@ -33,6 +62,15 @@
             flex: 1;
             margin-left: 10px;
             margin-right: @fill-width;
+            .cp-history-timeline-time {
+                font-size: 12px;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                flex: 1;
+                min-width: 0;
+                text-align: center;
+            }
         }
         .cp-toolbar-history-actions {
             display: flex;
@@ -51,6 +89,13 @@
                 .fa:not(:last-child) {
                     margin-right: 5px;
                 }
+                &:disabled {
+                    cursor: not-allowed !important;
+                    opacity: 0.6;
+                    &:hover, &:active {
+                        background-color: transparent;
+                    }
+                }
             }
         }
 
@@ -88,7 +133,7 @@
                 border-left: none;
                 width: 2px !important;
                 background: @pos-color;
-                &:before {
+                &:before {
                     left: -6px;
                 }
             }
@@ -166,6 +211,7 @@
                     right: 1px;
                     top: 1px;
                     bottom: 1px;
+                    cursor: pointer;
                     .cp-history-snapshot {
                         position: absolute;
                         border: 2px solid @cryptpad_text_col;

customize.dist/src/less2/include/toolbar.less

@@ -910,9 +910,35 @@
         display: none;
         text-align: center;
         width: 100%;
-        padding: 10px 0;
+        padding: 5px 0;
         align-items: center;
-        justify-content: center;
+        justify-content: space-between;
+        .cp-toolbar-snapshots-info {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            flex: 1;
+            min-width: 0;
+            i {
+                width: 30px;
+            }
+        }
+        @media screen and (max-width: @browser_media-medium-screen) {
+            flex-flow: column;
+            .cp-toolbar-snapshots-info {
+                max-width: 100%;
+            }
+        }
+        .cp-toolbar-snapshots-actions {
+            button {
+                margin: 0 5px;
+                border: 1px solid @cryptpad_text_col;
+                text-transform: uppercase;
+                i:not(:last-child) {
+                    margin-right: 5px;
+                }
+            }
+        }
     }
     .cp-toolbar-bottom {
         background-color: @toolbar-bg-color-light;

www/common/common-ui-elements.js

@@ -758,23 +758,16 @@ define([
                     button = $('<span>');
                     break;
                 }
-                var active = $(".cp-toolbar-history:visible").length !== 0;
                 button = $('<button>', {
-                    title: active ? Messages.history_closeTitle : Messages.historyButton,
+                    title: Messages.historyButton,
                     'class': "fa fa-history cp-toolbar-icon-history",
                 }).append($('<span>', {'class': 'cp-toolbar-drawer-element'}).text(Messages.historyText));
-                button.toggleClass("active", active);
                 if (data.histConfig) {
-                    if (active) {
+                    button
-                        button.click(function () { $(".cp-toolbar-history-close").trigger("click"); });
+                        .click(common.prepareFeedback(type))
-                    }
+                        .on('click', function () {
-                    else {
+                        common.getHistory(data.histConfig);
-                        button
+                    });
-                            .click(common.prepareFeedback(type))
-                            .on('click', function () {
-                            common.getHistory(data.histConfig);
-                        });
-                    }
                 }
                 break;
             case 'mediatag':
@@ -888,7 +881,7 @@ define([
                     if (typeof(data.load) !== "function" || typeof(data.make) !== "function") {
                         return;
                     }
-                    UIElements.openSnapshotsModal(common, data.load, data.make);
+                    UIElements.openSnapshotsModal(common, data.load, data.make, data.remove);
                 });
                 break;
             default:
@@ -3319,63 +3312,119 @@ define([
     Messages.snapshots_button = "Snapshots";
     Messages.snapshots_new = "New snapshot"; // XXX
     Messages.snapshots_placeholder = "Snapshot title"; // XXX
-    Messages.snapshots_open = "Open";
+    Messages.snapshots_open = "View";
-    UIElements.openSnapshotsModal = function (common, load, make) {
+    Messages.snapshots_delete = "Delete";
-        var metadataMgr = common.getMetadataMgr();
+    Messages.snapshots_cantMake = "Disconnected. Can't create a new snapshot now.";
-        var md = metadataMgr.getMetadata();
+    UIElements.openSnapshotsModal = function (common, load, make, remove) {
-        var snapshots = md.snapshots || {};
         var modal;
+        var readOnly = common.getMetadataMgr().getPrivateData().readOnly;
 
-        var list = Object.keys(snapshots).sort(function (h1, h2) {
+        var container = h('div.cp-snapshots-container', {tabindex:1});
-            var s1 = snapshots[h1];
+        var $container = $(container);
-            var s2 = snapshots[h2];
-            return s1.time - s2.time;
-        }).map(function (hash) {
-            var s = snapshots[hash];
-            var button = h('button.btn.btn-secondary', Messages.snapshots_open);
-            $(button).click(function () {
-                load(hash, s);
-                if (modal && modal.closeModal) { modal.closeModal(); }
-            });
-            return h('span.cp-snapshot-element', [
-                h('i.fa.fa-camera'),
-                h('span.cp-snapshot-title', s.title),
-                button
-            ]);
-        });
 
         var input = h('input', {
+            tabindex: 1,
             placeholder: Messages.snapshots_placeholder
         });
         var $input = $(input);
-        var content = h('div', [
+        var content = h('div.cp-snapshots-modal', [
-            h('h4', Messages.snapshots_button),
+            h('h5', Messages.snapshots_button),
-            h('div.cp-snapshots-container', list),
+            container,
-            h('h5', Messages.snapshots_new),
+            readOnly ? undefined : h('label', Messages.snapshots_new),
-            input
+            readOnly ? undefined : input
         ]);
 
+        var refresh = function () {
+            var metadataMgr = common.getMetadataMgr();
+            var md = metadataMgr.getMetadata();
+            var snapshots = md.snapshots || {};
+
+            var list = Object.keys(snapshots).sort(function (h1, h2) {
+                var s1 = snapshots[h1];
+                var s2 = snapshots[h2];
+                return s1.time - s2.time;
+            }).map(function (hash) {
+                var s = snapshots[hash];
+
+                var openButton = h('button.cp-snapshot-view.btn.btn-light', {
+                    tabindex: 1,
+                }, [
+                    h('i.fa.fa-eye'),
+                    h('span', Messages.snapshots_open)
+                ]);
+                $(openButton).click(function () {
+                    load(hash, s);
+                    if (modal && modal.closeModal) {
+                        modal.closeModal();
+                    }
+                });
+
+                var deleteButton = h('button.cp-snapshot-delete.btn.btn-light', {
+                    tabindex: 1,
+                }, [
+                    h('i.fa.fa-trash'),
+                    h('span', Messages.snapshots_delete)
+                ]);
+                UI.confirmButton(deleteButton, {
+                    classes: 'btn-danger'
+                }, function () {
+                    remove(hash, s);
+                    refresh();
+                });
+
+                return h('span.cp-snapshot-element', {tabindex:1}, [
+                    h('i.fa.fa-camera'),
+                    h('span.cp-snapshot-title', [
+                        h('span', s.title),
+                        h('span.cp-snapshot-time', new Date(s.time).toLocaleString())
+                    ]),
+                    h('span.cp-snapshot-buttons', [
+                        readOnly ? undefined : deleteButton,
+                        openButton,
+                    ])
+                ]);
+            });
+
+            $container.html('').append(list);
+            setTimeout(function () {
+                if (list.length) { return void $container.focus(); }
+                $input.focus();
+            });
+        };
+        refresh();
+
         var buttons = [{
             className: 'cancel',
             name: Messages.filePicker_close,
             onClick: function () {},
             keys: [27],
-        }, {
-            className: 'primary',
-            icon: 'fa-camera',
-            name: Messages.snapshots_new,
-            onClick: function () {
-                var val = $input.val();
-                if (!val) { return true; }
-                make(val);
-            },
-            keys: [],
         }];
+        if (!readOnly) {
+            buttons.push({
+                className: 'primary',
+                iconClass: '.fa.fa-camera',
+                name: Messages.snapshots_new,
+                onClick: function () {
+                    var val = $input.val();
+                    if (!val) { return true; }
+                    $container.html('').append(h('div.cp-snapshot-spinner'));
+                    var to = setTimeout(function () {
+                        UI.spinner($container.find('div')).get().show();
+                    });
+                    make(val, function (err) {
+                        clearTimeout(to);
+                        if (err) {
+                            return void UI.alert(Messages.snapshots_cantMake);
+                        }
+                        refresh();
+                    });
+                    return true;
+                },
+                keys: [],
+            });
+        }
 
         modal = UI.openCustomModal(UI.dialog.customModal(content, {buttons: buttons }));
-        setTimeout(function () {
-            $input.focus();
-        });
     };
 
     return UIElements;

www/common/inner/snapshots.js

@@ -64,6 +64,16 @@ Messages.snapshots_cantRestore = "Can't restore now. Disconnected...";
         var display = function () {
             var data = config.data || {};
 
+            var actions = h('span.cp-toolbar-snapshots-actions');
+            var $actions = $(actions);
+            var content = [
+                h('span.cp-toolbar-snapshots-info', [
+                    h('i.fa.fa-camera'),
+                    h('span.cp-toolbar-snapshots-title', data.title + ' - ' + new Date(data.time).toLocaleString()),
+                ]),
+                actions
+            ];
+
             if (!config.readOnly) {
                 $(h('button.cp-toolbar-snapshots-restore', [
                     h('i.fa.fa-check'),
@@ -77,10 +87,9 @@ Messages.snapshots_cantRestore = "Can't restore now. Disconnected...";
                     $bottom.show();
                     $cke.show();
                     Snapshots.loading = false;
-                }).appendTo($snap);
+                }).appendTo($actions);
             }
 
-            $(h('span.cp-toolbar-snapshots-title', data.title)).appendTo($snap);
 
             $(h('button.cp-toolbar-snapshots-close', [
                 h('i.fa.fa-times'),
@@ -91,7 +100,9 @@ Messages.snapshots_cantRestore = "Can't restore now. Disconnected...";
                 $cke.show();
                 Snapshots.loading = false;
                 config.close(false);
-            }).appendTo($snap);
+            }).appendTo($actions);
+
+            $snap.append(content);
         };
 
         display();

www/common/sframe-app-framework.js

@@ -130,21 +130,32 @@ define([
             return;
         };
 
-        var makeSnapshot = function (title) {
+        var deleteSnapshot = function (hash) {
+            var md = Util.clone(cpNfInner.metadataMgr.getMetadata());
+            var snapshots = md.snapshots = md.snapshots || {};
+            delete snapshots[hash];
+            cpNfInner.metadataMgr.updateMetadata(md);
+            onLocal();
+        };
+        var makeSnapshot = function (title, cb) {
+            if (state !== STATE.READY) {
+                return void cb('NOT_READY');
+            }
             var sframeChan = common.getSframeChannel();
             sframeChan.query("Q_GET_LAST_HASH", null, function (err, obj) {
                 if (err || (obj && obj.error)) { return void UI.warn(Messages.error); }
                 var hash = obj.hash;
-                if (!hash) { return void UI.warn(Messages.error); }
+                if (!hash) { cb('NO_HASH'); return void UI.warn(Messages.error); }
                 var md = Util.clone(cpNfInner.metadataMgr.getMetadata());
                 var snapshots = md.snapshots = md.snapshots || {};
-                if (snapshots[hash]) { return void UI.warn(Messages.error); } // XXX EEXISTS
+                if (snapshots[hash]) { cb('EEXISTS'); return void UI.warn(Messages.error); } // XXX
                 snapshots[hash] = {
                     title: title,
                     time: +new Date()
                 };
                 cpNfInner.metadataMgr.updateMetadata(md);
                 onLocal();
+                cpNfInner.chainpad.onSettle(cb);
             });
         };
 
@@ -349,6 +360,7 @@ define([
         };
         var setLastMetadata = function (md) {
             if (!unsyncMode) { return; }
+            if (state !== STATE.READY) { return; }
             var newContentStr = cpNfInner.chainpad.getAuthDoc();
             var newContent = JSON.parse(newContentStr);
             if (Array.isArray(newContent)) {
@@ -809,10 +821,10 @@ define([
                 $toolbar: $(toolbarContainer)
             };
             var $hist = common.createButton('history', true, {histConfig: histConfig});
-            $hist.addClass('cp-hidden-if-readonly');
             toolbar.$drawer.append($hist);
 
             var $snapshot = common.createButton('snapshots', true, {
+                remove: deleteSnapshot,
                 make: makeSnapshot,
                 load: loadSnapshot
             });

www/common/sframe-common-history.js

@@ -247,8 +247,10 @@ define([
                 var metadataMgr = common.getMetadataMgr();
                 var lastMd = config.getLastMetadata();
                 var _snapshots = lastMd.snapshots;
+                var _users = lastMd.users;
                 var md = Util.clone(metadataMgr.getMetadata());
                 md.snapshots = _snapshots;
+                md.users = _users;
                 metadataMgr.updateMetadata(md);
             }
 
@@ -281,7 +283,7 @@ define([
             return states;
         };
 
-        var $loadMore, $version, $time, get;
+        var $loadMore, $time, get;
 
         // Get the content of the selected version, and change the version number
         var loading = false;
@@ -295,7 +297,6 @@ define([
                 if (err === 'EFULL') {
                     $loadMore.off('click').hide();
                     get(c);
-                    $version.show();
                     return;
                 }
                 loading = false;
@@ -306,7 +307,6 @@ define([
                 get(c);
                 if (isFull) {
                     $loadMore.off('click').hide();
-                    $version.show();
                 }
                 if (cb) { cb(); }
             });
@@ -325,7 +325,7 @@ define([
 
             var idx = getIndex(i);
             if (semantic && i !== c) {
-                // If semantic is truc, jump to the next patch from a different netflux ID
+                // If semantic is true, jump to the next patch from a different netflux ID
                 var author = getAuthor(idx, semantic);
                 var forward = i > c;
                 for (var j = idx; (j > 0 && j < states.length ); (forward ? j++ : j--)) {
@@ -357,7 +357,6 @@ define([
             // Display the version when the full history is loaded
             // Note: the first version is always empty and probably can't be displayed, so
             // we can consider we have only states.length - 1 versions
-            $version.text(idx + ' / ' + (states.length-1));
             var time = states[idx].time;
             if (time) {
                 $time.text(new Date(time).toLocaleString());
@@ -397,7 +396,7 @@ define([
                     time: block.time ? (+new Date(block.time)) : +new Date()
                 };
                 var sent = config.setLastMetadata(md);
-                if (!sent) { return void UI.warn(Messages.error); }
+                if (!sent) { return void UI.alert(Messages.snapshots_cantMake); }
                 refreshBar();
             } catch (e) {
                 console.error(e);
@@ -460,7 +459,6 @@ define([
             var pos = h('span.cp-history-timeline-pos.fa.fa-caret-down');
             var time = h('div.cp-history-timeline-time');
             $time = $(time);
-            $version = $(); // XXX
             var timeline = h('div.cp-toolbar-history-timeline', [
                 h('div.cp-history-timeline-line', [
                     h('span.cp-history-timeline-legend', [
@@ -490,6 +488,9 @@ define([
             Messages.history_restore = "Restore";// XXX
             Messages.history_close = "Close";// XXX
             Messages.history_shareTitle = "Share a link to this version"; // XXX
+            Messages.history_restoreDriveTitle = "Restore the selected version of the DRIVE"; // XXX
+            Messages.history_restoreDrivePrompt = "Are you sure you want to replace the current version of the DRIVE by the displayed one?"; // XXX
+            Messages.history_restoreDriveDone = "DRIVE restored";
             var snapshot = h('button', {
                 title: Messages.snapshots_new,
             }, [
@@ -499,8 +500,10 @@ define([
                 h('i.fa.fa-shhare-alt'),
                 h('span', Messages.shareButton)
             ]);
+            var restoreTitle = config.drive ? Messages.history_restoreDriveTitle
+                                   : Messages.history_restoreTitle;
             var restore = h('button', {
-                title: Messages.history_restoreTitle,
+                title: restoreTitle,
             }, [
                 h('i.fa.fa-check'),
                 h('span', Messages.history_restore)
@@ -614,7 +617,7 @@ define([
                     keys: [27],
                 }, {
                     className: 'primary',
-                    icon: 'fa-camera',
+                    iconClass: '.fa.fa-camera',
                     name: Messages.snapshots_new,
                     onClick: function () {
                         var val = $input.val();
@@ -646,12 +649,16 @@ define([
                 closeUI();
             });
             $(restore).click(function () {
-                UI.confirm(Messages.history_restorePrompt, function (yes) {
+                var restorePrompt = config.drive ? Messages.history_restoreDrivePrompt
+                                                 : Messages.history_restorePrompt;
+                UI.confirm(restorePrompt, function (yes) {
                     if (!yes) { return; }
                     var done = onRevert();
                     if (done) {
                         closeUI();
-                        UI.log(Messages.history_restoreDone);
+                        var restoreDone = config.drive ? Messages.history_restoreDriveDone
+                                                       : Messages.history_restoreDone;
+                        UI.log(restoreDone);
                     }
                 });
             });
@@ -674,7 +681,6 @@ define([
             display();
             if (isFull) {
                 $loadMore.off('click').hide();
-                $version.show();
             }
         });
     };