Snapshot modal UI

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

@@ -161,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,66 @@
         margin-left: 10px;
     }
 
+    .cp-snapshots-modal {
+        h6 {
+            margin-bottom: 0;
+        }
+        & > 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;
+        .cp-snapshot-element {
+            display: flex;
+            align-items: center;
+            padding: 5px 0;
+            & > 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 {
+                .cp-snapshot-buttons {
+                    display: flex;
+                }
+                background-color: #DDD;
+            }
+        }
+    }
+
     // mediatag preview
     #cp-mediatag-preview-modal {
         .cp-modal {

www/common/common-interface.js

@@ -707,6 +707,7 @@ define([
         var i = 1;
 
         var todo = function () {
+            if (i = 10) { return; }
             var p = 100 * ((TIMEOUT - (i * INTERVAL)) / TIMEOUT);
             if (i++ * INTERVAL >= TIMEOUT) {
                 done(false);

www/common/common-ui-elements.js

@@ -881,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:
@@ -3312,12 +3312,14 @@ define([
     Messages.snapshots_button = "Snapshots";
     Messages.snapshots_new = "New snapshot"; // XXX
     Messages.snapshots_placeholder = "Snapshot title"; // XXX
-    Messages.snapshots_open = "Open";
-    UIElements.openSnapshotsModal = function (common, load, make) {
+    Messages.snapshots_open = "View";
+    Messages.snapshots_delete = "Delete";
+    UIElements.openSnapshotsModal = function (common, load, make, remove) {
         var metadataMgr = common.getMetadataMgr();
         var md = metadataMgr.getMetadata();
         var snapshots = md.snapshots || {};
         var modal;
+        var readOnly = common.getMetadataMgr().getPrivateData().readOnly;
 
         var list = Object.keys(snapshots).sort(function (h1, h2) {
             var s1 = snapshots[h1];
@@ -3325,15 +3327,43 @@ define([
             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 () {
+
+            var openButton = h('button.cp-snapshot-view.btn.btn-light', [
+                h('i.fa.fa-eye'),
+                h('span', Messages.snapshots_open)
+            ]);
+            $(openButton).click(function () {
                 load(hash, s);
-                if (modal && modal.closeModal) { modal.closeModal(); }
+                if (modal && modal.closeModal) {
+                    modal.closeModal();
+                    UIElements.openSnapshotsModal(common, load, make, remove);
+                }
+            });
+
+            var deleteButton = h('button.cp-snapshot-delete.btn.btn-light', [
+                h('i.fa.fa-trash'),
+                h('span', Messages.snapshots_delete)
+            ]);
+            UI.confirmButton(deleteButton, {
+                classes: 'btn-danger'
+            }, function () {
+                remove(hash, s);
+                if (modal && modal.closeModal) {
+                    modal.closeModal();
+                    UIElements.openSnapshotsModal(common, load, make, remove);
+                }
             });
+
             return h('span.cp-snapshot-element', [
                 h('i.fa.fa-camera'),
-                h('span.cp-snapshot-title', s.title),
-                button
+                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,
+                ])
             ]);
         });
 
@@ -3341,11 +3371,11 @@ define([
             placeholder: Messages.snapshots_placeholder
         });
         var $input = $(input);
-        var content = h('div', [
-            h('h4', Messages.snapshots_button),
+        var content = h('div.cp-snapshots-modal', [
+            h('h5', Messages.snapshots_button),
             h('div.cp-snapshots-container', list),
-            h('h5', Messages.snapshots_new),
-            input
+            readOnly ? undefined : h('h6', Messages.snapshots_new),
+            readOnly ? undefined : input
         ]);
 
         var buttons = [{
@@ -3353,17 +3383,20 @@ define([
             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; }
+                    make(val);
+                },
+                keys: [],
+            });
+        }
 
         modal = UI.openCustomModal(UI.dialog.customModal(content, {buttons: buttons }));
         setTimeout(function () {

www/common/sframe-app-framework.js

@@ -130,6 +130,13 @@ define([
             return;
         };
 
+        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) {
             var sframeChan = common.getSframeChannel();
             sframeChan.query("Q_GET_LAST_HASH", null, function (err, obj) {
@@ -813,6 +820,7 @@ define([
             toolbar.$drawer.append($hist);
 
             var $snapshot = common.createButton('snapshots', true, {
+                remove: deleteSnapshot,
                 make: makeSnapshot,
                 load: loadSnapshot
             });

www/common/sframe-common-history.js

@@ -615,7 +615,7 @@ define([
                     keys: [27],
                 }, {
                     className: 'primary',
-                    icon: 'fa-camera',
+                    iconClass: '.fa.fa-camera',
                     name: Messages.snapshots_new,
                     onClick: function () {
                         var val = $input.val();