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

화면사이즈 변경에 따른 미디어쿼리 적용 진행중

Browse Source
This commit is contained in:
khk 2020-01-23 15:56:24 +09:00
parent 00e6df85d1
commit f00028f2b0
12 changed files with 356 additions and 294 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.scss
View File

@ -1,3 +1,5 @@
$tablet-s-width: 768px;
@mixin ellipsis($row) {
overflow: hidden;
text-overflow: ellipsis;
@ -31,6 +33,9 @@
border: 1px solid #cccccc;
border-radius: 4px;
font-size: 0.9em;
@media screen and (max-width: #{$tablet-s-width}), (max-height: 800px) {
display: none;
}
.select-file {
color: #212121;
border-bottom: 1px dotted #dddddd;
@ -63,6 +68,9 @@
display: flex;
padding: 0 10px;
height: calc(100% - 450px);
@media screen and (max-width: #{$tablet-s-width}), (max-height: 800px) {
height: calc(100% - 160px);
}
overflow-y: auto;
flex-wrap: wrap;
@ -87,7 +95,7 @@
dd {
.btn-download {
margin-left: auto;
height:40px;
height: 40px;
}
}
}

17
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.scss
View File

@ -1,4 +1,5 @@
$listH-row2: 60px;
$tablet-s-width: 768px;
@mixin ellipsis($row) {
overflow: hidden;
@ -32,6 +33,9 @@ $listH-row2: 60px;
margin: 10px;
border: 1px solid #cccccc;
border-radius: 4px;
@media screen and (max-width: #{$tablet-s-width}), (max-height: 800px) {
display: none;
}
.select-filed {
height: calc(100% - 50px);
overflow-y: auto;
@ -138,6 +142,9 @@ $listH-row2: 60px;
.table-box {
height: calc(100% - 440px);
overflow-y: auto;
@media screen and (max-width: #{$tablet-s-width}), (max-height: 800px) {
height: calc(100% - 146px);
}
th {
font-size: 1em;
color: #333333;
@ -157,10 +164,11 @@ $listH-row2: 60px;
cursor: pointer;
}
.footer-fix {
::ng-deep .footer-fix {
position: absolute;
bottom: 0;
height: 160px;
min-height: 40px;
width: 100%;
flex-direction: column;
box-sizing: border-box;
display: flex;
@ -176,6 +184,11 @@ $listH-row2: 60px;
padding: 0 12px;
}
}
.mat-paginator-page-size {
@media screen and (max-width: #{$tablet-s-width}), (max-height: 800px) {
display: none;
}
}
}
::ng-deep .mat-form-field-appearance-legacy {

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

@ -1,5 +1,6 @@
@charset 'utf-8';
$win-min-w: 700px;
$win-min-h: 600px;
html {
height: 100%;
overflow: hidden;
@ -8,8 +9,10 @@ body {
position: relative;
width: 100%;
height: 100%;
min-width: 1160px;
min-height: 800px;
/*min-width: 1160px;
min-height: 800px;*/
min-width: $win-min-w;
min-height: $win-min-h;
overflow: auto;
padding: 0;
margin: 0;

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

@ -36,7 +36,7 @@
(click)="onClickTranslation()"
matTooltip="{{ 'chat.btnTranslate' | translate }}"
>
<!--<mat-icon>g_translate</mat-icon>-->
<!--<mat-icon>g_translate</mat-icon>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
@ -45,6 +45,42 @@
<path
d="M7.41 9l2.24 2.24-.83 2L6 10.4l-3.3 3.3-1.4-1.42L4.58 9l-.88-.88c-.53-.53-1-1.3-1.3-2.12h2.2c.15.28.33.53.51.7l.89.9.88-.88C7.48 6.1 8 4.84 8 4H0V2h5V0h2v2h5v2h-2c0 1.37-.74 3.15-1.7 4.12L7.4 9zm3.84 8L10 20H8l5-12h2l5 12h-2l-1.25-3h-5.5zm.83-2h3.84L14 10.4 12.08 15z"
/>
</svg>-->
<svg
id="레이어_1"
data-name="레이어 1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16.35 14.72"
fill="currentColor"
>
<path
d="M6.78,7.42H3.2V3.5H4.28V4.66H5.72V3.51H6.78V5H8.13V3H9.22V8.6H8.13V5.89H6.78Zm2.6,2.17v.86H4.21V8.06H5.3V9.59ZM5.72,5.49H4.28V6.56H5.72Z"
transform="translate(-1.83 -3)"
/>
<path
d="M16.8,3V7.49H15.71v-1H14.07a2.08,2.08,0,0,1-1.52.63,1.88,1.88,0,1,1,0-3.76A2,2,0,0,1,14.07,4h1.64V3ZM13.52,5.27a.9.9,0,0,0-1-.94.9.9,0,0,0-1,.94,1,1,0,0,0,1.93,0ZM11.64,7.83H16.8v2.76H15.71V8.69H11.64Zm4.07-2.16V4.89h-1.2a1.53,1.53,0,0,1,0,.38,1.81,1.81,0,0,1,0,.4Z"
transform="translate(-1.83 -3)"
/>
<path
d="M3.11,13.82H1.83v-.75H5.32v.75H4v3.82H3.11Z"
transform="translate(-1.83 -3)"
/>
<path
d="M5.69,14.18h.74l.06.61h0a1.19,1.19,0,0,1,1-.7,1.08,1.08,0,0,1,.41.07L7.75,15a1,1,0,0,0-.36-.06.92.92,0,0,0-.8.68v2.07h-.9Z"
transform="translate(-1.83 -3)"
/>
<path
d="M8,16.7c0-.74.6-1.13,2-1.28a.54.54,0,0,0-.59-.6,1.91,1.91,0,0,0-.95.33l-.33-.6a2.74,2.74,0,0,1,1.45-.46c.88,0,1.33.53,1.33,1.53v2h-.74l-.07-.37h0a1.66,1.66,0,0,1-1,.45A1,1,0,0,1,8,16.7Zm2,0V16c-.84.12-1.12.34-1.12.65s.19.39.45.39A.92.92,0,0,0,10,16.67Z"
transform="translate(-1.83 -3)"
/>
<path
d="M11.85,14.18h.74l.06.45h0a1.64,1.64,0,0,1,1.13-.54c.75,0,1.07.52,1.07,1.39v2.16H14V15.59c0-.53-.15-.72-.49-.72a1,1,0,0,0-.72.39v2.38h-.9Z"
transform="translate(-1.83 -3)"
/>
<path
d="M15.48,17.23l.41-.56a1.51,1.51,0,0,0,.93.37c.35,0,.5-.15.5-.36s-.36-.38-.72-.52-1-.43-1-1,.51-1.06,1.29-1.06a1.93,1.93,0,0,1,1.18.43l-.41.55a1.3,1.3,0,0,0-.75-.3c-.31,0-.45.14-.45.33s.34.35.7.49,1,.4,1,1-.47,1.09-1.37,1.09A2.14,2.14,0,0,1,15.48,17.23Z"
transform="translate(-1.83 -3)"
/>
</svg>
</button>
</div>

38
projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.scss
View File

@ -1,36 +1,41 @@
@charset 'utf-8';
$tablet-l-width: 1024px;
.container {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
flex: 1;
padding: 10px 30px 20px;
padding: 0 2vw 2vh;
.add-option {
display: inline-flex;
margin-right: 20px;
justify-items: center;
width: 80px;
justify-content: space-between;
i {
font-size: 20px;
color: #666;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
&:hover {
color: #333333;
background-color: #efefef;
border-radius: 50%;
}
@media screen and (max-width: #{$tablet-l-width}), (max-height: 800px) {
margin-right: 10px;
}
button {
width: 20px;
height: 20px;
line-height: normal;
.mat-icon {
font-size: 20px;
color: rgb(0, 0, 0, 0.87);
width: 20px;
height: 20px;
text-align: center;
&:hover {
color: rgb(0, 0, 0, 0.6);
background-color: #efefef;
border-radius: 50%;
}
}
svg {
fill: #666666;
fill: rgb(0, 0, 0, 0.87);
}
}
}
@ -45,6 +50,9 @@ textarea[name='message'] {
}
::ng-deep .send-message-button {
margin-left: 20px;
@media screen and (max-width: #{$tablet-l-width}), (max-height: 800px) {
margin-left: 10px;
}
.mat-button-wrapper {
display: flex;
justify-content: center;

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

@ -82,113 +82,115 @@
></ucap-ui-imaage> -->
</div>
<div class="message-main">
<div class="chat-name">
{{ senderName }}
<div class="message-main-container">
<div class="message-main">
<div class="chat-name">
{{ senderName }}
</div>
<div class="bubble">
<ng-container
class="bubble"
*ngIf="message.type !== EventType.NotificationForTimerRoom"
[ngSwitch]="message.type"
>
<ucap-chat-message-box-mass
*ngSwitchCase="EventType.MassText"
[message]="message"
(massDetail)="onMassDetail($event)"
(contextmenu)="onContextMenu($event, message)"
>
</ucap-chat-message-box-mass>
<ucap-chat-message-box-file
*ngSwitchCase="EventType.File"
[eventInfoStatus]="eventInfoStatus"
[message]="message"
(save)="onSave($event)"
(fileViewer)="onFileViewer($event)"
(contextmenu)="onContextMenu($event, message)"
>
</ucap-chat-message-box-file>
<ucap-chat-message-box-sticker
*ngSwitchCase="EventType.Sticker"
[message]="message"
(contextmenu)="onContextMenu($event, message)"
>
</ucap-chat-message-box-sticker>
<ucap-chat-message-box-recall
*ngSwitchCase="EventType.RecalledMessage"
></ucap-chat-message-box-recall>
<ucap-chat-message-box-text
*ngSwitchCase="EventType.Character"
[message]="message"
(contextmenu)="onContextMenu($event, message)"
>
</ucap-chat-message-box-text>
<ucap-chat-message-box-schedule
*ngSwitchCase="EventType.Plan"
[message]="message"
(contextmenu)="onContextMenu($event, message)"
>
</ucap-chat-message-box-schedule>
<ucap-chat-message-box-translation
*ngSwitchCase="EventType.Translation"
[message]="message"
[translationSimpleview]="translationSimpleview"
[isMe]="mine"
(contextMenu)="onContextMenu($event, message)"
class="information-msg"
></ucap-chat-message-box-translation>
<ucap-chat-message-box-mass-translation
*ngSwitchCase="EventType.MassTranslation"
class="information-msg"
[message]="message"
[translationSimpleview]="translationSimpleview"
[isMe]="mine"
(contextMenu)="onContextMenu($event, message)"
(massTranslationDetail)="onMassTranslationDetail($event)"
>
</ucap-chat-message-box-mass-translation>
<ucap-chat-message-box-video-conference
*ngSwitchCase="EventType.VideoConference"
[message]="message"
>
</ucap-chat-message-box-video-conference>
<ucap-chat-message-box-allim
*ngSwitchCase="EventType.AllimTms"
[message]="message"
class="information-msg"
>
</ucap-chat-message-box-allim>
<ucap-chat-message-box-allim
*ngSwitchCase="EventType.AllimElephant"
[message]="message"
class="information-msg"
>
</ucap-chat-message-box-allim>
<div *ngSwitchDefault>
<!--
notice
<ucap-chat-message-box-notice></ucap-chat-message-box-notice>
<div class="message">
{{ message.sentMessage }}
</div> -->
{{ message.type }} / {{ message.sentMessage }}
</div>
</ng-container>
</div>
</div>
<div class="bubble">
<ng-container
class="bubble"
*ngIf="message.type !== EventType.NotificationForTimerRoom"
[ngSwitch]="message.type"
>
<ucap-chat-message-box-mass
*ngSwitchCase="EventType.MassText"
[message]="message"
(massDetail)="onMassDetail($event)"
(contextmenu)="onContextMenu($event, message)"
>
</ucap-chat-message-box-mass>
<ucap-chat-message-box-file
*ngSwitchCase="EventType.File"
[eventInfoStatus]="eventInfoStatus"
[message]="message"
(save)="onSave($event)"
(fileViewer)="onFileViewer($event)"
(contextmenu)="onContextMenu($event, message)"
>
</ucap-chat-message-box-file>
<ucap-chat-message-box-sticker
*ngSwitchCase="EventType.Sticker"
[message]="message"
(contextmenu)="onContextMenu($event, message)"
>
</ucap-chat-message-box-sticker>
<ucap-chat-message-box-recall
*ngSwitchCase="EventType.RecalledMessage"
></ucap-chat-message-box-recall>
<ucap-chat-message-box-text
*ngSwitchCase="EventType.Character"
[message]="message"
(contextmenu)="onContextMenu($event, message)"
>
</ucap-chat-message-box-text>
<ucap-chat-message-box-schedule
*ngSwitchCase="EventType.Plan"
[message]="message"
(contextmenu)="onContextMenu($event, message)"
>
</ucap-chat-message-box-schedule>
<ucap-chat-message-box-translation
*ngSwitchCase="EventType.Translation"
[message]="message"
[translationSimpleview]="translationSimpleview"
[isMe]="mine"
(contextMenu)="onContextMenu($event, message)"
class="information-msg"
></ucap-chat-message-box-translation>
<ucap-chat-message-box-mass-translation
*ngSwitchCase="EventType.MassTranslation"
class="information-msg"
[message]="message"
[translationSimpleview]="translationSimpleview"
[isMe]="mine"
(contextMenu)="onContextMenu($event, message)"
(massTranslationDetail)="onMassTranslationDetail($event)"
>
</ucap-chat-message-box-mass-translation>
<ucap-chat-message-box-video-conference
*ngSwitchCase="EventType.VideoConference"
[message]="message"
>
</ucap-chat-message-box-video-conference>
<ucap-chat-message-box-allim
*ngSwitchCase="EventType.AllimTms"
[message]="message"
class="information-msg"
>
</ucap-chat-message-box-allim>
<ucap-chat-message-box-allim
*ngSwitchCase="EventType.AllimElephant"
[message]="message"
class="information-msg"
>
</ucap-chat-message-box-allim>
<div *ngSwitchDefault>
<!--
notice
<ucap-chat-message-box-notice></ucap-chat-message-box-notice>
<div class="message">
{{ message.sentMessage }}
</div> -->
{{ message.type }} / {{ message.sentMessage }}
</div>
</ng-container>
<div class="time secondary-text">
<ul>
<li *ngIf="unreadCount" class="unread">{{ unreadCount }}</li>
<li>
{{ message.sendDate | ucapDate: 'a hh:mm' }}
</li>
</ul>
</div>
</div>
<div class="time secondary-text">
<ul>
<li *ngIf="unreadCount">{{ unreadCount }}</li>
<li>
{{ message.sendDate | ucapDate: 'a hh:mm' }}
</li>
</ul>
</div>
</ng-template>
</div>
</div>

167
projects/ucap-webmessenger-ui-chat/src/lib/components/message-box.component.scss
View File

@ -6,12 +6,8 @@ $otherBox-line: #cccccc;
$otherBox-bg: #ffffff;
$meBox-line: #cccccc;
$meBox-bg: #ffffff;
.chat-messages {
padding: 30px 40px;
display: flex;
flex-direction: column;
}
$tablet-l-width: 1024px;
$mob-l-width: 640px;
.information-msg {
width: 100%;
}
@ -34,11 +30,11 @@ $meBox-bg: #ffffff;
flex: 0 0 auto;
&.thumbnail-mask {
border-radius: 50%;
width: 50px;
height: 50px;
width: 40px;
height: 40px;
overflow: hidden;
img {
width: 50px;
width: 40px;
height: auto;
}
}
@ -56,88 +52,105 @@ $meBox-bg: #ffffff;
}
}
}
.message-main {
margin-left: 20px;
margin-right: 10px;
.message-main-container {
display: Flex;
flex-flow: row;
margin-left: 10px;
max-width: 80%;
.chat-name {
font-size: 12px;
color: #333333;
margin-bottom: 6px;
@media screen and (max-width: #{$mob-l-width}),
(max-height: 600px) {
flex-flow: column;
}
.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;
.message-main {
margin-right: 6px;
max-width: calc(100% - 60px);
@media screen and (max-width: #{$mob-l-width}),
(max-height: 600px) {
flex-flow: column;
max-width: 100%;
}
.chat-name {
font-size: 12px;
color: #333333;
margin-bottom: 6px;
}
.bubble {
border-radius: 0 10px 10px 10px;
position: relative;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
word-break: break-all;
word-wrap: break-word;
}
}
}
.secondary-text {
align-self: flex-end;
font-size: 11px;
color: #666666;
word-wrap: break-word;
white-space: nowrap;
}
&.me {
.secondary-text {
text-align: end;
align-self: flex-end;
font-size: 0.84em;
color: #666666;
word-wrap: break-word;
white-space: nowrap;
@media screen and (max-width: #{$mob-l-width}), (max-height: 600px) {
flex-flow: row;
align-self: flex-start;
ul {
display: flex;
flex-flow: row-reverse;
justify-items: flex-end;
margin-top: 4px;
li {
display: inline-flex;
&.unread {
padding: 0px 6px;
margin-left: 10px;
border-radius: 30px;
background-color: #666666;
color: #ffffff;
}
}
}
}
}
}
&.highlight {
.bubble {
color: red;
&.me {
.message-main-container {
display: Flex;
flex-flow: row;
margin-left: 0px;
margin-right: 10px;
@media screen and (max-width: #{$tablet-l-width}),
(max-height: 800px) {
flex-flow: column;
}
}
}
&.highlight {
.bubble {
color: red;
}
}
}
}
/*.message-row.me > .bubble {
border: 1px solid $meBox-line;
background-color: $meBox-bg;
}*/
.message-row.me {
.profile-img {
display: none;
}
.chat-name {
display: none;
}
.message-main {
text-align: right;
margin-left: 10px;
margin-right: 20px;
.bubble {
border-radius: 10px 10px 0 10px;
.message-main-container {
.chat-name {
display: none;
}
/* & .bubble:before {
content: '';
width: 0px;
height: 0px;
position: absolute;
border-left: 6px solid $meBox-line;
border-right: 6px solid transparent;
border-top: 6px solid $meBox-line;
border-bottom: 6px solid transparent;
left: initial;
right: -12px;
top: 4px;
.message-main {
text-align: right;
margin-left: 6px;
margin-right: 0;
.bubble {
border-radius: 10px 10px 0 10px;
}
}
.secondary-text {
text-align: end;
@media screen and (max-width: #{$mob-l-width}), (max-height: 600px) {
flex-flow: column;
align-self: flex-end;
}
}
& .bubble:after {
content: '';
width: 0px;
height: 0px;
position: absolute;
border-left: 6px solid $meBox-bg;
border-right: 6px solid transparent;
border-top: 6px solid $meBox-bg;
border-bottom: 6px solid transparent;
left: initial;
right: -10px;
top: 5px;
}*/
}
}
.bubble-main {

12
projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/attach-file.component.scss
View File

@ -1,3 +1,4 @@
$tablet-s-width: 768px;
.bubble-main {
display: flex;
flex-direction: row;
@ -62,7 +63,7 @@
float: left;
line-height: 1.6em;
.file-name {
font-size: 14px;
font-size: 1em;
font-weight: bold;
display: inline-flex;
}
@ -84,6 +85,7 @@
display: flex;
width: 100%;
text-align: center;
font-size: 1em;
ul {
width: 100%;
li {
@ -92,15 +94,21 @@
display: inline-block;
text-align: center;
align-items: center;
font-size: 13px;
border-right: 1px solid #dddddd;
@media screen and (max-width: #{$tablet-s-width}) {
width: 30%;
}
&:last-child {
border-right: none;
@media screen and (max-width: #{$tablet-s-width}) {
width: 70%;
}
}
.mat-button {
width: 100%;
display: block;
height: 100%;
font-size: 1em;
}
}
&.expired {

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

@ -4,11 +4,12 @@
flex-flow: row;
width: 100%;
background-color: rgba(0, 0, 0, 0.4);
padding: 4px 20px;
padding: 6px 20px;
color: #ffffff;
border-radius: 100px;
justify-content: center;
justify-items: center;
margin: 10px 0 20px;
font-size: 0.84em;
font-size: 0.9em;
line-height:1.2em
}

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

@ -1,9 +1,9 @@
.bubble-main {
padding: 14px;
text-align:left;
display:flex;
padding: 10px;
text-align: left;
display: flex;
align-items: center;
.icon-recall{
.icon-recall {
width: 30px;
height: 30px;
display: inline-flex;
@ -12,14 +12,14 @@
align-items: center;
justify-content: center;
margin-right: 6px;
i{
color:#ffffff;
font-size:20px;
i {
color: #ffffff;
font-size: 20px;
padding-left: 2px;
padding-top: 2px;
}
}
.recall-msg{
color:#999999;
.recall-msg {
color: #999999;
}
}

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

@ -2,11 +2,16 @@ $otherBox-line: #cccccc;
$otherBox-bg: #ffffff;
$meBox-line: #cccccc;
$meBox-bg: #ffffff;
$tablet-l-width: 1024px;
.chat-messages {
padding: 30px 40px;
padding: 2vh 2vw;
display: flex;
flex-direction: column;
width: 100%;
@media screen and (max-width: #{$tablet-l-width}), (max-height: 800px) {
font-size: 13px;
}
}
.information-msg {
width: 100%;
@ -38,35 +43,23 @@ $meBox-bg: #ffffff;
}
}
}
&.me {
.chat-row {
flex-direction: row-reverse;
margin-left: 0;
margin-right: 0;
.profile-info {
flex-direction: row-reverse;
display: flex;
justify-content: flex-end;
.message-main-container {
.message-main {
margin-left: 20px;
margin-right: 10px;
.chat-name {
font-size: 12px;
color: #333333;
margin-bottom: 6px;
}
.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;
}
}
}
.message-main {
margin-left: 20px;
margin-right: 10px;
max-width: 80%;
.chat-name {
font-size: 12px;
color: #333333;
margin-bottom: 6px;
}
.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 {
@ -76,11 +69,6 @@ $meBox-bg: #ffffff;
word-wrap: break-word;
white-space: nowrap;
}
&.me {
.secondary-text {
text-align: end;
}
}
&.searched {
.bubble {
color: red;
@ -88,52 +76,35 @@ $meBox-bg: #ffffff;
}
}
/*.message-row.me > .bubble {
border: 1px solid $meBox-line;
background-color: $meBox-bg;
}*/
.message-row.me {
.profile-img {
display: none;
}
.chat-name {
display: none;
}
.message-main {
text-align: right;
margin-left: 10px;
margin-right: 20px;
.bubble {
border-radius: 10px 10px 0 10px;
.message-row {
&.me {
.chat-row {
flex-direction: row-reverse;
margin-left: 0;
margin-right: 0;
.profile-img {
display: none;
}
.message-main-container {
.chat-name {
display: none;
}
.message-main {
text-align: right;
margin-left: 10px;
margin-right: 20px;
.bubble {
border-radius: 10px 10px 0 10px;
}
}
.secondary-text {
text-align: end;
}
}
}
/* & .bubble:before {
content: '';
width: 0px;
height: 0px;
position: absolute;
border-left: 6px solid $meBox-line;
border-right: 6px solid transparent;
border-top: 6px solid $meBox-line;
border-bottom: 6px solid transparent;
left: initial;
right: -12px;
top: 4px;
}
& .bubble:after {
content: '';
width: 0px;
height: 0px;
position: absolute;
border-left: 6px solid $meBox-bg;
border-right: 6px solid transparent;
border-top: 6px solid $meBox-bg;
border-bottom: 6px solid transparent;
left: initial;
right: -10px;
top: 5px;
}*/
}
}
.bubble-main {
word-wrap: break-word;
white-space: pre-wrap;
@ -142,7 +113,6 @@ $meBox-bg: #ffffff;
::ng-deep .view-previous {
display: flex;
flex-flow: column;
//background-color: rgba(0, 0, 0, 0.4);
color: #ffffff;
justify-content: center;
justify-items: center;

2
projects/ucap-webmessenger-ui/src/assets/scss/file-icon/_icons.scss
View File

@ -1,5 +1,5 @@
// CONFIGURATION
$icon-container-size: 70px; // the size of the icons
$icon-container-size: 60px; // the size of the icons
$icon-edge-color: ''; // the default edge color of the icon
$font-size: 38; // the font size of the text incapsulated inside the svg icon relative to the 200px height of the original svg
$font-family: 'Myriad, Tahoma-Bold, sans-serif'; // the font size of the text incapsulated inside the svg icon relative to the 200px height of the original svg