JGonera has uploaded a new change for review.
https://gerrit.wikimedia.org/r/130790
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
* Echo badge alignment
Change-Id: Ia8ba8efd2e4539e2495a084aa889827822efad6e
---
M resources/compactPersonalBar/compactPersonalBar.js
M resources/compactPersonalBar/compactPersonalBar.less
2 files changed, 95 insertions(+), 56 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/VectorBeta
refs/changes/90/130790/1
diff --git a/resources/compactPersonalBar/compactPersonalBar.js
b/resources/compactPersonalBar/compactPersonalBar.js
index dc87b56..b882f64 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', 'info', 'end'] );
+ menu = new CompactMenu( 'compact-flyout', ['heading', 'interactions',
'portlets', 'preferences', 'info', '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( 'info', '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..a298e79 100644
--- a/resources/compactPersonalBar/compactPersonalBar.less
+++ b/resources/compactPersonalBar/compactPersonalBar.less
@@ -17,24 +17,53 @@
padding: 0;
}
- #pt-flyout {
+ li {
// FIXME: overrides for Vector styles
- margin-top: .1em;
+ margin-top: 0;
+ }
+ #pt-flyout {
+ // prevent bar elements from jumping when flyout expanded
+ max-height: 2.2em;
+ }
+
+ #pt-flyout > div {
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 +71,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 +82,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 +101,46 @@
}
}
}
-
- &: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 {
+#p-personal > div > ul > li {
+ vertical-align: middle;
+ display: inline-block;
+ float: none;
+}
+
+#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 {
+ // FIXME: overrides for weird echo badge styling
+ margin: 0 .8em 0 1.6em !important;
+
+ a {
+ display: block;
+ }
+}
+
+#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 +152,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/130790
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: wmf/1.24wmf2
Gerrit-Owner: JGonera <jgon...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
