jenkins-bot has submitted this change and it was merged. ( https://gerrit.wikimedia.org/r/366731 )
Change subject: Bring menu tab appearance closer to standard widgets ...................................................................... Bring menu tab appearance closer to standard widgets Bringing appearance and behaviour closer to standard widget like DropdownWidget: - Amending color to be (closest) aligned to WikimediaUI color palette, but switch normal and `:hover`/`:focus` state in order not to be too disruptive of a change and align with rest of Vector tabs, - removing obsolete JS functionality as IE 6 as only major browser affected does receive the menu items as tabs nonetheless and replacing with simple CSS selector, - removing unnecessary and obsolete images and - Lessifying selector Bug: T153043 Change-Id: Ia15480162bb8f923d0e9b6e42ca90c2c880978de --- M components/tabs.less D images/arrow-down-focus-icon.png D images/arrow-down-focus-icon.svg D images/arrow-down-icon.png D images/arrow-down-icon.svg A images/arrow-down.png A images/arrow-down.svg M vector.js 8 files changed, 25 insertions(+), 26 deletions(-) Approvals: Krinkle: Looks good to me, approved jenkins-bot: Verified diff --git a/components/tabs.less b/components/tabs.less index 2d21b85..ab5f96b 100644 --- a/components/tabs.less +++ b/components/tabs.less @@ -153,9 +153,9 @@ background-position: bottom right; font-size: 1em; height: 2.5em; - // This effectively moves the "background border" outside of the element to act like a real - // border. It is necessary for the dropdown (div.vectorMenu div.menu) to align well. - padding-right: 1px; + // `padding-right` >= `1px` effectively moves the "background border" outside of the element to act like a real + // border. It is necessary for `div.vectorMenu div.menu` dropdown to align well. + padding-right: 0.5em; // equals `8px` as visually harmonically with `padding-left` in `div.vectorMenu h3 span` margin-right: -1px; .vector-nav-directionality & { @@ -163,21 +163,25 @@ } } -div.vectorMenu h3 span { - display: block; - font-size: 0.8em; - padding-left: 0.7em; - padding-top: 1.25em; - padding-right: 20px; - font-weight: normal; - color: @menu-main-heading-color; - .background-image-svg('images/arrow-down-icon.svg', 'images/arrow-down-icon.png'); - background-position: 100% 100%; - background-repeat: no-repeat; -} +div.vectorMenu h3 { + span { + display: block; + font-size: 0.8em; + padding-left: 0.7em; + padding-top: 1.25em; + padding-right: 16px; + font-weight: normal; + color: @content-font-color; + .background-image-svg('images/arrow-down.svg', 'images/arrow-down.png'); + background-position: 100% 87%; + background-repeat: no-repeat; + opacity: 0.85; // equals `#434343` on `#fff` background, closest to `#444` + } -div.vectorMenuFocus h3 span { - .background-image-svg('images/arrow-down-focus-icon.svg', 'images/arrow-down-focus-icon.png'); + &:hover span, + &:focus span { + opacity: 1; + } } div.vectorMenu div.menu { diff --git a/images/arrow-down-focus-icon.png b/images/arrow-down-focus-icon.png deleted file mode 100644 index aa60358..0000000 --- a/images/arrow-down-focus-icon.png +++ /dev/null Binary files differ diff --git a/images/arrow-down-focus-icon.svg b/images/arrow-down-focus-icon.svg deleted file mode 100644 index 826c280..0000000 --- a/images/arrow-down-focus-icon.svg +++ /dev/null @@ -1 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="22" height="16"><path d="M15.502 6.001l-5 5.001-5-5.001z" fill="#929292"/></svg> \ No newline at end of file diff --git a/images/arrow-down-icon.png b/images/arrow-down-icon.png deleted file mode 100644 index 5c7f8af..0000000 --- a/images/arrow-down-icon.png +++ /dev/null Binary files differ diff --git a/images/arrow-down-icon.svg b/images/arrow-down-icon.svg deleted file mode 100644 index 8e31b2f..0000000 --- a/images/arrow-down-icon.svg +++ /dev/null @@ -1 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="22" height="16"><path d="M15.502 6.001l-5 5.001-5-5.001z" fill="#797979"/></svg> \ No newline at end of file diff --git a/images/arrow-down.png b/images/arrow-down.png new file mode 100644 index 0000000..8ad3de2 --- /dev/null +++ b/images/arrow-down.png Binary files differ diff --git a/images/arrow-down.svg b/images/arrow-down.svg new file mode 100644 index 0000000..1988df1 --- /dev/null +++ b/images/arrow-down.svg @@ -0,0 +1,4 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"> + <path d="M11.05 3.996l-.965-1.053-4.035 3.86-3.947-3.86L1.05 3.996l5 5 5-5" fill="#222"/> +</svg> diff --git a/vector.js b/vector.js index e26cbc9..1fb758b 100644 --- a/vector.js +++ b/vector.js @@ -38,13 +38,6 @@ $el.toggleClass( 'menuForceShow' ); e.preventDefault(); } - } ) - // When the heading has focus, also set a class that will change the arrow icon - .focus( function () { - $el.addClass( 'vectorMenuFocus' ); - } ) - .blur( function () { - $el.removeClass( 'vectorMenuFocus' ); } ); } ); -- To view, visit https://gerrit.wikimedia.org/r/366731 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: merged Gerrit-Change-Id: Ia15480162bb8f923d0e9b6e42ca90c2c880978de Gerrit-PatchSet: 8 Gerrit-Project: mediawiki/skins/Vector Gerrit-Branch: master Gerrit-Owner: VolkerE <volke...@wikimedia.org> Gerrit-Reviewer: Jdlrobson <jrob...@wikimedia.org> Gerrit-Reviewer: Jforrester <jforres...@wikimedia.org> Gerrit-Reviewer: Krinkle <krinklem...@gmail.com> Gerrit-Reviewer: Niedzielski <sniedziel...@wikimedia.org> Gerrit-Reviewer: VolkerE <volke...@wikimedia.org> Gerrit-Reviewer: jenkins-bot <> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits