Fix model driven form routing; Add ChatComponent
Florian Hartwich
parent
27d92ed2dd
commit
263fff1036
|
|
@ -88,4 +88,11 @@
|
|||
<div id="right">
|
||||
<router-outlet name="right"></router-outlet>
|
||||
</div>
|
||||
<div id="footer">
|
||||
<router-outlet name="bottom"></router-outlet>
|
||||
</div>
|
||||
<button type="button" class="btn btn-primary chat-button"
|
||||
(click)="toggleChat()">
|
||||
<span class="glyphicon glyphicon-comment"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -65,6 +65,13 @@ export class AppComponent {
|
|||
return false;
|
||||
}
|
||||
|
||||
toggleChat() {
|
||||
if (!this.router.url.includes('chat')) {
|
||||
this.router.navigate([ {outlets: {'bottom': [ 'chat']}}]);
|
||||
} else {
|
||||
this.router.navigate([ {outlets: {'bottom': null}}]);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -11,6 +11,8 @@ import {RxDemoComponent} from './rxdemo/rxdemo.component';
|
|||
import {LoginGuard} from './login/login.guard';
|
||||
import {blogRoutingComponents} from "./blog/blog.routing";
|
||||
import {ModelDrivenFormComponent} from "./model-driven-form/model-driven-form.component";
|
||||
import {modelDrivenFormRoutingProviders} from "./model-driven-form/model-driven-form.routing";
|
||||
import {ChatComponent} from "./chat-component/chat.component";
|
||||
|
||||
export const appRoutes: Routes = [
|
||||
{path: 'dashboard', component: DashboardComponent, data: {title: 'Startseite'}},
|
||||
|
|
@ -21,6 +23,8 @@ export const appRoutes: Routes = [
|
|||
{path: 'blog', component: BlogComponent, data: {title: 'Blog'}},
|
||||
{path: 'model-form', component: ModelDrivenFormComponent, data: {title: 'Model Driven Task Form'}},
|
||||
|
||||
{path: 'chat', component: ChatComponent, outlet: 'bottom'},
|
||||
|
||||
{path: 'login', component: LoginComponent},
|
||||
|
||||
{path: 'tasks', canActivate: [LoginGuard], children: tasksRoutes},
|
||||
|
|
@ -35,7 +39,7 @@ export const appRoutes: Routes = [
|
|||
export const appRouting = RouterModule.forRoot(appRoutes);
|
||||
|
||||
export const routingComponents = [DashboardComponent, SettingsComponent, AboutComponent, LoginComponent, NotFoundComponent,
|
||||
RxDemoComponent, ModelDrivenFormComponent, ...blogRoutingComponents, ...tasksRoutingComponents];
|
||||
RxDemoComponent, ModelDrivenFormComponent, ChatComponent, ...blogRoutingComponents, ...tasksRoutingComponents];
|
||||
|
||||
export const routingProviders = [LoginGuard,
|
||||
export const routingProviders = [LoginGuard, ...modelDrivenFormRoutingProviders,
|
||||
...tasksRoutingProviders];
|
||||
|
|
|
|||
|
|
@ -0,0 +1,59 @@
|
|||
.chat
|
||||
{
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.chat li
|
||||
{
|
||||
margin-bottom: 10px;
|
||||
padding-bottom: 5px;
|
||||
border-bottom: 1px dotted #B3A9A9;
|
||||
}
|
||||
|
||||
.chat li.left .chat-body
|
||||
{
|
||||
margin-left: 60px;
|
||||
}
|
||||
|
||||
.chat li.right .chat-body
|
||||
{
|
||||
margin-right: 60px;
|
||||
}
|
||||
|
||||
|
||||
.chat li .chat-body p
|
||||
{
|
||||
margin: 0;
|
||||
color: #777777;
|
||||
}
|
||||
|
||||
.panel .slidedown .glyphicon, .chat .glyphicon
|
||||
{
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.panel-body
|
||||
{
|
||||
overflow-y: scroll;
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar
|
||||
{
|
||||
width: 12px;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
||||
background-color: #555;
|
||||
}
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
<div class="row">
|
||||
<div class="col-xs-7"></div>
|
||||
<div class="col-xs-4">
|
||||
<div class="panel panel-primary">
|
||||
<div class="panel-heading">
|
||||
<span class="glyphicon glyphicon-comment"></span> Chat
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<ul class="chat">
|
||||
<!--
|
||||
<li class="left clearfix"><span class="chat-img pull-left">
|
||||
<img src="http://placehold.it/50/55C1E7/fff&text=U" alt="User Avatar" class="img-circle">
|
||||
</span>
|
||||
<div class="chat-body clearfix">
|
||||
<div class="header">
|
||||
<strong class="primary-font">Jack Sparrow</strong> <small class="pull-right text-muted">
|
||||
<span class="glyphicon glyphicon-time"></span>12 mins ago</small>
|
||||
</div>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare
|
||||
dolor, quis ullamcorper ligula sodales.
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="right clearfix"><span class="chat-img pull-right">
|
||||
<img src="http://placehold.it/50/FA6F57/fff&text=ME" alt="User Avatar" class="img-circle">
|
||||
</span>
|
||||
<div class="chat-body clearfix">
|
||||
<div class="header">
|
||||
<small class=" text-muted"><span class="glyphicon glyphicon-time"></span>13 mins ago</small>
|
||||
<strong class="pull-right primary-font">Bhaumik Patel</strong>
|
||||
</div>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare
|
||||
dolor, quis ullamcorper ligula sodales.
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="left clearfix"><span class="chat-img pull-left">
|
||||
<img src="http://placehold.it/50/55C1E7/fff&text=U" alt="User Avatar" class="img-circle">
|
||||
</span>
|
||||
<div class="chat-body clearfix">
|
||||
<div class="header">
|
||||
<strong class="primary-font">Jack Sparrow</strong> <small class="pull-right text-muted">
|
||||
<span class="glyphicon glyphicon-time"></span>14 mins ago</small>
|
||||
</div>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare
|
||||
dolor, quis ullamcorper ligula sodales.
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="right clearfix"><span class="chat-img pull-right">
|
||||
<img src="http://placehold.it/50/FA6F57/fff&text=ME" alt="User Avatar" class="img-circle">
|
||||
</span>
|
||||
<div class="chat-body clearfix">
|
||||
<div class="header">
|
||||
<small class=" text-muted"><span class="glyphicon glyphicon-time"></span>15 mins ago</small>
|
||||
<strong class="pull-right primary-font">Bhaumik Patel</strong>
|
||||
</div>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare
|
||||
dolor, quis ullamcorper ligula sodales.
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
-->
|
||||
</ul>
|
||||
</div>
|
||||
<div class="panel-footer">
|
||||
<div class="input-group">
|
||||
<input id="btn-input" type="text" class="form-control input-sm" placeholder="Geben Sie hier Ihre Nachricht ein...">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-warning btn-sm" id="btn-chat">
|
||||
Absenden</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-1"></div>
|
||||
|
||||
</div>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
templateUrl: 'chat.component.html',
|
||||
styleUrls: ['chat.component.css']
|
||||
})
|
||||
export class ChatComponent implements OnInit {
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
export * from './chat.component';
|
||||
|
|
@ -1,3 +1,3 @@
|
|||
import {ModelDrivenFormComponent} from "./model-driven-form.component";
|
||||
import {TaskServiceModelForm} from "../services/task-service/task-model-form.service";
|
||||
|
||||
export const modelDrivenFormRoutingComponent = [ModelDrivenFormComponent];
|
||||
export const modelDrivenFormRoutingProviders = [TaskServiceModelForm];
|
||||
|
|
|
|||
|
|
@ -47,3 +47,9 @@ form {
|
|||
#right {
|
||||
overflow: hidden
|
||||
}
|
||||
|
||||
.chat-button {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
right: 10px;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue