스티커 레이어 초안 작성.

2019-11-20 18:04:24 +09:00 · 2019-11-20 18:04:24 +09:00 · 3b1a077ef9
commit 3b1a077ef9
parent 47ff1d3e4a
12 changed files with 274 additions and 6 deletions
--- 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"
      ></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>
--- 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;
    }
  }
 }
--- 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<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,
--- a/projects/ucap-webmessenger-core/src/lib/utils/sticker.util.ts
+++ 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;
+  }
+}
--- 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';
--- 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()"
    />

-    <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
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.ts
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.ts
@ -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();
+  }
 }
--- a/projects/ucap-webmessenger-ui/src/lib/components/sticker-selector.component.html
+++ b/projects/ucap-webmessenger-ui/src/lib/components/sticker-selector.component.html
@ -0,0 +1,4 @@
+<p>sticker-selector works!</p>
+<p *ngFor="let stickerInfo of stickerInfoList">
+  {{ stickerInfo.title }}
+</p>
--- a/projects/ucap-webmessenger-ui/src/lib/components/sticker-selector.component.scss
+++ b/projects/ucap-webmessenger-ui/src/lib/components/sticker-selector.component.scss
--- a/projects/ucap-webmessenger-ui/src/lib/components/sticker-selector.component.spec.ts
+++ b/projects/ucap-webmessenger-ui/src/lib/components/sticker-selector.component.spec.ts
@ -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();
+  });
+});
--- a/projects/ucap-webmessenger-ui/src/lib/components/sticker-selector.component.ts
+++ b/projects/ucap-webmessenger-ui/src/lib/components/sticker-selector.component.ts
@ -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();
+  }
+}
--- a/projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts
+++ b/projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts
@ -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,