mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/Echo
synced 2024-11-24 16:04:35 +00:00
1ac72cc01a
Split the notifications into 'alert' and 'message' badget with two
different flyouts. Also clean up styling and module behavior.
** Depends on ooui change Id4bbe14ba0bf6c for footers in popups.
** Depends on ooui change Ie93e4d6ed5637c for fixing a bug in
inverted icons.
** MobileFrontend must also be updated to support the new modules
in this patch I168f485d6e54cb4067
In this change:
* Split notifcations into alert and messages and display those in
two different badges.
* Create two separate flyout/popups for each category with their
notifications.
* Create a view-model to control notification state and emit events
for both the popup and the badge to intercept and react to.
* Clean up module load and distribution:
* Create an ext.echo.ui module for javascript-ui support and ooui
widgets.
* Create an ext.echo.nojs module that unifies all base classes that
are needed for both nojs and js support, that the js version
builds upon.
* Create a separate ext.echo.logger module as a singleton that can
be called to perform all logging.
* Clean up style uses
* Move the special page LESS file into nojs module so all styles
load properly even in nojs mode.
* Transfer some of the styling from JS to LESS for consistency.
* Make the 'read more' button load already with the styles it
needs to look like a button, since its behavior is similar in
nojs and js vesions, but before its classes were applied only
by the js, making it inconsistent and also making its appearance
'jump' from a link to a button.
* Delete and clean up all old and unused files.
* Moved 'Help.png' icon from modules/overlay to modules/icons for
later use.
Bug: T108190
Change-Id: I55f440ed9f64c46817f620328a6bb522d44c9ca9
85 lines
1.6 KiB
Plaintext
85 lines
1.6 KiB
Plaintext
// This needs to be outside the upper selector 'NotificationOptionWidget'
|
|
// because the same styles also apply (for the moment, at least) to the notification
|
|
// objects in the Special:Notifications page, which are, individually
|
|
// not wrapped with a notificationOptionWidget.
|
|
.mw-echo-state {
|
|
display: block;
|
|
padding: 15px 40px 10px 10px;
|
|
|
|
.mw-echo-notification-primary-link {
|
|
display: none;
|
|
}
|
|
|
|
.mw-echo-icon {
|
|
width: 30px;
|
|
height: 30px;
|
|
float: left;
|
|
margin-right: 10px;
|
|
margin-left: 10px;
|
|
}
|
|
.mw-echo-notification {
|
|
clear: both;
|
|
display: block;
|
|
color: #6D6D6D;
|
|
line-height: 90%;
|
|
margin: 0;
|
|
min-height: 30px;
|
|
background-color: white;
|
|
position: relative;
|
|
padding-top: 15px;
|
|
padding-bottom: 10px;
|
|
/* Force container to expand to height of floated contents */
|
|
overflow: hidden;
|
|
zoom: 1;
|
|
|
|
&.mw-echo-unread {
|
|
color: #252525;
|
|
}
|
|
|
|
span.autocomment {
|
|
color: inherit;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
|
|
.mw-echo-notifications {
|
|
background-color: #EEEEEE;
|
|
}
|
|
|
|
.mw-echo-content {
|
|
overflow: hidden;
|
|
display: block;
|
|
|
|
.mw-echo-title {
|
|
color: #666666;
|
|
font-size: 1em;
|
|
line-height: 1.4em;
|
|
|
|
.mw-echo-title-heading {
|
|
color: #666;
|
|
font-size: 1.15em;
|
|
}
|
|
.mw-echo-title-heading,
|
|
.mw-echo-title-heading a {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.mw-echo-title-heading,
|
|
.plainlinks {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
max-width: 100%;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
}
|
|
}
|
|
|
|
.mw-echo-timestamp, .mw-echo-notification-footer {
|
|
color: #6D6D6D;
|
|
font-size: 11px;
|
|
margin-top: 0.2em;
|
|
}
|
|
}
|
|
}
|