JGonera has uploaded a new change for review.
https://gerrit.wikimedia.org/r/130240
Change subject: Tweaks and fixes to the Compact Personal Bar
......................................................................
Tweaks and fixes to the Compact Personal Bar
* Change markup and simplify transitions to make them less janky
* Talk icon outside of CPB (no count)
* Watchlist icon outside of CPB (no count)
* Row height increase
Change-Id: Ia8ba8efd2e4539e2495a084aa889827822efad6e
---
M resources/compactPersonalBar/compactPersonalBar.js
M resources/compactPersonalBar/compactPersonalBar.less
2 files changed, 83 insertions(+), 55 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/VectorBeta
refs/changes/40/130240/1
diff --git a/resources/compactPersonalBar/compactPersonalBar.js
b/resources/compactPersonalBar/compactPersonalBar.js
index 224b7fe..c8d6dd4 100644
--- a/resources/compactPersonalBar/compactPersonalBar.js
+++ b/resources/compactPersonalBar/compactPersonalBar.js
@@ -27,7 +27,8 @@
function CompactMenu( name, groups ) {
var self = this;
- this.$el = $( '<ul>' );
+ this.$list = $( '<ul>' );
+ this.$el = $( '<div>' ).append( this.$list );
this.name = name;
this.order = groups;
this.items = {};
@@ -58,18 +59,23 @@
CompactMenu.prototype.render = function() {
var self = this;
- // we don't have to do this.$el.empty() because elements won't
get cloned
- // anyway (plus empty() would remove all click tracking
callbacks)
+ if ( this.items['heading'] ) {
+ this.$el.prepend( this.items['heading'][0] );
+ }
+ // we don't have to do this.$list.empty() because elements
won't get cloned
+ // anyway (plus empty() would remove all click tracking
callbacks)
$.each( this.order, function() {
- $.each( self.items[this], function() {
- self.$el.append( this );
- } );
+ if ( this !== 'heading' ) {
+ $.each( self.items[this], function() {
+ self.$list.append( this );
+ } );
+ }
} );
};
bar = new CompactMenu( 'compact-bar', ['main'] );
- menu = new CompactMenu( 'compact-flyout', ['user', 'interactions',
'portlets', 'preferences', 'end'] );
+ menu = new CompactMenu( 'compact-flyout', ['heading', 'interactions',
'portlets', 'preferences', 'end'] );
mw.util.addPortletLink = function( portlet, href, text, id, tooltip,
accesskey ) {
var $a, $li;
@@ -105,7 +111,7 @@
var $barContainer = $( '#p-personal' );
menu.
- addItem( 'user', 'user-page', $( '#pt-userpage' ) ).
+ addItem( 'heading', 'user-page', $( '#pt-userpage'
).find( 'a' ) ).
addItem( 'interactions', 'contributions', $(
'#pt-mycontris' ) ).
// notifications item can't be simply cloned, markup
has to be changed
// and label added
@@ -115,8 +121,8 @@
count: $( '#pt-notifications' ).text(),
href: $( '#pt-notifications' ).find( 'a'
).attr( 'href' )
} ) ).
- addItem( 'interactions', 'talk', $( '#pt-mytalk' ) ).
- addItem( 'interactions', 'watchlist', $(
'#pt-watchlist' ) ).
+ addItem( 'interactions', 'talk', $( '#pt-mytalk'
).clone().attr( 'id', 'pt-mytalk-flyout' ) ).
+ addItem( 'interactions', 'watchlist', $(
'#pt-watchlist' ).clone().attr( 'id', 'pt-watchlist-flyout' ) ).
addItem( 'preferences', 'preferences', $(
'#pt-preferences' ) ).
addItem( 'preferences', 'beta', $( '#pt-betafeatures' )
).
addItem( 'end', 'privacy', createItem( {
@@ -131,6 +137,8 @@
bar.
addItem( 'main', 'language', $( '#pt-uls' ) ).
+ addItem( 'main', 'watchlist', $( '#pt-watchlist' ) ).
+ addItem( 'main', 'talk', $( '#pt-mytalk' ) ).
addItem( 'main', 'notifications', $(
'#pt-notifications' ) ).
addItem( 'main', null, menu.$el.wrap( '<li
id="pt-flyout">' ).parent() );
diff --git a/resources/compactPersonalBar/compactPersonalBar.less
b/resources/compactPersonalBar/compactPersonalBar.less
index d39404d..b75e81a 100644
--- a/resources/compactPersonalBar/compactPersonalBar.less
+++ b/resources/compactPersonalBar/compactPersonalBar.less
@@ -17,24 +17,51 @@
padding: 0;
}
+ li {
+ // FIXME: overrides for Vector styles
+ margin-top: 0;
+ }
+
#pt-flyout {
// FIXME: overrides for Vector styles
- margin-top: .1em;
+ margin-top: .2em;
padding: 0 .2em;
border: 1px solid #ccc;
border-radius: 3px;
- .transition(0s (@fadeDuration + @fadeDelay));
+ .transition(background @fadeDuration @fadeDelay, border-color
@fadeDuration @fadeDelay;);
&:hover {
border-color: #aaa;
background: #fff;
-
- .transition(background @fadeDuration @fadeDelay,
border-color @fadeDuration @fadeDelay;);
}
- li {
+ ul {
+ // can't use display: none because it's not animatable
+ max-height: 0;
+ opacity: 0;
+ overflow: hidden;
+
+ .transition(max-height @fadeDuration @fadeDelay,
opacity @fadeDuration @fadeDelay;);
+ }
+
+ &:hover ul {
+ max-height: 30em;
+ opacity: 1;
+ }
+
+ a {
+ display: block;
+ padding: .5em 2.1em;
+ border-radius: 2px;
+ color: #000;
+ text-decoration: none;
+ background-size: 24px 24px;
+ background-repeat: no-repeat;
+ }
+
+ li {
// FIXME: overrides for Vector styles
float: none;
font-size: 1em;
@@ -42,31 +69,9 @@
padding: 0 !important;
background: none;
- a {
- display: block;
- padding: .4em 2.1em;
- border-radius: 2px;
- color: #000;
- text-decoration: none;
- background-size: 24px 24px;
- background-repeat: no-repeat;
- }
- }
-
- // more widely supported than li:not(:first-child)
- li:first-child ~ li {
- // can't use display: none because it's not animatable
- max-height: 0;
- visibility: none;
- opacity: 0;
- overflow: hidden;
-
- // needed for the transition to work properly, see also
:hover
&.group-start {
- border-top: 0 solid #ededed;
+ border-top: 1px solid #ededed;
}
-
- .transition(0s (@fadeDuration + @fadeDelay));
a {
margin: .2em 0;
@@ -75,8 +80,8 @@
display: inline-block;
float: right;
width: 1.6em;
- padding: .2em 0;
- margin: -.2em -1.6em 0 0;
+ padding: .3em 0;
+ margin: -.3em -1.6em 0 0;
text-align: center;
font-weight: bold;
color: #aaa;
@@ -94,22 +99,37 @@
}
}
}
-
- &:hover li:first-child ~ li {
- max-height: 9999px;
- visibility: visible;
- opacity: 1;
-
- &.group-start {
- border-top-width: 1px;
- }
-
- .transition(border-top 0s @fadeDelay, max-height 0s
@fadeDelay, opacity @fadeDuration @fadeDelay;);
- }
}
}
-#pt-userpage a {
+#pt-watchlist a, #pt-mytalk a {
+ // FIXME: overrides for yellow bar
+ background-color: transparent !important;
+ padding: 0 !important;
+
+ display: block;
+ text-indent: -9999px;
+ overflow: hidden;
+ width: 32px;
+ height: 32px;
+ background-size: 32px 32px;
+}
+
+#pt-notifications a {
+ // FIXME: overrides for weird echo badge styling
+ display: block;
+ margin: .55em .8em 0 .5em !important;
+}
+
+#pt-watchlist a {
+ .background-image-svg("images/watchlist.svg", "images/watchlist.png");
+}
+
+#pt-mytalk a {
+ .background-image-svg("images/talk.svg", "images/talk.png");
+}
+
+#pt-flyout div > a {
.background-image-svg("images/user.svg", "images/user.png");
}
@@ -121,11 +141,11 @@
.background-icon("notifications");
}
-#pt-mytalk a {
+#pt-mytalk-flyout a {
.background-icon("talk");
}
-#pt-watchlist a {
+#pt-watchlist-flyout a {
.background-icon("watchlist");
}
--
To view, visit https://gerrit.wikimedia.org/r/130240
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ia8ba8efd2e4539e2495a084aa889827822efad6e
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/VectorBeta
Gerrit-Branch: master
Gerrit-Owner: JGonera <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
