From 601bdbb25d4ddcadd49840fe4f1bc438dc191847 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 20 Oct 2020 14:42:17 +0200 Subject: [PATCH] make session backup banner dismissable --- src/domain/session/SessionStatusViewModel.js | 23 +++++++++++-- src/ui/web/css/status.css | 7 ---- .../web/css/themes/element/icons/dismiss.svg | 4 +++ src/ui/web/css/themes/element/theme.css | 34 ++++++++++++++++--- src/ui/web/session/SessionStatusView.js | 7 ++-- 5 files changed, 56 insertions(+), 19 deletions(-) create mode 100644 src/ui/web/css/themes/element/icons/dismiss.svg diff --git a/src/domain/session/SessionStatusViewModel.js b/src/domain/session/SessionStatusViewModel.js index 32fd4f6c..4486f654 100644 --- a/src/domain/session/SessionStatusViewModel.js +++ b/src/domain/session/SessionStatusViewModel.js @@ -36,6 +36,8 @@ export class SessionStatusViewModel extends ViewModel { this._reconnector = reconnector; this._status = this._calculateState(reconnector.connectionStatus.get(), sync.status.get()); this._session = session; + this._setupSessionBackupUrl = this.urlCreator.urlForSegment("settings"); + this._dismissSecretStorage = false; } start() { @@ -47,8 +49,12 @@ export class SessionStatusViewModel extends ViewModel { })); } + get setupSessionBackupUrl () { + return this._setupSessionBackupUrl; + } + get isShown() { - return this._session.needsSessionBackup.get() || this._status !== SessionStatus.Syncing; + return (this._session.needsSessionBackup.get() && !this._dismissSecretStorage) || this._status !== SessionStatus.Syncing; } get statusLabel() { @@ -65,7 +71,7 @@ export class SessionStatusViewModel extends ViewModel { return this.i18n`Sync failed because of ${this._sync.error}`; } if (this._session.needsSessionBackup.get()) { - return this.i18n`Set up secret storage to decrypt older messages.`; + return this.i18n`Set up session backup to decrypt older messages.`; } return ""; } @@ -130,7 +136,18 @@ export class SessionStatusViewModel extends ViewModel { get isSecretStorageShown() { // TODO: we need a model here where we can have multiple messages queued up and their buttons don't bleed into each other. - return this._status === SessionStatus.Syncing && this._session.needsSessionBackup.get(); + return this._status === SessionStatus.Syncing && this._session.needsSessionBackup.get() && !this._dismissSecretStorage; + } + + get canDismiss() { + return this.isSecretStorageShown; + } + + dismiss() { + if (this.isSecretStorageShown) { + this._dismissSecretStorage = true; + this.emitChange(); + } } connectNow() { diff --git a/src/ui/web/css/status.css b/src/ui/web/css/status.css index de891de1..3c4a436a 100644 --- a/src/ui/web/css/status.css +++ b/src/ui/web/css/status.css @@ -24,10 +24,3 @@ limitations under the License. word-break: break-all; word-break: break-word; } - -.SessionStatusView button { - border: none; - background: none; - color: currentcolor; - text-decoration: underline; -} diff --git a/src/ui/web/css/themes/element/icons/dismiss.svg b/src/ui/web/css/themes/element/icons/dismiss.svg new file mode 100644 index 00000000..1b9cea04 --- /dev/null +++ b/src/ui/web/css/themes/element/icons/dismiss.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/ui/web/css/themes/element/theme.css b/src/ui/web/css/themes/element/theme.css index 22b5ebf7..b880c83d 100644 --- a/src/ui/web/css/themes/element/theme.css +++ b/src/ui/web/css/themes/element/theme.css @@ -306,13 +306,34 @@ a { } .SessionStatusView { - padding: 8px 4px; + padding: 4px; + min-height: 22px; background-color: #03B381; color: white; + align-items: center; } -.middle-shown .SessionStatusView { - top: 72px; + +.SessionStatusView button.link { + color: currentcolor; +} + +.SessionStatusView > .end { + flex: 1; + display: flex; + justify-content: flex-end; + align-self: stretch; + align-items: stretch; +} + +.SessionStatusView .dismiss { + border: none; + background: none; + background-image: url('icons/dismiss.svg'); + background-position: center; + background-repeat: no-repeat; + width: 32px; + cursor: pointer; } .room-placeholder { @@ -598,8 +619,11 @@ button.link { text-decoration: underline; background: none; cursor: pointer; - color: #03B381; - font-weight: 600; margin: -12px; padding: 12px; } + +.Settings a, .Settings .link { + color: #03B381; + font-weight: 600; +} diff --git a/src/ui/web/session/SessionStatusView.js b/src/ui/web/session/SessionStatusView.js index 9b9c10e2..946264bc 100644 --- a/src/ui/web/session/SessionStatusView.js +++ b/src/ui/web/session/SessionStatusView.js @@ -25,10 +25,9 @@ export class SessionStatusView extends TemplateView { }}, [ spinner(t, {hidden: vm => !vm.isWaiting}), t.p(vm => vm.statusLabel), - t.if(vm => vm.isConnectNowShown, t.createTemplate(t => t.button({onClick: () => vm.connectNow()}, "Retry now"))), - t.if(vm => vm.isSecretStorageShown, t.createTemplate(t => t.button({onClick: () => vm.enterPassphrase(prompt("Passphrase"))}, "Enter passphrase"))), - t.if(vm => vm.isSecretStorageShown, t.createTemplate(t => t.button({onClick: () => vm.enterSecurityKey(prompt("Security key"))}, "Enter security key"))), - window.DEBUG ? t.button({id: "showlogs"}, "Show logs") : "" + t.if(vm => vm.isConnectNowShown, t.createTemplate(t => t.button({className: "link", onClick: () => vm.connectNow()}, "Retry now"))), + t.if(vm => vm.isSecretStorageShown, t.createTemplate(t => t.a({href: vm.setupSessionBackupUrl}, "Go to settings"))), + t.if(vm => vm.canDismiss, t.createTemplate(t => t.div({className: "end"}, t.button({className: "dismiss", onClick: () => vm.dismiss()})))), ]); } }