# Conflicts:
#	projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss
This commit is contained in:
leejinho 2019-11-20 18:06:42 +09:00
commit f90bb4c674
23 changed files with 264 additions and 88 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 105 KiB

View File

@ -103,10 +103,13 @@ 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-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);*/
$pink-light-theme-primary-palette: mat-palette($daesang-grey, 900);
$pink-light-theme-accent-palette: mat-palette($daesang);
$pink-light-theme-warn-palette: mat-palette($mat-red);
$pink-light-theme-warn-palette: mat-palette($mat-deep-orange);
// Create the Material theme object

View File

@ -38,9 +38,7 @@
height: 100%;
}
::ng-deep .global-menu {
border-right: 2px solid #4f4f4f;
.mat-tab-label-container {
background-color: #4f4f4f;
.mat-tab-list {
.mat-tab-labels {
flex-flow: column;

View File

@ -1,11 +1,4 @@
.current-head {
display: flex;
justify-content: center;
padding: 0 10px;
height: 70px;
background: #352a37;
background: -webkit-linear-gradient(to right, #352a37, #f15f79);
background: linear-gradient(to right, #352a37, #ef4c73);
h3 {
display: inline-flex;
padding-left: 10px;
@ -76,9 +69,17 @@
.app-layout-chat-left-sidenav-chat-list {
height: calc(100% - 130px);
position: relative;
}
.app-layout-chat-left-sidenav-chat-list-viewport {
width: 100%;
height: 100%;
}
::ng-deep .cdk-virtual-scroll-orientation-vertical {
.cdk-virtual-scroll-content-wrapper{
width: 100%;
height:100%;
contain: unset;
}
}

View File

@ -1,13 +1,5 @@
@charset 'utf-8';
.current-head {
display: flex;
justify-content: center;
padding: 0 10px;
height: 70px;
background-color: #eeeeee;
background: #f15f79;
background: -webkit-linear-gradient(to right, #352a37, #f15f79);
background: linear-gradient(to right, #352a37, #ef4c73);
color: #ffffff;
h3 {
display: inline-flex;

View File

@ -16,7 +16,7 @@
}
.current-head {
display: flex;
/*display: flex;
justify-content: center;
padding: 0 10px;
height: 70px;
@ -24,7 +24,7 @@
background: #f15f79;
background: -webkit-linear-gradient(to right, #352a37, #f15f79);
background: linear-gradient(to right, #352a37, #ef4c73);
color: #ffffff;
color: #ffffff;*/
h3 {
display: inline-flex;
padding-left: 10px;
@ -83,6 +83,7 @@
display: flex;
background-color: #f9f9f9;
dt {
font-weight:600;
}
dd {
margin-left: auto;

View File

@ -164,10 +164,9 @@
<div class="sticker-selector-container">
<ucap-sticker-selector
*ngIf="isShowStickerSelector"
class="sticer-selector-zone"
class="sticker-selector-zone"
></ucap-sticker-selector>
<div>
</div>
<div></div>
</div>
</div>
<!-- / CHAT CONTENT -->

View File

@ -45,7 +45,6 @@
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #604850;
color: #efefef;
font-size: 16px;
line-height: 40px;
@ -98,6 +97,7 @@
padding: 10px 10px 0 10px;
background-color: rgb(54, 54, 54, 0.8);
bottom: 0;
width: 100%;
}
}
@ -109,11 +109,12 @@
height: 100%;
background-color: transparent;
.sticer-selector-zone {
.sticker-selector-zone {
position: absolute;
padding: 10px 10px 0 10px;
background-color: rgb(54, 54, 54, 0.8);
bottom: 0;
width: 100%;
}
}
}

View File

@ -6,8 +6,33 @@
</mat-tab-group>
</div>
<div fxFlex="1 1 240px" class="select-filebox bg-accent-brightest">
<ng-container *ngIf="!selectedFile">
Select File.
<!--<ng-container *ngIf="!selectedFile">-->
<ng-container *ngIf="!selectedFile">
<!--이미지 빈화면-->
<div class="empty-msg">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round">
<rect x="3" y="3" width="18" height="18" rx="2" />
<circle cx="8.5" cy="8.5" r="1.5" />
<path d="M20.4 14.5L16 10 4 20" />
</svg>
<span>Select File.</span>
</div>
<!--비디오 빈화면-->
<div class="empty-msg">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round">
<rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"></rect>
<line x1="7" y1="2" x2="7" y2="22"></line>
<line x1="17" y1="2" x2="17" y2="22"></line>
<line x1="2" y1="12" x2="22" y2="12"></line>
<line x1="2" y1="7" x2="7" y2="7"></line>
<line x1="2" y1="17" x2="7" y2="17"></line>
<line x1="17" y1="17" x2="22" y2="17"></line>
<line x1="17" y1="7" x2="22" y2="7"></line>
</svg>
<span>Select File.</span>
</div>
</ng-container>
<ng-container *ngIf="selectedFile">
<div class="select-file">
@ -25,10 +50,10 @@
</video>
</div>
<ul>
<li>name : {{ selectedFile.info.name }}</li>
<li>size : {{ selectedFile.info.size | ucapBytes }}</li>
<li class="name"> {{ selectedFile.info.name }}</li>
<li><span class="text-accent-color">size :</span> {{ selectedFile.info.size | ucapBytes }}</li>
<li>
date :
<span class="text-accent-color">date :</span>
{{ selectedFile.info.sendDate | dateToStringFormat: 'YYYY.MM.DD' }}
</li>
</ul>

View File

@ -1,3 +1,18 @@
@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;
}
}
.album-box {
height: 100%;
overflow: hidden;
@ -17,22 +32,32 @@
margin:10px;
padding:10px;
border:1px solid #cccccc;
.select-flie{
display: flex;
flex-flow: row;
align-items: center;
.select-file{
color: #212121;
align-items: center;
border-bottom: 1px dotted #dddddd;
text-align:center;
ul{
padding:0;
margin-top:10px;
.name{
padding-bottom:10px;
}
ul{
padding-top:10px;
li{
@include ellipsis(1);
&.name{
font-weight:600;
}
}
}
.empty-msg{
display:inline-flex;
flex-flow: column;
margin:auto 0;
align-items: center;
justify-content: center;
color:#999999;
span{
padding:6px;
}
}
}
.search-list{
@ -41,11 +66,12 @@
height: calc(100% - 450px);
overflow-y: auto;
flex-wrap: wrap;
justify-content: space-between;
.img-item {
cursor: pointer;
margin-bottom:10px;
margin-right:9px;
position: relative;
height: 150px;
dl{
dt{
display: flex;
@ -55,6 +81,7 @@
height: 120px;
background-color: #efefef;
border: 1px dotted #cccccc;
box-sizing: border-box;
img{
width:100%;
height:100%;
@ -66,14 +93,15 @@
}
}
}
& :nth-child(3n+0){
&:nth-child(3n+0){
margin-right:0;
}
}
}
.preview-image {
max-height: 300px;
.preview-image,
.preview-video{
max-height: 140px;
}
.btn-box {

View File

@ -7,7 +7,13 @@
</div>
<div fxFlex="1 1 200px" class="select-filebox bg-accent-brightest">
<ng-container *ngIf="!selectedFile" >
Select File.
<div class="empty-msg">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round">
<path d="M13 2H6a2 2 0 0 0-2 2v16c0 1.1.9 2 2 2h12a2 2 0 0 0 2-2V9l-7-7z" />
<path d="M13 3v6h6" /></svg>
<span>Select File.</span>
</div>
</ng-container>
<ng-container *ngIf="selectedFile">
<div class="select-flie">
@ -21,7 +27,7 @@
<div class="ico"></div>
</div>
<ul>
<li class="name">name : {{ selectedFile.info.name }}</li>
<li class="name"> {{ selectedFile.info.name }}</li>
<li>size : {{ selectedFile.info.size | ucapBytes }}</li>
<li>
date :
@ -29,8 +35,35 @@
</li>
</ul>
</div>
<div>
아이콘
<div class="select-file-option">
<!--툴팁 부탁해요 -->
<span matTooltip="다운로드" class="text-accent-darkest">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round">
<path d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5" /></svg>
</span>
<span matTooltip="나에게전달" class="text-accent-darkest">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round">
<path d="M5.52 19c.64-2.2 1.84-3 3.22-3h6.52c1.38 0 2.58.8 3.22 3" />
<circle cx="12" cy="10" r="3" />
<circle cx="12" cy="12" r="10" /></svg>
</span>
<span matTooltip="파일전달" class="text-accent-darkest">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round">
<g fill="none" fill-rule="evenodd">
<path d="M18 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8c0-1.1.9-2 2-2h5M15 3h6v6M10 14L20.2 3.8" />
</g>
</svg>
</span>
<span matTooltip="파일삭제" class="text-accent-darkest">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round">
<path d="M20 11.08V8l-6-6H6a2 2 0 0 0-2 2v16c0 1.1.9 2 2 2h6" />
<path d="M14 3v5h5M15.88 20.12l4.24-4.24M15.88 15.88l4.24 4.24" /></svg>
</span>
</div>
</ng-container>
</div>

View File

@ -28,10 +28,10 @@
}
.select-filebox {
position: relative;
display: flex;
flex-flow: column;
margin: 10px;
padding: 10px;
border: 1px solid #cccccc;
.select-flie {
display: flex;
@ -39,6 +39,7 @@
align-items: center;
color: #212121;
align-items: center;
padding: 10px;
border-bottom: 1px dotted #dddddd;
ul {
padding: 0;
@ -47,6 +48,43 @@
}
}
}
.empty-msg {
display: inline-flex;
flex-flow: column;
margin: auto 0;
align-items: center;
justify-content: center;
color: #999999;
span {
padding: 6px;
}
}
.select-file-option {
position: absolute;
display: flex;
justify-content: space-between;
width: 100%;
text-align: center;
padding: 10px 0;
bottom: 4px;
span {
width: 28px;
height: 28px;
display: inline-flex;
text-align: center;
justify-content: center;
align-items: center;
margin: 0 20px;
cursor: pointer;
svg {
}
&:hover {
border-radius: 50%;
background-color: #999999;
color: #ffffff !important;
}
}
}
}
.mat-table {
@ -75,7 +113,7 @@
}
}
}
.table-box{
.table-box {
height: calc(100% - 450px);
overflow-y: auto;
}
@ -89,13 +127,14 @@
cursor: pointer;
}
.footer-fix{
.footer-fix {
position: absolute;
bottom: 0;
height:160px;
height: 160px;
flex-direction: column;
box-sizing: border-box;
display: flex;
border-top: 1px solid #dddddd;
.btn-box {
height: 50px;
padding-bottom: 10px;
@ -128,3 +167,8 @@
order: 5;
}
}
::ng-deep .mat-form-field-appearance-legacy {
.mat-form-field-infix {
padding: 6px;
}
}

View File

@ -1,3 +1,4 @@
@import "../../../../../../../ucap-webmessenger-ui/src/assets/scss/partials/presence";
.list {
width: 100%;
height: 100%;

View File

@ -94,7 +94,7 @@
}
}
}
.mat-tab-group > .mat-tab-header .mat-tab-label {
::ng-deep .mat-card > .mat-tab-labels {
border-bottom: 2px solid #dddddd;
}
::ng-deep .ps-content {

View File

@ -9,7 +9,6 @@
display: flex;
padding: 0 10px;
cursor: pointer;
background: #4f4f4f;
height: 30px;
color:#ffffff;
//background: rgba(37, 27, 30, 0.9);

View File

@ -1,4 +1,4 @@
<div class="container">
<div class="main-container">
<as-split
unit="pixel"
gutterSize="5"

View File

@ -1,11 +1,9 @@
.container {
.main-container {
height:100%;
display: flex;
flex-flow: row;
padding-top: 30px;
border: 3px solid #4f4f4f;
padding-top: 27px;
border-top: none;
.split-area{
overflow: hidden;
.left-side {
@ -25,10 +23,13 @@
height: 100%;
}
.rightDrawer{
width:420px;
width:400px;
height: 100%;
flex: 0 0 auto;
overflow: hidden;
-webkit-box-shadow: -1px 0px 3px 0px rgba(0,0,0,0.3);
-moz-box-shadow: -1px 0px 3px 0px rgba(0,0,0,0.3);
box-shadow: -1px 0px 3px 0px rgba(0,0,0,0.3);
}
}
.right-side {

View File

@ -60,6 +60,7 @@ $lg-red: (
A200: #ff4081,
A400: #ff3399,
A700: #c51162,
B100:#4f4f4f,
G100: #ef4c73,
G900: #352a37,
contrast: (
@ -77,28 +78,30 @@ $lg-red: (
A200: $light-primary-text,
A400: $light-primary-text,
A700: $light-primary-text,
B100: $light-primary-text,
G100:$dark-primary-text,
G900:$light-primary-text
)
);
$daesang: (
50: #e0f7fa,
50: #f9feff,//#e0f7fa,
100: #b2ebf2,
200: #80deea,
200: #4dd0e1,//#80deea,
300: #4dd0e1,
400: #26c6da,
500: #00bcd4,
/*600: #00acc1,*/ 600: #00b6d5,
700: #0097a7,
800: #2c8493,
900: #126a79,
800: #0367A6,
900: #024873,
A100: #84ffff,
A200: #18ffff,
A400: #00e5ff,
A700: #00b8d4,
G100: #6dd5ed,
/*G900: #192a2c,*/G900: #2193b0,
B100:#2d3a4a,//,#47667fbackgroundcolor
G100: #0367A6,
/*G900: #192a2c,*/G900: #6dd5ed,
contrast: (
50: $dark-primary-text,
100: $dark-primary-text,
@ -114,10 +117,44 @@ $daesang: (
A200: $dark-primary-text,
A400: $dark-primary-text,
A700: $dark-primary-text,
B100: $light-primary-text,
G100: $dark-primary-text,
G900: $light-primary-text
)
);
$daesang-grey: (
50: #fafafa,
100: #f5f5f5,
200: #eeeeee,
300: #e0e0e0,
400: #bdbdbd,
500: #9e9e9e,
600: #757575,
700: #616161,
800: #424242,
900: #2d3a4a,
A100: #ffffff,
A200: #eeeeee,
A400: #bdbdbd,
A700: #616161,
contrast: (
50: $dark-primary-text,
100: $dark-primary-text,
200: $dark-primary-text,
300: $dark-primary-text,
400: $dark-primary-text,
500: $dark-primary-text,
600: $light-primary-text,
700: $light-primary-text,
800: $light-primary-text,
900: $light-primary-text,
A100: $dark-primary-text,
A200: $dark-primary-text,
A400: $dark-primary-text,
A700: $light-primary-text,
)
);
@mixin ucap-material-theme($theme) {
@include ucap-core-theme($theme);
@ -133,6 +170,7 @@ $daesang: (
$gradient-darkest:mat-color($accent, G900);
$gradient-light:mat-color($accent, G100);
//basic
.bg-primary-dark{
background: mat-color($primary, 900);
color: mat-color($primary, default-contrast);
@ -168,6 +206,9 @@ $daesang: (
.text-primary-color {
color: mat-color($primary);
}
.text-accent-darkest {
color: mat-color($accent, 900);
}
.text-accent-color {
color: mat-color($accent);
}
@ -180,6 +221,18 @@ $daesang: (
.border-accent-color {
border: 1px solid mat-color($accent);
}
// sass 정의
.mat-toolbar{
background-color: mat-color($accent , B100);
}
.main-container {
border:3px solid mat-color($accent, B100);
}
.global-menu{
background-color: mat-color($accent , B100);
}
.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);
@ -187,9 +240,7 @@ $daesang: (
.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);
}*/
.global-menu {
.mat-tab-label[aria-selected='true']{
.mat-tab-label-content{
@ -236,4 +287,12 @@ $daesang: (
background: linear-gradient(to right, $gradient-darkest, $gradient-light);
color:#ffffff;
}
.messages .container{
background: mat-color($accent, 50);
}
.profile-img{
.responsive-chats-button:last-child {
background-color: $gradient-light;
}
}
}

View File

@ -5,7 +5,7 @@
.file-thumbimg{
display:inline-flex;
img {
width:200px;
height:140px;
padding-right: 20px;
background-repeat: no-repeat;
}

View File

@ -144,7 +144,7 @@ $meBox-bg: #ffffff;
width: 100%;
height: 100%;
text-align: center;
background-color: #dddddd;
background-color: rgba(0, 0, 0, 0.1);
padding: 10px;
margin: 10px 0;
}
@ -160,7 +160,6 @@ $meBox-bg: #ffffff;
position: relative;
display: flex;
flex-direction: row;
margin-right: 40px;
margin-left: 0;
.profile-img {
flex: 0 0 auto;
@ -172,7 +171,7 @@ $meBox-bg: #ffffff;
&.me {
.chat-row {
flex-direction: row-reverse;
margin-left: 40px;
margin-left: 0;
margin-right: 0;
.profile-info {
flex-direction: row-reverse;

View File

@ -139,7 +139,6 @@ $thumbnail-msize: 40px;
margin-left: 6px;
border-radius: 3px;
padding: 1px 6px;
background-color: #ef4c73;
color: #ffffff;
}
}

View File

@ -17,32 +17,25 @@
width: 100%;
height: 100%;
.file-upload-item {
background-color: #eeeeee;
min-width: 200px;
margin: 0 0.5%;
margin: 0 1%;
margin-bottom: 10px;
width: 32%;
width: 48%;
border-radius: 3px;
background-color:#f9f9f9;
border:1px solid #dddddd;
.file-upload-info {
padding: 10px;
background-color:#ffffff;
border-bottom: 1px solid #dddddd;
svg {
margin-right: 6px;
}
.file-upload-name {
height: 40px;
height: 20px;
@include ellipsis(2);
}
}
.file-upload-progress {
padding: 6px 10px;
}
&:nth-child(3n + 1) {
margin-left: 1%;
}
&:nth-child(3n + 0) {
margin-right: 1%;
}
}
}