IntenseWebs/mattermost
3
0
Fork 0
mirror of https://github.com/mattermost/mattermost.git synced 2025-02-25 18:55:24 -06:00
Code Issues Packages Projects Releases Wiki Activity

PLT-5179 - Fixing modal overflow for autocomplete (#5002)

Browse Source 
* PLT-5179 - Fixing modal overflow for autocomplete

* PLT-5171 - Fixing search bar popover behaviour
This commit is contained in:
Asaad Mahmood
2017-01-09 19:32:27 +05:00
committed by Harrison Healey
parent f6672605e8
commit 93a526f7ed
5 changed files with 41 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
webapp/components/search_bar.jsx
View File

@@ -104,7 +104,6 @@ export default class SearchBar extends React.Component {
SearchStore.storeSearchTerm(term);
SearchStore.emitSearchTermChange(false);
this.setState({searchTerm: term});
this.refs.searchOverlay.hide();
}
handleUserBlur() {
@@ -112,9 +111,8 @@ export default class SearchBar extends React.Component {
}
handleUserFocus() {
$('.search-bar__container').addClass('focused');
this.setState({focused: true});
$('.search-bar__container').addClass('focused');
}
performSearch(terms, isMentionSearch) {
@@ -180,6 +178,11 @@ export default class SearchBar extends React.Component {
isSearching = <span className={'fa fa-refresh fa-refresh-animate icon--refresh icon--rotate'}/>;
}
let helpClass = 'search-help-popover';
if (!this.state.searchTerm && this.state.focused) {
helpClass += ' visible';
}
const recentMentionsTooltip = (
<Tooltip id='recentMentionsTooltip'>
<FormattedMessage
@@ -189,19 +192,6 @@ export default class SearchBar extends React.Component {
</Tooltip>
);
const searchPopover = (
<Popover
id='searchbar-help-popup'
placement='bottom'
className='search-help-popover'
>
<FormattedHTMLMessage
id='search_bar.usage'
defaultMessage='<h4>Search Options</h4><ul><li><span>Use </span><b>"quotation marks"</b><span> to search for phrases</span></li><li><span>Use </span><b>from:</b><span> to find posts from specific users and </span><b>in:</b><span> to find posts in specific channels</span></li></ul>'
/>
</Popover>
);
const flaggedTooltip = (
<Tooltip id='flaggedTooltip'>
<FormattedMessage
@@ -285,28 +275,29 @@ export default class SearchBar extends React.Component {
autoComplete='off'
>
<span className='fa fa-search sidebar__search-icon'/>
<OverlayTrigger
ref='searchOverlay'
delayShow={Constants.OVERLAY_TIME_DELAY_SMALL}
placement='bottom'
overlay={searchPopover}
trigger='click'
rootClose={true}
>
<SuggestionBox
ref='search'
className='form-control search-bar'
placeholder={Utils.localizeMessage('search_bar.search', 'Search')}
value={this.state.searchTerm}
onFocus={this.handleUserFocus}
onBlur={this.handleUserBlur}
onChange={this.handleChange}
listComponent={SearchSuggestionList}
providers={this.suggestionProviders}
type='search'
/>
</OverlayTrigger>
<SuggestionBox
ref='search'
className='form-control search-bar'
placeholder={Utils.localizeMessage('search_bar.search', 'Search')}
value={this.state.searchTerm}
onFocus={this.handleUserFocus}
onBlur={this.handleUserBlur}
onChange={this.handleChange}
listComponent={SearchSuggestionList}
providers={this.suggestionProviders}
type='search'
/>
{isSearching}
<Popover
id='searchbar-help-popup'
placement='bottom'
className={helpClass}
>
<FormattedHTMLMessage
id='search_bar.usage'
defaultMessage='<h4>Search Options</h4><ul><li><span>Use </span><b>"quotation marks"</b><span> to search for phrases</span></li><li><span>Use </span><b>from:</b><span> to find posts from specific users and </span><b>in:</b><span> to find posts in specific channels</span></li></ul>'
/>
</Popover>
</form>
{mentionBtn}

2
webapp/components/suggestion/suggestion_box.jsx
View File

@@ -64,6 +64,7 @@ export default class SuggestionBox extends React.Component {
// Delay this slightly so that we don't clear the suggestions before we run click handlers on SuggestionList
GlobalActions.emitClearSuggestions(this.suggestionId);
}, 100);
this.props.onBlur();
}
handleChange(e) {
@@ -272,6 +273,7 @@ SuggestionBox.propTypes = {
renderDividers: React.PropTypes.bool,
// explicitly name any input event handlers we override and need to manually call
onBlur: React.PropTypes.func,
onChange: React.PropTypes.func,
onKeyDown: React.PropTypes.func,
onItemSelected: React.PropTypes.func

5
webapp/sass/components/_modal.scss
View File

@@ -12,7 +12,6 @@
.modal-body {
max-height: calc(90vh - 62px);
overflow: auto;
padding: 20px 15px;
}
@@ -24,10 +23,6 @@
min-height: 8em;
}
.suggestion-list {
bottom: -149px;
}
.suggestion-list__content {
max-height: 150px;
}

16
webapp/sass/components/_popover.scss
View File

@@ -93,21 +93,20 @@
}
.search-help-popover {
@include single-transition(opacity, .3s, ease-in);
font-size: em(13px);
max-width: 300px;
max-width: 350px;
top: 36px;
visibility: hidden;
width: 100%;
&:not(.autocomplete) {
margin-top: 17px !important;
}
&.autocomplete {
display: block;
.popover-content {
-webkit-overflow-scrolling: touch;
padding: 10px;
position: relative;
-webkit-overflow-scrolling: touch;
}
}
@@ -206,6 +205,11 @@
.tooltip-inner {
max-width: 100%;
}
&.visible {
@include opacity(1);
visibility: visible;
}
}
.member-list__popover {

8
webapp/sass/responsive/_mobile.scss
View File

@@ -427,14 +427,8 @@
}
.search-help-popover {
left: 0 !important;
margin-left: 10px;
left: 55px;
max-width: calc(100% - 80px);
.focused & {
left: 45px !important;
margin-top: 50px;
}
}
.modal-direct-channels,