From b5daf8fe0aa540f4e879182d5114a6111c1f1abf Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Mon, 7 Dec 2020 13:34:22 +0100 Subject: [PATCH] remove chevron, no homepage button for element and add change client --- css/client.css | 19 ---------- images/chevron-left.svg | 10 ----- src/open/ClientListView.js | 1 - src/open/ClientListViewModel.js | 1 + src/open/ClientView.js | 9 ++++- src/open/ClientViewModel.js | 66 ++++++++++++++++++++++++++------- src/open/clients/Element.js | 2 +- src/utils/html.js | 2 +- 8 files changed, 62 insertions(+), 48 deletions(-) delete mode 100644 images/chevron-left.svg diff --git a/css/client.css b/css/client.css index f045851..1e05d19 100644 --- a/css/client.css +++ b/css/client.css @@ -2,25 +2,6 @@ padding: 16px 0; } -.ClientListView > h2 { - display: flex; - align-items: center; -} - -.ClientListView > h2 .back { - background: url('../images/chevron-left.svg'); - background-color: none; - background-size: 40%; - background-repeat: no-repeat; - background-position: center; - border: none; - width: 24px; - height: 24px; - padding: 16px; - cursor: pointer; - margin-right: 8px; -} - .ClientView { border: 1px solid #E6E6E6; border-radius: 8px; diff --git a/images/chevron-left.svg b/images/chevron-left.svg deleted file mode 100644 index 27f4dce..0000000 --- a/images/chevron-left.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - diff --git a/src/open/ClientListView.js b/src/open/ClientListView.js index 7d91f4a..5c69ef8 100644 --- a/src/open/ClientListView.js +++ b/src/open/ClientListView.js @@ -65,7 +65,6 @@ class ContinueWithClientView extends TemplateView { const backTitle = "Back to all clients"; return t.div({className: "ClientListView"}, [ t.h2([ - t.button({className: "back", ["aria-label"]: backTitle, title: backTitle, onClick: () => vm.showAll()}), t.span(`Continue with ${vm.clientViewModel.name}`) ]), t.div({className: "list"}, t.view(new ClientView(vm.clientViewModel))) diff --git a/src/open/ClientListViewModel.js b/src/open/ClientListViewModel.js index 96d2737..df0c166 100644 --- a/src/open/ClientListViewModel.js +++ b/src/open/ClientListViewModel.js @@ -75,6 +75,7 @@ export class ClientListViewModel extends ViewModel { _pickClient(client) { this.clientViewModel = this.clientList.find(vm => vm.clientId === client.id); + this.clientViewModel.pick(this); this.emitChange(); } diff --git a/src/open/ClientView.js b/src/open/ClientView.js index dee2ec4..b3c8c45 100644 --- a/src/open/ClientView.js +++ b/src/open/ClientView.js @@ -56,7 +56,12 @@ class OpenClientView extends TemplateView { href: vm.deepLink, rel: "noopener noreferrer", onClick: () => vm.deepLinkActivated(), - }, "Continue") + }, "Continue"), + t.p({className: {previewSource: true, hidden: vm => !vm.showBack}}, [ + `Continue with ${vm.name}.`, + " ", + t.button({className: "text", onClick: () => vm.back()}, "Change"), + ]), ]); } } @@ -77,7 +82,7 @@ class InstallClientView extends TemplateView { } } }); - children.push(t.p({className: "instructions"}, [vm.textInstructions, copyButton])); + children.push(t.p({className: "instructions"}, [t.code(vm.textInstructions), copyButton])); } const actions = t.div({className: "actions"}, vm.actions.map(a => { diff --git a/src/open/ClientViewModel.js b/src/open/ClientViewModel.js index d75b45c..d8c58d5 100644 --- a/src/open/ClientViewModel.js +++ b/src/open/ClientViewModel.js @@ -18,6 +18,14 @@ import {isWebPlatform, isDesktopPlatform, Platform} from "../Platform.js"; import {ViewModel} from "../utils/ViewModel.js"; import {IdentifierKind} from "../Link.js"; +function getMatchingPlatforms(client, supportedPlatforms) { + const clientPlatforms = client.platforms; + const matchingPlatforms = supportedPlatforms.filter(p => { + return clientPlatforms.includes(p); + }); + return matchingPlatforms; +} + export class ClientViewModel extends ViewModel { constructor(options) { super(options); @@ -25,19 +33,17 @@ export class ClientViewModel extends ViewModel { this._client = client; this._link = link; this._pickClient = pickClient; + // to provide "choose other client" button after calling pick() + this._clientListViewModel = null; - const supportedPlatforms = client.platforms; - const matchingPlatforms = this.platforms.filter(p => { - return supportedPlatforms.includes(p); - }); + const matchingPlatforms = getMatchingPlatforms(client, this.platforms); const nativePlatform = matchingPlatforms.find(p => !isWebPlatform(p)); const webPlatform = matchingPlatforms.find(p => isWebPlatform(p)); this._proposedPlatform = this.preferences.platform || nativePlatform || webPlatform; - + this._nativePlatform = nativePlatform || this._proposedPlatform; + this.actions = this._createActions(client, link, nativePlatform, webPlatform); - this.name = this._client.getName(this._proposedPlatform); - this.deepLink = this._client.getDeepLink(this._proposedPlatform, this._link); this._clientCanIntercept = !!(nativePlatform && client.canInterceptMatrixToLinks(nativePlatform)); this._showOpen = this.deepLink && !this._clientCanIntercept; } @@ -67,13 +73,15 @@ export class ClientViewModel extends ViewModel { }); } } - actions.push({ - label: `Visit app homepage`, - url: client.homepage, - primary: true, - kind: "homepage", - activated: () => {}, - }); + if (client.homepage) { + actions.push({ + label: `Visit app homepage`, + url: client.homepage, + primary: true, + kind: "homepage", + activated: () => {}, + }); + } return actions; } @@ -89,6 +97,10 @@ export class ClientViewModel extends ViewModel { return this._client.id; } + get name() { + return this._client.getName(this._platform); + } + get iconUrl() { return this._client.icon; } @@ -130,6 +142,14 @@ export class ClientViewModel extends ViewModel { } return textPlatforms; } + + get deepLink() { + return this._client.getDeepLink(this._platform, this._link); + } + + get _platform() { + return this.showBack ? this._proposedPlatform : this._nativePlatform; + } deepLinkActivated() { this._pickClient(this._client); @@ -139,4 +159,22 @@ export class ClientViewModel extends ViewModel { this.emitChange(); } } + + pick(clientListViewModel) { + this._clientListViewModel = clientListViewModel; + this.emitChange(); + } + + get showBack() { + return !!this._clientListViewModel; + } + + back() { + if (this._clientListViewModel) { + const vm = this._clientListViewModel; + this._clientListViewModel = null; + this.emitChange(); + vm.showAll(); + } + } } diff --git a/src/open/clients/Element.js b/src/open/clients/Element.js index 8811361..a467668 100644 --- a/src/open/clients/Element.js +++ b/src/open/clients/Element.js @@ -39,7 +39,7 @@ export class Element { get description() { return 'Fully-featured Matrix client, used by millions.'; } - get homepage() { return "https://element.io"; } + get homepage() { return ; } // prevents a visit app homepage button from appearing get author() { return "Element"; } getMaturity(platform) { return Maturity.Stable; } diff --git a/src/utils/html.js b/src/utils/html.js index c391a00..16607ed 100644 --- a/src/utils/html.js +++ b/src/utils/html.js @@ -95,7 +95,7 @@ export const TAG_NAMES = { [HTML_NS]: [ "br", "a", "ol", "ul", "li", "div", "h1", "h2", "h3", "h4", "h5", "h6", "p", "strong", "em", "span", "img", "section", "main", "article", "aside", - "pre", "button", "time", "input", "textarea", "label", "form", "progress", "output"], + "pre", "button", "time", "input", "textarea", "label", "form", "progress", "output", "code"], [SVG_NS]: ["svg", "circle"] };