diff --git a/src/lib/appManagers/appImManager.ts b/src/lib/appManagers/appImManager.ts index 031be920..cf7aef0c 100644 --- a/src/lib/appManagers/appImManager.ts +++ b/src/lib/appManagers/appImManager.ts @@ -365,7 +365,7 @@ export class AppImManager { this.bubbleGroups.removeBubble(bubble, tempID); - if(message.media?.webpage && !bubble.querySelector('.box.web')) { + if(message.media?.webpage && !bubble.querySelector('.web')) { const mounted = this.getMountedBubble(mid); if(!mounted) return; this.renderMessage(mounted.message, true, false, mounted.bubble, false); @@ -2032,7 +2032,7 @@ export class AppImManager { bubble.classList.add('webpage'); let box = document.createElement('div'); - box.classList.add('box', 'web'); + box.classList.add('web'); let quote = document.createElement('div'); quote.classList.add('quote'); @@ -2066,7 +2066,11 @@ export class AppImManager { }); //} } else { - doc = null; + const docDiv = wrapDocument(doc, false, false, message.mid); + preview.append(docDiv); + preview.classList.add('preview-with-document'); + //messageDiv.classList.add((webpage.type || 'document') + '-message'); + //doc = null; } } diff --git a/src/scss/components/_typography.scss b/src/scss/components/_typography.scss index 1bbc33ce..9b4e5e8f 100644 --- a/src/scss/components/_typography.scss +++ b/src/scss/components/_typography.scss @@ -15,3 +15,11 @@ h1, h2, h3, h4, h5, h6 { em { font-style: italic; } strong { font-weight: 500; } small { font-size: 75%; } + +pre, code { + white-space: pre-wrap; /* css-3 */ + white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ + white-space: -pre-wrap; /* Opera 4-6 */ + white-space: -o-pre-wrap; /* Opera 7 */ + word-wrap: break-word; /* Internet Explorer 5.5+ */ +} diff --git a/src/scss/partials/_chatBubble.scss b/src/scss/partials/_chatBubble.scss index a69a33bd..a2569b60 100644 --- a/src/scss/partials/_chatBubble.scss +++ b/src/scss/partials/_chatBubble.scss @@ -379,13 +379,23 @@ $bubble-margin: .25rem; width: min-content; } - .box.web { + .web { /* width: max-content; */ // commented 10.02.2020 /* width: min-content; */ max-width: 100%; } } + &.webpage { + .preview-with-document { + margin-bottom: 0 !important; + } + + .document { + height: 3.375rem; + } + } + .preview-resizer { display: flex; } @@ -638,73 +648,58 @@ $bubble-margin: .25rem; //clip-path: ellipse(100px 100px at center); } } - - .box, .reply { - font-size: .95rem; - // margin: .25rem; - margin: 4px 4px 4px 6px; - //padding: .25rem; - padding: 4px; - margin-bottom: -5px; - border-radius: 4px; - //transition: anim(background-color); - - /* &:hover { - cursor: pointer; - } */ + + .web { + margin-top: -6px !important; + // margin-bottom: 5px; + max-width: 100%; + overflow: hidden; - &.web { - margin-top: -6px; - // margin-bottom: 5px; - max-width: 100%; + .preview { + max-height: unquote('min(400px, 100%)'); + max-width: unquote('min(480px, 100%)'); + /* max-height: 100%; + max-width: 100%; */ + border-radius: 4px; + margin-bottom: 3px; overflow: hidden; - - .preview { - max-height: unquote('min(400px, 100%)'); - max-width: unquote('min(480px, 100%)'); - /* max-height: 100%; - max-width: 100%; */ - border-radius: 4px; - margin-bottom: 3px; - overflow: hidden; - user-select: none; - cursor: pointer; - position: relative; + user-select: none; + cursor: pointer; + position: relative; - width: max-content; - - img, video { - max-width: 100%; - /* width: 100%; - height: 100%; */ - } - } - - .title { - letter-spacing: -0.2px; - line-height: 1.2; - font-weight: 500 !important; - } + width: max-content; - .name { - letter-spacing: -0.3px; - display: block; - - html.no-touch &:hover { - text-decoration: underline; - } + img, video { + max-width: 100%; + /* width: 100%; + height: 100%; */ } + } + + .title { + letter-spacing: -0.2px; + line-height: 1.2; + font-weight: 500 !important; + } + + .name { + letter-spacing: -0.3px; + display: block; - .text { - overflow: hidden; - text-overflow: ellipsis; - line-height: 1.2; - letter-spacing: -0.3px; - margin-top: 2px; - font-size: 0.965rem; + html.no-touch &:hover { + text-decoration: underline; } } + .text { + overflow: hidden; + text-overflow: ellipsis; + line-height: 1.2; + letter-spacing: -0.3px; + margin-top: 2px; + font-size: 0.965rem; + } + .quote { // padding-left: .5rem; padding-left: 0.55rem; @@ -712,10 +707,21 @@ $bubble-margin: .25rem; overflow: hidden; width: 100%; } - - .text/* , .reply-subtitle */ { - line-height: 1.2; - } + } + + .web, .reply { + font-size: .95rem; + // margin: .25rem; + margin: 4px 4px 4px 6px; + //padding: .25rem; + padding: 4px; + margin-bottom: -5px; + border-radius: 4px; + //transition: anim(background-color); + + /* &:hover { + cursor: pointer; + } */ .name, .reply-title { font-weight: 500 !important; @@ -728,7 +734,7 @@ $bubble-margin: .25rem; width: fit-content; } - .box.web { + .web { .quote { display: flex; justify-content: space-between; @@ -825,60 +831,39 @@ $bubble-margin: .25rem; .emoji { font-size: 1.2rem; } - - pre, code { - white-space: pre-wrap; /* css-3 */ - white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ - white-space: -pre-wrap; /* Opera 4-6 */ - white-space: -o-pre-wrap; /* Opera 7 */ - word-wrap: break-word; /* Internet Explorer 5.5+ */ - } } - // all for audio (not voice) - .message.audio-message { + .audio:not(.is-voice) { + justify-content: unset; + max-width: none; + width: 258px; - .audio { - justify-content: unset; - max-width: none; - - - @include respond-to(handhelds) { - height: 59px; - padding-left: 47px; - } - - // .preloader-container { - // @include respond-to(handhelds) { - // width: 30px; - // height: 30px; - // // left: 2px; - // } - // } + $parent: ".audio"; + #{$parent} { &-time { padding-bottom: 7px; } - + &-time, &-subtitle { color: #4fae4e; line-height: 1.45; margin-top: 0; } - + &-title { font-weight: 500; margin-left: -1px; } - + &-details { margin-top: 8px; - + @include respond-to(handhelds) { margin-top: -1px; } } - + &-ico { font-size: 0; @@ -888,6 +873,19 @@ $bubble-margin: .25rem; } } } + + @include respond-to(handhelds) { + height: 59px; + padding-left: 47px; + } + + // .preloader-container { + // @include respond-to(handhelds) { + // width: 30px; + // height: 30px; + // // left: 2px; + // } + // } .progress-line { /* width: calc(100% + 50px); */ @@ -917,7 +915,10 @@ $bubble-margin: .25rem; } } } + } + // all for audio (not voice) + .message.audio-message { //&.audio-message { min-width: 275px; //max-width: 380px !important; @@ -1301,10 +1302,10 @@ $bubble-margin: .25rem; .quote { border-left: 2px $color-blue solid; - * { + /* * { overflow: hidden; text-overflow: ellipsis; - } + } */ } .quote .name, .reply-title { @@ -1345,7 +1346,7 @@ $bubble-margin: .25rem; color: #707579 !important; } - .message.audio-message { + .audio:not(.is-voice) { .progress-line { &__seek { background: rgba(193, 207, 220, 0.39); @@ -1437,7 +1438,7 @@ $bubble-margin: .25rem; &.is-reply { &.emoji-big, &.sticker { - .box, .reply { + .web, .reply { background-color: #eeffde; right: calc(100% + 10px); border-color: rgba($color-green, .12);