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

Replace col- classes with Sass mixins

Browse Source
This commit is contained in:
JC Brand 2018-03-09 10:12:05 +01:00
parent db44a4f44d
commit 914a55707d
14 changed files with 135 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
css/converse.css
View File

@ -4460,7 +4460,8 @@ body.reset {
font-family: "Helvetica", "Arial", sans-serif; font-family: "Helvetica", "Arial", sans-serif;
font-size: 14px; font-size: 14px;
position: fixed; position: fixed;
z-index: 1031; } z-index: 1031;
margin-left: -15px; }
#conversejs ::-webkit-input-placeholder { #conversejs ::-webkit-input-placeholder {
/* Chrome/Opera/Safari */ /* Chrome/Opera/Safari */
color: #A8ABA1; } color: #A8ABA1; }
@ -5348,19 +5349,43 @@ body.reset {
#conversejs:not(.fullscreen) .chat-head { #conversejs:not(.fullscreen) .chat-head {
border-top-left-radius: 0; border-top-left-radius: 0;
border-top-right-radius: 0; } } border-top-right-radius: 0; } }
#converse-embedded-chat .chatbox .chat-body .chat-message, #converse-embedded-chat .chatbox,
#conversejs:not(.fullscreen) .chatbox .chat-body .chat-message { #conversejs:not(.fullscreen) .chatbox {
padding: 0.3em; position: relative;
line-height: 20px; } width: 100%;
#converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-author, min-height: 1px;
#conversejs:not(.fullscreen) .chatbox .chat-body .chat-message .chat-msg-author { padding-right: 15px;
padding-left: 15px;
flex: 0 0 100%;
max-width: 100%; }
@media (min-width: 576px) {
#converse-embedded-chat .chatbox,
#conversejs:not(.fullscreen) .chatbox {
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%; } }
@media (min-width: 768px) {
#converse-embedded-chat .chatbox,
#conversejs:not(.fullscreen) .chatbox {
flex: 0 0 25%;
max-width: 25%; } }
@media (min-width: 992px) {
#converse-embedded-chat .chatbox,
#conversejs:not(.fullscreen) .chatbox {
flex: 0 0 16.6666666667%;
max-width: 16.6666666667%; } }
#converse-embedded-chat .chatbox .chat-body .chat-message,
#conversejs:not(.fullscreen) .chatbox .chat-body .chat-message {
padding: 0.3em;
line-height: 20px; } line-height: 20px; }
#converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-content, #converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-author,
#conversejs:not(.fullscreen) .chatbox .chat-body .chat-message .chat-msg-content { #conversejs:not(.fullscreen) .chatbox .chat-body .chat-message .chat-msg-author {
line-height: 20px; } line-height: 20px; }
#converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-content .emojione, #converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-content,
#conversejs:not(.fullscreen) .chatbox .chat-body .chat-message .chat-msg-content .emojione { #conversejs:not(.fullscreen) .chatbox .chat-body .chat-message .chat-msg-content {
margin-bottom: -5px; } line-height: 20px; }
#converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-content .emojione,
#conversejs:not(.fullscreen) .chatbox .chat-body .chat-message .chat-msg-content .emojione {
margin-bottom: -5px; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar,
#conversejs:not(.fullscreen) .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar { #conversejs:not(.fullscreen) .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar {
width: 100%; } width: 100%; }
@ -6173,6 +6198,22 @@ body.reset {
width: 100%; width: 100%;
border: 1px solid #999; } border: 1px solid #999; }
#conversejs .chatbox.chatroom {
flex: 0 0 100%;
max-width: 100%; }
@media (min-width: 576px) {
#conversejs .chatbox.chatroom {
flex: 0 0 66.6666666667%;
max-width: 66.6666666667%; } }
@media (min-width: 768px) {
#conversejs .chatbox.chatroom {
flex: 0 0 50%;
max-width: 50%; } }
@media (min-width: 992px) {
#conversejs .chatbox.chatroom {
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%; } }
#conversejs .chatbox.headlines .chat-head.chat-head-chatbox { #conversejs .chatbox.headlines .chat-head.chat-head-chatbox {
background-color: #E7A151; } background-color: #E7A151; }
#conversejs .chatbox.headlines .chat-body { #conversejs .chatbox.headlines .chat-body {
@ -6185,6 +6226,13 @@ body.reset {
border-radius: 4px; } border-radius: 4px; }
#conversejs:not(.fullscreen) #minimized-chats { #conversejs:not(.fullscreen) #minimized-chats {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
flex: 0 0 8.3333333333%;
max-width: 8.3333333333%;
margin-bottom: -1em; margin-bottom: -1em;
border-top-left-radius: 4px; border-top-left-radius: 4px;
border-top-right-radius: 4px; border-top-right-radius: 4px;

26
css/inverse.css
View File

@ -4460,7 +4460,8 @@ body.reset {
font-family: "Helvetica", "Arial", sans-serif; font-family: "Helvetica", "Arial", sans-serif;
font-size: 16px; font-size: 16px;
position: fixed; position: fixed;
z-index: 1031; } z-index: 1031;
margin-left: -15px; }
#conversejs ::-webkit-input-placeholder { #conversejs ::-webkit-input-placeholder {
/* Chrome/Opera/Safari */ /* Chrome/Opera/Safari */
color: #A8ABA1; } color: #A8ABA1; }
@ -5404,7 +5405,20 @@ body {
#conversejs.fullscreen .chatbox { #conversejs.fullscreen .chatbox {
width: 100%; width: 100%;
height: 100%; height: 100%;
margin: 0; } margin: 0;
position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px; }
@media (min-width: 768px) {
#conversejs.fullscreen .chatbox {
flex: 0 0 75%;
max-width: 75%; } }
@media (min-width: 1200px) {
#conversejs.fullscreen .chatbox {
flex: 0 0 75%;
max-width: 75%; } }
#conversejs.fullscreen .chatbox .box-flyout { #conversejs.fullscreen .chatbox .box-flyout {
background-color: #3AA569; background-color: #3AA569;
height: 100vh; height: 100vh;
@ -5770,6 +5784,14 @@ body {
display: block; } } display: block; } }
#conversejs.fullscreen #controlbox { #conversejs.fullscreen #controlbox {
margin: 0; } margin: 0; }
@media (min-width: 768px) {
#conversejs.fullscreen #controlbox {
flex: 0 0 25%;
max-width: 25%; } }
@media (min-width: 1200px) {
#conversejs.fullscreen #controlbox {
flex: 0 0 16.6666666667%;
max-width: 16.6666666667%; } }
#conversejs.fullscreen #controlbox .controlbox-pane { #conversejs.fullscreen #controlbox .controlbox-pane {
border-radius: 0; } border-radius: 0; }
#conversejs.fullscreen #controlbox .flyout { #conversejs.fullscreen #controlbox .flyout {

4
mockup/chatbox.html
View File

@ -12,7 +12,7 @@
<div id="conversejs" class="fullscreen"> <div id="conversejs" class="fullscreen">
<div class="sidebar"></div> <div class="sidebar"></div>
<div class="row no-gutters"> <div class="row no-gutters">
<div id="controlbox" class="chatbox col-xl-2 col-md-3"> <div id="controlbox" class="chatbox">
<div class="flyout box-flyout"> <div class="flyout box-flyout">
<div class="controlbox-panes"> <div class="controlbox-panes">
<div class="controlbox-pane"></div> <div class="controlbox-pane"></div>
@ -20,7 +20,7 @@
</div> </div>
</div> </div>
<div class="chatbox col-xl-10 col-md-9" id="chatbox-37c0c87392010303765fe36b05c0967d62c6b70f"> <div class="chatbox" id="chatbox-37c0c87392010303765fe36b05c0967d62c6b70f">
<div class="flyout box-flyout"> <div class="flyout box-flyout">
<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="col">

4
mockup/chatroom.html
View File

@ -12,7 +12,7 @@
<div id="conversejs" class="fullscreen"> <div id="conversejs" class="fullscreen">
<div class="sidebar"></div> <div class="sidebar"></div>
<div class="row no-gutters"> <div class="row no-gutters">
<div id="controlbox" class="chatbox col-xl-2 col-md-3"> <div id="controlbox" class="chatbox">
<div class="flyout box-flyout"> <div class="flyout box-flyout">
<div class="controlbox-panes"> <div class="controlbox-panes">
<div class="controlbox-pane"></div> <div class="controlbox-pane"></div>
@ -20,7 +20,7 @@
</div> </div>
</div> </div>
<div class="chatbox chatroom col-xl-10 col-md-9" id="chatbox-4a77380f1cd9d392627b0e1469688f9ca44e9392"> <div class="chatbox chatroom" id="chatbox-4a77380f1cd9d392627b0e1469688f9ca44e9392">
<div class="flyout box-flyout"> <div class="flyout box-flyout">
<div class="chat-head chat-head-chatroom row no-gutters"> <div class="chat-head chat-head-chatroom row no-gutters">
<div class="col"> <div class="col">

20
mockup/converse.html
View File

@ -15,7 +15,7 @@
<div id="conversejs"> <div id="conversejs">
<div class="row no-gutters"> <div class="row no-gutters">
<div id="controlbox" class="chatbox col col-lg-2 col-md-3 col-sm-4 col-sx-12 w-100"> <div id="controlbox" class="chatbox">
<div class="flyout box-flyout"> <div class="flyout box-flyout">
<div class="controlbox-panes"> <div class="controlbox-panes">
<div class="sidebar"></div> <div class="sidebar"></div>
@ -24,7 +24,7 @@
</div> </div>
</div> </div>
<div class="chatbox col col-lg-2 col-md-3 col-sm-4 col-sx-12 w-100" id="chatbox-37c0c87392010303765fe36b05c0967d62c6b70f"> <div class="chatbox" id="chatbox-37c0c87392010303765fe36b05c0967d62c6b70f">
<div class="flyout box-flyout"> <div class="flyout box-flyout">
<div class="chat-head chat-head-chatbox row no-gutters"> <div class="chat-head chat-head-chatbox row no-gutters">
@ -118,7 +118,7 @@
</div> </div>
</div> </div>
<div class="chatbox chatroom col col-lg-4 col-md-6 col-sm-8 col-xs-12 w-100" id="chatbox-4a77380f1cd9d392627b0e1469688f9ca44e9392"> <div class="chatbox chatroom" id="chatbox-4a77380f1cd9d392627b0e1469688f9ca44e9392">
<div class="flyout box-flyout"> <div class="flyout box-flyout">
<div class="chat-head chat-head-chatroom row no-gutters"> <div class="chat-head chat-head-chatroom row no-gutters">
<div class="col-sm-8 col-lg-10"> <div class="col-sm-8 col-lg-10">
@ -217,7 +217,7 @@
</div> </div>
</div> </div>
<div id="minimized-chats" class="col col-1 w-100"> <div id="minimized-chats">
<div class="flyout minimized-chats-flyout row"> <div class="flyout minimized-chats-flyout row">
<a id="toggle-minimized-chats" href="#" class="row no-gutters"> <a id="toggle-minimized-chats" href="#" class="row no-gutters">
<span class="badge badge-light">322</span> Minimized <span class="badge badge-light">322</span> Minimized
@ -227,33 +227,33 @@
<span class="badge badge-light">42</span> <span class="badge badge-light">42</span>
Restricted Chatroom Restricted Chatroom
</a> </a>
<a class="chatbox-btn close-chatbox-button fa fa-times col col-1"></a> <a class="chatbox-btn close-chatbox-button fa fa-times"></a>
</div> </div>
<div class="chat-head chat-head-chatbox row no-gutters"> <div class="chat-head chat-head-chatbox row no-gutters">
<a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat"> <a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">
<span class="badge badge-light">4</span> <span class="badge badge-light">4</span>
JC Brand JC Brand
</a> </a>
<a class="chatbox-btn close-chatbox-button fa fa-times col col-1"></a> <a class="chatbox-btn close-chatbox-button fa fa-times"></a>
</div> </div>
<div class="chat-head chat-head-chatroom row no-gutters"> <div class="chat-head chat-head-chatroom row no-gutters">
<a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">My Chatroom</a> <a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">My Chatroom</a>
<a class="chatbox-btn close-chatbox-button fa fa-times col col-1"></a> <a class="chatbox-btn close-chatbox-button fa fa-times"></a>
</div> </div>
<div class="chat-head chat-head-chatbox row no-gutters"> <div class="chat-head chat-head-chatbox row no-gutters">
<a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">Annegreet Gomez</a> <a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">Annegreet Gomez</a>
<a class="chatbox-btn close-chatbox-button fa fa-times col col-1"></a> <a class="chatbox-btn close-chatbox-button fa fa-times"></a>
</div> </div>
<div class="chat-head chat-head-chatbox row no-gutters"> <div class="chat-head chat-head-chatbox row no-gutters">
<a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat"> <a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">
<span class="badge badge-light">842</span> <span class="badge badge-light">842</span>
Asmaa Haakman Asmaa Haakman
</a> </a>
<a class="chatbox-btn close-chatbox-button fa fa-times col col-1"></a> <a class="chatbox-btn close-chatbox-button fa fa-times"></a>
</div> </div>
<div class="chat-head chat-head-chatbox row no-gutters"> <div class="chat-head chat-head-chatbox row no-gutters">
<a href="#" class="restore-chat w-100 align-self-center">Lena Grunewald</a> <a href="#" class="restore-chat w-100 align-self-center">Lena Grunewald</a>
<a class="chatbox-btn close-chatbox-button fa fa-times col col-1"></a> <a class="chatbox-btn close-chatbox-button fa fa-times"></a>
</div> </div>
</div> </div>
</div> </div>

2
sass/_core.scss
View File

@ -53,6 +53,8 @@ body.reset {
position: fixed; position: fixed;
z-index: 1031; // One more than bootstrap navbar z-index: 1031; // One more than bootstrap navbar
margin-left: -15px; // XXX: why is this necessary?
::-webkit-input-placeholder { /* Chrome/Opera/Safari */ ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: $subdued-color; color: $subdued-color;
} }

14
sass/converse/_chatbox.scss
View File

@ -13,6 +13,20 @@
} }
} }
.chatbox { .chatbox {
@include make-col-ready();
@include media-breakpoint-up(xs) {
@include make-col(12);
}
@include media-breakpoint-up(sm) {
@include make-col(4);
}
@include media-breakpoint-up(md) {
@include make-col(3);
}
@include media-breakpoint-up(lg) {
@include make-col(2);
}
.chat-body { .chat-body {
.chat-message { .chat-message {
padding: 0.3em; padding: 0.3em;

3
sass/converse/_minimized_chats.scss
View File

@ -1,5 +1,8 @@
#conversejs:not(.fullscreen) { #conversejs:not(.fullscreen) {
#minimized-chats { #minimized-chats {
@include make-col-ready();
@include make-col(1);
margin-bottom: -2*$chat-gutter; margin-bottom: -2*$chat-gutter;
border-top-left-radius: $chatbox-border-radius; border-top-left-radius: $chatbox-border-radius;
border-top-right-radius: $chatbox-border-radius; border-top-right-radius: $chatbox-border-radius;

1
sass/converse/converse.scss
View File

@ -48,6 +48,7 @@
@import "../roomslist"; @import "../roomslist";
@import "../roster"; @import "../roster";
@import "../chatrooms"; @import "../chatrooms";
@import "chatrooms";
@import "../headline"; @import "../headline";
@import "minimized_chats"; @import "minimized_chats";
@import "../bookmarks"; @import "../bookmarks";

9
sass/inverse/_chatbox.scss
View File

@ -27,6 +27,15 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
margin: 0; margin: 0;
@include make-col-ready();
@include media-breakpoint-up(md) {
@include make-col(9);
}
@include media-breakpoint-up(xl) {
@include make-col(9);
}
.box-flyout { .box-flyout {
background-color: $chat-head-color; background-color: $chat-head-color;
height: 100vh; height: 100vh;

1
sass/inverse/_chatrooms.scss
View File

@ -11,7 +11,6 @@
} }
.chatroom { .chatroom {
.box-flyout { .box-flyout {
background-color: $chatroom-head-color; background-color: $chatroom-head-color;
border: $flyout-padding solid $chatroom-head-color; border: $flyout-padding solid $chatroom-head-color;

7
sass/inverse/_controlbox.scss
View File

@ -1,5 +1,12 @@
#conversejs.fullscreen { #conversejs.fullscreen {
#controlbox { #controlbox {
@include media-breakpoint-up(md) {
@include make-col(3);
}
@include media-breakpoint-up(xl) {
@include make-col(2);
}
margin: 0; margin: 0;
.controlbox-pane { .controlbox-pane {

15
src/converse-chatview.js
View File

@ -305,7 +305,6 @@
}, },
render () { render () {
this.setClasses();
this.el.setAttribute('id', this.model.get('box_id')); this.el.setAttribute('id', this.model.get('box_id'));
this.el.innerHTML = tpl_chatbox( this.el.innerHTML = tpl_chatbox(
_.extend(this.model.toJSON(), { _.extend(this.model.toJSON(), {
@ -318,20 +317,6 @@
return this; return this;
}, },
setClasses () {
if (_converse.view_mode === 'fullscreen') {
this.el.classList.add('col-xl-10');
this.el.classList.add('col-md-9');
} else {
this.el.classList.add('col');
this.el.classList.add('col-lg-2');
this.el.classList.add('col-md-3');
this.el.classList.add('col-sm-4');
this.el.classList.add('col-sx-12');
this.el.classList.add('w-100');
}
},
renderToolbar (toolbar, options) { renderToolbar (toolbar, options) {
if (!_converse.show_toolbar) { if (!_converse.show_toolbar) {
return this; return this;

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

@ -436,7 +436,6 @@
}, },
render () { render () {
this.setClasses();
this.el.setAttribute('id', this.model.get('box_id')); this.el.setAttribute('id', this.model.get('box_id'));
this.el.innerHTML = tpl_chatroom(); this.el.innerHTML = tpl_chatroom();
this.renderHeading(); this.renderHeading();
@ -447,20 +446,6 @@
return this; return this;
}, },
setClasses () {
if (_converse.view_mode === 'fullscreen') {
this.el.classList.add('col-xl-10');
this.el.classList.add('col-md-9');
} else {
this.el.classList.add('col');
this.el.classList.add('col-lg-4');
this.el.classList.add('col-md-6');
this.el.classList.add('col-sm-8');
this.el.classList.add('col-sx-12');
this.el.classList.add('w-100');
}
},
renderHeading () { renderHeading () {
/* Render the heading UI of the chat room. */ /* Render the heading UI of the chat room. */
this.el.querySelector('.chat-head-chatroom').innerHTML = this.generateHeadingHTML(); this.el.querySelector('.chat-head-chatroom').innerHTML = this.generateHeadingHTML();