summaryrefslogtreecommitdiffstats
path: root/webapp/components
diff options
context:
space:
mode:
Diffstat (limited to 'webapp/components')
-rw-r--r--webapp/components/rhs_header_post.jsx101
-rw-r--r--webapp/components/rhs_thread.jsx6
-rw-r--r--webapp/components/search_results.jsx11
-rw-r--r--webapp/components/search_results_header.jsx87
-rw-r--r--webapp/components/search_results_item.jsx13
-rw-r--r--webapp/components/sidebar_right.jsx26
6 files changed, 218 insertions, 26 deletions
diff --git a/webapp/components/rhs_header_post.jsx b/webapp/components/rhs_header_post.jsx
index 6e0d9276e..8e54016fb 100644
--- a/webapp/components/rhs_header_post.jsx
+++ b/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
};
diff --git a/webapp/components/rhs_thread.jsx b/webapp/components/rhs_thread.jsx
index 914a697a5..9922e3e1f 100644
--- a/webapp/components/rhs_thread.jsx
+++ b/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
};
diff --git a/webapp/components/search_results.jsx b/webapp/components/search_results.jsx
index ec1307353..6431ff2c2 100644
--- a/webapp/components/search_results.jsx
+++ b/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
};
diff --git a/webapp/components/search_results_header.jsx b/webapp/components/search_results_header.jsx
index e9fc2c144..7cb072b70 100644
--- a/webapp/components/search_results_header.jsx
+++ b/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
};
diff --git a/webapp/components/search_results_item.jsx b/webapp/components/search_results_item.jsx
index 2f453bc84..217cd5568 100644
--- a/webapp/components/search_results_item.jsx
+++ b/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
};
diff --git a/webapp/components/sidebar_right.jsx b/webapp/components/sidebar_right.jsx
index 3a2060bf2..7cdb894cc 100644
--- a/webapp/components/sidebar_right.jsx
+++ b/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>
generated by cgit v1.2.3-1-g7c22 (git 2.25.1) at 2024-08-20 02:03:48 +0000