Skip to content

Commit

Permalink
feat(Echo): ✨ update Echo for 1.43
Browse files Browse the repository at this point in the history
  • Loading branch information
@alistair3149
alistair3149 committed Jan 5, 2025
1 parent 86ba574 commit 6740eac
Show file tree
Hide file tree
Showing 7 changed files with 140 additions and 599 deletions.
160 changes: 79 additions & 81 deletions resources/skins.citizen.scripts/echo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,103 +7,101 @@
* TODO: Switch to mw.hook( 'ext.echo.NotificationBadgeWidget.onInitialize' ) when we drop 1.39 support
*/
function init() {
mw.hook( 'ext.echo.NotificationBadgeWidget.onInitialize' ).add( () => {
if ( document.querySelectorAll( '#pt-notifications-alert a, #pt-notifications-notice a' ).length !== 2 ) {
return;
}
if ( document.querySelectorAll( '#pt-notifications-alert a, #pt-notifications-notice a' ).length !== 2 ) {
return;
}

const notifications = document.getElementById( 'p-notifications' );
// Clone the icons so we can insert it back afterwards
const alertIcon = notifications.querySelector( '#pt-notifications-alert > a > .citizen-ui-icon' ).cloneNode();
const noticeIcon = notifications.querySelector( '#pt-notifications-notice > a > .citizen-ui-icon' ).cloneNode();
const notifications = document.getElementById( 'p-notifications' );
// Clone the icons so we can insert it back afterwards
const alertIcon = notifications.querySelector( '#pt-notifications-alert > a > .citizen-ui-icon' ).cloneNode();
const noticeIcon = notifications.querySelector( '#pt-notifications-notice > a > .citizen-ui-icon' ).cloneNode();

// When the Echo button is clicked, all of its children are reset back to the initial state.
// This will re-upgrade the children of the Echo button
const callChildSupportServices = ( anchor ) => {
const badge = anchor.parentElement;
// Wrap label in a span
const label = document.createElement( 'span' );
label.textContent = anchor.textContent;
anchor.replaceChildren( label );
// Add icon span back
if ( badge.id === 'pt-notifications-alert' ) {
anchor.prepend( alertIcon );
anchor.classList.remove( 'oo-ui-icon-bell' );
} else if ( badge.id === 'pt-notifications-notice' ) {
anchor.prepend( noticeIcon );
anchor.classList.remove( 'oo-ui-icon-tray' );
}
};
// When the Echo button is clicked, all of its children are reset back to the initial state.
// This will re-upgrade the children of the Echo button
const callChildSupportServices = ( anchor ) => {
const badge = anchor.parentElement;
// Wrap label in a span
const label = document.createElement( 'span' );
label.textContent = anchor.textContent;
anchor.replaceChildren( label );
// Add icon span back
if ( badge.id === 'pt-notifications-alert' ) {
anchor.prepend( alertIcon );
anchor.classList.remove( 'oo-ui-icon-bell' );
} else if ( badge.id === 'pt-notifications-notice' ) {
anchor.prepend( noticeIcon );
anchor.classList.remove( 'oo-ui-icon-tray' );
}
};

// Upgrade the Echo badge
// This only needs to be run once at the Echo button init
const setupFosterHome = ( badge, anchor ) => {
badge.classList.add( 'mw-list-item' );
anchor.classList.remove( 'mw-echo-notifications-badge' );
anchor.classList.add( 'citizen-header__button', 'citizen-echo-notification-badge' );
callChildSupportServices( anchor );
};
// Upgrade the Echo badge
// This only needs to be run once at the Echo button init
const setupFosterHome = ( badge, anchor ) => {
badge.classList.add( 'mw-list-item' );
anchor.classList.remove( 'mw-echo-notifications-badge' );
anchor.classList.add( 'citizen-header__button', 'citizen-echo-notification-badge' );
callChildSupportServices( anchor );
};

// Whenever Echo kicks its children out from the button, undo what Echo did.
const abuseObserver = new MutationObserver( ( mutations ) => {
for ( const mutation of mutations ) {
if ( mutation.type === 'childList' ) {
const removedNodes = mutation.removedNodes;
if ( removedNodes.length === 0 ) {
// Whenever Echo kicks its children out from the button, undo what Echo did.
const abuseObserver = new MutationObserver( ( mutations ) => {
for ( const mutation of mutations ) {
if ( mutation.type === 'childList' ) {
const removedNodes = mutation.removedNodes;
if ( removedNodes.length === 0 ) {
return;
}
for ( const removedNode of removedNodes ) {
if ( !( removedNode instanceof HTMLSpanElement ) || !removedNode.classList.contains( 'citizen-ui-icon' ) ) {
return;
}
for ( const removedNode of removedNodes ) {
if ( !( removedNode instanceof HTMLSpanElement ) || !removedNode.classList.contains( 'citizen-ui-icon' ) ) {
return;
}
const anchor = mutation.target;
callChildSupportServices( anchor );
}
const anchor = mutation.target;
callChildSupportServices( anchor );
}
}
} );
}
} );

// Observe for Echo button init, it will only happen once per icon (so twice)
let initObserved = 0;
const initObserver = new MutationObserver( ( mutations ) => {
for ( const mutation of mutations ) {
// All Echo buttons are observed by abuseObserver, disconnect observer.
if ( initObserved >= 2 ) {
initObserver.disconnect();
// Observe for Echo button init, it will only happen once per icon (so twice)
let initObserved = 0;
const initObserver = new MutationObserver( ( mutations ) => {
for ( const mutation of mutations ) {
// All Echo buttons are observed by abuseObserver, disconnect observer.
if ( initObserved >= 2 ) {
initObserver.disconnect();
}
if ( mutation.type === 'childList' ) {
const addedNodes = mutation.addedNodes;
if ( addedNodes.length === 0 ) {
return;
}
if ( mutation.type === 'childList' ) {
const addedNodes = mutation.addedNodes;
if ( addedNodes.length === 0 ) {
for ( const addedNode of addedNodes ) {
if ( !addedNode.classList.contains( 'mw-echo-ui-notificationBadgeButtonPopupWidget' ) ) {
return;
}
for ( const addedNode of addedNodes ) {
if ( !addedNode.classList.contains( 'mw-echo-ui-notificationBadgeButtonPopupWidget' ) ) {
return;
const anchor = addedNode.firstElementChild;
// Upgrade the badge immediately before Echo kicks its children out
setupFosterHome( addedNode, anchor );
// Observe Echo button
abuseObserver.observe(
anchor,
{
childList: true,
subtree: true
}
const anchor = addedNode.firstElementChild;
// Upgrade the badge immediately before Echo kicks its children out
setupFosterHome( addedNode, anchor );
// Observe Echo button
abuseObserver.observe(
anchor,
{
childList: true,
subtree: true
}
);
initObserved++;
}
);
initObserved++;
}
}
} );
initObserver.observe(
notifications,
{
childList: true,
subtree: true
}
);
}
} );
initObserver.observe(
notifications,
{
childList: true,
subtree: true
}
);
}

module.exports = init;
138 changes: 2 additions & 136 deletions skinStyles/extensions/Echo/ext.echo.special.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,146 +3,12 @@
*
* SkinStyles for Extension:Echo
* Module: ext.echo.special
* Version: REL1_35 347c30e
* Version: REL1_43
*
* Date: 2023-06-29
* Date: 2025-01-04
*/

// Disable sticky header since it collides with Echo sticky header
#citizen-page-header-sticky-sentinel {
display: none;
}

/* mw.echo.ui.DatedSubGroupListWidget.less */
.mw-echo-ui-subGroupListWidget {
&-header-row {
// More aligned
display: flex;
align-items: center;

&-markAllReadButton {
// Revert responsive font size tweak from Echo
// As it breaks alignment
font-size: revert !important;
}
}
}

.mw-echo-ui-datedSubGroupListWidget {
.mw-body-content &-title {
margin: 0;

&-primary {
font-size: var( --font-size-small );
// Align with Citizen label styles
color: var( --color-subtle );
letter-spacing: 0.05em;
}

&-secondary {
color: var( --color-subtle );
}
}
}

/* mw.echo.ui.NotificationsInboxWidget.less */
.mw-echo-ui-notificationsInboxWidget {
max-width: none;

&-sidebar {
padding-top: var( --space-sm ); // align with toolbarWrapper
padding-right: var( --space-lg );
}

&-main {
&-toolbar-top {
margin-bottom: 0 !important;

.mw-echo-ui-notificationsInboxWidget-row {
display: table-row !important;
// Fix misalign
text-align: left;
}
}

.mw-echo-ui-notificationItemWidget {
border-radius: var( --border-radius-base );
}
}

&-toolbarWrapper {
max-width: ~'calc( 100vw - var(--padding-page) * 2 )';
height: auto;
padding: var( --space-sm ) 0;
// Mimic Citizen sticky header
margin: 0;
margin-bottom: var( --space-md );
overflow-x: auto;
background-color: var( --color-surface-0 );
filter: opacity( 0.9 );
-webkit-backdrop-filter: saturate( 50% ) blur( 16px );
backdrop-filter: saturate( 50% ) blur( 16px );
border-bottom: var( --border-width-base ) solid var( --border-color-base );
box-shadow: none;
}
}

.mw-echo-ui-notificationsInboxWidget-cell-placeholder,
.mw-echo-ui-notificationsInboxWidget-main-toolbar-settings,
.mw-echo-ui-notificationsInboxWidget-main-toolbar-pagination {
display: table-cell !important;
}

/* mw.echo.ui.PageNotificationsOptionWidget.less */
.mw-echo-ui-pageNotificationsOptionWidget {
&.oo-ui-optionWidget {
padding: var( --space-xs ) var( --space-sm );
border-radius: var( --border-radius-base );

&-highlighted {
color: var( --color-emphasized );
background-color: var( --color-surface-3 );
}

&-selected {
color: var( --color-progressive );
background-color: var( --background-color-progressive-subtle );
}

&-selected&-highlighted,
&-pressed&-highlighted {
color: var( --color-progressive--hover );
background-color: var( --background-color-progressive-subtle );
}
}

&-label-count {
color: var( --color-subtle );
background-color: var( --color-surface-3 );

.oo-ui-optionWidget-selected & {
color: var( --color-progressive );
}
}
}

/* mw.echo.ui.CrossWikiUnreadFilterWidget.less */
.mw-echo-ui-crossWikiUnreadFilterWidget {
// HACK: Make it sticky
position: -webkit-sticky;
position: sticky;
top: var( --space-sm );
padding: var( --space-md );
border-color: var( --border-color-base );
border-radius: var( --border-radius-medium );

&-title {
font-size: var( --font-size-x-large );
font-weight: var( --font-weight-semi-bold );
color: var( --color-emphasized );
}

&-subtitle {
color: var( --color-subtle );
}
}
4 changes: 2 additions & 2 deletions skinStyles/extensions/Echo/ext.echo.styles.alert.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@
*
* SkinStyles for Extension:Echo
* Module: ext.echo.styles.alert
* Version: REL1_39
* Version: REL1_43
*
* Date: 2024-02-27
* Date: 2025-01-04
*/

@import '../../../resources/variables.less';
Expand Down
30 changes: 2 additions & 28 deletions skinStyles/extensions/Echo/ext.echo.styles.notifications.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,33 +3,7 @@
*
* SkinStyles for Extension:Echo
* Module: ext.echo.styles.notifications
* Version: REL1_35 347c30e
* Version: REL1_43
*
* Date: 2021-08-11
* Date: 2024-01-04
*/

/* mw.echo.notifications.less */
.mw-echo-state {
.mw-echo-notification {
color: var( --color-subtle );
background-color: var( --color-surface-0 );
}

.mw-echo-notifications {
background-color: var( --color-surface-1 );
}

.mw-echo-content {
.mw-echo-title {
color: var( --color-emphasized );
}

.mw-echo-payload {
color: var( --color-subtle );
}

.mw-echo-notification-footer {
color: var( --color-subtle );
}
}
}
Loading

0 comments on commit 6740eac

Please sign in to comment.