Skip to content

Commit 80820b6

Browse files
rdlabordlabo
committed
STEP6　チャットのモックアップ作成
1 parent 5619a3a commit 80820b6

File tree

7 files changed

+59
-59
lines changed

7 files changed

+59
-59
lines changed

‎src/app/tab1/tab1.page.html

Lines changed: 26 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,35 @@
11
<ion-header>
22
<ion-toolbar>
33
<ion-title>
4-
Tab One
4+
チャット
55
</ion-title>
6+
<ion-buttons slot="end">
7+
<ion-button fill="clear" size="small">送信</ion-button>
8+
</ion-buttons>
9+
</ion-toolbar>
10+
<ion-toolbar color="primary" style="padding: 4px 8px">
11+
<ion-avatar slot="start" style="width: 36px; height: 36px;">
12+
<ion-img src="/assets/shapes.svg"></ion-img>
13+
</ion-avatar>
14+
<form #f=ngForm>
15+
<ion-textarea class="ion-margin-start" autoGrow="true" rows="1"
16+
placeholder="メッセージ" [(ngModel)]="message" name="message" required></ion-textarea>
17+
</form>
618
</ion-toolbar>
719
</ion-header>
820

921
<ion-content>
10-
<ion-card class="welcome-card">
11-
<img src="/assets/shapes.svg" alt="" />
12-
<ion-card-header>
13-
<ion-card-subtitle>Get Started</ion-card-subtitle>
14-
<ion-card-title>Welcome to Ionic</ion-card-title>
15-
</ion-card-header>
16-
<ion-card-content>
17-
<p>Now that your app has been created, you'll want to start building out features and components. Check out some of the resources below for next steps.</p>
18-
</ion-card-content>
19-
</ion-card>
20-
<ion-list lines="none">
21-
<ion-list-header>
22-
<ion-label>Resources</ion-label>
23-
</ion-list-header>
24-
<ion-item href="https://ionicframework.com/docs/">
25-
<ion-icon slot="start" color="medium" name="book"></ion-icon>
26-
<ion-label>Ionic Documentation</ion-label>
27-
</ion-item>
28-
<ion-item href="https://ionicframework.com/docs/building/scaffolding">
29-
<ion-icon slot="start" color="medium" name="build"></ion-icon>
30-
<ion-label>Scaffold Out Your App</ion-label>
31-
</ion-item>
32-
<ion-item href="https://ionicframework.com/docs/layout/structure">
33-
<ion-icon slot="start" color="medium" name="grid"></ion-icon>
34-
<ion-label>Change Your App Layout</ion-label>
35-
</ion-item>
36-
<ion-item href="https://ionicframework.com/docs/theming/basics">
37-
<ion-icon slot="start" color="medium" name="color-fill"></ion-icon>
38-
<ion-label>Theme Your App</ion-label>
39-
</ion-item>
40-
</ion-list>
22+
<ion-list class="ion-padding-top">
23+
<ion-item lines="none" *ngFor="let m of [1,2,3,4,5]">
24+
<ion-avatar slot="start">
25+
<ion-img src="/assets/shapes.svg" *ngIf="m !== 3"></ion-img>
26+
</ion-avatar>
27+
<ion-label class="ion-padding ion-text-wrap"
28+
style="background-color: var(--ion-color-light-tint); border-radius: 12px;"
29+
[class.ion-margin-end]="m !== 3" [class.ion-margin-start]="m === 3">
30+
<div class="ion-text-nowrap"><strong>表示名</strong></div>
31+
メッセージ
32+
</ion-label>
33+
</ion-item>
34+
</ion-list>
4135
</ion-content>

‎src/app/tab1/tab1.page.ts

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,29 @@
11
import { Component, OnInit } from '@angular/core';
22
import { ModalController } from '@ionic/angular';
33
import { ProfilePage } from '../shared/profile/profile.page';
4+
import { AuthService } from '../auth/auth.service';
5+
import { FirestoreService } from '../shared/firestore.service';
46

57
@Component({
68
selector: 'app-tab1',
79
templateUrl: 'tab1.page.html',
810
styleUrls: ['tab1.page.scss']
911
})
1012
export class Tab1Page implements OnInit {
11-
13+
message = '';
1214
constructor(
1315
public modalController: ModalController,
16+
public auth: AuthService,
17+
public firestore: FirestoreService,
1418
) {}
1519

1620
async ngOnInit() {
17-
const modal = await this.modalController.create({
18-
component: ProfilePage,
19-
});
20-
await modal.present();
21+
const user = await this.firestore.userInit(this.auth.getUserId());
22+
if (!user.displayName) {
23+
const modal = await this.modalController.create({
24+
component: ProfilePage,
25+
});
26+
await modal.present();
27+
}
2128
}
22-
2329
}

‎src/app/tab2/tab2.module.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,14 @@ import { NgModule } from '@angular/core';
44
import { CommonModule } from '@angular/common';
55
import { FormsModule } from '@angular/forms';
66
import { Tab2Page } from './tab2.page';
7+
import { SharedModule } from '../shared/shared.module';
78

89
@NgModule({
910
imports: [
1011
IonicModule,
1112
CommonModule,
1213
FormsModule,
14+
SharedModule,
1315
RouterModule.forChild([{ path: '', component: Tab2Page }])
1416
],
1517
declarations: [Tab2Page]

‎src/app/tab2/tab2.page.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
<ion-header>
22
<ion-toolbar>
33
<ion-title>
4-
Tab Two
4+
設定
55
</ion-title>
66
</ion-toolbar>
77
</ion-header>
88

99
<ion-content>
1010
<ion-list>
11+
<ion-item (click)="openProfile()" button="true"><ion-label>プロフィール</ion-label></ion-item>
1112
<ion-item (click)="signOut()" button="true"><ion-label>ログアウト</ion-label></ion-item>
1213
</ion-list>
1314
</ion-content>

‎src/app/tab2/tab2.page.ts

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import { Component } from '@angular/core';
22
import { AuthService } from '../auth/auth.service';
3+
import { ModalController } from '@ionic/angular';
4+
import { ProfilePage } from '../shared/profile/profile.page';
35

46
@Component({
57
selector: 'app-tab2',
@@ -8,7 +10,17 @@ import { AuthService } from '../auth/auth.service';
810
})
911
export class Tab2Page {
1012

11-
constructor(public auth: AuthService) {}
13+
constructor(
14+
public auth: AuthService,
15+
public modalController: ModalController
16+
) {}
17+
18+
async openProfile() {
19+
const modal = await this.modalController.create({
20+
component: ProfilePage,
21+
});
22+
modal.present();
23+
}
1224

1325
signOut() {
1426
this.auth.authSignOut();

‎src/app/tabs/tabs.page.html

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,13 @@
22

33
<ion-tab-bar slot="bottom">
44
<ion-tab-button tab="tab1">
5-
<ion-icon name="flash"></ion-icon>
6-
<ion-label>Tab One</ion-label>
5+
<ion-icon name="chatboxes"></ion-icon>
6+
<ion-label>チャット</ion-label>
77
</ion-tab-button>
88

99
<ion-tab-button tab="tab2">
10-
<ion-icon name="apps"></ion-icon>
11-
<ion-label>Tab Two</ion-label>
12-
</ion-tab-button>
13-
14-
<ion-tab-button tab="tab3">
15-
<ion-icon name="send"></ion-icon>
16-
<ion-label>Tab Three</ion-label>
10+
<ion-icon name="settings"></ion-icon>
11+
<ion-label>設定</ion-label>
1712
</ion-tab-button>
1813
</ion-tab-bar>
1914

‎src/app/tabs/tabs.router.module.ts

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -27,16 +27,6 @@ const routes: Routes = [
2727
}
2828
]
2929
},
30-
{
31-
path: 'tab3',
32-
children: [
33-
{
34-
path: '',
35-
loadChildren: () =>
36-
import('../tab3/tab3.module').then(m => m.Tab3PageModule)
37-
}
38-
]
39-
},
4030
{
4131
path: '',
4232
redirectTo: '/tabs/tab1',

0 commit comments

Comments
 (0)