레이아웃 scss반영

This commit is contained in:
khk 2019-10-29 19:06:25 +09:00
parent 9a13fbde18
commit 9d2e92b31a
32 changed files with 543 additions and 93 deletions

View File

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

View File

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

View File

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

View File

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

View File

@ -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;
}
}*/

View File

@ -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/>그룹 멤버는 해당 그룹에서만 삭제됩니다.`

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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%;
}
}

View File

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

View File

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

View File

@ -92,7 +92,7 @@ export class SelectGroupDialogComponent implements OnInit {
ConfirmDialogData,
ConfirmDialogResult
>(ConfirmDialogComponent, {
width: '220px',
width: '300px',
data: {
title: 'Add group',
html: `그룹(${groupName})을 추가하시겠습니까?`

View File

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

View File

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

View File

@ -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()"

View File

@ -95,7 +95,8 @@
width:100%;
padding:10px;
left:0;
background-color: #4f586b;
//background-color: #4f586b;
background-color: #555555;
color: #ffffff;
}

View File

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

View File

@ -1,3 +1 @@
<div>
{{ contents }}
</div>
<div>{{ contents }}</div>

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -14,3 +14,4 @@
@import 'partials/scrollbars';
@import 'partials/presence.scss';
@import 'partials/list-item';
@import 'partials/dialogs';

View File

@ -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;
}
}
}
}*/

View File

@ -14,3 +14,7 @@
-webkit-box-orient: vertical;
word-wrap: break-word;
}
.mat-card-header .mat-card-title{
margin:0 -16px;
padding-bottom:10px;
}

View File

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

View File

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

View File

@ -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%;
}
}