diff --git a/customize.dist/src/less2/include/modals-ui-elements.less b/customize.dist/src/less2/include/modals-ui-elements.less index 9e1f6ea24..200f39b29 100644 --- a/customize.dist/src/less2/include/modals-ui-elements.less +++ b/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; diff --git a/customize.dist/src/less2/include/toolbar.less b/customize.dist/src/less2/include/toolbar.less index 863e828a7..ca75dd0d9 100644 --- a/customize.dist/src/less2/include/toolbar.less +++ b/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; diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js index 7d1015482..3ae4ffedd 100644 --- a/www/common/common-ui-elements.js +++ b/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), diff --git a/www/common/inner/snapshots.js b/www/common/inner/snapshots.js index e7b55c00f..dbbf41bf5 100644 --- a/www/common/inner/snapshots.js +++ b/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();