From: Kohei Yoshino Date: Mon, 8 Jan 2018 14:55:43 +0000 (-0500) Subject: Bug 1428642 - Fix minor bugs on new global header X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=9b3834764b26d0a806b72fdc3657075b7ab9c7c0;p=thirdparty%2Fbugzilla.git Bug 1428642 - Fix minor bugs on new global header * The magnifier icon on the search bar should not trigger search as reported in https://twitter.com/colinjoy/status/949035254949523457 * The search dropdown should show Saved Searches Edit link as suggested in my UX analysis * Remove the CSS transition on the More Tools button for consistency. I didn't add the transition; it's default style for buttons * Fix the position of the arrow/triangle on dropdown lists. An error of 1px. * Add `user-select: none;` to `#header` https://developer.mozilla.org/en-US/docs/Web/CSS/user select --- diff --git a/qa/t/lib/QA/Util.pm b/qa/t/lib/QA/Util.pm index f80837c0e..5d041d560 100644 --- a/qa/t/lib/QA/Util.pm +++ b/qa/t/lib/QA/Util.pm @@ -266,7 +266,7 @@ sub go_to_bug { my ($sel, $bug_id) = @_; $sel->type_ok("quicksearch_top", $bug_id); - $sel->click_ok("find_top", undef, "Go to bug $bug_id"); + $sel->submit("header-search"); $sel->wait_for_page_to_load_ok(WAIT_TIME); my $bug_title = $sel->get_title(); utf8::encode($bug_title) if utf8::is_utf8($bug_title); diff --git a/qa/t/test_bug_edit.t b/qa/t/test_bug_edit.t index 8e42a139d..07a64876b 100644 --- a/qa/t/test_bug_edit.t +++ b/qa/t/test_bug_edit.t @@ -161,7 +161,7 @@ logout($sel); log_in($sel, $config, 'unprivileged'); $sel->type_ok("quicksearch_top", $bug1_id); -$sel->click_ok("find_top"); +$sel->submit("header-search"); $sel->wait_for_page_to_load_ok(WAIT_TIME); $sel->title_is("Access Denied"); $sel->is_text_present_ok("You are not authorized to access bug $bug1_id"); diff --git a/qa/t/test_qa_contact.t b/qa/t/test_qa_contact.t index b75044806..3795e2edc 100644 --- a/qa/t/test_qa_contact.t +++ b/qa/t/test_qa_contact.t @@ -94,7 +94,7 @@ logout($sel); # to the Master group. $sel->type_ok("quicksearch_top", $bug1_id); -$sel->click_ok("find_top"); +$sel->submit("header-search"); $sel->wait_for_page_to_load_ok(WAIT_TIME); $sel->title_is("Access Denied"); $sel->is_text_present_ok("You are not authorized to access bug"); diff --git a/qa/t/test_shared_searches.t b/qa/t/test_shared_searches.t index 98237f756..a4b2ac9ce 100644 --- a/qa/t/test_shared_searches.t +++ b/qa/t/test_shared_searches.t @@ -23,7 +23,7 @@ set_parameters($sel, { "Group Security" => {"querysharegroup" => {type => "selec # Create new saved search and call it 'Shared Selenium buglist'. $sel->type_ok("quicksearch_top", ":TestProduct Selenium"); -$sel->click_ok("find_top"); +$sel->submit("header-search"); $sel->wait_for_page_to_load_ok(WAIT_TIME); $sel->title_like(qr/^Bug List:/); $sel->type_ok("save_newqueryname", "Shared Selenium buglist"); @@ -96,7 +96,7 @@ ok(!$sel->is_text_present("Shared Selenium buglist"), "Shared query no longer di # Create your own saved search, and share it with the canconfirm group. $sel->type_ok("quicksearch_top", ":TestProduct sw:helpwanted"); -$sel->click_ok("find_top"); +$sel->submit("header-search"); $sel->wait_for_page_to_load_ok(WAIT_TIME); $sel->title_like(qr/^Bug List:/); $sel->type_ok("save_newqueryname", "helpwanted"); diff --git a/skins/standard/global.css b/skins/standard/global.css index 3a2b87856..ea25eb88a 100644 --- a/skins/standard/global.css +++ b/skins/standard/global.css @@ -71,6 +71,9 @@ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); color: #555; background-color: #FFF; + -moz-user-select: none; + -webkit-user-select: none; + user-select: none; } #header a, @@ -121,6 +124,7 @@ font-family: 'Material Icons'; vertical-align: middle; color: #777; + pointer-events: none; } #header .title { @@ -165,19 +169,18 @@ height: 32px; } - #header .searchbox-outer button { + #header .searchbox-outer .icon { + display: flex; + align-items: center; + justify-content: center; position: absolute; top: 4px; left: 4px; - border: 0; - padding: 0; width: 24px; height: 24px; - background: transparent; - box-shadow: none; } - #header .searchbox-outer button .icon::before { + #header .searchbox-outer .icon::before { content: '\E8B6'; } @@ -240,10 +243,12 @@ #header .dropdown-button { display: block; + border-radius: 0; /* Override Safari's default */ padding: 0; color: inherit; background: transparent; box-shadow: none; + transition: none; } #header .dropdown-content { @@ -279,12 +284,12 @@ #header .dropdown-content.right::before, #header .dropdown-content.right::after { - left: 10px; + left: 11px; } #header .dropdown-content.left::before, #header .dropdown-content.left::after { - right: 10px; + right: 11px; } #header .dropdown-content::before { @@ -323,18 +328,38 @@ max-height: 400px; } - #header-search-dropdown h3 { + #header-search-dropdown header { + display: flex; position: sticky; top: -4px; left: 0; - margin: -4px 8px 0; + margin: -4px 12px 0; padding: 8px 0 4px; color: #999; background: #FFF; font-size: 12px; + } + + #header-search-dropdown header h3 { + flex: auto; + margin: 0; + font-size: inherit; + line-height: 1.5; font-weight: normal; } + #header-search-dropdown header a { + flex: none; + padding: 0 !important; + font-size: inherit; + } + + #header-search-dropdown.dropdown-content header a:hover, + #header-search-dropdown.dropdown-content header a:focus, + #header-search-dropdown.dropdown-content header a.active { + background-color: transparent !important; + } + #header-search-dropdown ul { margin: 0; padding: 0; @@ -350,7 +375,7 @@ #header-tools-menu-button { width: 32px; height: 32px; - border-radius: 4px; + border-radius: 4px !important; } #header-tools-menu-button .icon { diff --git a/template/en/default/global/header-search-dropdown.html.tmpl b/template/en/default/global/header-search-dropdown.html.tmpl index 590c95d31..8e79978ba 100644 --- a/template/en/default/global/header-search-dropdown.html.tmpl +++ b/template/en/default/global/header-search-dropdown.html.tmpl @@ -26,7 +26,10 @@
[% IF user.showmybugslink OR user.queries.size OR user.queries_subscribed.size %]
-

Saved Searches

+
+

Saved Searches

+ Edit +