nostr/blockcore-notes
1
0
Fork 0
mirror of https://github.com/block-core/blockcore-notes.git synced 2024-09-28 22:10:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

WIP for collapsible sidelisting of users

Browse Source
This commit is contained in:
SondreB 2023-01-21 23:07:13 +01:00
parent e4ee1b704f
commit dd0c187951
No known key found for this signature in database
GPG Key ID: D6CC44C75005FDBF
10 changed files with 229 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/app.html
View File

@ -27,11 +27,11 @@
</a>
<a [routerLink]="['/chat']" mat-menu-item (click)="toggleMenu()" [routerLinkActiveOptions]="{ exact: true }" routerLinkActive="active">
<mat-icon>chat</mat-icon>
<span>Chat</span>
<span *ngIf="displayLabels">Channels</span>
</a>
<a [routerLink]="['/messages']" mat-menu-item (click)="toggleMenu()" [routerLinkActiveOptions]="{ exact: true }" routerLinkActive="active">
<mat-icon>mail</mat-icon>
<span>Messages</span>
<span *ngIf="displayLabels">Messages</span>
</a>
<a [routerLink]="['/people']" mat-menu-item (click)="toggleMenu()" [routerLinkActiveOptions]="{ exact: true }" routerLinkActive="active">
<mat-icon>people</mat-icon>

2
src/app/app.module.ts
View File

@ -108,6 +108,7 @@ import { ContentPodcastComponent } from './shared/content-podcast/content-podcas
import { MatSliderModule } from '@angular/material/slider';
import { TimePipe } from './shared/time.pipe';
import { QueueComponent } from './queue/queue';
import { MessagesComponent } from './messages/messages';
@NgModule({
declarations: [
@ -170,6 +171,7 @@ import { QueueComponent } from './queue/queue';
ContentPodcastComponent,
TimePipe,
QueueComponent,
MessagesComponent
],
imports: [
HttpClientModule,

73
src/app/chat/chat.html
View File

@ -1,28 +1,45 @@
<mat-sidenav-container class="drawer-container" autosize>
<mat-tab-group mat-align-tabs="center">
<mat-tab label="Messages">
<app-chat-list (openChatSidebar)="open.chatSideBar($event)"></app-chat-list>
</mat-tab>
<mat-tab label="Users">
<app-user-list (openUserSidebar)="open.userSideBar($event)"></app-user-list>
</mat-tab>
</mat-tab-group>
<mat-sidenav #chatSidebar class="sidebar sidebar--message" mode="side" position="start">
<mat-toolbar class="zIndexTop" color="primary">
<mat-toolbar-row>
<mat-icon class="button" aria-hidden="false" (click)="chatSidebar.close()">arrow_back_ios</mat-icon>
<span class="spacer"> {{sidebarTitles.chat}} </span>
</mat-toolbar-row>
</mat-toolbar>
<app-chat-detail></app-chat-detail>
</mat-sidenav>
<mat-sidenav #userSidebar class="sidebar sidebar--user" mode="over" position="end">
<mat-toolbar class="zIndexTop" color="primary">
<mat-toolbar-row>
<span class="spacer"> {{sidebarTitles.user}} </span>
<mat-icon class="button" aria-hidden="false" (click)="userSidebar.close()">close</mat-icon>
</mat-toolbar-row>
</mat-toolbar>
<app-user-profile (openChatWindow)="open.chatSideBar($event)"></app-user-profile>
</mat-sidenav>
</mat-sidenav-container>
<div class="chat-container">
<div class="chat-left" [ngClass]="{ 'chat-left-labels': displayLabels, 'chat-left-small': !displayLabels }">
<div *ngFor="let profile of profileService.items$ | async">
<img class="chat-thumbnail" [src]="profile.picture" />
<span *ngIf="displayLabels"> {{ profile.name }} </span>
</div>
<a mat-menu-item (click)="toggleChannelSize()">
<mat-icon *ngIf="displayLabels">chevron_left</mat-icon>
<mat-icon *ngIf="!displayLabels">chevron_right</mat-icon>
</a>
</div>
<div class="chat-right">
<mat-sidenav-container class="drawer-container" autosize>
<mat-tab-group mat-align-tabs="center">
<mat-tab label="Cameri">
<app-chat-list (openChatSidebar)="open.chatSideBar($event)"></app-chat-list>
</mat-tab>
<!-- <mat-tab label="Users">
<app-user-list (openUserSidebar)="open.userSideBar($event)"></app-user-list>
</mat-tab> -->
</mat-tab-group>
<mat-sidenav #chatSidebar class="sidebar sidebar--message" mode="side" position="start">
<mat-toolbar class="zIndexTop" color="primary">
<mat-toolbar-row>
<mat-icon class="button" aria-hidden="false" (click)="chatSidebar.close()">arrow_back_ios</mat-icon>
<span class="spacer"> {{sidebarTitles.chat}} </span>
</mat-toolbar-row>
</mat-toolbar>
<app-chat-detail></app-chat-detail>
</mat-sidenav>
<mat-sidenav #userSidebar class="sidebar sidebar--user" mode="over" position="end">
<mat-toolbar class="zIndexTop" color="primary">
<mat-toolbar-row>
<span class="spacer"> {{sidebarTitles.user}} </span>
<mat-icon class="button" aria-hidden="false" (click)="userSidebar.close()">close</mat-icon>
</mat-toolbar-row>
</mat-toolbar>
<app-user-profile (openChatWindow)="open.chatSideBar($event)"></app-user-profile>
</mat-sidenav>
</mat-sidenav-container>
</div>
</div>

32
src/app/chat/chat.scss
View File

@ -29,3 +29,35 @@
.spacer {
flex: 1;
}
.chat-thumbnail {
width: 64px;
height: 64px;
}
.chat-container {
display: flex;
flex-direction: row;
height: 100%;
box-sizing: border-box;
}
.chat-left {
// flex: 1 0 64px;
border-left: 1px solid silver;
height: 100%;
border: 2px solid blue !important;
box-sizing: border-box;
}
.chat-left-small {
width: 80px;
}
.chat-left-labels {
width: 200px;
}
.chat-right {
flex: 2 2 0;
}

22
src/app/chat/chat.ts
View File

@ -1,6 +1,7 @@
import { Component, ChangeDetectorRef, ViewChild, ViewEncapsulation } from '@angular/core';
import { MatSidenav } from '@angular/material/sidenav';
import { ApplicationState } from '../services/applicationstate';
import { ProfileService } from '../services/profile';
@Component({
selector: 'app-chat',
templateUrl: './chat.html',
@ -10,7 +11,8 @@ import { ApplicationState } from '../services/applicationstate';
export class ChatComponent {
@ViewChild('chatSidebar', { static: false }) chatSidebar!: MatSidenav;
@ViewChild('userSidebar', { static: false }) userSidebar!: MatSidenav;
constructor(private appState: ApplicationState) {}
constructor(private appState: ApplicationState, public profileService: ProfileService) {}
sidebarTitles = {
user: '',
chat: '',
@ -28,8 +30,24 @@ export class ChatComponent {
},
};
displayLabels = true;
toggleChannelSize() {
this.displayLabels = !this.displayLabels;
// setTimeout(() => {
// this.options.values.hideSideLabels = !this.displayLabels;
// this.options.save();
// }, 250);
// this._container._ngZone.onMicrotaskEmpty.subscribe(() => {
// this._container._updateStyles();
// this._container._changeDetectorRef.markForCheck();
// });
}
async ngOnInit() {
this.appState.updateTitle('Chat');
this.appState.updateTitle('Channels');
this.appState.goBack = true;
this.appState.actions = [];
}

80
src/app/messages/messages.css
View File

@ -0,0 +1,80 @@
.chat-thumbnail {
width: 64px;
height: 64px;
border-radius: 50%;
}
.chat-container {
display: flex;
flex-direction: row;
}
.chat-left {
border-left: 1px solid silver;
width: 64px;
position: fixed;
}
.chat-left-small {
width: 64px;
}
.chat-left-labels {
width: 360px;
}
.chat-right {
flex: 2 2 0;
padding-left: 100px;
}
.chat-right-labels {
padding-left: 400px;
}
.chat-list-scrollable {
overflow-y: scroll;
height: calc(100vh - 48px);
}
.chat-list-item {
display: flex;
flex-direction: row;
width: 100%;
border: 1px solid rgb(0, 255, 42);
}
.chat-list-item-text {
display: flex;
flex-direction: column;
border: 1px solid purple;
width: 100%;
flex-flow: row nowrap;
overflow: hidden;
flex-flow: row wrap;
justify-content: flex-end;
align-items: flex-end;
}
.chat-list-item-header {
display: flex;
flex-direction: row;
border: 1px solid green;
width: 100%;
}
.chat-list-item-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1 1 auto;
border: 1px solid yellow;
}
.chat-list-item-date {
border: 1px solid red;
flex: 0 0 auto;
white-space: nowrap;
font-size: 0.8em;
color: rgba(255, 255, 255, 0.5);
}

24
src/app/messages/messages.html
View File

@ -1 +1,23 @@
Coming soon.
<div class="chat-container">
<div class="chat-left" [ngClass]="{ 'chat-left-labels': displayLabels, 'chat-left-small': !displayLabels }">
<div class="chat-list-scrollable">
<div class="chat-list-item" *ngFor="let profile of profileService.items$ | async">
<img onerror="this.src='/assets/profile.png'" class="chat-thumbnail" [src]="profile.picture" />
<div class="chat-list-item-text" *ngIf="displayLabels">
<div class="chat-list-item-header">
<div class="chat-list-item-name">{{ profile.name }}</div>
<div class="chat-list-item-date">2023-01-21</div>
</div>
<div>See you tomorrow!</div>
</div>
</div>
</div>
<a mat-menu-item (click)="toggleChannelSize()">
<mat-icon *ngIf="displayLabels">chevron_left</mat-icon>
<mat-icon *ngIf="!displayLabels">chevron_right</mat-icon>
</a>
</div>
<div class="chat-right" [ngClass]="{ 'chat-right-labels': displayLabels }">
<app-chat-detail></app-chat-detail>
</div>
</div>

19
src/app/messages/messages.ts
View File

@ -1,5 +1,6 @@
import { Component } from '@angular/core';
import { ApplicationState } from '../services/applicationstate';
import { ProfileService } from '../services/profile';
@Component({
selector: 'app-messages',
@ -7,9 +8,25 @@ import { ApplicationState } from '../services/applicationstate';
styleUrls: ['./messages.css'],
})
export class MessagesComponent {
constructor(private appState: ApplicationState) {}
constructor(private appState: ApplicationState, public profileService: ProfileService) {}
ngOnInit() {
this.appState.updateTitle('Messages');
}
displayLabels = true;
toggleChannelSize() {
this.displayLabels = !this.displayLabels;
// setTimeout(() => {
// this.options.values.hideSideLabels = !this.displayLabels;
// this.options.save();
// }, 250);
// this._container._ngZone.onMicrotaskEmpty.subscribe(() => {
// this._container._updateStyles();
// this._container._changeDetectorRef.markForCheck();
// });
}
}

11
src/app/shared/chat-detail/chat-detail.component.html
View File

@ -9,8 +9,7 @@
</div>
<div class="message-send">
<emoji-mart class="emoji-picker" *ngIf="isEmojiPickerVisible" emoji="point_up" [isNative]="true" [showPreview]="false"
(emojiSelect)="addEmoji($event)" title="Choose your emoji"></emoji-mart>
<emoji-mart class="emoji-picker" *ngIf="isEmojiPickerVisible" emoji="point_up" [isNative]="true" [showPreview]="false" (emojiSelect)="addEmoji($event)" title="Choose your emoji"></emoji-mart>
<mat-form-field class="input-full-width">
<mat-icon class="toolbar-icon" [matMenuTriggerFor]="menu" matPrefix>attach_file_add</mat-icon>
<mat-menu #menu="matMenu">
@ -27,11 +26,9 @@
<span>Document</span>
</button>
</mat-menu>
<input autocomplete="off" type="text" matInput placeholder="Write a message" [(ngModel)]="message"
(keypress)="saveMessage($event)">
<mat-hint align="end" class="hint">Length : {{message.length}}</mat-hint>
<mat-icon class="toolbar-icon" matSuffix (click)="isEmojiPickerVisible = !isEmojiPickerVisible;"
matTooltip="Insert emoji">sentiment_satisfied</mat-icon>
<input autocomplete="off" type="text" matInput placeholder="Write a message" [(ngModel)]="message" (keypress)="saveMessage($event)" />
<mat-hint align="end" class="hint">Length : {{ message.length }}</mat-hint>
<mat-icon class="toolbar-icon" matSuffix (click)="isEmojiPickerVisible = !isEmojiPickerVisible" matTooltip="Insert emoji">sentiment_satisfied</mat-icon>
<mat-icon class="toolbar-icon" matSuffix>mic</mat-icon>
<mat-icon class="toolbar-icon" (click)="send(message)" matSuffix>send</mat-icon>

4
src/app/shared/chat-detail/chat-detail.component.scss
View File

File diff suppressed because one or more lines are too long