Skip to content
This repository has been archived by the owner on Mar 13, 2024. It is now read-only.

PLT-8231: Add landing page when deep linking to native app #208

Closed
wants to merge 4 commits into from
Closed

PLT-8231: Add landing page when deep linking to native app #208

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
05f9be0
Add landing page when deep linking to native app
Oct 27, 2017
d37f4fb
Updating styles for deep linking page
asaadmahmood Jan 17, 2018
54a631d
For testing purposes: Added domain replacement to make tests easier.
Jun 15, 2018
9fc7a24
Fixup: fix order of replacement regexp for protocol
Jul 8, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Updating styles for deep linking page
  • Loading branch information
@asaadmahmood
asaadmahmood authored and David Meza committed Sep 3, 2018
commit d37f4fb591663df558672ba991d7414db605df9a
20 changes: 8 additions & 12 deletions components/go_to_native_app/go_to_native_app.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import React, {PureComponent} from 'react';
import {FormattedMessage} from 'react-intl';
import safeOpenProtocol from 'custom-protocol-detection';

import MattermostLogo from 'images/logo.png';
import MattermostLogoSvg from 'images/logo.svg';

export default class GoNativeApp extends PureComponent {
constructor(props) {
Expand Down Expand Up @@ -54,33 +54,30 @@ export default class GoNativeApp extends PureComponent {

// prompt user to download in case they don't have the mobile app.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm guessing this is true for mobile and desktop apps, right?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, in case the user doesn't have it installed it should work for mobile and desktop apsp.

return (
<div
className='get-app get-android-app'
style={{textAlign: 'center', marginTop: '50px'}}
>
<div className='get-app get-app--android'>
<img
src={MattermostLogo}
src={MattermostLogoSvg}
className='get-app__logo'
/>
<div style={{fontSize: '30px', margin: '0 auto 65px'}}>
<div className='get-app__launching'>
<FormattedMessage
id='get_app.launching'
defaultMessage='Launching...'
/>
</div>
<div style={{fontSize: '20px', margin: '0 auto 20px'}}>
<div className='get-app__status'>
{goNativeAppMessage}
</div>
<div>
<div style={{fontSize: '15px', width: '80%', margin: '0 auto'}}>
<div className='get-app__alternative'>
<FormattedMessage
id='get_app.ifNothingPrompts'
defaultMessage='If nothing prompts from browser,'
/>
</div>
<a
href='/downloads'
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this URL here should be taken from the config, also it would be ideal if we can detect if the browser is on desktop use the AppDownloadLink setting, for Android use AndroidAppDownloadLink and iOS IosAppDownloadLink

Also this option should be shown only if the setting for EnableMobileDownload is true

className='btn btn-primary get-android-app__open-mattermost'
className='btn btn-primary get-app__download'
>
<FormattedMessage
id='get_app.downloadMattermost'
Expand All @@ -90,8 +87,7 @@ export default class GoNativeApp extends PureComponent {
</div>
<a
href='/'
className='btn btn-secondary get-android-app__continue-with-browser'
style={{marginTop: '30px'}}
className='btn btn-secondary get-app__continue'
>
<FormattedMessage
id='get_app.continueToBrowser'
Expand Down
1 change: 1 addition & 0 deletions images/logo.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
42 changes: 40 additions & 2 deletions sass/routes/_get-app.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,45 @@
}
}

.get-android-app {
.get-app--android {
background: white;
min-height: 100vh;
padding: 0 1em;
text-align: center;

.get-app__logo {
margin: 5em auto 1.5em;
max-width: 300px;
width: 85%;
}

.get-app__launching {
font-size: 20px;
opacity: .5;
}

.get-app__alternative {
font-size: 16px;
margin-bottom: 1em;
opacity: .5;
}

.get-app__download {
font-size: 1.2em;
font-weight: 400;
margin-bottom: 1rem;
padding: .8em 1.5em;
}

.get-app__continue {
font-size: 1.1em;
}

.get-app__status {
font-size: 20px;
margin: 2em 0em;
}

.get-app__header {
text-align: left;
}
Expand Down Expand Up @@ -99,4 +137,4 @@
padding: 12px;
width: 220px;
}
}
}