Let an embedded MUC expand to fill its containing element
This commit is contained in:
parent
6cce931086
commit
d0387a65ca
|
@ -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 {
|
||||||
|
|
|
@ -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
19
dist/converse.js
vendored
|
@ -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);
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in New Issue
Block a user