From 96870eb416bb5856cb1b8c913399e706e93a1352 Mon Sep 17 00:00:00 2001 From: tomermoshe <152430tm> Date: Sun, 28 May 2017 18:48:34 +0300 Subject: [PATCH] channel-component renamed stuff - better names fixed some stuff --- .angular-cli.json | 3 +- package.json | 1 + src/app/app.module.ts | 19 +++++---- src/app/app.routing.ts | 12 +++--- .../channel-item/channel-item.component.html | 11 +++++ .../channel-item/channel-item.component.scss | 38 +++++++++++++++++ .../channel-item/channel-item.component.ts | 42 +++++++++++++++++++ .../channel-view.component.html} | 7 +++- .../channel-view/channel-view.component.scss | 25 +++++++++++ .../channel-view.component.ts} | 6 +-- .../components/channel/channel.component.scss | 14 ------- .../chat-page.component.html} | 3 +- .../chat-page.component.scss} | 9 +++- .../chat-page.component.ts} | 20 ++++----- .../login-page.component.html} | 0 .../login-page.component.scss} | 3 ++ .../login-page.component.ts} | 6 +-- yarn.lock | 4 ++ 18 files changed, 173 insertions(+), 50 deletions(-) create mode 100644 src/app/components/channel-item/channel-item.component.html create mode 100644 src/app/components/channel-item/channel-item.component.scss create mode 100644 src/app/components/channel-item/channel-item.component.ts rename src/app/components/{channel/channel.component.html => channel-view/channel-view.component.html} (77%) create mode 100644 src/app/components/channel-view/channel-view.component.scss rename src/app/components/{channel/channel.component.ts => channel-view/channel-view.component.ts} (91%) delete mode 100644 src/app/components/channel/channel.component.scss rename src/app/components/{chat/chat.component.html => chat-page/chat-page.component.html} (64%) rename src/app/components/{chat/chat.component.scss => chat-page/chat-page.component.scss} (67%) rename src/app/components/{chat/chat.component.ts => chat-page/chat-page.component.ts} (58%) rename src/app/components/{login/login.component.html => login-page/login-page.component.html} (100%) rename src/app/components/{login/login.component.scss => login-page/login-page.component.scss} (87%) rename src/app/components/{login/login.component.ts => login-page/login-page.component.ts} (88%) diff --git a/.angular-cli.json b/.angular-cli.json index 49dbe99..a15ae5f 100644 --- a/.angular-cli.json +++ b/.angular-cli.json @@ -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", diff --git a/package.json b/package.json index ce66786..c0d1652 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "@angular/platform-browser-dynamic": "^4.1.0", "@angular/router": "^4.0.0", "core-js": "^2.4.1", + "font-awesome": "^4.7.0", "ionic-angular": "^3.2.1", "ionicons": "^3.0.0", "momentjs": "^2.0.0", diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 81b1b36..1f29af3 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -6,27 +6,29 @@ 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'; @NgModule({ declarations: [ AppComponent, - LoginComponent, - ChatComponent, + LoginPageComponent, + ChatPageComponent, PageNotFoundComponent, - ChannelComponent, + ChannelViewComponent, WelcomePageComponent, ChatMessageComponent, + ChannelItemComponent, ], imports: [ - IonicModule.forRoot(AppComponent), + IonicModule.forRoot(AppComponent, { mode: 'md' }), BrowserModule, FormsModule, HttpModule, @@ -35,4 +37,5 @@ import { ChatMessageComponent } from './components/chat-message/chat-message.com providers: [AuthGuard, AuthenticationService], bootstrap: [IonicApp] }) -export class AppModule { } +export class AppModule { +} diff --git a/src/app/app.routing.ts b/src/app/app.routing.ts index 423b27b..170b9e4 100644 --- a/src/app/app.routing.ts +++ b/src/app/app.routing.ts @@ -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 } ]; diff --git a/src/app/components/channel-item/channel-item.component.html b/src/app/components/channel-item/channel-item.component.html new file mode 100644 index 0000000..7f12f5f --- /dev/null +++ b/src/app/components/channel-item/channel-item.component.html @@ -0,0 +1,11 @@ +
+ + + {{channel.title}} + + + + + +
+ diff --git a/src/app/components/channel-item/channel-item.component.scss b/src/app/components/channel-item/channel-item.component.scss new file mode 100644 index 0000000..c92e102 --- /dev/null +++ b/src/app/components/channel-item/channel-item.component.scss @@ -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; +} diff --git a/src/app/components/channel-item/channel-item.component.ts b/src/app/components/channel-item/channel-item.component.ts new file mode 100644 index 0000000..89959bd --- /dev/null +++ b/src/app/components/channel-item/channel-item.component.ts @@ -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() { + + } + +} diff --git a/src/app/components/channel/channel.component.html b/src/app/components/channel-view/channel-view.component.html similarity index 77% rename from src/app/components/channel/channel.component.html rename to src/app/components/channel-view/channel-view.component.html index c7da56d..09b15ab 100644 --- a/src/app/components/channel/channel.component.html +++ b/src/app/components/channel-view/channel-view.component.html @@ -1,4 +1,7 @@ - + + # {{channel}} @@ -18,7 +21,7 @@ - diff --git a/src/app/components/channel-view/channel-view.component.scss b/src/app/components/channel-view/channel-view.component.scss new file mode 100644 index 0000000..79a4f01 --- /dev/null +++ b/src/app/components/channel-view/channel-view.component.scss @@ -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; +} diff --git a/src/app/components/channel/channel.component.ts b/src/app/components/channel-view/channel-view.component.ts similarity index 91% rename from src/app/components/channel/channel.component.ts rename to src/app/components/channel-view/channel-view.component.ts index e78f563..1f12d48 100644 --- a/src/app/components/channel/channel.component.ts +++ b/src/app/components/channel-view/channel-view.component.ts @@ -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; diff --git a/src/app/components/channel/channel.component.scss b/src/app/components/channel/channel.component.scss deleted file mode 100644 index 84df6a7..0000000 --- a/src/app/components/channel/channel.component.scss +++ /dev/null @@ -1,14 +0,0 @@ -.message-row { -} - -.message-input { - -} - -.send-button { - background: #f4f4f4; - display: flex; - justify-content: center; - align-items: center; - width: 50px; -} diff --git a/src/app/components/chat/chat.component.html b/src/app/components/chat-page/chat-page.component.html similarity index 64% rename from src/app/components/chat/chat.component.html rename to src/app/components/chat-page/chat-page.component.html index 5d7c2b1..d1f5dc9 100644 --- a/src/app/components/chat/chat.component.html +++ b/src/app/components/chat-page/chat-page.component.html @@ -4,7 +4,8 @@ - + + diff --git a/src/app/components/chat/chat.component.scss b/src/app/components/chat-page/chat-page.component.scss similarity index 67% rename from src/app/components/chat/chat.component.scss rename to src/app/components/chat-page/chat-page.component.scss index 5c5e782..b47603f 100644 --- a/src/app/components/chat/chat.component.scss +++ b/src/app/components/chat-page/chat-page.component.scss @@ -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{ diff --git a/src/app/components/chat/chat.component.ts b/src/app/components/chat-page/chat-page.component.ts similarity index 58% rename from src/app/components/chat/chat.component.ts rename to src/app/components/chat-page/chat-page.component.ts index f34c6ee..893e743 100644 --- a/src/app/components/chat/chat.component.ts +++ b/src/app/components/chat-page/chat-page.component.ts @@ -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']); diff --git a/src/app/components/login/login.component.html b/src/app/components/login-page/login-page.component.html similarity index 100% rename from src/app/components/login/login.component.html rename to src/app/components/login-page/login-page.component.html diff --git a/src/app/components/login/login.component.scss b/src/app/components/login-page/login-page.component.scss similarity index 87% rename from src/app/components/login/login.component.scss rename to src/app/components/login-page/login-page.component.scss index e6faa6a..f834048 100644 --- a/src/app/components/login/login.component.scss +++ b/src/app/components/login-page/login-page.component.scss @@ -21,4 +21,7 @@ .login-logo{ width: 80%; + @media (min-width: 600px) { + width: 50%; + } } diff --git a/src/app/components/login/login.component.ts b/src/app/components/login-page/login-page.component.ts similarity index 88% rename from src/app/components/login/login.component.ts rename to src/app/components/login-page/login-page.component.ts index 5d0c825..7e95860 100644 --- a/src/app/components/login/login.component.ts +++ b/src/app/components/login-page/login-page.component.ts @@ -5,11 +5,11 @@ import { ToastController } from 'ionic-angular'; @Component({ moduleId: module.id, - templateUrl: 'login.component.html', - styleUrls: ['login.component.scss'] + 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; diff --git a/yarn.lock b/yarn.lock index 2cb9236..034bfae 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1754,6 +1754,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"