알람설정 디자인
This commit is contained in:
byung eun park
parent
138909bbea
commit
2f2e208316
|
|
@ -84,12 +84,17 @@ $typography: mat-typography-config(
|
|||
|
||||
@import 'src/app/pages/accounts/component/authentication/authentication.theme';
|
||||
|
||||
@import 'src/app/pages/specials/special/component/alert-config.theme';
|
||||
|
||||
// Define a mixin for easier access
|
||||
@mixin components-theme($theme) {
|
||||
// Layout components
|
||||
@include chat-panel-theme($theme);
|
||||
@include toolbar-theme($theme);
|
||||
@include login-theme($theme);
|
||||
|
||||
// UI
|
||||
@include ui-cards-theme($theme);
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
|
|
|||
|
|
@ -1 +1,470 @@
|
|||
<p>alert-config works!</p>
|
||||
<div id="cards" class="page-layout simple fullwidth">
|
||||
<!-- HEADER -->
|
||||
<div
|
||||
class="header accent p-24 h-160"
|
||||
fxLayout="row"
|
||||
fxLayoutAlign="space-between center"
|
||||
>
|
||||
<div fxLayout="column" fxLayoutAlign="center start">
|
||||
<div fxLayout="row" fxLayoutAlign="start center">
|
||||
<mat-icon class="secondary-text s-18">home</mat-icon>
|
||||
<mat-icon class="secondary-text s-16">chevron_right</mat-icon>
|
||||
<span class="secondary-text">알람 설정관리</span>
|
||||
</div>
|
||||
<div class="h2 mt-16">알람 리스트 (지원 파일형식 wav, mid)</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- / HEADER -->
|
||||
|
||||
<!-- CONTENT -->
|
||||
<div class="content" [ngClass]="this.view">
|
||||
<div class="cards">
|
||||
<!-- CARD 17 -->
|
||||
<div class="card">
|
||||
<!-- PREVIEW -->
|
||||
<div class="card-preview">
|
||||
<div class="fuse-card">
|
||||
<div class="p-16">
|
||||
<div class="h1">충전신청 알림 설정</div>
|
||||
</div>
|
||||
|
||||
<div class="px-16 line-height-1.75">
|
||||
<div class="attachment-list">
|
||||
<div
|
||||
class="attachment"
|
||||
fxLayout="row"
|
||||
fxLayoutAlign="space-between center"
|
||||
>
|
||||
<div>
|
||||
<span class="filename">attachment-2.doc</span>
|
||||
<span class="size ml-4">(12 Kb)</span>
|
||||
</div>
|
||||
|
||||
<button mat-icon-button aria-label="Delete attachment">
|
||||
<mat-icon class="s-16">close</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-divider"></div>
|
||||
|
||||
<div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="start center">
|
||||
<button mat-button color="accent" aria-label="재생">
|
||||
<mat-icon>play_circle_filled_white</mat-icon>
|
||||
</button>
|
||||
<button mat-button color="accent" aria-label="파일첨부">
|
||||
<mat-icon>attach_file</mat-icon>
|
||||
</button>
|
||||
<button mat-button color="accent">저장</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- / PREVIEW -->
|
||||
</div>
|
||||
<!-- / CARD 17 -->
|
||||
|
||||
<!-- CARD 17 -->
|
||||
<div class="card">
|
||||
<!-- PREVIEW -->
|
||||
<div class="card-preview">
|
||||
<div class="fuse-card">
|
||||
<div class="p-16">
|
||||
<div class="h1">환전신청 알림 설정</div>
|
||||
</div>
|
||||
|
||||
<div class="px-16 line-height-1.75">
|
||||
<div class="attachment-list">
|
||||
<div
|
||||
class="attachment"
|
||||
fxLayout="row"
|
||||
fxLayoutAlign="space-between center"
|
||||
>
|
||||
<div>
|
||||
<span class="filename">attachment-2.doc</span>
|
||||
<span class="size ml-4">(12 Kb)</span>
|
||||
</div>
|
||||
|
||||
<button mat-icon-button aria-label="Delete attachment">
|
||||
<mat-icon class="s-16">close</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-divider"></div>
|
||||
|
||||
<div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="start center">
|
||||
<button mat-button color="accent" aria-label="재생">
|
||||
<mat-icon>play_circle_filled_white</mat-icon>
|
||||
</button>
|
||||
<button mat-button color="accent" aria-label="파일첨부">
|
||||
<mat-icon>attach_file</mat-icon>
|
||||
</button>
|
||||
<button mat-button color="accent">저장</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- / PREVIEW -->
|
||||
</div>
|
||||
<!-- / CARD 17 -->
|
||||
|
||||
<!-- CARD 17 -->
|
||||
<div class="card">
|
||||
<!-- PREVIEW -->
|
||||
<div class="card-preview">
|
||||
<div class="fuse-card">
|
||||
<div class="p-16">
|
||||
<div class="h1">고객문의 알림 설정</div>
|
||||
</div>
|
||||
|
||||
<div class="px-16 line-height-1.75">
|
||||
<div class="attachment-list">
|
||||
<div
|
||||
class="attachment"
|
||||
fxLayout="row"
|
||||
fxLayoutAlign="space-between center"
|
||||
>
|
||||
<div>
|
||||
<span class="filename">attachment-2.doc</span>
|
||||
<span class="size ml-4">(12 Kb)</span>
|
||||
</div>
|
||||
|
||||
<button mat-icon-button aria-label="Delete attachment">
|
||||
<mat-icon class="s-16">close</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-divider"></div>
|
||||
|
||||
<div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="start center">
|
||||
<button mat-button color="accent" aria-label="재생">
|
||||
<mat-icon>play_circle_filled_white</mat-icon>
|
||||
</button>
|
||||
<button mat-button color="accent" aria-label="파일첨부">
|
||||
<mat-icon>attach_file</mat-icon>
|
||||
</button>
|
||||
<button mat-button color="accent">저장</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- / PREVIEW -->
|
||||
</div>
|
||||
<!-- / CARD 17 -->
|
||||
|
||||
<!-- CARD 17 -->
|
||||
<div class="card">
|
||||
<!-- PREVIEW -->
|
||||
<div class="card-preview">
|
||||
<div class="fuse-card">
|
||||
<div class="p-16">
|
||||
<div class="h1">신규가입 알림 설정</div>
|
||||
</div>
|
||||
|
||||
<div class="px-16 line-height-1.75">
|
||||
<div class="attachment-list">
|
||||
<div
|
||||
class="attachment"
|
||||
fxLayout="row"
|
||||
fxLayoutAlign="space-between center"
|
||||
>
|
||||
<div>
|
||||
<span class="filename">attachment-2.doc</span>
|
||||
<span class="size ml-4">(12 Kb)</span>
|
||||
</div>
|
||||
|
||||
<button mat-icon-button aria-label="Delete attachment">
|
||||
<mat-icon class="s-16">close</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-divider"></div>
|
||||
|
||||
<div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="start center">
|
||||
<button mat-button color="accent" aria-label="재생">
|
||||
<mat-icon>play_circle_filled_white</mat-icon>
|
||||
</button>
|
||||
<button mat-button color="accent" aria-label="파일첨부">
|
||||
<mat-icon>attach_file</mat-icon>
|
||||
</button>
|
||||
<button mat-button color="accent">저장</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- / PREVIEW -->
|
||||
</div>
|
||||
<!-- / CARD 17 -->
|
||||
|
||||
<!-- CARD 17 -->
|
||||
<div class="card">
|
||||
<!-- PREVIEW -->
|
||||
<div class="card-preview">
|
||||
<div class="fuse-card">
|
||||
<div class="p-16">
|
||||
<div class="h1">새게시물 알림 설정</div>
|
||||
</div>
|
||||
|
||||
<div class="px-16 line-height-1.75">
|
||||
<div class="attachment-list">
|
||||
<div
|
||||
class="attachment"
|
||||
fxLayout="row"
|
||||
fxLayoutAlign="space-between center"
|
||||
>
|
||||
<div>
|
||||
<span class="filename">attachment-2.doc</span>
|
||||
<span class="size ml-4">(12 Kb)</span>
|
||||
</div>
|
||||
|
||||
<button mat-icon-button aria-label="Delete attachment">
|
||||
<mat-icon class="s-16">close</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-divider"></div>
|
||||
|
||||
<div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="start center">
|
||||
<button mat-button color="accent" aria-label="재생">
|
||||
<mat-icon>play_circle_filled_white</mat-icon>
|
||||
</button>
|
||||
<button mat-button color="accent" aria-label="파일첨부">
|
||||
<mat-icon>attach_file</mat-icon>
|
||||
</button>
|
||||
<button mat-button color="accent">저장</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- / PREVIEW -->
|
||||
</div>
|
||||
<!-- / CARD 17 -->
|
||||
|
||||
<!-- CARD 17 -->
|
||||
<div class="card">
|
||||
<!-- PREVIEW -->
|
||||
<div class="card-preview">
|
||||
<div class="fuse-card">
|
||||
<div class="p-16">
|
||||
<div class="h1">(30만원)배팅경고 알림 설정</div>
|
||||
</div>
|
||||
|
||||
<div class="px-16 line-height-1.75">
|
||||
<div class="attachment-list">
|
||||
<div
|
||||
class="attachment"
|
||||
fxLayout="row"
|
||||
fxLayoutAlign="space-between center"
|
||||
>
|
||||
<div>
|
||||
<span class="filename">attachment-2.doc</span>
|
||||
<span class="size ml-4">(12 Kb)</span>
|
||||
</div>
|
||||
|
||||
<button mat-icon-button aria-label="Delete attachment">
|
||||
<mat-icon class="s-16">close</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-divider"></div>
|
||||
|
||||
<div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="start center">
|
||||
<button mat-button color="accent" aria-label="재생">
|
||||
<mat-icon>play_circle_filled_white</mat-icon>
|
||||
</button>
|
||||
<button mat-button color="accent" aria-label="파일첨부">
|
||||
<mat-icon>attach_file</mat-icon>
|
||||
</button>
|
||||
<button mat-button color="accent">저장</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- / PREVIEW -->
|
||||
</div>
|
||||
<!-- / CARD 17 -->
|
||||
<!-- CARD 17 -->
|
||||
<div class="card">
|
||||
<!-- PREVIEW -->
|
||||
<div class="card-preview">
|
||||
<div class="fuse-card">
|
||||
<div class="p-16">
|
||||
<div class="h1">배팅 알림 설정</div>
|
||||
</div>
|
||||
|
||||
<div class="px-16 line-height-1.75">
|
||||
<div class="attachment-list">
|
||||
<div
|
||||
class="attachment"
|
||||
fxLayout="row"
|
||||
fxLayoutAlign="space-between center"
|
||||
>
|
||||
<div>
|
||||
<span class="filename">attachment-2.doc</span>
|
||||
<span class="size ml-4">(12 Kb)</span>
|
||||
</div>
|
||||
|
||||
<button mat-icon-button aria-label="Delete attachment">
|
||||
<mat-icon class="s-16">close</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-divider"></div>
|
||||
|
||||
<div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="start center">
|
||||
<button mat-button color="accent" aria-label="재생">
|
||||
<mat-icon>play_circle_filled_white</mat-icon>
|
||||
</button>
|
||||
<button mat-button color="accent" aria-label="파일첨부">
|
||||
<mat-icon>attach_file</mat-icon>
|
||||
</button>
|
||||
<button mat-button color="accent">저장</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- / PREVIEW -->
|
||||
</div>
|
||||
<!-- / CARD 17 -->
|
||||
<!-- CARD 17 -->
|
||||
<div class="card">
|
||||
<!-- PREVIEW -->
|
||||
<div class="card-preview">
|
||||
<div class="fuse-card">
|
||||
<div class="p-16">
|
||||
<div class="h1">유의회원 알림 설정</div>
|
||||
</div>
|
||||
|
||||
<div class="px-16 line-height-1.75">
|
||||
<div class="attachment-list">
|
||||
<div
|
||||
class="attachment"
|
||||
fxLayout="row"
|
||||
fxLayoutAlign="space-between center"
|
||||
>
|
||||
<div>
|
||||
<span class="filename">attachment-2.doc</span>
|
||||
<span class="size ml-4">(12 Kb)</span>
|
||||
</div>
|
||||
|
||||
<button mat-icon-button aria-label="Delete attachment">
|
||||
<mat-icon class="s-16">close</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-divider"></div>
|
||||
|
||||
<div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="start center">
|
||||
<button mat-button color="accent" aria-label="재생">
|
||||
<mat-icon>play_circle_filled_white</mat-icon>
|
||||
</button>
|
||||
<button mat-button color="accent" aria-label="파일첨부">
|
||||
<mat-icon>attach_file</mat-icon>
|
||||
</button>
|
||||
<button mat-button color="accent">저장</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- / PREVIEW -->
|
||||
</div>
|
||||
<!-- / CARD 17 -->
|
||||
<!-- CARD 17 -->
|
||||
<div class="card">
|
||||
<!-- PREVIEW -->
|
||||
<div class="card-preview">
|
||||
<div class="fuse-card">
|
||||
<div class="p-16">
|
||||
<div class="h1">(유저)쪽지전송 알림 설정</div>
|
||||
</div>
|
||||
|
||||
<div class="px-16 line-height-1.75">
|
||||
<div class="attachment-list">
|
||||
<div
|
||||
class="attachment"
|
||||
fxLayout="row"
|
||||
fxLayoutAlign="space-between center"
|
||||
>
|
||||
<div>
|
||||
<span class="filename">attachment-2.doc</span>
|
||||
<span class="size ml-4">(12 Kb)</span>
|
||||
</div>
|
||||
|
||||
<button mat-icon-button aria-label="Delete attachment">
|
||||
<mat-icon class="s-16">close</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-divider"></div>
|
||||
|
||||
<div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="start center">
|
||||
<button mat-button color="accent" aria-label="재생">
|
||||
<mat-icon>play_circle_filled_white</mat-icon>
|
||||
</button>
|
||||
<button mat-button color="accent" aria-label="파일첨부">
|
||||
<mat-icon>attach_file</mat-icon>
|
||||
</button>
|
||||
<button mat-button color="accent">저장</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- / PREVIEW -->
|
||||
</div>
|
||||
<!-- / CARD 17 -->
|
||||
<!-- CARD 17 -->
|
||||
<div class="card">
|
||||
<!-- PREVIEW -->
|
||||
<div class="card-preview">
|
||||
<div class="fuse-card">
|
||||
<div class="p-16">
|
||||
<div class="h1">(유저)문의전송 알림 설정</div>
|
||||
</div>
|
||||
|
||||
<div class="px-16 line-height-1.75">
|
||||
<div class="attachment-list">
|
||||
<div
|
||||
class="attachment"
|
||||
fxLayout="row"
|
||||
fxLayoutAlign="space-between center"
|
||||
>
|
||||
<div>
|
||||
<span class="filename">attachment-2.doc</span>
|
||||
<span class="size ml-4">(12 Kb)</span>
|
||||
</div>
|
||||
|
||||
<button mat-icon-button aria-label="Delete attachment">
|
||||
<mat-icon class="s-16">close</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-divider"></div>
|
||||
|
||||
<div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="start center">
|
||||
<button mat-button color="accent" aria-label="재생">
|
||||
<mat-icon>play_circle_filled_white</mat-icon>
|
||||
</button>
|
||||
<button mat-button color="accent" aria-label="파일첨부">
|
||||
<mat-icon>attach_file</mat-icon>
|
||||
</button>
|
||||
<button mat-button color="accent">저장</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- / PREVIEW -->
|
||||
</div>
|
||||
<!-- / CARD 17 -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- / CONTENT -->
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,52 @@
|
|||
@import 'src/@fuse/scss/fuse';
|
||||
|
||||
app-alert-config {
|
||||
.content {
|
||||
.cards {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
|
||||
.card {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding: 48px 12px 0px 65px;
|
||||
margin-bottom: 40px;
|
||||
|
||||
.card-preview {
|
||||
display: flex;
|
||||
min-width: 320px;
|
||||
}
|
||||
|
||||
.card-source {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.source {
|
||||
.cards {
|
||||
flex-direction: column;
|
||||
|
||||
.card {
|
||||
width: 100%;
|
||||
margin-bottom: 24px;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
|
||||
|
||||
.card-source {
|
||||
background: #263238;
|
||||
display: flex !important;
|
||||
flex: 1;
|
||||
max-height: 400px;
|
||||
min-width: 400px;
|
||||
margin-left: 24px;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +1,12 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
import { fuseAnimations } from 'src/@fuse/animations';
|
||||
|
||||
@Component({
|
||||
selector: 'app-alert-config',
|
||||
templateUrl: './alert-config.component.html',
|
||||
styleUrls: ['./alert-config.component.scss']
|
||||
styleUrls: ['./alert-config.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
animations: fuseAnimations
|
||||
})
|
||||
export class AlertConfigComponent implements OnInit {
|
||||
constructor() {}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,15 @@
|
|||
@mixin ui-cards-theme($theme) {
|
||||
$foreground: map-get($theme, foreground);
|
||||
|
||||
app-alert-config {
|
||||
.content {
|
||||
&.source {
|
||||
.cards {
|
||||
.card {
|
||||
border-bottom-color: map-get($foreground, divider);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatButtonToggleModule } from '@angular/material/button-toggle';
|
||||
import { MatExpansionModule } from '@angular/material/expansion';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
|
|
@ -12,9 +13,11 @@ import { MatSortModule } from '@angular/material/sort';
|
|||
import { MatTableModule } from '@angular/material/table';
|
||||
import { MatTabsModule } from '@angular/material/tabs';
|
||||
import { MatCheckboxModule } from '@angular/material/checkbox';
|
||||
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
|
||||
|
||||
import { FuseSharedModule } from 'src/@fuse/shared.module';
|
||||
import { FuseWidgetModule } from 'src/@fuse/components/widget/widget.module';
|
||||
import { FuseHighlightModule } from 'src/@fuse/components';
|
||||
|
||||
import { SpecialRoutingModule } from './special-routing.module';
|
||||
|
||||
|
|
@ -23,6 +26,7 @@ import { COMPONENTS } from './component';
|
|||
@NgModule({
|
||||
imports: [
|
||||
MatButtonModule,
|
||||
MatButtonToggleModule,
|
||||
MatExpansionModule,
|
||||
MatFormFieldModule,
|
||||
MatIconModule,
|
||||
|
|
@ -34,9 +38,11 @@ import { COMPONENTS } from './component';
|
|||
MatTableModule,
|
||||
MatTabsModule,
|
||||
MatCheckboxModule,
|
||||
MatSlideToggleModule,
|
||||
|
||||
FuseSharedModule,
|
||||
FuseWidgetModule,
|
||||
FuseHighlightModule,
|
||||
|
||||
SpecialRoutingModule
|
||||
],
|
||||
|
|
|
|||
BIN
src/assets/images/cards/play_button.jpeg
Normal file
BIN
src/assets/images/cards/play_button.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Loading…
Reference in New Issue
Block a user