fix: navigation ios

Sirimangalo · Feb 4, 2017 · eb2e25a · eb2e25a
1 parent d0bffc9
commit eb2e25a
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 10 deletions.
diff --git a/src/app/app.component.styl b/src/app/app.component.styl
@@ -36,7 +36,7 @@ md-spinner.in-button-spinner
  * Fake tabs
  */
 
-.tabs button
+.tabs a
   -webkit-flex: 1
   flex: 1
   padding-bottom: 10px

diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
@@ -1,25 +1,28 @@
 <md-toolbar color="primary" class="tabs">
-  <button
+  <a
     md-button
+    (click)="navigate('meditation')"
+    (tap)="navigate('meditation')"
     [class.highlight]="currentTab === 'meditation'"
-    [routerLink]="['/home', { tab: 'meditation' }]"
   >
     MEDITATION
-  </button>
-  <button
+  </a>
+  <a
     md-button
     [class.highlight]="currentTab === 'chat'"
-    [routerLink]="['/home', { tab: 'chat' }]"
+    (click)="navigate('chat')"
+    (tap)="navigate('chat')"
   >
     CHAT
-  </button>
-  <button
+  </a>
+  <a
     md-button
     [class.highlight]="currentTab === 'ask'"
-    [routerLink]="['/home', { tab: 'ask' }]"
+    (click)="navigate('ask')"
+    (tap)="navigate('ask')"
   >
     ASK
-  </button>
+  </a>
 </md-toolbar>
 
 <meditation

diff --git a/src/app/home/home.component.styl b/src/app/home/home.component.styl
@@ -1,6 +1,9 @@
 meditation.hidden, question.hidden, message.hidden
   display: none !important
 
+.tabs .highlight /deep/ .md-button-focus-overlay
+  opacity: 1
+
 .component-separator
   margin-top: 10px
 

diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
@@ -37,6 +37,10 @@ export class HomeComponent {
       });
   }
 
+  navigate(tab: string) {
+    this.router.navigate(['home', {tab}]);
+  }
+
   getButtonColor(tab: string) {
     return this.currentTab === tab ? 'primary' : '';
   }