diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html index a152ee78..531e54b7 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html @@ -160,6 +160,15 @@ class="file-drop-zone" > + +
+ +
+
+
@@ -171,6 +180,7 @@ [fileUploadQueue]="fileUploadQueue" (send)="onSendMessage($event)" (sendFiles)="onFileSelected($event)" + (toggleStickerSelector)="onShowToggleStickerSelector($event)" > diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss index 3788c0be..df6a0f5f 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss @@ -29,7 +29,7 @@ align-items: center; background-color: #ffffff !important; border-bottom: 1px solid #dddddd; - box-shadow: 0 3px 6px rgba(0,0,0,.16); + box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); .chat-header { width: 100%; align-items: center; @@ -95,9 +95,25 @@ .file-drop-zone { position: absolute; - padding:10px 10px 0 10px; + padding: 10px 10px 0 10px; background-color: rgb(54, 54, 54, 0.8); - bottom:0 + bottom: 0; + } + } + + .sticker-selector-container { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: transparent; + + .sticer-selector-zone { + position: absolute; + padding: 10px 10px 0 10px; + background-color: rgb(54, 54, 54, 0.8); + bottom: 0; } } } diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts index 3ee12b66..26b198a7 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts @@ -147,6 +147,8 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit { /** Timer 대화방의 대화 삭제를 위한 interval */ interval: any; + isShowStickerSelector = false; + snackBarPreviewEvent: MatSnackBarRef; constructor( @@ -484,6 +486,10 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit { ); } + onShowToggleStickerSelector() { + this.isShowStickerSelector = !this.isShowStickerSelector; + } + async onFileViewer(fileInfo: FileEventJson) { const result = await this.dialogService.open< FileViewerDialogComponent, diff --git a/projects/ucap-webmessenger-core/src/lib/utils/sticker.util.ts b/projects/ucap-webmessenger-core/src/lib/utils/sticker.util.ts new file mode 100644 index 00000000..eed33be6 --- /dev/null +++ b/projects/ucap-webmessenger-core/src/lib/utils/sticker.util.ts @@ -0,0 +1,171 @@ +export interface StickerInfo { + index: string; + title: string; + iconPath: string; + iconPathOn: string; + useYn: boolean; + fileInfos: StickerFilesInfo[]; +} +export interface StickerFilesInfo { + index: string; + path: string; +} +const StickerMap: StickerInfo[] = [ + { + index: '00', + title: 'History', + iconPath: 'sticker_cate00.png', + iconPathOn: 'sticker_cate00_f.png', + useYn: true, + fileInfos: [] + }, + { + index: '01', + title: '꼼므', + iconPath: 'sticker_cate01.png', + iconPathOn: 'sticker_cate01_f.png', + useYn: true, + fileInfos: [ + { index: '01_01', path: 'sticker_s_01_01.png' }, + { index: '01_02', path: 'sticker_s_01_02.png' }, + { index: '01_03', path: 'sticker_s_01_03.png' }, + { index: '01_04', path: 'sticker_s_01_04.png' }, + { index: '01_05', path: 'sticker_s_01_05.png' }, + { index: '01_06', path: 'sticker_s_01_06.png' }, + { index: '01_07', path: 'sticker_s_01_07.png' }, + { index: '01_08', path: 'sticker_s_01_08.png' } + ] + }, + { + index: '02', + title: '까미', + iconPath: 'sticker_cate02.png', + iconPathOn: 'sticker_cate02_f.png', + useYn: true, + fileInfos: [ + { index: '02_02', path: 'sticker_s_02_02.png' }, + { index: '02_03', path: 'sticker_s_02_03.png' }, + { index: '02_04', path: 'sticker_s_02_04.png' }, + { index: '02_05', path: 'sticker_s_02_05.png' }, + { index: '02_06', path: 'sticker_s_02_06.png' }, + { index: '02_07', path: 'sticker_s_02_07.png' }, + { index: '02_08', path: 'sticker_s_02_08.png' } + ] + }, + { + index: '03', + title: '왈도', + iconPath: 'sticker_cate03.png', + iconPathOn: 'sticker_cate03_f.png', + useYn: true, + fileInfos: [ + { index: '03_01', path: 'sticker_s_03_01.png' }, + { index: '03_02', path: 'sticker_s_03_02.png' }, + { index: '03_03', path: 'sticker_s_03_03.png' }, + { index: '03_04', path: 'sticker_s_03_04.png' }, + { index: '03_05', path: 'sticker_s_03_05.png' }, + { index: '03_06', path: 'sticker_s_03_06.png' }, + { index: '03_07', path: 'sticker_s_03_07.png' }, + { index: '03_08', path: 'sticker_s_03_08.png' } + ] + }, + { + index: '04', + title: '웅쓰', + iconPath: 'sticker_cate04.png', + iconPathOn: 'sticker_cate04_f.png', + useYn: true, + fileInfos: [ + { index: '04_01', path: 'sticker_s_04_01.png' }, + { index: '04_02', path: 'sticker_s_04_02.png' }, + { index: '04_03', path: 'sticker_s_04_03.png' }, + { index: '04_04', path: 'sticker_s_04_04.png' }, + { index: '04_05', path: 'sticker_s_04_05.png' }, + { index: '04_06', path: 'sticker_s_04_06.png' }, + { index: '04_07', path: 'sticker_s_04_07.png' }, + { index: '04_08', path: 'sticker_s_04_08.png' } + ] + }, + { + index: '05', + title: '말풍선', + iconPath: 'sticker_cate05.png', + iconPathOn: 'sticker_cate05_f.png', + useYn: true, + fileInfos: [ + { index: '05_01', path: 'sticker_s_05_01.png' }, + { index: '05_02', path: 'sticker_s_05_02.png' }, + { index: '05_03', path: 'sticker_s_05_03.png' }, + { index: '05_04', path: 'sticker_s_05_04.png' }, + { index: '05_05', path: 'sticker_s_05_05.png' }, + { index: '05_06', path: 'sticker_s_05_06.png' }, + { index: '05_07', path: 'sticker_s_05_07.png' }, + { index: '05_08', path: 'sticker_s_05_08.png' }, + { index: '05_09', path: 'sticker_s_05_09.png' }, + { index: '05_10', path: 'sticker_s_05_10.png' }, + { index: '05_11', path: 'sticker_s_05_11.png' }, + { index: '05_12', path: 'sticker_s_05_12.png' }, + { index: '05_13', path: 'sticker_s_05_13.png' }, + { index: '05_14', path: 'sticker_s_05_14.png' }, + { index: '05_15', path: 'sticker_s_05_15.png' }, + { index: '05_16', path: 'sticker_s_05_16.png' } + ] + }, + { + index: '12', + title: '황소', + iconPath: 'sticker_cate12.png', + iconPathOn: 'sticker_cate12_f.png', + useYn: true, + fileInfos: [ + { index: '12_01', path: 'sticker_s_12_01.gif' }, + { index: '12_02', path: 'sticker_s_12_02.gif' }, + { index: '12_03', path: 'sticker_s_12_03.gif' }, + { index: '12_04', path: 'sticker_s_12_04.gif' }, + { index: '12_05', path: 'sticker_s_12_05.gif' }, + { index: '12_06', path: 'sticker_s_12_06.gif' }, + { index: '12_07', path: 'sticker_s_12_07.gif' }, + { index: '12_08', path: 'sticker_s_12_08.gif' }, + { index: '12_09', path: 'sticker_s_12_09.gif' }, + { index: '12_10', path: 'sticker_s_12_10.gif' }, + { index: '12_11', path: 'sticker_s_12_11.gif' }, + { index: '12_12', path: 'sticker_s_12_12.gif' }, + { index: '12_13', path: 'sticker_s_12_13.gif' }, + { index: '12_14', path: 'sticker_s_12_14.gif' }, + { index: '12_15', path: 'sticker_s_12_15.gif' }, + { index: '12_16', path: 'sticker_s_12_16.gif' } + ] + } +]; + +const ActiveAndOrdering: string[] = ['00', '01', '02', '03', '04', '05']; + +export class StickerUtil { + static getStickerInfoList(): StickerInfo[] { + const rtnStickerList: StickerInfo[] = []; + + ActiveAndOrdering.forEach(idx => { + const stickerInfos: StickerInfo[] = StickerMap.filter( + sticker => sticker.index === idx && sticker.useYn + ); + if (!!stickerInfos && stickerInfos.length > 0) { + rtnStickerList.push(stickerInfos[0]); + } + }); + + return rtnStickerList; + } + + static getStickerInfoSub(index: string): StickerFilesInfo[] { + const stickerFilesList: StickerFilesInfo[] = []; + const stickerInfos: StickerInfo[] = StickerMap.filter( + sticker => sticker.index === index && sticker.useYn + ); + + if (!!stickerInfos && stickerInfos.length > 0) { + stickerFilesList.concat(stickerInfos[0].fileInfos); + } + + return stickerFilesList; + } +} diff --git a/projects/ucap-webmessenger-core/src/public-api.ts b/projects/ucap-webmessenger-core/src/public-api.ts index b088a55f..e8a3a32b 100644 --- a/projects/ucap-webmessenger-core/src/public-api.ts +++ b/projects/ucap-webmessenger-core/src/public-api.ts @@ -22,6 +22,7 @@ export * from './lib/types/video-conference-type.type'; export * from './lib/utils/file.util'; export * from './lib/utils/mime.util'; +export * from './lib/utils/sticker.util'; export * from './lib/utils/string.util'; export * from './lib/config/host.config'; diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.html b/projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.html index 37d0c11a..fbc98053 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.html +++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.html @@ -16,13 +16,17 @@ (change)="onChangeFileInput()" /> - -