Merge branch 'add-filter-focus-style' into 'master'
Add filter focus for filtered search visual tokens See merge request !9875
This commit is contained in:
commit
977f6e3796
|
@ -40,6 +40,8 @@ import FilteredSearchContainer from './container';
|
|||
this.unselectEditTokensWrapper = this.unselectEditTokens.bind(this);
|
||||
this.editTokenWrapper = this.editToken.bind(this);
|
||||
this.tokenChange = this.tokenChange.bind(this);
|
||||
this.addInputContainerFocusWrapper = this.addInputContainerFocus.bind(this);
|
||||
this.removeInputContainerFocusWrapper = this.removeInputContainerFocus.bind(this);
|
||||
|
||||
this.filteredSearchInputForm = this.filteredSearchInput.form;
|
||||
this.filteredSearchInputForm.addEventListener('submit', this.handleFormSubmit);
|
||||
|
@ -51,11 +53,13 @@ import FilteredSearchContainer from './container';
|
|||
this.filteredSearchInput.addEventListener('keyup', this.checkForBackspaceWrapper);
|
||||
this.filteredSearchInput.addEventListener('click', this.tokenChange);
|
||||
this.filteredSearchInput.addEventListener('keyup', this.tokenChange);
|
||||
this.filteredSearchInput.addEventListener('focus', this.addInputContainerFocusWrapper);
|
||||
this.tokensContainer.addEventListener('click', FilteredSearchManager.selectToken);
|
||||
this.tokensContainer.addEventListener('dblclick', this.editTokenWrapper);
|
||||
this.clearSearchButton.addEventListener('click', this.clearSearchWrapper);
|
||||
document.addEventListener('click', gl.FilteredSearchVisualTokens.unselectTokens);
|
||||
document.addEventListener('click', this.unselectEditTokensWrapper);
|
||||
document.addEventListener('click', this.removeInputContainerFocusWrapper);
|
||||
document.addEventListener('keydown', this.removeSelectedTokenWrapper);
|
||||
}
|
||||
|
||||
|
@ -69,11 +73,13 @@ import FilteredSearchContainer from './container';
|
|||
this.filteredSearchInput.removeEventListener('keyup', this.checkForBackspaceWrapper);
|
||||
this.filteredSearchInput.removeEventListener('click', this.tokenChange);
|
||||
this.filteredSearchInput.removeEventListener('keyup', this.tokenChange);
|
||||
this.filteredSearchInput.removeEventListener('focus', this.addInputContainerFocusWrapper);
|
||||
this.tokensContainer.removeEventListener('click', FilteredSearchManager.selectToken);
|
||||
this.tokensContainer.removeEventListener('dblclick', this.editTokenWrapper);
|
||||
this.clearSearchButton.removeEventListener('click', this.clearSearchWrapper);
|
||||
document.removeEventListener('click', gl.FilteredSearchVisualTokens.unselectTokens);
|
||||
document.removeEventListener('click', this.unselectEditTokensWrapper);
|
||||
document.removeEventListener('click', this.removeInputContainerFocusWrapper);
|
||||
document.removeEventListener('keydown', this.removeSelectedTokenWrapper);
|
||||
}
|
||||
|
||||
|
@ -124,6 +130,26 @@ import FilteredSearchContainer from './container';
|
|||
}
|
||||
}
|
||||
|
||||
addInputContainerFocus() {
|
||||
const inputContainer = this.filteredSearchInput.closest('.filtered-search-input-container');
|
||||
|
||||
if (inputContainer) {
|
||||
inputContainer.classList.add('focus');
|
||||
}
|
||||
}
|
||||
|
||||
removeInputContainerFocus(e) {
|
||||
const inputContainer = this.filteredSearchInput.closest('.filtered-search-input-container');
|
||||
const isElementInFilteredSearch = inputContainer && inputContainer.contains(e.target);
|
||||
const isElementInDynamicFilterDropdown = e.target.closest('.filter-dropdown') !== null;
|
||||
const isElementInStaticFilterDropdown = e.target.closest('ul[data-dropdown]') !== null;
|
||||
|
||||
if (!isElementInFilteredSearch && !isElementInDynamicFilterDropdown &&
|
||||
!isElementInStaticFilterDropdown && inputContainer) {
|
||||
inputContainer.classList.remove('focus');
|
||||
}
|
||||
}
|
||||
|
||||
static selectToken(e) {
|
||||
const button = e.target.closest('.selectable');
|
||||
|
||||
|
|
|
@ -173,16 +173,26 @@
|
|||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@extend .form-control:hover;
|
||||
}
|
||||
|
||||
&.focus,
|
||||
&.focus:hover {
|
||||
border-color: $dropdown-input-focus-border;
|
||||
box-shadow: 0 0 4px $search-input-focus-shadow-color;
|
||||
}
|
||||
|
||||
&.focus .fa-filter {
|
||||
color: $common-gray-dark;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
position: relative;
|
||||
min-width: 200px;
|
||||
padding: 5px 25px 6px 0;
|
||||
border-color: transparent;
|
||||
|
||||
&:focus ~ .fa-filter {
|
||||
color: $common-gray-dark;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
outline: none;
|
||||
|
|
|
@ -246,5 +246,17 @@ const FilteredSearchSpecHelper = require('../helpers/filtered_search_spec_helper
|
|||
expect(gl.FilteredSearchVisualTokens.unselectTokens).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
describe('toggleInputContainerFocus', () => {
|
||||
it('toggles on focus', () => {
|
||||
input.focus();
|
||||
expect(document.querySelector('.filtered-search-input-container').classList.contains('focus')).toEqual(true);
|
||||
});
|
||||
|
||||
it('toggles on blur', () => {
|
||||
input.blur();
|
||||
expect(document.querySelector('.filtered-search-input-container').classList.contains('focus')).toEqual(false);
|
||||
});
|
||||
});
|
||||
});
|
||||
})();
|
||||
|
|
Loading…
Reference in New Issue