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;
   }
@@ -638,8 +648,68 @@ $bubble-margin: .25rem;
       //clip-path: ellipse(100px 100px at center);
     }
   }
+
+  .web {
+    margin-top: -6px !important;
+    // margin-bottom: 5px;
+    max-width: 100%;
+    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;
+
+      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;
+    }
+    
+    .name {
+      letter-spacing: -0.3px;
+      display: block;
+      
+      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;
+      max-width: 100%;
+      overflow: hidden;
+      width: 100%;
+    }
+  }
   
-  .box, .reply {
+  .web, .reply {
     font-size: .95rem;
     // margin: .25rem;
     margin: 4px 4px 4px 6px;
@@ -653,70 +723,6 @@ $bubble-margin: .25rem;
       cursor: pointer;
     } */
     
-    &.web {
-      margin-top: -6px;
-      // margin-bottom: 5px;
-      max-width: 100%;
-      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;
-
-        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;
-      }
-      
-      .name {
-        letter-spacing: -0.3px;
-        display: block;
-        
-        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;
-      max-width: 100%;
-      overflow: hidden;
-      width: 100%;
-    }
-
-    .text/* , .reply-subtitle */ {
-      line-height: 1.2;
-    }
-    
     .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,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)
+  .audio:not(.is-voice) {
-  .message.audio-message {
+    justify-content: unset;
+    max-width: none;
+    width: 258px;
 
-    .audio {
+    $parent: ".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} {
       &-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);