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

Browse Source
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; bottom: auto;
right: auto; right: auto;
position: relative; position: relative;
width: 100%; } width: 100%;
height: 100%; }
#conversejs.converse-embedded *, #conversejs.converse-embedded *:before, #conversejs.converse-embedded *:after { #conversejs.converse-embedded *, #conversejs.converse-embedded *:before, #conversejs.converse-embedded *:after {
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
@ -8717,31 +8718,22 @@ body.reset {
z-index: 1031; z-index: 1031;
position: inherit; position: inherit;
bottom: auto; bottom: auto;
height: auto; height: 100%;
width: 100%; } width: 100%; }
#conversejs.converse-embedded .chatroom { #conversejs.converse-embedded .chatroom {
margin: 0; margin: 0;
width: 100%; } width: 100%; }
#conversejs.converse-embedded .flyout { #conversejs.converse-embedded .chatbox .box-flyout {
bottom: auto; box-shadow: none;
display: block; height: 100%; }
position: relative; } #conversejs.converse-embedded .chatbox .chat-title {
#conversejs.converse-embedded .chatbox { padding: 0.3em;
float: none; } font-size: 120%; }
#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-btn { #conversejs.converse-embedded .chatbox-btn {
display: none; } display: none; }
#conversejs.converse-embedded .chatroom .box-flyout { #conversejs.converse-embedded .chatroom .box-flyout {
min-width: auto; min-width: auto;
width: 100%; width: 100%; }
height: 55vh; }
#conversejs.converse-embedded .chatroom .box-flyout .chat-body {
height: -webkit-calc(100% - 55px);
height: calc(100% - 55px); }
#conversejs.converse-embedded .chatroom .box-flyout .occupants-heading { #conversejs.converse-embedded .chatroom .box-flyout .occupants-heading {
font-size: 120%; } font-size: 120%; }
#conversejs.converse-embedded .chatroom .box-flyout .chat-content .chat-message { #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 { #conversejs.converse-embedded .chatroom .box-flyout .sendXMPPMessage .chat-textarea {
padding: 0.5em; padding: 0.5em;
font-size: 110%; } font-size: 110%; }
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chatroom-form-container { #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body {
height: 100%; height: 100%; }
position: relative; } #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chatroom-form-container {
height: 100%;
position: relative; }
#conversejs.converse-embedded .chatroom .box-flyout .occupants .occupant-list { #conversejs.converse-embedded .chatroom .box-flyout .occupants .occupant-list {
padding-left: 0.3em; } padding-left: 0.3em; }
#conversejs.converse-embedded .chatroom .box-flyout .occupants .occupant-list li.occupant { #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> <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> <noscript><p><img src="//stats.opkode.com/piwik.php?idsite=1" style="border:0;" alt="" /></p></noscript>
<![if gte IE 11]> <![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> <script src="/dist/converse.min.js"></script>
<![endif]> <![endif]>
<style>
.converse-container {
height: 55vh;
}
</style>
</head> </head>
<body id="page-top" data-spy="scroll" data-target=".navbar-custom"> <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> <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> <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> </div>
</div> </div>

19
dist/converse.js vendored
View File

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

16
sass/_muc_embedded.scss
View File

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