MOBILE-2349 mainmenu: Update badges without event triggering

src/addon/messages/components/discussions/discussions.html

@@ -33,8 +33,8 @@
                 <h2>
                     <core-format-text [text]="discussion.fullname"></core-format-text>
                     <ion-note *ngIf="discussion.message.timecreated > 0 || discussion.unread">
-                        <div *ngIf="discussion.message.timecreated > 0">{{discussion.message.timecreated / 1000 | coreDateDayOrTime}}</div>
+                        <span *ngIf="discussion.unread" class="core-primary-circle"></span>
-                        <div text-right *ngIf="discussion.unread" class="core-primary-circle"></div>
+                        <span *ngIf="discussion.message.timecreated > 0">{{discussion.message.timecreated / 1000 | coreDateDayOrTime}}</span>
                     </ion-note>
                 </h2>
                 <p><core-format-text clean="true" singleLine="true" [text]="discussion.message.message"></core-format-text></p>

src/addon/messages/providers/mainmenu-handler.ts

@@ -32,8 +32,15 @@ import { AddonPushNotificationsDelegate } from '@addon/pushnotifications/provide
 export class AddonMessagesMainMenuHandler implements CoreMainMenuHandler, CoreCronHandler {
     name = 'AddonMessages';
     priority = 800;
-    protected badge = '';
+    protected handler: CoreMainMenuHandlerToDisplay = {
-    protected loading = true;
+        icon: 'chatbubbles',
+        title: 'addon.messages.messages',
+        page: 'AddonMessagesIndexPage',
+        class: 'addon-messages-handler',
+        showBadge: true, // Do not check isMessageCountEnabled because we'll use fallback it not enabled.
+        badge: '',
+        loading: true
+    };
 
     constructor(private messagesProvider: AddonMessagesProvider, private sitesProvider: CoreSitesProvider,
             private eventsProvider: CoreEventsProvider, private appProvider: CoreAppProvider,
@@ -51,8 +58,8 @@ export class AddonMessagesMainMenuHandler implements CoreMainMenuHandler, CoreCr
 
         // Reset info on logout.
         eventsProvider.on(CoreEventsProvider.LOGOUT, (data) => {
-            this.badge = '';
+            this.handler.badge = '';
-            this.loading = true;
+            this.handler.loading = true;
         });
 
         // If a message push notification is received, refresh the count.
@@ -82,19 +89,11 @@ export class AddonMessagesMainMenuHandler implements CoreMainMenuHandler, CoreCr
      * @return {CoreMainMenuHandlerToDisplay} Data needed to render the handler.
      */
     getDisplayData(): CoreMainMenuHandlerToDisplay {
-        if (this.loading) {
+        if (this.handler.loading) {
             this.updateBadge();
         }
 
-        return {
+        return this.handler;
-            icon: 'chatbubbles',
-            title: 'addon.messages.messages',
-            page: 'AddonMessagesIndexPage',
-            class: 'addon-messages-handler',
-            showBadge: true, // Do not check isMessageCountEnabled because we'll use fallback it not enabled.
-            badge: this.badge,
-            loading: this.loading
-        };
     }
 
     /**
@@ -110,17 +109,13 @@ export class AddonMessagesMainMenuHandler implements CoreMainMenuHandler, CoreCr
 
         this.messagesProvider.getUnreadConversationsCount(undefined, siteId).then((unread) => {
             // Leave badge enter if there is a 0+ or a 0.
-            this.badge = parseInt(unread, 10) > 0 ? unread : '';
+            this.handler.badge = parseInt(unread, 10) > 0 ? unread : '';
             // Update badge.
             this.pushNotificationsProvider.updateAddonCounter('AddonMessages', unread, siteId);
         }).catch(() => {
-            this.badge = '';
+            this.handler.badge = '';
         }).finally(() => {
-            this.loading = false;
+            this.handler.loading = false;
-            this.eventsProvider.trigger(CoreMainMenuDelegate.UPDATE_BADGE_EVENT, {
-                name: this.name,
-                badge: this.badge
-            }, siteId);
         });
     }
 

src/app/app.scss

@@ -483,10 +483,12 @@ textarea {
 
 .core-circle:before {
   content: ' \25CF';
-  font-size: 20px;
 }
 
 @each $color-name, $color-base, $color-contrast in get-colors($colors) {
+  .core-#{$color-name}-circle {
+    margin: 0 4px;
+  }
   .core-#{$color-name}-circle:before {
     @extend .core-circle:before;
     color: $color-base;

src/core/mainmenu/pages/menu/menu.ts

@@ -64,7 +64,6 @@ export class CoreMainMenuPage implements OnDestroy {
     };
     protected moreTabAdded = false;
     protected redirectPageLoaded = false;
-    protected updateBadgeObserver;
 
     constructor(private menuDelegate: CoreMainMenuDelegate, private sitesProvider: CoreSitesProvider, navParams: NavParams,
             private navCtrl: NavController, private eventsProvider: CoreEventsProvider) {
@@ -85,15 +84,6 @@ export class CoreMainMenuPage implements OnDestroy {
         const site = this.sitesProvider.getCurrentSite(),
             displaySiteHome = site.getInfo() && site.getInfo().userhomepage === 0;
 
-        this.updateBadgeObserver = this.eventsProvider.on(CoreMainMenuDelegate.UPDATE_BADGE_EVENT, (data) => {
-            const tab = this.tabs.find((tab) => {
-                return tab.showBadge && tab['name'] == data.name;
-            });
-            if (tab) {
-                tab.badge = data.badge;
-            }
-        }, site.getId());
-
         this.subscription = this.menuDelegate.getHandlers().subscribe((handlers) => {
             handlers = handlers.slice(0, CoreMainMenuProvider.NUM_MAIN_HANDLERS); // Get main handlers.
 
@@ -138,6 +128,5 @@ export class CoreMainMenuPage implements OnDestroy {
      */
     ngOnDestroy(): void {
         this.subscription && this.subscription.unsubscribe();
-        this.updateBadgeObserver && this.updateBadgeObserver.off();
     }
 }

src/core/mainmenu/pages/more/more.ts

@@ -40,7 +40,6 @@ export class CoreMainMenuMorePage implements OnDestroy {
     protected subscription;
     protected langObserver;
     protected updateSiteObserver;
-    protected updateBadgeObserver;
 
     constructor(private menuDelegate: CoreMainMenuDelegate, private sitesProvider: CoreSitesProvider,
             private navCtrl: NavController, private mainMenuProvider: CoreMainMenuProvider,
@@ -61,15 +60,6 @@ export class CoreMainMenuMorePage implements OnDestroy {
             this.handlers = handlers.slice(CoreMainMenuProvider.NUM_MAIN_HANDLERS); // Remove the main handlers.
             this.handlersLoaded = this.menuDelegate.areHandlersLoaded();
         });
-
-        this.updateBadgeObserver = this.eventsProvider.on(CoreMainMenuDelegate.UPDATE_BADGE_EVENT, (data) => {
-            const handler = this.handlers.find((handler) => {
-                return handler.showBadge && handler['name'] == data.name;
-            });
-            if (handler) {
-                handler.badge = data.badge;
-            }
-        }, this.sitesProvider.getCurrentSiteId());
     }
 
     /**
@@ -79,7 +69,6 @@ export class CoreMainMenuMorePage implements OnDestroy {
         if (this.subscription) {
             this.subscription.unsubscribe();
         }
-        this.updateBadgeObserver && this.updateBadgeObserver.off();
     }
 
     /**

src/core/mainmenu/providers/delegate.ts

@@ -113,8 +113,6 @@ export class CoreMainMenuDelegate extends CoreDelegate {
     protected siteHandlers: Subject<CoreMainMenuHandlerToDisplay[]> = new BehaviorSubject<CoreMainMenuHandlerToDisplay[]>([]);
     protected featurePrefix = '$mmSideMenuDelegate_';
 
-    static UPDATE_BADGE_EVENT = 'update_main_menu_badge';
-
     constructor(protected loggerProvider: CoreLoggerProvider, protected sitesProvider: CoreSitesProvider,
             protected eventsProvider: CoreEventsProvider) {
         super('CoreMainMenuDelegate', loggerProvider, sitesProvider, eventsProvider);