Merge pull request #16890 from vector-im/travis/custom-mobile-apps

Add mobile download link configuration
This commit is contained in:
Travis Ralston 2021-04-13 14:04:33 -06:00 committed by GitHub
commit ddbfab4fc5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 65 additions and 26 deletions

View File

@ -116,6 +116,16 @@ 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.
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.

View File

@ -27,7 +27,55 @@ interface IProps {
}
const CompatibilityView: React.FC<IProps> = ({ 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 = <>
<p><strong>iOS</strong> (iPhone or iPad)</p>
<a
href={iosCustomUrl || "https://apps.apple.com/app/vector/id1083446067"}
target="_blank"
className="mx_ClearDecoration"
>
<img height="48" src="themes/element/img/download/apple.svg" alt="Apple App Store" />
</a>
</>;
}
let android = [<p className="mx_Spacer" key="header"><strong>Android</strong></p>];
const andCustomUrl = mobileBuilds?.android;
const fdroidCustomUrl = mobileBuilds?.fdroid;
if (andCustomUrl !== null) { // undefined or string
android.push(<a
href={andCustomUrl || "https://play.google.com/store/apps/details?id=im.vector.app"}
target="_blank"
className="mx_ClearDecoration"
key="android"
>
<img height="48" src="themes/element/img/download/google.svg" alt="Google Play Store" />
</a>);
}
if (fdroidCustomUrl !== null) { // undefined or string
android.push(<a
href={fdroidCustomUrl || "https://f-droid.org/repository/browse/?fdid=im.vector.app"}
target="_blank"
className="mx_ClearDecoration"
key="fdroid"
>
<img height="48" src="themes/element/img/download/fdroid.svg" alt="F-Droid" />
</a>);
}
if (android.length === 1) { // just a header, meaning no links
android = [];
}
let mobileHeader = <h2 id="step2_heading">{_t("Use %(brand)s on mobile", {brand})}</h2>;
if (!android.length && !ios) {
mobileHeader = null;
}
return <div className="mx_ErrorView">
<div className="mx_ErrorView_container">
<div className="mx_HomePage_header">
@ -76,30 +124,9 @@ const CompatibilityView: React.FC<IProps> = ({ onAccept }) => {
<div className="mx_HomePage_col">
<div className="mx_HomePage_row">
<div>
<h2 id="step2_heading">Use Element on mobile</h2>
<p><strong>iOS</strong> (iPhone or iPad)</p>
<a
href="https://apps.apple.com/app/vector/id1083446067"
target="_blank"
className="mx_ClearDecoration"
>
<img height="48" src="themes/element/img/download/apple.svg" alt="Apple App Store" />
</a>
<p className="mx_Spacer"><strong>Android</strong></p>
<a
href="https://play.google.com/store/apps/details?id=im.vector.app"
target="_blank"
className="mx_ClearDecoration"
>
<img height="48" src="themes/element/img/download/google.svg" alt="Google Play Store" />
</a>
<a
href="https://f-droid.org/repository/browse/?fdid=im.vector.app"
target="_blank"
className="mx_ClearDecoration"
>
<img height="48" src="themes/element/img/download/fdroid.svg" alt="F-Droid" />
</a>
{mobileHeader}
{ios}
{android}
</div>
</div>
</div>

View File

@ -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.",

View File

@ -260,6 +260,7 @@ body {
</g>
</g>
</svg>
</a>
<a href="https://f-droid.org/repository/browse/?fdid=im.vector.app" target="_blank" class="mx_ClearDecoration">
<svg width="164px" height="48px" viewBox="0 0 157 46" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<desc>Get it on F-Droid.</desc>