From f09c3f92107ff1bd4166e19e75a858c44f372b13 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Thu, 5 Nov 2020 14:37:53 +0100 Subject: [PATCH] MOBILE-3565 menu: Add network status message --- src/app/app.component.ts | 65 +++++++- src/app/core/mainmenu/pages/menu/menu.html | 5 +- src/app/core/mainmenu/pages/menu/menu.page.ts | 19 ++- src/app/core/mainmenu/pages/menu/menu.scss | 146 +++++++++--------- src/app/core/mainmenu/pages/more/more.page.ts | 1 - src/app/core/mainmenu/pages/more/more.scss | 97 ------------ 6 files changed, 154 insertions(+), 179 deletions(-) delete mode 100644 src/app/core/mainmenu/pages/more/more.scss diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 8ddb2387a..e494c5f85 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -18,6 +18,8 @@ import { NavController } from '@ionic/angular'; import { CoreLangProvider } from '@services/lang'; import { CoreLoginHelperProvider } from '@core/login/services/helper'; import { CoreEvents, CoreEventSessionExpiredData } from '@singletons/events'; +import { Network, NgZone, Platform } from '@singletons/core.singletons'; +import { CoreApp } from '@services/app'; @Component({ selector: 'app-root', @@ -45,14 +47,73 @@ export class AppComponent implements OnInit { this.langProvider.clearCustomStrings(); // Remove version classes from body. - // @todo - // this.removeVersionClass(); + this.removeVersionClass(); }); // Listen for session expired events. CoreEvents.on(CoreEvents.SESSION_EXPIRED, (data: CoreEventSessionExpiredData) => { this.loginHelper.sessionExpired(data); }); + + this.onPlatformReady(); + } + + protected async onPlatformReady(): Promise { + await Platform.instance.ready(); + + // Refresh online status when changes. + Network.instance.onChange().subscribe(() => { + // Execute the callback in the Angular zone, so change detection doesn't stop working. + NgZone.instance.run(() => { + const isOnline = CoreApp.instance.isOnline(); + const hadOfflineMessage = document.body.classList.contains('core-offline'); + + document.body.classList.toggle('core-offline', !isOnline); + + if (isOnline && hadOfflineMessage) { + document.body.classList.add('core-online'); + + setTimeout(() => { + document.body.classList.remove('core-online'); + }, 3000); + } else if (!isOnline) { + document.body.classList.remove('core-online'); + } + }); + }); + } + + /** + * Convenience function to add version to body classes. + * + * @param release Current release number of the site. + */ + protected addVersionClass(release: string): void { + const parts = release.split('.', 3); + + parts[1] = parts[1] || '0'; + parts[2] = parts[2] || '0'; + + document.body.classList.add('version-' + parts[0], + 'version-' + parts[0] + '-' + parts[1], + 'version-' + parts[0] + '-' + parts[1] + '-' + parts[2]); + } + + /** + * Convenience function to remove all version classes form body. + */ + protected removeVersionClass(): void { + const remove: string[] = []; + + Array.from(document.body.classList).forEach((tempClass) => { + if (tempClass.substring(0, 8) == 'version-') { + remove.push(tempClass); + } + }); + + remove.forEach((tempClass) => { + document.body.classList.remove(tempClass); + }); } } diff --git a/src/app/core/mainmenu/pages/menu/menu.html b/src/app/core/mainmenu/pages/menu/menu.html index c0f28c217..caa058462 100644 --- a/src/app/core/mainmenu/pages/menu/menu.html +++ b/src/app/core/mainmenu/pages/menu/menu.html @@ -1,6 +1,5 @@ - - - + + diff --git a/src/app/core/mainmenu/pages/menu/menu.page.ts b/src/app/core/mainmenu/pages/menu/menu.page.ts index c42062d38..4516e8f30 100644 --- a/src/app/core/mainmenu/pages/menu/menu.page.ts +++ b/src/app/core/mainmenu/pages/menu/menu.page.ts @@ -42,6 +42,7 @@ export class CoreMainMenuPage implements OnInit, OnDestroy { redirectParams?: Params; showTabs = false; tabsPlacement = 'bottom'; + hidden = false; protected subscription?: Subscription; protected redirectObs?: CoreEventObserver; @@ -178,6 +179,22 @@ export class CoreMainMenuPage implements OnInit, OnDestroy { } } + /** + * Change tabs visibility to show/hide them from the view. + * + * @param visible If show or hide the tabs. + */ + changeVisibility(visible: boolean): void { + if (this.hidden == visible) { + // Change needed. + this.hidden = !visible; + + /* setTimeout(() => { + this.viewCtrl.getContent().resize(); + });*/ + } + } + /** * Handle a redirect. * @@ -246,7 +263,7 @@ export class CoreMainMenuPage implements OnInit, OnDestroy { // User confirmed, go to root. this.mainTabs?.select(page); - } catch (error) { + } catch { // User canceled. } } diff --git a/src/app/core/mainmenu/pages/menu/menu.scss b/src/app/core/mainmenu/pages/menu/menu.scss index 608068077..151bea4ec 100644 --- a/src/app/core/mainmenu/pages/menu/menu.scss +++ b/src/app/core/mainmenu/pages/menu/menu.scss @@ -1,93 +1,89 @@ -ion-icon.tab-button-icon { - text-overflow: unset; - overflow: visible; - text-align: center; - transition: margin 500ms ease-in-out, transform 300ms ease-in-out; -} +:host{ + --menutabbar-size: 60px; -.ion-md-fa-graduation-cap, -.ion-ios-fa-graduation-cap, -.ion-ios-fa-graduation-cap-outline, -.ion-fa-graduation-cap { - // @todo @extend .fa-graduation-cap; - // @todo @extend .fa; - font-size: 21px; - height: 21px; + ion-tabs { + -webkit-filter: drop-shadow(0px 3px 3px rgba(var(--drop-shadow))); + filter: drop-shadow(0px 3px 3px rgba(var(--drop-shadow))); + } -} + ion-tab-button ion-icon { + text-overflow: unset; + overflow: visible; + text-align: center; + } -.ion-ios-fa-graduation-cap-outline { - color: transparent; - -webkit-text-stroke-width: 0.8px; - // @todo -webkit-text-stroke-color: $tabs-tab-color-inactive; - font-size: 23px; - height: 23px; -} + ion-tabs.placement-bottom ion-tab-button { + ion-icon { + transition: margin 500ms ease-in-out, transform 300ms ease-in-out; + } + ion-badge { + top: 8px; + } + } -.ion-md-fa-newspaper-o, -.ion-ios-fa-newspaper-o, -.ion-ios-fa-newspaper-o-outline, -.ion-fa-newspaper-o { - // @todo @extend .fa-newspaper-o; - // @todo @extend .fa; - font-size: 22px; - height: 22px; -} - -.ion-ios-fa-newspaper-o-outline { - font-size: 23px; - height: 23px; -} - -.core-network-message { - position: absolute; - bottom: 0; - left: 0; - right: 0; - padding-left: 10px; - padding-right: 10px; - text-align: center; - color: white; - visibility: hidden; - height: 0; - transition: all 500ms ease-in-out; - opacity: .8; -} - -.core-online-message, -.core-offline-message { - display: none; -} - - -/** -.core-online ion-app.app-root page-core-mainmenu, -.core-offline ion-app.app-root page-core-mainmenu { - - core-ion-tabs[tabsplacement="bottom"] ion-icon.tab-button-icon { - margin-bottom: $core-network-message-height / 2; - - &.icon-ios { - margin-bottom: 14px; + ion-tabs.placement-side { + flex-direction: row; + ion-tab-bar { + order: -1; + width: var(--menutabbar-size); + height: 100%; + flex-direction: column; + ion-tab-button { + width: 100%; + ion-badge { + top: calc(50% - 20px); + } + } } } + .core-network-message { + position: absolute; + bottom: 0; + left: 0; + right: 0; + padding-left: 10px; + padding-right: 10px; + text-align: center; + color: white; + visibility: hidden; + height: 0; + transition: all 500ms ease-in-out; + opacity: .8; + } + + .core-online-message, + .core-offline-message { + display: none; + } +} + +:host-context(.core-online), +:host-context(.core-offline) { + ion-tabs.placement-bottom ion-tab-button ion-icon { + margin-bottom: 8px; + } + + ion-tabs.placement-bottom ion-tab-button.ios ion-icon { + margin-bottom: 14px; + } + .core-network-message { visibility: visible; - height: $core-network-message-height; + height: 16px; pointer-events: none; } } -.core-offline ion-app.app-root page-core-mainmenu .core-offline-message, -.core-online ion-app.app-root page-core-mainmenu .core-online-message { +:host-context(.core-offline) .core-offline-message, +:host-context(.core-online) .core-online-message { display: block; } -.core-online ion-app.app-root page-core-mainmenu .core-network-message { - background: $green; +:host-context(.core-online) .core-network-message { + background: var(--green); } -.core-offline ion-app.app-root page-core-mainmenu .core-network-message { - background: $red; -}*/ +:host-context(.core-offline) .core-network-message { + background: var(--red); +} diff --git a/src/app/core/mainmenu/pages/more/more.page.ts b/src/app/core/mainmenu/pages/more/more.page.ts index b26b751cc..4346287dd 100644 --- a/src/app/core/mainmenu/pages/more/more.page.ts +++ b/src/app/core/mainmenu/pages/more/more.page.ts @@ -29,7 +29,6 @@ import { CoreEventObserver, CoreEvents } from '@singletons/events'; @Component({ selector: 'page-core-mainmenu-more', templateUrl: 'more.html', - styleUrls: ['more.scss'], }) export class CoreMainMenuMorePage implements OnInit, OnDestroy { diff --git a/src/app/core/mainmenu/pages/more/more.scss b/src/app/core/mainmenu/pages/more/more.scss deleted file mode 100644 index 301c56874..000000000 --- a/src/app/core/mainmenu/pages/more/more.scss +++ /dev/null @@ -1,97 +0,0 @@ -/* -$core-more-icon: $gray-darker !default; -$core-more-background-ios: $list-ios-background-color !default; -$core-more-background-md: $list-md-background-color !default; -$core-more-activated-background-ios: color-shade($core-more-background-ios) !default; -$core-more-activated-background-md: color-shade($core-more-background-md) !default; -$core-more-divider-ios: $item-ios-divider-background !default; -$core-more-divider-md: $item-md-divider-background !default; -$core-more-border-ios: $list-ios-border-color !default; -$core-more-border-md: $list-md-border-color !default; -$core-more-color-ios: $list-ios-text-color!default; -$core-more-color-md: $list-md-text-color !default; - -.item-block { - &.item-ios { - background-color: $core-more-background-ios; - color: $core-more-color-ios; - p { - color: $core-more-color-ios; - } - - .item-inner { - border-bottom: $hairlines-width solid $core-more-border-ios; - } - } - &.item-md { - background-color: $core-more-background-md; - color: $core-more-color-md; - p { - color: $core-more-color-md; - } - - .item-inner { - border-bottom: 1px solid $core-more-border-md; - } - } - - &.activated { - &.item-ios { - background-color: $core-more-activated-background-ios; - } - &.item-md { - background-color: $core-more-activated-background-md; - } - } -} - -ion-icon { - color: $core-more-icon; -} - -.item-divider { - &.item-ios { - background-color: $core-more-divider-ios; - } - - &.item-md { - background-color: $core-more-divider-md; - border-bottom: $core-more-border-md; - } -} - -@include darkmode() { - ion-icon { - color: $core-dark-text-color; - } - - .item-divider { - &.item-ios, - &.item-md { - color: $core-dark-text-color; - background-color: $core-dark-item-divider-bg-color; - } - } - - .item-block { - &.item-ios, - &.item-md { - color: $core-dark-text-color; - background-color: $core-dark-item-bg-color; - p { - color: $core-dark-text-color; - } - - } - - &.activated { - &.item-ios { - background-color: $core-more-activated-background-ios; - } - &.item-md { - background-color: $core-more-activated-background-md; - } - } - } -} -*/ \ No newline at end of file