Mooeypoo has uploaded a new change for review. (
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.PageNotificationsOptionWidget.less
M modules/ui/mw.echo.ui.PageNotificationsOptionWidget.js
2 files changed, 45 insertions(+), 8 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/Echo
refs/changes/44/403844/1
diff --git a/modules/styles/mw.echo.ui.PageNotificationsOptionWidget.less
b/modules/styles/mw.echo.ui.PageNotificationsOptionWidget.less
index abbb7fa..3c05f9b 100644
--- a/modules/styles/mw.echo.ui.PageNotificationsOptionWidget.less
+++ b/modules/styles/mw.echo.ui.PageNotificationsOptionWidget.less
@@ -26,8 +26,20 @@
}
}
+ &-table {
+ display: table;
+ width: 100%;
+ }
+ &-row {
+ display: table-row;
+ }
+ &-cell {
+ display: table-cell;
+ vertical-align: top;
+ }
+
&.oo-ui-iconElement &-icon {
- float: left;
+ width: 1em;
.oo-ui-iconElement-icon {
position: static;
display: inline-block;
@@ -36,15 +48,29 @@
&-title {
padding: 0.2em 0 0.2em 0.5em;
+ width: 100%;
+
+ &-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..d07f1c4 100644
--- a/modules/ui/mw.echo.ui.PageNotificationsOptionWidget.js
+++ b/modules/ui/mw.echo.ui.PageNotificationsOptionWidget.js
@@ -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: newchange
Gerrit-Change-Id: I0ae3105ea60dcc2ae6c0f7f2545368a5f86cb2c4
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/Echo
Gerrit-Branch: master
Gerrit-Owner: Mooeypoo <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
