대화방 검색, 사운드 뷰 컴포넌트, 이벤트 - 수정중
This commit is contained in:
khk
parent
2c7797d8f8
commit
576f9ab07f
|
|
@ -50,6 +50,16 @@
|
|||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
&.thumbnail-mask {
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
img {
|
||||
width: 50px;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
.room-info {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -90,8 +90,8 @@ $lg-red: (
|
|||
$aquaBlue-daesang: (
|
||||
50: #f9feff,
|
||||
//#e0f7fa,
|
||||
100: #b2ebf2,
|
||||
200: #4dd0e1,
|
||||
/* 100: #b2ebf2,*/ 100: #ebfdff,
|
||||
200: #65e4f5,
|
||||
//#80deea,
|
||||
300: #4dd0e1,
|
||||
400: #26c6da,
|
||||
|
|
@ -379,4 +379,25 @@ $daesang-grey: (
|
|||
background-color: mat-color($accent, B100);
|
||||
}
|
||||
}
|
||||
|
||||
.message-row {
|
||||
.message-main {
|
||||
.bubble {
|
||||
background-color: mat-color($accent, 100);
|
||||
border: 1px solid mat-color($accent, 200);
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
&.me {
|
||||
.message-main {
|
||||
.bubble {
|
||||
background-color: #ffffff;
|
||||
border: 1px solid mat-color($primary, 300);
|
||||
.event-info {
|
||||
border-radius: 0 0 0 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="event-main">
|
||||
<div class="event-main bg-accent-dark">
|
||||
<div class="event-header">
|
||||
<ng-container
|
||||
*ngIf="!!message.sentMessageJson && !!message.sentMessageJson.contents"
|
||||
|
|
@ -20,15 +20,16 @@
|
|||
</ng-container>
|
||||
</div>
|
||||
<ul class="event-info">
|
||||
<li class="event-title">
|
||||
<li class="event-date bg-accent-brightest">
|
||||
<span class="bg-accent-dark">날짜</span
|
||||
>{{ date | ucapDate: 'YYYY.MM.DD' }}
|
||||
</li>
|
||||
<li class="event-time bg-accent-brightest">
|
||||
<span class="bg-accent-dark">시간</span>{{ date | ucapDate: 'a hh:mm' }}
|
||||
</li>
|
||||
<li class="event-content">
|
||||
{{ message.sentMessageJson.title }}
|
||||
</li>
|
||||
<li class="event-date">
|
||||
<span>날짜</span>{{ date | ucapDate: 'YYYY.MM.DD' }}
|
||||
</li>
|
||||
<li class="event-time">
|
||||
<span>시간</span>{{ date | ucapDate: 'a hh:mm' }}
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- <div class="btn-box">
|
||||
|
|
|
|||
|
|
@ -1,32 +1,49 @@
|
|||
.event-main {
|
||||
flex-direction: column;
|
||||
text-align: left;
|
||||
padding: 4px;
|
||||
.event-header {
|
||||
padding: 10px;
|
||||
background-color: #efefef;
|
||||
text-align: center;
|
||||
padding: 10px 10px 10px 36px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg 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='round' stroke-linejoin='round' class='feather feather-calendar'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: 10px center;
|
||||
border-radius: 3px 3px 0 0;
|
||||
min-width: 200px;
|
||||
vertical-align: middle;
|
||||
stroke: #ffffff;
|
||||
}
|
||||
.event-info {
|
||||
padding: 10px 14px;
|
||||
line-height: 1.6em;
|
||||
border-radius: 0 0 6px 6px;
|
||||
background-color: #ffffff;
|
||||
li {
|
||||
margin-bottom: 4px;
|
||||
&.event-title {
|
||||
border-bottom: 1px solid #dddddd;
|
||||
margin-bottom: 10px;
|
||||
padding-bottom: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
&.event-date,
|
||||
&.event-time {
|
||||
color: #666666;
|
||||
padding: 4px 10px;
|
||||
border-bottom: 1px dotted #dddddd;
|
||||
span {
|
||||
width: 60px;
|
||||
padding: 1px 6px;
|
||||
margin-right: 6px;
|
||||
border-radius: 100px;
|
||||
line-height: 20px;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
font-size: 0.96em;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
}
|
||||
span {
|
||||
padding: 2px 6px;
|
||||
background-color: #efefef;
|
||||
margin-right: 10px;
|
||||
&.event-content {
|
||||
padding: 10px;
|
||||
color: #444444;
|
||||
font-weight: normal;
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -40,3 +57,11 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep .message-row.me > .event-info {
|
||||
border-radius: 0 0 0 6px;
|
||||
}
|
||||
|
||||
.feather-calendar {
|
||||
stroke: #ffffff;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -129,30 +129,16 @@
|
|||
<ng-template #contents>
|
||||
<div
|
||||
*ngIf="getUserProfile(message.senderSeq) != ''"
|
||||
class="profile-img"
|
||||
class="profile-img thumbnail-mask"
|
||||
>
|
||||
<!-- <img
|
||||
class="avatar"
|
||||
style="width: 50px; height: 50px;"
|
||||
[src]="
|
||||
profileImageRoot
|
||||
| ucapUiImaage
|
||||
: {
|
||||
path: getUserProfile(message.senderSeq),
|
||||
default: 'assets/images/img_nophoto_50.png'
|
||||
}
|
||||
| async
|
||||
"
|
||||
/> -->
|
||||
<img
|
||||
class="avatar"
|
||||
style="width: 50px; height: 50px;"
|
||||
ucapImage
|
||||
[base]="profileImageRoot"
|
||||
[path]="getUserProfile(message.senderSeq)"
|
||||
[default]="'assets/images/img_nophoto_50.png'"
|
||||
(click)="onClickOpenProfile($event, getUerInfo(message.senderSeq))"
|
||||
/>
|
||||
<img
|
||||
class="avatar"
|
||||
ucapImage
|
||||
[base]="profileImageRoot"
|
||||
[path]="getUserProfile(message.senderSeq)"
|
||||
[default]="'assets/images/img_nophoto_50.png'"
|
||||
(click)="onClickOpenProfile($event, getUerInfo(message.senderSeq))"
|
||||
/>
|
||||
<!-- <ucap-ui-imaage
|
||||
[style]="'width: 50px; height: 50px;'"
|
||||
[imageClass]="'avatar'"
|
||||
|
|
|
|||
|
|
@ -31,8 +31,15 @@ $meBox-bg: #ffffff;
|
|||
margin-left: 0;
|
||||
.profile-img {
|
||||
flex: 0 0 auto;
|
||||
img {
|
||||
&.thumbnail-mask {
|
||||
border-radius: 50%;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
overflow: hidden;
|
||||
img {
|
||||
width: 50px;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -58,7 +65,7 @@ $meBox-bg: #ffffff;
|
|||
color: #333333;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.bubble {
|
||||
/*.bubble {
|
||||
border: 1px solid $otherBox-line;
|
||||
font-weight: 900;
|
||||
position: relative;
|
||||
|
|
@ -91,6 +98,14 @@ $meBox-bg: #ffffff;
|
|||
left: -10px;
|
||||
top: 5px;
|
||||
}
|
||||
}*/
|
||||
.bubble {
|
||||
border-radius: 0 10px 10px 10px;
|
||||
font-weight: 900;
|
||||
position: relative;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
|
||||
word-break: break-all;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
}
|
||||
.secondary-text {
|
||||
|
|
@ -110,10 +125,10 @@ $meBox-bg: #ffffff;
|
|||
}
|
||||
}
|
||||
|
||||
.message-row.me > .bubble {
|
||||
/*.message-row.me > .bubble {
|
||||
border: 1px solid $meBox-line;
|
||||
background-color: $meBox-bg;
|
||||
}
|
||||
}*/
|
||||
.message-row.me {
|
||||
.profile-img {
|
||||
display: none;
|
||||
|
|
@ -125,7 +140,10 @@ $meBox-bg: #ffffff;
|
|||
text-align: right;
|
||||
margin-left: 10px;
|
||||
margin-right: 20px;
|
||||
& .bubble:before {
|
||||
.bubble {
|
||||
border-radius: 10px 10px 0 10px;
|
||||
}
|
||||
/* & .bubble:before {
|
||||
content: '';
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
|
|
@ -150,7 +168,7 @@ $meBox-bg: #ffffff;
|
|||
left: initial;
|
||||
right: -10px;
|
||||
top: 5px;
|
||||
}
|
||||
}*/
|
||||
}
|
||||
}
|
||||
.bubble-main {
|
||||
|
|
|
|||
|
|
@ -25,14 +25,82 @@
|
|||
</form>
|
||||
</div>
|
||||
<div class="btns">
|
||||
<button mat-stroked-button (click)="onClickSearchAndPrev()">
|
||||
<span class="mdi mdi-arrow-up-bold-box-outline mid-18px"></span>
|
||||
<button
|
||||
mat-stroked-button
|
||||
(click)="onClickSearchAndPrev()"
|
||||
class="btn-toggle"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="feather feather-arrow-up"
|
||||
>
|
||||
<path d="M3.3,9v6.7c0,0.9,0.7,1.7,1.7,1.7h10c0.9,0,1.7-0.7,1.7-1.7V9" />
|
||||
<polyline class="st0" points="13.3,6 10,2.7 6.7,6 " />
|
||||
<line class="st0" x1="10" y1="2.7" x2="10" y2="12.5" />
|
||||
</svg>
|
||||
</button>
|
||||
<button mat-stroked-button (click)="onClickPrevSearch()">
|
||||
<span class="mdi mdi-arrow-up-bold mid-18px"></span>
|
||||
<button mat-stroked-button (click)="onClickPrevSearch()" class="btn-toggle">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="feather feather-arrow-up"
|
||||
>
|
||||
<line class="st0" x1="10" y1="15.8" x2="10" y2="4.2" />
|
||||
<polyline class="st0" points="4.2,10 10,4.2 15.8,10 " />
|
||||
</svg>
|
||||
</button>
|
||||
<button mat-stroked-button (click)="onClickNextSearch()">
|
||||
<span class="mdi mdi-arrow-down-bold mid-18px"></span>
|
||||
<button mat-stroked-button (click)="onClickNextSearch()" class="btn-toggle">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="feather feather-arrow-up"
|
||||
>
|
||||
<line class="st0" x1="10" y1="4.2" x2="10" y2="15.8" />
|
||||
<polyline class="st0" points="15.8,10 10,15.8 4.2,10 " />
|
||||
</svg>
|
||||
</button>
|
||||
<!--<mat-button-toggle-group>
|
||||
<mat-button-toggle></mat-button-toggle>
|
||||
<mat-button-toggle >
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="feather feather-arrow-up"
|
||||
>
|
||||
<line x1="12" y1="19" x2="12" y2="5"></line>
|
||||
<polyline points="5 12 12 5 19 12"></polyline>
|
||||
</svg>
|
||||
</mat-button-toggle>
|
||||
<mat-button-toggle ></mat-button-toggle>
|
||||
</mat-button-toggle-group>-->
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
.chatroom-search {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
justify-items: center;
|
||||
.search-form {
|
||||
flex-flow: row;
|
||||
flex: 1 1 auto;
|
||||
|
|
@ -11,6 +12,10 @@
|
|||
flex-flow: row;
|
||||
flex: 1 1 auto;
|
||||
margin-right: 20px;
|
||||
.mat-form-field-label,
|
||||
.mat-hint {
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
}
|
||||
}
|
||||
.text-amount {
|
||||
display: inline-flex;
|
||||
|
|
@ -24,3 +29,41 @@
|
|||
flex: 0 0 0%;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-form-field-label,
|
||||
.mat-hint {
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
}
|
||||
|
||||
::ng-deep .btns {
|
||||
border: 1px solid #dddddd;
|
||||
border-radius: 4px;
|
||||
height: 42px;
|
||||
.mat-stroked-button {
|
||||
border: none;
|
||||
min-width: 40px;
|
||||
height: 42px;
|
||||
padding: 0 10px;
|
||||
&.btn-toggle {
|
||||
display: flex;
|
||||
border-right: 1px solid #dddddd;
|
||||
justify-items: center;
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
.mat-button-wrapper {
|
||||
display: flex;
|
||||
line-height: inherit;
|
||||
justify-content: center;
|
||||
justify-items: center;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
stroke: #555555;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -60,7 +60,19 @@
|
|||
(loadeddata)="onLoadedDataAudio()"
|
||||
></audio>
|
||||
<div class="circle-box">
|
||||
<mat-icon class="ucap-sound-viewer-icon">music_note</mat-icon>
|
||||
<!--<mat-icon class="ucap-sound-viewer-icon">music_note</mat-icon>-->
|
||||
<div class='sound-wave'>
|
||||
<div class='sound-bar bg-accent-darkest'></div>
|
||||
<div class='sound-bar bg-accent-darkest'></div>
|
||||
<div class='sound-bar bg-accent-darkest'></div>
|
||||
<div class='sound-bar bg-accent-darkest'></div>
|
||||
<div class='sound-bar bg-accent-darkest'></div>
|
||||
<div class='sound-bar bg-accent-darkest'></div>
|
||||
<div class='sound-bar bg-accent-darkest'></div>
|
||||
<div class='sound-bar bg-accent-darkest'></div>
|
||||
<div class='sound-bar bg-accent-darkest'></div>
|
||||
<div class='sound-bar bg-accent-darkest'></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="viewer-bottom">
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
}
|
||||
|
||||
.ucap-sound-viewer-title {
|
||||
font-size:16px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.stroke-bar {
|
||||
width: 1px;
|
||||
|
|
@ -33,29 +33,38 @@
|
|||
width: 100%;
|
||||
height: calc(100% - 60px);
|
||||
|
||||
.circle-box{
|
||||
display:flex;
|
||||
width:140px;
|
||||
height:140px;
|
||||
border-radius:50%;
|
||||
.circle-box {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
border-radius: 50%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border:2px solid #ffffff;
|
||||
background-color:rgba(256, 256, 256, 0.7);
|
||||
.mat-icon{
|
||||
border: 2px solid #ffffff;
|
||||
background-color: rgba(256, 256, 256, 0.7);
|
||||
.mat-icon {
|
||||
font-size: 100px;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
.sound-wave {
|
||||
height: 80px;
|
||||
left: 50%;
|
||||
margin: -35px 0 0 -35px;
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
width: 70px;
|
||||
}
|
||||
}
|
||||
|
||||
.ucap-sound-viewer-sound-icon{
|
||||
.ucap-sound-viewer-sound-icon {
|
||||
width: 100%;
|
||||
height: calc(100% - 80px);
|
||||
height: calc(100% - 80px);
|
||||
}
|
||||
.viewer-bottom{
|
||||
.viewer-bottom {
|
||||
background-color: #212121;
|
||||
color:#ffffff;
|
||||
color: #ffffff;
|
||||
.ucap-sound-viewer-sound-time {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
|
|
@ -78,22 +87,83 @@
|
|||
flex: 1 1 auto;
|
||||
}
|
||||
.ucap-sound-viewer-action {
|
||||
.mat-icon{
|
||||
.mat-icon {
|
||||
font-size: 40px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
line-height:40px;
|
||||
line-height: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sound-bar {
|
||||
bottom: 1px;
|
||||
height: 10px;
|
||||
position: absolute;
|
||||
width: 5px;
|
||||
animation: sound-play 0ms -800ms linear infinite alternate;
|
||||
}
|
||||
.sound-bar:nth-child(1) {
|
||||
left: 0px;
|
||||
animation-duration: 474ms;
|
||||
}
|
||||
.sound-bar:nth-child(2) {
|
||||
left: 7px;
|
||||
animation-duration: 433ms;
|
||||
}
|
||||
.sound-bar {
|
||||
left: 14px;
|
||||
animation-duration: 407ms;
|
||||
}
|
||||
.sound-bar:nth-child(4) {
|
||||
left: 21px;
|
||||
animation-duration: 458ms;
|
||||
}
|
||||
.sound-bar:nth-child(5) {
|
||||
left: 28px;
|
||||
animation-duration: 400ms;
|
||||
}
|
||||
.sound-bar:nth-child(6) {
|
||||
left: 35px;
|
||||
animation-duration: 427ms;
|
||||
}
|
||||
.sound-bar:nth-child(7) {
|
||||
left: 42px;
|
||||
animation-duration: 441ms;
|
||||
}
|
||||
.sound-bar:nth-child(8) {
|
||||
left: 49px;
|
||||
animation-duration: 419ms;
|
||||
}
|
||||
.sound-bar:nth-child(9) {
|
||||
left: 56px;
|
||||
animation-duration: 487ms;
|
||||
}
|
||||
.sound-bar:nth-child(10) {
|
||||
left: 63px;
|
||||
animation-duration: 442ms;
|
||||
}
|
||||
|
||||
@keyframes sound-play {
|
||||
0% {
|
||||
opacity: 0.35;
|
||||
height: 10px;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
height: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
mat-slider {
|
||||
width: 94%;
|
||||
}
|
||||
|
||||
::ng-deep .mat-slider-horizontal .mat-slider-track-background{
|
||||
::ng-deep .mat-slider-horizontal .mat-slider-track-background {
|
||||
background-color: #999999 !important;
|
||||
}
|
||||
::ng-deep .mat-slider-min-value:not(.mat-slider-thumb-label-showing) .mat-slider-thumb{
|
||||
::ng-deep
|
||||
.mat-slider-min-value:not(.mat-slider-thumb-label-showing)
|
||||
.mat-slider-thumb {
|
||||
border-color: #999999 !important;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user