ucap/next-ucap-messenger
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

change theme is modified as temparary

Browse Source
This commit is contained in:
병준 박 2019-11-25 10:57:02 +09:00
parent 93ece671cd
commit 5f31e8c136
6 changed files with 94 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/settings/messenger-settings.dialog.component.html
View File

@ -10,21 +10,29 @@
<span class="mdi mdi-settings"></span>
일반
</ng-template>
<ucap-settings-general class="setting-category general"></ucap-settings-general>
<ucap-settings-general
class="setting-category general"
(selectTheme)="onSelectTheme($event)"
></ucap-settings-general>
</mat-tab>
<mat-tab>
<ng-template mat-tab-label>
<span class="mdi mdi-lock"></span>
개인정보취급방침
</ng-template>
<ucap-settings-privacy class="setting-category"></ucap-settings-privacy>
<ucap-settings-privacy
class="setting-category"
></ucap-settings-privacy>
</mat-tab>
<mat-tab>
<ng-template mat-tab-label>
<span class="mdi mdi-bell"></span>
알림
</ng-template>
<ucap-settings-notification class="setting-category"></ucap-settings-notification>
<ucap-settings-notification
class="setting-category"
></ucap-settings-notification>
</mat-tab>
<mat-tab>
<ng-template mat-tab-label>
@ -38,7 +46,9 @@
<span class="mdi mdi-view-grid-plus"></span>
사용권한
</ng-template>
<ucap-settings-permission class="setting-category"></ucap-settings-permission>
<ucap-settings-permission
class="setting-category"
></ucap-settings-permission>
</mat-tab>
<mat-tab>
<ng-template mat-tab-label>
@ -86,11 +96,15 @@
</div>
</mat-card-content>
<mat-card-actions class="button-farm flex-row">
<button mat-stroked-button (click)="onClickChoice(false)" class="mat-primary">
<button
mat-stroked-button
(click)="onClickChoice(false)"
class="mat-primary"
>
No
</button>
<button mat-flat-button (click)="onClickChoice(true)" class="mat-primary">
Yes
</button>
</mat-card-actions>
</mat-card>
</mat-card>

11
projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/settings/messenger-settings.dialog.component.ts
View File

@ -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<any>
private store: Store<any>,
@Inject(DOCUMENT) private document: Document,
private renderer2: Renderer2
) {
this.sessionVerinfo = this.sessionStorageService.get<VersionInfo2Response>(
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({});
}

36
projects/ucap-webmessenger-ui-settings/src/lib/components/general.component.html
View File

@ -2,15 +2,39 @@
<mat-list>
<h1 mat-subheader>테마</h1>
<ul class="theme-list">
<li class="theme-box default on"></li>
<li class="theme-box lgRed"></li>
<ul class="theme-list">
<li
class="theme-box default on"
(click)="onSelectedTabChange('theme-default')"
></li>
<li
class="theme-box lgRed"
(click)="onSelectedTabChange('theme-lgRed')"
></li>
</ul>
<mat-list-item>
<span>기본값</span>
<!-- <mat-tab-group
mat-stretch-tabs
animationDuration="0ms"
(selectedTabChange)="onSelectedTabChange($event)"
>
<mat-tab>
<ng-template mat-tab-label>
<div class="theme-box default-theme"></div>
<div>기본값</div>
</ng-template>
</mat-tab>
<mat-tab>
<ng-template mat-tab-label>
<div class="theme-box lg-red-theme"></div>
<div>LG Red</div>
</ng-template>
</mat-tab>
</mat-tab-group> -->
<!--
<span>기본값</span>
<span>어둡게</span>
<span>밝게</span>
<span>밝게</span> -->
</mat-list-item>
<mat-divider></mat-divider>

30
projects/ucap-webmessenger-ui-settings/src/lib/components/general.component.scss
View File

@ -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');
}
}

15
projects/ucap-webmessenger-ui-settings/src/lib/components/general.component.ts
View File

@ -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<string>();
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() {}
}

4
projects/ucap-webmessenger-ui-settings/src/lib/ucap-ui-settings.module.ts
View File

@ -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]