Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

BottomBar LABEL_VISIBILITY.SELECTED not working #85

Open
MGalatioto opened this issue Apr 26, 2019 · 7 comments
Open

BottomBar LABEL_VISIBILITY.SELECTED not working #85

MGalatioto opened this issue Apr 26, 2019 · 7 comments

Comments

@MGalatioto
Copy link

MGalatioto commented Apr 26, 2019

  • If the demo apps cannot help and there is no issue for your problem, tell us about it
    Hi! As mentioned in the tile, if I select in the bottom bar a BottomBarItem, the route works, BUT, the home (in my app, the dashboard) gets always selected. Here is my code:

`import { Component, OnInit } from "@angular/core";
import { RadSideDrawer } from "nativescript-ui-sidedrawer";
import * as app from "tns-core-modules/application";
import {
BottomBar,
LABEL_VISIBILITY,
TabSelectedEventData
} from "nativescript-bottombar";
import { Router } from "@angular/router";

@component({
moduleId: module.id,
selector: "aktuelle-module",
templateUrl: "./aktuelle-module.component.html"
})
export class AktuelleModuleComponent implements OnInit {
globalVariables: any = global;
private bottomBar: BottomBar;
labelVisibility: LABEL_VISIBILITY;
actualModules: any[];

constructor(private router: Router) {
    this.labelVisibility = LABEL_VISIBILITY.SELECTED;
    this.actualModules = this.globalVariables.actualModules;
}

ngOnInit() {}

onDrawerButtonTap() {
    const sideDrawer = <RadSideDrawer>app.getRootView();
    sideDrawer.showDrawer();
}

async tabSelected(event: TabSelectedEventData) {
    const tabbedIcon = event.newIndex;
    if (tabbedIcon === 0) {
        await this.router.navigate(["/dashboard"]);
    }
    if (tabbedIcon === 1) {
        await this.router.navigate(["/aktuelle-module"]);
    }
    if (tabbedIcon === 2) {
        await this.router.navigate(["/credits"]);
    }
    if (tabbedIcon === 3) {
        await this.router.navigate(["/info"]);
    }
}

barLoaded(event) {
    this.bottomBar = event.object;
}

}
`

So when i click to 'aktuelle-module' the routing works, but the dashboard gets selected.
Also, here the template of 'aktuelle-module'

`

<ScrollView height="90%">
  <StackLayout class="form">
    <StackLayout *ngFor="let currentModule of actualModules; index as i">
      <GirdLayout rows="auto, auto" columns="auto" class="gridActualModules">
          <GridLayout *ngIf="currentModule['Code'] !== ''" row="0" rows="auto" columns="4*, 6*">
            <Label fontWeight="bold" textWrap="true" row="0" col="0" text="Code"></Label>
            <Label row="0" col="1" [text]="currentModule['Code']"></Label>
          </GridLayout>
          <GridLayout *ngIf="currentModule['Course'] !== ''" row="1" rows="auto" columns="4*, 6*">
            <Label fontWeight="bold" textWrap="true" row="0" col="0" text="Modulname"></Label>
            <Label textWrap="true" row="0" col="1" [text]="currentModule['Course']"></Label>
          </GridLayout>
        </GirdLayout>
      <StackLayout class="hr-light"></StackLayout>
    </StackLayout>
  </StackLayout>
</ScrollView>

<BottomBar (tabSelected)="tabSelected($event)" [androidLabelVisibility]="labelVisibility" (loaded)="barLoaded($event)">
  <BottomBarItem icon="res://home" title="Dashboard" checkedIcon="res://home"></BottomBarItem>
  <BottomBarItem icon="res://document" title="Aktuelle Module" checkedIcon="res://document"></BottomBarItem>
  <BottomBarItem icon="res://credits" title="Credits" checkedIcon="res://credits"></BottomBarItem>
  <BottomBarItem icon="res://info" title="Info" checkedIcon="res://info"></BottomBarItem>
</BottomBar>

`

  • Which platform(s) does your issue occur on?
    Android
    emulator AND device. NEXUS ONE API 27

I'd Appreciate any help!
If there are more infos necessary, please tell me!

@rhanb
Copy link
Owner

rhanb commented Apr 30, 2019

Hi @MGalatioto ,

Thanks for reporting this issue, could you provide a simple repo to reproduce the issue? it would be a great help for me to reproduce the issue and fix it 👍

Thanks

@MGalatioto
Copy link
Author

MGalatioto commented May 1, 2019

Hi @rhanb

appreciate your answer!
I have only a private repo, since this is a project for an employer - Would be a playground helpful for you as well (if thats even possible in a playground..)?

Thank you already in advance for your answer!

BR, Marco

@MGalatioto
Copy link
Author

Hi @rhanb
Here is a zip where the error occurs - i'd appreciate your help really much.
Best regards - marco
NSAPP-master.zip

@MGalatioto
Copy link
Author

Hi again, @rhanb

I honestly did not find the "bug", I searched for it but unfortunately I could not find any :-(

Did you get time to get an eye on it? (zip file above in the comment)

Really would appreciate it!

Thanks in advance.

BR, Marco

@MGalatioto
Copy link
Author

Hi @rhanb
Could you take a look at this? (I attached the code in the .zip file above).
Thank you.

@rhanb
Copy link
Owner

rhanb commented May 29, 2019

Hi @MGalatioto , sorry for taking so long to answer,
Understand that it's hard for me to find time to work on this repo with my current work.

The best would be to have a github repo (can be private, it's free).

Otherwise from what I see from your html template I don't see any router-outlet nor page-router-outlet

routing can't work without one of those

@MGalatioto
Copy link
Author

MGalatioto commented Jun 6, 2019

Hi @rhanb

Yes, I completley understand.

Thank you for checking it.

I do have a page-router-outlet in my app.component.html ...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants