Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
24
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

In mobile view, add arrows to chat headings

Browse Source 
so that you can navigate "back" to the controlbox.
This commit is contained in:
JC Brand 2018-06-01 14:57:19 +02:00
parent b00567a0ea
commit 8948be1d3d
7 changed files with 136 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
css/converse.css
View File

@ -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;

59
sass/_chatbox.scss
View File

@ -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);
}
}
}
}
}

22
sass/_chatrooms.scss
View File

@ -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);
}
}
}
}

12
src/converse-chatview.js
View File

@ -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});

3
src/converse-muc-views.js
View File

@ -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',

3
src/templates/chatbox_head.html
View File

@ -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
src/templates/chatroom_head.html
View File

@ -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)) { ]}