레이아웃 scss반영
This commit is contained in:
khk
parent
9a13fbde18
commit
9d2e92b31a
|
|
@ -37,14 +37,14 @@ $theme: mat-light-theme(
|
|||
|
||||
// Add ".theme-default" class to the body to activate this theme.
|
||||
// Class name must start with "theme-" !!!
|
||||
body.theme-default {
|
||||
/*body.theme-default {
|
||||
// Create an Angular Material theme from the $theme map
|
||||
@include angular-material-theme($theme);
|
||||
|
||||
// Apply the theme to the user components
|
||||
@include components-theme($theme);
|
||||
@include ucap-material-theme($theme);
|
||||
}
|
||||
@include ucap-material-theme($theme);
|
||||
}*/
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Define a blue-gray dark theme
|
||||
|
|
@ -103,8 +103,8 @@ body.theme-pink-dark {
|
|||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
// Define the primary, accent and warn palettes
|
||||
$pink-light-theme-primary-palette: mat-palette($mat-pink);
|
||||
$pink-light-theme-accent-palette: mat-palette($mat-pink);
|
||||
$pink-light-theme-primary-palette: mat-palette($mat-grey,800);
|
||||
$pink-light-theme-accent-palette: mat-palette($lg-red, 400);
|
||||
$pink-light-theme-warn-palette: mat-palette($mat-red);
|
||||
|
||||
// Create the Material theme object
|
||||
|
|
@ -116,10 +116,11 @@ $pink-light-theme: mat-light-theme(
|
|||
|
||||
// Add ".theme-pink-dark" class to the body to activate this theme.
|
||||
// Class name must start with "theme-" !!!
|
||||
body.theme-pink-light {
|
||||
body.theme-default {
|
||||
// Generate the Angular Material theme
|
||||
@include angular-material-theme($pink-light-theme);
|
||||
|
||||
// Apply the theme to the user components
|
||||
@include components-theme($pink-light-theme);
|
||||
@include ucap-material-theme($pink-light-theme);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -34,6 +34,7 @@
|
|||
[selectedUserList]="selectedUserList"
|
||||
(checkAllUser)="onCheckAllUser($event)"
|
||||
(checkUser)="onCheckUser($event)"
|
||||
class="organization-side"
|
||||
></app-layout-chat-left-sidenav-organization>
|
||||
</mat-tab>
|
||||
<mat-tab>
|
||||
|
|
|
|||
|
|
@ -25,7 +25,10 @@
|
|||
width: 100%;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
::ng-deep .organization-side{
|
||||
flex-direction: column;
|
||||
height:100%;
|
||||
}
|
||||
::ng-deep .global-menu {
|
||||
border-right: 1px solid #dddddd;
|
||||
.mat-tab-label-container {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<div class="app-layout-chat-left-sidenav-chat-header">
|
||||
<!--<div class="app-layout-chat-left-sidenav-chat-header list-search">
|
||||
<form [formGroup]="fgSearch">
|
||||
<mat-form-field class="w-100-p" floatLabel="never">
|
||||
<mat-form-field class="w-100-p searchbox" floatLabel="never">
|
||||
<input
|
||||
matInput
|
||||
#inputSearch
|
||||
|
|
@ -31,8 +31,37 @@
|
|||
<mat-icon>close</mat-icon>
|
||||
</button>
|
||||
</mat-form-field>
|
||||
</form>
|
||||
</form>-->
|
||||
|
||||
<div class="list-search">
|
||||
<div class="searchbox">
|
||||
<form [formGroup]="fgSearch" class="w-100-p">
|
||||
<mat-form-field floatLabel="never">
|
||||
<input
|
||||
matInput
|
||||
#inputSearch
|
||||
type="text"
|
||||
maxlength="20"
|
||||
placeholder="대화방 이름 검색"
|
||||
value=""
|
||||
formControlName="searchInput"
|
||||
[matAutocomplete]="auto"
|
||||
(keydown.enter)="onKeyDownEnter($event, inputSearch.value)"
|
||||
/>
|
||||
<button
|
||||
mat-button
|
||||
matSuffix
|
||||
mat-icon-button
|
||||
aria-label="Clear"
|
||||
(click)="inputSearch.value = ''; onClickSearchCancel()"
|
||||
>
|
||||
<mat-icon>close</mat-icon>
|
||||
</button>
|
||||
</mat-form-field>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
*ngIf="!isSearch"
|
||||
class="app-layout-chat-left-sidenav-chat-list"
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
}
|
||||
|
||||
.app-layout-chat-left-sidenav-chat-list {
|
||||
height: calc(100% - 50px);
|
||||
height: calc(100% - 60px);
|
||||
}
|
||||
|
||||
.app-layout-chat-left-sidenav-chat-list-viewport {
|
||||
|
|
@ -17,3 +17,53 @@
|
|||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
|
||||
.list-search {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 60px;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
font-size: 14px;
|
||||
border-bottom: 1px solid #dddddd;
|
||||
.searchbox{
|
||||
width:100%;
|
||||
.mat-form-field{
|
||||
display:block;
|
||||
.mat-form-field-wrapper{
|
||||
padding-bottom:0 !important;
|
||||
height: 60px;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
::ng-deep .searchbox .mat-form-field-flex{
|
||||
height: 60px;
|
||||
padding:0 10px;
|
||||
}
|
||||
::ng-deep .searchbox .mat-form-field-appearance-legacy .mat-form-field-wrapper{
|
||||
padding: 0;
|
||||
}
|
||||
::ng-deep .searchbox .mat-form-field-appearance-legacy .mat-form-field-underline{
|
||||
bottom:0;
|
||||
background-color: #cccccc !important;
|
||||
}
|
||||
/*.searchbox {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
input {
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
padding-left: 0;
|
||||
}
|
||||
.btn-search {
|
||||
color: #777777;
|
||||
font-size: 12px;
|
||||
display: inline-flex;
|
||||
margin-left: auto;
|
||||
flex: none;
|
||||
}
|
||||
}*/
|
||||
|
|
@ -170,7 +170,7 @@ export class GroupComponent implements OnInit, OnDestroy {
|
|||
CreateChatDialogResult
|
||||
>(CreateChatDialogComponent, {
|
||||
width: '600px',
|
||||
height: '500px',
|
||||
height: '700px',
|
||||
data: {
|
||||
type: UserSelectDialogType.NewGroup,
|
||||
title: 'New Group'
|
||||
|
|
@ -362,8 +362,7 @@ export class GroupComponent implements OnInit, OnDestroy {
|
|||
EditGroupDialogData,
|
||||
EditGroupDialogResult
|
||||
>(EditGroupDialogComponent, {
|
||||
width: '600px',
|
||||
height: '500px',
|
||||
|
||||
data: {
|
||||
title: 'Group Name Edit',
|
||||
group
|
||||
|
|
@ -391,7 +390,7 @@ export class GroupComponent implements OnInit, OnDestroy {
|
|||
CreateChatDialogResult
|
||||
>(CreateChatDialogComponent, {
|
||||
width: '600px',
|
||||
height: '500px',
|
||||
|
||||
data: {
|
||||
type: UserSelectDialogType.EditMember,
|
||||
title: 'Group Member Edit',
|
||||
|
|
@ -421,7 +420,7 @@ export class GroupComponent implements OnInit, OnDestroy {
|
|||
ConfirmDialogData,
|
||||
ConfirmDialogResult
|
||||
>(ConfirmDialogComponent, {
|
||||
width: '220px',
|
||||
width: '360px',
|
||||
data: {
|
||||
title: 'Delete group',
|
||||
html: `그룹(${group.name})을 삭제하시겠습니까?<br/>그룹 멤버는 해당 그룹에서만 삭제됩니다.`
|
||||
|
|
|
|||
|
|
@ -1,16 +1,15 @@
|
|||
<div
|
||||
class="oraganization-tab"
|
||||
fxLayout="column"
|
||||
*ngIf="departmentInfoList$ | async"
|
||||
>
|
||||
<div class="oraganization-tab-tree" fxFlex="40" style="overflow: scroll">
|
||||
<div class="oraganization-tab-tree" >
|
||||
<ucap-organization-tree
|
||||
[oraganizationList]="departmentInfoList$ | async"
|
||||
(selected)="onSelectedOrganization($event)"
|
||||
></ucap-organization-tree>
|
||||
</div>
|
||||
<div fxFlex="60">
|
||||
<div class="select-dept">
|
||||
<div class="select-list ">
|
||||
<div class="select-dept text-accent-color">
|
||||
<dl>
|
||||
<dt>
|
||||
{{ getSelectedDepartmentName() }}
|
||||
|
|
@ -32,7 +31,7 @@
|
|||
<div class="search-list">
|
||||
<cdk-virtual-scroll-viewport
|
||||
itemSize="20"
|
||||
style="height: calc(100% - 20px);"
|
||||
style="height: 100%;"
|
||||
>
|
||||
<ucap-profile-user-list-item
|
||||
*cdkVirtualFor="let userInfo of selectedDepartmentUserInfoList"
|
||||
|
|
|
|||
|
|
@ -15,12 +15,28 @@
|
|||
}
|
||||
}
|
||||
|
||||
.oraganization-tab {
|
||||
height: 100%;
|
||||
.oraganization-tab-tree {
|
||||
overflow-y: auto;
|
||||
|
||||
.oraganization-tab {
|
||||
height: 100%;
|
||||
flex-direction: inherit;
|
||||
display: flex;
|
||||
.oraganization-tab-tree {
|
||||
height:40%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-card-content{
|
||||
.mat-tab-body-content{
|
||||
.oraganization-box{
|
||||
.oraganization-tab {
|
||||
height: 80%;
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-box{
|
||||
height:100px;
|
||||
position: absolute;
|
||||
|
|
@ -30,46 +46,83 @@
|
|||
width:100%;
|
||||
background-color:#ffffff;
|
||||
}
|
||||
.select-dept{
|
||||
|
||||
.select-list{
|
||||
height:60%;
|
||||
border-top:1px solid #dddddd;
|
||||
height:40px;
|
||||
width:100%;
|
||||
display:inline-flex;
|
||||
align-items: center;
|
||||
padding:0 10px;
|
||||
}
|
||||
.search-list{
|
||||
height: calc(100% - 120px);
|
||||
overflow: auto;
|
||||
.list-item{
|
||||
height:70px;
|
||||
.select-dept{
|
||||
padding:0 10px;
|
||||
height:40px;
|
||||
line-height:40px;
|
||||
.dept-name{
|
||||
border-top:1px solid #dddddd;
|
||||
height:40px;
|
||||
width:100%;
|
||||
display:inline-flex;
|
||||
align-items: center;
|
||||
padding:0 10px;
|
||||
}
|
||||
}
|
||||
.search-list{
|
||||
height: calc(100% - 140px);
|
||||
overflow: auto;
|
||||
.list-item{
|
||||
height:70px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn-box{
|
||||
padding:10px;
|
||||
button{
|
||||
width:100%;
|
||||
@include ellipsis(1);
|
||||
@include ellipsis(1);
|
||||
}
|
||||
ul{
|
||||
display:flex;
|
||||
flex-flow: row;
|
||||
align-content: space-between;
|
||||
margin-top:4px;
|
||||
li{
|
||||
display:inline-flex;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
width:33%;
|
||||
margin-right: 4px;
|
||||
&:last-child{
|
||||
margin-right: 0;
|
||||
ul{
|
||||
display:flex;
|
||||
flex-flow: row;
|
||||
align-content: space-between;
|
||||
margin-top:4px;
|
||||
li{
|
||||
display:inline-flex;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
width:33%;
|
||||
margin-right: 4px;
|
||||
&:last-child{
|
||||
margin-right: 0;
|
||||
}
|
||||
button{
|
||||
text-align:center;
|
||||
width:100%;
|
||||
height:100%;
|
||||
padding: 0 6px;
|
||||
}
|
||||
}
|
||||
button{
|
||||
text-align:center;
|
||||
width:100%;
|
||||
height:100%;
|
||||
padding: 0 6px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.dialog-org {
|
||||
.oraganization-tab {
|
||||
width: 100%;
|
||||
height:380px;
|
||||
border-bottom: 1px solid #dddddd;
|
||||
position: relative;
|
||||
.oraganization-tab-tree {
|
||||
display: inline-flex;
|
||||
width: 50%;
|
||||
height:100%;
|
||||
border-right: 1px solid #dddddd;
|
||||
overflow: auto;
|
||||
}
|
||||
.select-list {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
width: 50%;
|
||||
height:100%;
|
||||
overflow: auto;
|
||||
.search-list {
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
<mat-card class="confirm-card">
|
||||
<mat-card class="confirm-card mat-elevation-z">
|
||||
<mat-card-header cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
|
||||
<mat-card-title>{{ data.title }}</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<div *ngIf="data.type === UserSelectDialogType.NewGroup">
|
||||
<form name="inputForm" [formGroup]="inputForm" novalidate>
|
||||
<mat-form-field hintLabel="특수문자는 '-,_'만 사용할 수 있습니다.">
|
||||
<mat-form-field hintLabel="특수문자는 '-,_'만 사용할 수 있습니다." style="display:block;margin-bottom:10px;">
|
||||
<input
|
||||
matInput
|
||||
#input
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
</form>
|
||||
</div>
|
||||
<div
|
||||
fxLayout
|
||||
fxLayout="column"
|
||||
fxLayout.xs="column"
|
||||
fxLayoutAlign="center"
|
||||
fxLayoutGap="10px"
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
(cancel)="onClickCancel($event)"
|
||||
></ucap-organization-tenant-search>
|
||||
</div>
|
||||
<div *ngIf="!isShowSearch">
|
||||
<div *ngIf="!isShowSearch" class="list-panel">
|
||||
<ucap-group-expansion-panel
|
||||
#groupExpansionPanel
|
||||
[groupBuddyList]="groupBuddyList$ | async"
|
||||
|
|
@ -87,12 +87,13 @@
|
|||
<ng-template mat-tab-label>
|
||||
<mat-icon>device_hub</mat-icon>
|
||||
</ng-template>
|
||||
<div style="height:500px">
|
||||
<div>
|
||||
<app-layout-chat-left-sidenav-organization
|
||||
[selectedUserList]="selectedUserList"
|
||||
[isUserSelect]="true"
|
||||
(checkAllUser)="onCheckAllUser($event)"
|
||||
(checkUser)="onCheckUser($event)"
|
||||
class="dialog-org"
|
||||
>
|
||||
</app-layout-chat-left-sidenav-organization>
|
||||
</div>
|
||||
|
|
@ -101,7 +102,7 @@
|
|||
<ng-template mat-tab-label>
|
||||
<mat-icon>chat</mat-icon>
|
||||
</ng-template>
|
||||
<div style="height:500px">
|
||||
<div>
|
||||
<cdk-virtual-scroll-viewport itemSize="20" style="height: 100%">
|
||||
<ucap-room-list-item
|
||||
*ngFor="let room of roomList"
|
||||
|
|
@ -120,7 +121,7 @@
|
|||
</mat-tab>
|
||||
</mat-tab-group>
|
||||
</div>
|
||||
<div fxFlex="150px" *ngIf="isShowSelectedUserList">
|
||||
<div *ngIf="isShowSelectedUserList" class="list-chip">
|
||||
<mat-chip-list aria-label="User selection">
|
||||
<mat-chip
|
||||
*ngFor="let userInfo of selectedUserList"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,72 @@
|
|||
::ng-deep .mat-card-header-tex {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
::ng-deep .dialog-org {
|
||||
.oraganization-tab {
|
||||
width: 100%;
|
||||
height:380px;
|
||||
border-bottom: 1px solid #dddddd;
|
||||
position: relative;
|
||||
.oraganization-tab-tree {
|
||||
display: inline-flex;
|
||||
width: 50%;
|
||||
height:100% !important;
|
||||
border-right: 1px solid #dddddd;
|
||||
overflow: auto;
|
||||
}
|
||||
.select-list {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
width: 50%;
|
||||
height:100% !important;
|
||||
overflow: auto;
|
||||
.search-list {
|
||||
overflow: auto;
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-chip {
|
||||
height: 100px;
|
||||
width: 100%;
|
||||
padding:10px;
|
||||
border:1px solid #dddddd;
|
||||
overflow: auto;
|
||||
background-color:#f9f9f9;
|
||||
}
|
||||
.mat-chip.mat-standard-chip .mat-chip-remove{
|
||||
line-height: 24px;
|
||||
}
|
||||
.confirm-card {
|
||||
min-width: 500px;
|
||||
.mat-card-header {
|
||||
margin-bottom: 20px;
|
||||
.mat-card-header-text {
|
||||
.mat-card-title {
|
||||
margin: 0 -16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.mat-card-content {
|
||||
.content-box {
|
||||
flex-direction: column;
|
||||
flex-flow: column;
|
||||
}
|
||||
}
|
||||
.button-farm {
|
||||
text-align: right;
|
||||
.mat-primary {
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
::ng-deep .mat-dialog-container .mat-tab-body-wrapper {
|
||||
height: 380px;
|
||||
}
|
||||
.list-panel{
|
||||
overflow: auto;
|
||||
height: calc(100% - 60px);
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
<mat-card class="confirm-card">
|
||||
<mat-card class="confirm-card mat-elevation-z">
|
||||
<mat-card-header cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
|
||||
<mat-card-title>{{ data.title }}</mat-card-title>
|
||||
</mat-card-header>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,27 @@
|
|||
::ng-deep .mat-card-header-tex{
|
||||
margin:0;
|
||||
}
|
||||
.confirm-card{
|
||||
min-width:500px;
|
||||
.mat-card-header{
|
||||
margin-bottom:20px;
|
||||
.mat-card-header-text{
|
||||
.mat-card-title{
|
||||
margin:0 -16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.button-farm {
|
||||
text-align:right;
|
||||
.mat-primary{
|
||||
margin-left:4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
form{
|
||||
.mat-form-field{
|
||||
width:100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,17 +1,19 @@
|
|||
<mat-card class="confirm-card">
|
||||
<mat-card class="confirm-card mat-elevation-z">
|
||||
<mat-card-header>
|
||||
<mat-card-title>{{ data.title }}</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<div>
|
||||
<div class="add-row">
|
||||
<button
|
||||
mat-button
|
||||
*ngIf="!isShowAddGroupField"
|
||||
(click)="isShowAddGroupField = !isShowAddGroupField"
|
||||
class="mat-mini-fab mat-button-base mat-accent mat-elevation-z"
|
||||
>
|
||||
<mat-icon>add_circle_outline</mat-icon> 새 그룹 추가
|
||||
<mat-icon>add</mat-icon>
|
||||
<span class="mat-fab__label">새 그룹 추가</span>
|
||||
</button>
|
||||
<div *ngIf="isShowAddGroupField">
|
||||
<div *ngIf="isShowAddGroupField" class="input-groupname-box">
|
||||
<mat-form-field hintLabel="특수문자는 '-,_'만 사용할 수 있습니다.">
|
||||
<input
|
||||
matInput
|
||||
|
|
@ -21,6 +23,7 @@
|
|||
placeholder="그룹이름"
|
||||
value=""
|
||||
/>
|
||||
|
||||
<button
|
||||
mat-button
|
||||
matSuffix
|
||||
|
|
@ -30,16 +33,23 @@
|
|||
>
|
||||
<mat-icon>close</mat-icon>
|
||||
</button>
|
||||
|
||||
<mat-hint align="end"
|
||||
>{{ inputGroupName.value?.length || 0 }}/20</mat-hint
|
||||
>
|
||||
</mat-form-field>
|
||||
<button mat-button (click)="onClickAddGroup(inputGroupName.value)">
|
||||
<mat-icon>add</mat-icon>
|
||||
</button>
|
||||
<button mat-button (click)="onClickAddGroupCancel()">
|
||||
<mat-icon>clear</mat-icon>
|
||||
</button>
|
||||
|
||||
<div class="btn-box">
|
||||
<!--<button mat-button (click)="onClickAddGroup(inputGroupName.value)">
|
||||
<mat-icon>add</mat-icon>
|
||||
</button>
|
||||
<button mat-button (click)="onClickAddGroupCancel()">
|
||||
<mat-icon>clear</mat-icon>
|
||||
</button>-->
|
||||
<button mat-stroked-button (click)="onClickAddGroupCancel()">닫기</button>
|
||||
<button mat-stroked-button color="accent" (click)="onClickAddGroup(inputGroupName.value)" class="mat-accent">그룹명 추가</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<mat-selection-list #groups>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,66 @@
|
|||
::ng-deep .mat-card-header-tex{
|
||||
margin:0;
|
||||
}
|
||||
.mat-form-field{
|
||||
width:100%;
|
||||
padding:10px;
|
||||
}
|
||||
.confirm-card{
|
||||
min-width:500px;
|
||||
.mat-card-content{
|
||||
|
||||
}
|
||||
.button-farm {
|
||||
text-align:right;
|
||||
.mat-primary{
|
||||
margin-left:4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.add-row{
|
||||
margin-bottom:10px;
|
||||
.mat-mini-fab{
|
||||
.mat-icon{
|
||||
width:40px;
|
||||
height:40px;
|
||||
line-height: 40px;
|
||||
}
|
||||
.mat-fab__label{
|
||||
color:#212121;
|
||||
margin-left:10px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.mat-selection-list{
|
||||
border-top:1px solid #999999;
|
||||
}
|
||||
.mat-list-item {
|
||||
border-bottom:1px solid #dddddd;
|
||||
}
|
||||
|
||||
.input-groupname-box{
|
||||
display:flex;
|
||||
flex-flow: column;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 4px;
|
||||
/*border:1px solid #dddddd;
|
||||
box-shadow: 0 1px 1px 0 rgba(60,64,67,.08), 0 1px 3px 1px rgba(60,64,67,.16);*/
|
||||
|
||||
.btn-box{
|
||||
margin-top:10px;
|
||||
flex-flow:row;
|
||||
height:40px;
|
||||
margin-left:auto;
|
||||
padding:0 10px;
|
||||
button{
|
||||
margin-left:4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep .mat-mini-fab .mat-button-wrapper{
|
||||
padding:0;
|
||||
}
|
||||
|
|
@ -92,7 +92,7 @@ export class SelectGroupDialogComponent implements OnInit {
|
|||
ConfirmDialogData,
|
||||
ConfirmDialogResult
|
||||
>(ConfirmDialogComponent, {
|
||||
width: '220px',
|
||||
width: '300px',
|
||||
data: {
|
||||
title: 'Add group',
|
||||
html: `그룹(${groupName})을 추가하시겠습니까?`
|
||||
|
|
|
|||
|
|
@ -51,9 +51,11 @@
|
|||
font-size: 10px;
|
||||
|
||||
.mat-icon {
|
||||
transform: translateY(-2px);
|
||||
//transform: translateY(-2px);
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
min-height:16px;
|
||||
min-width:16px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
|
|
@ -75,12 +77,12 @@
|
|||
}
|
||||
|
||||
&.app-layout-native-title-bar-minimize {
|
||||
background: darken(#673ab7, 10%);
|
||||
background: darken(#000000, 10%);
|
||||
color: darken(white, 20%);
|
||||
}
|
||||
|
||||
&.app-layout-native-title-bar-maximize {
|
||||
background: darken(#673ab7, 10%);
|
||||
background: darken(#000000, 10%);
|
||||
color: darken(white, 20%);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -45,6 +45,39 @@ ul,
|
|||
ol {
|
||||
list-style: none;
|
||||
}
|
||||
$lg-red: (
|
||||
50: #ffffff,
|
||||
100: #f8bbd0,
|
||||
200: #f48fb1,
|
||||
300: #f06292,
|
||||
400: #ef4c73,
|
||||
/* 400: #ec407a,*/ 500: #ed097e,
|
||||
600: #d81b60,
|
||||
700: #c2185b,
|
||||
800: #ad1457,
|
||||
900: #880e4f,
|
||||
A100: #ff80ab,
|
||||
A200: #ff4081,
|
||||
A400: #ff3399,
|
||||
A700: #c51162,
|
||||
contrast: (
|
||||
50: $dark-primary-text,
|
||||
100: $dark-primary-text,
|
||||
200: $dark-primary-text,
|
||||
300: $dark-primary-text,
|
||||
400: $light-primary-text,
|
||||
500: $light-primary-text,
|
||||
600: $light-primary-text,
|
||||
700: $light-primary-text,
|
||||
800: $light-primary-text,
|
||||
900: $light-primary-text,
|
||||
A100: $dark-primary-text,
|
||||
A200: $light-primary-text,
|
||||
A400: $light-primary-text,
|
||||
A700: $light-primary-text
|
||||
)
|
||||
);
|
||||
|
||||
@mixin ucap-material-theme($theme) {
|
||||
@include ucap-core-theme($theme);
|
||||
}
|
||||
|
|
@ -60,6 +93,10 @@ ol {
|
|||
background: mat-color($primary);
|
||||
color: mat-color($primary, default-contrast);
|
||||
}
|
||||
.bg-accent-dark {
|
||||
background: mat-color($accent, 600);
|
||||
color: mat-color($primary, default-contrast);
|
||||
}
|
||||
.bg-accent-color {
|
||||
background: mat-color($accent);
|
||||
color: mat-color($accent, default-contrast);
|
||||
|
|
@ -76,4 +113,28 @@ ol {
|
|||
.border-accent-color {
|
||||
border: 1px solid mat-color($accent);
|
||||
}
|
||||
.mat-tab-group.mat-primary .mat-ink-bar,
|
||||
body.theme-default .mat-tab-nav-bar.mat-primary .mat-ink-bar {
|
||||
background-color: mat-color($accent, 400);
|
||||
}
|
||||
.mat-chip.mat-standard-chip.mat-chip-selected.mat-primary {
|
||||
background-color: mat-color($accent, 200);
|
||||
}
|
||||
/*.mat-form-field-appearance-legacy .mat-hint{
|
||||
color: mat-color($accent, 800);
|
||||
}*/
|
||||
|
||||
.mat-form-field-appearance-legacy {
|
||||
.mat-form-field-label {
|
||||
color: mat-color($primary);
|
||||
}
|
||||
|
||||
.mat-hint {
|
||||
color: mat-color($primary);
|
||||
}
|
||||
|
||||
.mat-form-field-underline {
|
||||
background-color: mat-color($primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -47,8 +47,7 @@
|
|||
|
||||
<button
|
||||
mat-raised-button
|
||||
color="accent"
|
||||
class="submit-button"
|
||||
class="submit-button bg-accent-dark"
|
||||
aria-label="LOG IN"
|
||||
[disabled]="loginForm.invalid"
|
||||
(click)="onClickLogin()"
|
||||
|
|
|
|||
|
|
@ -95,7 +95,8 @@
|
|||
width:100%;
|
||||
padding:10px;
|
||||
left:0;
|
||||
background-color: #4f586b;
|
||||
//background-color: #4f586b;
|
||||
background-color: #555555;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -51,12 +51,12 @@
|
|||
</mat-form-field>
|
||||
|
||||
<button
|
||||
class="send-message-button"
|
||||
class="send-message-button bg-accent-color"
|
||||
mat-icon-button
|
||||
type="submit"
|
||||
aria-label="Send message"
|
||||
>
|
||||
<i class="material-icons bg-primary-color">
|
||||
<i class="material-icons">
|
||||
send
|
||||
</i>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -1,3 +1 @@
|
|||
<div>
|
||||
{{ contents }}
|
||||
</div>
|
||||
<div>{{ contents }}</div>
|
||||
|
|
|
|||
|
|
@ -28,6 +28,7 @@
|
|||
<ucap-chat-message-box-information
|
||||
*ngSwitchCase="EventType.Join"
|
||||
[message]="message"
|
||||
class="information-msg"
|
||||
>
|
||||
</ucap-chat-message-box-information>
|
||||
<ucap-chat-message-box-information
|
||||
|
|
|
|||
|
|
@ -140,6 +140,14 @@ $meBox-bg: #ffffff;
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.information-msg{
|
||||
width:100%;
|
||||
height:100%;
|
||||
text-align:center;
|
||||
background-color:#cccccc;
|
||||
padding:10px;
|
||||
margin:10px 0;
|
||||
}
|
||||
|
||||
.message-row {
|
||||
margin-bottom: 30px;
|
||||
|
|
@ -259,4 +267,4 @@ $meBox-bg: #ffffff;
|
|||
top: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
padding: 0;
|
||||
}
|
||||
.mat-expansion-panel-header {
|
||||
height: 40px !important;
|
||||
//height: 40px !important;
|
||||
padding: 0 20px;
|
||||
.mat-expansion-panel-header-title {
|
||||
align-items: center;
|
||||
|
|
@ -37,9 +37,14 @@
|
|||
padding: 0 20px;
|
||||
.mat-content {
|
||||
color: #666666;
|
||||
overflow: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
.box-more-spacer {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
::ng-deep .mat-content{
|
||||
overflow: unset;
|
||||
}
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
flex-direction: row;
|
||||
height: 60px;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
padding: 0 10px 0 20px;
|
||||
font-size: 14px;
|
||||
border-bottom: 1px solid #dddddd;
|
||||
.searchbox {
|
||||
|
|
|
|||
|
|
@ -105,6 +105,16 @@ $thumbnail-msize: 40px;
|
|||
@include ellipsis(1);
|
||||
font-weight: 600;
|
||||
}
|
||||
.mat-icon {
|
||||
background-repeat: no-repeat;
|
||||
display: inline-block;
|
||||
fill: currentColor;
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
font-size: 16px;
|
||||
color: #666666;
|
||||
margin-left: 4px;
|
||||
}
|
||||
.num {
|
||||
font-size: 12px;
|
||||
color: $color-main;
|
||||
|
|
|
|||
|
|
@ -14,3 +14,4 @@
|
|||
@import 'partials/scrollbars';
|
||||
@import 'partials/presence.scss';
|
||||
@import 'partials/list-item';
|
||||
@import 'partials/dialogs';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,24 @@
|
|||
/*.dialog-org {
|
||||
.oraganization-tab {
|
||||
width: 100%;
|
||||
height:380px;
|
||||
border-bottom: 1px solid #dddddd;
|
||||
.oraganization-tab-tree {
|
||||
display: inline-flex;
|
||||
width: 50%;
|
||||
height:100%;
|
||||
border-right: 1px solid #dddddd;
|
||||
overflow: auto;
|
||||
}
|
||||
.select-list {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
width: 50%;
|
||||
height:100%;
|
||||
overflow: auto;
|
||||
.search-list {
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}*/
|
||||
|
|
@ -13,4 +13,8 @@
|
|||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.mat-card-header .mat-card-title{
|
||||
margin:0 -16px;
|
||||
padding-bottom:10px;
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
<mat-card class="confirm-card">
|
||||
<mat-card class="confirm-card mat-elevation-z">
|
||||
<mat-card-header>
|
||||
<mat-card-title>{{ data.title }}</mat-card-title>
|
||||
<!-- <mat-card-subtitle>Confirm</mat-card-subtitle> -->
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<mat-card class="confirm-card">
|
||||
<mat-card-header cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
|
||||
<mat-card-title>{{ data.title }}</mat-card-title>
|
||||
<mat-card class="confirm-card mat-elevation-z">
|
||||
<mat-card-header cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle class="card-header">
|
||||
<mat-card-title >{{ data.title }}</mat-card-title>
|
||||
<!-- <mat-card-subtitle>Confirm</mat-card-subtitle> -->
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,25 @@
|
|||
::ng-deep .mat-card-header-tex{
|
||||
margin:0;
|
||||
}
|
||||
.mat-card{
|
||||
padding:10px;
|
||||
.mat-card-header{
|
||||
margin-bottom:20px;
|
||||
.mat-card-title{
|
||||
margin:0 -16px;
|
||||
padding-bottom:10px;
|
||||
}
|
||||
}
|
||||
.button-farm {
|
||||
text-align:right;
|
||||
.mat-primary{
|
||||
margin-left:4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
form{
|
||||
.mat-form-field{
|
||||
width:100%;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user