VolkerE has uploaded a new change for review. (
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(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/skins/Vector
refs/changes/31/366731/1
diff --git a/components/tabs.less b/components/tabs.less
index 4cc4625..3bf3db1 100644
--- a/components/tabs.less
+++ b/components/tabs.less
@@ -138,27 +138,31 @@
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;
}
-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: 1.25em;
+ font-weight: normal;
+ color: @content-font-color;
+ .background-image-svg('images/arrow-down.svg',
'images/arrow-down.png');
+ background-position: 100% 85%;
+ 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 f0b806a..78c9fcf 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.find( '> span' ).addClass(
'vectorMenuFocus' );
- } )
- .blur( function () {
- $el.find( '> span' ).removeClass(
'vectorMenuFocus' );
} );
} );
--
To view, visit https://gerrit.wikimedia.org/r/366731
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ia15480162bb8f923d0e9b6e42ca90c2c880978de
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/skins/Vector
Gerrit-Branch: master
Gerrit-Owner: VolkerE <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
