From 39fac5fd0218d16a773847d7781da73a3e9ae3fe Mon Sep 17 00:00:00 2001 From: Beaudan Brown Date: Wed, 9 Oct 2019 09:44:59 +1100 Subject: [PATCH] Add initial add server UI skeleton --- _locales/en/messages.json | 8 +++ background.html | 25 +++++++++ js/background.js | 7 +++ js/views/add_server_dialog_view.js | 57 ++++++++++++++++++++ js/views/app_view.js | 5 ++ js/views/connecting_to_server_dialog_view.js | 47 ++++++++++++++++ test/index.html | 3 +- ts/components/MainHeader.tsx | 11 ++++ 8 files changed, 162 insertions(+), 1 deletion(-) create mode 100644 js/views/add_server_dialog_view.js create mode 100644 js/views/connecting_to_server_dialog_view.js diff --git a/_locales/en/messages.json b/_locales/en/messages.json index e58951412..36aaa78d9 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -1940,6 +1940,14 @@ "message": "Show QR code", "description": "Button action that the user can click to view their QR code" }, + "showAddServer": { + "message": "Add public server", + "description": "Button action that the user can click to connect to a new public server" + }, + "addServerDialogTitle": { + "message": "Connect to new public server", + "description": "Title for the dialog box used to connect to a new public server" + }, "seedViewTitle": { "message": diff --git a/background.html b/background.html index ff532f26c..391894588 100644 --- a/background.html +++ b/background.html @@ -282,6 +282,29 @@ + + + + diff --git a/js/background.js b/js/background.js index 710471086..ccf1f0214 100644 --- a/js/background.js +++ b/js/background.js @@ -749,6 +749,13 @@ } }); + Whisper.events.on('showAddServerDialog', async options => { + console.log('Adding new server: background'); + if (appView) { + appView.showAddServerDialog(options); + } + }); + Whisper.events.on('showQRDialog', async () => { if (appView) { const ourNumber = textsecure.storage.user.getNumber(); diff --git a/js/views/add_server_dialog_view.js b/js/views/add_server_dialog_view.js new file mode 100644 index 000000000..0e8fe3cf1 --- /dev/null +++ b/js/views/add_server_dialog_view.js @@ -0,0 +1,57 @@ +/* global Whisper, i18n, QRCode, lokiPublicChatAPI */ + +// eslint-disable-next-line func-names +(function() { + 'use strict'; + + window.Whisper = window.Whisper || {}; + + Whisper.AddServerDialogView = Whisper.View.extend({ + templateName: 'add-server-template', + className: 'loki-dialog add-server modal', + initialize(options = {}) { + console.log(`Add server init: ${options}`); + this.title = i18n('addServerDialogTitle'); + this.okText = options.okText || i18n('ok'); + this.cancelText = options.cancelText || i18n('cancel'); + this.resolve = options.resolve; + this.render(); + this.$('.add-server').bind('keyup', event => this.onKeyup(event)); + }, + events: { + 'click .ok': 'confirm', + 'click .cancel': 'close', + }, + render_attributes() { + return { + title: this.title, + ok: this.okText, + cancel: this.cancelText, + }; + }, + confirm() { + const serverUrl = this.$('#server-url').val(); + console.log(`You confirmed the adding of a new server: ${serverUrl}`); + const dialog = new Whisper.ConnectingToServerDialogView({ serverUrl }); + this.el.append(dialog.el); + }, + async validateServer() { + }, + close() { + this.remove(); + }, + onKeyup(event) { + switch (event.key) { + case 'Enter': + break; + case 'Escape': + case 'Esc': + this.close(); + break; + default: + break; + } + }, + }); +})(); + diff --git a/js/views/app_view.js b/js/views/app_view.js index 31235bf9f..0c680d946 100644 --- a/js/views/app_view.js +++ b/js/views/app_view.js @@ -200,5 +200,10 @@ const dialog = new Whisper.QRDialogView({ string }); this.el.append(dialog.el); }, + showAddServerDialog({ resolve }) { + console.log('Adding new server: AppView'); + const dialog = new Whisper.AddServerDialogView({ resolve }); + this.el.append(dialog.el); + }, }); })(); diff --git a/js/views/connecting_to_server_dialog_view.js b/js/views/connecting_to_server_dialog_view.js new file mode 100644 index 000000000..177262ce2 --- /dev/null +++ b/js/views/connecting_to_server_dialog_view.js @@ -0,0 +1,47 @@ +/* global Whisper, i18n, QRCode, lokiPublicChatAPI */ + +// eslint-disable-next-line func-names +(function() { + 'use strict'; + + window.Whisper = window.Whisper || {}; + + Whisper.ConnectingToServerDialogView = Whisper.View.extend({ + templateName: 'connecting-to-server-template', + className: 'loki-dialog connecting-to-server modal', + initialize(options = {}) { + console.log(`Add server init: ${options}`); + this.title = i18n('loading'); + this.cancelText = options.cancelText || i18n('cancel'); + this.render(); + this.$('.connecting-to-server').bind('keyup', event => this.onKeyup(event)); + const serverAPI = lokiPublicChatAPI.findOrCreateServer( + options.serverUrl + ); + }, + events: { + 'click .cancel': 'close', + }, + render_attributes() { + return { + title: this.title, + cancel: this.cancelText, + }; + }, + close() { + this.remove(); + }, + onKeyup(event) { + switch (event.key) { + case 'Escape': + case 'Esc': + this.close(); + break; + default: + break; + } + }, + }); +})(); + + diff --git a/test/index.html b/test/index.html index ef36a342e..4528bef6b 100644 --- a/test/index.html +++ b/test/index.html @@ -567,7 +567,8 @@ - + + diff --git a/ts/components/MainHeader.tsx b/ts/components/MainHeader.tsx index 8f099dfd3..b0f5d8d36 100644 --- a/ts/components/MainHeader.tsx +++ b/ts/components/MainHeader.tsx @@ -334,6 +334,17 @@ export class MainHeader extends React.Component { trigger('showQRDialog'); }, }, + { + id: 'showAddServer', + name: i18n('showAddServer'), + onClick: () => { + trigger('showAddServerDialog', { + resolve: (serverUrl) => { + console.log(`Adding a new server: ${serverUrl}`); + }, + }); + }, + }, ]; const passItem = (type: string) => ({