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 {
|
||||
font-weight: bold; }
|
||||
|
||||
#conversejs .chatbox-navback {
|
||||
display: none; }
|
||||
#conversejs .flyout {
|
||||
border-radius: 4px;
|
||||
position: absolute; }
|
||||
@ -7325,15 +7327,10 @@ body.reset {
|
||||
height: 36px;
|
||||
width: 36px;
|
||||
margin-right: 0.5em; }
|
||||
#conversejs .chat-head .chatbox-title .chatroom-description {
|
||||
font-size: 80%; }
|
||||
#conversejs .chat-head .chatbox-buttons {
|
||||
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; }
|
||||
#conversejs .chat-head .user-custom-message {
|
||||
color: white;
|
||||
@ -7630,6 +7627,14 @@ body.reset {
|
||||
#conversejs.converse-overlayed .chat-head {
|
||||
border-top-left-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-overlayed .chatbox {
|
||||
min-width: 250px !important;
|
||||
@ -7690,13 +7695,16 @@ body.reset {
|
||||
height: 62px;
|
||||
font-size: 20px;
|
||||
padding: 0; }
|
||||
#conversejs.converse-fullscreen .chat-head .chatbox-buttons {
|
||||
flex: 0 0 25%;
|
||||
max-width: 25%; }
|
||||
#conversejs.converse-fullscreen .chat-head .user-custom-message {
|
||||
font-size: 50%;
|
||||
height: auto;
|
||||
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 {
|
||||
max-height: 400px; }
|
||||
#conversejs.converse-fullscreen .emoji-picker {
|
||||
@ -7752,23 +7760,43 @@ body.reset {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px; }
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
@media (max-width: 767.98px) {
|
||||
#conversejs:not(.converse-embedded) > .row {
|
||||
flex-direction: row-reverse; }
|
||||
#conversejs:not(.converse-embedded) #converse-login-panel .converse-form {
|
||||
padding: 3em 2em 3em; }
|
||||
#conversejs:not(.converse-embedded) .sidebar {
|
||||
display: block; }
|
||||
#conversejs:not(.converse-embedded) .chatbox {
|
||||
width: calc(100% - 50px); }
|
||||
#conversejs:not(.converse-embedded) .chatbox .row .box-flyout {
|
||||
left: 50px;
|
||||
bottom: 0;
|
||||
height: 100vh;
|
||||
box-shadow: none; } }
|
||||
@media screen and (max-width: 767px) {
|
||||
#conversejs:not(.converse-embedded).converse-fullscreen .chatbox {
|
||||
width: calc(100% - 50px); } }
|
||||
box-shadow: none; }
|
||||
|
||||
#conversejs.converse-mobile .chatbox .box-flyout .chatbox-navback,
|
||||
#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 {
|
||||
color: #3AA569; }
|
||||
#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%; }
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.chatroom .box-flyout .chatbox-title {
|
||||
flex: 0 0 66.6666666667%;
|
||||
max-width: 66.6666666667%; }
|
||||
.chatroom .box-flyout .chatbox-buttons {
|
||||
flex: 0 0 33.3333333333%;
|
||||
max-width: 33.3333333333%; } }
|
||||
#conversejs.converse-mobile .chatroom .box-flyout .chatbox-navback,
|
||||
#conversejs.converse-overlayed .chatroom .box-flyout .chatbox-navback,
|
||||
#conversejs.converse-embedded .chatroom .box-flyout .chatbox-navback,
|
||||
#conversejs.converse-fullscreen .chatroom .box-flyout .chatbox-navback {
|
||||
flex: 0 0 16.6666666667%;
|
||||
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-mobile .chatroom .box-flyout {
|
||||
background-color: #E77051;
|
||||
|
@ -1,4 +1,7 @@
|
||||
#conversejs {
|
||||
.chatbox-navback {
|
||||
display: none;
|
||||
}
|
||||
.flyout {
|
||||
border-radius: $chatbox-border-radius;
|
||||
position: absolute;
|
||||
@ -51,10 +54,13 @@
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
.chatbox-title {
|
||||
.chatroom-description {
|
||||
font-size: 80%;
|
||||
}
|
||||
}
|
||||
.chatbox-buttons {
|
||||
flex-direction: row-reverse;
|
||||
@include make-col-ready();
|
||||
@include make-col(4);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@ -443,7 +449,14 @@
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
.chatbox-title {
|
||||
@include make-col(8);
|
||||
}
|
||||
.chatbox-buttons {
|
||||
@include make-col(4);
|
||||
}
|
||||
}
|
||||
|
||||
.chatbox {
|
||||
min-width: $overlayed-chat-width!important;
|
||||
width: $overlayed-chat-width;
|
||||
@ -536,9 +549,6 @@
|
||||
}
|
||||
.chat-head {
|
||||
height: $fullpage-chat-head-height;
|
||||
.chatbox-buttons {
|
||||
@include make-col(3);
|
||||
}
|
||||
font-size: $font-size-huge;
|
||||
padding: 0;
|
||||
.user-custom-message {
|
||||
@ -546,6 +556,12 @@
|
||||
height: auto;
|
||||
line-height: $line-height;
|
||||
}
|
||||
.chatbox-title {
|
||||
@include make-col(10);
|
||||
}
|
||||
.chatbox-buttons {
|
||||
@include make-col(2);
|
||||
}
|
||||
}
|
||||
.chat-textarea {
|
||||
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) {
|
||||
> .row {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
#converse-login-panel {
|
||||
.converse-form {
|
||||
padding: 3em 2em 3em;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.chatbox {
|
||||
width: calc(100% - 50px);
|
||||
.row {
|
||||
@ -651,12 +661,29 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
#conversejs:not(.converse-embedded).converse-fullscreen {
|
||||
#conversejs.converse-mobile,
|
||||
#conversejs.converse-overlayed,
|
||||
#conversejs.converse-embedded,
|
||||
#conversejs.converse-fullscreen {
|
||||
.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) {
|
||||
#conversejs.converse-mobile,
|
||||
#conversejs.converse-overlayed,
|
||||
#conversejs.converse-embedded,
|
||||
#conversejs.converse-fullscreen {
|
||||
.chatroom {
|
||||
.box-flyout {
|
||||
.chatbox-navback {
|
||||
@include make-col(2);
|
||||
}
|
||||
.chatbox-title {
|
||||
@include make-col(8);
|
||||
@include make-col(7);
|
||||
}
|
||||
.chatbox-buttons {
|
||||
@include make-col(4);
|
||||
@include make-col(3);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -321,16 +321,17 @@
|
||||
|
||||
events: {
|
||||
'change input.fileupload': 'onFileSelection',
|
||||
'click .chatbox-navback': 'showControlBox',
|
||||
'click .close-chatbox-button': 'close',
|
||||
'click .show-user-details-modal': 'showUserDetailsModal',
|
||||
'click .new-msgs-indicator': 'viewUnreadMessages',
|
||||
'click .send-button': 'onFormSubmitted',
|
||||
'click .show-user-details-modal': 'showUserDetailsModal',
|
||||
'click .spoiler-toggle': 'toggleSpoilerMessage',
|
||||
'click .toggle-call': 'toggleCall',
|
||||
'click .toggle-clear': 'clearMessages',
|
||||
'click .toggle-compose-spoiler': 'toggleComposeSpoilerMessage',
|
||||
'click .toggle-smiley ul.emoji-picker li': 'insertEmoji',
|
||||
'click .toggle-smiley': 'toggleEmojiMenu',
|
||||
'click .spoiler-toggle': 'toggleSpoilerMessage',
|
||||
'click .upload-file': 'toggleFileUpload',
|
||||
'keypress .chat-textarea': 'keyPressed',
|
||||
'input .chat-textarea': 'inputChanged'
|
||||
@ -413,6 +414,13 @@
|
||||
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) {
|
||||
if (_.isUndefined(this.user_details_modal)) {
|
||||
this.user_details_modal = new _converse.UserDetailsModal({model: this.model});
|
||||
|
@ -492,14 +492,15 @@
|
||||
is_chatroom: true,
|
||||
events: {
|
||||
'change input.fileupload': 'onFileSelection',
|
||||
'click .chatbox-navback': 'showControlBox',
|
||||
'click .close-chatbox-button': 'close',
|
||||
'click .configure-chatroom-button': 'getAndRenderConfigurationForm',
|
||||
'click .hide-occupants': 'hideOccupants',
|
||||
'click .new-msgs-indicator': 'viewUnreadMessages',
|
||||
'click .occupant-nick': 'onOccupantClicked',
|
||||
'click .send-button': 'onFormSubmitted',
|
||||
'click .toggle-call': 'toggleCall',
|
||||
'click .toggle-occupants': 'toggleOccupants',
|
||||
'click .hide-occupants': 'hideOccupants',
|
||||
'click .toggle-smiley ul.emoji-picker li': 'insertEmoji',
|
||||
'click .toggle-smiley': 'toggleEmojiMenu',
|
||||
'click .upload-file': 'toggleFileUpload',
|
||||
|
@ -1,5 +1,6 @@
|
||||
<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">
|
||||
<canvas class="avatar" height="36" width="36"></canvas>
|
||||
<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="chat-title" title="{{{o.jid}}}">
|
||||
{[ if (o.name && o.name !== o.Strophe.getNodeFromJid(o.jid)) { ]}
|
||||
|
Loading…
Reference in New Issue
Block a user