스티커 레이어 초안 작성.
This commit is contained in:
leejinho
parent
47ff1d3e4a
commit
3b1a077ef9
|
|
@ -160,6 +160,15 @@
|
|||
class="file-drop-zone"
|
||||
></ucap-file-upload-queue>
|
||||
</div>
|
||||
|
||||
<div class="sticker-selector-container">
|
||||
<ucap-sticker-selector
|
||||
*ngIf="isShowStickerSelector"
|
||||
class="sticer-selector-zone"
|
||||
></ucap-sticker-selector>
|
||||
<div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- / CHAT CONTENT -->
|
||||
|
||||
|
|
@ -171,6 +180,7 @@
|
|||
[fileUploadQueue]="fileUploadQueue"
|
||||
(send)="onSendMessage($event)"
|
||||
(sendFiles)="onFileSelected($event)"
|
||||
(toggleStickerSelector)="onShowToggleStickerSelector($event)"
|
||||
></ucap-chat-form>
|
||||
<!-- / REPLY FORM -->
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -97,7 +97,23 @@
|
|||
position: absolute;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -147,6 +147,8 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
|
|||
/** Timer 대화방의 대화 삭제를 위한 interval */
|
||||
interval: any;
|
||||
|
||||
isShowStickerSelector = false;
|
||||
|
||||
snackBarPreviewEvent: MatSnackBarRef<SimpleSnackBar>;
|
||||
|
||||
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,
|
||||
|
|
|
|||
171
projects/ucap-webmessenger-core/src/lib/utils/sticker.util.ts
Normal file
171
projects/ucap-webmessenger-core/src/lib/utils/sticker.util.ts
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -16,13 +16,17 @@
|
|||
(change)="onChangeFileInput()"
|
||||
/>
|
||||
|
||||
<button mat-icon-button class="material-icons">
|
||||
<button
|
||||
mat-icon-button
|
||||
class="material-icons"
|
||||
(click)="onClickStickerSelector()"
|
||||
>
|
||||
<mat-icon>sentiment_satisfied_alt</mat-icon>
|
||||
</button>
|
||||
|
||||
<button mat-icon-button class="material-icons">
|
||||
<!-- <button mat-icon-button class="material-icons">
|
||||
<mat-icon>g_translate</mat-icon>
|
||||
</button>
|
||||
</button> -->
|
||||
</div>
|
||||
|
||||
<form
|
||||
|
|
|
|||
|
|
@ -26,6 +26,9 @@ export class FormComponent implements OnInit {
|
|||
@Output()
|
||||
sendFiles = new EventEmitter<FileUploadItem[]>();
|
||||
|
||||
@Output()
|
||||
toggleStickerSelector = new EventEmitter<void>();
|
||||
|
||||
@ViewChild('replyForm', { static: false })
|
||||
replyForm: NgForm;
|
||||
|
||||
|
|
@ -67,4 +70,8 @@ export class FormComponent implements OnInit {
|
|||
|
||||
this.fileInput.nativeElement.value = '';
|
||||
}
|
||||
|
||||
onClickStickerSelector() {
|
||||
this.toggleStickerSelector.emit();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
<p>sticker-selector works!</p>
|
||||
<p *ngFor="let stickerInfo of stickerInfoList">
|
||||
{{ stickerInfo.title }}
|
||||
</p>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { StickerSelectorComponent } from './sticker-selector.component';
|
||||
|
||||
describe('StickerSelectorComponent', () => {
|
||||
let component: StickerSelectorComponent;
|
||||
let fixture: ComponentFixture<StickerSelectorComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ StickerSelectorComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(StickerSelectorComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import {
|
||||
StickerInfo,
|
||||
StickerFilesInfo,
|
||||
StickerUtil
|
||||
} from '@ucap-webmessenger/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ucap-sticker-selector',
|
||||
templateUrl: './sticker-selector.component.html',
|
||||
styleUrls: ['./sticker-selector.component.scss']
|
||||
})
|
||||
export class StickerSelectorComponent implements OnInit {
|
||||
stickerInfoList: StickerInfo[] = [];
|
||||
stickerFileInfoList: StickerFilesInfo[] = [];
|
||||
|
||||
constructor() {}
|
||||
|
||||
ngOnInit() {
|
||||
this.stickerInfoList = StickerUtil.getStickerInfoList();
|
||||
}
|
||||
}
|
||||
|
|
@ -47,12 +47,14 @@ import {
|
|||
} from './pipes/dates.pipe';
|
||||
import { SecondsToMinutesPipe } from './pipes/seconds-to-minutes.pipe';
|
||||
import { LinkyPipe } from './pipes/linky.pipe';
|
||||
import { StickerSelectorComponent } from './components/sticker-selector.component';
|
||||
|
||||
const COMPONENTS = [
|
||||
FileUploadQueueComponent,
|
||||
FloatActionButtonComponent,
|
||||
FileViewerComponent,
|
||||
ExpansionPanelComponent,
|
||||
StickerSelectorComponent,
|
||||
|
||||
BinaryViewerComponent,
|
||||
DocumentViewerComponent,
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user