From c580148bb73047854668a8a40107535e1e05df6d Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Thu, 8 Apr 2021 18:39:09 -0600 Subject: [PATCH 1/4] Add mobile download link configuration This is similar to the desktopBuilds config option. The mobile setup guide and static incompatible browser pages are not touched by these options given they are static assets and easily replaced. --- docs/config.md | 7 ++ .../structures/CompatibilityView.tsx | 77 +++++++++++++------ src/i18n/strings/en_EN.json | 1 + 3 files changed, 60 insertions(+), 25 deletions(-) diff --git a/docs/config.md b/docs/config.md index f93b3448e4..3694ec00b1 100644 --- a/docs/config.md +++ b/docs/config.md @@ -116,6 +116,13 @@ For a good example, see https://develop.element.io/config.json. 1. `logo`: An HTTP URL to the avatar for the desktop build. Should be 24x24, ideally an SVG. 1. `url`: An HTTP URL for where to send the user to download the desktop build. +1. `mobileBuilds`: Used to alter promotional links to the mobile app. By default the + builds are considered available and accessible from https://element.io. This config + option is typically used in a context of encouraging the user to try the mobile app + instead of a mobile/incompatible browser. There are 3 possible fields for this config + option: `ios`, `android`, `fdroid`. For all 3, when set to a string then that URL will + be used. When not defined, the default element.io apps will be used. When explicitly + set to `null`, that platform will be considered unavailable. 1. `mobileGuideToast`: Whether to show a toast a startup which nudges users on iOS and Android towards the native mobile apps. The toast redirects to the mobile guide if they accept. Defaults to false. diff --git a/src/async-components/structures/CompatibilityView.tsx b/src/async-components/structures/CompatibilityView.tsx index 05a09c6b89..b836080741 100644 --- a/src/async-components/structures/CompatibilityView.tsx +++ b/src/async-components/structures/CompatibilityView.tsx @@ -27,7 +27,55 @@ interface IProps { } const CompatibilityView: React.FC = ({ onAccept }) => { - const brand = SdkConfig.get().brand; + const {brand, mobileBuilds} = SdkConfig.get(); + + let ios = null; + const iosCustomUrl = mobileBuilds?.ios; + if (iosCustomUrl !== null) { // could be undefined or a string + ios = <> +

iOS (iPhone or iPad)

+ + Apple App Store + + ; + } + + let android = [

Android

]; + const andCustomUrl = mobileBuilds?.android; + const fdroidCustomUrl = mobileBuilds?.fdroid; + if (andCustomUrl !== null) { // undefined or string + android.push( + Google Play Store + ); + } + if (fdroidCustomUrl !== null) { // undefined or string + android.push( + F-Droid + ); + } + if (android.length === 1) { // just a header, meaning no links + android = []; + } + + let mobileHeader =

{_t("Use %(brand)s on mobile", {brand})}

; + if (!android.length && !ios) { + mobileHeader = null; + } + return
@@ -76,30 +124,9 @@ const CompatibilityView: React.FC = ({ onAccept }) => {
-

Use Element on mobile

-

iOS (iPhone or iPad)

- - Apple App Store - -

Android

- - Google Play Store - - - F-Droid - + {mobileHeader} + {ios} + {android}
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 9c71b85849..892ab66cad 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -19,6 +19,7 @@ "%(appName)s (%(browserName)s, %(osName)s)": "%(appName)s (%(browserName)s, %(osName)s)", "You need to be using HTTPS to place a screen-sharing call.": "You need to be using HTTPS to place a screen-sharing call.", "Powered by Matrix": "Powered by Matrix", + "Use %(brand)s on mobile": "Use %(brand)s on mobile", "Unsupported browser": "Unsupported browser", "Your browser can't run %(brand)s": "Your browser can't run %(brand)s", "%(brand)s uses advanced browser features which aren't supported by your current browser.": "%(brand)s uses advanced browser features which aren't supported by your current browser.", From 1952cf65635c944b7a37871d0bd9220d70b1e98d Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Thu, 8 Apr 2021 18:43:15 -0600 Subject: [PATCH 2/4] Add missing closing tag in guide --- src/vector/mobile_guide/index.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/vector/mobile_guide/index.html b/src/vector/mobile_guide/index.html index da49907f9c..3960c43912 100644 --- a/src/vector/mobile_guide/index.html +++ b/src/vector/mobile_guide/index.html @@ -152,7 +152,7 @@ body { - +

Set up Element on iOS or Android

@@ -260,6 +260,7 @@ body { + Get it on F-Droid. From bd38ad5166788b715d8e4f7dfe0be1ef32ccbfea Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Thu, 8 Apr 2021 18:43:50 -0600 Subject: [PATCH 3/4] Appease the linter --- src/async-components/structures/CompatibilityView.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/async-components/structures/CompatibilityView.tsx b/src/async-components/structures/CompatibilityView.tsx index b836080741..d8b5f0be8d 100644 --- a/src/async-components/structures/CompatibilityView.tsx +++ b/src/async-components/structures/CompatibilityView.tsx @@ -64,7 +64,7 @@ const CompatibilityView: React.FC = ({ onAccept }) => { className="mx_ClearDecoration" key="fdroid" > - F-Droid + F-Droid ); } if (android.length === 1) { // just a header, meaning no links From 1de7828e4dde308dc8af53153fade2a664314ddf Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Mon, 12 Apr 2021 14:59:56 -0600 Subject: [PATCH 4/4] Write out docs explicitly. --- docs/config.md | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/docs/config.md b/docs/config.md index 3694ec00b1..27b4797f0c 100644 --- a/docs/config.md +++ b/docs/config.md @@ -119,10 +119,13 @@ For a good example, see https://develop.element.io/config.json. 1. `mobileBuilds`: Used to alter promotional links to the mobile app. By default the builds are considered available and accessible from https://element.io. This config option is typically used in a context of encouraging the user to try the mobile app - instead of a mobile/incompatible browser. There are 3 possible fields for this config - option: `ios`, `android`, `fdroid`. For all 3, when set to a string then that URL will - be used. When not defined, the default element.io apps will be used. When explicitly - set to `null`, that platform will be considered unavailable. + instead of a mobile/incompatible browser. + 1. `ios`: The URL to the iOS build. If `null`, it will be assumed to be not available. + If not set, the default element.io builds will be used. + 1. `android`: The URL to the Android build. If `null`, it will be assumed to be not available. + If not set, the default element.io builds will be used. + 1. `fdroid`: The URL to the FDroid build. If `null`, it will be assumed to be not available. + If not set, the default element.io builds will be used. 1. `mobileGuideToast`: Whether to show a toast a startup which nudges users on iOS and Android towards the native mobile apps. The toast redirects to the mobile guide if they accept. Defaults to false.