[U] channel.comp styling, message class
This commit is contained in:
parent
57306fe7bf
commit
d42283ecf2
3 changed files with 65 additions and 110 deletions
|
|
@ -1,3 +1,13 @@
|
||||||
export class Message {
|
export class Message {
|
||||||
|
id: number;
|
||||||
|
channel_id: number;
|
||||||
|
user_id: string;
|
||||||
|
message: string;
|
||||||
|
inserted_at: string | Date;
|
||||||
|
|
||||||
|
constructor(channel_id: number, user_id: string, message: string) {
|
||||||
|
this.channel_id = channel_id;
|
||||||
|
this.user_id = user_id;
|
||||||
|
this.message = message;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1,106 +1,34 @@
|
||||||
<ng-container *ngIf="channel">
|
<ng-container *ngIf="channel">
|
||||||
<div class="row headerRow">
|
<div class="d-flex flex-column justify-content-between channelContainer">
|
||||||
<div class="col-7 col-sm-10">
|
<div class="row headerRow">
|
||||||
<strong>#</strong><strong #name contenteditable="true" (click)="dataUpdated=true">{{ channel.name }}</strong>
|
<div class="col-7 col-sm-10">
|
||||||
</div>
|
<strong>#</strong><strong #name contenteditable="true" (click)="dataUpdated=true">{{ channel.name }}</strong>
|
||||||
<div class="col-5 col-sm-2">
|
</div>
|
||||||
<div class="text-right">
|
<div class="col-5 col-sm-2">
|
||||||
<button class="btn btn-sm btn-primary mb-1" [disabled]="!dataUpdated" (click)="updateChannel(name.innerText, desc.innerText)">Save</button>
|
<div class="text-right">
|
||||||
<button class="btn btn-sm btn-danger ml-1 mb-1" (click)="deleteChannel()">Delete</button>
|
<button class="btn btn-sm btn-primary mb-1" [disabled]="!dataUpdated" (click)="updateChannel(name.innerText, desc.innerText)">Save</button>
|
||||||
|
<button class="btn btn-sm btn-danger ml-1 mb-1" (click)="deleteChannel()">Delete</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-12">
|
||||||
|
<span #desc contenteditable="true" (click)="dataUpdated=true">{{ channel.description }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-12">
|
<div class="row messageRow">
|
||||||
<span #desc contenteditable="true" (click)="dataUpdated=true">{{ channel.description }}</span>
|
<div class="col-12 p-0">
|
||||||
</div>
|
<ul class="list-group list-group-flush">
|
||||||
</div>
|
<li *ngFor="let m of messages" class="list-group-item">{{m.message}}</li>
|
||||||
<div class="row messageRow">
|
</ul>
|
||||||
<div class="col-12 p-0">
|
|
||||||
<ul class="list-group list-group-flush">
|
|
||||||
<li class="list-group-item">Cras justo odio</li>
|
|
||||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
|
||||||
<li class="list-group-item">Morbi leo risus</li>
|
|
||||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
|
||||||
<li class="list-group-item">Vestibulum at eros</li>
|
|
||||||
<li class="list-group-item">Cras justo odio</li>
|
|
||||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
|
||||||
<li class="list-group-item">Morbi leo risus</li>
|
|
||||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
|
||||||
<li class="list-group-item">Vestibulum at eros</li>
|
|
||||||
<li class="list-group-item">Cras justo odio</li>
|
|
||||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
|
||||||
<li class="list-group-item">Morbi leo risus</li>
|
|
||||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
|
||||||
<li class="list-group-item">Vestibulum at eros</li>
|
|
||||||
<li class="list-group-item">Cras justo odio</li>
|
|
||||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
|
||||||
<li class="list-group-item">Morbi leo risus</li>
|
|
||||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
|
||||||
<li class="list-group-item">Vestibulum at eros</li>
|
|
||||||
<li class="list-group-item">Cras justo odio</li>
|
|
||||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
|
||||||
<li class="list-group-item">Morbi leo risus</li>
|
|
||||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
|
||||||
<li class="list-group-item">Vestibulum at eros</li>
|
|
||||||
<li class="list-group-item">Cras justo odio</li>
|
|
||||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
|
||||||
<li class="list-group-item">Morbi leo risus</li>
|
|
||||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
|
||||||
<li class="list-group-item">Vestibulum at eros</li>
|
|
||||||
<li class="list-group-item">Cras justo odio</li>
|
|
||||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
|
||||||
<li class="list-group-item">Morbi leo risus</li>
|
|
||||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
|
||||||
<li class="list-group-item">Vestibulum at eros</li>
|
|
||||||
<li class="list-group-item">Cras justo odio</li>
|
|
||||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
|
||||||
<li class="list-group-item">Morbi leo risus</li>
|
|
||||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
|
||||||
<li class="list-group-item">Vestibulum at eros</li>
|
|
||||||
<li class="list-group-item">Cras justo odio</li>
|
|
||||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
|
||||||
<li class="list-group-item">Morbi leo risus</li>
|
|
||||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
|
||||||
<li class="list-group-item">Vestibulum at eros</li>
|
|
||||||
<li class="list-group-item">Cras justo odio</li>
|
|
||||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
|
||||||
<li class="list-group-item">Morbi leo risus</li>
|
|
||||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
|
||||||
<li class="list-group-item">Vestibulum at eros</li>
|
|
||||||
<li class="list-group-item">Cras justo odio</li>
|
|
||||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
|
||||||
<li class="list-group-item">Morbi leo risus</li>
|
|
||||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
|
||||||
<li class="list-group-item">Vestibulum at eros</li>
|
|
||||||
<li class="list-group-item">Cras justo odio</li>
|
|
||||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
|
||||||
<li class="list-group-item">Morbi leo risus</li>
|
|
||||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
|
||||||
<li class="list-group-item">Vestibulum at eros</li>
|
|
||||||
<li class="list-group-item">Cras justo odio</li>
|
|
||||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
|
||||||
<li class="list-group-item">Morbi leo risus</li>
|
|
||||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
|
||||||
<li class="list-group-item">Vestibulum at eros</li>
|
|
||||||
<li class="list-group-item">Cras justo odio</li>
|
|
||||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
|
||||||
<li class="list-group-item">Morbi leo risus</li>
|
|
||||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
|
||||||
<li class="list-group-item">Vestibulum at eros</li>
|
|
||||||
<li class="list-group-item">Cras justo odio</li>
|
|
||||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
|
||||||
<li class="list-group-item">Morbi leo risus</li>
|
|
||||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
|
||||||
<li class="list-group-item">Vestibulum at eros</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- send msg -->
|
|
||||||
<div class="row inputRow">
|
|
||||||
<div class="card w-100 m-3 d-flex flex-row">
|
|
||||||
<input [(ngModel)]="messageInput" type="text" class="input flex-grow-1">
|
|
||||||
<div class="optionRow">
|
|
||||||
<button class="btn btn-sm btn-primary btnSend ml-1">Send</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- send msg -->
|
||||||
|
<div class="inputRow">
|
||||||
|
<div class="card w-100 d-flex flex-row">
|
||||||
|
<input [(ngModel)]="messageInput" type="text" class="input flex-grow-1">
|
||||||
|
<div class="optionRow">
|
||||||
|
<button class="btn btn-sm btn-primary btnSend ml-1">Send</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
|
|
|
||||||
|
|
@ -3,24 +3,41 @@
|
||||||
padding-bottom: 10px;
|
padding-bottom: 10px;
|
||||||
border-bottom: 1px dashed #343a40;
|
border-bottom: 1px dashed #343a40;
|
||||||
}
|
}
|
||||||
|
.channelContainer {
|
||||||
|
height: calc(100vh - 71px);
|
||||||
|
}
|
||||||
.messageRow {
|
.messageRow {
|
||||||
margin-bottom: 60px;
|
overflow: hidden auto;
|
||||||
max-height: calc(100vh - 200px);
|
height: 100%;
|
||||||
overflow: hidden scroll;
|
// scrollbar
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
width: 12px; /* width of the entire scrollbar */
|
||||||
|
}
|
||||||
|
&::-webkit-scrollbar-track {
|
||||||
|
// background: lightgray; /* color of the tracking area */
|
||||||
|
border: solid 3px white;
|
||||||
|
}
|
||||||
|
&::-webkit-scrollbar-thumb {
|
||||||
|
background-color: lightseagreen; /* color of the scroll thumb */
|
||||||
|
border-radius: 20px; /* roundness of the scroll thumb */
|
||||||
|
// border: 10px solid green; /* creates padding around scroll thumb */;
|
||||||
|
border: solid 3px white;
|
||||||
|
}
|
||||||
|
&::-webkit-scrollbar-button {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.inputRow {
|
.inputRow {
|
||||||
position: fixed;
|
width: 100%;
|
||||||
bottom: 0;
|
.card {
|
||||||
// width: calc(100vw - 300px);
|
margin: 10px 0;
|
||||||
|
}
|
||||||
.input {
|
.input {
|
||||||
border: 0;
|
border: 0;
|
||||||
// width: 100%;
|
|
||||||
padding-left: 5px;
|
padding-left: 5px;
|
||||||
padding-right: 5px;
|
padding-right: 5px;
|
||||||
}
|
}
|
||||||
.optionRow {
|
.optionRow {
|
||||||
// background-color: lightgray;
|
|
||||||
// width: 100%;
|
|
||||||
height: 40px;
|
height: 40px;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
.btnSend {
|
.btnSend {
|
||||||
|
|
@ -32,4 +49,4 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue