[MM-19856] Add back button when navigating outside of MM server (#1179)
This commit is contained in:
parent
176fd19aa2
commit
cfd65d62c6
3
.gitignore
vendored
3
.gitignore
vendored
|
@ -17,4 +17,5 @@ testUserData
|
|||
|
||||
src/browser/*.png
|
||||
src/browser/*.svg
|
||||
src/browser/*.woff2
|
||||
src/browser/*.woff2
|
||||
src/browser/assets/fonts/
|
|
@ -14,7 +14,9 @@
|
|||
"main_bundle.js",
|
||||
"browser/**/*{.html,.css,_bundle.js,.svg,.png}",
|
||||
"assets/**/*",
|
||||
"browser/assets/fonts/*",
|
||||
"node_modules/bootstrap/dist/**",
|
||||
"node_modules/font-awesome/{css,fonts}/**",
|
||||
"node_modules/simple-spellchecker/dict/*.dic"
|
||||
],
|
||||
"protocols": [
|
||||
|
|
BIN
src/assets/fonts/OpenSans-Light.woff2
Normal file
BIN
src/assets/fonts/OpenSans-Light.woff2
Normal file
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
50
src/browser/components/ExtraBar.jsx
Normal file
50
src/browser/components/ExtraBar.jsx
Normal file
|
@ -0,0 +1,50 @@
|
|||
// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
|
||||
// See LICENSE.txt for license information.
|
||||
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import {Row, Button} from 'react-bootstrap';
|
||||
|
||||
export default class ExtraBar extends React.Component {
|
||||
handleBack = () => {
|
||||
if (this.props.mattermostView) {
|
||||
this.props.mattermostView.goBack();
|
||||
}
|
||||
}
|
||||
render() {
|
||||
let barClass = 'clear-mode';
|
||||
if (!this.props.show) {
|
||||
barClass = 'hidden';
|
||||
} else if (this.props.darkMode) {
|
||||
barClass = 'dark-mode';
|
||||
}
|
||||
|
||||
return (
|
||||
<Row
|
||||
id={'extra-bar'}
|
||||
className={barClass}
|
||||
>
|
||||
<div
|
||||
className={'container-fluid'}
|
||||
onClick={this.handleBack}
|
||||
>
|
||||
<Button
|
||||
bsStyle={'link'}
|
||||
bsSize={'xsmall'}
|
||||
>
|
||||
<span className={'backIcon fa fa-1x fa-angle-left'}/>
|
||||
<span className={'backLabel'}>
|
||||
{'Back'}
|
||||
</span>
|
||||
</Button>
|
||||
</div>
|
||||
</Row>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ExtraBar.propTypes = {
|
||||
darkMode: PropTypes.bool,
|
||||
mattermostView: PropTypes.object,
|
||||
show: PropTypes.bool,
|
||||
};
|
|
@ -7,7 +7,7 @@
|
|||
|
||||
import url from 'url';
|
||||
|
||||
import React from 'react';
|
||||
import React, {Fragment} from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import {CSSTransition, TransitionGroup} from 'react-transition-group';
|
||||
import {Grid, Row} from 'react-bootstrap';
|
||||
|
@ -29,6 +29,7 @@ import HoveringURL from './HoveringURL.jsx';
|
|||
import Finder from './Finder.jsx';
|
||||
import NewTeamModal from './NewTeamModal.jsx';
|
||||
import SelectCertificateModal from './SelectCertificateModal.jsx';
|
||||
import ExtraBar from './ExtraBar.jsx';
|
||||
|
||||
export default class MainPage extends React.Component {
|
||||
constructor(props) {
|
||||
|
@ -604,6 +605,14 @@ export default class MainPage extends React.Component {
|
|||
});
|
||||
}
|
||||
|
||||
showExtraBar = () => {
|
||||
const ref = this.refs[`mattermostView${this.state.key}`];
|
||||
if (typeof ref !== 'undefined') {
|
||||
return !Utils.isTeamUrl(this.props.teams[this.state.key].url, ref.getSrc());
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
render() {
|
||||
const self = this;
|
||||
const tabsRow = (
|
||||
|
@ -742,12 +751,21 @@ export default class MainPage extends React.Component {
|
|||
handleInterTeamLink={self.handleInterTeamLink}
|
||||
ref={id}
|
||||
active={isActive}
|
||||
allowExtraBar={this.showExtraBar()}
|
||||
/>);
|
||||
});
|
||||
|
||||
const viewsRow = (
|
||||
<Row>
|
||||
{views}
|
||||
</Row>);
|
||||
<Fragment>
|
||||
<ExtraBar
|
||||
darkMode={this.state.isDarkMode}
|
||||
show={this.showExtraBar()}
|
||||
mattermostView={this.refs[`mattermostView${this.state.key}`]}
|
||||
/>
|
||||
<Row>
|
||||
{views}
|
||||
</Row>
|
||||
</Fragment>);
|
||||
|
||||
let request = null;
|
||||
let authServerURL = null;
|
||||
|
|
|
@ -338,6 +338,9 @@ export default class MattermostView extends React.Component {
|
|||
if (!this.props.active) {
|
||||
classNames.push('mattermostView-hidden');
|
||||
}
|
||||
if (this.props.allowExtraBar) {
|
||||
classNames.push('allow-extra-bar');
|
||||
}
|
||||
|
||||
const loadingImage = !this.state.errorInfo && this.props.active && !this.state.isLoaded ? (
|
||||
<div className='mattermostView-loadingScreen'>
|
||||
|
@ -377,6 +380,7 @@ MattermostView.propTypes = {
|
|||
useSpellChecker: PropTypes.bool,
|
||||
onSelectSpellCheckerLocale: PropTypes.func,
|
||||
handleInterTeamLink: PropTypes.func,
|
||||
allowExtraBar: PropTypes.bool,
|
||||
};
|
||||
|
||||
/* eslint-enable react/no-set-state */
|
||||
|
|
33
src/browser/css/components/ExtraBar.css
Normal file
33
src/browser/css/components/ExtraBar.css
Normal file
|
@ -0,0 +1,33 @@
|
|||
#extra-bar {
|
||||
max-height: 76px;
|
||||
transition: max-height 0.25s ease;
|
||||
background-color: #f5f5f5;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
#extra-bar div {
|
||||
padding: 0 0.93em 0.2em;
|
||||
}
|
||||
|
||||
#extra-bar.hidden {
|
||||
max-height: 0px;
|
||||
}
|
||||
|
||||
span.backLabel {
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-weight: normal;
|
||||
line-height: 30px;
|
||||
font-size: 14px;
|
||||
padding-top: 0px;
|
||||
padding-bottom: 0px;
|
||||
color: #166de0;
|
||||
}
|
||||
|
||||
span.backIcon {
|
||||
margin-right: 4px;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
.container-fluid button:first-child {
|
||||
padding-left: 0px;
|
||||
}
|
|
@ -32,3 +32,7 @@
|
|||
left: 0;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.allow-extra-bar webview {
|
||||
top: 76px;
|
||||
}
|
|
@ -8,4 +8,5 @@
|
|||
@import url("TeamListItem.css");
|
||||
@import url("Finder.css");
|
||||
@import url("UpdaterPage.css");
|
||||
@import url("CertificateModal.css");
|
||||
@import url("CertificateModal.css");
|
||||
@import url("ExtraBar.css");
|
||||
|
|
|
@ -1,4 +1,33 @@
|
|||
@import url("components/index.css");
|
||||
@import '~font-awesome/css/font-awesome.css';
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
src: url('../../assets/fonts/open-sans-v13-latin-ext_latin_cyrillic-ext_greek-ext_greek_cyrillic_vietnamese-300.woff2') format('woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: italic;
|
||||
font-weight: 300;
|
||||
src: url('../../assets/fonts/open-sans-v13-latin-ext_latin_cyrillic-ext_greek-ext_greek_cyrillic_vietnamese-300italic.woff2') format('woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url('../../assets/fonts/open-sans-v13-latin-ext_latin_cyrillic-ext_greek-ext_greek_cyrillic_vietnamese-regular.woff2') format('woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
src: url('../../assets/fonts/open-sans-v13-latin-ext_latin_cyrillic-ext_greek-ext_greek_cyrillic_vietnamese-italic.woff2') format('woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
|
@ -7,6 +36,13 @@
|
|||
src: url('../../assets/fonts/open-sans-v13-latin-ext_latin_cyrillic-ext_greek-ext_greek_cyrillic_vietnamese-600.woff2') format('woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: italic;
|
||||
font-weight: 600;
|
||||
src: url('../../assets/fonts/open-sans-v13-latin-ext_latin_cyrillic-ext_greek-ext_greek_cyrillic_vietnamese-600italic.woff2') format('woff2');
|
||||
}
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
|
5
src/package-lock.json
generated
5
src/package-lock.json
generated
|
@ -393,6 +393,11 @@
|
|||
"sort-keys-length": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"font-awesome": {
|
||||
"version": "4.7.0",
|
||||
"resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz",
|
||||
"integrity": "sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM="
|
||||
},
|
||||
"fs-extra": {
|
||||
"version": "7.0.1",
|
||||
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.1.tgz",
|
||||
|
|
|
@ -17,6 +17,7 @@
|
|||
"electron-is-dev": "^1.0.1",
|
||||
"electron-log": "^2.2.17",
|
||||
"electron-updater": "4.0.6",
|
||||
"font-awesome": "^4.7.0",
|
||||
"prop-types": "^15.6.2",
|
||||
"react": "^16.6.3",
|
||||
"react-bootstrap": "~0.32.4",
|
||||
|
|
|
@ -42,7 +42,7 @@ module.exports = merge(base, {
|
|||
loader: 'url-loader',
|
||||
},
|
||||
}, {
|
||||
test: /\.(svg|woff2)$/,
|
||||
test: /\.(svg)$/,
|
||||
use: [
|
||||
{
|
||||
loader: 'file-loader',
|
||||
|
@ -53,6 +53,14 @@ module.exports = merge(base, {
|
|||
},
|
||||
{loader: 'image-webpack-loader'},
|
||||
],
|
||||
}, {
|
||||
test: /\.(eot|ttf|woff|woff2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
|
||||
loader: 'file-loader',
|
||||
options: {
|
||||
name: '[name].[ext]',
|
||||
outputPath: '/../assets/fonts',
|
||||
publicPath: './assets/fonts',
|
||||
},
|
||||
}],
|
||||
},
|
||||
node: {
|
||||
|
|
Loading…
Reference in a new issue