This commit is contained in:
richard-loafle 2020-02-04 17:13:16 +09:00
commit c4e9ebb217
27 changed files with 330 additions and 207 deletions

View File

@ -15,9 +15,6 @@ import { FileDownloadItem } from '@ucap-webmessenger/api';
import { CommonApiService } from '@ucap-webmessenger/api-common'; import { CommonApiService } from '@ucap-webmessenger/api-common';
import { TranslateService } from '@ngx-translate/core'; import { TranslateService } from '@ngx-translate/core';
import { FileProtocolService } from '@ucap-webmessenger/protocol-file'; import { FileProtocolService } from '@ucap-webmessenger/protocol-file';
import { select, Store } from '@ngrx/store';
import { Subscription } from 'rxjs';
import * as AppStore from '@app/store';
export interface FileViewerDialogData { export interface FileViewerDialogData {
fileInfo: FileEventJson; fileInfo: FileEventJson;
@ -35,8 +32,6 @@ export interface FileViewerDialogResult {}
styleUrls: ['./file-viewer.dialog.component.scss'] styleUrls: ['./file-viewer.dialog.component.scss']
}) })
export class FileViewerDialogComponent implements OnInit, OnDestroy { export class FileViewerDialogComponent implements OnInit, OnDestroy {
loginResSubscription: Subscription;
fileInfo: FileEventJson; fileInfo: FileEventJson;
downloadUrl: string; downloadUrl: string;
userSeq: number; userSeq: number;
@ -56,7 +51,6 @@ export class FileViewerDialogComponent implements OnInit, OnDestroy {
private snackBarService: SnackBarService, private snackBarService: SnackBarService,
private commonApiService: CommonApiService, private commonApiService: CommonApiService,
private fileProtocolService: FileProtocolService, private fileProtocolService: FileProtocolService,
private store: Store<any>,
private logger: NGXLogger private logger: NGXLogger
) { ) {
this.fileInfo = data.fileInfo; this.fileInfo = data.fileInfo;
@ -76,24 +70,9 @@ export class FileViewerDialogComponent implements OnInit, OnDestroy {
); );
} }
ngOnInit() { ngOnInit() {}
this.loginResSubscription = this.store
.pipe(
select(AppStore.AccountSelector.AuthenticationSelector.loginRes),
tap(loginRes => {
if (!loginRes) {
this.onClosedViewer();
}
})
)
.subscribe();
}
ngOnDestroy(): void { ngOnDestroy(): void {}
if (!!this.loginResSubscription) {
this.loginResSubscription.unsubscribe();
}
}
onDownload(fileDownloadItem: FileDownloadItem): void { onDownload(fileDownloadItem: FileDownloadItem): void {
this.commonApiService this.commonApiService

View File

@ -176,6 +176,7 @@
::ng-deep .chat-snackbar-class { ::ng-deep .chat-snackbar-class {
.mat-simple-snackbar { .mat-simple-snackbar {
justify-content: center;
span { span {
@include ellipsis(1); @include ellipsis(1);
} }

View File

@ -974,32 +974,36 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
onExistNewMessage(info: Info<EventJson>) { onExistNewMessage(info: Info<EventJson>) {
let message = ''; let message = '';
const senderUser = this.userInfoListSubject.value.filter( const contents = StringUtil.convertFinalEventMessage(
user => user.seq === info.senderSeq
);
if (!!senderUser && senderUser.length > 0) {
message += `${senderUser[0].name} : `;
}
message += StringUtil.convertFinalEventMessage(
info.type, info.type,
info.sentMessageJson || info.sentMessage info.sentMessageJson || info.sentMessage
); );
this.snackBarPreviewEvent = this.snackBarService.open( if (!!contents) {
message, const senderUser = this.userInfoListSubject.value.filter(
this.translateService.instant('common.messages.confirm'), user => user.seq === info.senderSeq
{ );
// duration: 3000, if (!!senderUser && senderUser.length > 0) {
verticalPosition: 'bottom', message += `${senderUser[0].name} : `;
horizontalPosition: 'center',
panelClass: ['chat-snackbar-class']
} }
); message += contents;
this.snackBarPreviewEvent.onAction().subscribe(() => {
this.chatMessages.initEventMore(); this.snackBarPreviewEvent = this.snackBarService.open(
this.chatMessages.scrollToBottom(); message,
this.snackBarPreviewEvent.dismiss(); this.translateService.instant('common.messages.confirm'),
}); {
// duration: 3000,
verticalPosition: 'bottom',
horizontalPosition: 'center',
panelClass: ['chat-snackbar-class']
}
);
this.snackBarPreviewEvent.onAction().subscribe(() => {
this.chatMessages.initEventMore();
this.chatMessages.scrollToBottom();
this.snackBarPreviewEvent.dismiss();
});
}
} }
saveFile( saveFile(
@ -1292,12 +1296,6 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
(message as Info<string>).sentMessage (message as Info<string>).sentMessage
) )
) { ) {
this.snackBarService.open(
this.translateService.instant(
'common.clipboard.results.copied'
),
'확인'
);
this.snackBarService.open( this.snackBarService.open(
this.translateService.instant( this.translateService.instant(
'common.clipboard.results.copied' 'common.clipboard.results.copied'

View File

@ -43,7 +43,7 @@
</table> </table>
</perfect-scrollbar> </perfect-scrollbar>
</div> </div>
<div fxFlex="1 1 111.5px" class="footer-fix"> <div class="footer-fix">
<mat-paginator <mat-paginator
[length]="totalCount" [length]="totalCount"
[pageSize]="10" [pageSize]="10"

View File

@ -22,6 +22,9 @@
height: calc(100% - 111.5px); height: calc(100% - 111.5px);
overflow: auto; overflow: auto;
} }
.footer-fix {
width: 100%;
}
} }
.mat-table { .mat-table {

View File

@ -174,10 +174,6 @@ export class CreateChatDialogComponent implements OnInit, OnDestroy {
.pipe( .pipe(
select(AppStore.AccountSelector.AuthenticationSelector.loginRes), select(AppStore.AccountSelector.AuthenticationSelector.loginRes),
tap(loginRes => { tap(loginRes => {
if (!loginRes) {
this.onClickCancel();
}
this.loginRes = loginRes; this.loginRes = loginRes;
}) })
) )

View File

@ -19,7 +19,7 @@
</perfect-scrollbar> </perfect-scrollbar>
</mat-card-content> </mat-card-content>
<mat-card-actions class="button-farm flex-row"> <mat-card-actions class="button-farm flex-row">
<button mat-stroked-button (click)="onClickConfirm()" class="mat-primary"> <button mat-flat-button (click)="onClickConfirm()" class="mat-primary">
{{ 'common.messages.confirm' | translate }} {{ 'common.messages.confirm' | translate }}
</button> </button>
</mat-card-actions> </mat-card-actions>

View File

@ -13,18 +13,21 @@
} }
} }
::ng-deep .mat-card-header-text { .mat-card-header {
margin: 0; .mat-card-header-text {
.title { .title {
width: 480px; @include ellipsis(1);
@include ellipsis(1); }
.btn-dialog-close {
font-size: 20px;
display: flex;
margin-left: auto;
align-self: flex-start;
color: #444444;
}
} }
.btn-dialog-close { .icon-button {
font-size: 20px;
display: flex;
margin-left: auto; margin-left: auto;
align-self: flex-start;
color: #444444;
} }
} }
.confirm-card { .confirm-card {

View File

@ -1,10 +1,6 @@
import { Component, OnInit, Inject, OnDestroy } from '@angular/core'; import { Component, OnInit, Inject, OnDestroy } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material'; import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
import { NoticeList } from '@ucap-webmessenger/api-message'; import { NoticeList } from '@ucap-webmessenger/api-message';
import { Subscription } from 'rxjs';
import { select, Store } from '@ngrx/store';
import { tap } from 'rxjs/operators';
import * as AppStore from '@app/store';
export interface NoticeDetailDialogData { export interface NoticeDetailDialogData {
notice: NoticeList; notice: NoticeList;
@ -18,35 +14,17 @@ export interface NoticeDetailDialogResult {}
styleUrls: ['./notice-detail.dialog.component.scss'] styleUrls: ['./notice-detail.dialog.component.scss']
}) })
export class NoticeDetailDialogComponent implements OnInit, OnDestroy { export class NoticeDetailDialogComponent implements OnInit, OnDestroy {
loginResSubscription: Subscription;
constructor( constructor(
public dialogRef: MatDialogRef< public dialogRef: MatDialogRef<
NoticeDetailDialogData, NoticeDetailDialogData,
NoticeDetailDialogResult NoticeDetailDialogResult
>, >,
@Inject(MAT_DIALOG_DATA) public data: NoticeDetailDialogData, @Inject(MAT_DIALOG_DATA) public data: NoticeDetailDialogData
private store: Store<any>
) {} ) {}
ngOnInit() { ngOnInit() {}
this.loginResSubscription = this.store
.pipe(
select(AppStore.AccountSelector.AuthenticationSelector.loginRes),
tap(loginRes => {
if (!loginRes) {
this.onClickConfirm();
}
})
)
.subscribe();
}
ngOnDestroy(): void { ngOnDestroy(): void {}
if (!!this.loginResSubscription) {
this.loginResSubscription.unsubscribe();
}
}
onClickConfirm(): void { onClickConfirm(): void {
this.dialogRef.close(); this.dialogRef.close();

View File

@ -119,10 +119,6 @@ export class ProfileDialogComponent implements OnInit, OnDestroy {
.pipe( .pipe(
select(AppStore.AccountSelector.AuthenticationSelector.loginRes), select(AppStore.AccountSelector.AuthenticationSelector.loginRes),
tap(loginRes => { tap(loginRes => {
if (!loginRes) {
this.onClose();
}
this.loginRes = loginRes; this.loginRes = loginRes;
if (!!loginRes && loginRes.userSeq === this.data.userInfo.seq) { if (!!loginRes && loginRes.userSeq === this.data.userInfo.seq) {
this.isMe = true; this.isMe = true;

View File

@ -86,9 +86,6 @@ export class IntegratedSearchDialogComponent implements OnInit, OnDestroy {
.pipe( .pipe(
select(AppStore.AccountSelector.AuthenticationSelector.loginRes), select(AppStore.AccountSelector.AuthenticationSelector.loginRes),
tap(loginRes => { tap(loginRes => {
if (!loginRes) {
this.onCancel();
}
this.loginRes = loginRes; this.loginRes = loginRes;
}) })
) )

View File

@ -42,7 +42,7 @@
padding: 0 10px; padding: 0 10px;
align-content: flex-start; align-content: flex-start;
text-align: left; text-align: left;
align-items: self-start; align-items: center;
justify-content: flex-start; justify-content: flex-start;
} }
} }

View File

@ -24,7 +24,8 @@ import {
SSVC_TYPE_EVENT_CANCEL_NOTI, SSVC_TYPE_EVENT_CANCEL_NOTI,
SSVC_TYPE_EVENT_DEL_RES, SSVC_TYPE_EVENT_DEL_RES,
SSVC_TYPE_EVENT_SEND_RES, SSVC_TYPE_EVENT_SEND_RES,
SSVC_TYPE_EVENT_READ_RES SSVC_TYPE_EVENT_READ_RES,
EventType
} from '@ucap-webmessenger/protocol-event'; } from '@ucap-webmessenger/protocol-event';
import { import {
InfoProtocolService, InfoProtocolService,
@ -248,30 +249,35 @@ export class AppNotificationService {
); );
audio.play(); audio.play();
} else { } else {
const notiReq: NotificationRequest = { const contents = StringUtil.convertFinalEventMessage(
type: NotificationType.Event, noti.eventType,
seq: noti.roomSeq, noti.info.sentMessageJson
title: this.translateService.instant( );
'notification.titleChatEventArrived'
), if (!!contents) {
contents: StringUtil.convertFinalEventMessage( const notiReq: NotificationRequest = {
noti.eventType, type: NotificationType.Event,
noti.info.sentMessageJson seq: noti.roomSeq,
), title: this.translateService.instant(
image: '', 'notification.titleChatEventArrived'
useSound: [ ),
NotificationMethod.Sound, contents,
NotificationMethod.SoundAndAlert image: '',
].some( useSound: [
n => n === appUserInfo.settings.notification.method NotificationMethod.Sound,
) NotificationMethod.SoundAndAlert
? true ].some(
: false, n =>
displayTime: n === appUserInfo.settings.notification.method
appUserInfo.settings.notification )
.alertExposureTime * 1000 ? true
}; : false,
this.nativeService.notify(notiReq); displayTime:
appUserInfo.settings.notification
.alertExposureTime * 1000
};
this.nativeService.notify(notiReq);
}
} }
} }
} }
@ -474,6 +480,20 @@ export class AppNotificationService {
); );
} }
break; break;
case SSVC_TYPE_ROOM_INVITE_NOTI:
{
const noti = notiOrRes as InviteNotification;
this.logger.debug(
'Notification::roomProtocolService::InviteNotification',
noti
);
this.store.dispatch(
RoomStore.inviteNotification({
noti
})
);
}
break;
case SSVC_TYPE_ROOM_UPD_RES: case SSVC_TYPE_ROOM_UPD_RES:
{ {
const noti = notiOrRes as RoomUpdateNotification; const noti = notiOrRes as RoomUpdateNotification;
@ -496,20 +516,6 @@ export class AppNotificationService {
); );
} }
break; break;
case SSVC_TYPE_ROOM_INVITE_NOTI:
{
const noti = notiOrRes as InviteNotification;
this.logger.debug(
'Notification::roomProtocolService::InviteNotification',
noti
);
this.store.dispatch(
RoomStore.inviteNotification({
noti
})
);
}
break;
case SSVC_TYPE_ROOM_EXIT_RES: case SSVC_TYPE_ROOM_EXIT_RES:
case SSVC_TYPE_ROOM_EXIT_NOTI: case SSVC_TYPE_ROOM_EXIT_NOTI:
{ {
@ -528,7 +534,8 @@ export class AppNotificationService {
} else { } else {
this.store.dispatch( this.store.dispatch(
RoomStore.exitNotificationOthers({ RoomStore.exitNotificationOthers({
noti roomSeq: noti.roomSeq,
trgtUser: [noti.SENDER_SEQ]
}) })
); );
@ -560,15 +567,31 @@ export class AppNotificationService {
break; break;
case SSVC_TYPE_ROOM_EXIT_FORCING_NOTI: case SSVC_TYPE_ROOM_EXIT_FORCING_NOTI:
{ {
// 내가 강퇴 됨.
const noti = notiOrRes as ExitForcingNotification; const noti = notiOrRes as ExitForcingNotification;
this.logger.debug( this.logger.debug(
'Notification::roomProtocolService::ExitForcingNotification NOTI', 'Notification::roomProtocolService::ExitForcingNotification NOTI',
noti noti
); );
if (noti.userSeqs.indexOf(loginResInfo.userSeq) >= 0) {
this.store.dispatch(
RoomStore.exitForcingNotification({
noti
})
);
}
this.store.dispatch( this.store.dispatch(
RoomStore.exitForcingNotification({ RoomStore.exitNotificationOthers({
noti roomSeq: noti.roomSeq,
trgtUser: noti.userSeqs
})
);
this.store.dispatch(
SyncStore.clearRoomUsers({
roomSeq: noti.roomSeq,
userSeqs: noti.userSeqs
}) })
); );
} }

View File

@ -56,9 +56,12 @@ export const exitNotification = createAction(
'[Messenger::Room] Exit Notification', '[Messenger::Room] Exit Notification',
props<{ noti: ExitNotification }>() props<{ noti: ExitNotification }>()
); );
/**
* isJoinRoom flag false .
*/
export const exitNotificationOthers = createAction( export const exitNotificationOthers = createAction(
'[Messenger::Room] Exit Notification By Others', '[Messenger::Room] Exit Notification By Others',
props<{ noti: ExitNotification }>() props<{ roomSeq: string; trgtUser: number[] }>()
); );
export const exitForcing = createAction( export const exitForcing = createAction(

View File

@ -310,8 +310,25 @@ export class Effects {
() => { () => {
return this.actions$.pipe( return this.actions$.pipe(
ofType(inviteNotification), ofType(inviteNotification),
map(action => action.noti), withLatestFrom(
tap(noti => {}) this.store.pipe(
select((state: any) => state.messenger.room.roomInfo as RoomInfo)
)
),
tap(([action, roomInfo]) => {
if (!!roomInfo && roomInfo.roomSeq === action.noti.roomSeq) {
const loginInfo = this.sessionStorageService.get<LoginInfo>(
KEY_LOGIN_INFO
);
this.store.dispatch(
info({
roomSeq: action.noti.roomSeq,
isDetail: true,
localeCode: loginInfo.localeCode
})
);
}
})
); );
}, },
{ dispatch: false } { dispatch: false }
@ -354,13 +371,11 @@ export class Effects {
tap(([action, roomInfo]) => { tap(([action, roomInfo]) => {
if ( if (
!!roomInfo && !!roomInfo &&
roomInfo.roomSeq === action.noti.roomSeq && roomInfo.roomSeq === action.roomSeq &&
!!action.noti && !!action.trgtUser &&
!!action.noti.SENDER_SEQ action.trgtUser.length > 0
) { ) {
this.store.dispatch( this.store.dispatch(clearRoomUser({ userSeqs: action.trgtUser }));
clearRoomUser({ userSeqs: [action.noti.SENDER_SEQ] })
);
} }
}) })
); );

View File

@ -10,7 +10,7 @@ import {
import * as AuthenticationStore from '@app/store/account/authentication'; import * as AuthenticationStore from '@app/store/account/authentication';
import * as ChatStore from '@app/store/messenger/chat'; import * as ChatStore from '@app/store/messenger/chat';
import { UserInfo } from '@ucap-webmessenger/protocol-room'; import { UserInfo, UserInfoShort } from '@ucap-webmessenger/protocol-room';
export const reducer = createReducer( export const reducer = createReducer(
initialState, initialState,
@ -28,14 +28,45 @@ export const reducer = createReducer(
}), }),
on(clearRoomUser, (state, action) => { on(clearRoomUser, (state, action) => {
const tmpUserInfoList: UserInfo[] = [];
const tmpUserInfoShortList: UserInfoShort[] = [];
action.userSeqs.forEach(userSeq => {
const userInfo: UserInfo = {
...state.userInfoList.entities[userSeq]
};
if (!!userInfo && !!userInfo.seq) {
tmpUserInfoList.push({
...userInfo,
isJoinRoom: false
});
}
const userInfoShort: UserInfoShort = {
...state.userInfoShortList.entities[userSeq]
};
if (!!userInfoShort && !!userInfoShort.seq) {
tmpUserInfoShortList.push({
...userInfoShort,
isJoinRoom: false
});
}
});
return { return {
...state, ...state,
userInfoList: adapterUserInfo.removeMany(action.userSeqs, { userInfoList:
...state.userInfoList tmpUserInfoList.length > 0
}), ? adapterUserInfo.upsertMany(tmpUserInfoList, {
userInfoShortList: adapterUserInfoShort.removeMany(action.userSeqs, { ...state.userInfoList
...state.userInfoShortList })
}) : state.userInfoList,
userInfoShortList:
tmpUserInfoShortList.length > 0
? adapterUserInfoShort.upsertMany(tmpUserInfoShortList, {
...state.userInfoShortList
})
: state.userInfoShortList
}; };
}), }),

View File

@ -264,7 +264,7 @@ export const delGroupFailure = createAction(
props<{ error: any }>() props<{ error: any }>()
); );
/** 방 인원 클리어 */ /** Sync 되어 있는 방의 방인원의 isJoinRoom flag 를 false 로 변경. */
export const clearRoomUsers = createAction( export const clearRoomUsers = createAction(
'[Messenger::Sync] Clear room users.', '[Messenger::Sync] Clear room users.',
props<{ roomSeq: string; userSeqs: number[] }>() props<{ roomSeq: string; userSeqs: number[] }>()

View File

@ -342,6 +342,10 @@ export class Effects {
let roomSeq = null; let roomSeq = null;
for (const key in roomUsers) { for (const key in roomUsers) {
if (key === undefined) {
continue;
}
if (roomUsers.hasOwnProperty(key)) { if (roomUsers.hasOwnProperty(key)) {
const element = roomUsers[key]; const element = roomUsers[key];
if (userSeqList.length === element.userInfos.length) { if (userSeqList.length === element.userInfos.length) {
@ -371,6 +375,10 @@ export class Effects {
} }
for (const key in roomUserShorts) { for (const key in roomUserShorts) {
if (key === undefined) {
continue;
}
if (roomUserShorts.hasOwnProperty(key)) { if (roomUserShorts.hasOwnProperty(key)) {
const element = roomUserShorts[key]; const element = roomUserShorts[key];
if (userSeqList.length === element.userInfos.length) { if (userSeqList.length === element.userInfos.length) {

View File

@ -103,35 +103,45 @@ export const reducer = createReducer(
}), }),
on(clearRoomUsers, (state, action) => { on(clearRoomUsers, (state, action) => {
let roomUserList: RoomUserDetailData = { const roomUserList: RoomUserDetailData = {
...state.roomUser.entities[action.roomSeq] ...state.roomUser.entities[action.roomSeq]
}; };
let trgtRoomUserList: RoomUserDetailData;
if ( if (
!!roomUserList && !!roomUserList &&
!!roomUserList.userInfos && !!roomUserList.userInfos &&
roomUserList.userInfos.length > 0 roomUserList.userInfos.length > 0
) { ) {
const userInfos = roomUserList.userInfos.filter( const userInfos = roomUserList.userInfos.map(userInfo => {
userInfo => action.userSeqs.indexOf(userInfo.seq) < 0 if (action.userSeqs.indexOf(userInfo.seq) >= 0) {
); return { ...userInfo, isJoinRoom: false };
roomUserList = { } else {
return userInfo;
}
});
trgtRoomUserList = {
...roomUserList, ...roomUserList,
userInfos userInfos
}; };
} }
let roomUserShortList: RoomUserData = { const roomUserShortList: RoomUserData = {
...state.roomUserShort.entities[action.roomSeq] ...state.roomUserShort.entities[action.roomSeq]
}; };
let trgtRoomUserShortList: RoomUserData;
if ( if (
!!roomUserShortList && !!roomUserShortList &&
!!roomUserShortList.userInfos && !!roomUserShortList.userInfos &&
roomUserShortList.userInfos.length > 0 roomUserShortList.userInfos.length > 0
) { ) {
const userInfos = roomUserShortList.userInfos.filter( const userInfos = roomUserShortList.userInfos.map(userInfo => {
userInfo => action.userSeqs.indexOf(userInfo.seq) < 0 if (action.userSeqs.indexOf(userInfo.seq) >= 0) {
); return { ...userInfo, isJoinRoom: false };
roomUserShortList = { } else {
return userInfo;
}
});
trgtRoomUserShortList = {
...roomUserShortList, ...roomUserShortList,
userInfos userInfos
}; };
@ -139,12 +149,16 @@ export const reducer = createReducer(
return { return {
...state, ...state,
roomUser: adapterRoomUser.upsertOne(roomUserList, { roomUser: !!trgtRoomUserList
...state.roomUser ? adapterRoomUser.upsertOne(trgtRoomUserList, {
}), ...state.roomUser
roomUserShort: adapterRoomUserShort.upsertOne(roomUserShortList, { })
...state.roomUserShort : state.roomUser,
}) roomUserShort: !!trgtRoomUserShortList
? adapterRoomUserShort.upsertOne(trgtRoomUserShortList, {
...state.roomUserShort
})
: state.roomUserShort
}; };
}), }),

View File

@ -275,6 +275,14 @@ $daesang-grey: (
cursor: pointer; cursor: pointer;
} }
.cdk-global-overlay-wrapper {
align-items: center !important;
justify-content: center !important;
.mat-simple-snackbar {
justify-content: center;
}
}
.policy { .policy {
color: mat-color($accent, B100); color: mat-color($accent, B100);
} }
@ -440,7 +448,7 @@ $daesang-grey: (
} }
} }
} }
.mat-calendar-body-selected{ .mat-calendar-body-selected {
background-color: mat-color($accent); background-color: mat-color($accent);
} }
} }

View File

@ -29,9 +29,10 @@ $tablet-s-width: 768px;
.profile-img { .profile-img {
flex: 0 0 auto; flex: 0 0 auto;
&.thumbnail-mask { &.thumbnail-mask {
border-radius: 50%;
width: 40px; width: 40px;
height: 40px; height: 40px;
border: 1px solid rgb(0, 0, 0, 0.1);
border-radius: 50%;
overflow: hidden; overflow: hidden;
img { img {
width: 40px; width: 40px;

View File

@ -1,5 +1,9 @@
<div fxFlex fxLayout="row" class="chatroom-search"> <!--<div fxFlex fxLayout="row" class="chatroom-search">
<div fxLayout="row" fxLayoutAlign="start center" class="input input-lineless search-form"> <div
fxLayout="row"
fxLayoutAlign="start center"
class="input input-lineless search-form"
>
<form [formGroup]="fgSearch"> <form [formGroup]="fgSearch">
<span class="icon-img"> <span class="icon-img">
<i class="mid mdi-magnify"></i> <i class="mid mdi-magnify"></i>
@ -39,33 +43,69 @@
<i class="mid mdi-arrow-up"></i> <i class="mid mdi-arrow-up"></i>
</button> </button>
<button class="icon-button btn-search" (click)="onClickPrevSearch()"> <button class="icon-button btn-search" (click)="onClickPrevSearch()">
<i class="mid mdi-arrow-up"></i> <i class="mid mdi-arrow-up mdi-chevron-up"></i>
</button> </button>
<button class="icon-button btn-search" (click)="onClickNextSearch()"> <button class="icon-button btn-search" (click)="onClickNextSearch()">
<i class="mid mdi-arrow-down"></i> <i class="mid mdi-arrow-down mdi-chevron-down"></i>
</button> </button>
<button
<!--<mat-button-toggle-group> class="icon-button btn-close-searchbox bg-accent-dark"
<mat-button-toggle></mat-button-toggle> (click)="inputSearch.value = ''; onClickSearchCancel()"
<mat-button-toggle > >
<svg <i class="mid mdi-window-close"></i>
xmlns="http://www.w3.org/2000/svg" </button>
width="24" </div>
height="24" </div>-->
viewBox="0 0 24 24" <div fxFlex fxLayout="row" class="chatroom-search">
fill="none" <div
stroke="currentColor" fxLayout="row"
stroke-width="2" fxLayoutAlign="start center"
stroke-linecap="round" class="input input-lineless search-form"
stroke-linejoin="round" >
class="feather feather-arrow-up" <form [formGroup]="fgSearch">
<span class="icon-img">
<i class="mid mdi-magnify"></i>
</span>
<mat-form-field floatLabel="never">
<input
matInput
#inputSearch
type="text"
placeholder="{{ 'chat.searchEventByText' | translate }}"
value=""
formControlName="searchInput"
(keydown.enter)="onKeyDownEnter($event, inputSearch.value)"
/>
<button
mat-button
matSuffix
mat-icon-button
aria-label="Clear"
*ngIf="inputSearch.value"
(click)="inputSearch.value = ''"
> >
<line x1="12" y1="19" x2="12" y2="5"></line> <mat-icon>close</mat-icon>
<polyline points="5 12 12 5 19 12"></polyline> </button>
</svg> </mat-form-field>
</mat-button-toggle> <span class="text-amount">{{ curIndex }} / {{ totalCount }}</span>
<mat-button-toggle ></mat-button-toggle> </form>
</mat-button-toggle-group>--> </div>
<span class="stroke-bar"></span>
<div class="btns">
<button
*ngIf="false"
mat-stroked-button
(click)="onClickSearchAndPrev()"
class="btn-toggle"
>
<i class="mid mdi-arrow-up"></i>
</button>
<button class="icon-button btn-search" (click)="onClickPrevSearch()">
<i class="mid mdi-chevron-up"></i>
</button>
<button class="icon-button btn-search" (click)="onClickNextSearch()">
<i class="mid mdi-chevron-down"></i>
</button>
<button <button
class="icon-button btn-close-searchbox bg-accent-dark" class="icon-button btn-close-searchbox bg-accent-dark"
(click)="inputSearch.value = ''; onClickSearchCancel()" (click)="inputSearch.value = ''; onClickSearchCancel()"

View File

@ -35,8 +35,8 @@
</div> </div>
<div fxFlex="40%" style="margin-left: 30px;"> <div fxFlex="40%" style="margin-left: 30px;">
<div fxLayout="column"> <div fxLayout="column">
<div fxFlex="40px" style="margin-top: 30px;" class="Reservation-dete"> <div fxFlex="40px" class="Reservation-dete">
<span flFlexFill style="font-size: 20px;" class="text-accent-dark"> <span flFlexFill class="text-accent-dark">
{{ selectedDate.format('MMM DD YYYY, HH:mm') }} {{ selectedDate.format('MMM DD YYYY, HH:mm') }}
</span> </span>
</div> </div>

View File

@ -17,7 +17,7 @@
.actions { .actions {
margin-left: auto; margin-left: auto;
button { button {
margin-left: 8px; margin-left: 4px;
} }
} }
} }
@ -34,3 +34,8 @@
margin-right: 20px; margin-right: 20px;
} }
} }
.Reservation-dete {
margin-top: 30px;
font-size: 1.6em;
}

View File

@ -83,6 +83,7 @@ textarea {
width: auto; width: auto;
input { input {
margin: 0; margin: 0;
line-height: 1.4em;
} }
.mat-form-field-label-wrapper { .mat-form-field-label-wrapper {
top: 0; top: 0;
@ -113,10 +114,22 @@ textarea {
+ .mat-form-field-label-wrapper + .mat-form-field-label-wrapper
.mat-form-field-label { .mat-form-field-label {
font-size: 0.7em; font-size: 0.7em;
transform: translateY(-1.1em) scale(1); transform: translateY(-1.4em) scale(1);
} }
.mat-form-field-underline { .mat-form-field-underline {
background-color: none; background-color: none;
transform: scaleY(1); transform: scaleY(1);
} }
.mat-form-field-wrapper {
.mat-form-field-infix {
.mat-input-element {
line-height: 1.4em;
}
}
.mat-form-field-label-wrapper {
.mat-form-field-label {
line-height: 1.4em;
}
}
}
} }

View File

@ -24,6 +24,7 @@ $search-font-size: 14px;
width: 100%; width: 100%;
font-size: 1em; font-size: 1em;
padding-left: 0; padding-left: 0;
line-height: 1.4em;
} }
.btn-search { .btn-search {
color: #777777; color: #777777;
@ -60,6 +61,11 @@ $search-font-size: 14px;
line-height: 24px; line-height: 24px;
} }
} }
.mat-form-field-label-wrapper {
.mat-form-field-label {
line-height: 1.4em;
}
}
} }
} }
} }
@ -88,6 +94,7 @@ $search-font-size: 14px;
display: inline-flex; display: inline-flex;
width: 46%; width: 46%;
padding-left: 20px; padding-left: 20px;
line-height: 1.4em;
& + .searchbox { & + .searchbox {
width: 54%; width: 54%;
@ -96,6 +103,7 @@ $search-font-size: 14px;
display: inline-flex; display: inline-flex;
width: 100%; width: 100%;
font-size: 1em; font-size: 1em;
line-height: 1.4em;
padding-left: 0; padding-left: 0;
} }
.btn-search { .btn-search {

View File

@ -0,0 +1,3 @@
.mat-simple-snackbar {
justify-content: center;
}