Chapril/xmpp.chapril.org-conversejs
Chapril
/
xmpp.chapril.org-conversejs
24
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Let an embedded MUC expand to fill its containing element

This commit is contained in:
JC Brand 2018-04-24 17:31:44 +02:00
parent 6cce931086
commit d0387a65ca
4 changed files with 39 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
css/converse.css
View File

@ -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 {

12
demo/embedded.html
View File

@ -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>

19
dist/converse.js vendored
View File

@ -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);

16
sass/_muc_embedded.scss
View File

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