Skip to content

Commit

Permalink
Merge pull request #4 from tomermoshe/channel-component
Browse files Browse the repository at this point in the history
channel-component
tomermoshe authored May 28, 2017
2 parents 613c84e + a96f56d commit 89e7f32
Showing 18 changed files with 176 additions and 53 deletions.
3 changes: 2 additions & 1 deletion .angular-cli.json
Original file line number Diff line number Diff line change
@@ -20,7 +20,8 @@
"prefix": "app",
"styles": [
"theme/variables.scss",
"styles.scss"
"styles.scss",
"../node_modules/font-awesome/scss/font-awesome.scss"
],
"scripts": [],
"environmentSource": "environments/environment.ts",
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -28,6 +28,7 @@
"core-js": "^2.4.1",
"global": "^4.3.2",
"graphql-tag": "^2.2.0",
"font-awesome": "^4.7.0",
"ionic-angular": "^3.2.1",
"ionicons": "^3.0.0",
"moment": "^2.18.1",
21 changes: 12 additions & 9 deletions src/app/app.module.ts
Original file line number Diff line number Diff line change
@@ -6,37 +6,40 @@ import { IonicApp, IonicModule } from 'ionic-angular';

import { AppComponent } from './app.component';
import { AppRouting } from './app.routing';
import { LoginComponent } from './components/login/login.component';
import { ChatComponent } from './components/chat/chat.component';
import { LoginPageComponent } from './components/login-page/login-page.component';
import { ChatPageComponent } from './components/chat-page/chat-page.component';
import { AuthGuard } from './services/auth-guard.service';
import { AuthenticationService } from './services/authentication.service';
import { PageNotFoundComponent } from './components/page-not-found/page-not-found.component';
import { ChannelComponent } from './components/channel/channel.component';
import { ChannelViewComponent } from './components/channel-view/channel-view.component';
import { WelcomePageComponent } from './components/welcome-page/welcome-page.component';
import { ChatMessageComponent } from './components/chat-message/chat-message.component';
import { ChannelItemComponent } from './components/channel-item/channel-item.component';
import { ApolloModule } from 'apollo-angular';
import { getClient } from './graphql/client/apollo-client';
import { GetChatDummyService } from './graphql/get-chat-dummy.service';

@NgModule({
declarations: [
AppComponent,
LoginComponent,
ChatComponent,
LoginPageComponent,
ChatPageComponent,
PageNotFoundComponent,
ChannelComponent,
ChannelViewComponent,
WelcomePageComponent,
ChatMessageComponent,
ChannelItemComponent,
],
imports: [
IonicModule.forRoot(AppComponent, { mode: 'md' }),
ApolloModule.forRoot(getClient),
BrowserModule,
FormsModule,
HttpModule,
IonicModule.forRoot(AppComponent),
ApolloModule.forRoot(getClient),
AppRouting,
],
providers: [AuthGuard, AuthenticationService, GetChatDummyService],
bootstrap: [IonicApp]
})
export class AppModule { }
export class AppModule {
}
12 changes: 6 additions & 6 deletions src/app/app.routing.ts
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
import { Routes, RouterModule } from '@angular/router';

import { AuthGuard } from './services/auth-guard.service';
import { LoginComponent } from './components/login/login.component';
import { ChatComponent } from './components/chat/chat.component';
import { LoginPageComponent } from './components/login-page/login-page.component';
import { ChatPageComponent } from './components/chat-page/chat-page.component';
import { PageNotFoundComponent } from './components/page-not-found/page-not-found.component';
import { ChannelComponent } from './components/channel/channel.component';
import { ChannelViewComponent } from './components/channel-view/channel-view.component';
import { WelcomePageComponent } from './components/welcome-page/welcome-page.component';

const appRoutes: Routes = [
{
path: 'chat', component: ChatComponent, canActivate: [AuthGuard], canActivateChild: [AuthGuard],
path: 'chat', component: ChatPageComponent, canActivate: [AuthGuard], canActivateChild: [AuthGuard],
children: [
{
path: 'channel/:id',
component: ChannelComponent
component: ChannelViewComponent
},
{
path: 'welcome-page',
@@ -26,7 +26,7 @@ const appRoutes: Routes = [
}
]
},
{ path: 'login', component: LoginComponent },
{ path: 'login', component: LoginPageComponent },
{ path: '', redirectTo: 'chat', pathMatch: 'full' },
{ path: '**', component: PageNotFoundComponent }
];
11 changes: 11 additions & 0 deletions src/app/components/channel-item/channel-item.component.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<div class="channel-item" (click)="gotoChannel(channel.title)">
<span class="channel-title">
<i class="channel-icon fa" [ngClass]="['fa-' + channelSymbol]" aria-hidden="true"></i>
<span>{{channel.title}}</span>
</span>
<span>
<i class="fa fa-eye-slash hide-channel-icon" aria-hidden="true" (click)="hideChannel()"></i>
<i class="fa fa-sign-out exit-channel-icon" aria-hidden="true" (click)="exitChannel()"></i>
</span>
</div>

38 changes: 38 additions & 0 deletions src/app/components/channel-item/channel-item.component.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
.channel-item {
display: flex;
justify-content: space-between;
font-size: 15px;
padding: 5px 10px 5px 5px;
}

.channel-item:hover {
background-color: rgba(0,0,0,0.2);
}

.channel-icon {
color: rgba(255, 255, 255, 0.3);
font-size: 14px;
display: flex;
justify-content: center;
align-items: center;
width: 16px;
margin: 3px;
}

.channel-title {
display: flex;
justify-content: space-around;
align-items: center;
}

.hide-channel-icon, .exit-channel-icon {
font-size: 14px;
color: rgba(255, 255, 255, 0.3);
&:hover {
color: rgba(255, 255, 255, 0.6);
}
}

.hide-channel-icon {
margin-right: 10px;
}
42 changes: 42 additions & 0 deletions src/app/components/channel-item/channel-item.component.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import { Component, Input, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';

@Component({
selector: 'channel-item',
templateUrl: './channel-item.component.html',
styleUrls: ['./channel-item.component.scss']
})
export class ChannelItemComponent implements OnInit {
@Input()
channel: any;
channelSymbol: string;


constructor(private router: Router, private route: ActivatedRoute) {
}

gotoChannel(channelId) {
this.router.navigate(['channel', channelId], { relativeTo: this.route });
}

ngOnInit(): void {
if (this.channel.direct) {
this.channelSymbol = 'at';
}
else if (this.channel.privateChannel) {
this.channelSymbol = 'lock';
}
else {
this.channelSymbol = 'hashtag';
}
}

exitChannel() {

}

hideChannel() {

}

}
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
<ion-header>
<ion-header class="channel-view-header">
<button ion-item class="menu-button" menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title># {{channel}}</ion-title>
</ion-header>
<ion-content #chatContent>
@@ -18,7 +21,7 @@
<ion-row class="message-row">
<ion-input #messageInput class="message-input" type="text" placeholder="Message"
[(ngModel)]="model.message" (keyup.enter)="sendMessage()"></ion-input>
<button class="send-button" ion-item (click)="sendMessage()">
<button item-right class="send-button" ion-item (click)="sendMessage()">
<ion-icon name="paper-plane"></ion-icon>
</button>
</ion-row>
25 changes: 25 additions & 0 deletions src/app/components/channel-view/channel-view.component.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
.channel-view-header {
display: flex;
flex-direction: row-reverse;
}

.menu-button {
width: 48px;
}

.menu-button:hover{
background-color: rgb(200,200,200);
}

.message-row {
display: flex;
}

.message-input {

}

.send-button {
background: #f4f4f4;
width: 48px;
}
Original file line number Diff line number Diff line change
@@ -3,10 +3,10 @@ import { ActivatedRoute } from '@angular/router';

@Component({
selector: 'channel',
templateUrl: './channel.component.html',
styleUrls: ['./channel.component.scss'],
templateUrl: './channel-view.component.html',
styleUrls: ['./channel-view.component.scss'],
})
export class ChannelComponent implements OnInit, OnDestroy {
export class ChannelViewComponent implements OnInit, OnDestroy {

@ViewChild('chatContent') chatContent: any;
public channel;
14 changes: 0 additions & 14 deletions src/app/components/channel/channel.component.scss

This file was deleted.

Original file line number Diff line number Diff line change
@@ -4,7 +4,8 @@
</ion-header>
<ion-content class="home-menu-content">
<ion-list no-lines no-padding>
<button ion-item class="menu-item" *ngFor="let channel of channels" (click)="gotoChannel(channel)">{{channel}}</button>
<!--<button ion-item class="menu-item" *ngFor="let channel of channels" (click)="gotoChannel(channel)">{{channel}}</button>-->
<channel-item class="menu-item" *ngFor="let channel of channels" [channel]="channel"></channel-item>
</ion-list>
</ion-content>
<ion-footer class="home-menu-footer">
Original file line number Diff line number Diff line change
@@ -1,12 +1,17 @@
.home-page{
position: absolute;
width:100%;
height: 100%
height: 100%;
}

.home-page.menu-content-open{
@media (min-width: 600px) {
width: calc(100% - 304px) !important;
}
}

.home-menu-content{
background-color: #044b76;
//background-color: #13679a;
}

.home-menu-header{
Original file line number Diff line number Diff line change
@@ -1,17 +1,21 @@
import { AfterViewInit, Component, ViewEncapsulation } from '@angular/core';
import { AfterViewInit, Component } from '@angular/core';
import { MenuController } from 'ionic-angular';
import { ActivatedRoute, Router } from '@angular/router';
import { AuthenticationService } from '../../services/authentication.service';

@Component({
selector: 'chat',
templateUrl: './chat.component.html',
styleUrls: ['chat.component.scss'],
encapsulation: ViewEncapsulation.None
templateUrl: './chat-page.component.html',
styleUrls: ['chat-page.component.scss'],
})
export class ChatComponent implements AfterViewInit {
export class ChatPageComponent implements AfterViewInit {

public channels = ['channel1', 'channel2', 'kentak', 'tomer'];
public channels = [
{ title: 'channel1', privateChannel: true },
{ title: 'channel2' },
{ title: 'kentak', direct: true },
{ title: 'tomer', direct: true }
];

constructor(private menuCtrl: MenuController,
private router: Router,
@@ -23,10 +27,6 @@ export class ChatComponent implements AfterViewInit {
this.menuCtrl.open();
}

gotoChannel(channelId) {
this.router.navigate(['channel', channelId], { relativeTo: this.route });
}

logout() {
this.authenticationService.logout();
this.router.navigate(['login']);
Original file line number Diff line number Diff line change
@@ -20,5 +20,8 @@
}

.login-logo{
width: 50%;
width: 80%;
@media (min-width: 600px) {
width: 50%;
}
}
Original file line number Diff line number Diff line change
@@ -5,12 +5,12 @@ import { ToastController } from 'ionic-angular';
import { GetChatDummyService } from '../../graphql/get-chat-dummy.service';

@Component({
moduleId : module.id,
templateUrl : 'login.component.html',
styleUrls : ['login.component.scss']
moduleId: module.id,
templateUrl: 'login-page.component.html',
styleUrls: ['login-page.component.scss']
})

export class LoginComponent implements OnInit {
export class LoginPageComponent implements OnInit {
model: any = {};
loading = false;
returnUrl: string;
4 changes: 4 additions & 0 deletions yarn.lock
Original file line number Diff line number Diff line change
@@ -1917,6 +1917,10 @@ flatten@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782"

font-awesome@^4.7.0:
version "4.7.0"
resolved "https://registry.yarnpkg.com/font-awesome/-/font-awesome-4.7.0.tgz#8fa8cf0411a1a31afd07b06d2902bb9fc815a133"

for-in@^0.1.3:
version "0.1.8"
resolved "https://registry.yarnpkg.com/for-in/-/for-in-0.1.8.tgz#d8773908e31256109952b1fdb9b3fa867d2775e1"

0 comments on commit 89e7f32

Please sign in to comment.