[MediaWiki-commits] [Gerrit] Tweaks and fixes to the Compact Personal Bar - change (mediawiki...VectorBeta)
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 @@
[MediaWiki-commits] [Gerrit] Tweaks and fixes to the Compact Personal Bar - change (mediawiki...VectorBeta)
jenkins-bot has submitted this change and it was merged.
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(-)
Approvals:
Jdlrobson: Looks good to me, approved
jenkins-bot: Verified
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 {
+
[MediaWiki-commits] [Gerrit] Tweaks and fixes to the Compact Personal Bar - change (mediawiki...VectorBeta)
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;
}
+
