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

design 변경

Browse Source
This commit is contained in:
khk 2019-11-08 08:58:22 +09:00
parent 2e83971c18
commit f747490a7c
17 changed files with 205 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,11 +1,4 @@
<div class="container">
<!--<div>
LG ucap
<button mat-icon-button aria-label="New Chat" (click)="onClickNewChat()">
<mat-icon>chat</mat-icon>
</button>
</div>-->
<!-- <div class="logo">로고</div> -->
<mat-tab-group
mat-stretch-tabs
animationDuration="0ms"
@ -14,7 +7,14 @@
>
<mat-tab [aria-label]="MainMenu.Group">
<ng-template mat-tab-label>
<mat-icon>group</mat-icon>
<!--<mat-icon>group</mat-icon>-->
<div class="icon-item">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round">
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
<circle cx="12" cy="7" r="4"></circle>
</svg>
</div>
</ng-template>
<app-layout-chat-left-sidenav-group
class="left-group-side"
@ -23,20 +23,43 @@
</mat-tab>
<mat-tab [aria-label]="MainMenu.Chat">
<ng-template mat-tab-label>
<mat-icon
<!--<mat-icon
[matBadgeHidden]="(badgeChatUnReadCount$ | async) <= 0"
[matBadge]="badgeChatUnReadCount$ | async"
matBadgeDescription="확인하지 않은 메시지가 있습니다."
matBadgeColor="accent"
matBadgePosition="above after"
>chat</mat-icon
>
>-->
<div class="icon-item" [matBadgeHidden]="(badgeChatUnReadCount$ | async) <= 0"
[matBadge]="badgeChatUnReadCount$ | async"
matBadgeDescription="확인하지 않은 메시지가 있습니다."
matBadgeColor="accent"
matBadgePosition="above after">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000000"
stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="bevel">
<path
d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z">
</path>
</svg>
</div>
</ng-template>
<app-layout-chat-left-sidenav-chat></app-layout-chat-left-sidenav-chat>
</mat-tab>
<mat-tab [aria-label]="MainMenu.Organization">
<ng-template mat-tab-label>
<mat-icon>device_hub</mat-icon>
<!--<mat-icon>device_hub</mat-icon>-->
<div class="icon-item">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000000"
stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="bevel">
<circle class="st0" cx="18.4" cy="18.5" r="3" />
<circle class="st0" cx="12" cy="5" r="3" />
<path class="st0" d="M12.4,10.5h4c1.1,0,2,0.9,2,2v3" />
<circle class="st0" cx="6.1" cy="18.5" r="3" />
<path class="st0" d="M6.1,15.5v-3c0-1.1,0.9-2,2-2h4" />
<line class="st0" x1="12" y1="8" x2="12" y2="9" />
</svg>
</div>
</ng-template>
<app-layout-chat-left-sidenav-organization
[selectedUserList]="selectedUserList"
@ -47,7 +70,20 @@
</mat-tab>
<mat-tab [aria-label]="MainMenu.Call">
<ng-template mat-tab-label>
<mat-icon>phone</mat-icon>
<!--<mat-icon>phone</mat-icon>-->
<div class="icon-item">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-phone">
<path class="st0"
d="M2,5.8c0.1-0.6,0.3-1.1,0.7-1.6l1.7-1.7C4.7,2.2,5,2.1,5.3,2.1c0.3,0,0.6,0.1,0.8,0.4c0.3,0.3,0.6,0.6,0.9,0.9
c0.2,0.2,0.3,0.3,0.5,0.5l1.4,1.4c0.3,0.3,0.4,0.6,0.4,0.9S9.2,6.7,8.9,7C8.8,7.2,8.6,7.3,8.5,7.5C8.1,7.9,7.7,8.3,7.2,8.7
c0,0,0,0,0,0C6.8,9.1,6.9,9.5,7,9.7c0,0,0,0,0,0c0.4,0.9,0.9,1.7,1.6,2.6c1.4,1.7,2.9,3,4.5,4.1c0.2,0.1,0.4,0.2,0.6,0.3
c0.2,0.1,0.4,0.2,0.5,0.3c0,0,0,0,0.1,0c0.2,0.1,0.3,0.1,0.4,0.1c0.4,0,0.6-0.2,0.7-0.3l1.7-1.7c0.3-0.3,0.6-0.4,0.8-0.4
c0.4,0,0.6,0.2,0.8,0.4l2.8,2.8c0.6,0.6,0.6,1.2,0,1.7c-0.2,0.2-0.4,0.4-0.6,0.6c-0.3,0.3-0.7,0.6-1,1c-0.5,0.6-1.2,0.8-2,0.8
c-0.1,0-0.2,0-0.2,0c-1.5-0.1-2.9-0.7-4-1.2c-2.9-1.4-5.4-3.4-7.5-5.9C4.5,13,3.3,11.1,2.6,9C2.1,7.7,1.9,6.7,2,5.8z">
</path>
</svg>
</div>
</ng-template>
<app-layout-chat-left-sidenav-call></app-layout-chat-left-sidenav-call>
</mat-tab>

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

@ -8,12 +8,8 @@
height: 100%;
width: 100%;
}
.logo {
position: absolute;
top: 0;
left: 0;
height: 60px;
width: 70px;
::ng-deep .mat-tab-header {
border-bottom: none !important;
}
.container {
display: flex;
@ -25,21 +21,22 @@
width: 100%;
flex-direction: row;
}
::ng-deep .organization-side{
::ng-deep .organization-side {
flex-direction: column;
height:100%;
height: 100%;
}
::ng-deep .global-menu {
border-right: 1px solid #dddddd;
border-right: 2px solid #4f4f4f;
.mat-tab-label-container {
border-right: 1px solid #dddddd;
background-color: #4f4f4f;
.mat-tab-list {
.mat-tab-labels {
padding-top: 0px;
flex-flow: column;
height: 280px;
padding-top:10px;
.mat-tab-label {
height: 80px;
padding:0 16px;
}
}
.mat-ink-bar {
@ -49,7 +46,48 @@
}
}
}
.left-group-side{
position: relative;
height:100%;
.left-group-side {
position: relative;
height: 100%;
}
::ng-deep .mat-tab-label {
.mat-tab-label-content {
.icon-item {
background: var(--white);
border-radius: 4px;
display: inline-flex;
width: 36px;
height: 36px;
border-radius: 50%;
justify-content: center;
align-items: center;
transform: scale(0.9);
transition: transform .3s cubic-bezier(.4,0,0,1);
svg {
width: 24px;
height: 24px;
stroke: #ffffff;
stroke-width: 1.5;
stroke-linecap: square;
stroke-linejoin: miter;
fill: none;
color: #2329d6;
}
}
}
&[aria-selected='true'] {
opacity: 1;
.mat-tab-label-content {
.icon-item {
background: #ef4c73;
transform: scale(1.0);
/*svg {
stroke: #ef4c73;
fill: #ef4c73;
}*/
}
}
}
}

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

@ -2,11 +2,15 @@
display: flex;
justify-content: center;
padding: 0 10px;
height: 60px;
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;
align-items: center;
color:#ffffff;
}
.btn-box {
height: 100%;
@ -23,6 +27,7 @@
align-items: center;
padding: 0;
font-size: 14px;
background-color:#f9f9f9;
border-bottom: 1px solid #dddddd;
.searchbox {
width: 100%;
@ -70,7 +75,7 @@
}
.app-layout-chat-left-sidenav-chat-list {
height: calc(100% - 120px);
height: calc(100% - 130px);
}
.app-layout-chat-left-sidenav-chat-list-viewport {

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

@ -2,9 +2,6 @@
<div class="current-head">
<h3>그룹</h3>
<div class="btn-box">
<button mat-icon-button>
<mat-icon>person_add</mat-icon>
</button>
<button
mat-icon-button
#groupMenuTrigger="matMenuTrigger"

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

@ -3,7 +3,12 @@
display: flex;
justify-content: center;
padding: 0 10px;
height: 60px;
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;
padding-left: 10px;
@ -14,12 +19,13 @@
margin-left: auto;
display: inline-flex;
align-items: center;
.mat-icon-button {
svg{
stroke:#333333;
}
}
}
.search-result {
height: calc(100% - 120px);
height: calc(100% - 130px);
overflow: auto;
.result-num {
padding: 10px;

19
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html
View File

@ -10,7 +10,24 @@
aria-label="chats button"
class="responsive-chats-button"
>
<mat-icon>chat</mat-icon>
<!--<mat-icon>chat</mat-icon>-->
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="currentColor"
stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round">
<g>
<path d="M3,21.8c-0.2,0-0.4-0.1-0.5-0.2c-0.2-0.2-0.3-0.5-0.2-0.8l1.8-5.4c-0.6-1.2-0.8-2.5-0.8-3.9c0-3.5,2-6.7,5.1-8.3
c1.3-0.6,2.7-0.9,4.1-1H13c4.7,0.3,8.5,4,8.7,8.7l0,0.5c0,1.4-0.3,2.9-1,4.1c-1.6,3.2-4.7,5.1-8.3,5.1c0,0,0,0,0,0
c-1.3,0-2.6-0.3-3.8-0.8l-5.4,1.8C3.2,21.7,3.1,21.8,3,21.8z M12.5,3.8C11.3,3.8,10.1,4,9,4.6c-2.6,1.3-4.3,4-4.3,6.9
c0,1.2,0.3,2.4,0.8,3.5c0.1,0.2,0.1,0.4,0,0.6l-1.4,4.3l4.3-1.4c0.2-0.1,0.4,0,0.6,0c1.1,0.5,2.3,0.8,3.5,0.8c3,0,5.6-1.6,6.9-4.3
c0.5-1.1,0.8-2.3,0.8-3.5c0,0,0,0,0,0V11C20,7.1,16.9,4,13,3.7L12.5,3.8C12.5,3.8,12.5,3.8,12.5,3.8z" />
</g>
<g>
<circle cx="9" cy="12" r="1" />
<circle cx="12.5" cy="12" r="1" />
<circle cx="16" cy="12" r="1" />
</g>
</svg>
</button>
<!-- / RESPONSIVE CHATS BUTTON-->
<button

10
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss
View File

@ -24,19 +24,19 @@
}
.chat-toolbar {
width: 100%;
height: 70px;
height: 80px;
min-height: 70px;
align-items: center;
background-color: #ffffff !important;
border: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
box-shadow: 0 3px 6px rgba(0,0,0,.16);
.chat-header {
width: 100%;
align-items: center;
display: flex;
justify-content: space-between;
.profile-img {
margin-right: 20px;
margin-right: 16px;
.responsive-chats-button {
display: none;
&:last-child {
@ -45,7 +45,7 @@
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #252525;
background-color: #604850;
color: #efefef;
font-size: 16px;
line-height: 40px;

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

@ -1,4 +1,4 @@
$right-color:#565e6b;
$right-color:#686566;
.right{
height:100%;
flex-direction: row-reverse;
@ -8,6 +8,7 @@ $right-color:#565e6b;
height:100%;
display:inline-flex;
background-color:$right-color;
background-color:#7a7a7a;
}
.slide-box{
display:inline-flex;

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

@ -10,7 +10,11 @@
class="button app-layout-native-title-bar-minimize"
(click)="onClickMinimize()"
>
<mat-icon>minimize</mat-icon>
<!--<mat-icon>minimize</mat-icon>-->
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="butt" stroke-linejoin="round">
<line x1="5" y1="18" x2="19" y2="18"></line>
</svg>
</button>
<button
mat-icon-button
@ -18,8 +22,20 @@
(click)="onClickMaxmize()"
>
<ng-container [ngSwitch]="windowStateChanged$ | async">
<mat-icon *ngSwitchCase="WindowState.Maximized">filter_none</mat-icon>
<mat-icon *ngSwitchDefault>maximize</mat-icon>
<!--<mat-icon *ngSwitchCase="WindowState.Maximized">filter_none</mat-icon>-->
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="butt" stroke-linejoin="round" *ngSwitchCase="WindowState.Maximized">
<path class="st0"
d="M15,9.5v7c0,0.8-0.7,1.5-1.5,1.5h-7C5.7,18,5,17.3,5,16.5v-7C5,8.7,5.7,8,6.5,8h7C14.3,8,15,8.7,15,9.5z" />
<path class="st0" d="M8.8,6.8V6c0-0.8,0.7-1.5,1.5-1.5H17c0.8,0,1.5,0.7,1.5,1.5v6.8c0,0.8-0.7,1.5-1.5,1.5h-0.8" />
</svg>
<!--<mat-icon *ngSwitchDefault>crop_din</mat-icon>-->
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="butt" stroke-linejoin="round" *ngSwitchDefault>
<rect x="5" y="5" width="12" height="12" rx="2" ry="2"></rect>
</svg>
</ng-container>
</button>
<button
@ -27,7 +43,12 @@
class="button app-layout-native-title-bar-close"
(click)="onClickClose()"
>
<mat-icon>close</mat-icon>
<!--<mat-icon>close</mat-icon>-->
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="butt" stroke-linejoin="round">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</button>
</div>
</mat-toolbar>

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

@ -7,15 +7,13 @@
right: 0;
top: 0;
display: flex;
padding-left: 5px;
padding-right: 0px;
// align-items: center;
// justify-content: center;
// flex-direction: row-reverse;
padding: 0 10px;
cursor: pointer;
background: white;
background: #4f4f4f;
height: 30px;
border-bottom: 1px solid #d5dadb;
color:#ffffff;
//background: rgba(37, 27, 30, 0.9);
//border-bottom: 1px solid #d5dadb;
.app-layout-native-title-bar-logo {
width: 16px;
@ -39,7 +37,7 @@
outline: 0;
cursor: pointer;
border: none;
height: 100%;
height: 30px;
min-width: 30px;
max-width: 30px;
padding: 5px;
@ -49,7 +47,9 @@
transition: background 0.2s linear, color 0.2s linear;
text-align: center;
font-size: 10px;
vertical-align: middle;
margin-left:6px;
transform: translateY(-2px);
.mat-icon {
//transform: translateY(-2px);
width: 16px;
@ -62,7 +62,7 @@
&.app-layout-native-title-bar-close,
&.app-layout-native-title-bar-maximize,
&.app-layout-native-title-bar-minimize {
color: black;
color: darken(white, 20%);
font-weight: lighter;
}
@ -72,18 +72,18 @@
&:hover {
&.app-layout-native-title-bar-close {
background: #e81123;
color: darken(white, 20%);
background: darken(#000000, 10%);
color: darken(white, 0);
}
&.app-layout-native-title-bar-minimize {
background: darken(#000000, 10%);
color: darken(white, 20%);
color: darken(white,0);
}
&.app-layout-native-title-bar-maximize {
background: darken(#000000, 10%);
color: darken(white, 20%);
color: darken(white, 0);
}
}
}

4
projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.scss
View File

@ -3,6 +3,8 @@
display: flex;
flex-flow: row;
padding-top: 30px;
border:3px solid #4f4f4f;
border-top:none;
.left-side {
width: 380px;
@ -14,7 +16,7 @@
flex: 1 1 auto;
min-width: 400px;
height: 100%;
.messages {
width: 100%;
height: 100%;

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

@ -51,7 +51,8 @@ $lg-red: (
200: #f48fb1,
300: #f06292,
400: #ef4c73,
/* 400: #ec407a,*/ 500: #ed097e,
/* 400: #ec407a,*/
500: #ed097e,
600: #d81b60,
700: #c2185b,
800: #ad1457,
@ -98,7 +99,7 @@ $lg-red: (
color: mat-color($primary, default-contrast);
}
.bg-accent-light {
background: mat-color($accent, 300);
background: mat-color($accent, 300) !important;
color: mat-color($primary, default-contrast);
}
.bg-accent-color {
@ -127,10 +128,6 @@ $lg-red: (
.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);

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

@ -160,11 +160,11 @@ $meBox-bg: #ffffff;
position: relative;
display: flex;
flex-direction: row;
margin-right:40px;
margin-left:0;
margin-right: 40px;
margin-left: 0;
.profile-img {
flex: 0 0 auto;
img{
img {
border-radius: 50%;
}
}
@ -172,8 +172,8 @@ $meBox-bg: #ffffff;
&.me {
.chat-row {
flex-direction: row-reverse;
margin-left:40px;
margin-right:0;
margin-left: 40px;
margin-right: 0;
.profile-info {
flex-direction: row-reverse;
display: flex;
@ -283,8 +283,8 @@ $meBox-bg: #ffffff;
}
}
}
.bubble-main{
word-wrap: break-word;
white-space: pre-wrap;
word-break: keep-all;
.bubble-main {
word-wrap: break-word;
white-space: pre-wrap;
word-break: keep-all;
}

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

@ -6,7 +6,6 @@
.more-spacer {
flex: 1 1 auto;
width: 20px;
}
}
@ -14,7 +13,6 @@
padding: 0;
}
.mat-expansion-panel-header {
//height: 40px !important;
padding: 0 20px;
.mat-expansion-panel-header-title {
align-items: center;

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

@ -20,6 +20,7 @@
align-items: center;
padding: 0 10px 0 20px;
font-size: 14px;
background-color:#f9f9f9;
border-bottom: 1px solid #dddddd;
.selectbox {
display: inline-flex;
@ -52,4 +53,4 @@
+ .searchbox {
width: 54%;
display: inline-flex;
}
}

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

@ -107,7 +107,7 @@ $thumbnail-msize: 40px;
display: flex;
margin: 0;
padding: 0;
width: calc(100% - 50px);
width: calc(100% - 60px);
.detail {
flex-direction: column;
width: calc(100% - 80px);
@ -116,6 +116,7 @@ $thumbnail-msize: 40px;
color: $font-dark;
width: 100%;
margin-bottom: 2px;
align-items: center;
.name {
font-size: 16px;
@include ellipsis(1);
@ -130,11 +131,16 @@ $thumbnail-msize: 40px;
font-size: 16px;
color: #666666;
margin-left: 4px;
line-height:unset;
}
.num {
font-size: 12px;
flex: none;
margin-left: 6px;
border-radius: 3px;
padding: 1px 6px;
background-color: #ef4c73;
color: #ffffff;
}
}
.room-msg {

2
projects/ucap-webmessenger-ui/src/lib/components/float-action-button.component.html
View File

@ -4,7 +4,7 @@
(click)="onToggleFab()"
></div>
<div class="fab-container">
<button mat-fab class="fab-toggler" (click)="onToggleFab()">
<button mat-fab class="fab-toggler bg-accent-dark" (click)="onToggleFab()">
<mat-icon [@fabToggler]="fabTogglerState">add</mat-icon>
</button>
<div [@speedDialStagger]="buttons.length">