EVOgeek
/
Vmeda.Online
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-2903 menu: Move menu to side on tablet

main
Pau Ferrer Ocaña 2019-03-07 12:08:25 +01:00
parent 19e0cf59e5
commit 809753aac1
7 changed files with 94 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/ion-tabs/core-ion-tabs.html
View File

@ -7,7 +7,7 @@
</span>
</div>
</div>
<div #originalTabs>
<div #originalTabs class="tabcontent">
<ng-content></ng-content>
</div>
<div #portal tab-portal></div>

27
src/components/ion-tabs/ion-tabs.scss
View File

@ -1,3 +1,5 @@
$core-sidetab-size: 60px !default;
ion-app.app-root core-ion-tabs {
.tabbar {
z-index: 101; // For some reason, the regular z-index isn't enough with our tabs, use a higher one.
@ -21,6 +23,31 @@ ion-app.app-root core-ion-tabs {
.tab-badge.badge {
background-color: $ion-tabs-badge-color;
}
&[tabsplacement="side"] {
.tabbar {
@include float(start);
width: $core-sidetab-size;
height: 100%;
flex-direction: column;
.tab-button {
width: 100%;
.tab-badge.badge {
@include position(calc(50% - 30px), 2px, null, null);
}
}
}
.tabcontent {
width: calc(100% - #{($core-sidetab-size)});
position: absolute;
@include position(0, 0, 0, 0);
core-ion-tab {
@include position(0, 0, 0, $core-sidetab-size);
position: relative;
}
}
}
}
ion-app.app-root.ios core-ion-tabs .core-ion-tabs-loading {

4
src/components/ion-tabs/ion-tabs.ts
View File

@ -223,10 +223,6 @@ export class CoreIonTabsComponent extends Tabs implements OnDestroy {
* @param {CoreIonTabComponent} tab The tab to remove.
*/
remove(tab: CoreIonTabComponent): void {
if (tab.isSelected) {
// TODO: If selected we should move this navigation to the phantom tab.
}
// First search in the list of initialized tabs.
let index = this._tabs.indexOf(tab);

4
src/core/mainmenu/pages/menu/menu.html
View File

@ -1,5 +1,5 @@
<core-ion-tabs #mainTabs [hidden]="!showTabs" [loaded]="loaded" tabsPlacement="bottom" tabsLayout="title-hide">
<core-ion-tabs #mainTabs [hidden]="!showTabs" [loaded]="loaded" tabsLayout="title-hide" [attr.tabsPlacement]="tabsPlacement">
<core-ion-tab [enabled]="false" [show]="false" [root]="redirectPage" [rootParams]="redirectParams"></core-ion-tab>
<core-ion-tab *ngFor="let tab of tabs" [root]="tab.page" [rootParams]="tab.pageParams" [tabTitle]="tab.title | translate" [tabIcon]="tab.icon" [tabBadge]="tab.badge" class="{{tab.class}}"></core-ion-tab>
<core-ion-tab *ngFor="let tab of tabs" [root]="tab.page" [rootParams]="tab.pageParams" [tabTitle]="tab.title | translate" [tabIcon]="tab.icon" [tabBadge]="tab.badge" class="{{tab.class}}" [enabled]="!tab.hide" [show]="!tab.hide"></core-ion-tab>
<core-ion-tab root="CoreMainMenuMorePage" [tabTitle]="'core.more' | translate" tabIcon="more"></core-ion-tab>
</core-ion-tabs>

26
src/core/mainmenu/pages/menu/menu.ts
View File

@ -35,6 +35,7 @@ export class CoreMainMenuPage implements OnDestroy {
redirectPage: string;
redirectParams: any;
showTabs = false;
tabsPlacement = 'bottom';
protected subscription;
protected redirectObs: any;
@ -105,6 +106,8 @@ export class CoreMainMenuPage implements OnDestroy {
*/
initHandlers(): void {
if (this.allHandlers) {
this.tabsPlacement = this.mainMenuProvider.getTabPlacement(this.navCtrl);
const handlers = this.allHandlers.slice(0, this.mainMenuProvider.getNumItems()); // Get main handlers.
// Re-build the list of tabs. If a handler is already in the list, use existing object to prevent re-creating the tab.
@ -118,9 +121,32 @@ export class CoreMainMenuPage implements OnDestroy {
return tab.title == handler.title && tab.icon == handler.icon;
});
tab ? tab.hide = false : null;
handler.hide = false;
newTabs.push(tab || handler);
}
// Maintain tab in phantom mode in case is not visible.
const selectedTab = this.mainTabs.getSelected();
if (selectedTab) {
const oldTab = this.tabs.find((tab) => {
return tab.page == selectedTab.root && tab.icon == selectedTab.tabIcon;
});
if (oldTab) {
// Check if the selected handler is visible.
const isVisible = newTabs.some((newTab) => {
return oldTab.title == newTab.title && oldTab.icon == newTab.icon;
});
if (!isVisible) {
oldTab.hide = true;
newTabs.push(oldTab);
}
}
}
this.tabs = newTabs;
// Sort them by priority so new handlers are in the right position.

6
src/core/mainmenu/providers/delegate.ts
View File

@ -111,6 +111,12 @@ export interface CoreMainMenuHandlerToDisplay extends CoreMainMenuHandlerData {
* @type {number}
*/
priority?: number;
/**
* Hide tab. Used then resizing.
* @type {[type]}
*/
hide?: boolean;
}
/**

34
src/core/mainmenu/providers/mainmenu.ts
View File

@ -13,6 +13,7 @@
// limitations under the License.
import { Injectable } from '@angular/core';
import { NavController } from 'ionic-angular';
import { CoreLangProvider } from '@providers/lang';
import { CoreSitesProvider } from '@providers/sites';
import { CoreConfigConstants } from '../../../configconstants';
@ -53,8 +54,11 @@ export interface CoreMainMenuCustomItem {
export class CoreMainMenuProvider {
static NUM_MAIN_HANDLERS = 4;
static ITEM_MIN_WIDTH = 72; // Min with of every item, based on 5 items on a 360 pixel wide screen.
protected tablet = false;
constructor(private langProvider: CoreLangProvider, private sitesProvider: CoreSitesProvider) { }
constructor(private langProvider: CoreLangProvider, private sitesProvider: CoreSitesProvider) {
this.tablet = window && window.innerWidth && window.innerWidth >= 576 && window.innerHeight >= 576;
}
/**
* Get a list of custom menu items for a certain site.
@ -169,7 +173,12 @@ export class CoreMainMenuProvider {
if (window && window.innerWidth) {
let numElements;
numElements = Math.floor(window.innerWidth / CoreMainMenuProvider.ITEM_MIN_WIDTH);
if (this.tablet) {
// Tablet, menu will be displayed vertically.
numElements = Math.floor(window.innerHeight / CoreMainMenuProvider.ITEM_MIN_WIDTH);
} else {
numElements = Math.floor(window.innerWidth / CoreMainMenuProvider.ITEM_MIN_WIDTH);
}
// Set a mínimum elements to show and skip more button.
return numElements > 1 ? numElements - 1 : 1;
@ -177,4 +186,25 @@ export class CoreMainMenuProvider {
return CoreMainMenuProvider.NUM_MAIN_HANDLERS;
}
/**
* Get tabs placement depending on the device size.
*
* @param {NavController} navCtrl NavController to resize the content.
* @return {string} Tabs placement including side value.
*/
getTabPlacement(navCtrl: NavController): string {
const tablet = window && window.innerWidth && window.innerWidth >= 576 && window.innerHeight >= 576;
if (tablet != this.tablet) {
this.tablet = tablet;
// Resize so content margins can be updated.
setTimeout(() => {
navCtrl.resize();
}, 500);
}
return tablet ? 'side' : 'bottom';
}
}