mediawiki-extensions-Echo/modules/echo.variables.less

@badge-padding: 0.12em;
@badge-icon-size: 1.1em;
@badge-text-color-idle: white;
@badge-distance-adjustment: -0.4em;
@badge-background-unseen-alert: #D11813;
@badge-background-unseen-message: #5D95FF;

@notification-background-unseen: #dce8ff;
@notification-background-unread: white;
@notification-background-read: #f1f1f1;

@notification-popup-width: 450px;
Split alerts and messages in Echo 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 2015-08-13 00:54:16 +00:00			`@badge-padding: 0.12em;`
			`@badge-icon-size: 1.1em;`
			`@badge-text-color-idle: white;`
Reduce distance between notification badges Notification badges are conceptually closer together than the rest of toolbar elements. So it makes sense to move them closer visually too. This is just a small CSS adjustment to compensate for the default margin that items in the menu get. If there is a cleanner way to achieve the same, feel free to refactor. Bug: T108190 Change-Id: I06403f67c24f045c125c505dca2101f9eed79594 2015-09-09 16:18:03 +00:00			`@badge-distance-adjustment: -0.4em;`
Split alerts and messages in Echo 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 2015-08-13 00:54:16 +00:00			`@badge-background-unseen-alert: #D11813;`
			`@badge-background-unseen-message: #5D95FF;`

			`@notification-background-unseen: #dce8ff;`
			`@notification-background-unread: white;`
			`@notification-background-read: #f1f1f1;`
Align popup footer buttons to take 50% width each The alignment of the buttons was done haphazadly before, using padding. This should be done better; we should calculate the buttons width to be 50% of the width of the popup. Since the popup accepts a width config, we know what its value is, and can calculate the proper width. The width was added to the variables.less file for continued use. * Added popupWidth config variable to the badge widget * Added OO.ui.ButtonGroupWidget to place the buttons in for consistency and styling * Added calculated width styles to both footer buttons * Added corrections for MonoBook Change-Id: Iad2c947da06241e9303cf1f35574177a0f602bbb 2015-09-09 20:18:52 +00:00
			`@notification-popup-width: 450px;`