Snapshot toolbar UI

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

@@ -113,9 +113,6 @@
     }
 
     .cp-snapshots-modal {
-        h6 {
-            margin-bottom: 0;
-        }
         & > input:last-child {
             margin-bottom: 0 !important;
         }
@@ -129,10 +126,12 @@
         max-height: 245px;
         overflow: auto;
         min-height: 100px;
+        outline: none;
         .cp-snapshot-element {
             display: flex;
             align-items: center;
             padding: 5px 0;
+            outline: none;
             & > i {
                 margin-left: @snapshot_spacing;
                 text-align: center;

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

@@ -910,9 +910,24 @@
         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 {
+            i {
+                width: 30px;
+            }
+        }
+        .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

@@ -3318,17 +3318,18 @@ define([
         var modal;
         var readOnly = common.getMetadataMgr().getPrivateData().readOnly;
 
-        var container = h('div.cp-snapshots-container', {tabindex:0});
+        var container = h('div.cp-snapshots-container', {tabindex:1});
         var $container = $(container);
 
         var input = h('input', {
+            tabindex: 1,
             placeholder: Messages.snapshots_placeholder
         });
         var $input = $(input);
         var content = h('div.cp-snapshots-modal', [
             h('h5', Messages.snapshots_button),
             container,
-            readOnly ? undefined : h('h6', Messages.snapshots_new),
+            readOnly ? undefined : h('label', Messages.snapshots_new),
             readOnly ? undefined : input
         ]);
 
@@ -3344,7 +3345,9 @@ define([
             }).map(function (hash) {
                 var s = snapshots[hash];
 
-                var openButton = h('button.cp-snapshot-view.btn.btn-light', [
+                var openButton = h('button.cp-snapshot-view.btn.btn-light', {
+                    tabindex: 1,
+                }, [
                     h('i.fa.fa-eye'),
                     h('span', Messages.snapshots_open)
                 ]);
@@ -3355,7 +3358,9 @@ define([
                     }
                 });
 
-                var deleteButton = h('button.cp-snapshot-delete.btn.btn-light', [
+                var deleteButton = h('button.cp-snapshot-delete.btn.btn-light', {
+                    tabindex: 1,
+                }, [
                     h('i.fa.fa-trash'),
                     h('span', Messages.snapshots_delete)
                 ]);
@@ -3366,7 +3371,7 @@ define([
                     refresh();
                 });
 
-                return h('span.cp-snapshot-element', {tabindex:0}, [
+                return h('span.cp-snapshot-element', {tabindex:1}, [
                     h('i.fa.fa-camera'),
                     h('span.cp-snapshot-title', [
                         h('span', s.title),

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();