Skip to content

C
converse.js
Commit d0387a65 authored by JC Brand's avatar JC Brand
Browse files
Options

Let an embedded MUC expand to fill its containing element

parent 6cce9310
Show whitespace changes
Inline Side-by-side
Showing with 39 additions and 44 deletions
css/converse.css
View file @ d0387a65
......@@ -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,19 +8718,14 @@ 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; }
box-shadow: none;
height: 100%; }
#conversejs.converse-embedded .chatbox .chat-title {
padding: 0.3em;
font-size: 120%; }
......@@ -8737,11 +8733,7 @@ body.reset {
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,6 +8742,8 @@ 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 {
height: 100%; }
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chatroom-form-container {
height: 100%;
position: relative; }
......
demo/embedded.html
View file @ d0387a65
......@@ -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,11 +49,13 @@
<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 class="converse-container">
<div id="conversejs"></div>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
......
dist/converse.js
View file @ d0387a65
......@@ -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);
sass/_muc_embedded.scss
View file @ d0387a65
......@@ -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;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7