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 1. `logo`: An HTTP URL to the avatar for the desktop build. Should be 24x24, ideally
an SVG. an SVG.
1. `url`: An HTTP URL for where to send the user to download the desktop build. 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 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 iOS and Android towards the native mobile apps. The toast redirects to the
mobile guide if they accept. Defaults to false. mobile guide if they accept. Defaults to false.

View File

@ -27,7 +27,55 @@ interface IProps {
} }
const CompatibilityView: React.FC<IProps> = ({ onAccept }) => { 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"> return <div className="mx_ErrorView">
<div className="mx_ErrorView_container"> <div className="mx_ErrorView_container">
<div className="mx_HomePage_header"> <div className="mx_HomePage_header">
@ -76,30 +124,9 @@ const CompatibilityView: React.FC<IProps> = ({ onAccept }) => {
<div className="mx_HomePage_col"> <div className="mx_HomePage_col">
<div className="mx_HomePage_row"> <div className="mx_HomePage_row">
<div> <div>
<h2 id="step2_heading">Use Element on mobile</h2> {mobileHeader}
<p><strong>iOS</strong> (iPhone or iPad)</p> {ios}
<a {android}
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>
</div> </div>
</div> </div>
</div> </div>

View File

@ -19,6 +19,7 @@
"%(appName)s (%(browserName)s, %(osName)s)": "%(appName)s (%(browserName)s, %(osName)s)", "%(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.", "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", "Powered by Matrix": "Powered by Matrix",
"Use %(brand)s on mobile": "Use %(brand)s on mobile",
"Unsupported browser": "Unsupported browser", "Unsupported browser": "Unsupported browser",
"Your browser can't run %(brand)s": "Your browser can't run %(brand)s", "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.", "%(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>
</g> </g>
</svg> </svg>
</a>
<a href="https://f-droid.org/repository/browse/?fdid=im.vector.app" target="_blank" class="mx_ClearDecoration"> <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"> <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> <desc>Get it on F-Droid.</desc>