Skip to content

C
converse.js
Commit 8948be1d authored by JC Brand's avatar JC Brand
Browse files
Options

In mobile view, add arrows to chat headings 

so that you can navigate "back" to the controlbox.
parent b00567a0
Hide whitespace changes
Inline Side-by-side
Showing with 136 additions and 50 deletions
css/converse.css
View file @ 8948be1d
......@@ -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;
......
sass/_chatbox.scss
View file @ 8948be1d
#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);
}
}
}
}
}
sass/_chatrooms.scss
View file @ 8948be1d
......@@ -333,13 +333,21 @@
}
@include media-breakpoint-down(sm) {
.chatroom {
.box-flyout {
.chatbox-title {
@include make-col(8);
}
.chatbox-buttons {
@include make-col(4);
#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(7);
}
.chatbox-buttons {
@include make-col(3);
}
}
}
}
......
src/converse-chatview.js
View file @ 8948be1d
......@@ -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});
......
src/converse-muc-views.js
View file @ 8948be1d
......@@ -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',
......
src/templates/chatbox_head.html
View file @ 8948be1d
<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}}}">
......
src/templates/chatroom_head.html
View file @ 8948be1d
<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)) { ]}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7