mirror of
https://github.com/vector-im/element-web.git
synced 2024-09-10 07:05:14 +00:00
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.
This commit is contained in:
parent
75aef71fe6
commit
c580148bb7
3 changed files with 60 additions and 25 deletions
|
@ -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
|
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. 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
|
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.
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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.",
|
||||||
|
|
Loading…
Reference in a new issue