ucap/next-ucap-messenger
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'master' of http://10.81.13.221:6990/Web/next-ucap-messenger

Browse Source
This commit is contained in:
병준 박 2019-11-09 17:36:03 +09:00
commit 3fc5fa254a
28 changed files with 479 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.html
View File

@ -19,6 +19,7 @@
<app-layout-chat-left-sidenav-group
class="left-group-side"
(newGroupAndMember)="onClickNewGroupAndMember($event)"
(openProfile)="onClickOpenProfile($event)"
></app-layout-chat-left-sidenav-group>
</mat-tab>
<mat-tab [aria-label]="MainMenu.Chat">

11
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.ts
View File

@ -1,5 +1,5 @@
import { UserSelectDialogType } from './../../../types/userselect.dialog.type';
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { NGXLogger } from 'ngx-logger';
import { ucapAnimations, DialogService } from '@ucap-webmessenger/ui';
import {
@ -36,6 +36,11 @@ export enum MainMenu {
animations: ucapAnimations
})
export class LeftSideComponent implements OnInit {
@Output()
openProfile = new EventEmitter<
UserInfo | UserInfoSS | UserInfoF | UserInfoDN
>();
badgeChatUnReadCount$: Observable<number>;
/** 조직도에서 부서원 선택 */
@ -122,6 +127,10 @@ export class LeftSideComponent implements OnInit {
}
}
onClickOpenProfile(userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN) {
this.openProfile.emit(userInfo);
}
onSelectedTabChange(event: MatTabChangeEvent) {
this.setFabInitial(event.tab.ariaLabel);
}

2
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.scss
View File

@ -43,7 +43,7 @@
height: 100%;
.mat-form-field-flex {
height: 59px;
padding: 0 20px;
padding: 0 10px 0 20px;
align-items: center;
.mat-form-field-infix {
width: 100%;

2
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.html
View File

@ -62,6 +62,7 @@
[presence]="getStatusBulkInfo(userInfo) | async"
[sessionVerinfo]="sessionVerinfo"
(click)="onSelectBuddy(userInfo)"
(openProfile)="onClickOpenProfile($event)"
(contextmenu)="onContextMenuProfile($event, userInfo)"
>
</ucap-profile-user-list-item>
@ -82,6 +83,7 @@
[presence]="getStatusBulkInfo(userInfo) | async"
[sessionVerinfo]="sessionVerinfo"
(click)="onSelectBuddy(userInfo)"
(openProfile)="onClickOpenProfile($event)"
>
</ucap-profile-user-list-item>
</div>

8
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.ts
View File

@ -66,6 +66,10 @@ import {
export class GroupComponent implements OnInit, OnDestroy {
@Output()
newGroupAndMember = new EventEmitter();
@Output()
openProfile = new EventEmitter<
UserInfo | UserInfoSS | UserInfoF | UserInfoDN
>();
@ViewChild('groupExpansionPanel', { static: true })
groupExpansionPanel: GroupExpansionPanelComponent;
@ -304,6 +308,10 @@ export class GroupComponent implements OnInit, OnDestroy {
}
}
onClickOpenProfile(userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN) {
this.openProfile.emit(userInfo);
}
onContextMenuProfile(
event: MouseEvent,
userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN

1
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html
View File

@ -128,6 +128,7 @@
(save)="onSave($event)"
(fileViewer)="onFileViewer($event)"
(contextMenu)="onContextMenuMessage($event)"
(openProfile)="onClickOpenProfile($event)"
>
</ucap-chat-messages>
</perfect-scrollbar>

16
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts
View File

@ -4,7 +4,9 @@ import {
OnDestroy,
ViewChild,
ElementRef,
AfterViewInit
AfterViewInit,
Output,
EventEmitter
} from '@angular/core';
import {
ucapAnimations,
@ -90,6 +92,9 @@ import {
animations: ucapAnimations
})
export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
@Output()
openProfile = new EventEmitter<UserInfo>();
@ViewChild('messageBoxContainer', { static: true })
private messageBoxContainer: ElementRef;
@ -890,4 +895,13 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
break;
}
}
onClickOpenProfile(userInfo: UserInfo) {
if (
this.roomInfo.roomType !== RoomType.Allim &&
this.roomInfo.roomType !== RoomType.Bot
) {
this.openProfile.emit(userInfo);
}
}
}

3
projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/index.ts
View File

@ -1,4 +1,5 @@
import { DIALOGS as CHAT_DIALOGS } from './chat';
import { DIALOGS as GROUP_DIALOGS } from './group';
import { DIALOGS as PROFILE_DIALOGS } from './profile';
export const DIALOGS = [...CHAT_DIALOGS, ...GROUP_DIALOGS];
export const DIALOGS = [...CHAT_DIALOGS, ...GROUP_DIALOGS, ...PROFILE_DIALOGS];

3
projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/profile/index.ts Normal file
View File

@ -0,0 +1,3 @@
import { ProfileDialogComponent } from './profile.dialog.component';
export const DIALOGS = [ProfileDialogComponent];

9
projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/profile/profile.dialog.component.html Normal file
View File

@ -0,0 +1,9 @@
<ucap-profile-profile
[userInfo]="data.userInfo"
[profileImageRoot]="sessionVerinfo.profileRoot"
[isMe]="isMe"
[isBuddy]="isBuddy"
[isFavorit]="isFavorit"
(openChat)="onClickChat($event)"
>
</ucap-profile-profile>

0
projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/profile/profile.dialog.component.scss Normal file
View File

27
projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/profile/profile.dialog.component.spec.ts Normal file
View File

@ -0,0 +1,27 @@
/* tslint:disable:no-unused-variable */
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { ProfileDialogComponent } from './profile.dialog.component';
describe('ProfileDialogComponent', () => {
let component: ProfileDialogComponent;
let fixture: ComponentFixture<ProfileDialogComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ProfileDialogComponent]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ProfileDialogComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

83
projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/profile/profile.dialog.component.ts Normal file
View File

@ -0,0 +1,83 @@
import { Component, OnInit, Inject, ViewChild } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
import { KEY_LOGIN_RES_INFO } from '@app/types/login-res-info.type';
import { KEY_VER_INFO } from '@app/types/ver-info.type';
import { SessionStorageService } from '@ucap-webmessenger/web-storage';
import { Store, select } from '@ngrx/store';
import * as AppStore from '@app/store';
import * as ChatStore from '@app/store/messenger/chat';
import { UserInfo } from '@ucap-webmessenger/protocol-sync';
import {
UserInfoSS,
UserInfoF,
UserInfoDN
} from '@ucap-webmessenger/protocol-query';
import { DialogService } from '@ucap-webmessenger/ui';
import { VersionInfo2Response } from '@ucap-webmessenger/api-public';
import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
import { map } from 'rxjs/operators';
export interface ProfileDialogData {
userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN;
}
export interface ProfileDialogResult {}
@Component({
selector: 'app-profile.dialog',
templateUrl: './profile.dialog.component.html',
styleUrls: ['./profile.dialog.component.scss']
})
export class ProfileDialogComponent implements OnInit {
loginRes: LoginResponse;
sessionVerinfo: VersionInfo2Response;
isMe: boolean;
isBuddy: boolean;
isFavorit: boolean;
constructor(
public dialogRef: MatDialogRef<ProfileDialogData, ProfileDialogResult>,
@Inject(MAT_DIALOG_DATA) public data: ProfileDialogData,
private dialogService: DialogService,
private sessionStorageService: SessionStorageService,
private store: Store<any>
) {
this.sessionVerinfo = this.sessionStorageService.get<VersionInfo2Response>(
KEY_VER_INFO
);
this.loginRes = this.sessionStorageService.get<LoginResponse>(
KEY_LOGIN_RES_INFO
);
}
ngOnInit() {
this.isMe = this.loginRes.userSeq === this.data.userInfo.seq;
this.store.pipe(
select(AppStore.MessengerSelector.SyncSelector.selectAllBuddy2),
map(buddyList => {
const users = buddyList.filter(
buddy => buddy.seq === this.data.userInfo.seq
);
this.isBuddy = users.length > 0;
if (this.isBuddy) {
this.isFavorit = users[0].isFavorit;
}
})
);
}
onClickChat(userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN) {
if (userInfo.seq === this.loginRes.userSeq) {
this.store.dispatch(
ChatStore.openRoom({ userSeqList: [this.loginRes.talkWithMeBotSeq] })
);
} else {
this.store.dispatch(ChatStore.openRoom({ userSeqList: [userInfo.seq] }));
}
this.dialogRef.close();
}
}

34
projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.html
View File

@ -1,23 +1,29 @@
<div class="container">
<div class="left-side">
<app-layout-messenger-left-side></app-layout-messenger-left-side>
<app-layout-messenger-left-side
(openProfile)="onClickOpenProfile($event)"
></app-layout-messenger-left-side>
</div>
<mat-drawer-container class="contents" autosize>
<div class="messages">
<!-- <app-layout-messenger-intro
(click)="drawer.toggle()"
*ngIf="!(this.selectedChat$ | async)"
></app-layout-messenger-intro> -->
<app-layout-messenger-intro
*ngIf="!(this.selectedChat$ | async)"
></app-layout-messenger-intro>
<app-layout-messenger-messages
*ngIf="!!(this.selectedChat$ | async)"
></app-layout-messenger-messages>
</div>
<mat-drawer #drawer mode="side" position="end">
<mat-drawer #drawer mode="over">
<p>Auto-resizing sidenav</p>
</mat-drawer>
<div class="messages">
<app-layout-messenger-intro
(click)="drawer.toggle()"
*ngIf="!(this.selectedChat$ | async)"
></app-layout-messenger-intro>
<!-- <app-layout-messenger-intro
*ngIf="!(this.selectedChat$ | async)"
></app-layout-messenger-intro> -->
<app-layout-messenger-messages
*ngIf="!!(this.selectedChat$ | async)"
(openProfile)="onClickOpenProfile($event)"
></app-layout-messenger-messages>
</div>
<!-- <mat-drawer #drawer mode="side" position="end">
<p>Auto-resizing sidenav</p>
</mat-drawer> -->
</mat-drawer-container>
<!-- <div class="right-side">

28
projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.ts
View File

@ -10,8 +10,21 @@ import {
UCAP_NATIVE_SERVICE,
NativeService
} from '@ucap-webmessenger/native';
import { UserInfo } from '@ucap-webmessenger/protocol-sync';
import {
UserInfoSS,
UserInfoF,
UserInfoDN
} from '@ucap-webmessenger/protocol-query';
import { StatusProtocolService } from '@ucap-webmessenger/protocol-status';
import { StatusType, StatusCode } from '@ucap-webmessenger/core';
import { DialogService } from '@ucap-webmessenger/ui';
import {
ProfileDialogComponent,
ProfileDialogData,
ProfileDialogResult
} from '@app/layouts/messenger/dialogs/profile/profile.dialog.component';
@Component({
selector: 'app-page-messenger-main',
@ -25,7 +38,8 @@ export class MainPageComponent implements OnInit {
constructor(
@Inject(UCAP_NATIVE_SERVICE) private nativeService: NativeService,
private store: Store<any>,
private statusProtocolService: StatusProtocolService
private statusProtocolService: StatusProtocolService,
private dialogService: DialogService
) {}
ngOnInit(): void {
@ -60,4 +74,16 @@ export class MainPageComponent implements OnInit {
this.idleStateChangedSubscription.unsubscribe();
}
}
onClickOpenProfile(userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN) {
this.dialogService.open<
ProfileDialogComponent,
ProfileDialogData,
ProfileDialogResult
>(ProfileDialogComponent, {
data: {
userInfo
}
});
}
}

21
projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss
View File

@ -51,8 +51,7 @@ $lg-red: (
200: #f48fb1,
300: #f06292,
400: #ef4c73,
/* 400: #ec407a,*/
500: #ed097e,
/* 400: #ec407a,*/ 500: #ed097e,
600: #d81b60,
700: #c2185b,
800: #ad1457,
@ -90,6 +89,14 @@ $lg-red: (
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
.bg-primary-dark{
background: mat-color($primary, 900);
color: mat-color($primary, default-contrast);
}
.bg-primary-light{
background: mat-color($primary, 300);
color: mat-color($primary, default-contrast);
}
.bg-primary-color {
background: mat-color($primary);
color: mat-color($primary, default-contrast);
@ -128,6 +135,10 @@ $lg-red: (
.mat-chip.mat-standard-chip.mat-chip-selected.mat-primary {
background-color: mat-color($accent, 200);
}
/*.mat-form-field-appearance-legacy .mat-hint{
color: mat-color($accent, 800);
}*/
.mat-form-field-appearance-legacy {
.mat-form-field-label {
color: mat-color($primary);
@ -145,8 +156,12 @@ $lg-red: (
.app-dialog-full .mat-dialog-container {
overflow: hidden;
padding: 0px;
background-color: rgba($color: #000000, $alpha: 0.3);
background-color: rgba($color: #000000, $alpha: 0.7);
box-shadow: none;
border-radius: 0px;
}
.btn-main-float .bg-accent-dark{
background: mat-color($accent, 600);
color: mat-color($primary, default-contrast);
}
}

1
projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html
View File

@ -78,6 +78,7 @@
[base]="profileImageRoot"
[path]="getUserProfile(message.senderSeq)"
[default]="'assets/images/img_nophoto_50.png'"
(click)="onClickOpenProfile($event, getUerInfo(message.senderSeq))"
/>
<!-- <ucap-ui-imaage
[style]="'width: 50px; height: 50px;'"

21
projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts
View File

@ -41,6 +41,8 @@ export class MessagesComponent implements OnInit {
@Input()
sessionVerInfo: VersionInfo2Response;
@Output()
openProfile = new EventEmitter<UserInfo>();
@Output()
moreEvent = new EventEmitter<number>();
@Output()
@ -95,6 +97,18 @@ export class MessagesComponent implements OnInit {
}
return '';
}
getUerInfo(seq: number): UserInfo {
if (!this.userInfos) {
return null;
}
const userInfo: UserInfo[] = this.userInfos.filter(
user => user.seq === seq
);
if (!!userInfo && userInfo.length > 0) {
return userInfo[0];
}
}
getUnreadCount(message: Info<EventJson>): string | number {
const unreadCnt = this.userInfos.filter(user => {
@ -145,6 +159,13 @@ export class MessagesComponent implements OnInit {
return false;
}
onClickOpenProfile(event: MouseEvent, userInfo: UserInfo) {
event.preventDefault();
event.stopPropagation();
this.openProfile.emit(userInfo);
}
onClickMore(event: any) {
event.preventDefault();
event.stopPropagation();

76
projects/ucap-webmessenger-ui-profile/src/lib/components/profile.component.html Normal file
View File

@ -0,0 +1,76 @@
<mat-card class="example-card">
<mat-card-header>
<mat-card-title>
<span>{{ userInfo.name }}</span>
<span>{{ userInfo.grade }}</span>
</mat-card-title>
<mat-card-subtitle>{{ userInfo.deptName }}</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<ul>
<li>
<img
ucapImage
[base]="profileImageRoot"
[path]="userInfo.profileImageFile"
[default]="'assets/images/img_nophoto_50.png'"
/>
</li>
<li>
<mat-icon>chat</mat-icon>
{{ userInfo.intro }}
</li>
<li>
<mat-icon>email</mat-icon>
{{ userInfo.email }}
</li>
<li>
<mat-icon>local_phone</mat-icon>
{{ userInfo.lineNumber }}
</li>
<li>
<mat-icon>phone_android</mat-icon>
{{ userInfo.hpNumber }}
</li>
</ul>
</mat-card-content>
<mat-card-actions>
<div fxFlex fxLayout="row" fxLayoutAlign="space-around center">
<button
mat-mini-fab
[matTooltip]="isMe ? 'MyTalk' : '1:1 대화'"
matTooltipPosition="above"
(click)="onClickOpenChat()"
>
<mat-icon>chat</mat-icon>
</button>
<button
mat-mini-fab
*ngIf="!isMe"
matTooltip="전화"
matTooltipPosition="above"
(click)="onClickCall()"
>
<mat-icon>call</mat-icon>
</button>
<button
mat-mini-fab
*ngIf="!isMe"
matTooltip="화상회의"
matTooltipPosition="above"
(click)="onClickVideoConference()"
>
<mat-icon>videocam</mat-icon>
</button>
<button
mat-mini-fab
*ngIf="!isMe"
matTooltip="쪽지"
matTooltipPosition="above"
(click)="onClickMessage()"
>
<mat-icon>sms</mat-icon>
</button>
</div>
</mat-card-actions>
</mat-card>

3
projects/ucap-webmessenger-ui-profile/src/lib/components/profile.component.scss Normal file
View File

@ -0,0 +1,3 @@
.example-card {
width: 400px;
}

28
projects/ucap-webmessenger-ui-profile/src/lib/components/profile.component.spec.ts Normal file
View File

@ -0,0 +1,28 @@
/* tslint:disable:no-unused-variable */
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { ProfileComponent } from './profile.component';
describe('ProfileComponent', () => {
let component: ProfileComponent;
let fixture: ComponentFixture<ProfileComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ ProfileComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ProfileComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

43
projects/ucap-webmessenger-ui-profile/src/lib/components/profile.component.ts Normal file
View File

@ -0,0 +1,43 @@
import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
import { UserInfo } from '@ucap-webmessenger/protocol-sync';
import {
UserInfoSS,
UserInfoF,
UserInfoDN
} from '@ucap-webmessenger/protocol-query';
@Component({
selector: 'ucap-profile-profile',
templateUrl: './profile.component.html',
styleUrls: ['./profile.component.scss']
})
export class ProfileComponent implements OnInit {
@Input()
profileImageRoot: string;
@Input()
isMe: boolean;
@Input()
isBuddy: boolean;
@Input()
isFavorit: boolean;
@Input()
userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN;
@Output()
openChat = new EventEmitter<UserInfo | UserInfoSS | UserInfoF | UserInfoDN>();
constructor() {}
ngOnInit() {}
onClickOpenChat() {
this.openChat.emit(this.userInfo);
}
onClickCall() {}
onClickVideoConference() {}
onClickMessage() {}
}

1
projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.html
View File

@ -15,6 +15,7 @@
[base]="profileImageRoot"
[path]="userInfo.profileImageFile"
[default]="'assets/images/img_nophoto_50.png'"
(click)="onClickOpenProfile($event, userInfo)"
/>
</dt>
<dd class="info">

14
projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.ts
View File

@ -49,6 +49,10 @@ export class UserListItemComponent implements OnInit {
isChecked: boolean;
userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN;
}>();
@Output()
openProfile = new EventEmitter<
UserInfo | UserInfoSS | UserInfoF | UserInfoDN
>();
PresenceType = PresenceType;
@ -98,4 +102,14 @@ export class UserListItemComponent implements OnInit {
userInfo
});
}
onClickOpenProfile(
event: MouseEvent,
userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN
) {
event.preventDefault();
event.stopPropagation();
this.openProfile.emit(userInfo);
}
}

7
projects/ucap-webmessenger-ui-profile/src/lib/ucap-ui-profile.module.ts
View File

@ -1,3 +1,5 @@
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatCardModule } from '@angular/material/card';
import { NgModule, ModuleWithProviders } from '@angular/core';
import { CommonModule } from '@angular/common';
@ -11,8 +13,9 @@ import { UCapUiModule } from '@ucap-webmessenger/ui';
import { ListItemComponent } from './components/list-item.component';
import { UserListItemComponent } from './components/user-list-item.component';
import { ProfileComponent } from './components/profile.component';
const COMPONENTS = [ListItemComponent, UserListItemComponent];
const COMPONENTS = [ListItemComponent, UserListItemComponent, ProfileComponent];
const SERVICES = [];
@ -24,6 +27,8 @@ const SERVICES = [];
MatIconModule,
MatRippleModule,
MatCheckboxModule,
MatCardModule,
MatTooltipModule,
UCapUiModule
],

48
projects/ucap-webmessenger-ui/src/lib/components/file-viewer/image-viewer.component.html
View File

@ -1,6 +1,11 @@
<div class="ucap-image-viewer-container">
<mat-toolbar color="accent" class="ucap-image-viewer-header">
<mat-icon class="ucap-image-viewer-icon">image</mat-icon>
<mat-toolbar class="ucap-image-viewer-header bg-primary-dark">
<!--<mat-icon class="ucap-image-viewer-icon">image</mat-icon>-->
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="butt" stroke-linejoin="round" class="ucap-image-viewer-icon">
<rect x="3" y="3" width="18" height="18" rx="2" />
<circle cx="8.5" cy="8.5" r="1.5" />
<path d="M20.4 14.5L16 10 4 20" /></svg>
<span class="ucap-image-viewer-title">{{ fileInfo.fileName }}</span>
<span class="ucap-image-viewer-spacer"></span>
@ -11,7 +16,12 @@
matTooltipPosition="below"
aria-label=""
>
<mat-icon>settings_overscan</mat-icon>
<!--<mat-icon>settings_overscan</mat-icon>-->
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="butt" stroke-linejoin="round">
<path d="M3.8 3.8l16.4 16.4M20.2 3.8L3.8 20.2M15 3h6v6M9 3H3v6M15 21h6v-6M9 21H3v-6" />
</svg>
</button>
<button
mat-icon-button
@ -20,7 +30,8 @@
matTooltipPosition="below"
aria-label=""
>
<mat-icon>zoom_out</mat-icon>
<!--<mat-icon>zoom_out</mat-icon>-->
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="butt" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line><line x1="8" y1="11" x2="14" y2="11"></line></svg>
</button>
<button
mat-icon-button
@ -29,7 +40,14 @@
matTooltipPosition="below"
aria-label=""
>
<mat-icon>zoom_in</mat-icon>
<!--<mat-icon>zoom_in</mat-icon>-->
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="butt" stroke-linejoin="round">
<circle cx="11" cy="11" r="8"></circle>
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
<line x1="11" y1="8" x2="11" y2="14"></line>
<line x1="8" y1="11" x2="14" y2="11"></line>
</svg>
</button>
<button
mat-icon-button
@ -39,16 +57,24 @@
aria-label=""
(click)="onClickDownload()"
>
<mat-icon>get_app</mat-icon>
<!--<mat-icon>get_app</mat-icon>-->
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="butt" stroke-linejoin="round">
<path d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5" /></svg>
</button>
<span class="stroke-bar"></span>
<button
mat-raised-button
color="primary"
class="ucap-image-viewer-action"
mat-icon-button
color="warn"
class="ucap-image-viewer-action btn-close"
matTooltip="뷰어닫기"
(click)="onClickClose()"
>
Close
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="butt" stroke-linejoin="round">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</button>
</mat-toolbar>
<div class="ucap-image-viewer-body">

23
projects/ucap-webmessenger-ui/src/lib/components/file-viewer/image-viewer.component.scss
View File

@ -4,28 +4,47 @@
.ucap-image-viewer-header {
width: 100%;
height: 50px;
height: 60px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.6);
background-color: #333333;
.ucap-image-viewer-icon {
margin-right: 10px;
}
.ucap-image-viewer-title {
font-size: 16px;
}
.ucap-image-viewer-spacer {
flex: 1 1 auto;
}
.stroke-bar {
width: 1px;
height: 30px;
background-color: rgba(256, 256, 256, 0.3);
margin: 0 10px;
}
.ucap-image-viewer-action {
&:hover {
opacity: 0.7;
}
}
}
.ucap-image-viewer-body {
position: relative;
width: 100%;
height: 100%;
height: calc(100% - 60px);
.ucap-image-viewer-image-wrapper {
height: 100%;
padding: 20px;
background-color: rgba(0, 0, 0, 0.7);
img {
height: inherit;
}
}
}
}

2
projects/ucap-webmessenger-ui/src/lib/components/float-action-button.component.html
View File

@ -3,7 +3,7 @@
*ngIf="fabTogglerState === 'active'"
(click)="onToggleFab()"
></div>
<div class="fab-container">
<div class="fab-container btn-main-float">
<button mat-fab class="fab-toggler bg-accent-dark" (click)="onToggleFab()">
<mat-icon [@fabToggler]="fabTogglerState">add</mat-icon>
</button>