Mooeypoo has uploaded a new change for review.
https://gerrit.wikimedia.org/r/260689
Change subject: Organize items in bundles with CSS table layout
......................................................................
Organize items in bundles with CSS table layout
This will make the "flat" positioning of the bundle items a lot
more consistent and organized.
Bug: T121933
Change-Id: I472fcc89e540f1a886168069c547c6dc7e5ce613
---
M modules/echo.variables.less
M modules/ooui/mw.echo.ui.NotificationItemWidget.js
M modules/ooui/styles/mw.echo.ui.NotificationGroupItemWidget.less
M modules/ooui/styles/mw.echo.ui.NotificationItemWidget.less
4 files changed, 110 insertions(+), 37 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/Echo
refs/changes/89/260689/1
diff --git a/modules/echo.variables.less b/modules/echo.variables.less
index aeea02f..fa19400 100644
--- a/modules/echo.variables.less
+++ b/modules/echo.variables.less
@@ -10,5 +10,7 @@
@notification-body-color: #888;
@notification-popup-width: 450px;
+@bundle-group-padding: 1em;
@opacity-low: 0.5;
+
diff --git a/modules/ooui/mw.echo.ui.NotificationItemWidget.js
b/modules/ooui/mw.echo.ui.NotificationItemWidget.js
index 9e72018..a4a6d44 100644
--- a/modules/ooui/mw.echo.ui.NotificationItemWidget.js
+++ b/modules/ooui/mw.echo.ui.NotificationItemWidget.js
@@ -93,11 +93,26 @@
} );
// Build the actions line
- this.$actions.append(
- this.actionsButtonSelectWidget.$element,
- this.menuPopupButtonWidget.$element,
- this.timestampWidget.$element
- );
+ if ( this.bundle ) {
+ // In a bundled item, the timestamp should go before
the menu
+ this.$actions.append(
+ $( '<div>' )
+ // We are wrapping the actions in a
'row' div so that the
+ // internal pieces are also a table
layout
+ .addClass(
'mw-echo-ui-notificationItemWidget-content-actions-row' )
+ .append(
+
this.actionsButtonSelectWidget.$element,
+ this.timestampWidget.$element,
+
this.menuPopupButtonWidget.$element
+ )
+ );
+ } else {
+ this.$actions.append(
+ this.actionsButtonSelectWidget.$element,
+ this.menuPopupButtonWidget.$element,
+ this.timestampWidget.$element
+ );
+ }
// Actions
secondaryUrls = this.model.getSecondaryUrls();
@@ -130,18 +145,30 @@
}
this.menuPopupButtonWidget.toggle(
!this.menuPopupButtonWidget.getMenu().isEmpty() );
+ if ( this.bundle ) {
+ // In a bundle, we have table layout, so the icon is
+ // inserted into the content, and the 'mark as read'
+ // button is not floating, and should be at the end
+ $content.append(
+ $icon,
+ $message,
+ this.$actions,
+ this.markAsReadButton.$element
+ );
+ this.$element.append( $content );
+ } else {
+ $content.append(
+ this.markAsReadButton.$element,
+ $message,
+ this.$actions
+ );
+ this.$element.append( $icon, $content );
+ }
+
this.$element
.addClass( 'mw-echo-ui-notificationItemWidget
mw-echo-ui-notificationItemWidget-' + this.model.getType() )
.toggleClass(
'mw-echo-ui-notificationItemWidget-initiallyUnseen', !this.model.isSeen() &&
!this.bundle )
- .toggleClass(
'mw-echo-ui-notificationItemWidget-bundle', this.bundle )
- .append(
- $icon,
- $content.append(
- this.markAsReadButton.$element,
- $message,
- this.$actions
- )
- );
+ .toggleClass(
'mw-echo-ui-notificationItemWidget-bundle', this.bundle );
if ( this.model.getPrimaryUrl() ) {
this.$element.contents()
diff --git a/modules/ooui/styles/mw.echo.ui.NotificationGroupItemWidget.less
b/modules/ooui/styles/mw.echo.ui.NotificationGroupItemWidget.less
index 9a2706c..02cf3f6 100644
--- a/modules/ooui/styles/mw.echo.ui.NotificationGroupItemWidget.less
+++ b/modules/ooui/styles/mw.echo.ui.NotificationGroupItemWidget.less
@@ -1,3 +1,5 @@
+@import '../../echo.variables';
+
.mw-echo-ui-notificationGroupItemWidget {
padding-left: 0;
padding-right: 0;
@@ -24,7 +26,7 @@
&-group {
cursor: default;
- padding: 1em;
+ padding: @bundle-group-padding;
background-color: #f8f8f8;
-webkit-box-shadow: inset 0px -2px 0px 0px rgba(0,0,0,0.05),
inset 0px 2px 0px 0px rgba(0,0,0,0.05);
-moz-box-shadow: inset 0px -2px 0px 0px rgba(0,0,0,0.05),
inset 0px 2px 0px 0px rgba(0,0,0,0.05);
diff --git a/modules/ooui/styles/mw.echo.ui.NotificationItemWidget.less
b/modules/ooui/styles/mw.echo.ui.NotificationItemWidget.less
index 753f07a..d9ab204 100644
--- a/modules/ooui/styles/mw.echo.ui.NotificationItemWidget.less
+++ b/modules/ooui/styles/mw.echo.ui.NotificationItemWidget.less
@@ -42,25 +42,11 @@
&-body {
color: @notification-body-color;
}
-
- // Only for bundled items
- .mw-echo-ui-notificationItemWidget-bundle & {
- float: left;
- display: inline-block;
-
- &-header {
- width: 18em;
- }
- }
}
&-actions {
margin-top: 0.5em;
font-size: 0.8em;
-
- .mw-echo-ui-notificationItemWidget-bundle & {
- display: inline;
- }
&-button .oo-ui-buttonElement-button {
.mw-echo-ui-mixin-hover-opacity;
@@ -74,11 +60,6 @@
}
&-menu {
- .mw-echo-ui-notificationItemWidget-bundle & {
- float: right;
- margin-right: 0.5em;
- }
-
.oo-ui-buttonElement-button {
.mw-echo-ui-mixin-hover-opacity;
}
@@ -93,14 +74,75 @@
float: right;
color: black;
opacity: @opacity-low;
- .mw-echo-ui-notificationItemWidget-bundle & {
- margin-top: 0.2em;
- }
}
}
}
+ // Table layout only for the content inside bundles
+ &-bundle {
+ display: table;
+ width: ~"calc( 100% - " @bundle-group-padding ~");";
+
+ .mw-echo-ui-notificationItemWidget-content {
+ display: table-row;
+
+ .mw-echo-ui-notificationItemWidget {
+ // CSS table layout
+ &-icon,
+ &-content-message,
+ &-content-actions,
+ &-markAsReadButton {
+ display: table-cell;
+ vertical-align: top;
+ }
+
+ // Positioning fixes for bundled items
+ &-icon {
+ position: relative;
+ padding-right: 0.5em;
+ }
+
+ &-content-message {
+ display: inline-block;
+
+ &-header {
+ width: 18em;
+ }
+ }
+
+ &-content-actions {
+ &-row {
+ display: table-row;
+ }
+
+ &-buttons {
+ display: table-cell;
+ vertical-align: middle;
+ }
+
+ &-menu {
+ display: table-cell;
+ vertical-align: middle;
+ }
+
+ &-timestamp {
+ float: none;
+ display: table-cell;
+ vertical-align: middle;
+ padding-right: 0.5em;
+ }
+ }
+
+ &-markAsReadButton {
+ width: 1em;
+ float: none;
+ }
+
+ }
+ }
+ }
+
&-markAsReadButton {
.mw-echo-ui-mixin-hover-opacity;
float: right;
--
To view, visit https://gerrit.wikimedia.org/r/260689
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I472fcc89e540f1a886168069c547c6dc7e5ce613
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
