This is a great feature, which I only just discovered by chance. I realize it has been available for a while, yet I only found out about its existence after skimming the release notes for https://www.drupal.org/project/admin_toolbar/releases/8.x-2.1.

And even after installing the module I couldn't see it. I guess I was expecting something new in the interface, but since "Search" has been present for a while, I had grown accustomed to it ... It took me quite a while to realize that the "Search" at the top was indeed what I had to click, in order to access the search field.

Also, I would prefer to return to the "Manage" menu fields ("Content", "Structure", etc.) after searching, and not keep the search overlay.

So, to Make the Admin Toolbar autocomplete search more easily discoverable, as well as not steal focus from the "Manage", I suggest that we show the search field by default at the top, next to the "Admin" link, and add a placeholder (placeholder="Admin Toolbar quick search") to help explain the feature. What do you think?

Admin Toolbar quick search

CommentFileSizeAuthor
#19 admin_toolbar_search-show-search-field-by-default-3122957-19-D8-interdiff.txt3.42 KBsasanikolic
#19 admin_toolbar_search-show-search-field-by-default-3122957-19-D8.patch7.76 KBsasanikolic
#15 ORIGINAL-not-home.png21.19 KBressa
#15 ORIGINAL-home.png16.35 KBressa
#14 home.png54.63 KBadriancid
#14 not-home.png70.43 KBadriancid
#11 interdiff_10-11.txt845 bytesressa
#11 admin_toolbar_search-show-search-field-by-default-3122957-11-D8.patch4.59 KBressa
#10 interdiff_8-10.txt1.03 KBressa
#10 admin_toolbar_search-show-search-field-by-default-3122957-10-D8.patch4.62 KBressa
#8 interdiff_4-8.txt1.37 KBressa
#8 admin_toolbar_search-show-search-field-by-default-3122957-8-D8.patch4.69 KBressa
#4 admin_toolbar_search-show-search-field-by-default-3122957-4-D8.patch2.97 KBressa
admin-toolbar-quick-search-input.png21.92 KBressa
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

ressa created an issue. See original summary.

ressa’s picture

ressa CreditAttribution: ressa at Ardea commented
Issue summary: View changes
ressa’s picture

ressa CreditAttribution: ressa at Ardea commented
Issue summary: View changes
ressa’s picture

ressa CreditAttribution: ressa at Ardea commented
Version: 8.x-2.2 » 8.x-2.x-dev
Status: Active » Needs review
FileSize
admin_toolbar_search-show-search-field-by-default-3122957-4-D8.patch2.97 KB

Here is a patch.

Status: Needs review » Needs work

The last submitted patch, 4: admin_toolbar_search-show-search-field-by-default-3122957-4-D8.patch, failed testing. View results
- codesniffer_fixes.patch Interdiff of automated coding standards fixes only.

romainj’s picture

romainj CreditAttribution: romainj as a volunteer commented

I agree that it would improve the UX.

adriancid’s picture

adriancid
Primary language Spanish
Location Montreal, Canada
CreditAttribution: adriancid at Drupiter commented

The tests need to be updated.

ressa’s picture

ressa CreditAttribution: ressa at Ardea commented
Status: Needs work » Needs review
FileSize
admin_toolbar_search-show-search-field-by-default-3122957-8-D8.patch4.69 KB
interdiff_4-8.txt1.37 KB

Thanks for fast feedback on my suggestion, I really appreciate it. Here's a patch which removes the two failing tests.

oknate’s picture

oknate
Location Greater New York City Area
CreditAttribution: oknate commented

This seems brittle:

-          var zIndex = $('#toolbar-item-administration-search-tray')
-            .css("z-index") + 1;
-          $(this).autocomplete('widget').css('z-index', zIndex);
+          $(this).autocomplete('widget').css('z-index', 100000);

100000 is arbitrary. Would it be above overlays, for example dialogs for entity embed?

I think having it relative to a toolbar item is important so that it's above the toolbar, but below overlays.

ressa’s picture

ressa CreditAttribution: ressa at Ardea commented
FileSize
admin_toolbar_search-show-search-field-by-default-3122957-10-D8.patch4.62 KB
interdiff_8-10.txt1.03 KB

Thanks for the feedback @oknate, and you're correct. I think I just bumped it up, since I wasn't sure if auto + 1 would work, but it seems to.

Here is an updated patch. I also removed 'z-index' => 10000 from tray attributes, it doesn't seem necessary.

ressa’s picture

ressa CreditAttribution: ressa at Ardea commented
FileSize
admin_toolbar_search-show-search-field-by-default-3122957-11-D8.patch4.59 KB
interdiff_10-11.txt845 bytes

Restores style for links in autocomplete drop-down, and makes the input field a bit smaller.

riaze143’s picture

riaze143 CreditAttribution: riaze143 as a volunteer commented

it works fine for me

romainj’s picture

romainj CreditAttribution: romainj as a volunteer commented

#11 works for me too.

adriancid’s picture

adriancid
Primary language Spanish
Location Montreal, Canada
CreditAttribution: adriancid at Drupiter commented
Status: Needs review » Needs work
FileSize
not-home.png70.43 KB
home.png54.63 KB

There is a change between the style when you're in the home and in another page, see the images

Home:

Not Home:

ressa’s picture

ressa CreditAttribution: ressa at Ardea commented
FileSize
ORIGINAL-home.png16.35 KB
ORIGINAL-not-home.png21.19 KB

Sure, but there was also a difference in the original version.

Home
home

Admin
not home

Do we need to get Admin Toolbar CSS to load last, or something like that to make it the same?

sasanikolic’s picture

sasanikolic CreditAttribution: sasanikolic at MD Systems GmbH commented

I think this change will affect the performance improvement that we just did in #3125253, as we need to populate the links on every page load?

Berdir’s picture

Berdir
Primary language German
Location Switzerland
CreditAttribution: Berdir at MD Systems GmbH commented

should still work if we do it when clicking on the textfield

ressa’s picture

ressa CreditAttribution: ressa at Ardea commented

@adriancid: Should we create another issue for the different look you point out in #14, to help keep this issue moving, and avoid bikeshedding?

sasanikolic’s picture

sasanikolic CreditAttribution: sasanikolic at MD Systems GmbH commented
Status: Needs work » Needs review
FileSize
admin_toolbar_search-show-search-field-by-default-3122957-19-D8.patch7.76 KB
admin_toolbar_search-show-search-field-by-default-3122957-19-D8-interdiff.txt3.42 KB

I did some cleanup as lots of code got deprecated with this change and the population of the search results didn't work (contrary to @Berdir's belief). :)

ressa’s picture

ressa CreditAttribution: ressa at Ardea commented
Status: Needs review » Reviewed & tested by the community

Thanks for the clean-up @sasanikolic, awesome work! It works really well, and the form now looks the same on both the front page, as well as other pages.

  • adriancid committed 9027b82 on 8.x-2.x authored by sasanikolic 
    Issue #3122957 by ressa, sasanikolic, adriancid, romainj, oknate, Berdir...
adriancid’s picture

adriancid
Primary language Spanish
Location Montreal, Canada
CreditAttribution: adriancid at Drupiter commented
Status: Reviewed & tested by the community » Fixed

@ressa I still have the issue between the front page and other pages, but I will commit this and open another issue to handle the problem.

Thanks to all of you for the effort.

adriancid’s picture

adriancid
Primary language Spanish
Location Montreal, Canada
CreditAttribution: adriancid at Drupiter commented

Here is the issue #3126379: Search element looks different on front page in case some of you can help on this, I'm concentrating efforts finishing the Node Revision Delete module on this days, help is welcome too on this module ;-)

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.