Do not auto close query dropdown and focus it

pull/5350/head
Oliver Günther 8 years ago
parent 50aeb6315c
commit db0737c428
No known key found for this signature in database
GPG Key ID: 88872239EB414F99
  1. 2
      app/assets/stylesheets/layout/_toolbar.sass
  2. 1
      config/locales/js-en.yml
  3. 2
      frontend/app/components/context-menus/has-dropdown-menu/has-dropdown-menu-directive.ts
  4. 14
      frontend/app/components/wp-query-select/wp-query-select.controller.ts
  5. 3
      frontend/app/components/wp-query-select/wp-query-select.template.html

@ -213,6 +213,8 @@
display: block
.search-query-wrapper
padding: 15px
.query-select-dropdown--no-results
padding: 15px 15px 0
input
box-sizing: border-box
margin: 0 auto

@ -498,6 +498,7 @@ en:
errors:
unretrievable_query: "Unable to retrieve query from URL"
not_found: "There is no such query"
text_no_results: "No matching queries were found."
table:
summary: "Table with rows of work package and columns of work package attributes."
text_inline_edit: "Most cells of this table are buttons that activate inline-editing functionality of that attribute."

@ -74,7 +74,7 @@ function hasDropdownMenu(contextMenu:ContextMenuService, FocusHelper:any) {
event.stopPropagation();
scope.$evalAsync(() => {
open(event).then((menuElement:JQuery) => {
menuElement.find('.menu-item').first().focus();
FocusHelper.focusElement(menuElement.find('.menu-item,input').first(), true);
});
});

@ -52,6 +52,7 @@ interface MyI18n {
label:string;
scope_global:string;
scope_private:string;
no_results:string;
}
export class WorkPackageQuerySelectController {
@ -68,7 +69,8 @@ export class WorkPackageQuerySelectController {
loading: I18n.t('js.ajax.loading'),
label: I18n.t('js.toolbar.search_query_label'),
scope_global: I18n.t('js.label_global_queries'),
scope_private: I18n.t('js.label_custom_queries')
scope_private: I18n.t('js.label_custom_queries'),
no_results: I18n.t('js.work_packages.query.text_no_results')
};
this.setup();
@ -93,8 +95,7 @@ export class WorkPackageQuerySelectController {
this.defineJQueryQueryComplete();
let input = angular.element('#query-title-filter') as IQueryAutocompleteJQuery;
let close = () => { this.contextMenu.close() }
let noResults = angular.element('.query-select-dropdown--no-results');
input.querycomplete({
delay: 0,
@ -102,11 +103,14 @@ export class WorkPackageQuerySelectController {
select: (ul:any, selected:{item:IAutocompleteItem}) => {
this.loadQuery(selected.item.query);
},
response: (event:any,ui:any) => {
// Show the noResults span if we don't have any matches
noResults.toggle(ui.content.length === 0);
},
appendTo: '.search-query-wrapper',
classes: {
'ui-autocomplete': '-inplace'
},
close: close
}
});
}

@ -2,11 +2,10 @@
<div class="search-query-wrapper">
<label for="title-filter" class="hidden-for-sighted">{{ ::i18n.label }}</label>
<input type="text"
focus
ng-disabled="!loaded"
class="ui-autocomplete--input"
id="query-title-filter"
placeholder="{{ i18n.loading }}">
<i id="magnifier" class="icon-search"></i>
</div>
<p class="query-select-dropdown--no-results" hidden ng-bind="::i18n.no_results"></p>
</div>

Loading…
Cancel
Save