diff options
author | Kohei Yoshino <kohei.yoshino@gmail.com> | 2018-01-08 15:55:43 +0100 |
---|---|---|
committer | Dylan William Hardison <dylan@hardison.net> | 2018-01-08 15:55:43 +0100 |
commit | 9b3834764b26d0a806b72fdc3657075b7ab9c7c0 (patch) | |
tree | 2ed56c99d842b9ec52951723b0515af83edadbbf | |
parent | f86567c1f22f5d4dfa9bcc097efaef3ecb8b44bc (diff) | |
download | bugzilla-9b3834764b26d0a806b72fdc3657075b7ab9c7c0.tar.gz bugzilla-9b3834764b26d0a806b72fdc3657075b7ab9c7c0.tar.xz |
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
-rw-r--r-- | qa/t/lib/QA/Util.pm | 2 | ||||
-rw-r--r-- | qa/t/test_bug_edit.t | 2 | ||||
-rw-r--r-- | qa/t/test_qa_contact.t | 2 | ||||
-rw-r--r-- | qa/t/test_shared_searches.t | 4 | ||||
-rw-r--r-- | skins/standard/global.css | 47 | ||||
-rw-r--r-- | template/en/default/global/header-search-dropdown.html.tmpl | 5 | ||||
-rw-r--r-- | template/en/default/global/header.html.tmpl | 4 |
7 files changed, 46 insertions, 20 deletions
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 @@ <div id="header-search-dropdown-wrapper"> [% IF user.showmybugslink OR user.queries.size OR user.queries_subscribed.size %] <section id="header-search-dropdown-saved"> - <h3>Saved Searches</h3> + <header> + <h3>Saved Searches</h3> + <a href="userprefs.cgi?tab=saved-searches">Edit</a> + </header> <ul role="none"> [% IF user.showmybugslink %][% filtered_username = user.login FILTER uri %] <li role="none"><a role="option" href="[% Param('mybugstemplate').replace('%userid%', filtered_username) %]"> diff --git a/template/en/default/global/header.html.tmpl b/template/en/default/global/header.html.tmpl index 0f9646ba1..04b996e16 100644 --- a/template/en/default/global/header.html.tmpl +++ b/template/en/default/global/header.html.tmpl @@ -242,13 +242,11 @@ <section class="searchbox-outer dropdown" role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-owns="header-search-dropdown"> <h2>Quick Search</h2> + <span class="icon" aria-hidden="true"></span> <input role="searchbox" id="quicksearch_top" class="dropdown-button" name="quicksearch" autocomplete="off" value="[% quicksearch FILTER html %]" placeholder="Search [% terms.Bugs %]" title="Enter a [% terms.bug %] number or some search terms" aria-controls="header-search-dropdown" aria-label="Quick Search"> - <button type="submit" id="find_top" aria-label="Submit"> - <span class="icon" aria-hidden="true"></span> - </button> [% PROCESS "global/header-search-dropdown.html.tmpl" %] </section> </form> |