Show document in webpages

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;
             }
           }
           

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+ */
+}

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;
   }
@@ -639,22 +649,8 @@ $bubble-margin: .25rem;
     }
   }
 
-  .box, .reply {
+  .web {
-    font-size: .95rem;
+    margin-top: -6px !important;
-    // 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;
     // margin-bottom: 5px;
     max-width: 100%;
     overflow: hidden;
@@ -703,7 +699,6 @@ $bubble-margin: .25rem;
       margin-top: 2px;
       font-size: 0.965rem;
     }
-    }
 
     .quote {
       // padding-left: .5rem;
@@ -712,11 +707,22 @@ $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;
       display: inline!important;
@@ -728,7 +734,7 @@ $bubble-margin: .25rem;
       width: fit-content;
     }
 
-    .box.web {
+    .web {
       .quote {
         display: flex;
         justify-content: space-between;
@@ -825,37 +831,16 @@ $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)
+  .audio:not(.is-voice) {
-  .message.audio-message {
-
-    .audio {
     justify-content: unset;
     max-width: none;
+    width: 258px;
 
+    $parent: ".audio";
 
-      @include respond-to(handhelds) {
+    #{$parent} {
-        height: 59px;
-        padding-left: 47px;
-      }
-
-      // .preloader-container {
-      //   @include respond-to(handhelds) {
-      //     width: 30px;
-      //     height: 30px;
-      //     // left: 2px;
-      //   }
-      // }
-
       &-time {
         padding-bottom: 7px;
       }
@@ -889,6 +874,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); */
       width: 191px;
@@ -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);