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

레이아웃 scss반영

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
projects/ucap-webmessenger-app/src/app/app.theme.scss
View File

@ -37,14 +37,14 @@ $theme: mat-light-theme(
// Add ".theme-default" class to the body to activate this theme. // Add ".theme-default" class to the body to activate this theme.
// Class name must start with "theme-" !!! // Class name must start with "theme-" !!!
body.theme-default { /*body.theme-default {
// Create an Angular Material theme from the $theme map // Create an Angular Material theme from the $theme map
@include angular-material-theme($theme); @include angular-material-theme($theme);
// Apply the theme to the user components // Apply the theme to the user components
@include components-theme($theme); @include components-theme($theme);
@include ucap-material-theme($theme); @include ucap-material-theme($theme);
} }*/
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Define a blue-gray dark theme // @ Define a blue-gray dark theme
@ -103,8 +103,8 @@ body.theme-pink-dark {
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// Define the primary, accent and warn palettes // Define the primary, accent and warn palettes
$pink-light-theme-primary-palette: mat-palette($mat-pink); $pink-light-theme-primary-palette: mat-palette($mat-grey,800);
$pink-light-theme-accent-palette: mat-palette($mat-pink); $pink-light-theme-accent-palette: mat-palette($lg-red, 400);
$pink-light-theme-warn-palette: mat-palette($mat-red); $pink-light-theme-warn-palette: mat-palette($mat-red);
// Create the Material theme object // 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. // Add ".theme-pink-dark" class to the body to activate this theme.
// Class name must start with "theme-" !!! // Class name must start with "theme-" !!!
body.theme-pink-light { body.theme-default {
// Generate the Angular Material theme // Generate the Angular Material theme
@include angular-material-theme($pink-light-theme); @include angular-material-theme($pink-light-theme);
// Apply the theme to the user components // Apply the theme to the user components
@include components-theme($pink-light-theme); @include components-theme($pink-light-theme);
@include ucap-material-theme($pink-light-theme);
} }

1
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.html
View File

@ -34,6 +34,7 @@
[selectedUserList]="selectedUserList" [selectedUserList]="selectedUserList"
(checkAllUser)="onCheckAllUser($event)" (checkAllUser)="onCheckAllUser($event)"
(checkUser)="onCheckUser($event)" (checkUser)="onCheckUser($event)"
class="organization-side"
></app-layout-chat-left-sidenav-organization> ></app-layout-chat-left-sidenav-organization>
</mat-tab> </mat-tab>
<mat-tab> <mat-tab>

5
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.scss
View File

@ -25,7 +25,10 @@
width: 100%; width: 100%;
flex-direction: row; flex-direction: row;
} }
::ng-deep .organization-side{
flex-direction: column;
height:100%;
}
::ng-deep .global-menu { ::ng-deep .global-menu {
border-right: 1px solid #dddddd; border-right: 1px solid #dddddd;
.mat-tab-label-container { .mat-tab-label-container {

35
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.html
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"> <form [formGroup]="fgSearch">
<mat-form-field class="w-100-p" floatLabel="never"> <mat-form-field class="w-100-p searchbox" floatLabel="never">
<input <input
matInput matInput
#inputSearch #inputSearch
@ -31,8 +31,37 @@
<mat-icon>close</mat-icon> <mat-icon>close</mat-icon>
</button> </button>
</mat-form-field> </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>
<div <div
*ngIf="!isSearch" *ngIf="!isSearch"
class="app-layout-chat-left-sidenav-chat-list" class="app-layout-chat-left-sidenav-chat-list"

52
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.scss
View File

@ -4,7 +4,7 @@
} }
.app-layout-chat-left-sidenav-chat-list { .app-layout-chat-left-sidenav-chat-list {
height: calc(100% - 50px); height: calc(100% - 60px);
} }
.app-layout-chat-left-sidenav-chat-list-viewport { .app-layout-chat-left-sidenav-chat-list-viewport {
@ -17,3 +17,53 @@
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; 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;
}
}*/

9
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.ts
View File

@ -170,7 +170,7 @@ export class GroupComponent implements OnInit, OnDestroy {
CreateChatDialogResult CreateChatDialogResult
>(CreateChatDialogComponent, { >(CreateChatDialogComponent, {
width: '600px', width: '600px',
height: '500px', height: '700px',
data: { data: {
type: UserSelectDialogType.NewGroup, type: UserSelectDialogType.NewGroup,
title: 'New Group' title: 'New Group'
@ -362,8 +362,7 @@ export class GroupComponent implements OnInit, OnDestroy {
EditGroupDialogData, EditGroupDialogData,
EditGroupDialogResult EditGroupDialogResult
>(EditGroupDialogComponent, { >(EditGroupDialogComponent, {
width: '600px',
height: '500px',
data: { data: {
title: 'Group Name Edit', title: 'Group Name Edit',
group group
@ -391,7 +390,7 @@ export class GroupComponent implements OnInit, OnDestroy {
CreateChatDialogResult CreateChatDialogResult
>(CreateChatDialogComponent, { >(CreateChatDialogComponent, {
width: '600px', width: '600px',
height: '500px',
data: { data: {
type: UserSelectDialogType.EditMember, type: UserSelectDialogType.EditMember,
title: 'Group Member Edit', title: 'Group Member Edit',
@ -421,7 +420,7 @@ export class GroupComponent implements OnInit, OnDestroy {
ConfirmDialogData, ConfirmDialogData,
ConfirmDialogResult ConfirmDialogResult
>(ConfirmDialogComponent, { >(ConfirmDialogComponent, {
width: '220px', width: '360px',
data: { data: {
title: 'Delete group', title: 'Delete group',
html: `그룹(${group.name})을 삭제하시겠습니까?<br/>그룹 멤버는 해당 그룹에서만 삭제됩니다.` html: `그룹(${group.name})을 삭제하시겠습니까?<br/>그룹 멤버는 해당 그룹에서만 삭제됩니다.`

9
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.html
View File

@ -1,16 +1,15 @@
<div <div
class="oraganization-tab" class="oraganization-tab"
fxLayout="column"
*ngIf="departmentInfoList$ | async" *ngIf="departmentInfoList$ | async"
> >
<div class="oraganization-tab-tree" fxFlex="40" style="overflow: scroll"> <div class="oraganization-tab-tree" >
<ucap-organization-tree <ucap-organization-tree
[oraganizationList]="departmentInfoList$ | async" [oraganizationList]="departmentInfoList$ | async"
(selected)="onSelectedOrganization($event)" (selected)="onSelectedOrganization($event)"
></ucap-organization-tree> ></ucap-organization-tree>
</div> </div>
<div fxFlex="60"> <div class="select-list ">
<div class="select-dept"> <div class="select-dept text-accent-color">
<dl> <dl>
<dt> <dt>
{{ getSelectedDepartmentName() }} {{ getSelectedDepartmentName() }}
@ -32,7 +31,7 @@
<div class="search-list"> <div class="search-list">
<cdk-virtual-scroll-viewport <cdk-virtual-scroll-viewport
itemSize="20" itemSize="20"
style="height: calc(100% - 20px);" style="height: 100%;"
> >
<ucap-profile-user-list-item <ucap-profile-user-list-item
*cdkVirtualFor="let userInfo of selectedDepartmentUserInfoList" *cdkVirtualFor="let userInfo of selectedDepartmentUserInfoList"

123
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.scss
View File

@ -15,12 +15,28 @@
} }
} }
.oraganization-tab {
height: 100%; .oraganization-tab {
.oraganization-tab-tree { height: 100%;
overflow-y: auto; 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{ .btn-box{
height:100px; height:100px;
position: absolute; position: absolute;
@ -30,46 +46,83 @@
width:100%; width:100%;
background-color:#ffffff; background-color:#ffffff;
} }
.select-dept{
.select-list{
height:60%;
border-top:1px solid #dddddd; border-top:1px solid #dddddd;
height:40px; .select-dept{
width:100%; padding:0 10px;
display:inline-flex; height:40px;
align-items: center; line-height:40px;
padding:0 10px; .dept-name{
} border-top:1px solid #dddddd;
.search-list{ height:40px;
height: calc(100% - 120px); width:100%;
overflow: auto; display:inline-flex;
.list-item{ align-items: center;
height:70px; padding:0 10px;
}
}
.search-list{
height: calc(100% - 140px);
overflow: auto;
.list-item{
height:70px;
}
} }
} }
.btn-box{ .btn-box{
padding:10px; padding:10px;
button{ button{
width:100%; width:100%;
@include ellipsis(1); @include ellipsis(1);
} }
ul{ ul{
display:flex; display:flex;
flex-flow: row; flex-flow: row;
align-content: space-between; align-content: space-between;
margin-top:4px; margin-top:4px;
li{ li{
display:inline-flex; display:inline-flex;
align-items: center; align-items: center;
flex-grow: 1; flex-grow: 1;
width:33%; width:33%;
margin-right: 4px; margin-right: 4px;
&:last-child{ &:last-child{
margin-right: 0; 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;
} }
} }
} }

15
projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.html
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-header cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
<mat-card-title>{{ data.title }}</mat-card-title> <mat-card-title>{{ data.title }}</mat-card-title>
</mat-card-header> </mat-card-header>
<mat-card-content> <mat-card-content>
<div *ngIf="data.type === UserSelectDialogType.NewGroup"> <div *ngIf="data.type === UserSelectDialogType.NewGroup">
<form name="inputForm" [formGroup]="inputForm" novalidate> <form name="inputForm" [formGroup]="inputForm" novalidate>
<mat-form-field hintLabel="특수문자는 '-,_'만 사용할 수 있습니다."> <mat-form-field hintLabel="특수문자는 '-,_'만 사용할 수 있습니다." style="display:block;margin-bottom:10px;">
<input <input
matInput matInput
#input #input
@ -18,7 +18,7 @@
</form> </form>
</div> </div>
<div <div
fxLayout fxLayout="column"
fxLayout.xs="column" fxLayout.xs="column"
fxLayoutAlign="center" fxLayoutAlign="center"
fxLayoutGap="10px" fxLayoutGap="10px"
@ -44,7 +44,7 @@
(cancel)="onClickCancel($event)" (cancel)="onClickCancel($event)"
></ucap-organization-tenant-search> ></ucap-organization-tenant-search>
</div> </div>
<div *ngIf="!isShowSearch"> <div *ngIf="!isShowSearch" class="list-panel">
<ucap-group-expansion-panel <ucap-group-expansion-panel
#groupExpansionPanel #groupExpansionPanel
[groupBuddyList]="groupBuddyList$ | async" [groupBuddyList]="groupBuddyList$ | async"
@ -87,12 +87,13 @@
<ng-template mat-tab-label> <ng-template mat-tab-label>
<mat-icon>device_hub</mat-icon> <mat-icon>device_hub</mat-icon>
</ng-template> </ng-template>
<div style="height:500px"> <div>
<app-layout-chat-left-sidenav-organization <app-layout-chat-left-sidenav-organization
[selectedUserList]="selectedUserList" [selectedUserList]="selectedUserList"
[isUserSelect]="true" [isUserSelect]="true"
(checkAllUser)="onCheckAllUser($event)" (checkAllUser)="onCheckAllUser($event)"
(checkUser)="onCheckUser($event)" (checkUser)="onCheckUser($event)"
class="dialog-org"
> >
</app-layout-chat-left-sidenav-organization> </app-layout-chat-left-sidenav-organization>
</div> </div>
@ -101,7 +102,7 @@
<ng-template mat-tab-label> <ng-template mat-tab-label>
<mat-icon>chat</mat-icon> <mat-icon>chat</mat-icon>
</ng-template> </ng-template>
<div style="height:500px"> <div>
<cdk-virtual-scroll-viewport itemSize="20" style="height: 100%"> <cdk-virtual-scroll-viewport itemSize="20" style="height: 100%">
<ucap-room-list-item <ucap-room-list-item
*ngFor="let room of roomList" *ngFor="let room of roomList"
@ -120,7 +121,7 @@
</mat-tab> </mat-tab>
</mat-tab-group> </mat-tab-group>
</div> </div>
<div fxFlex="150px" *ngIf="isShowSelectedUserList"> <div *ngIf="isShowSelectedUserList" class="list-chip">
<mat-chip-list aria-label="User selection"> <mat-chip-list aria-label="User selection">
<mat-chip <mat-chip
*ngFor="let userInfo of selectedUserList" *ngFor="let userInfo of selectedUserList"

72
projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.scss
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);
}

2
projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/edit-group.dialog.component.html
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-header cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
<mat-card-title>{{ data.title }}</mat-card-title> <mat-card-title>{{ data.title }}</mat-card-title>
</mat-card-header> </mat-card-header>

27
projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/edit-group.dialog.component.scss
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%;
}
}

30
projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/select-group.dialog.component.html
View File

@ -1,17 +1,19 @@
<mat-card class="confirm-card"> <mat-card class="confirm-card mat-elevation-z">
<mat-card-header> <mat-card-header>
<mat-card-title>{{ data.title }}</mat-card-title> <mat-card-title>{{ data.title }}</mat-card-title>
</mat-card-header> </mat-card-header>
<mat-card-content> <mat-card-content>
<div> <div class="add-row">
<button <button
mat-button mat-button
*ngIf="!isShowAddGroupField" *ngIf="!isShowAddGroupField"
(click)="isShowAddGroupField = !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> </button>
<div *ngIf="isShowAddGroupField"> <div *ngIf="isShowAddGroupField" class="input-groupname-box">
<mat-form-field hintLabel="특수문자는 '-,_'만 사용할 수 있습니다."> <mat-form-field hintLabel="특수문자는 '-,_'만 사용할 수 있습니다.">
<input <input
matInput matInput
@ -21,6 +23,7 @@
placeholder="그룹이름" placeholder="그룹이름"
value="" value=""
/> />
<button <button
mat-button mat-button
matSuffix matSuffix
@ -30,16 +33,23 @@
> >
<mat-icon>close</mat-icon> <mat-icon>close</mat-icon>
</button> </button>
<mat-hint align="end" <mat-hint align="end"
>{{ inputGroupName.value?.length || 0 }}/20</mat-hint >{{ inputGroupName.value?.length || 0 }}/20</mat-hint
> >
</mat-form-field> </mat-form-field>
<button mat-button (click)="onClickAddGroup(inputGroupName.value)">
<mat-icon>add</mat-icon> <div class="btn-box">
</button> <!--<button mat-button (click)="onClickAddGroup(inputGroupName.value)">
<button mat-button (click)="onClickAddGroupCancel()"> <mat-icon>add</mat-icon>
<mat-icon>clear</mat-icon> </button>
</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>
</div> </div>
<mat-selection-list #groups> <mat-selection-list #groups>

66
projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/select-group.dialog.component.scss
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;
}

2
projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/select-group.dialog.component.ts
View File

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

8
projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.scss
View File

@ -51,9 +51,11 @@
font-size: 10px; font-size: 10px;
.mat-icon { .mat-icon {
transform: translateY(-2px); //transform: translateY(-2px);
width: 16px; width: 16px;
height: 16px; height: 16px;
min-height:16px;
min-width:16px;
font-size: 16px; font-size: 16px;
} }
@ -75,12 +77,12 @@
} }
&.app-layout-native-title-bar-minimize { &.app-layout-native-title-bar-minimize {
background: darken(#673ab7, 10%); background: darken(#000000, 10%);
color: darken(white, 20%); color: darken(white, 20%);
} }
&.app-layout-native-title-bar-maximize { &.app-layout-native-title-bar-maximize {
background: darken(#673ab7, 10%); background: darken(#000000, 10%);
color: darken(white, 20%); color: darken(white, 20%);
} }
} }

61
projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss
View File

@ -45,6 +45,39 @@ ul,
ol { ol {
list-style: none; 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) { @mixin ucap-material-theme($theme) {
@include ucap-core-theme($theme); @include ucap-core-theme($theme);
} }
@ -60,6 +93,10 @@ ol {
background: mat-color($primary); background: mat-color($primary);
color: mat-color($primary, default-contrast); color: mat-color($primary, default-contrast);
} }
.bg-accent-dark {
background: mat-color($accent, 600);
color: mat-color($primary, default-contrast);
}
.bg-accent-color { .bg-accent-color {
background: mat-color($accent); background: mat-color($accent);
color: mat-color($accent, default-contrast); color: mat-color($accent, default-contrast);
@ -76,4 +113,28 @@ ol {
.border-accent-color { .border-accent-color {
border: 1px solid mat-color($accent); 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);
}
}
} }

3
projects/ucap-webmessenger-ui-account/src/lib/components/login.component.html
View File

@ -47,8 +47,7 @@
<button <button
mat-raised-button mat-raised-button
color="accent" class="submit-button bg-accent-dark"
class="submit-button"
aria-label="LOG IN" aria-label="LOG IN"
[disabled]="loginForm.invalid" [disabled]="loginForm.invalid"
(click)="onClickLogin()" (click)="onClickLogin()"

3
projects/ucap-webmessenger-ui-account/src/lib/components/login.component.scss
View File

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

4
projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.html
View File

@ -51,12 +51,12 @@
</mat-form-field> </mat-form-field>
<button <button
class="send-message-button" class="send-message-button bg-accent-color"
mat-icon-button mat-icon-button
type="submit" type="submit"
aria-label="Send message" aria-label="Send message"
> >
<i class="material-icons bg-primary-color"> <i class="material-icons">
send send
</i> </i>
</button> </button>

4
projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/information.component.html
View File

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

1
projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html
View File

@ -28,6 +28,7 @@
<ucap-chat-message-box-information <ucap-chat-message-box-information
*ngSwitchCase="EventType.Join" *ngSwitchCase="EventType.Join"
[message]="message" [message]="message"
class="information-msg"
> >
</ucap-chat-message-box-information> </ucap-chat-message-box-information>
<ucap-chat-message-box-information <ucap-chat-message-box-information

10
projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.scss
View File

@ -140,6 +140,14 @@ $meBox-bg: #ffffff;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.information-msg{
width:100%;
height:100%;
text-align:center;
background-color:#cccccc;
padding:10px;
margin:10px 0;
}
.message-row { .message-row {
margin-bottom: 30px; margin-bottom: 30px;
@ -259,4 +267,4 @@ $meBox-bg: #ffffff;
top: 5px; top: 5px;
} }
} }
} }

7
projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.scss
View File

@ -14,7 +14,7 @@
padding: 0; padding: 0;
} }
.mat-expansion-panel-header { .mat-expansion-panel-header {
height: 40px !important; //height: 40px !important;
padding: 0 20px; padding: 0 20px;
.mat-expansion-panel-header-title { .mat-expansion-panel-header-title {
align-items: center; align-items: center;
@ -37,9 +37,14 @@
padding: 0 20px; padding: 0 20px;
.mat-content { .mat-content {
color: #666666; color: #666666;
overflow: unset;
} }
} }
} }
.box-more-spacer { .box-more-spacer {
margin-right: 0; margin-right: 0;
} }
::ng-deep .mat-content{
overflow: unset;
}

2
projects/ucap-webmessenger-ui-organization/src/lib/components/tenant-search.component.scss
View File

@ -17,7 +17,7 @@
flex-direction: row; flex-direction: row;
height: 60px; height: 60px;
align-items: center; align-items: center;
padding: 0 20px; padding: 0 10px 0 20px;
font-size: 14px; font-size: 14px;
border-bottom: 1px solid #dddddd; border-bottom: 1px solid #dddddd;
.searchbox { .searchbox {

10
projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.scss
View File

@ -105,6 +105,16 @@ $thumbnail-msize: 40px;
@include ellipsis(1); @include ellipsis(1);
font-weight: 600; 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 { .num {
font-size: 12px; font-size: 12px;
color: $color-main; color: $color-main;

1
projects/ucap-webmessenger-ui/src/assets/scss/_ucap-ui.scss
View File

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

24
projects/ucap-webmessenger-ui/src/assets/scss/partials/_dialogs.scss Normal file
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;
}
}
}
}*/

4
projects/ucap-webmessenger-ui/src/assets/scss/partials/_list-item.scss
View File

@ -13,4 +13,8 @@
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
word-wrap: break-word; word-wrap: break-word;
}
.mat-card-header .mat-card-title{
margin:0 -16px;
padding-bottom:10px;
} }

2
projects/ucap-webmessenger-ui/src/lib/dialogs/alert.dialog.component.html
View File

@ -1,4 +1,4 @@
<mat-card class="confirm-card"> <mat-card class="confirm-card mat-elevation-z">
<mat-card-header> <mat-card-header>
<mat-card-title>{{ data.title }}</mat-card-title> <mat-card-title>{{ data.title }}</mat-card-title>
<!-- <mat-card-subtitle>Confirm</mat-card-subtitle> --> <!-- <mat-card-subtitle>Confirm</mat-card-subtitle> -->

6
projects/ucap-webmessenger-ui/src/lib/dialogs/confirm.dialog.component.html
View File

@ -1,6 +1,6 @@
<mat-card class="confirm-card"> <mat-card class="confirm-card mat-elevation-z">
<mat-card-header cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle> <mat-card-header cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle class="card-header">
<mat-card-title>{{ data.title }}</mat-card-title> <mat-card-title >{{ data.title }}</mat-card-title>
<!-- <mat-card-subtitle>Confirm</mat-card-subtitle> --> <!-- <mat-card-subtitle>Confirm</mat-card-subtitle> -->
</mat-card-header> </mat-card-header>
<mat-card-content> <mat-card-content>

25
projects/ucap-webmessenger-ui/src/lib/dialogs/confirm.dialog.component.scss
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%;
}
}