mirrors/mostlymatter
1
0
Форкнуть 0
Код Задачи Запросы на слияние Действия Пакеты Проекты Релизы Вики Активность

Adding expand icon for RHS (#3386)

Просмотр исходного кода 
* Adding expand icon for RHS

Fixing errors

Adding back getTeamInviteLink with better functionality for mobile

Adding vertical align to post__link

Updating improvements for expand RHS stuff

* Improving transition on mobile

* Removing irrelevant changes
Этот коммит содержится в:
Asaad Mahmood
2016-06-30 05:04:37 +05:00
коммит произвёл Corey Hulen
родитель b97b3ae617
Коммит 1f9eb4db6a
15 изменённых файлов: 328 добавлений и 44 удалений
Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

101
webapp/components/rhs_header_post.jsx
Просмотреть файл

@@ -3,6 +3,7 @@
import AppDispatcher from '../dispatcher/app_dispatcher.jsx';
import Constants from 'utils/constants.jsx';
import {Tooltip, OverlayTrigger} from 'react-bootstrap';
import * as GlobalActions from 'actions/global_actions.jsx';
import {FormattedMessage} from 'react-intl';
@@ -16,6 +17,7 @@ export default class RhsHeaderPost extends React.Component {
super(props);
this.handleClose = this.handleClose.bind(this);
this.toggleSize = this.toggleSize.bind(this);
this.handleBack = this.handleBack.bind(this);
this.state = {};
@@ -23,6 +25,11 @@ export default class RhsHeaderPost extends React.Component {
handleClose(e) {
e.preventDefault();
GlobalActions.emitCloseRightHandSide();
this.props.shrink();
}
toggleSize(e) {
e.preventDefault();
this.props.toggleSize();
}
handleBack(e) {
e.preventDefault();
@@ -41,6 +48,42 @@ export default class RhsHeaderPost extends React.Component {
}
render() {
let back;
const closeSidebarTooltip = (
<Tooltip id='closeSidebarTooltip'>
<FormattedMessage
id='rhs_header.closeTooltip'
defaultMessage='Close Sidebar'
/>
</Tooltip>
);
const backToResultsTooltip = (
<Tooltip id='backToResultsTooltip'>
<FormattedMessage
id='rhs_header.backToResultsTooltip'
defaultMessage='Back to Search Results'
/>
</Tooltip>
);
const expandSidebarTooltip = (
<Tooltip id='expandSidebarTooltip'>
<FormattedMessage
id='rhs_header.expandTooltip'
defaultMessage='Expand Sidebar'
/>
</Tooltip>
);
const shrinkSidebarTooltip = (
<Tooltip id='shrinkSidebarTooltip'>
<FormattedMessage
id='rhs_header.expandTooltip'
defaultMessage='Shrink Sidebar'
/>
</Tooltip>
);
if (this.props.fromSearch) {
back = (
<a
@@ -48,7 +91,13 @@ export default class RhsHeaderPost extends React.Component {
onClick={this.handleBack}
className='sidebar--right__back'
>
<i className='fa fa-chevron-left'></i>
<OverlayTrigger
delayShow={Constants.OVERLAY_TIME_DELAY}
placement='top'
overlay={backToResultsTooltip}
>
<i className='fa fa-angle-left'></i>
</OverlayTrigger>
</a>
);
}
@@ -62,14 +111,44 @@ export default class RhsHeaderPost extends React.Component {
defaultMessage='Message Details'
/>
</span>
<button
type='button'
className='sidebar--right__close'
aria-label='Close'
onClick={this.handleClose}
>
<i className='fa fa-sign-out'/>
</button>
<div className='pull-right'>
<button
type='button'
className='sidebar--right__expand'
aria-label='Expand'
onClick={this.toggleSize}
>
<OverlayTrigger
delayShow={Constants.OVERLAY_TIME_DELAY}
placement='top'
overlay={expandSidebarTooltip}
>
<i className='fa fa-expand'/>
</OverlayTrigger>
<OverlayTrigger
delayShow={Constants.OVERLAY_TIME_DELAY}
placement='top'
overlay={shrinkSidebarTooltip}
>
<i className='fa fa-compress'/>
</OverlayTrigger>
</button>
<button
type='button'
className='sidebar--right__close'
aria-label='Close'
onClick={this.handleClose}
>
<OverlayTrigger
delayShow={Constants.OVERLAY_TIME_DELAY}
placement='top'
overlay={closeSidebarTooltip}
>
<i className='fa fa-sign-out'/>
</OverlayTrigger>
</button>
</div>
</div>
);
}
@@ -81,5 +160,7 @@ RhsHeaderPost.defaultProps = {
};
RhsHeaderPost.propTypes = {
isMentionSearch: React.PropTypes.bool,
fromSearch: React.PropTypes.string
fromSearch: React.PropTypes.string,
toggleSize: React.PropTypes.function,
shrink: React.PropTypes.function
};

6
webapp/components/rhs_thread.jsx
Просмотреть файл

@@ -230,6 +230,8 @@ export default class RhsThread extends React.Component {
<RhsHeaderPost
fromSearch={this.props.fromSearch}
isMentionSearch={this.props.isMentionSearch}
toggleSize={this.props.toggleSize}
shrink={this.props.shrink}
/>
<Scrollbars
autoHide={true}
@@ -293,5 +295,7 @@ RhsThread.propTypes = {
fromSearch: React.PropTypes.string,
isMentionSearch: React.PropTypes.bool,
currentUser: React.PropTypes.object.isRequired,
useMilitaryTime: React.PropTypes.bool.isRequired
useMilitaryTime: React.PropTypes.bool.isRequired,
toggleSize: React.PropTypes.function,
shrink: React.PropTypes.function
};

11
webapp/components/search_results.jsx
Просмотреть файл

@@ -171,6 +171,7 @@ export default class SearchResults extends React.Component {
term={searchTerm}
isMentionSearch={this.props.isMentionSearch}
useMilitaryTime={this.props.useMilitaryTime}
shrink={this.props.shrink}
/>
);
}, this);
@@ -180,7 +181,11 @@ export default class SearchResults extends React.Component {
<div className='sidebar--right__content'>
<div className='search-bar__container sidebar--right__search-header'>{searchForm}</div>
<div className='sidebar-right__body'>
<SearchResultsHeader isMentionSearch={this.props.isMentionSearch}/>
<SearchResultsHeader
isMentionSearch={this.props.isMentionSearch}
toggleSize={this.props.toggleSize}
shrink={this.props.shrink}
/>
<div
id='search-items-container'
className='search-items-container'
@@ -195,5 +200,7 @@ export default class SearchResults extends React.Component {
SearchResults.propTypes = {
isMentionSearch: React.PropTypes.bool,
useMilitaryTime: React.PropTypes.bool.isRequired
useMilitaryTime: React.PropTypes.bool.isRequired,
toggleSize: React.PropTypes.function,
shrink: React.PropTypes.function
};

87
webapp/components/search_results_header.jsx
Просмотреть файл

@@ -3,6 +3,7 @@
import AppDispatcher from '../dispatcher/app_dispatcher.jsx';
import Constants from 'utils/constants.jsx';
import {Tooltip, OverlayTrigger} from 'react-bootstrap';
import {FormattedMessage} from 'react-intl';
@@ -15,6 +16,7 @@ export default class SearchResultsHeader extends React.Component {
super(props);
this.handleClose = this.handleClose.bind(this);
this.toggleSize = this.toggleSize.bind(this);
}
handleClose(e) {
@@ -36,6 +38,13 @@ export default class SearchResultsHeader extends React.Component {
type: ActionTypes.RECEIVED_POST_SELECTED,
postId: null
});
this.props.shrink();
}
toggleSize(e) {
e.preventDefault();
this.props.toggleSize();
}
render() {
@@ -46,6 +55,33 @@ export default class SearchResultsHeader extends React.Component {
/>
);
const closeSidebarTooltip = (
<Tooltip id='closeSidebarTooltip'>
<FormattedMessage
id='rhs_header.closeTooltip'
defaultMessage='Close Sidebar'
/>
</Tooltip>
);
const expandSidebarTooltip = (
<Tooltip id='expandSidebarTooltip'>
<FormattedMessage
id='rhs_header.expandTooltip'
defaultMessage='Expand Sidebar'
/>
</Tooltip>
);
const shrinkSidebarTooltip = (
<Tooltip id='shrinkSidebarTooltip'>
<FormattedMessage
id='rhs_header.expandTooltip'
defaultMessage='Shrink Sidebar'
/>
</Tooltip>
);
if (this.props.isMentionSearch) {
title = (
<FormattedMessage
@@ -58,20 +94,51 @@ export default class SearchResultsHeader extends React.Component {
return (
<div className='sidebar--right__header'>
<span className='sidebar--right__title'>{title}</span>
<button
type='button'
className='sidebar--right__close'
aria-label='Close'
title='Close'
onClick={this.handleClose}
>
<i className='fa fa-sign-out'/>
</button>
<div className='pull-right'>
<button
type='button'
className='sidebar--right__expand'
aria-label='Expand'
onClick={this.toggleSize}
>
<OverlayTrigger
delayShow={Constants.OVERLAY_TIME_DELAY}
placement='top'
overlay={expandSidebarTooltip}
>
<i className='fa fa-expand'/>
</OverlayTrigger>
<OverlayTrigger
delayShow={Constants.OVERLAY_TIME_DELAY}
placement='top'
overlay={shrinkSidebarTooltip}
>
<i className='fa fa-compress'/>
</OverlayTrigger>
</button>
<button
type='button'
className='sidebar--right__close'
aria-label='Close'
title='Close'
onClick={this.handleClose}
>
<OverlayTrigger
delayShow={Constants.OVERLAY_TIME_DELAY}
placement='top'
overlay={closeSidebarTooltip}
>
<i className='fa fa-sign-out'/>
</OverlayTrigger>
</button>
</div>
</div>
);
}
}
SearchResultsHeader.propTypes = {
isMentionSearch: React.PropTypes.bool
isMentionSearch: React.PropTypes.bool,
toggleSize: React.PropTypes.function,
shrink: React.PropTypes.function
};

13
webapp/components/search_results_item.jsx
Просмотреть файл

@@ -23,10 +23,17 @@ export default class SearchResultsItem extends React.Component {
super(props);
this.handleFocusRHSClick = this.handleFocusRHSClick.bind(this);
this.shrinkSidebar = this.shrinkSidebar.bind(this);
}
hideSidebar() {
$('.inner-wrap, .sidebar--right').removeClass('move--left');
$('.sidebar--right').removeClass('move--left');
}
shrinkSidebar() {
setTimeout(() => {
this.props.shrink();
});
}
handleFocusRHSClick(e) {
@@ -143,6 +150,7 @@ export default class SearchResultsItem extends React.Component {
this.hideSidebar();
}
this.shrinkSidebar();
browserHistory.push('/' + window.location.pathname.split('/')[1] + '/pl/' + post.id);
}
}
@@ -187,5 +195,6 @@ SearchResultsItem.propTypes = {
channel: React.PropTypes.object,
isMentionSearch: React.PropTypes.bool,
term: React.PropTypes.string,
useMilitaryTime: React.PropTypes.bool.isRequired
useMilitaryTime: React.PropTypes.bool.isRequired,
shrink: React.PropTypes.function
};

26
webapp/components/sidebar_right.jsx
Просмотреть файл

@@ -25,6 +25,8 @@ export default class SidebarRight extends React.Component {
this.onSearchChange = this.onSearchChange.bind(this);
this.onUserChange = this.onUserChange.bind(this);
this.onShowSearch = this.onShowSearch.bind(this);
this.onShrink = this.onShrink.bind(this);
this.toggleSize = this.toggleSize.bind(this);
this.doStrangeThings = this.doStrangeThings.bind(this);
@@ -32,6 +34,7 @@ export default class SidebarRight extends React.Component {
searchVisible: SearchStore.getSearchResults() !== null,
isMentionSearch: SearchStore.getIsMentionSearch(),
postRightVisible: !!PostStore.getSelectedPost(),
expanded: false,
fromSearch: false,
currentUser: UserStore.getCurrentUser(),
useMilitaryTime: PreferenceStore.getBool(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, Constants.Preferences.USE_MILITARY_TIME, false)
@@ -110,6 +113,10 @@ export default class SidebarRight extends React.Component {
});
}
onShrink() {
this.setState({expanded: false});
}
onSearchChange() {
this.setState({
searchVisible: SearchStore.getSearchResults() !== null,
@@ -131,14 +138,25 @@ export default class SidebarRight extends React.Component {
}
}
toggleSize() {
this.setState({expanded: !this.state.expanded});
}
render() {
let content = null;
let expandedClass = '';
if (this.state.expanded) {
expandedClass = 'sidebar--right--expanded';
}
if (this.state.searchVisible) {
content = (
<SearchResults
isMentionSearch={this.state.isMentionSearch}
useMilitaryTime={this.state.useMilitaryTime}
toggleSize={this.toggleSize}
shrink={this.onShrink}
/>
);
} else if (this.state.postRightVisible) {
@@ -148,15 +166,21 @@ export default class SidebarRight extends React.Component {
isMentionSearch={this.state.isMentionSearch}
currentUser={this.state.currentUser}
useMilitaryTime={this.state.useMilitaryTime}
toggleSize={this.toggleSize}
shrink={this.onShrink}
/>
);
}
return (
<div
className='sidebar--right'
className={'sidebar--right ' + expandedClass}
id='sidebar-right'
>
<div
onClick={this.onShrink}
className='sidebar--right__bg'
/>
<div className='sidebar-right-container'>
{content}
</div>