mirror of
https://github.com/vector-im/element-web.git
synced 2024-09-10 07:05:14 +00:00
Merge pull request #16890 from vector-im/travis/custom-mobile-apps
Add mobile download link configuration
This commit is contained in:
Travis Ralston
GitHub
commit
ddbfab4fc5
4 changed files with 65 additions and 26 deletions
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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.",
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue