From: Kohei Yoshino Date: Wed, 13 Dec 2017 21:06:06 +0000 (-0500) Subject: Bug 1376826 - New HTML Header for BMO X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=2e5d910d9401c4fa8f105d8f9502d9e4ea27bb99;p=thirdparty%2Fbugzilla.git Bug 1376826 - New HTML Header for BMO --- diff --git a/extensions/BMO/template/en/default/pages/etiquette.html.tmpl b/extensions/BMO/template/en/default/pages/etiquette.html.tmpl index 6e62f4762..45dd5bd65 100644 --- a/extensions/BMO/template/en/default/pages/etiquette.html.tmpl +++ b/extensions/BMO/template/en/default/pages/etiquette.html.tmpl @@ -23,7 +23,7 @@ [% PROCESS global/header.html.tmpl title = "Bugzilla Etiquette" - style = "li { margin: 5px } .heading { font-weight: bold }" %] + style = "#bugzilla-body li { margin: 5px } .heading { font-weight: bold }" %]

Bugzilla Etiquette

diff --git a/extensions/BugModal/template/en/default/bug_modal/common_header.html.tmpl b/extensions/BugModal/template/en/default/bug_modal/common_header.html.tmpl index 814464f27..ccc974a23 100644 --- a/extensions/BugModal/template/en/default/bug_modal/common_header.html.tmpl +++ b/extensions/BugModal/template/en/default/bug_modal/common_header.html.tmpl @@ -38,7 +38,6 @@ "extensions/ProdCompSearch/web/js/prod_comp_search.js", "extensions/BugModal/web/common_bug_modal.js", "extensions/BugModal/web/comments.js", - "extensions/BugModal/web/dropdown.js", "js/bugzilla-readable-status-min.js", "js/field.js", "js/comments.js", @@ -51,7 +50,6 @@ ); style_urls.unshift( "extensions/BugModal/web/common_bug_modal.css", - "extensions/BugModal/web/dropdown.css", "skins/custom/bug_groups.css", "js/jquery/plugins/datetimepicker/datetimepicker.css", "js/jquery/plugins/contextMenu/contextMenu.css" diff --git a/extensions/BugModal/template/en/default/bug_modal/header.html.tmpl b/extensions/BugModal/template/en/default/bug_modal/header.html.tmpl index d92ad455d..38b6b572f 100644 --- a/extensions/BugModal/template/en/default/bug_modal/header.html.tmpl +++ b/extensions/BugModal/template/en/default/bug_modal/header.html.tmpl @@ -53,7 +53,6 @@ "extensions/ProdCompSearch/web/js/prod_comp_search.js", "extensions/BugModal/web/bug_modal.js", "extensions/BugModal/web/comments.js", - "extensions/BugModal/web/dropdown.js", "js/bugzilla-readable-status-min.js", "js/field.js", "js/comments.js", @@ -65,7 +64,6 @@ ); style_urls.push( "extensions/BugModal/web/bug_modal.css", - "extensions/BugModal/web/dropdown.css", "skins/standard/bug_groups.css", "js/jquery/plugins/contextMenu/contextMenu.css" ); diff --git a/extensions/BugModal/web/dropdown.css b/extensions/BugModal/web/dropdown.css deleted file mode 100644 index e9a363c11..000000000 --- a/extensions/BugModal/web/dropdown.css +++ /dev/null @@ -1,53 +0,0 @@ -/* This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this file, - * You can obtain one at http://mozilla.org/MPL/2.0/. - * - * This Source Code Form is "Incompatible With Secondary Licenses", as - * defined by the Mozilla Public License, v. 2.0. */ - -/* The container
- needed to position the dropdown content */ -.dropdown { - position: relative; - display: inline-block; -} - -/* Dropdown Content (Hidden by Default) */ -.dropdown-content { - position: absolute; - background-color: #eee; - min-width: 120px; - z-index: 1; - text-align: left; - margin: 0; - padding: 0; - border: 1px solid #ddd; - -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1); - -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1); - box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1); - list-style: none; - right: 0px; -} - -.dropdown-content.menu-up { - bottom: 100%; -} - -.dropdown-separator { - border-bottom: 1px solid #ddd; -} - -/* Links inside the dropdown */ -.dropdown-content a { - white-space: nowrap; - background-color: #eee; - color: black !important; - padding: 4px 8px; - text-decoration: none !important; - display: block; -} - -/* Change color of dropdown links on hover */ -.dropdown-content li .active { - text-decoration: none; - background-color: #39f; -} diff --git a/extensions/GitHubAuth/template/en/default/hook/account/auth/login-small-additional_methods.html.tmpl b/extensions/GitHubAuth/template/en/default/hook/account/auth/login-small-additional_methods.html.tmpl index 5fcf5d72b..965e29639 100644 --- a/extensions/GitHubAuth/template/en/default/hook/account/auth/login-small-additional_methods.html.tmpl +++ b/extensions/GitHubAuth/template/en/default/hook/account/auth/login-small-additional_methods.html.tmpl @@ -8,7 +8,7 @@ [% USE Bugzilla %] [% IF Param('user_info_class').split(',').contains('GitHubAuth') %] - +
diff --git a/extensions/MyDashboard/template/en/default/hook/global/common-links-action-links.html.tmpl b/extensions/MyDashboard/template/en/default/hook/global/header-action-links.html.tmpl similarity index 71% rename from extensions/MyDashboard/template/en/default/hook/global/common-links-action-links.html.tmpl rename to extensions/MyDashboard/template/en/default/hook/global/header-action-links.html.tmpl index 518743ccf..bf25e7a88 100644 --- a/extensions/MyDashboard/template/en/default/hook/global/common-links-action-links.html.tmpl +++ b/extensions/MyDashboard/template/en/default/hook/global/header-action-links.html.tmpl @@ -7,6 +7,10 @@ #%] [% IF user.login %] -
  • | - My Dashboard
    • +
  • + + + My Dashboard + +
    • [% END %] diff --git a/extensions/Review/template/en/default/hook/global/header-message.html.tmpl b/extensions/Review/template/en/default/hook/global/header-badge.html.tmpl similarity index 96% rename from extensions/Review/template/en/default/hook/global/header-message.html.tmpl rename to extensions/Review/template/en/default/hook/global/header-badge.html.tmpl index e4bb1c687..aca61561e 100644 --- a/extensions/Review/template/en/default/hook/global/header-message.html.tmpl +++ b/extensions/Review/template/en/default/hook/global/header-badge.html.tmpl @@ -12,7 +12,7 @@ || user.needinfo_request_count %] -id; -# We only cache unauthenticated requests now, because invalidating is harder for logged in users. -my $can_cache = $user_id == 0; +# Disable content caching by browser because there will be different items on the global navigation +# before and after signed in. +my $can_cache = 0; # And log out the user if requested. We do this first so that nothing # else accidentally relies on the current login. diff --git a/js/comments.js b/js/comments.js index 12bc00d46..88ba49364 100644 --- a/js/comments.js +++ b/js/comments.js @@ -144,7 +144,7 @@ function goto_add_comments( anchor ){ anchor = (anchor || "add_comment"); // we need this line to expand the comment box document.getElementById('comment').focus(); - setTimeout(function(){ + setTimeout(function(){ document.location.hash = anchor; // firefox doesn't seem to keep focus through the anchor change document.getElementById('comment').focus(); @@ -178,3 +178,23 @@ function getText(element) { } return text; } + +/** + * If the URL contains a comment ID like #c10, scroll down the page to show the + * entire comment below the fixed global header. + */ +function scroll_comment_into_view() { + if (location.hash.match(/^#c\d+$/)) { + var $header = document.querySelector('#header'); + var $comment = document.querySelector(location.hash); + + if ($comment) { + window.setTimeout(function() { + window.scrollTo(0, $comment.offsetTop - $header.offsetHeight - 20); + }, 100); + } + } +} + +window.addEventListener('load', scroll_comment_into_view, { once: true }); +window.addEventListener('hashchange', scroll_comment_into_view); diff --git a/extensions/BugModal/web/dropdown.js b/js/dropdown.js similarity index 82% rename from extensions/BugModal/web/dropdown.js rename to js/dropdown.js index 181be9f73..32ce4696f 100644 --- a/extensions/BugModal/web/dropdown.js +++ b/js/dropdown.js @@ -33,19 +33,19 @@ $(function() { if ($content.is(':visible')) { e.preventDefault(); e.stopPropagation(); - var $li = $content.find('li'); + var $items = $content.find('[role="menuitem"]'); // if none focused select the first or last - var $any_focused = $content.find('a:focus'); + var $any_focused = $items.filter(':focus'); if ($any_focused.length == 0) { - var index = e.keyCode == 40 ? 0 : $li.length - 1; - var $link = $li.eq(index).find('a'); + var index = e.keyCode == 40 ? 0 : $items.length - 1; + var $link = $items.eq(index); $link.addClass('active').focus(); return; } // otherwise move up or down the list based on arrow key pressed var inc = e.keyCode == 40 ? 1 : -1; - var move = $content.find('a:focus').parent('li').index() + inc; - var $link = $li.eq(move % $li.length).find('a'); + var move = $items.index($any_focused) + inc; + var $link = $items.eq(move % $items.length); $content.find('a').removeClass('active'); $link.addClass('active').focus(); } @@ -78,6 +78,13 @@ $(function() { }); function toggleDropDown(e, $button, $content, hide_only) { + // hide other expanded dropdown menu if any + var $expanded = $('.dropdown-button[aria-expanded="true"]'); + if ($expanded.length && !$expanded.is($button)) { + $('#' + $expanded.attr('aria-controls')).hide(); + $expanded.attr('aria-expanded', false); + } + // clear all active links $content.find('a').removeClass('active'); if ($content.is(':visible')) { diff --git a/js/global.js b/js/global.js index 102ab05af..b7b517631 100644 --- a/js/global.js +++ b/js/global.js @@ -10,10 +10,10 @@ * * The Original Code is the Bugzilla Bug Tracking System. * -* Contributor(s): +* Contributor(s): * Guy Pyrzak * Max Kanat-Alexander -* +* */ var BUGZILLA = $("#bugzilla-global").data("bugzilla"); @@ -85,30 +85,27 @@ function manage_old_lists() { function show_mini_login_form( suffix ) { - $('#login_link' + suffix).addClass('bz_default_hidden'); - $('#mini_login' + suffix).removeClass('bz_default_hidden'); - $('.mini_login' + suffix).removeClass('bz_default_hidden'); + hide_forgot_form(suffix); + $('#mini_login' + suffix).removeClass('bz_default_hidden').find('input[required]:first').focus(); $('#new_account_container' + suffix).addClass('bz_default_hidden'); return false; } function hide_mini_login_form( suffix ) { - $('#login_link' + suffix).removeClass('bz_default_hidden'); $('#mini_login' + suffix).addClass('bz_default_hidden'); $('#new_account_container' + suffix).removeClass('bz_default_hidden'); return false; } function show_forgot_form( suffix ) { - $('#forgot_link' + suffix).addClass('bz_default_hidden'); - $('#forgot_form' + suffix).removeClass('bz_default_hidden'); + hide_mini_login_form(suffix); + $('#forgot_form' + suffix).removeClass('bz_default_hidden').find('input[required]:first').focus(); $('#login_container' + suffix).addClass('bz_default_hidden'); return false; } function hide_forgot_form( suffix ) { - $('#forgot_link' + suffix).removeClass('bz_default_hidden'); $('#forgot_form' + suffix).addClass('bz_default_hidden'); $('#login_container' + suffix).removeClass('bz_default_hidden'); return false; diff --git a/qa/t/lib/QA/Util.pm b/qa/t/lib/QA/Util.pm index 4999e6f3b..0ef843ce7 100644 --- a/qa/t/lib/QA/Util.pm +++ b/qa/t/lib/QA/Util.pm @@ -203,7 +203,7 @@ sub file_bug_in_product { my $config = get_config(); $classification ||= "Unclassified"; - $sel->click_ok("link=New", undef, "Go create a new bug"); + $sel->click_ok('//*[@class="link-file"]//a', undef, "Go create a new bug"); $sel->wait_for_page_to_load(WAIT_TIME); my $title = $sel->get_title(); if ($sel->is_text_present("Select Classification")) { @@ -328,7 +328,7 @@ sub add_product { sub open_advanced_search_page { my $sel = shift; - $sel->click_ok("link=Search"); + $sel->click_ok('//*[@class="link-search"]//a'); $sel->wait_for_page_to_load(WAIT_TIME); my $title = $sel->get_title(); if ($title eq "Simple Search") { diff --git a/qa/t/test_create_user_accounts.t b/qa/t/test_create_user_accounts.t index 4d66f6862..99792367e 100644 --- a/qa/t/test_create_user_accounts.t +++ b/qa/t/test_create_user_accounts.t @@ -37,7 +37,7 @@ $sel->title_is("Request for new user account '$valid_account' submitted"); $sel->is_text_present_ok("A confirmation email has been sent"); # Try creating the same account again. It's too soon. -$sel->click_ok("link=Home"); +$sel->click_ok('//*[@id="header-title"]//a'); $sel->wait_for_page_to_load_ok(WAIT_TIME); $sel->title_is("Bugzilla Main Page"); $sel->is_text_present_ok("Open a New Account"); @@ -123,7 +123,7 @@ logout($sel); # Make sure that links pointing to createaccount.cgi are all deactivated. ok(!$sel->is_text_present("New Account"), "No link named 'New Account'"); -$sel->click_ok("link=Home"); +$sel->click_ok('//*[@id="header-title"]//a'); $sel->wait_for_page_to_load_ok(WAIT_TIME); $sel->refresh; $sel->wait_for_page_to_load_ok(WAIT_TIME); diff --git a/qa/t/test_keywords.t b/qa/t/test_keywords.t index 72a4f6049..0edffcc2f 100644 --- a/qa/t/test_keywords.t +++ b/qa/t/test_keywords.t @@ -128,7 +128,7 @@ $sel->wait_for_page_to_load(WAIT_TIME); $sel->title_is("Bug List"); $sel->is_text_present_ok("2 bugs found"); -$sel->click_ok("link=Search"); +$sel->click_ok('//*[@class="link-search"]//a'); $sel->wait_for_page_to_load(WAIT_TIME); $sel->title_is("Search for bugs"); $sel->remove_all_selections("product"); @@ -140,7 +140,7 @@ $sel->wait_for_page_to_load(WAIT_TIME); $sel->title_is("Bug List"); $sel->is_text_present_ok("One bug found"); -$sel->click_ok("link=Search"); +$sel->click_ok('//*[@class="link-search"]//a'); $sel->wait_for_page_to_load(WAIT_TIME); $sel->title_is("Search for bugs"); $sel->remove_all_selections("product"); diff --git a/qa/t/test_long_list_redirection.t b/qa/t/test_long_list_redirection.t index 2ee23f9a2..b2c22e66a 100644 --- a/qa/t/test_long_list_redirection.t +++ b/qa/t/test_long_list_redirection.t @@ -15,6 +15,6 @@ my ($sel, $config) = get_selenium(); $sel->open_ok("/$config->{bugzilla_installation}/long_list.cgi?id=1"); $sel->title_is("Full Text Bug Listing", "Display bug as format for printing"); -my $text = $sel->get_text("//h1"); +my $text = $sel->get_text('//*[@id="bugzilla-body"]//h1'); $text =~ s/[\r\n\t\s]+/ /g; is($text, 'Bug 1', 'Display bug 1 specifically'); diff --git a/qa/t/test_require_login.t b/qa/t/test_require_login.t index 7b39e7329..1cfd5b42f 100644 --- a/qa/t/test_require_login.t +++ b/qa/t/test_require_login.t @@ -76,6 +76,6 @@ set_parameters($sel, { "User Authentication" => {"requirelogin-off" => undef} }) logout($sel); # Make sure we can access random pages again. -$sel->click_ok("link=Search"); +$sel->click_ok('//*[@class="link-search"]//a'); $sel->wait_for_page_to_load_ok(WAIT_TIME); $sel->title_isnt("Log in to Bugzilla"); diff --git a/qa/t/test_show_all_products.t b/qa/t/test_show_all_products.t index 36f61e42c..ecc806980 100644 --- a/qa/t/test_show_all_products.t +++ b/qa/t/test_show_all_products.t @@ -25,7 +25,7 @@ set_parameters($sel, { "Bug Fields" => {"useclassification-on" => undef} }); # The admin is not a member of the "QA‑Selenium‑TEST" group, and so # cannot see the "QA‑Selenium‑TEST" product. -$sel->click_ok("link=New"); +$sel->click_ok('//*[@class="link-file"]//a'); $sel->wait_for_page_to_load_ok(WAIT_TIME); $sel->title_is("Enter Bug"); $sel->click_ok("link=Other Products", undef, "Choose full product list"); @@ -38,7 +38,7 @@ logout($sel); # The "QA‑Selenium‑TEST" product must be visible to him. log_in($sel, $config, 'QA_Selenium_TEST'); -$sel->click_ok("link=New"); +$sel->click_ok('//*[@class="link-file"]//a'); $sel->wait_for_page_to_load_ok(WAIT_TIME); $sel->title_is("Enter A Bug"); if ($sel->is_text_present('None of the above; my bug is in')) { @@ -48,8 +48,8 @@ if ($sel->is_text_present('None of the above; my bug is in')) { } $sel->click_ok('link=Other Products'); $sel->wait_for_page_to_load_ok(WAIT_TIME); -$sel->is_text_present_ok("QA-Selenium-TEST"); # For some unknown reason, Selenium doesn't like hyphens in links. +# $sel->is_text_present_ok("QA-Selenium-TEST"); # $sel->click_ok("link=QA-Selenium-TEST"); $sel->click_ok('//div[@id="choose_product"]//a[contains(@href, "QA-Selenium-TEST")]'); $sel->wait_for_page_to_load_ok(WAIT_TIME); diff --git a/qa/t/test_shutdown.t b/qa/t/test_shutdown.t index 33b9b426b..922307207 100644 --- a/qa/t/test_shutdown.t +++ b/qa/t/test_shutdown.t @@ -69,7 +69,7 @@ $sel->title_is("Parameters Updated"); # Accessing index.cgi should work again now. -$sel->click_ok("link=Home"); +$sel->click_ok('//*[@id="header-title"]//a'); $sel->wait_for_page_to_load_ok(WAIT_TIME); $sel->title_is("Bugzilla Main Page"); logout($sel); diff --git a/qa/t/test_status_whiteboard.t b/qa/t/test_status_whiteboard.t index 94582dd54..2252b2317 100644 --- a/qa/t/test_status_whiteboard.t +++ b/qa/t/test_status_whiteboard.t @@ -71,7 +71,7 @@ $sel->is_text_present_ok("2 bugs found"); set_parameters($sel, {'Bug Fields' => {'usestatuswhiteboard-off' => undef}}); # Show detailed bug information panel on advanced search ok($sel->create_cookie('TUI=information_query=1'), 'Show detailed bug information'); -$sel->click_ok("link=Search"); +$sel->click_ok('//*[@class="link-search"]//a'); $sel->wait_for_page_to_load_ok(WAIT_TIME); $sel->title_is("Search for bugs"); ok(!$sel->is_text_present("Whiteboard:"), "Whiteboard label no longer displayed"); diff --git a/qa/t/test_target_milestones.t b/qa/t/test_target_milestones.t index 6aa211428..7558f0525 100644 --- a/qa/t/test_target_milestones.t +++ b/qa/t/test_target_milestones.t @@ -68,7 +68,7 @@ ok($text =~ /OK, you have a new search named selenium_m0./, "New search named se set_parameters($sel, { "Bug Fields" => {"usetargetmilestone-off" => undef} }); -$sel->click_ok("link=Search"); +$sel->click_ok('//*[@class="link-search"]//a'); $sel->wait_for_page_to_load_ok(WAIT_TIME); $sel->title_is("Search for bugs"); ok(!$sel->is_text_present("Target Milestone:"), "The target milestone field is no longer displayed"); diff --git a/skins/standard/admin.css b/skins/standard/admin.css index fd0ff2808..0b9d3e740 100644 --- a/skins/standard/admin.css +++ b/skins/standard/admin.css @@ -324,6 +324,13 @@ input[disabled] { width: 70%; } +body.mfa-warning #mfa-select button { + outline: none; + border-color: #FF5300; + border-width: 1px; + box-shadow: 2px 2px 15px #FF5300; +} + .flex { display: flex; flex-flow: row; diff --git a/skins/standard/fonts/MaterialIcons-Regular.woff b/skins/standard/fonts/MaterialIcons-Regular.woff new file mode 100644 index 000000000..b648a3eea Binary files /dev/null and b/skins/standard/fonts/MaterialIcons-Regular.woff differ diff --git a/skins/standard/fonts/MaterialIcons-Regular.woff2 b/skins/standard/fonts/MaterialIcons-Regular.woff2 new file mode 100644 index 000000000..9fa211252 Binary files /dev/null and b/skins/standard/fonts/MaterialIcons-Regular.woff2 differ diff --git a/skins/standard/global.css b/skins/standard/global.css index 34d5ccc51..3b58c1d63 100644 --- a/skins/standard/global.css +++ b/skins/standard/global.css @@ -21,8 +21,19 @@ * Svetlana Harisova * Marc Schumann * Pascal Held + * Kohei Yoshino */ +/* fonts (begin) */ + @font-face{ + font-family: 'Material Icons'; + font-style: normal; + font-weight: 400; + src: url(fonts/MaterialIcons-Regular.woff2) format('woff2'), + url(fonts/MaterialIcons-Regular.woff) format('woff'); + } +/* fonts (end) */ + /* global (begin) */ body { font-family: sans-serif; @@ -41,106 +52,312 @@ /* header (begin) */ #header { - margin-bottom: 1em; + position: absolute; + top: 0; + left: 0; + z-index: 1000; + width: 100%; + border-bottom: 1px solid rgba(0, 0, 0, 0.2); + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); + color: #555; + background-color: #FFF; } - #header form, #header form input, - #footer form, #footer form input - { - font-size: 95%; - display: inline; + @media only screen and (min-device-width: 1024px) { + #header { + position: fixed; /* Make the header fixed on desktop */ + } } - #header .links { - border-left: 1px solid #747E93; - border-right: 1px solid #747E93; - border-bottom: 1px solid #747E93; - border-bottom-left-radius: 5px; - border-bottom-right-radius: 5px; - padding: 0.5em; + #header a, + #header a:visited, + #header a:hover { + color: #555; + text-decoration: none; } - #lang_links_container { - float: right; + #header a, + #header button, + #header input { + outline: 0; /* Hide outline on Chrome & Safari */ } - #lang_links_container .links { - border: none; - padding: .5em; + + #header button::-moz-focus-inner { + border: 0; /* Hide outline on Firefox */ } - .lang_current { - font-weight: bold; + #header button * { + pointer-events: none; /* Make sure button is clickable on Chrome & Safari */ } - #message { - border: 1px solid green; - margin: 0.3em 0em; - padding: 0.3em 0.5em; - color: green; + #header .inner { + display: flex; + align-items: center; + position: relative; + margin: 0 auto; + padding: 8px 0; + width: 1024px; + height: 32px; } - form.mini_login input.bz_login { - width: 10em; + #header .inner > * { + flex: none; + margin: 0 8px; } - form.mini_login input.bz_password { - width: 6em; + + #header .icon { + display: inline-block; + width: 24px; + font-size: 20px; + line-height: 1; + font-family: 'Material Icons'; + vertical-align: middle; + color: #777; } - form.mini_login input.bz_remember { - margin: 0; + + #header .title { + margin: 0 !important; + font-size: 20px; + font-weight: normal; } - .bz_mini_login_help { - color: #777; + + #header .title a, + #header .links a { + display: flex; + align-items: center; + border-radius: 4px; + padding: 0 8px; + height: 32px; + } + + #header .title a:hover, + #header .title a:focus, + #header .links a:hover, + #header .links a:focus, + #header-tools-menu-button:hover, + #header-tools-menu-button:focus, + #header .dropdown-content a.active { + background-color: rgba(0, 0, 0, .05) !important; } -/* header (end) */ + #header .title a:active, + #header .links a:active, + #header-tools-menu-button:active, + #header .dropdown-content a:active { + background-color: rgba(0, 0, 0, .1) !important; + } -/* banner (begin) */ - #banner { + #header form.quicksearch { + display: block; } -/* banner (end) */ + #header .searchbox-outer { + position: relative; + width: 240px; + height: 32px; + } -/* titles (begin) */ - #titles { + #header .searchbox-outer button { + 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 { + content: '\E8B6'; + } + + #header #quicksearch_top { + box-sizing: border-box; + border-color: rgba(0, 0, 0, .1); + border-radius: 4px; + padding: 0 8px 0 32px; width: 100%; - background-color: #404D6C; - color: #fff; - border-top-left-radius: 5px; - border-top-right-radius: 5px; - font-size: 110%; - margin: 0; - padding: 0.5em; - vertical-align: bottom; + height: 100%; + background-color: rgba(0, 0, 0, .05); + box-shadow: none; + font-size: 14px !important; + line-height: 32px; } - #titles a { - color: #fff; + #header #quicksearch_top:hover { + border-color: rgba(0, 0, 0, .2); + box-shadow: 0 0 2px rgba(0, 0 ,0, .2); } - #titles p { - margin: 0; + #header #quicksearch_top:focus { + border-color: #42a4e0; + background-color: transparent; + box-shadow: 0 0 0 2px rgba(73, 173, 227, .4); + } + + #header nav { + flex: auto !important; + display: flex; + align-items: center; + margin: 0 !important; + } + + #header .links { + flex: none; + display: flex; + font-size: 14px; + } + + #header .link-browse .icon::before { + content: '\E8EF'; + } + + #header .link-search .icon::before { + content: '\E8A0'; + } + + #header .link-file .icon::before { + content: '\E254'; + } + + #header .link-dashboard .icon::before { + content: '\E871'; + } + + #header .dropdown { + flex: none; + } + + #header .dropdown-button { + display: block; padding: 0; + color: inherit; + background: transparent; + box-shadow: none; } - #titles #title { - font-weight: bold; - white-space: nowrap; + #header-tools-menu-button { + width: 32px; + height: 32px; + border-radius: 4px; } - #titles #subtitle { - font-weight: normal; - width: 100%; - text-align: center; + #header-tools-menu-button .icon { + text-indent: -.7em; + letter-spacing: -.7em; } - #titles #information { - font-weight: normal; - text-align: right; - font-size: 90%; + #header-tools-menu-button .icon::before { + content: '\E5CC\E5CC'; + } + + #header-account-menu-button img { + display: block; + border-radius: 50%; + } + + #header-account-menu-button .icon::before { + font-size: 32px; + content: '\E853'; + } + + #header .dropdown-content { + top: calc(100% + 4px); + right: -4px; + border-color: #BBB #999 #777; + border-radius: 4px; + padding: 4px 0; + min-width: 160px; + max-width: 240px; + background-color: #FCFCFC; + box-shadow: 0 2px 8px rgba(0,0,0,.3); + } + + #header .dropdown-content::before, + #header .dropdown-content::after { + content: ''; + display: block; + width: 0; + height: 0; + position: absolute; + right: 10px; + border-width: 8px; + border-color: transparent; + border-style: solid; + } + + #header .dropdown-content::before { + top: -17px; + border-bottom-color: #BBB; + } + + #header .dropdown-content::after { + top: -16px; + border-bottom-color: #FFF; + } + + #header .dropdown-content a, + #header .dropdown-content li > div { + padding: 2px 16px; + line-height: 1.5; + white-space: normal; + background-color: transparent; + } + + #header .account-label * { + overflow: hidden; white-space: nowrap; + text-overflow: ellipsis; } -/* titles (end) */ + #header .account-label .name { + font-size: 16px; + } + + #header .account-label .email { + font-size: 12px; + color: #666; + } + + #header .dropdown-separator { + height: 0; + margin: 4px 0; + border-color: #BBB; + } + + #header-login .mini-popup { + position: absolute; + top: 48px; + right: 0; + display: flex; + align-items: center; + padding: 8px; + background-color: #FFF; + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); + } + + #header-login .mini-popup form { + display: flex; + align-items: center; + } + + #header-login .mini-popup input { + margin: 0 4px; + } + + #header-login .mini-popup .close-button { + padding: 0; + width: 32px; + justify-content: center; + text-align: center; + } + + #header-login .mini-popup .close-button .icon::before { + content: '\E5CD'; + } +/* header (end) */ /* footer (begin) * See also the "header" section for styles that apply @@ -149,9 +366,9 @@ #footer { display: flex; clear: both; - margin: 2em 0 0; + margin: 15px 0 0; border-top: 1px solid rgba(0, 0, 0, 0.1); - padding: 2em; + padding: 8px; color: #bbb; background-color: #fff; line-height: 1.5; @@ -161,8 +378,13 @@ flex: none; display: flex; align-items: center; - width: 25%; - min-width: 20em; + border-right: 1px solid #DDD; + padding: 16px 24px 16px 16px; + } + + #footer .org-links { + display: flex; + align-items: center; } #footer .org-links h1 { @@ -182,7 +404,7 @@ #footer .org-links ul { display: flex; - margin: .5em 0 0; + margin: 0 0 0 16px; padding: 0; } @@ -191,7 +413,7 @@ } #footer .org-links li:not(:last-child) { - margin-right: 1.5em; + margin-right: 16px; } #footer #useful-links { @@ -199,7 +421,7 @@ display: flex; flex-direction: column; justify-content: center; - margin: 0; + margin: 0 0 0 24px; padding: 0; } @@ -221,20 +443,6 @@ #footer .links { vertical-align: top; } - - #footer .links .quicksearch_form { - display: none; - } - - #footer .form { - display: block; - margin-top: 1em; - } - - #footer .form input { - padding: 1px 2px; - margin-top: 3px; - } /* footer (end) */ /* link lists (begin) */ @@ -879,11 +1087,11 @@ body, td, th, input, select, option, optgroup, button, .text_input { font-family: "Fira Sans", "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif; } -a, #header a, #header a:visited, #footer a, #footer a:visited { +a, #footer a, #footer a:visited { color: #0095dd; } -a:hover, #header a:hover, #footer a:hover { +a:hover, #footer a:hover { color: #00539f; } @@ -928,189 +1136,31 @@ hr { display: none; } -#header { - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - background: #e5e3dc; - background: -moz-linear-gradient(#e5e3dc, #ecebe5); - background: -webkit-linear-gradient(#e5e3dc, #ecebe5); - background: linear-gradient(#e5e3dc, #ecebe5); - border-radius: 0; - border-bottom: 1px solid rgba(0, 0, 0, 0.2); - border-top: 2px solid rgb(255, 255, 255); - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); - margin: -15px -15px 0 -15px; -} - #mfa-warning { - outline: none; - border-color: #FF5300; - border-width: 1px; - box-shadow: 2px 2px 15px #FF5300; - color: black; - padding: 2px 2px 2px 2px; -} - -body.mfa-warning #mfa-select button { - outline: none; - border-color: #FF5300; - border-width: 1px; - box-shadow: 2px 2px 15px #FF5300; -} - - -#header .subheader { - text-align: left; - padding-left: 10px; -} - -#header .wrapper { - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - margin: -1px auto 0px; - width: 99%; -} - -#header .wrapper:after { - clear: both; - content: "."; - display: block; - height: 0; - visibility: hidden; -} - -#titles { - width: 100%; - background-color: transparent; - padding: 0 1em 0 1em; -} - -#information { - text-align: left; - padding-left: 2em; -} - -#title { - width: 150px; - font-size: 120%; -} - -#moz_login { - text-align: right; - color: #404040; -} - -#header .links { - background: transparent; - border: none; - border-radius: 0; - color: #404040; - position: relative; - width: 50%; -} - -#header .links { - width: auto; -} - -.login-links ul { -} - -.login-links li { - display: inline; -} - -.links a { - margin: 0 10px 0 10px; -} - -.links .home { - font-weight: bold; -} - -.links .separator { - display: none; -} - -#quicksearch_top, #quicksearch_main { - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - background: url(search.png) 5px center no-repeat, #fafafa; - background: url(search.png) 5px center no-repeat, -moz-linear-gradient(#fafafa, #fff); - background: url(search.png) 5px center no-repeat, -webkit-linear-gradient(#fafafa, #fff); - background: url(search.png) 5px center no-repeat, linear-gradient(#fafafa, #fff); - padding: .4em 1em .45em 26px; - width: 200px; -} - -#header .form a { - margin: 0; -} - -.links .dropdown { - background: rgba(0, 0, 0, 0.05); - border: 1px solid rgba(0, 0, 0, 0.1); - border-radius: .25em; - display: inline-block; - padding: 4px 8px; - position: relative; - cursor: default; -} - -.links .dropdown .anchor { - background-image: url(../../images/dropdown.png); - background-position: right center; - background-repeat: no-repeat; - display: inline-block; - min-width: 110px; - padding-right: 15px; -} - -.links .dropdown ul { - background: #fafafa; - border: 1px solid rgba(0, 0, 0, 0.2); - border-radius: 0 0 .25em .25em; - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); - display: none; - padding: 4px; - position: absolute; - right: -1px; - margin-top: 4px; - z-index: 2; - text-align: left; -} - -.links .dropdown:hover ul { - display: block; -} - -.links .dropdown li { - display: block; -} - -.links .dropdown:hover { - border-bottom-right-radius: 0; -} - -.links .dropdown li { - display: block; + margin: 0 -15px; + padding: 10px 15px; + color: #FFF; + background-color: #FF5300; } #bugzilla-body { background: none; border: none; color: #404040; - margin: 10px auto 15px; - padding: 0; - width: 99%; + margin: 15px auto; } #bugzilla-body th { white-space: nowrap; } +#message { + border: 1px solid green; + margin: 0.3em 0em; + padding: 0.3em 0.5em; + color: green; +} + /* Home */ /*#page-index { @@ -1457,10 +1507,6 @@ table.edit_form hr { padding: 2px 2px 2px 1px; } -#links-actions, #links-saved { - margin-left: -10px; -} - button, input[type=submit], input[type=button], #commit, #commit_top, #header .btn, #header input[type=submit] { background-color: #43a6e2; background-image: -moz-linear-gradient(#43a6e2,#277ac1); @@ -1591,7 +1637,7 @@ table.tabs { body { margin: 0; - padding: 15px; + padding: 50px 15px 15px; } #header .btn, #header .txt { @@ -1654,3 +1700,54 @@ a.controller { .vcard a .fn:after, .vcard a .ln:after { content: ' \25BE'; } + +/******************/ +/* Dropdown Menus */ +/******************/ + +/* The container
    - needed to position the dropdown content */ +.dropdown { + position: relative; + display: inline-block; +} + +/* Dropdown Content (Hidden by Default) */ +.dropdown-content { + position: absolute; + background-color: #eee; + min-width: 120px; + z-index: 1; + text-align: left; + margin: 0; + padding: 0; + border: 1px solid #ddd; + -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1); + -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1); + box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1); + list-style: none; + right: 0px; +} + +.dropdown-content.menu-up { + bottom: 100%; +} + +.dropdown-separator { + border-bottom: 1px solid #ddd; +} + +/* Links inside the dropdown */ +.dropdown-content a { + white-space: nowrap; + background-color: #eee; + color: black !important; + padding: 4px 8px; + text-decoration: none !important; + display: block; +} + +/* Change color of dropdown links on hover */ +.dropdown-content li .active { + text-decoration: none; + background-color: #39f; +} diff --git a/skins/standard/index.css b/skins/standard/index.css index f7533c6c4..9fe9202db 100644 --- a/skins/standard/index.css +++ b/skins/standard/index.css @@ -18,6 +18,7 @@ #page-index { + margin: 50px 0; padding: 0.2em 0.2em 0.15em 0.2em; max-width: none; } diff --git a/t/bmo/passwords.t b/t/bmo/passwords.t index 249cdfb3c..83bea60be 100644 --- a/t/bmo/passwords.t +++ b/t/bmo/passwords.t @@ -198,7 +198,7 @@ sub click_and_type { my ($sel, $name, $text) = @_; eval { - my $el = $sel->find_element(qq{//input[\@name="$name"]}, 'xpath'); + my $el = $sel->find_element(qq{//*[\@id="bugzilla-body"]//input[\@name="$name"]}, 'xpath'); $el->click(); $sel->send_keys_to_active_element($text); pass("found $name and typed $text"); @@ -244,7 +244,7 @@ sub login { $sel->title_is("Log in to Bugzilla"); click_and_type($sel, 'Bugzilla_login', $login); click_and_type($sel, 'Bugzilla_password', $password); - submit($sel, '//input[@name="GoAheadAndLogIn"]'); + submit($sel, '//*[@id="bugzilla-body"]//input[@name="GoAheadAndLogIn"]'); } sub login_ok { diff --git a/template/en/default/account/auth/login-small.html.tmpl b/template/en/default/account/auth/login-small.html.tmpl index 1f38f18b7..a64384c98 100644 --- a/template/en/default/account/auth/login-small.html.tmpl +++ b/template/en/default/account/auth/login-small.html.tmpl @@ -31,7 +31,6 @@ [% login_target = urlbase _ login_target %]
  • - | [% connector = "?" %] [% IF cgi.request_method == "GET" AND cgi.query_string %] [% connector = "&" %] @@ -40,37 +39,38 @@ +
  • - | Forgot Password -
    - - - + + + - [x] + + +
    +
    • diff --git a/template/en/default/global/common-links.html.tmpl b/template/en/default/global/common-links.html.tmpl deleted file mode 100644 index c2c054b24..000000000 --- a/template/en/default/global/common-links.html.tmpl +++ /dev/null @@ -1,57 +0,0 @@ -[%# The contents of this file are subject to the Mozilla Public - # License Version 1.1 (the "License"); you may not use this file - # except in compliance with the License. You may obtain a copy of - # the License at http://www.mozilla.org/MPL/ - # - # Software distributed under the License is distributed on an "AS - # IS" basis, WITHOUT WARRANTY OF ANY KIND, either express or - # implied. See the License for the specific language governing - # rights and limitations under the License. - # - # The Original Code is the Bugzilla Bug Tracking System. - # - # The Initial Developer of the Original Code is Netscape Communications - # Corporation. Portions created by Netscape are - # Copyright (C) 1998 Netscape Communications Corporation. All - # Rights Reserved. - # - # Contributor(s): Gervase Markham - # Svetlana Harisova - #%] - -[% DEFAULT qs_suffix = "" %] -[% USE Bugzilla %] - -
      -
    • Home
      • -
    • | New
      • -
    • | Browse
      • -
    • | Search
      • - -
    • - | -
      - - - [%-# Work around FF bug: keep this on one line %]
      - [help] -
      • - -
    • | Reports
      • - - [% Hook.process('action-links') %] - -
    - -[% Hook.process("link-row") %] -[% BLOCK link_to_documentation %] - [% IF doc_section && Param('docs_urlbase') %] -
  • - | - Help -
    • - [% END %] -[% END %] diff --git a/template/en/default/global/header.html.tmpl b/template/en/default/global/header.html.tmpl index 90cdbd4e8..a7aed895e 100644 --- a/template/en/default/global/header.html.tmpl +++ b/template/en/default/global/header.html.tmpl @@ -19,6 +19,7 @@ # Vaskin Kissoyan # Vitaly Harisov # Svetlana Harisova + # Kohei Yoshino #%] [%# INTERFACE: @@ -90,8 +91,7 @@ # value of title anyway. To get around that problem we explicitly # set header's default value here only if it is undefined. %] [% IF !header.defined %][% header = title %][% END %] - + [%- js_BUGZILLA = { @@ -124,6 +124,7 @@ END; %] + @@ -173,7 +174,7 @@ [% FOREACH jq_name = jquery.unique %] [% starting_js_urls.push("js/jquery/plugins/$jq_name/${jq_name}-min.js") %] [% END %] - [% starting_js_urls.push('js/global.js') %] + [% starting_js_urls.push('js/global.js', 'js/dropdown.js') %] [% FOREACH asset_url = concatenate_js(starting_js_urls) %] [% PROCESS format_js_link %] @@ -244,96 +245,148 @@ # 'bannerhtml' #%] - [%# header %] + [%# header %] + +[% IF Bugzilla.request_cache.mfa_warning + AND user.mfa_required_date + AND NOT Bugzilla.request_cache.on_mfa_page %] + +[% END %]
    diff --git a/template/en/default/global/useful-links.html.tmpl b/template/en/default/global/useful-links.html.tmpl index 467719028..90a3268cb 100644 --- a/template/en/default/global/useful-links.html.tmpl +++ b/template/en/default/global/useful-links.html.tmpl @@ -26,10 +26,6 @@ [% PROCESS global/variables.none.tmpl %]