Merge branch 'master' of http://10.81.13.221:6990/Web/next-ucap-messenger
This commit is contained in:
leejinho
commit
a58525874d
|
|
@ -104,9 +104,11 @@ body.theme-pink-dark {
|
|||
|
||||
// Define the primary, accent and warn palettes
|
||||
$pink-light-theme-primary-palette: mat-palette($mat-grey,800);
|
||||
$pink-light-theme-accent-palette: mat-palette($lg-red, 400);
|
||||
//$pink-light-theme-accent-palette: mat-palette($lg-red, 400);
|
||||
$pink-light-theme-accent-palette: mat-palette($daesang);
|
||||
$pink-light-theme-warn-palette: mat-palette($mat-red);
|
||||
|
||||
|
||||
// Create the Material theme object
|
||||
$pink-light-theme: mat-light-theme(
|
||||
$pink-light-theme-primary-palette,
|
||||
|
|
|
|||
|
|
@ -86,7 +86,6 @@
|
|||
stroke-linecap: square;
|
||||
stroke-linejoin: miter;
|
||||
fill: none;
|
||||
color: #2329d6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -94,7 +93,6 @@
|
|||
opacity: 1;
|
||||
.mat-tab-label-content {
|
||||
.icon-item {
|
||||
background: #ef4c73;
|
||||
transform: scale(1);
|
||||
/*svg {
|
||||
stroke: #ef4c73;
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div *ngIf="!isSearch" class="app-layout-chat-left-sidenav-chat-list">
|
||||
<perfect-scrollbar fxFlex="1 1 auto">
|
||||
<!-- <perfect-scrollbar fxFlex="1 1 auto">
|
||||
<ucap-room-list-item
|
||||
*ngFor="let room of roomList"
|
||||
[loginRes]="loginRes"
|
||||
|
|
@ -61,22 +61,19 @@
|
|||
(contextmenu)="onContextMenuChat($event, room)"
|
||||
>
|
||||
</ucap-room-list-item>
|
||||
</perfect-scrollbar>
|
||||
<!-- <cdk-virtual-scroll-viewport
|
||||
itemSize="20"
|
||||
class="app-layout-chat-left-sidenav-chat-list-viewport"
|
||||
>
|
||||
<ucap-room-list-item
|
||||
*cdkVirtualFor="let room of getRoomList()"
|
||||
[loginRes]="loginRes"
|
||||
[roomInfo]="room"
|
||||
[roomUserInfo]="getRoomUserList(room)"
|
||||
[sessionVerinfo]="sessionVerinfo"
|
||||
(click)="onSelectedRoom(room)"
|
||||
(contextmenu)="onContextMenuChat($event, room)"
|
||||
>
|
||||
</ucap-room-list-item>
|
||||
</cdk-virtual-scroll-viewport> -->
|
||||
</perfect-scrollbar> -->
|
||||
<cdk-virtual-scroll-viewport itemSize="40" perfectScrollbar fxFlexFill>
|
||||
<ucap-room-list-item
|
||||
*cdkVirtualFor="let room of roomList"
|
||||
[loginRes]="loginRes"
|
||||
[roomInfo]="room"
|
||||
[roomUserInfo]="getRoomUserList(room)"
|
||||
[sessionVerinfo]="sessionVerinfo"
|
||||
(click)="onClickContextMenu('SELECT_ROOM', room)"
|
||||
(contextmenu)="onContextMenuChat($event, room)"
|
||||
>
|
||||
</ucap-room-list-item>
|
||||
</cdk-virtual-scroll-viewport>
|
||||
</div>
|
||||
<div *ngIf="!!isSearch" class="app-layout-chat-left-sidenav-chat-list search">
|
||||
<perfect-scrollbar fxFlex="1 1 auto">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<div>
|
||||
<span>{{ selectedRightDrawer }}</span>
|
||||
<div class="rightDrawer-title">
|
||||
<h3>{{ selectedRightDrawer }}</h3>
|
||||
<span>
|
||||
<button
|
||||
mat-button
|
||||
|
|
|
|||
|
|
@ -0,0 +1,12 @@
|
|||
.rightDrawer-title{
|
||||
height: 60px;
|
||||
border-bottom: 1px solid #dddddd;
|
||||
font-size: 16px;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
padding: 0 20px;
|
||||
font-weight: 600;
|
||||
span{
|
||||
margin-left:auto;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,27 +1,29 @@
|
|||
<div fxLayout="column" style="width: 600px;" class="album-box">
|
||||
<div fxLayout="column" class="album-box">
|
||||
<div>
|
||||
<mat-tab-group (selectedIndexChange)="onSelectedIndexChange($event)">
|
||||
<mat-tab label="Image"></mat-tab>
|
||||
<mat-tab label="Video"></mat-tab>
|
||||
</mat-tab-group>
|
||||
</div>
|
||||
<div fxFlex="0 0 400px">
|
||||
<div fxFlex="1 1 240px" class="select-filebox bg-accent-brightest">
|
||||
<ng-container *ngIf="!selectedFile">
|
||||
Select File.
|
||||
</ng-container>
|
||||
<ng-container *ngIf="selectedFile">
|
||||
<img
|
||||
*ngIf="selectedFile.info.type === FileType.Image"
|
||||
[src]="getImageUrl(selectedFile)"
|
||||
class="preview-image"
|
||||
/>
|
||||
<video
|
||||
controls
|
||||
*ngIf="selectedFile.info.type === FileType.Video"
|
||||
class="preview-image"
|
||||
>
|
||||
<source [src]="getImageUrl(selectedFile)" />
|
||||
</video>
|
||||
<div class="select-file">
|
||||
<img
|
||||
*ngIf="selectedFile.info.type === FileType.Image"
|
||||
[src]="getImageUrl(selectedFile)"
|
||||
class="preview-image"
|
||||
/>
|
||||
<video
|
||||
controls
|
||||
*ngIf="selectedFile.info.type === FileType.Video"
|
||||
class="preview-video"
|
||||
>
|
||||
<source [src]="getImageUrl(selectedFile)" />
|
||||
</video>
|
||||
</div>
|
||||
<ul>
|
||||
<li>name : {{ selectedFile.info.name }}</li>
|
||||
<li>size : {{ selectedFile.info.size | ucapBytes }}</li>
|
||||
|
|
@ -66,7 +68,7 @@
|
|||
</ng-template>
|
||||
</dt>
|
||||
<dd>
|
||||
<span>
|
||||
<span class="checkbox">
|
||||
<mat-checkbox
|
||||
#checkbox
|
||||
[checked]="getCheckItem(fileInfo)"
|
||||
|
|
@ -75,7 +77,7 @@
|
|||
>
|
||||
</mat-checkbox>
|
||||
</span>
|
||||
<span>
|
||||
<span class="btn-download">
|
||||
<button mat-button (click)="onClickDownload(fileInfo)">
|
||||
<mat-icon>vertical_align_bottom</mat-icon>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -7,10 +7,69 @@
|
|||
}
|
||||
}
|
||||
|
||||
.img-item {
|
||||
cursor: pointer;
|
||||
max-width: 150px;
|
||||
min-width: 150px;
|
||||
::ng-deep .mat-tab-label{
|
||||
width:50%;
|
||||
}
|
||||
|
||||
.select-filebox{
|
||||
display:flex;
|
||||
flex-flow: column;
|
||||
margin:10px;
|
||||
padding:10px;
|
||||
border:1px solid #cccccc;
|
||||
.select-flie{
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
align-items: center;
|
||||
color: #212121;
|
||||
align-items: center;
|
||||
border-bottom: 1px dotted #dddddd;
|
||||
text-align:center;
|
||||
ul{
|
||||
padding:0;
|
||||
margin-top:10px;
|
||||
.name{
|
||||
font-weight:600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-list{
|
||||
display:flex;
|
||||
padding:0 10px;
|
||||
height: calc(100% - 450px);
|
||||
overflow-y: auto;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
.img-item {
|
||||
cursor: pointer;
|
||||
margin-bottom:10px;
|
||||
position: relative;
|
||||
dl{
|
||||
dt{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
background-color: #efefef;
|
||||
border: 1px dotted #cccccc;
|
||||
img{
|
||||
width:100%;
|
||||
height:100%;
|
||||
}
|
||||
}
|
||||
dd{
|
||||
.btn-download{
|
||||
margin-left:auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
& :nth-child(3n+0){
|
||||
margin-right:0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.preview-image {
|
||||
|
|
@ -18,6 +77,11 @@
|
|||
}
|
||||
|
||||
.btn-box {
|
||||
position:absolute;
|
||||
bottom:0;
|
||||
height:50px;
|
||||
margin-bottom:10px;
|
||||
width:100%;
|
||||
button {
|
||||
margin: 5px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,35 +1,40 @@
|
|||
<div fxLayout="column">
|
||||
<div>
|
||||
<div fxLayout="column" class="rightDrawer-filebox">
|
||||
<div class="rightDrawer-tab">
|
||||
<mat-tab-group (selectedIndexChange)="onSelectedIndexChange($event)">
|
||||
<mat-tab label="Receive"></mat-tab>
|
||||
<mat-tab label="Send"></mat-tab>
|
||||
</mat-tab-group>
|
||||
</div>
|
||||
<div fxFlex="1 1 300px">
|
||||
<ng-container *ngIf="!selectedFile">
|
||||
<div fxFlex="1 1 200px" class="select-filebox bg-accent-brightest">
|
||||
<ng-container *ngIf="!selectedFile" >
|
||||
Select File.
|
||||
</ng-container>
|
||||
<ng-container *ngIf="selectedFile">
|
||||
<div
|
||||
[ngClass]="[
|
||||
'mime-icon',
|
||||
'light',
|
||||
'ico-' + getExtention(selectedFile.info.name)
|
||||
]"
|
||||
>
|
||||
<div class="ico"></div>
|
||||
<div class="select-flie">
|
||||
<div
|
||||
[ngClass]="[
|
||||
'mime-icon',
|
||||
'light',
|
||||
'ico-' + getExtention(selectedFile.info.name)
|
||||
]"
|
||||
>
|
||||
<div class="ico"></div>
|
||||
</div>
|
||||
<ul>
|
||||
<li class="name">name : {{ selectedFile.info.name }}</li>
|
||||
<li>size : {{ selectedFile.info.size | ucapBytes }}</li>
|
||||
<li>
|
||||
date :
|
||||
{{ selectedFile.info.sendDate | dateToStringFormat: 'YYYY.MM.DD' }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
아이콘
|
||||
</div>
|
||||
<ul>
|
||||
<li>name : {{ selectedFile.info.name }}</li>
|
||||
<li>size : {{ selectedFile.info.size | ucapBytes }}</li>
|
||||
<li>
|
||||
date :
|
||||
{{ selectedFile.info.sendDate | dateToStringFormat: 'YYYY.MM.DD' }}
|
||||
</li>
|
||||
</ul>
|
||||
</ng-container>
|
||||
</div>
|
||||
<div fxFlex="1 1 auto">
|
||||
<div fxFlex="0 0 auto" class="table-box">
|
||||
<table mat-table [dataSource]="dataSource" matSort>
|
||||
<ng-container matColumnDef="check">
|
||||
<th mat-header-cell *matHeaderCellDef>
|
||||
|
|
@ -55,19 +60,21 @@
|
|||
<th mat-header-cell *matHeaderCellDef mat-sort-header class="infos">
|
||||
Name
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let element">
|
||||
<div>
|
||||
<td mat-cell *matCellDef="let element" class="file-info">
|
||||
<div class="file-name">
|
||||
{{ element.info.name }}
|
||||
</div>
|
||||
<div>
|
||||
{{ element.info.size | ucapBytes }}
|
||||
<div class="download-period text-accent-color">
|
||||
<!--{{ element.info.size | ucapBytes }}-->
|
||||
{{ element.info.sendDate | dateToStringFormat: 'YYYY.MM.DD' }} ~ 2020.01.23
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="sendDate" class="date">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>sendDate</th>
|
||||
<td mat-cell *matCellDef="let element">
|
||||
{{ element.info.sendDate | dateToStringFormat: 'YYYY.MM.DD' }}
|
||||
<!--{{ element.info.sendDate | dateToStringFormat: 'YYYY.MM.DD' }}-->
|
||||
{{ element.info.size | ucapBytes }}
|
||||
</td>
|
||||
</ng-container>
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
|
|
@ -77,28 +84,30 @@
|
|||
(click)="onClickRow(row)"
|
||||
></tr>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
<div class="footer-fix">
|
||||
<mat-paginator
|
||||
[pageSize]="10"
|
||||
[pageSizeOptions]="[5, 10, 20]"
|
||||
showFirstLastButtons
|
||||
></mat-paginator>
|
||||
</div>
|
||||
<div
|
||||
fxFlex="1 1 50px"
|
||||
fxLayout="row"
|
||||
fxLayoutAlign="center center"
|
||||
class="btn-box"
|
||||
>
|
||||
<button
|
||||
mat-flat-button
|
||||
[disabled]="selectedFileList.length > 0 ? 'false' : 'true'"
|
||||
class="mat-primary"
|
||||
|
||||
<div
|
||||
fxFlex="1 1 50px"
|
||||
fxLayout="row"
|
||||
fxLayoutAlign="center center"
|
||||
class="btn-box"
|
||||
>
|
||||
Download All
|
||||
</button>
|
||||
<button mat-flat-button class="mat-primary">
|
||||
Open Folder
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
mat-flat-button
|
||||
[disabled]="selectedFileList.length > 0 ? 'false' : 'true'"
|
||||
class="mat-primary"
|
||||
>
|
||||
Download All
|
||||
</button>
|
||||
<button mat-flat-button class="mat-primary">
|
||||
Open Folder
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,87 @@
|
|||
table {
|
||||
@mixin ellipsis($row) {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@if $row == 1 {
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
} @else if $row >= 2 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: $row;
|
||||
-webkit-box-orient: vertical;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
.rightDrawer-filebox {
|
||||
width: 100%;
|
||||
height: calc(100% - 60px);
|
||||
.rightDrawer-tab {
|
||||
.mat-tab-label {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep .mat-tab-label {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.select-filebox {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
margin: 10px;
|
||||
padding: 10px;
|
||||
border: 1px solid #cccccc;
|
||||
.select-flie {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
align-items: center;
|
||||
color: #212121;
|
||||
align-items: center;
|
||||
border-bottom: 1px dotted #dddddd;
|
||||
ul {
|
||||
padding: 0;
|
||||
.name {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-table {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
th.infos {
|
||||
padding: 10px;
|
||||
}
|
||||
tr.mat-row {
|
||||
height: 70px;
|
||||
.file-info {
|
||||
padding: 16px;
|
||||
display: grid;
|
||||
height: 70px;
|
||||
.file-name {
|
||||
font-weight: 600;
|
||||
margin-bottom: 2px;
|
||||
width: 100%;
|
||||
@include ellipsis(1);
|
||||
}
|
||||
.download-period {
|
||||
font-size: 12px;
|
||||
width: 100%;
|
||||
@include ellipsis(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.table-box{
|
||||
height: calc(100% - 450px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
.mat-paginator-container {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
.mat-row:hover {
|
||||
|
|
@ -7,8 +89,42 @@ table {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-box {
|
||||
button {
|
||||
margin: 5px;
|
||||
.footer-fix{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
height:160px;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
.btn-box {
|
||||
height: 50px;
|
||||
padding-bottom: 10px;
|
||||
width: 100%;
|
||||
background-color: #ffffff;
|
||||
button {
|
||||
margin: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep .mat-paginator {
|
||||
.mat-paginator-container {
|
||||
justify-content: center;
|
||||
}
|
||||
.mat-paginator-navigation-first {
|
||||
order: 1;
|
||||
}
|
||||
.mat-paginator-navigation-previous {
|
||||
order: 2;
|
||||
}
|
||||
// override material paginator page switch
|
||||
.mat-paginator-range-label {
|
||||
order: 3;
|
||||
}
|
||||
.mat-paginator-navigation-next {
|
||||
order: 4;
|
||||
}
|
||||
.mat-paginator-navigation-last {
|
||||
order: 5;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.list {
|
||||
width: 300px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
|
|
|
|||
|
|
@ -60,6 +60,8 @@ $lg-red: (
|
|||
A200: #ff4081,
|
||||
A400: #ff3399,
|
||||
A700: #c51162,
|
||||
G100: #ef4c73,
|
||||
G900: #352a37,
|
||||
contrast: (
|
||||
50: $dark-primary-text,
|
||||
100: $dark-primary-text,
|
||||
|
|
@ -74,7 +76,9 @@ $lg-red: (
|
|||
A100: $dark-primary-text,
|
||||
A200: $light-primary-text,
|
||||
A400: $light-primary-text,
|
||||
A700: $light-primary-text
|
||||
A700: $light-primary-text,
|
||||
G100:$dark-primary-text,
|
||||
G900:$light-primary-text
|
||||
)
|
||||
);
|
||||
|
||||
|
|
@ -87,12 +91,14 @@ $daesang: (
|
|||
500: #00bcd4,
|
||||
/*600: #00acc1,*/ 600: #00b6d5,
|
||||
700: #0097a7,
|
||||
800: #00838f,
|
||||
900: #006064,
|
||||
800: #2c8493,
|
||||
900: #126a79,
|
||||
A100: #84ffff,
|
||||
A200: #18ffff,
|
||||
A400: #00e5ff,
|
||||
A700: #00b8d4,
|
||||
G100: #6dd5ed,
|
||||
/*G900: #192a2c,*/G900: #2193b0,
|
||||
contrast: (
|
||||
50: $dark-primary-text,
|
||||
100: $dark-primary-text,
|
||||
|
|
@ -108,6 +114,8 @@ $daesang: (
|
|||
A200: $dark-primary-text,
|
||||
A400: $dark-primary-text,
|
||||
A700: $dark-primary-text,
|
||||
G100: $dark-primary-text,
|
||||
G900: $light-primary-text
|
||||
)
|
||||
);
|
||||
|
||||
|
|
@ -122,6 +130,9 @@ $daesang: (
|
|||
$background: map-get($theme, background);
|
||||
$foreground: map-get($theme, foreground);
|
||||
|
||||
$gradient-darkest:mat-color($accent, G900);
|
||||
$gradient-light:mat-color($accent, G100);
|
||||
|
||||
.bg-primary-dark{
|
||||
background: mat-color($primary, 900);
|
||||
color: mat-color($primary, default-contrast);
|
||||
|
|
@ -179,6 +190,15 @@ $daesang: (
|
|||
/*.mat-form-field-appearance-legacy .mat-hint{
|
||||
color: mat-color($accent, 800);
|
||||
}*/
|
||||
.global-menu {
|
||||
.mat-tab-label[aria-selected='true']{
|
||||
.mat-tab-label-content{
|
||||
.icon-item{
|
||||
background: mat-color($accent, 300);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-form-field-appearance-legacy {
|
||||
.mat-form-field-label {
|
||||
|
|
@ -205,4 +225,15 @@ $daesang: (
|
|||
background: mat-color($accent, 600);
|
||||
color: mat-color($primary, default-contrast);
|
||||
}
|
||||
.current-head {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 0 10px;
|
||||
height: 70px;
|
||||
background-color: #eeeeee;
|
||||
background: $gradient-light;
|
||||
background: -webkit-linear-gradient(to right, $gradient-darkest, $gradient-light);
|
||||
background: linear-gradient(to right, $gradient-darkest, $gradient-light);
|
||||
color:#ffffff;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@
|
|||
</mat-form-field>
|
||||
|
||||
<button
|
||||
class="send-message-button bg-accent-color"
|
||||
class="send-message-button bg-accent-darkest"
|
||||
mat-icon-button
|
||||
type="submit"
|
||||
aria-label="Send message"
|
||||
|
|
|
|||
|
|
@ -52,7 +52,9 @@
|
|||
}
|
||||
|
||||
.path {
|
||||
display: flex;
|
||||
padding: 6px 4px;
|
||||
align-items: center;
|
||||
.btn-toggle {
|
||||
padding: 0;
|
||||
min-width: 0;
|
||||
|
|
@ -64,6 +66,7 @@
|
|||
}
|
||||
.group-menu {
|
||||
margin-left: auto;
|
||||
opacity: 0.6;
|
||||
}
|
||||
+ ul {
|
||||
li:last-chlid {
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
<div class="room-name">
|
||||
<div class="name">{{ getRoomName(roomInfo) }}</div>
|
||||
<div
|
||||
class="num text-accent-color"
|
||||
class="num bg-accent-light"
|
||||
*ngIf="roomInfo.roomType === RoomType.Multi"
|
||||
>
|
||||
{{ roomInfo.joinUserCount }}명
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user