From 139261bbc13192621ef795d6d45298e1d8e1b7f3 Mon Sep 17 00:00:00 2001 From: Stas Vilchik Date: Mon, 3 Apr 2017 17:56:23 +0200 Subject: SONAR-9064 Rework facets sidebar on the issues page --- .../src/main/js/components/common/EmptySearch.js | 39 +++++++++++ .../src/main/js/components/common/MarkdownTips.js | 2 +- .../src/main/js/components/common/SelectList.js | 77 +++++++++++++--------- .../components/common/__tests__/SelectList-test.js | 6 +- .../__snapshots__/SelectList-test.js.snap | 8 +-- .../js/components/common/action-options-view.js | 1 + .../src/main/js/components/common/modals.js | 1 + .../src/main/js/components/common/popup.js | 1 + 8 files changed, 94 insertions(+), 41 deletions(-) create mode 100644 server/sonar-web/src/main/js/components/common/EmptySearch.js (limited to 'server/sonar-web/src/main/js/components/common') diff --git a/server/sonar-web/src/main/js/components/common/EmptySearch.js b/server/sonar-web/src/main/js/components/common/EmptySearch.js new file mode 100644 index 00000000000..904a6b2cbad --- /dev/null +++ b/server/sonar-web/src/main/js/components/common/EmptySearch.js @@ -0,0 +1,39 @@ +/* + * SonarQube + * Copyright (C) 2009-2017 SonarSource SA + * mailto:info AT sonarsource DOT com + * + * This program is free software; you can redistribute it and/or + * modify it under the terms of the GNU Lesser General Public + * License as published by the Free Software Foundation; either + * version 3 of the License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * Lesser General Public License for more details. + * + * You should have received a copy of the GNU Lesser General Public License + * along with this program; if not, write to the Free Software Foundation, + * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. + */ +// @flow +import React from 'react'; +import { css } from 'glamor'; +import { translate } from '../../helpers/l10n'; + +const EmptySearch = () => ( +
+

{translate('no_results_search')}

+

{translate('no_results_search.2')}

+
+); + +export default EmptySearch; diff --git a/server/sonar-web/src/main/js/components/common/MarkdownTips.js b/server/sonar-web/src/main/js/components/common/MarkdownTips.js index 2d83b6aeb24..8c5db3a8fe1 100644 --- a/server/sonar-web/src/main/js/components/common/MarkdownTips.js +++ b/server/sonar-web/src/main/js/components/common/MarkdownTips.js @@ -25,7 +25,7 @@ import { translate } from '../../helpers/l10n'; export default class MarkdownTips extends React.PureComponent { handleClick(evt: MouseEvent) { evt.preventDefault(); - window.open(getMarkdownHelpUrl(), 'height=300,width=600,scrollbars=1,resizable=1'); + window.open(getMarkdownHelpUrl(), 'Markdown', 'height=300,width=600,scrollbars=1,resizable=1'); } render() { diff --git a/server/sonar-web/src/main/js/components/common/SelectList.js b/server/sonar-web/src/main/js/components/common/SelectList.js index ba2f82b34b7..bec5c2e6712 100644 --- a/server/sonar-web/src/main/js/components/common/SelectList.js +++ b/server/sonar-web/src/main/js/components/common/SelectList.js @@ -19,6 +19,8 @@ */ // @flow import React from 'react'; +import key from 'keymaster'; +import { uniqueId } from 'lodash'; import SelectListItem from './SelectListItem'; type Props = { @@ -33,7 +35,8 @@ type State = { }; export default class SelectList extends React.PureComponent { - list: HTMLElement; + currentKeyScope: string; + previousKeyScope: string; props: Props; state: State; @@ -45,7 +48,7 @@ export default class SelectList extends React.PureComponent { } componentDidMount() { - this.list.focus(); + this.attachShortcuts(); } componentWillReceiveProps(nextProps: Props) { @@ -57,24 +60,36 @@ export default class SelectList extends React.PureComponent { } } - handleKeyboard = (evt: KeyboardEvent) => { - switch (evt.keyCode) { - case 40: // down - this.setState(this.selectNextElement); - break; - case 38: // up - this.setState(this.selectPreviousElement); - break; - case 13: // return - if (this.state.active) { - this.handleSelect(this.state.active); - } - break; - default: - return; - } - evt.preventDefault(); - evt.stopPropagation(); + componentWillUnmount() { + this.detachShortcuts(); + } + + attachShortcuts = () => { + this.previousKeyScope = key.getScope(); + this.currentKeyScope = uniqueId('key-scope'); + key.setScope(this.currentKeyScope); + + key('down', this.currentKeyScope, () => { + this.setState(this.selectNextElement); + return false; + }); + + key('up', this.currentKeyScope, () => { + this.setState(this.selectPreviousElement); + return false; + }); + + key('return', this.currentKeyScope, () => { + if (this.state.active) { + this.handleSelect(this.state.active); + } + return false; + }); + }; + + detachShortcuts = () => { + key.setScope(this.previousKeyScope); + key.deleteScope(this.currentKeyScope); }; handleSelect = (item: string) => { @@ -105,18 +120,18 @@ export default class SelectList extends React.PureComponent { const { children } = this.props; const hasChildren = React.Children.count(children) > 0; return ( -