+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/app/main/apps/calendar/calendar.component.scss b/src/app/main/apps/calendar/calendar.component.scss
new file mode 100644
index 00000000..6e0d17bf
--- /dev/null
+++ b/src/app/main/apps/calendar/calendar.component.scss
@@ -0,0 +1,303 @@
+@import "src/app/core/scss/fuse";
+@import "node_modules/angular-calendar/scss/angular-calendar";
+
+.cal-month-view {
+
+ .cal-header {
+
+ .cal-cell {
+ font-weight: 500;
+ }
+ }
+
+ .cal-day-cell {
+
+ &.cal-open {
+ @include mat-elevation(3);
+ }
+ }
+
+ .cal-open-day-events {
+ background: whitesmoke;
+ box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.13);
+ padding: 0;
+ display: flex;
+ flex-direction: column;
+
+ > div {
+ padding: 0 16px;
+ margin: 8px 16px;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: start;
+ background-color: white;
+ @include mat-elevation(1);
+ transition: box-shadow 300ms ease;
+
+ &:first-of-type {
+ margin-top: 24px;
+ }
+
+ &:last-of-type {
+ margin-bottom: 24px;
+ }
+
+ &:hover {
+ @include mat-elevation(3);
+ }
+
+ .cal-event {
+ top: 0;
+ margin: 0;
+ }
+
+ mwl-calendar-event-title {
+ flex: 1;
+
+ .cal-event-title {
+ display: block;
+ padding: 21px 24px;
+ line-height: 1;
+ text-decoration: none;
+ color: black;
+ }
+ }
+
+ mwl-calendar-event-actions {
+
+ .cal-event-actions {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+
+ .cal-event-action {
+ display: block;
+ line-height: 1;
+ padding: 8px;
+ }
+ }
+ }
+
+ }
+ }
+}
+
+.cal-week-view {
+
+ .cal-header > b {
+ font-weight: 500;
+ }
+
+ .cal-event {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+
+ mwl-calendar-event-title {
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ flex: 1;
+ order: 0;
+
+ .cal-event-title {
+ display: block;
+ //padding: 21px 24px;
+ line-height: 1;
+ text-decoration: none;
+ color: black;
+ }
+ }
+
+ mwl-calendar-event-actions {
+ order: 1;
+
+ .cal-event-actions {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+
+ .cal-event-action {
+ display: block;
+ line-height: 1;
+ padding: 8px;
+ }
+ }
+ }
+ }
+}
+
+.cal-day-view {
+
+ .cal-time {
+ font-weight: 500;
+ }
+
+ .cal-event {
+ display: flex;
+ flex-direction: row;
+
+ mwl-calendar-event-title {
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ flex: 1;
+ order: 0;
+
+ .cal-event-title {
+ display: block;
+ height: 26px;
+ line-height: 26px;
+ text-decoration: none;
+ color: black;
+ }
+ }
+
+ mwl-calendar-event-actions {
+ order: 1;
+
+ .cal-event-actions {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+
+ .cal-event-action {
+ display: block;
+ line-height: 1;
+ padding: 4px;
+ }
+ }
+ }
+ }
+}
+
+#calendar {
+ background: #FFFFFF;
+ height: 100%;
+
+ .header {
+ height: 200px;
+ min-height: 200px;
+ max-height: 200px;
+ padding: 24px;
+ position: relative;
+ background-size: 100% auto;
+ background-position: 0 50%;
+ background-repeat: no-repeat;
+ background-color: #FAFAFA;
+ color: #FFFFFF;
+ padding-bottom: 16px;
+
+ &:before {
+ content: '';
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ z-index: 1;
+ background: rgba(0, 0, 0, 0.45);
+ }
+
+ &.Jan {
+ background-image: url('/assets/images/backgrounds/january.jpg');
+ background-position: 0 45%;
+ }
+ &.Feb {
+ background-image: url('/assets/images/backgrounds/february.jpg');
+ background-position: 0 50%;
+ }
+ &.Mar {
+ background-image: url('/assets/images/backgrounds/march.jpg');
+ background-position: 0 45%;
+ }
+ &.Apr {
+ background-image: url('/assets/images/backgrounds/april.jpg');
+ background-position: 0 48%;
+ }
+ &.May {
+ background-image: url('/assets/images/backgrounds/may.jpg');
+ background-position: 0 47%;
+ }
+ &.Jun {
+ background-image: url('/assets/images/backgrounds/june.jpg');
+ background-position: 0 48%;
+ }
+ &.Jul {
+ background-image: url('/assets/images/backgrounds/july.jpg');
+ background-position: 0 3%;
+ }
+ &.Aug {
+ background-image: url('/assets/images/backgrounds/august.jpg');
+ background-position: 0 61%;
+ }
+ &.Sep {
+ background-image: url('/assets/images/backgrounds/september.jpg');
+ background-position: 0 58%;
+ }
+ &.Oct {
+ background-image: url('/assets/images/backgrounds/october.jpg');
+ background-position: 0 50%;
+ }
+ &.Nov {
+ background-image: url('/assets/images/backgrounds/november.jpg');
+ background-position: 0 46%;
+ }
+ &.Dec {
+ background-image: url('/assets/images/backgrounds/december.jpg');
+ background-position: 0 43%;
+ }
+
+ .header-content {
+ height: 100%;
+
+ .header-top {
+ position: relative;
+ z-index: 2;
+
+ .logo {
+
+ .logo-icon {
+ margin-right: 16px;
+ }
+
+ .logo-text {
+ font-size: 24px;
+ }
+ }
+ }
+
+ .header-bottom {
+ position: relative;
+ z-index: 2;
+
+ .title {
+ font-size: 20px;
+ min-width: 160px;
+ text-align: center;
+ font-weight: 500;
+ }
+ }
+ }
+
+ .add-event-button {
+ position: absolute;
+ right: 18px;
+ bottom: -32px;
+ z-index: 10;
+ }
+
+ md-icon {
+ color: #FFFFFF;
+ }
+ }
+
+ .content {
+ flex: 1;
+ overflow: auto;
+ padding: 24px;
+ }
+}
diff --git a/src/app/main/apps/calendar/calendar.component.ts b/src/app/main/apps/calendar/calendar.component.ts
new file mode 100644
index 00000000..b208c028
--- /dev/null
+++ b/src/app/main/apps/calendar/calendar.component.ts
@@ -0,0 +1,268 @@
+import { startOfDay, endOfDay, subDays, addDays, endOfMonth, isSameDay, isSameMonth, addHours } from 'date-fns';
+import { ChangeDetectionStrategy, Component, OnInit, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';
+import { Subject } from 'rxjs/Subject';
+import { MdDialog, MdDialogRef } from '@angular/material';
+import { EventFormDialogComponent } from './event-form/event-form.component';
+import { FormGroup } from '@angular/forms';
+import { CalendarEventModel } from './event.model';
+import { CalendarService } from './calendar.service';
+import {
+ CalendarEvent,
+ CalendarEventAction,
+ CalendarEventTimesChangedEvent,
+ CalendarMonthViewDay
+} from 'angular-calendar';
+import { FuseConfirmDialogComponent } from '../../../core/components/confirm-dialog/confirm-dialog.component';
+
+@Component({
+ selector : 'fuse-calendar',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ templateUrl : './calendar.component.html',
+ styleUrls : ['./calendar.component.scss'],
+ encapsulation : ViewEncapsulation.None
+})
+export class CalendarComponent implements OnInit
+{
+ @ViewChild('dialogContent') dialogContent: TemplateRef
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ today
+
+ Calendar
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ viewDate | calendarDate:(view + 'ViewTitle'):'en' }}
+
+
+
+
+
+
++ event-detail works! +
diff --git a/src/app/main/apps/calendar/event-detail/event-detail.component.scss b/src/app/main/apps/calendar/event-detail/event-detail.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/app/main/apps/calendar/event-detail/event-detail.component.ts b/src/app/main/apps/calendar/event-detail/event-detail.component.ts new file mode 100644 index 00000000..e9c91f28 --- /dev/null +++ b/src/app/main/apps/calendar/event-detail/event-detail.component.ts @@ -0,0 +1,19 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector : 'fuse-calendar-event-detail-dialog', + templateUrl: './event-detail.component.html', + styleUrls : ['./event-detail.component.scss'] +}) +export class EventDetailDialogComponent implements OnInit +{ + + constructor() + { + } + + ngOnInit() + { + } + +} diff --git a/src/app/main/apps/calendar/event-form/event-form.component.html b/src/app/main/apps/calendar/event-form/event-form.component.html new file mode 100644 index 00000000..ab1141a2 --- /dev/null +++ b/src/app/main/apps/calendar/event-form/event-form.component.html @@ -0,0 +1,139 @@ +
+ {{dialogTitle}}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/app/main/apps/calendar/event-form/event-form.component.scss b/src/app/main/apps/calendar/event-form/event-form.component.scss
new file mode 100644
index 00000000..ce618e53
--- /dev/null
+++ b/src/app/main/apps/calendar/event-form/event-form.component.scss
@@ -0,0 +1,12 @@
+.event-form-dialog {
+ .mat-dialog-container {
+ padding: 0;
+ max-width: 720px;
+ width: 720px;
+ }
+}
+
+:host {
+ display: flex;
+ flex-direction: column;
+}
diff --git a/src/app/main/apps/calendar/event-form/event-form.component.ts b/src/app/main/apps/calendar/event-form/event-form.component.ts
new file mode 100644
index 00000000..ccf7f713
--- /dev/null
+++ b/src/app/main/apps/calendar/event-form/event-form.component.ts
@@ -0,0 +1,64 @@
+import { Component, Inject, OnInit, ViewEncapsulation } from '@angular/core';
+import { MD_DIALOG_DATA, MdDialogRef } from '@angular/material';
+import { CalendarEvent } from 'angular-calendar';
+import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
+import 'rxjs/Rx';
+import { CalendarEventModel } from '../event.model';
+
+@Component({
+ selector : 'fuse-calendar-event-form-dialog',
+ templateUrl : './event-form.component.html',
+ styleUrls : ['./event-form.component.scss'],
+ encapsulation: ViewEncapsulation.None
+})
+
+export class EventFormDialogComponent implements OnInit
+{
+ event: CalendarEvent;
+ dialogTitle: string;
+ eventForm: FormGroup;
+ action: string;
+
+ constructor(public dialogRef: MdDialogRef
+
+
diff --git a/src/app/main/apps/chat/chat-start/chat-start.component.scss b/src/app/main/apps/chat/chat-start/chat-start.component.scss
new file mode 100644
index 00000000..b0e1afde
--- /dev/null
+++ b/src/app/main/apps/chat/chat-start/chat-start.component.scss
@@ -0,0 +1,30 @@
+@import "src/app/core/scss/fuse";
+
+:host {
+ display: flex;
+ flex: 1;
+ height: 100%;
+ background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.6) 20%, rgba(255, 255, 255, 0.8));
+
+ .big-circle {
+ background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.6) 20%, rgba(255, 255, 255, 0.8));
+ border-radius: 50%;
+ width: 300px;
+ height: 300px;
+ line-height: 300px;
+ text-align: center;
+
+ md-icon{
+ color: mat-color($accent);
+ }
+ }
+
+ .app-title {
+ font-weight: 500;
+ font-size: 32px;
+ }
+
+ .secondary-text {
+ font-size: 16px;
+ }
+}
diff --git a/src/app/main/apps/chat/chat-start/chat-start.component.ts b/src/app/main/apps/chat/chat-start/chat-start.component.ts
new file mode 100644
index 00000000..ab7a6e51
--- /dev/null
+++ b/src/app/main/apps/chat/chat-start/chat-start.component.ts
@@ -0,0 +1,19 @@
+import {Component, OnInit} from '@angular/core';
+
+@Component({
+ selector : 'fuse-chat-start',
+ templateUrl: './chat-start.component.html',
+ styleUrls : ['./chat-start.component.scss']
+})
+export class ChatStartComponent implements OnInit
+{
+
+ constructor()
+ {
+ }
+
+ ngOnInit()
+ {
+ }
+
+}
diff --git a/src/app/main/apps/chat/chat-view/chat-view.component.html b/src/app/main/apps/chat/chat-view/chat-view.component.html
new file mode 100644
index 00000000..7168346f
--- /dev/null
+++ b/src/app/main/apps/chat/chat-view/chat-view.component.html
@@ -0,0 +1,115 @@
+
+
+
+ chat
+
+
+
+ Chat App
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/app/main/apps/chat/chat-view/chat-view.component.scss b/src/app/main/apps/chat/chat-view/chat-view.component.scss
new file mode 100644
index 00000000..90a8a613
--- /dev/null
+++ b/src/app/main/apps/chat/chat-view/chat-view.component.scss
@@ -0,0 +1,135 @@
+:host {
+ display: flex;
+ flex: 1;
+ height: 100%;
+ background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.6) 20%, rgba(255, 255, 255, 0.8));
+ overflow: hidden;
+
+ .chat {
+ height: 100%;
+
+ .chat-toolbar {
+ min-height: 64px;
+ background-color: #F3F4F5;
+ color: rgba(0, 0, 0, 0.87);
+ border-bottom: 1px solid rgba(0, 0, 0, .08);
+
+ .responsive-chats-button {
+ padding: 0;
+ }
+
+ .chat-contact {
+ cursor: pointer;
+
+ .avatar {
+ margin-right: 16px;
+ }
+
+ .chat-contact-name {
+
+ }
+ }
+ }
+
+ #chat-content {
+ background: transparent;
+
+ .message-row {
+ padding: 16px;
+
+ .bubble {
+ position: relative;
+ padding: 6px 7px 8px 9px;
+ background-color: #FFF;
+ box-shadow: 0 1px .5px rgba(0, 0, 0, .13);
+ border-radius: 6px;
+
+ &:before {
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAmCAMAAADp2asXAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAADGUExURQAAAP////b29vn5+f///wAAAP///wAAAAAAAP///9ra2v////j4+PHx8fv7++Hh4fHx8f////////////////39/QAAAP////////z8/P////39/f39/fz8/P////////////z8/P////////////z8/P////////////v7+/Hx8f///9bW1vz8/K2trf////39/f39/WJiYgAAAExMTFtbWwAAAN3d3cjIyPr6+vX19QAAAO7u7vz8/NTU1Ofn5zMzM////zGPlXsAAABBdFJOUwAcm/kREh4CCDWL1SneR6TfAQffhMYK/A5nRrLWfRc5DW2ih5f+19Kn+9v4g/1LCJuXHwQUKgahcXS6DNnlDMMKKzPoTgAAAKBJREFUKM+V08USwmAQA+C/0NIWd3d3d8/7vxTMcIPkQK7f7CG7s8bQAOY/SCuwFYQU1P+eiCqIK2gpWCmoCrAgoKQgJ8CHgIqAMjg0MxxSQ3DogEMWFBZtUPAHYGB1CyDQWE6AH7BrfXzlAxGAQhECTGAmwN1Okz0Gb/LW4fEItIfrOfNELMh3tck7u+PhcT2zQ7l77/K8iY8yJwV3BeYFqpc/uSyPGdAAAAAASUVORK5CYII=);
+ content: '';
+ position: absolute;
+ left: -11px;
+ bottom: 3px;
+ width: 12px;
+ height: 19px;
+ background-position: 50% 50%;
+ background-repeat: no-repeat;
+ background-size: contain;
+ }
+
+ .message {
+ white-space: pre-wrap;
+ }
+
+ .time {
+ font-size: 11px;
+ margin-top: 8px;
+ text-align: right;
+ }
+ }
+
+ &.contact {
+
+ .avatar {
+ margin: 0 16px 0 0;
+ }
+ }
+
+ &.user {
+ align-items: flex-end;
+
+ .avatar {
+ order: 2;
+ margin: 0 0 0 16px;
+ }
+
+ .bubble {
+ margin-left: auto;
+ background-color: #E8F5E9;
+ border: 1px solid #DFEBE0;
+ order: 1;
+ &:before {
+ right: -11px;
+ left: auto;
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAmCAMAAADp2asXAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAD2UExURQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGRsXAAAANzwzNPmxNrtyau5oIWRedDkwNntyczgwdfpyJ+/n97wzsLWtNjsytvwzczfvtPmxau6nNjqxtrtyio1KtzwzNjryAAAANzwzgAAANzwzK7Aor/Us9Lnw8vevAAAAMzevtbpxrvMrX+IdwAAAEROOi45Lr3MrZGjf9LoxX+MctnqydLkwhgYGMzfv9vuyQAAANzwzNvuy9zxy7vMu7XGqNvtzKKykwAAANruzKq6nLnMriQkGMXXuL3PsNjsySgzKAAAANLkw83fvd3vy9z4xtzwzRpFmIEAAABQdFJOUwAXChEGBAMBAgwhDvJ7k0YqMc0Zmwj6apf2kjU0+dkw/swh/CP9j2Wr2gndvaYeBRoxQg6gUPt/FaHJGdTj9A9k7XQLeE6iFcN12xkSt9r4NKizowAAAMFJREFUKM+V0sdywlAMBVDbMX7PQCihQ+iQ0HsJvfem/P/PwBIzugu0PXNnNNJVyPmhsIPhhoB2COwIGuLdhAcl3AhCBoBoHUC6BCBbA0C/EkBFB5D/FjxQwQYg1RI8UKINgDoSAPUlAPqUAMgfAEBfXsEDBV0+Hogi4Zhg4THj9YwHoqEBYOrgYTI3GVgMNn8r+Qq94k9yZNosW/3Hy9VuTjWfHkOX6367bGZUU7de66ieHZrO1OGg8Z1WTgYAFLgD5S1PCkzo1B0AAAAASUVORK5CYII=);
+ }
+ }
+ }
+ }
+ }
+
+ .chat-footer {
+ min-height: 64px;
+ max-height: 96px;
+ background-color: #F3F4F5;
+ color: rgba(0, 0, 0, 0.87);
+ border-top: 1px solid rgba(0, 0, 0, .08);
+ padding: 8px 8px 8px 16px;
+
+ .reply-form {
+
+ md-input-container {
+ margin: 0;
+ padding-right: 16px;
+
+ textarea {
+ overflow: auto;
+ max-height: 80px;
+ transition: height 200ms ease;
+ &.grow {
+ height: 80px;
+ }
+ }
+
+ .md-errors-spacer {
+ display: none;
+ }
+ }
+
+ .md-button {
+ margin: 0;
+ }
+ }
+ }
+ }
+}
diff --git a/src/app/main/apps/chat/chat-view/chat-view.component.ts b/src/app/main/apps/chat/chat-view/chat-view.component.ts
new file mode 100644
index 00000000..24bcf63d
--- /dev/null
+++ b/src/app/main/apps/chat/chat-view/chat-view.component.ts
@@ -0,0 +1,101 @@
+import { AfterViewInit, Component, OnInit, ViewChild, ViewChildren } from '@angular/core';
+import { ChatService } from '../chat.service';
+import { NgForm } from '@angular/forms';
+import { PerfectScrollbarDirective } from 'ngx-perfect-scrollbar';
+
+@Component({
+ selector : 'fuse-chat-view',
+ templateUrl: './chat-view.component.html',
+ styleUrls : ['./chat-view.component.scss']
+})
+export class ChatViewComponent implements OnInit, AfterViewInit
+{
+ user: any;
+ chat: any;
+ dialog: any;
+ contact: any;
+ replyInput: any;
+ selectedChat: any;
+ @ViewChild(PerfectScrollbarDirective) directiveScroll: PerfectScrollbarDirective;
+ @ViewChildren('replyInput') replyInputField;
+ @ViewChild('replyForm') replyForm: NgForm;
+
+ constructor(private chatService: ChatService)
+ {
+ }
+
+ ngOnInit()
+ {
+ this.user = this.chatService.user;
+ this.chatService.onChatSelected
+ .subscribe(chatData => {
+ if ( chatData )
+ {
+ this.selectedChat = chatData;
+ this.contact = chatData.contact;
+ this.dialog = chatData.dialog;
+ this.readyToReply();
+ }
+ });
+ }
+
+ ngAfterViewInit()
+ {
+ this.replyInput = this.replyInputField.first.nativeElement;
+ this.readyToReply();
+ }
+
+ selectContact()
+ {
+ this.chatService.selectContact(this.contact);
+ }
+
+ readyToReply()
+ {
+ setTimeout(() => {
+ this.replyForm.reset();
+ this.focusReplyInput();
+ this.scrollToBottom();
+ });
+
+ }
+
+ focusReplyInput()
+ {
+ setTimeout(() => {
+ this.replyInput.focus();
+ });
+ }
+
+ scrollToBottom(speed?: number)
+ {
+ speed = speed || 400;
+ if ( this.directiveScroll )
+ {
+ setTimeout(() => {
+ this.directiveScroll.scrollToBottom(0, speed);
+ });
+ }
+
+ }
+
+
+ reply(event)
+ {
+ // Message
+ const message = {
+ who : this.user.id,
+ message: this.replyForm.form.value.message,
+ time : new Date().toISOString()
+ };
+
+ // Add the message to the chat
+ this.dialog.push(message);
+
+ // Update the server
+ this.chatService.updateDialog(this.selectedChat.chatId, this.dialog).then(response => {
+ this.readyToReply();
+ });
+
+ }
+}
diff --git a/src/app/main/apps/chat/chat.component.html b/src/app/main/apps/chat/chat.component.html
index 3a6e1396..145788aa 100644
--- a/src/app/main/apps/chat/chat.component.html
+++ b/src/app/main/apps/chat/chat.component.html
@@ -1,3 +1,43 @@
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ![{{contact.name}}]()
+
+
+
+
+
+
+ {{contact.name}}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+ 
+
+
+
+
+
+
+
+
+ {{message.time | date:'medium'}}
+ - chat works! -
+
+
+
+
+
+
+
+
diff --git a/src/app/main/apps/chat/chat.component.scss b/src/app/main/apps/chat/chat.component.scss
index e69de29b..9f6a3c33 100644
--- a/src/app/main/apps/chat/chat.component.scss
+++ b/src/app/main/apps/chat/chat.component.scss
@@ -0,0 +1,31 @@
+:host {
+ height: 100% !important;
+
+ .center {
+ padding: 32px 32px 0 32px;
+ max-width: 1400px;
+ height: 100%;
+ margin: 0 auto;
+
+ .content-card {
+ position: relative;
+ background: url('/assets/images/patterns/rain-grey.png') repeat;
+ height: 100%;
+
+ .mat-sidenav-container {
+ width: 100%;
+ height: 100%;
+ background: transparent;
+
+ md-sidenav {
+ display: flex;
+ flex-direction: column;
+ width: 400px;
+ max-width: 90%;
+ box-shadow: 0 0 1px rgba(0, 0, 0, .37);
+ overflow: hidden;
+ }
+ }
+ }
+ }
+}
diff --git a/src/app/main/apps/chat/chat.component.ts b/src/app/main/apps/chat/chat.component.ts
index dae90173..85c78ee9 100644
--- a/src/app/main/apps/chat/chat.component.ts
+++ b/src/app/main/apps/chat/chat.component.ts
@@ -1,15 +1,25 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { ChatService } from './chat.service';
@Component({
- selector: 'fuse-chat',
- templateUrl: './chat.component.html',
- styleUrls: ['./chat.component.scss']
+ selector : 'fuse-chat',
+ templateUrl: './chat.component.html',
+ styleUrls : ['./chat.component.scss']
})
-export class ChatComponent implements OnInit {
+export class ChatComponent implements OnInit
+{
+ selectedChat: any;
- constructor() { }
+ constructor(private chatService: ChatService)
+ {
+ }
- ngOnInit() {
- }
+ ngOnInit()
+ {
+ this.chatService.onChatSelected
+ .subscribe(chatData => {
+ this.selectedChat = chatData;
+ });
+ }
}
diff --git a/src/app/main/apps/chat/chat.module.ts b/src/app/main/apps/chat/chat.module.ts
index 4f5050d8..4cb3e4e5 100644
--- a/src/app/main/apps/chat/chat.module.ts
+++ b/src/app/main/apps/chat/chat.module.ts
@@ -2,10 +2,21 @@ import {NgModule} from '@angular/core';
import {SharedModule} from '../../../core/modules/shared.module';
import {RouterModule, Routes} from '@angular/router';
import {ChatComponent} from './chat.component';
+import {ChatService} from './chat.service';
+import { ChatViewComponent } from './chat-view/chat-view.component';
+import { ChatStartComponent } from './chat-start/chat-start.component';
+import {ChatsSidenavComponent} from './sidenavs/left/chats/chats.component';
+import { UserSidenavComponent } from './sidenavs/left/user/user.component';
+import { LeftSidenavComponent } from './sidenavs/left/left.component';
+import { RightSidenavComponent } from './sidenavs/right/right.component';
+import { ContactSidenavComponent } from './sidenavs/right/contact/contact.component';
const routes: Routes = [
{
- path: 'apps/chat', component: ChatComponent, children: []
+ path : '**', component: ChatComponent, children: [],
+ resolve: {
+ chat: ChatService
+ }
}
];
@@ -15,7 +26,17 @@ const routes: Routes = [
RouterModule.forChild(routes)
],
declarations: [
- ChatComponent
+ ChatComponent,
+ ChatViewComponent,
+ ChatStartComponent,
+ ChatsSidenavComponent,
+ UserSidenavComponent,
+ LeftSidenavComponent,
+ RightSidenavComponent,
+ ContactSidenavComponent
+ ],
+ providers : [
+ ChatService
]
})
export class ChatModule
diff --git a/src/app/main/apps/chat/chat.service.ts b/src/app/main/apps/chat/chat.service.ts
new file mode 100644
index 00000000..78638753
--- /dev/null
+++ b/src/app/main/apps/chat/chat.service.ts
@@ -0,0 +1,260 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
+import { Observable } from 'rxjs/Observable';
+import { Http } from '@angular/http';
+import { Subject } from 'rxjs/Subject';
+import { BehaviorSubject } from 'rxjs/BehaviorSubject';
+
+@Injectable()
+export class ChatService implements Resolve
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ search
+
+
+
+
+
+
+
+
+
diff --git a/src/app/main/apps/chat/sidenavs/left/chats/chats.component.scss b/src/app/main/apps/chat/sidenavs/left/chats/chats.component.scss
new file mode 100644
index 00000000..c2b36587
--- /dev/null
+++ b/src/app/main/apps/chat/sidenavs/left/chats/chats.component.scss
@@ -0,0 +1,110 @@
+@import "src/app/core/scss/fuse";
+
+:host {
+ display: flex;
+ flex: 1;
+ flex-direction: column;
+
+ .sidenav-header {
+
+ md-toolbar {
+ border-bottom: 1px solid rgba(0, 0, 0, .08);
+
+ .avatar-wrapper {
+
+ .avatar, .status {
+ cursor: pointer;
+ }
+ }
+
+ .search {
+ height: 36px;
+ line-height: 36px;
+ padding: 8px;
+ background: #FFFFFF;
+ font-size: 13px;
+ @include mat-elevation(1);
+
+ .icon {
+ margin: 0;
+ color: rgba(0, 0, 0, 0.54);
+ }
+
+ input {
+ padding-left: 12px;
+ height: 36px;
+ color: rgba(0, 0, 0, 0.54);
+ border: none;
+ }
+ }
+ }
+ }
+
+ .sidenav-content {
+ .contact-list, .chat-list {
+
+ .mat-subheader {
+ padding-left: 16px;
+ font-size: 20px;
+ font-weight: 300;
+ height: 88px;
+ line-height: 88px;
+ color: mat-color($accent);
+ }
+
+ .contact {
+ white-space: normal;
+ text-align: left;
+ letter-spacing: .010em;
+ min-height: 88px;
+ border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+ padding: 16px;
+ font-weight: 400;
+
+ .avatar-wrapper {
+
+ .avatar {
+ margin-right: 16px;
+ }
+ }
+
+ .contact-name {
+ font-size: 16px;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ }
+
+ .contact-last-message {
+ line-height: 1.6em;
+ margin: 0;
+ font-weight: 500;
+ color: rgba(0, 0, 0, 0.54);
+ }
+
+ .contact-mood {
+
+ }
+
+ .unread-message-count {
+ border-radius: 50%;
+ text-align: center;
+ width: 24px;
+ height: 24px;
+ line-height: 24px;
+ background-color: mat-color($accent);
+ color: map-get($accent, default-contrast);
+ }
+ }
+ }
+
+ .no-results-message {
+ position: absolute;
+ width: 100%;
+ height: 88px;
+ padding: 16px;
+ background: #FFFFFF;
+ font-size: 15px;
+ font-weight: 400;
+ }
+ }
+}
diff --git a/src/app/main/apps/chat/sidenavs/left/chats/chats.component.ts b/src/app/main/apps/chat/sidenavs/left/chats/chats.component.ts
new file mode 100644
index 00000000..76ddc7c1
--- /dev/null
+++ b/src/app/main/apps/chat/sidenavs/left/chats/chats.component.ts
@@ -0,0 +1,66 @@
+import { Component, OnInit } from '@angular/core';
+import { ChatService } from '../../../chat.service';
+import { FuseMdSidenavHelperService } from '../../../../../../core/directives/md-sidenav-helper/md-sidenav-helper.service';
+import { ObservableMedia } from '@angular/flex-layout';
+
+@Component({
+ selector : 'fuse-chat-chats-sidenav',
+ templateUrl: './chats.component.html',
+ styleUrls : ['./chats.component.scss']
+})
+export class ChatsSidenavComponent implements OnInit
+{
+ user: any;
+ chats: any[];
+ contacts: any[];
+ chatSearch: any;
+
+ constructor(private chatService: ChatService,
+ private fuseMdSidenavService: FuseMdSidenavHelperService,
+ public media: ObservableMedia)
+ {
+ this.chatSearch = {
+ name: ''
+ };
+ }
+
+ ngOnInit()
+ {
+ this.user = this.chatService.user;
+ this.chats = this.chatService.chats;
+ this.contacts = this.chatService.contacts;
+
+ this.chatService.onChatsUpdated.subscribe(updatedChats => {
+ this.chats = updatedChats;
+ });
+
+ this.chatService.onUserUpdated.subscribe(updatedUser => {
+ this.user = updatedUser;
+ });
+ }
+
+ getChat(contact)
+ {
+ this.chatService.getChat(contact);
+
+ if ( !this.media.isActive('gt-md') )
+ {
+ this.fuseMdSidenavService.getSidenav('chat-left-sidenav').toggle();
+ }
+ }
+
+ setUserStatus(status)
+ {
+ this.chatService.setUserStatus(status);
+ }
+
+ changeLeftSidenavView(view)
+ {
+ this.chatService.onLeftSidenavViewChanged.next(view);
+ }
+
+ logout()
+ {
+ console.info('logout triggered');
+ }
+}
diff --git a/src/app/main/apps/chat/sidenavs/left/left.component.html b/src/app/main/apps/chat/sidenavs/left/left.component.html
new file mode 100644
index 00000000..43df8660
--- /dev/null
+++ b/src/app/main/apps/chat/sidenavs/left/left.component.html
@@ -0,0 +1,11 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Chats
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Contacts
+
+
+
+
+
+
+
+
+
+
diff --git a/src/app/main/apps/chat/sidenavs/left/left.component.scss b/src/app/main/apps/chat/sidenavs/left/left.component.scss
new file mode 100644
index 00000000..3661f0ce
--- /dev/null
+++ b/src/app/main/apps/chat/sidenavs/left/left.component.scss
@@ -0,0 +1,20 @@
+:host {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+
+ .views {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+
+ .view {
+ position: absolute;
+ height: 100%;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ top: 0;
+ }
+ }
+}
diff --git a/src/app/main/apps/chat/sidenavs/left/left.component.ts b/src/app/main/apps/chat/sidenavs/left/left.component.ts
new file mode 100644
index 00000000..0b16799f
--- /dev/null
+++ b/src/app/main/apps/chat/sidenavs/left/left.component.ts
@@ -0,0 +1,27 @@
+import { Component, OnInit } from '@angular/core';
+import { Animations } from '../../../../../core/animations';
+import { ChatService } from '../../chat.service';
+
+@Component({
+ selector : 'fuse-chat-left-sidenav',
+ templateUrl: './left.component.html',
+ styleUrls : ['./left.component.scss'],
+ animations : [Animations.slideInLeft, Animations.slideInRight]
+})
+export class LeftSidenavComponent implements OnInit
+{
+ view: string;
+
+ constructor(private chatService: ChatService)
+ {
+ this.view = 'chats';
+ }
+
+ ngOnInit()
+ {
+ this.chatService.onLeftSidenavViewChanged.subscribe(view => {
+ this.view = view;
+ });
+ }
+
+}
diff --git a/src/app/main/apps/chat/sidenavs/left/user/user.component.html b/src/app/main/apps/chat/sidenavs/left/user/user.component.html
new file mode 100644
index 00000000..00fa8bbb
--- /dev/null
+++ b/src/app/main/apps/chat/sidenavs/left/user/user.component.html
@@ -0,0 +1,78 @@
+
+
+
+
+
+
+
+
+
+ ![{{user.name}}]()
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{user.name}}
+
+
+
+
+
+
+
+
+
+
diff --git a/src/app/main/apps/chat/sidenavs/left/user/user.component.scss b/src/app/main/apps/chat/sidenavs/left/user/user.component.scss
new file mode 100644
index 00000000..9a844a8f
--- /dev/null
+++ b/src/app/main/apps/chat/sidenavs/left/user/user.component.scss
@@ -0,0 +1,21 @@
+@import "src/app/core/scss/fuse";
+
+:host {
+ display: flex;
+ flex: 1;
+ flex-direction: column;
+
+ md-toolbar {
+ background-color: mat-color($accent);
+ color: map-get($accent, default-contrast);
+
+ .toolbar-bottom {
+ height: 240px;
+ }
+
+ }
+
+ .sidenav-content{
+ background: whitesmoke;
+ }
+}
diff --git a/src/app/main/apps/chat/sidenavs/left/user/user.component.ts b/src/app/main/apps/chat/sidenavs/left/user/user.component.ts
new file mode 100644
index 00000000..9f4ce7bc
--- /dev/null
+++ b/src/app/main/apps/chat/sidenavs/left/user/user.component.ts
@@ -0,0 +1,47 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { ChatService } from '../../../chat.service';
+import { FormControl, FormGroup } from '@angular/forms';
+import 'rxjs/Rx';
+
+@Component({
+ selector : 'fuse-chat-user-sidenav',
+ templateUrl: './user.component.html',
+ styleUrls : ['./user.component.scss']
+})
+export class UserSidenavComponent implements OnInit, OnDestroy
+{
+ user: any;
+ onFormChange: any;
+ userForm: FormGroup;
+
+ constructor(private chatService: ChatService)
+ {
+ this.user = this.chatService.user;
+ this.userForm = new FormGroup({
+ mood : new FormControl(this.user.mood),
+ status: new FormControl(this.user.status)
+ });
+ }
+
+ ngOnInit()
+ {
+ this.onFormChange = this.userForm.valueChanges
+ .debounceTime(500)
+ .distinctUntilChanged()
+ .subscribe(data => {
+ this.user.mood = data.mood;
+ this.user.status = data.status;
+ this.chatService.updateUserData(this.user);
+ });
+ }
+
+ changeLeftSidenavView(view)
+ {
+ this.chatService.onLeftSidenavViewChanged.next(view);
+ }
+
+ ngOnDestroy()
+ {
+ this.onFormChange.unsubscribe();
+ }
+}
diff --git a/src/app/main/apps/chat/sidenavs/right/contact/contact.component.html b/src/app/main/apps/chat/sidenavs/right/contact/contact.component.html
new file mode 100644
index 00000000..2677e347
--- /dev/null
+++ b/src/app/main/apps/chat/sidenavs/right/contact/contact.component.html
@@ -0,0 +1,47 @@
+
+
+
+
+
+
+
+
+
+ ![{{contact.name}}]()
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Contact Info
+
+
+
+ {{contact.name}}
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/app/main/apps/chat/sidenavs/right/contact/contact.component.scss b/src/app/main/apps/chat/sidenavs/right/contact/contact.component.scss
new file mode 100644
index 00000000..9a844a8f
--- /dev/null
+++ b/src/app/main/apps/chat/sidenavs/right/contact/contact.component.scss
@@ -0,0 +1,21 @@
+@import "src/app/core/scss/fuse";
+
+:host {
+ display: flex;
+ flex: 1;
+ flex-direction: column;
+
+ md-toolbar {
+ background-color: mat-color($accent);
+ color: map-get($accent, default-contrast);
+
+ .toolbar-bottom {
+ height: 240px;
+ }
+
+ }
+
+ .sidenav-content{
+ background: whitesmoke;
+ }
+}
diff --git a/src/app/main/apps/chat/sidenavs/right/contact/contact.component.ts b/src/app/main/apps/chat/sidenavs/right/contact/contact.component.ts
new file mode 100644
index 00000000..70a71789
--- /dev/null
+++ b/src/app/main/apps/chat/sidenavs/right/contact/contact.component.ts
@@ -0,0 +1,25 @@
+import { Component, OnInit } from '@angular/core';
+import { ChatService } from '../../../chat.service';
+
+@Component({
+ selector : 'fuse-chat-contact-sidenav',
+ templateUrl: './contact.component.html',
+ styleUrls : ['./contact.component.scss']
+})
+export class ContactSidenavComponent implements OnInit
+{
+ contact: any;
+
+ constructor(private chatService: ChatService)
+ {
+
+ }
+
+ ngOnInit()
+ {
+ this.chatService.onContactSelected.subscribe(contact => {
+ this.contact = contact;
+ });
+ }
+
+}
diff --git a/src/app/main/apps/chat/sidenavs/right/right.component.html b/src/app/main/apps/chat/sidenavs/right/right.component.html
new file mode 100644
index 00000000..a193e1f3
--- /dev/null
+++ b/src/app/main/apps/chat/sidenavs/right/right.component.html
@@ -0,0 +1,8 @@
+
+
+
+
+
+
diff --git a/src/app/main/apps/chat/sidenavs/right/right.component.scss b/src/app/main/apps/chat/sidenavs/right/right.component.scss
new file mode 100644
index 00000000..3661f0ce
--- /dev/null
+++ b/src/app/main/apps/chat/sidenavs/right/right.component.scss
@@ -0,0 +1,20 @@
+:host {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+
+ .views {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+
+ .view {
+ position: absolute;
+ height: 100%;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ top: 0;
+ }
+ }
+}
diff --git a/src/app/main/apps/chat/sidenavs/right/right.component.ts b/src/app/main/apps/chat/sidenavs/right/right.component.ts
new file mode 100644
index 00000000..3006f034
--- /dev/null
+++ b/src/app/main/apps/chat/sidenavs/right/right.component.ts
@@ -0,0 +1,27 @@
+import { Component, OnInit } from '@angular/core';
+import { Animations } from '../../../../../core/animations';
+import { ChatService } from '../../chat.service';
+
+@Component({
+ selector : 'fuse-chat-right-sidenav',
+ templateUrl: './right.component.html',
+ styleUrls : ['./right.component.scss'],
+ animations : [Animations.slideInLeft, Animations.slideInRight]
+})
+export class RightSidenavComponent implements OnInit
+{
+ view: string;
+
+ constructor(private chatService: ChatService)
+ {
+ this.view = 'contact';
+ }
+
+ ngOnInit()
+ {
+ this.chatService.onRightSidenavViewChanged.subscribe(view => {
+ this.view = view;
+ });
+ }
+
+}