Sākums Izpētīt Palīdzība
Pierakstīties
SPIN
/
HOSN-app
11
1
Atdalīts 0
Faili Problēmas 3 Izmaiņu pieprasījumi 0 Vikivietne
Pārlūkot izejas kodu

fix navigation issus and show user profile in menu

Carsten Porth 5 gadi atpakaļ
vecāks
402244c28f
revīzija
172a7b8595
6 mainītis faili ar 65 papildinājumiem un 8 dzēšanām
Dalītais skats Rādīt salīdzināšanas statistiku
  1. 19 4
      app/src/app/app.component.ts
  2. 12 0
      app/src/app/app.html
  3. 31 2
      app/src/app/app.scss
  4. 1 1
      app/src/pages/login/login.ts
  5. 1 1
      app/src/pages/write-tweet/write-tweet.ts
  6. 1 0
      app/src/providers/auth/auth.ts

+ 19 - 4
app/src/app/app.component.ts
Parādīt failu 

@@ -2,6 +2,7 @@ import { Component, ViewChild } from '@angular/core';
 
 import { Nav, Platform } from 'ionic-angular';
 
 import { StatusBar } from '@ionic-native/status-bar';
 
 import { SplashScreen } from '@ionic-native/splash-screen';
 
+import { Storage } from '@ionic/storage';
 
 
 import { AuthProvider } from '../providers/auth/auth';
 
 
@@ -9,6 +10,8 @@ import { HomePage } from '../pages/home/home';
 
 import { SearchPage } from '../pages/search/search';
 
 import { SettingsPage } from '../pages/settings/settings';
 
 import { LoginPage } from '../pages/login/login';
 
+import { ProfilePage } from '../pages/profile/profile';
 
+import { TwitterApiProvider } from '../providers/twitter-api/twitter-api';
 
 
 @Component({
 
   templateUrl: 'app.html'
 
@@ -17,14 +20,16 @@ export class MyApp {
 
   @ViewChild(Nav) nav: Nav;
 
 
   rootPage: any;
 
-
 
   pages: Array<{ title: string, icon: string, component: any }>;
 
+  user: any;
 
 
   constructor(
 
     platform: Platform,
 
     statusBar: StatusBar,
 
     splashScreen: SplashScreen,
 
-    private authProvider: AuthProvider
 
+    private authProvider: AuthProvider,
 
+    private twitter: TwitterApiProvider,
 
+    private storage: Storage
 
   ) {
 
     platform.ready().then(() => {
 
       // Okay, so the platform is ready and our plugins are available.
 
@@ -35,6 +40,13 @@ export class MyApp {
 
       splashScreen.hide();
 
       authProvider.isLoggedIn().then(isLoggedIn => {
 
         this.rootPage = isLoggedIn ? HomePage : LoginPage;
 
+        storage.get("userId")
 
+          .then(userId => {
 
+            twitter.fetchUser(userId)
 
+              .then(res => {
 
+                this.user = res;
 
+              });
 
+          });
 
       })
 
     });
 
 
@@ -45,14 +57,17 @@ export class MyApp {
 
     ];
 
   }
 
 
+  showProfile(userId) {
 
+    this.nav.push(ProfilePage, { userId });
 
+  }
 
+
 
   openPage(page) {
 
-    // Reset the content nav to have just this page
 
-    // we wouldn't want the back button to show in this scenario
 
     this.nav.setRoot(page.component);
 
   }
 
 
   logout() {
 
     this.authProvider.logout();
 
+    this.nav.setRoot(LoginPage);
 
   }
 
 }

+ 12 - 0
app/src/app/app.html
Parādīt failu 

@@ -6,6 +6,18 @@
 
   </ion-header>
 
 
   <ion-content>
 
+    <div class="user-info" *ngIf="user" (click)="showProfile(user.id)" menuClose>
 
+      <div class="user-banner" [style.background]="'url('+ user.profile_background_image_url_https +')'">
 
+        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 300 100"
 
+          xml:space="preserve" width="100%" class="svg-triangle">
 
+          <polygon points="0,75  0,100 300,100 300,99" fill="#FFFFFF" />
 
+        </svg>
 
+        <img src="{{ user.profile_image_url_https }}" alt="User" class="user-avatar">
 
+      </div>
 
+      <div class="user-info">
 
+        {{user.name}}<br><span class="handle">@{{user.screen_name}}</span>
 
+      </div>
 
+    </div>
 
     <ion-list>
 
       <button menuClose ion-item icon-start *ngFor="let page of pages" (click)="openPage(page)">
 
         <ion-icon name="{{page.icon}}"></ion-icon>{{page.title}}

+ 31 - 2
app/src/app/app.scss
Parādīt failu 

@@ -1,6 +1,4 @@
 
 // http://ionicframework.com/docs/theming/
 
-
 
-
 
 // App Global Sass
 
 // --------------------------------------------------
 
 // Put style rules here that you want to apply globally. These
 
@@ -16,4 +14,35 @@
 
 // automatically applied to the <body> element in the app.
 
 .hashtag {
 
     color: color($colors, primary, base);
 
+}
 
+
 
+#sideNav {
 
+    .user-info {
 
+        .user-banner {
 
+            position: relative;
 
+            height: 140px;
 
+            margin-bottom: 20px;
 
+            .svg-triangle {
 
+                position: absolute;
 
+                bottom: 0;
 
+            }
 
+            .user-avatar {
 
+                position: absolute;
 
+                bottom: -10px;
 
+                left: 15px;
 
+                border-radius: 50%;
 
+            }
 
+        }
 
+        .user-info {
 
+            padding: 0 15px;
 
+            font-size: 15px;
 
+            font-weight: 500;
 
+            margin-bottom: 10px;
 
+            .handle {
 
+                color: #ababab;
 
+                font-weight: 300;
 
+                font-size: 11px;
 
+            }
 
+        }
 
+    }
 
 }

+ 1 - 1
app/src/pages/login/login.ts
Parādīt failu 

@@ -32,7 +32,7 @@ export class LoginPage {
 
   login() {
 
     this.authProvider.login().then(isSuccessfull => {
 
       if (isSuccessfull) {
 
-        this.navCtrl.push(HomePage);
 
+        this.navCtrl.setRoot(HomePage);
 
       } else {
 
         let alert = this.alertCtrl.create({
 
           title: 'Login failed',

+ 1 - 1
app/src/pages/write-tweet/write-tweet.ts
Parādīt failu 

@@ -1,5 +1,5 @@
 
 import { Component } from '@angular/core';
 
-import { IonicPage, NavController, NavParams, AlertController, LoadingController } from 'ionic-angular';
 
+import { IonicPage, NavController, NavParams, AlertController } from 'ionic-angular';
 
 import { FormBuilder, Validators, FormGroup } from '@angular/forms';
 
 import { TwitterApiProvider } from '../../providers/twitter-api/twitter-api';

+ 1 - 0
app/src/providers/auth/auth.ts
Parādīt failu 

@@ -41,6 +41,7 @@ export class AuthProvider {
 
     .then(result => {
 
       this.storage.set('accessTokenKey', result.credential["accessToken"]);
 
       this.storage.set('accessTokenSecret', result.credential["secret"]);
 
+      this.storage.set('userId', result.additionalUserInfo["profile"]["id"]);
 
       return true;
 
     })
 
     .catch(error => {