From 5f31e8c136968128da52d85a3da4c86351ed2f4a Mon Sep 17 00:00:00 2001 From: Richard Park Date: Mon, 25 Nov 2019 10:57:02 +0900 Subject: [PATCH] change theme is modified as temparary --- .../messenger-settings.dialog.component.html | 26 ++++++++++---- .../messenger-settings.dialog.component.ts | 11 ++++-- .../src/lib/components/general.component.html | 36 +++++++++++++++---- .../src/lib/components/general.component.scss | 30 +++++++++------- .../src/lib/components/general.component.ts | 15 +++++++- .../src/lib/ucap-ui-settings.module.ts | 4 ++- 6 files changed, 94 insertions(+), 28 deletions(-) diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/settings/messenger-settings.dialog.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/settings/messenger-settings.dialog.component.html index 4dea90b7..7444dca5 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/settings/messenger-settings.dialog.component.html +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/settings/messenger-settings.dialog.component.html @@ -10,21 +10,29 @@ 일반 - + + 개인정보취급방침 - + 알림 - + @@ -38,7 +46,9 @@ 사용권한 - + @@ -86,11 +96,15 @@ - - \ No newline at end of file + diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/settings/messenger-settings.dialog.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/settings/messenger-settings.dialog.component.ts index 39d49939..c17dd029 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/settings/messenger-settings.dialog.component.ts +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/settings/messenger-settings.dialog.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, Inject } from '@angular/core'; +import { Component, OnInit, Inject, Renderer2 } 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'; @@ -10,6 +10,7 @@ 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'; +import { DOCUMENT } from '@angular/common'; export interface MessengerSettingsDialogData {} @@ -32,7 +33,9 @@ export class MessengerSettingsDialogComponent implements OnInit { @Inject(MAT_DIALOG_DATA) public data: MessengerSettingsDialogData, private dialogService: DialogService, private sessionStorageService: SessionStorageService, - private store: Store + private store: Store, + @Inject(DOCUMENT) private document: Document, + private renderer2: Renderer2 ) { this.sessionVerinfo = this.sessionStorageService.get( KEY_VER_INFO @@ -44,6 +47,10 @@ export class MessengerSettingsDialogComponent implements OnInit { ngOnInit() {} + onSelectTheme(theme: string): void { + this.renderer2.setAttribute(this.document.body, 'class', theme); + } + onClickChoice(choice: boolean): void { this.dialogRef.close({}); } diff --git a/projects/ucap-webmessenger-ui-settings/src/lib/components/general.component.html b/projects/ucap-webmessenger-ui-settings/src/lib/components/general.component.html index 9d243fa9..98f25ae4 100644 --- a/projects/ucap-webmessenger-ui-settings/src/lib/components/general.component.html +++ b/projects/ucap-webmessenger-ui-settings/src/lib/components/general.component.html @@ -2,15 +2,39 @@

테마

-
    -
  • -
  • +
      +
    • +
    - - 기본값 + + diff --git a/projects/ucap-webmessenger-ui-settings/src/lib/components/general.component.scss b/projects/ucap-webmessenger-ui-settings/src/lib/components/general.component.scss index a0121a63..3a190f10 100644 --- a/projects/ucap-webmessenger-ui-settings/src/lib/components/general.component.scss +++ b/projects/ucap-webmessenger-ui-settings/src/lib/components/general.component.scss @@ -5,24 +5,30 @@ margin: 10px; height: 120px; - .theme-box{ + .theme-box { width: 140px; - height:98px; - margin-right:10px; + height: 98px; + margin-right: 10px; border: 1px solid #dddddd; - background-size:100% auto; + background-size: 100% auto; background-repeat: no-repeat; opacity: 0.7; - &.default{ - background-image: url("../../../../ucap-webmessenger-app/src/assets/images/theme/theme-default.png"); + &.default { + background-image: url('../../../../ucap-webmessenger-app/src/assets/images/theme/theme-default.png'); } - &.lgRed{ - background-image: url("../../../../ucap-webmessenger-app/src/assets/images/theme/theme-lgRed.png"); - } - &.on{ - border:1px solid #333333; - opacity: 1; + &.lgRed { + background-image: url('../../../../ucap-webmessenger-app/src/assets/images/theme/theme-lgRed.png'); + } + &.on { + border: 1px solid #333333; + opacity: 1; } } + .default-theme { + background-image: url('../../../../ucap-webmessenger-app/src/assets/images/theme/theme-default.png'); + } + .lg-red-theme { + background-image: url('../../../../ucap-webmessenger-app/src/assets/images/theme/theme-lgRed.png'); + } } diff --git a/projects/ucap-webmessenger-ui-settings/src/lib/components/general.component.ts b/projects/ucap-webmessenger-ui-settings/src/lib/components/general.component.ts index acd41387..a64a5f71 100644 --- a/projects/ucap-webmessenger-ui-settings/src/lib/components/general.component.ts +++ b/projects/ucap-webmessenger-ui-settings/src/lib/components/general.component.ts @@ -1,4 +1,10 @@ -import { Component, OnInit, ChangeDetectorRef } from '@angular/core'; +import { + Component, + OnInit, + ChangeDetectorRef, + Output, + EventEmitter +} from '@angular/core'; import { FormGroup, FormBuilder } from '@angular/forms'; @Component({ @@ -9,6 +15,9 @@ import { FormGroup, FormBuilder } from '@angular/forms'; export class GeneralComponent implements OnInit { loginForm: FormGroup; + @Output() + selectTheme = new EventEmitter(); + constructor( private formBuilder: FormBuilder, private changeDetectorRef: ChangeDetectorRef @@ -16,5 +25,9 @@ export class GeneralComponent implements OnInit { ngOnInit() {} + onSelectedTabChange(theme: string) { + this.selectTheme.emit(theme); + } + onClickLogin() {} } diff --git a/projects/ucap-webmessenger-ui-settings/src/lib/ucap-ui-settings.module.ts b/projects/ucap-webmessenger-ui-settings/src/lib/ucap-ui-settings.module.ts index 5cd649e1..285eda3f 100644 --- a/projects/ucap-webmessenger-ui-settings/src/lib/ucap-ui-settings.module.ts +++ b/projects/ucap-webmessenger-ui-settings/src/lib/ucap-ui-settings.module.ts @@ -9,6 +9,7 @@ import { MatFormFieldModule } from '@angular/material/form-field'; import { MatListModule } from '@angular/material/list'; import { MatSelectModule } from '@angular/material/select'; import { MatSlideToggleModule } from '@angular/material/slide-toggle'; +import { MatTabsModule } from '@angular/material/tabs'; import { CallComponent } from './components/call.component'; import { DeviceComponent } from './components/device.component'; @@ -36,7 +37,8 @@ const SERVICES = []; MatFormFieldModule, MatListModule, MatSelectModule, - MatSlideToggleModule + MatSlideToggleModule, + MatTabsModule ], exports: [...COMPONENTS], declarations: [...COMPONENTS]