jenkins-bot has submitted this change and it was merged. (
https://gerrit.wikimedia.org/r/403844 )
Change subject: Truncate page name in the sidebar and organize into table view
......................................................................
Truncate page name in the sidebar and organize into table view
Organize into table view for consistency and truncate the title.
Bug: T184143
Change-Id: I0ae3105ea60dcc2ae6c0f7f2545368a5f86cb2c4
---
M modules/styles/mw.echo.ui.PageFilterWidget.less
M modules/styles/mw.echo.ui.PageNotificationsOptionWidget.less
M modules/ui/mw.echo.ui.PageNotificationsOptionWidget.js
3 files changed, 54 insertions(+), 11 deletions(-)
Approvals:
Sbisson: Looks good to me, approved
jenkins-bot: Verified
diff --git a/modules/styles/mw.echo.ui.PageFilterWidget.less
b/modules/styles/mw.echo.ui.PageFilterWidget.less
index 8f22f27..ec60bc6 100644
--- a/modules/styles/mw.echo.ui.PageFilterWidget.less
+++ b/modules/styles/mw.echo.ui.PageFilterWidget.less
@@ -3,6 +3,7 @@
margin-top: 2 * @specialpage-separation-unit;
&-title {
+ padding-left: 0.5em;
font-weight: bold;
}
}
diff --git a/modules/styles/mw.echo.ui.PageNotificationsOptionWidget.less
b/modules/styles/mw.echo.ui.PageNotificationsOptionWidget.less
index abbb7fa..fc36afb 100644
--- a/modules/styles/mw.echo.ui.PageNotificationsOptionWidget.less
+++ b/modules/styles/mw.echo.ui.PageNotificationsOptionWidget.less
@@ -26,25 +26,56 @@
}
}
+ &-table {
+ display: table;
+ width: 100%;
+ }
+
+ &-row {
+ display: table-row;
+ }
+
+ &-cell {
+ display: table-cell;
+ vertical-align: middle;
+ }
+
&.oo-ui-iconElement &-icon {
- float: left;
+ width: 1em;
+
.oo-ui-iconElement-icon {
- position: static;
display: inline-block;
+ position: relative;
+ margin-top: 0.1em;
}
}
&-title {
- padding: 0.2em 0 0.2em 0.5em;
+ padding: 0;
+ width: 100%;
+ line-height: 1em;
+
+ &-label {
+ display: inline-block;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ // Sidebar width - icon width - twice padding - counter
average width
+ max-width: calc( @specialpage-sidebar-width - 1.865em -
2 * @specialpage-separation-unit - 2em );
+ }
}
&-count {
+ width: 1em;
+ }
+
+ &-label-count {
background-color: #eaecf0;
color: @grey-medium;
- float: right;
padding: 0.2em 0.5em;
margin-left: 0.5em;
border-radius: 2px;
+ white-space: nowrap;
.oo-ui-optionWidget-selected & {
background: none; // `background-color: transparent`
would be the goto value, but IE 8-9 introduces a bug
diff --git a/modules/ui/mw.echo.ui.PageNotificationsOptionWidget.js
b/modules/ui/mw.echo.ui.PageNotificationsOptionWidget.js
index a4ac6bd..ecf4c79 100644
--- a/modules/ui/mw.echo.ui.PageNotificationsOptionWidget.js
+++ b/modules/ui/mw.echo.ui.PageNotificationsOptionWidget.js
@@ -13,7 +13,7 @@
* @cfg {boolean} [isCapped] The count for this widget is capped
*/
mw.echo.ui.PageNotificationsOptionWidget = function
MwEchoUiPageNotificationsOptionWidget( config ) {
- var countLabel;
+ var countLabel, $row;
config = config || {};
@@ -37,21 +37,32 @@
label: countLabel
} );
+ $row = $( '<div>' )
+ .addClass(
'mw-echo-ui-pageNotificationsOptionWidget-row' )
+ .append(
+ $( '<div>' )
+ .addClass(
'mw-echo-ui-pageNotificationsOptionWidget-cell' )
+ .addClass(
'mw-echo-ui-pageNotificationsOptionWidget-title' )
+ .append( this.$label ),
+ $( '<div>' )
+ .addClass(
'mw-echo-ui-pageNotificationsOptionWidget-cell' )
+ .addClass(
'mw-echo-ui-pageNotificationsOptionWidget-count' )
+ .append( this.unreadCountLabel.$element
)
+ );
+
// Initialization
this.$element
.addClass( 'mw-echo-ui-pageNotificationsOptionWidget' )
.append(
$( '<div>' )
- .addClass(
'mw-echo-ui-pageNotificationsOptionWidget-count' )
- .append( this.unreadCountLabel.$element
),
- $( '<div>' )
- .addClass(
'mw-echo-ui-pageNotificationsOptionWidget-title' )
- .append( this.$label )
+ .addClass(
'mw-echo-ui-pageNotificationsOptionWidget-table' )
+ .append( $row )
);
if ( this.getIcon() ) {
- this.$element.prepend(
+ $row.prepend(
$( '<div>' )
+ .addClass(
'mw-echo-ui-pageNotificationsOptionWidget-cell' )
.addClass(
'mw-echo-ui-pageNotificationsOptionWidget-icon' )
.append( this.$icon )
);
--
To view, visit https://gerrit.wikimedia.org/r/403844
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I0ae3105ea60dcc2ae6c0f7f2545368a5f86cb2c4
Gerrit-PatchSet: 4
Gerrit-Project: mediawiki/extensions/Echo
Gerrit-Branch: master
Gerrit-Owner: Mooeypoo <[email protected]>
Gerrit-Reviewer: Sbisson <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
