Selaa lähdekoodia

Let an embedded MUC expand to fill its containing element

JC Brand 7 vuotta sitten
vanhempi
commit
d0387a65ca
4 muutettua tiedostoa jossa 39 lisäystä ja 44 poistoa
  1. 15 21
      css/converse.css
  2. 10 2
      demo/embedded.html
  3. 10 9
      dist/converse.js
  4. 4 12
      sass/_muc_embedded.scss

+ 15 - 21
css/converse.css

@@ -8708,7 +8708,8 @@ body.reset {
   bottom: auto;
   right: auto;
   position: relative;
-  width: 100%; }
+  width: 100%;
+  height: 100%; }
   #conversejs.converse-embedded *, #conversejs.converse-embedded *:before, #conversejs.converse-embedded *:after {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
@@ -8717,31 +8718,22 @@ body.reset {
     z-index: 1031;
     position: inherit;
     bottom: auto;
-    height: auto;
+    height: 100%;
     width: 100%; }
   #conversejs.converse-embedded .chatroom {
     margin: 0;
     width: 100%; }
-  #conversejs.converse-embedded .flyout {
-    bottom: auto;
-    display: block;
-    position: relative; }
-  #conversejs.converse-embedded .chatbox {
-    float: none; }
-    #conversejs.converse-embedded .chatbox .box-flyout {
-      box-shadow: none; }
-    #conversejs.converse-embedded .chatbox .chat-title {
-      padding: 0.3em;
-      font-size: 120%; }
+  #conversejs.converse-embedded .chatbox .box-flyout {
+    box-shadow: none;
+    height: 100%; }
+  #conversejs.converse-embedded .chatbox .chat-title {
+    padding: 0.3em;
+    font-size: 120%; }
   #conversejs.converse-embedded .chatbox-btn {
     display: none; }
   #conversejs.converse-embedded .chatroom .box-flyout {
     min-width: auto;
-    width: 100%;
-    height: 55vh; }
-    #conversejs.converse-embedded .chatroom .box-flyout .chat-body {
-      height: -webkit-calc(100% - 55px);
-      height: calc(100% - 55px); }
+    width: 100%; }
     #conversejs.converse-embedded .chatroom .box-flyout .occupants-heading {
       font-size: 120%; }
     #conversejs.converse-embedded .chatroom .box-flyout .chat-content .chat-message {
@@ -8750,9 +8742,11 @@ body.reset {
     #conversejs.converse-embedded .chatroom .box-flyout .sendXMPPMessage .chat-textarea {
       padding: 0.5em;
       font-size: 110%; }
-    #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chatroom-form-container {
-      height: 100%;
-      position: relative; }
+    #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body {
+      height: 100%; }
+      #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chatroom-form-container {
+        height: 100%;
+        position: relative; }
     #conversejs.converse-embedded .chatroom .box-flyout .occupants .occupant-list {
       padding-left: 0.3em; }
       #conversejs.converse-embedded .chatroom .box-flyout .occupants .occupant-list li.occupant {

+ 10 - 2
demo/embedded.html

@@ -15,9 +15,15 @@
     <script type="text/javascript" src="/analytics.js"></script>
     <noscript><p><img src="//stats.opkode.com/piwik.php?idsite=1" style="border:0;" alt="" /></p></noscript>
     <![if gte IE 11]>
-        <link type="text/css" rel="stylesheet" media="screen" href="/css/converse.min.css" />
+        <link type="text/css" rel="stylesheet" media="screen" href="/css/converse.css" />
         <script src="/dist/converse.min.js"></script>
     <![endif]>
+
+    <style>
+        .converse-container {
+            height: 55vh;
+        }
+    </style>
 </head>
 
 <body id="page-top" data-spy="scroll" data-target=".navbar-custom">
@@ -43,7 +49,9 @@
                         <h1 class="brand-heading brand-heading-embedded"><a style="color: white;" href="/"><i class="icon-conversejs"></i>Converse</a></h1>
                         <p class="intro-text">Embedded MUC chat demo</p>
 
-                        <div id="conversejs"></div>
+                        <div class="converse-container">
+                            <div id="conversejs"></div>
+                        </div>
                     </div>
                 </div>
             </div>

+ 10 - 9
dist/converse.js

@@ -48365,11 +48365,7 @@ return __p
           'input .chat-textarea': 'inputChanged'
         },
         initialize: function initialize() {
-          this.scrollDown = _.debounce(this._scrollDown, 250);
-          this.markScrolled = _.debounce(this._markScrolled, 100);
-          this.show = _.debounce(this._show, 250, {
-            'leading': true
-          });
+          this.initDebounced();
           this.createEmojiPicker();
           this.model.messages.on('add', this.onMessageAdded, this);
           this.model.messages.on('rendered', this.scrollDown, this);
@@ -48385,6 +48381,13 @@ return __p
 
           _converse.emit('chatBoxInitialized', this);
         },
+        initDebounced: function initDebounced() {
+          this.scrollDown = _.debounce(this._scrollDown, 250);
+          this.markScrolled = _.debounce(this._markScrolled, 100);
+          this.show = _.debounce(this._show, 250, {
+            'leading': true
+          });
+        },
         render: function render() {
           // XXX: Is this still needed?
           this.el.setAttribute('id', this.model.get('box_id'));
@@ -56838,8 +56841,7 @@ return __p
           'keypress textarea.chat-textarea': 'keyPressed'
         },
         initialize: function initialize() {
-          this.scrollDown = _.debounce(this._scrollDown, 250);
-          this.markScrolled = _.debounce(this._markScrolled, 100);
+          this.initDebounced();
           this.disable_mam = true; // Don't do MAM queries for this box
 
           this.model.messages.on('add', this.onMessageAdded, this);
@@ -59137,8 +59139,7 @@ return __p
         initialize: function initialize() {
           var _this3 = this;
 
-          this.scrollDown = _.debounce(this._scrollDown, 250);
-          this.markScrolled = _.debounce(this._markScrolled, 100);
+          this.initDebounced();
           this.model.messages.on('add', this.onMessageAdded, this);
           this.model.messages.on('rendered', this.scrollDown, this);
           this.model.on('change:affiliation', this.renderHeading, this);

+ 4 - 12
sass/_muc_embedded.scss

@@ -11,12 +11,13 @@
     right: auto;
     position: relative;
     width: 100%;
+    height: 100%; // When embedded, it fills the containing element
 
     .converse-chatboxes {
         z-index: 1031; // One more than bootstrap navbar
         position: inherit;
         bottom: auto;
-        height: auto;
+        height: 100%;
         width: 100%;
     }
 
@@ -24,16 +25,10 @@
         margin: 0;
         width: 100%;
     }
-    .flyout {
-        bottom: auto;
-        display: block;
-        position: relative;
-    }
     .chatbox {
-        float: none;
-
         .box-flyout {
             box-shadow: none;
+            height: 100%;
         }
         .chat-title {
             padding: 0.3em;
@@ -47,10 +42,6 @@
         .box-flyout {
             min-width: auto;
             width: 100%;
-            height: 55vh;
-            .chat-body {
-                @include calc(height, '100% - #{$chat-head-height}');
-            }
             .occupants-heading {
                 font-size: 120%;
             }
@@ -67,6 +58,7 @@
                 }
             }
             .chatroom-body {
+                height: 100%;
                 .chatroom-form-container {
                     height: 100%;
                     position: relative;