In mobile view, add arrows to chat headings
so that you can navigate "back" to the controlbox.
This commit is contained in:
parent
b00567a0ea
commit
8948be1d3d
@ -7286,6 +7286,8 @@ body.reset {
|
|||||||
#conversejs #user-profile-modal label {
|
#conversejs #user-profile-modal label {
|
||||||
font-weight: bold; }
|
font-weight: bold; }
|
||||||
|
|
||||||
|
#conversejs .chatbox-navback {
|
||||||
|
display: none; }
|
||||||
#conversejs .flyout {
|
#conversejs .flyout {
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
position: absolute; }
|
position: absolute; }
|
||||||
@ -7325,15 +7327,10 @@ body.reset {
|
|||||||
height: 36px;
|
height: 36px;
|
||||||
width: 36px;
|
width: 36px;
|
||||||
margin-right: 0.5em; }
|
margin-right: 0.5em; }
|
||||||
|
#conversejs .chat-head .chatbox-title .chatroom-description {
|
||||||
|
font-size: 80%; }
|
||||||
#conversejs .chat-head .chatbox-buttons {
|
#conversejs .chat-head .chatbox-buttons {
|
||||||
flex-direction: row-reverse;
|
flex-direction: row-reverse;
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
min-height: 1px;
|
|
||||||
padding-right: 15px;
|
|
||||||
padding-left: 15px;
|
|
||||||
flex: 0 0 33.3333333333%;
|
|
||||||
max-width: 33.3333333333%;
|
|
||||||
padding: 0; }
|
padding: 0; }
|
||||||
#conversejs .chat-head .user-custom-message {
|
#conversejs .chat-head .user-custom-message {
|
||||||
color: white;
|
color: white;
|
||||||
@ -7630,6 +7627,14 @@ body.reset {
|
|||||||
#conversejs.converse-overlayed .chat-head {
|
#conversejs.converse-overlayed .chat-head {
|
||||||
border-top-left-radius: 0;
|
border-top-left-radius: 0;
|
||||||
border-top-right-radius: 0; } }
|
border-top-right-radius: 0; } }
|
||||||
|
#conversejs.converse-embedded .chat-head .chatbox-title,
|
||||||
|
#conversejs.converse-overlayed .chat-head .chatbox-title {
|
||||||
|
flex: 0 0 66.6666666667%;
|
||||||
|
max-width: 66.6666666667%; }
|
||||||
|
#conversejs.converse-embedded .chat-head .chatbox-buttons,
|
||||||
|
#conversejs.converse-overlayed .chat-head .chatbox-buttons {
|
||||||
|
flex: 0 0 33.3333333333%;
|
||||||
|
max-width: 33.3333333333%; }
|
||||||
#conversejs.converse-embedded .chatbox,
|
#conversejs.converse-embedded .chatbox,
|
||||||
#conversejs.converse-overlayed .chatbox {
|
#conversejs.converse-overlayed .chatbox {
|
||||||
min-width: 250px !important;
|
min-width: 250px !important;
|
||||||
@ -7690,13 +7695,16 @@ body.reset {
|
|||||||
height: 62px;
|
height: 62px;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
padding: 0; }
|
padding: 0; }
|
||||||
#conversejs.converse-fullscreen .chat-head .chatbox-buttons {
|
|
||||||
flex: 0 0 25%;
|
|
||||||
max-width: 25%; }
|
|
||||||
#conversejs.converse-fullscreen .chat-head .user-custom-message {
|
#conversejs.converse-fullscreen .chat-head .user-custom-message {
|
||||||
font-size: 50%;
|
font-size: 50%;
|
||||||
height: auto;
|
height: auto;
|
||||||
line-height: 16px; }
|
line-height: 16px; }
|
||||||
|
#conversejs.converse-fullscreen .chat-head .chatbox-title {
|
||||||
|
flex: 0 0 83.3333333333%;
|
||||||
|
max-width: 83.3333333333%; }
|
||||||
|
#conversejs.converse-fullscreen .chat-head .chatbox-buttons {
|
||||||
|
flex: 0 0 16.6666666667%;
|
||||||
|
max-width: 16.6666666667%; }
|
||||||
#conversejs.converse-fullscreen .chat-textarea {
|
#conversejs.converse-fullscreen .chat-textarea {
|
||||||
max-height: 400px; }
|
max-height: 400px; }
|
||||||
#conversejs.converse-fullscreen .emoji-picker {
|
#conversejs.converse-fullscreen .emoji-picker {
|
||||||
@ -7752,23 +7760,43 @@ body.reset {
|
|||||||
padding-left: 10px;
|
padding-left: 10px;
|
||||||
padding-right: 10px; }
|
padding-right: 10px; }
|
||||||
|
|
||||||
@media screen and (max-width: 767px) {
|
@media (max-width: 767.98px) {
|
||||||
#conversejs:not(.converse-embedded) > .row {
|
#conversejs:not(.converse-embedded) > .row {
|
||||||
flex-direction: row-reverse; }
|
flex-direction: row-reverse; }
|
||||||
#conversejs:not(.converse-embedded) #converse-login-panel .converse-form {
|
#conversejs:not(.converse-embedded) #converse-login-panel .converse-form {
|
||||||
padding: 3em 2em 3em; }
|
padding: 3em 2em 3em; }
|
||||||
#conversejs:not(.converse-embedded) .sidebar {
|
|
||||||
display: block; }
|
|
||||||
#conversejs:not(.converse-embedded) .chatbox {
|
#conversejs:not(.converse-embedded) .chatbox {
|
||||||
width: calc(100% - 50px); }
|
width: calc(100% - 50px); }
|
||||||
#conversejs:not(.converse-embedded) .chatbox .row .box-flyout {
|
#conversejs:not(.converse-embedded) .chatbox .row .box-flyout {
|
||||||
left: 50px;
|
left: 50px;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
box-shadow: none; } }
|
box-shadow: none; }
|
||||||
@media screen and (max-width: 767px) {
|
|
||||||
#conversejs:not(.converse-embedded).converse-fullscreen .chatbox {
|
#conversejs.converse-mobile .chatbox .box-flyout .chatbox-navback,
|
||||||
width: calc(100% - 50px); } }
|
#conversejs.converse-overlayed .chatbox .box-flyout .chatbox-navback,
|
||||||
|
#conversejs.converse-embedded .chatbox .box-flyout .chatbox-navback,
|
||||||
|
#conversejs.converse-fullscreen .chatbox .box-flyout .chatbox-navback {
|
||||||
|
display: flex;
|
||||||
|
flex: 0 0 16.6666666667%;
|
||||||
|
max-width: 16.6666666667%; }
|
||||||
|
#conversejs.converse-mobile .chatbox .box-flyout .chatbox-navback .fa-arrow-left:before,
|
||||||
|
#conversejs.converse-overlayed .chatbox .box-flyout .chatbox-navback .fa-arrow-left:before,
|
||||||
|
#conversejs.converse-embedded .chatbox .box-flyout .chatbox-navback .fa-arrow-left:before,
|
||||||
|
#conversejs.converse-fullscreen .chatbox .box-flyout .chatbox-navback .fa-arrow-left:before {
|
||||||
|
color: white; }
|
||||||
|
#conversejs.converse-mobile .chatbox .box-flyout .chatbox-title,
|
||||||
|
#conversejs.converse-overlayed .chatbox .box-flyout .chatbox-title,
|
||||||
|
#conversejs.converse-embedded .chatbox .box-flyout .chatbox-title,
|
||||||
|
#conversejs.converse-fullscreen .chatbox .box-flyout .chatbox-title {
|
||||||
|
flex: 0 0 58.3333333333%;
|
||||||
|
max-width: 58.3333333333%; }
|
||||||
|
#conversejs.converse-mobile .chatbox .box-flyout .chatbox-buttons,
|
||||||
|
#conversejs.converse-overlayed .chatbox .box-flyout .chatbox-buttons,
|
||||||
|
#conversejs.converse-embedded .chatbox .box-flyout .chatbox-buttons,
|
||||||
|
#conversejs.converse-fullscreen .chatbox .box-flyout .chatbox-buttons {
|
||||||
|
flex: 0 0 25%;
|
||||||
|
max-width: 25%; } }
|
||||||
#conversejs .set-xmpp-status .fa-circle, #conversejs .xmpp-status .fa-circle, #conversejs .roster-contacts .fa-circle {
|
#conversejs .set-xmpp-status .fa-circle, #conversejs .xmpp-status .fa-circle, #conversejs .roster-contacts .fa-circle {
|
||||||
color: #3AA569; }
|
color: #3AA569; }
|
||||||
#conversejs .set-xmpp-status .fa-minus-circle, #conversejs .xmpp-status .fa-minus-circle, #conversejs .roster-contacts .fa-minus-circle {
|
#conversejs .set-xmpp-status .fa-minus-circle, #conversejs .xmpp-status .fa-minus-circle, #conversejs .roster-contacts .fa-minus-circle {
|
||||||
@ -8700,12 +8728,24 @@ body.reset {
|
|||||||
max-width: 25%; }
|
max-width: 25%; }
|
||||||
|
|
||||||
@media (max-width: 767.98px) {
|
@media (max-width: 767.98px) {
|
||||||
.chatroom .box-flyout .chatbox-title {
|
#conversejs.converse-mobile .chatroom .box-flyout .chatbox-navback,
|
||||||
flex: 0 0 66.6666666667%;
|
#conversejs.converse-overlayed .chatroom .box-flyout .chatbox-navback,
|
||||||
max-width: 66.6666666667%; }
|
#conversejs.converse-embedded .chatroom .box-flyout .chatbox-navback,
|
||||||
.chatroom .box-flyout .chatbox-buttons {
|
#conversejs.converse-fullscreen .chatroom .box-flyout .chatbox-navback {
|
||||||
flex: 0 0 33.3333333333%;
|
flex: 0 0 16.6666666667%;
|
||||||
max-width: 33.3333333333%; } }
|
max-width: 16.6666666667%; }
|
||||||
|
#conversejs.converse-mobile .chatroom .box-flyout .chatbox-title,
|
||||||
|
#conversejs.converse-overlayed .chatroom .box-flyout .chatbox-title,
|
||||||
|
#conversejs.converse-embedded .chatroom .box-flyout .chatbox-title,
|
||||||
|
#conversejs.converse-fullscreen .chatroom .box-flyout .chatbox-title {
|
||||||
|
flex: 0 0 58.3333333333%;
|
||||||
|
max-width: 58.3333333333%; }
|
||||||
|
#conversejs.converse-mobile .chatroom .box-flyout .chatbox-buttons,
|
||||||
|
#conversejs.converse-overlayed .chatroom .box-flyout .chatbox-buttons,
|
||||||
|
#conversejs.converse-embedded .chatroom .box-flyout .chatbox-buttons,
|
||||||
|
#conversejs.converse-fullscreen .chatroom .box-flyout .chatbox-buttons {
|
||||||
|
flex: 0 0 25%;
|
||||||
|
max-width: 25%; } }
|
||||||
#conversejs.converse-fullscreen .chatroom .box-flyout,
|
#conversejs.converse-fullscreen .chatroom .box-flyout,
|
||||||
#conversejs.converse-mobile .chatroom .box-flyout {
|
#conversejs.converse-mobile .chatroom .box-flyout {
|
||||||
background-color: #E77051;
|
background-color: #E77051;
|
||||||
|
@ -1,4 +1,7 @@
|
|||||||
#conversejs {
|
#conversejs {
|
||||||
|
.chatbox-navback {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
.flyout {
|
.flyout {
|
||||||
border-radius: $chatbox-border-radius;
|
border-radius: $chatbox-border-radius;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -51,10 +54,13 @@
|
|||||||
margin-right: 0.5em;
|
margin-right: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.chatbox-title {
|
||||||
|
.chatroom-description {
|
||||||
|
font-size: 80%;
|
||||||
|
}
|
||||||
|
}
|
||||||
.chatbox-buttons {
|
.chatbox-buttons {
|
||||||
flex-direction: row-reverse;
|
flex-direction: row-reverse;
|
||||||
@include make-col-ready();
|
|
||||||
@include make-col(4);
|
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -443,7 +449,14 @@
|
|||||||
border-top-left-radius: 0;
|
border-top-left-radius: 0;
|
||||||
border-top-right-radius: 0;
|
border-top-right-radius: 0;
|
||||||
}
|
}
|
||||||
|
.chatbox-title {
|
||||||
|
@include make-col(8);
|
||||||
}
|
}
|
||||||
|
.chatbox-buttons {
|
||||||
|
@include make-col(4);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.chatbox {
|
.chatbox {
|
||||||
min-width: $overlayed-chat-width!important;
|
min-width: $overlayed-chat-width!important;
|
||||||
width: $overlayed-chat-width;
|
width: $overlayed-chat-width;
|
||||||
@ -536,9 +549,6 @@
|
|||||||
}
|
}
|
||||||
.chat-head {
|
.chat-head {
|
||||||
height: $fullpage-chat-head-height;
|
height: $fullpage-chat-head-height;
|
||||||
.chatbox-buttons {
|
|
||||||
@include make-col(3);
|
|
||||||
}
|
|
||||||
font-size: $font-size-huge;
|
font-size: $font-size-huge;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
.user-custom-message {
|
.user-custom-message {
|
||||||
@ -546,6 +556,12 @@
|
|||||||
height: auto;
|
height: auto;
|
||||||
line-height: $line-height;
|
line-height: $line-height;
|
||||||
}
|
}
|
||||||
|
.chatbox-title {
|
||||||
|
@include make-col(10);
|
||||||
|
}
|
||||||
|
.chatbox-buttons {
|
||||||
|
@include make-col(2);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.chat-textarea {
|
.chat-textarea {
|
||||||
max-height: $fullpage-max-chat-textarea-height;
|
max-height: $fullpage-max-chat-textarea-height;
|
||||||
@ -623,22 +639,16 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 767px) {
|
@include media-breakpoint-down(sm) {
|
||||||
#conversejs:not(.converse-embedded) {
|
#conversejs:not(.converse-embedded) {
|
||||||
> .row {
|
> .row {
|
||||||
flex-direction: row-reverse;
|
flex-direction: row-reverse;
|
||||||
}
|
}
|
||||||
|
|
||||||
#converse-login-panel {
|
#converse-login-panel {
|
||||||
.converse-form {
|
.converse-form {
|
||||||
padding: 3em 2em 3em;
|
padding: 3em 2em 3em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chatbox {
|
.chatbox {
|
||||||
width: calc(100% - 50px);
|
width: calc(100% - 50px);
|
||||||
.row {
|
.row {
|
||||||
@ -651,12 +661,29 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 767px) {
|
#conversejs.converse-mobile,
|
||||||
#conversejs:not(.converse-embedded).converse-fullscreen {
|
#conversejs.converse-overlayed,
|
||||||
|
#conversejs.converse-embedded,
|
||||||
|
#conversejs.converse-fullscreen {
|
||||||
.chatbox {
|
.chatbox {
|
||||||
width: calc(100% - 50px);
|
.box-flyout {
|
||||||
|
.chatbox-navback {
|
||||||
|
display: flex;
|
||||||
|
@include make-col(2);
|
||||||
|
.fa-arrow-left {
|
||||||
|
&:before {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.chatbox-title {
|
||||||
|
@include make-col(7);
|
||||||
|
}
|
||||||
|
.chatbox-buttons {
|
||||||
|
@include make-col(3);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -333,13 +333,21 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@include media-breakpoint-down(sm) {
|
@include media-breakpoint-down(sm) {
|
||||||
|
#conversejs.converse-mobile,
|
||||||
|
#conversejs.converse-overlayed,
|
||||||
|
#conversejs.converse-embedded,
|
||||||
|
#conversejs.converse-fullscreen {
|
||||||
.chatroom {
|
.chatroom {
|
||||||
.box-flyout {
|
.box-flyout {
|
||||||
|
.chatbox-navback {
|
||||||
|
@include make-col(2);
|
||||||
|
}
|
||||||
.chatbox-title {
|
.chatbox-title {
|
||||||
@include make-col(8);
|
@include make-col(7);
|
||||||
}
|
}
|
||||||
.chatbox-buttons {
|
.chatbox-buttons {
|
||||||
@include make-col(4);
|
@include make-col(3);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -321,16 +321,17 @@
|
|||||||
|
|
||||||
events: {
|
events: {
|
||||||
'change input.fileupload': 'onFileSelection',
|
'change input.fileupload': 'onFileSelection',
|
||||||
|
'click .chatbox-navback': 'showControlBox',
|
||||||
'click .close-chatbox-button': 'close',
|
'click .close-chatbox-button': 'close',
|
||||||
'click .show-user-details-modal': 'showUserDetailsModal',
|
|
||||||
'click .new-msgs-indicator': 'viewUnreadMessages',
|
'click .new-msgs-indicator': 'viewUnreadMessages',
|
||||||
'click .send-button': 'onFormSubmitted',
|
'click .send-button': 'onFormSubmitted',
|
||||||
|
'click .show-user-details-modal': 'showUserDetailsModal',
|
||||||
|
'click .spoiler-toggle': 'toggleSpoilerMessage',
|
||||||
'click .toggle-call': 'toggleCall',
|
'click .toggle-call': 'toggleCall',
|
||||||
'click .toggle-clear': 'clearMessages',
|
'click .toggle-clear': 'clearMessages',
|
||||||
'click .toggle-compose-spoiler': 'toggleComposeSpoilerMessage',
|
'click .toggle-compose-spoiler': 'toggleComposeSpoilerMessage',
|
||||||
'click .toggle-smiley ul.emoji-picker li': 'insertEmoji',
|
'click .toggle-smiley ul.emoji-picker li': 'insertEmoji',
|
||||||
'click .toggle-smiley': 'toggleEmojiMenu',
|
'click .toggle-smiley': 'toggleEmojiMenu',
|
||||||
'click .spoiler-toggle': 'toggleSpoilerMessage',
|
|
||||||
'click .upload-file': 'toggleFileUpload',
|
'click .upload-file': 'toggleFileUpload',
|
||||||
'keypress .chat-textarea': 'keyPressed',
|
'keypress .chat-textarea': 'keyPressed',
|
||||||
'input .chat-textarea': 'inputChanged'
|
'input .chat-textarea': 'inputChanged'
|
||||||
@ -413,6 +414,13 @@
|
|||||||
this.renderToolbar();
|
this.renderToolbar();
|
||||||
},
|
},
|
||||||
|
|
||||||
|
showControlBox () {
|
||||||
|
// Used in mobile view, to navigate back to the controlbox
|
||||||
|
const view = _converse.chatboxviews.get('controlbox');
|
||||||
|
view.show();
|
||||||
|
this.hide();
|
||||||
|
},
|
||||||
|
|
||||||
showUserDetailsModal (ev) {
|
showUserDetailsModal (ev) {
|
||||||
if (_.isUndefined(this.user_details_modal)) {
|
if (_.isUndefined(this.user_details_modal)) {
|
||||||
this.user_details_modal = new _converse.UserDetailsModal({model: this.model});
|
this.user_details_modal = new _converse.UserDetailsModal({model: this.model});
|
||||||
|
@ -492,14 +492,15 @@
|
|||||||
is_chatroom: true,
|
is_chatroom: true,
|
||||||
events: {
|
events: {
|
||||||
'change input.fileupload': 'onFileSelection',
|
'change input.fileupload': 'onFileSelection',
|
||||||
|
'click .chatbox-navback': 'showControlBox',
|
||||||
'click .close-chatbox-button': 'close',
|
'click .close-chatbox-button': 'close',
|
||||||
'click .configure-chatroom-button': 'getAndRenderConfigurationForm',
|
'click .configure-chatroom-button': 'getAndRenderConfigurationForm',
|
||||||
|
'click .hide-occupants': 'hideOccupants',
|
||||||
'click .new-msgs-indicator': 'viewUnreadMessages',
|
'click .new-msgs-indicator': 'viewUnreadMessages',
|
||||||
'click .occupant-nick': 'onOccupantClicked',
|
'click .occupant-nick': 'onOccupantClicked',
|
||||||
'click .send-button': 'onFormSubmitted',
|
'click .send-button': 'onFormSubmitted',
|
||||||
'click .toggle-call': 'toggleCall',
|
'click .toggle-call': 'toggleCall',
|
||||||
'click .toggle-occupants': 'toggleOccupants',
|
'click .toggle-occupants': 'toggleOccupants',
|
||||||
'click .hide-occupants': 'hideOccupants',
|
|
||||||
'click .toggle-smiley ul.emoji-picker li': 'insertEmoji',
|
'click .toggle-smiley ul.emoji-picker li': 'insertEmoji',
|
||||||
'click .toggle-smiley': 'toggleEmojiMenu',
|
'click .toggle-smiley': 'toggleEmojiMenu',
|
||||||
'click .upload-file': 'toggleFileUpload',
|
'click .upload-file': 'toggleFileUpload',
|
||||||
|
@ -1,5 +1,6 @@
|
|||||||
<div class="chat-head chat-head-chatbox row no-gutters">
|
<div class="chat-head chat-head-chatbox row no-gutters">
|
||||||
<div class="col">
|
<div class="chatbox-navback"><i class="fa fa-arrow-left"></i></div>
|
||||||
|
<div class="chatbox-title">
|
||||||
<div class="row no-gutters">
|
<div class="row no-gutters">
|
||||||
<canvas class="avatar" height="36" width="36"></canvas>
|
<canvas class="avatar" height="36" width="36"></canvas>
|
||||||
<div class="col chat-title" title="{{{o.jid}}}">
|
<div class="col chat-title" title="{{{o.jid}}}">
|
||||||
|
@ -1,3 +1,4 @@
|
|||||||
|
<div class="chatbox-navback"><i class="fa fa-arrow-left"></i></div>
|
||||||
<div class="chatbox-title">
|
<div class="chatbox-title">
|
||||||
<div class="chat-title" title="{{{o.jid}}}">
|
<div class="chat-title" title="{{{o.jid}}}">
|
||||||
{[ if (o.name && o.name !== o.Strophe.getNodeFromJid(o.jid)) { ]}
|
{[ if (o.name && o.name !== o.Strophe.getNodeFromJid(o.jid)) { ]}
|
||||||
|
Loading…
Reference in New Issue
Block a user