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.unselectEditTokensWrapper = this.unselectEditTokens.bind(this);
|
||||||
this.editTokenWrapper = this.editToken.bind(this);
|
this.editTokenWrapper = this.editToken.bind(this);
|
||||||
this.tokenChange = this.tokenChange.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 = this.filteredSearchInput.form;
|
||||||
this.filteredSearchInputForm.addEventListener('submit', this.handleFormSubmit);
|
this.filteredSearchInputForm.addEventListener('submit', this.handleFormSubmit);
|
||||||
|
@ -51,11 +53,13 @@ import FilteredSearchContainer from './container';
|
||||||
this.filteredSearchInput.addEventListener('keyup', this.checkForBackspaceWrapper);
|
this.filteredSearchInput.addEventListener('keyup', this.checkForBackspaceWrapper);
|
||||||
this.filteredSearchInput.addEventListener('click', this.tokenChange);
|
this.filteredSearchInput.addEventListener('click', this.tokenChange);
|
||||||
this.filteredSearchInput.addEventListener('keyup', this.tokenChange);
|
this.filteredSearchInput.addEventListener('keyup', this.tokenChange);
|
||||||
|
this.filteredSearchInput.addEventListener('focus', this.addInputContainerFocusWrapper);
|
||||||
this.tokensContainer.addEventListener('click', FilteredSearchManager.selectToken);
|
this.tokensContainer.addEventListener('click', FilteredSearchManager.selectToken);
|
||||||
this.tokensContainer.addEventListener('dblclick', this.editTokenWrapper);
|
this.tokensContainer.addEventListener('dblclick', this.editTokenWrapper);
|
||||||
this.clearSearchButton.addEventListener('click', this.clearSearchWrapper);
|
this.clearSearchButton.addEventListener('click', this.clearSearchWrapper);
|
||||||
document.addEventListener('click', gl.FilteredSearchVisualTokens.unselectTokens);
|
document.addEventListener('click', gl.FilteredSearchVisualTokens.unselectTokens);
|
||||||
document.addEventListener('click', this.unselectEditTokensWrapper);
|
document.addEventListener('click', this.unselectEditTokensWrapper);
|
||||||
|
document.addEventListener('click', this.removeInputContainerFocusWrapper);
|
||||||
document.addEventListener('keydown', this.removeSelectedTokenWrapper);
|
document.addEventListener('keydown', this.removeSelectedTokenWrapper);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -69,11 +73,13 @@ import FilteredSearchContainer from './container';
|
||||||
this.filteredSearchInput.removeEventListener('keyup', this.checkForBackspaceWrapper);
|
this.filteredSearchInput.removeEventListener('keyup', this.checkForBackspaceWrapper);
|
||||||
this.filteredSearchInput.removeEventListener('click', this.tokenChange);
|
this.filteredSearchInput.removeEventListener('click', this.tokenChange);
|
||||||
this.filteredSearchInput.removeEventListener('keyup', this.tokenChange);
|
this.filteredSearchInput.removeEventListener('keyup', this.tokenChange);
|
||||||
|
this.filteredSearchInput.removeEventListener('focus', this.addInputContainerFocusWrapper);
|
||||||
this.tokensContainer.removeEventListener('click', FilteredSearchManager.selectToken);
|
this.tokensContainer.removeEventListener('click', FilteredSearchManager.selectToken);
|
||||||
this.tokensContainer.removeEventListener('dblclick', this.editTokenWrapper);
|
this.tokensContainer.removeEventListener('dblclick', this.editTokenWrapper);
|
||||||
this.clearSearchButton.removeEventListener('click', this.clearSearchWrapper);
|
this.clearSearchButton.removeEventListener('click', this.clearSearchWrapper);
|
||||||
document.removeEventListener('click', gl.FilteredSearchVisualTokens.unselectTokens);
|
document.removeEventListener('click', gl.FilteredSearchVisualTokens.unselectTokens);
|
||||||
document.removeEventListener('click', this.unselectEditTokensWrapper);
|
document.removeEventListener('click', this.unselectEditTokensWrapper);
|
||||||
|
document.removeEventListener('click', this.removeInputContainerFocusWrapper);
|
||||||
document.removeEventListener('keydown', this.removeSelectedTokenWrapper);
|
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) {
|
static selectToken(e) {
|
||||||
const button = e.target.closest('.selectable');
|
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 {
|
.form-control {
|
||||||
position: relative;
|
position: relative;
|
||||||
min-width: 200px;
|
min-width: 200px;
|
||||||
padding: 5px 25px 6px 0;
|
padding: 5px 25px 6px 0;
|
||||||
border-color: transparent;
|
border-color: transparent;
|
||||||
|
|
||||||
&:focus ~ .fa-filter {
|
|
||||||
color: $common-gray-dark;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus,
|
&:focus,
|
||||||
&:hover {
|
&:hover {
|
||||||
outline: none;
|
outline: none;
|
||||||
|
|
|
@ -246,5 +246,17 @@ const FilteredSearchSpecHelper = require('../helpers/filtered_search_spec_helper
|
||||||
expect(gl.FilteredSearchVisualTokens.unselectTokens).toHaveBeenCalled();
|
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