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

Update padding of controlbox elements

Browse Source 
Instead of padding the container, pad individual elements that need it.
This enables us to have highlighting (e.g. on hover) that spans the full
width of the controlbox.

updates #1069
This commit is contained in:
JC Brand 2018-05-18 12:03:03 +02:00
parent 6e2249e99e
commit e82112715d
22 changed files with 197 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
css/converse.css
View File

@ -6858,18 +6858,22 @@ body.reset {
font-size: 60%; }
#conversejs {
bottom: 0;
height: 100%;
position: fixed;
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
color: #666;
font-family: "Helvetica", "Arial", sans-serif;
font-size: 14px;
direction: ltr;
display: block;
z-index: 1031; }
#conversejs .brand-heading {
font-family: "Century Gothic", futura, "URW Gothic L", Verdana, sans-serif; }
#conversejs .brand-heading .icon-conversejs {
font-size: 80%; }
#conversejs .popover {
position: fixed; }
#conversejs .converse-chatboxes {
z-index: 1031;
position: fixed;
@ -7203,7 +7207,7 @@ body.reset {
#conversejs form .form-group {
margin-bottom: 2em; }
#conversejs form .form-check-label {
margin-top: 0.1rem; }
margin-top: 0.3rem; }
#conversejs form .form-control::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
color: #A8ABA1; }
@ -7276,9 +7280,6 @@ body.reset {
#conversejs form.converse-centered-form {
text-align: center; }
#conversejs.fullscreen form .form-check-label {
margin-top: 0.3rem; }
#conversejs #user-profile-modal label {
font-weight: bold; }
@ -7868,13 +7869,16 @@ body.reset {
overflow-y: auto;
background-color: white; }
#conversejs #controlbox .controlbox-pane {
padding: 1em;
background-color: white;
border: 0;
font-size: 14px;
left: 0;
text-align: left;
overflow-x: hidden; }
overflow-x: hidden;
padding: 1em 0 1em 0; }
#conversejs #controlbox .controlbox-pane .controlbox-padded {
padding-left: 1em;
padding-right: 1em; }
#conversejs #controlbox .controlbox-pane .add-converse-contact {
margin: 0 0 0.75em 0; }
#conversejs #controlbox .controlbox-pane .chatbox-btn {
@ -7939,21 +7943,21 @@ body.reset {
display: none; }
#conversejs:not(.converse-embedded) .converse-chatboxes.sidebar-open #controlbox .controlbox-pane {
display: block; } }
#conversejs:not(.fullscreen) #controlbox {
#conversejs:not(.converse-fullscreen) #controlbox {
order: -1;
min-width: 250px !important;
width: 250px; }
#conversejs:not(.fullscreen) #controlbox .box-flyout {
#conversejs:not(.converse-fullscreen) #controlbox .box-flyout {
min-width: 250px !important;
width: 250px; }
#conversejs:not(.fullscreen) #controlbox:not(.logged-out) .controlbox-head {
#conversejs:not(.converse-fullscreen) #controlbox:not(.logged-out) .controlbox-head {
height: 15px; }
#conversejs:not(.fullscreen) #controlbox .controlbox-head {
#conversejs:not(.converse-fullscreen) #controlbox .controlbox-head {
display: flex;
flex-direction: row-reverse;
flex-wrap: nowrap;
justify-content: space-between; }
#conversejs:not(.fullscreen) #controlbox .controlbox-head .brand-heading {
#conversejs:not(.converse-fullscreen) #controlbox .controlbox-head .brand-heading {
position: relative;
width: 100%;
min-height: 1px;
@ -7963,16 +7967,16 @@ body.reset {
max-width: 66.6666666667%;
color: #666;
font-size: 2em; }
#conversejs:not(.fullscreen) #controlbox .controlbox-head .chatbox-btn {
#conversejs:not(.converse-fullscreen) #controlbox .controlbox-head .chatbox-btn {
color: #578EA9;
margin: 0; }
#conversejs:not(.fullscreen) #controlbox #converse-register, #conversejs:not(.fullscreen) #controlbox #converse-login {
#conversejs:not(.converse-fullscreen) #controlbox #converse-register, #conversejs:not(.converse-fullscreen) #controlbox #converse-login {
flex: 0 0 100%;
max-width: 100%;
padding-bottom: 0; }
#conversejs:not(.fullscreen) #controlbox #converse-register .button-cancel {
#conversejs:not(.converse-fullscreen) #controlbox #converse-register .button-cancel {
font-size: 90%; }
#conversejs:not(.fullscreen) #controlbox .controlbox-panes {
#conversejs:not(.converse-fullscreen) #controlbox .controlbox-panes {
border-radius: 4px; }
#conversejs .list-container {
@ -8107,7 +8111,8 @@ body.reset {
color: #666;
display: block;
width: 100%;
padding: 0 0 0.3rem 0; }
padding-top: 0;
padding-bottom: 0.3rem; }
#conversejs #converse-roster .roster-contacts .roster-group .group-toggle:hover {
color: #585B51; }
#conversejs #converse-roster .roster-contacts .roster-group li {

57
css/inverse.css
View File

@ -6858,18 +6858,22 @@ body.reset {
font-size: 60%; }
#conversejs {
bottom: 0;
height: 100%;
position: fixed;
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
color: #666;
font-family: "Helvetica", "Arial", sans-serif;
font-size: 16px;
direction: ltr;
display: block;
z-index: 1031; }
#conversejs .brand-heading {
font-family: "Century Gothic", futura, "URW Gothic L", Verdana, sans-serif; }
#conversejs .brand-heading .icon-conversejs {
font-size: 80%; }
#conversejs .popover {
position: fixed; }
#conversejs .converse-chatboxes {
z-index: 1031;
position: fixed;
@ -7245,7 +7249,7 @@ body {
#conversejs form .form-group {
margin-bottom: 2em; }
#conversejs form .form-check-label {
margin-top: 0.1rem; }
margin-top: 0.3rem; }
#conversejs form .form-control::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
color: #A8ABA1; }
@ -7318,9 +7322,6 @@ body {
#conversejs form.converse-centered-form {
text-align: center; }
#conversejs.fullscreen form .form-check-label {
margin-top: 0.3rem; }
#conversejs #user-profile-modal label {
font-weight: bold; }
@ -7929,13 +7930,16 @@ body {
overflow-y: auto;
background-color: white; }
#conversejs #controlbox .controlbox-pane {
padding: 1.2em;
background-color: white;
border: 0;
font-size: 16px;
left: 0;
text-align: left;
overflow-x: hidden; }
overflow-x: hidden;
padding: 1em 0 1em 0; }
#conversejs #controlbox .controlbox-pane .controlbox-padded {
padding-left: 1em;
padding-right: 1em; }
#conversejs #controlbox .controlbox-pane .add-converse-contact {
margin: 0 0 0.75em 0; }
#conversejs #controlbox .controlbox-pane .chatbox-btn {
@ -8000,6 +8004,42 @@ body {
display: none; }
#conversejs:not(.converse-embedded) .converse-chatboxes.sidebar-open #controlbox .controlbox-pane {
display: block; } }
#conversejs:not(.converse-fullscreen) #controlbox {
order: -1;
min-width: 250px !important;
width: 250px; }
#conversejs:not(.converse-fullscreen) #controlbox .box-flyout {
min-width: 250px !important;
width: 250px; }
#conversejs:not(.converse-fullscreen) #controlbox:not(.logged-out) .controlbox-head {
height: 15px; }
#conversejs:not(.converse-fullscreen) #controlbox .controlbox-head {
display: flex;
flex-direction: row-reverse;
flex-wrap: nowrap;
justify-content: space-between; }
#conversejs:not(.converse-fullscreen) #controlbox .controlbox-head .brand-heading {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
flex: 0 0 66.6666666667%;
max-width: 66.6666666667%;
color: #666;
font-size: 2em; }
#conversejs:not(.converse-fullscreen) #controlbox .controlbox-head .chatbox-btn {
color: #578EA9;
margin: 0; }
#conversejs:not(.converse-fullscreen) #controlbox #converse-register, #conversejs:not(.converse-fullscreen) #controlbox #converse-login {
flex: 0 0 100%;
max-width: 100%;
padding-bottom: 0; }
#conversejs:not(.converse-fullscreen) #controlbox #converse-register .button-cancel {
font-size: 90%; }
#conversejs:not(.converse-fullscreen) #controlbox .controlbox-panes {
border-radius: 4px; }
#conversejs.fullscreen #controlbox {
position: relative;
width: 100%;
@ -8149,7 +8189,8 @@ body {
color: #666;
display: block;
width: 100%;
padding: 0 0 0.3rem 0; }
padding-top: 0;
padding-bottom: 0.3rem; }
#conversejs #converse-roster .roster-contacts .roster-group .group-toggle:hover {
color: #585B51; }
#conversejs #converse-roster .roster-contacts .roster-group li {

28
mockup/overlayed-login.html
View File

@ -9,22 +9,27 @@
<link type="text/css" rel="stylesheet" media="screen" href="css/mockup.css" />
</head>
<body style="background-color: #578EA9">
<body class="reset">
<div class="converse-bg container">
<h1 class="brand-heading">Converse</h1>
</div>
<div id="conversejs" class="converse-overlayed">
<div class="converse-chatboxes row no-gutters">
<div id="controlbox" class="chatbox">
<div id="controlbox" class="chatbox logged-out">
<div class="flyout box-flyout">
<div class="chat-head controlbox-head">
<div class="brand-heading"><i class="icon-conversejs"></i><span class="brand-name">converse</span></div>
<a class="chatbox-btn close-chatbox-button fa fa-close"></a>
<span class="brand-heading-container">
<div class="brand-heading">
<a href="https://conversejs.org" target="_blank" rel="noopener">
<i class="icon-conversejs"></i><span class="brand-name">converse</span>
</a>
</div>
</span>
</div>
<div class="controlbox-panes">
<div id="login-dialog" class="controlbox-pane row">
<form id="converse-login" class="pure-form converse-form">
<div id="converse-login-panel" class="controlbox-pane fade-in row no-gutters">
<form id="converse-login" class="converse-form">
<div class="form-group">
<label for="jid">XMPP Username:</label>
<input type="text" name="jid" class="form-control" placeholder="user@server" autocomplete="off">
@ -33,9 +38,14 @@
<label for="password">Password:</label>
<input type="password" name="password" class="form-control" placeholder="password" autocomplete="off">
</div>
<p></p>
<p><input class="btn btn-primary" type="submit" value="Log In"></p>
<p>Click <a href="#" data-toggle="modal" data-target="#registerModal">here</a> to register.</p>
<div class="form-group form-check">
<input id="converse-login-trusted" class="form-check-input" type="checkbox" name="trusted" checked="">
<label class="form-check-label" for="converse-login-trusted">This is a trusted device</label>
</div>
<fieldset class="buttons">
<input class="btn btn-primary" type="submit" value="Log in">
<p>Click <a href="#" data-toggle="modal" data-target="#registerModal">here</a> to register.</p>
</fieldset>
</form>
</div>
</div>

64
mockup/user-panel.html
View File

@ -1,5 +1,5 @@
<!-- <div id="users" class="controlbox-pane"> -->
<div class="userinfo">
<div class="controlbox-padded userinfo">
<div class="profile d-flex">
<canvas data-avatar="/mockup/images/romeo.jpg" height="40px" width="40px" class="avatar align-self-center"></canvas>
<span class="username w-100 align-self-center">Romeo Montague</span>
@ -15,15 +15,15 @@
</div>
<div id="headlines" class="controlbox-section">
<div class="d-flex">
<div class="d-flex controlbox-padded">
<span class="w-100 controlbox-heading">Announcements</span>
</div>
<div class="list-container">
<div class="items-list">
<div class="list-item open-headline d-flex flex-row">
<div class="controlbox-padded list-item open-headline d-flex flex-row">
<a class="w-100" data-jid="montague.lit" title="Click to show" href="chatroom.html">Montague.lit</a>
</div>
<div class="list-item open-headline d-flex flex-row">
<div class="controlbox-padded list-item open-headline d-flex flex-row">
<a class="w-100" data-jid="montague.lit" title="Click to show" href="chatroom.html">Capulet.lit</a>
</div>
</div>
@ -31,13 +31,13 @@
</div>
<div id="chatrooms" class="controlbox-section">
<div class="d-flex">
<div class="d-flex controlbox-padded">
<span class="w-100 controlbox-heading">Group Chats</span>
<a class="chatbox-btn fa fa-users" title="Click to add a new room" data-toggle="modal" data-target="#chatroomsModal"></a>
</div>
<div class="list-container rooms-list-container">
<div class="rooms-list items-list">
<div class="list-item available-chatroom d-flex flex-row">
<div class="controlbox-padded list-item available-chatroom d-flex flex-row">
<a class="open-room available-room w-100" data-room-jid="public@conference.test.com" title="Click to open this room" href="chatroom.html">Capulet's orchard</a>
<!-- <span class="badge badge-info msgs-indicator">1</span> -->
<a href="#"
@ -46,7 +46,7 @@
&nbsp;</a>
<a href="#" class="fa fa-bookmark" title="Click to bookmark this room">&nbsp;</a>
</div>
<div class="list-item available-chatroom d-flex flex-row">
<div class="controlbox-padded list-item available-chatroom d-flex flex-row">
<a class="open-room available-room w-100" data-room-jid="team@conference.test.com" title="Click to open this room" href="chatroom.html">Juliet's Balcony</a>
<a href="#"
class="room-info fa fa-info-circle" data-container="body" data-toggle="popover" title="Room info"
@ -59,10 +59,12 @@
</div>
<div id="bookmarks" class="controlbox-section">
<div class="d-flex"><span class="w-100 controlbox-heading">Bookmarks</span></div>
<div class="d-flex controlbox-padded">
<span class="w-100 controlbox-heading">Bookmarks</span>
</div>
<div class="list-container rooms-list-container">
<div class="rooms-list items-list">
<div class="list-item available-chatroom d-flex flex-row">
<div class="controlbox-padded list-item available-chatroom d-flex flex-row">
<a class="open-room available-room w-100" data-room-jid="public@conference.test.com" title="Click to open this room" href="chatroom.html">Capulet's orchard</a>
<!-- <span class="badge badge-info msgs-indicator">1</span> -->
<a href="#"
@ -71,7 +73,7 @@
&nbsp;</a>
<a href="#" class="fa fa-bookmark" title="Click to bookmark this room">&nbsp;</a>
</div>
<div class="list-item available-chatroom d-flex flex-row">
<div class="controlbox-padded list-item available-chatroom d-flex flex-row">
<a class="open-room available-room w-100" data-room-jid="team@conference.test.com" title="Click to open this room" href="chatroom.html">Juliet's Balcony</a>
<a href="#"
class="room-info fa fa-info-circle" data-container="body" data-toggle="popover" title="Room info"
@ -84,11 +86,11 @@
</div>
<div id="converse-roster" class="controlbox-section">
<div class="d-flex">
<div class="d-flex controlbox-padded">
<span class="w-100 controlbox-heading">Contacts</span>
<a class="chatbox-btn fa fa-user-plus" title="Click to add new chat contacts" data-toggle="modal" data-target="#addContactModal"></a>
</div>
<form class="roster-filter-form input-button-group">
<form class="controlbox-padded roster-filter-form input-button-group">
<div class="form-inline flex-nowrap">
<div class="btn-group">
<input value="" class="roster-filter form-control" placeholder="Filter">
@ -104,15 +106,15 @@
<div class="roster-contacts">
<div class="roster-group" id="xmpp-contact-requests">
<a href="#" class="group-toggle" title="Click to hide these contacts">
<a href="#" class="group-toggle controlbox-padded " title="Click to hide these contacts">
<span class="fa fa-caret-down"></span> Contact Requests</a>
<ul class="roster-group-contacts">
<li class="offline requesting-xmpp-contact d-flex">
<li class=" controlbox-padded offline requesting-xmpp-contact d-flex">
<span class="req-contact-name w-100">The Nurse</span>
<a class="accept-xmpp-request fa fa-check" title="Click here to accept this contact's request" href="#"></a>
<a class="decline-xmpp-request fa fa-times" title="Click here to decline this contact's request" href="#"></a>
</li>
<li class="offline requesting-xmpp-contact d-flex">
<li class=" controlbox-padded offline requesting-xmpp-contact d-flex">
<span class="req-contact-name w-100">Friar Laurence</span>
<a class="accept-xmpp-request fa fa-check" title="Click here to accept this contact's request" href="#"></a>
<a class="decline-xmpp-request fa fa-times" title="Click here to decline this contact's request" href="#"></a>
@ -121,15 +123,15 @@
</div>
<div class="roster-group" data-group="Colleagues">
<a href="#" data-group="Colleagues" class="group-toggle" title="Click to hide these contacts">
<a href="#" data-group="Colleagues" class="group-toggle controlbox-padded " title="Click to hide these contacts">
<span class="fa fa-caret-down"></span> Colleagues</a>
<ul>
<li class="away current-xmpp-contact d-flex">
<li class=" controlbox-padded away current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
<span class="fa fa-circle-o" title="this contact is away"></span> Balthasar</a>
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li>
<li class="dnd current-xmpp-contact d-flex">
<li class=" controlbox-padded dnd current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
<span class="fa fa-minus-circle" title="This contact is busy"></span> Escalus, Prince of Verona</a>
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
@ -138,20 +140,20 @@
</div>
<div class="roster-group" data-group="Family">
<a href="#" data-group="Family" class="group-toggle" title="Click to hide these contacts">
<a href="#" data-group="Family" class="group-toggle controlbox-padded " title="Click to hide these contacts">
<span class="fa fa-caret-down"></span> Family</a>
<ul>
<li class="online current-xmpp-contact d-flex">
<li class=" controlbox-padded online current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
<span class="fa fa-circle" title="This contact is online"></span> Benvolio Montague</a>
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li>
<li class="offline current-xmpp-contact d-flex">
<li class=" controlbox-padded offline current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
<span class="fa fa-times-circle" title="This contact is offline"></span> Montague</a>
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li>
<li class="offline current-xmpp-contact d-flex">
<li class=" controlbox-padded offline current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
<span class="fa fa-times-circle" title="This contact is offline"></span> Lady Montague</a>
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
@ -160,10 +162,10 @@
</div>
<div class="roster-group" data-group="Friends">
<a href="#" data-group="Friends" class="group-toggle" title="Click to hide these contacts">
<a href="#" data-group="Friends" class="group-toggle controlbox-padded " title="Click to hide these contacts">
<span class="fa fa-caret-down"></span> Friends</a>
<ul>
<li class="online current-xmpp-contact d-flex">
<li class=" controlbox-padded online current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
<span class="fa fa-circle" title="This contact is online"></span> Mercutio</a>
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
@ -172,20 +174,20 @@
</div>
<div class="roster-group" data-group="Ungrouped">
<a href="#" class="group-toggle" title="Click to hide these contacts">
<a href="#" class="group-toggle controlbox-padded " title="Click to hide these contacts">
<span class="fa fa-caret-down"></span> Ungrouped</a>
<ul>
<li class="online current-xmpp-contact d-flex">
<li class=" controlbox-padded online current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
<span class="fa fa-circle" title="This contact is online"></span> Gregory</a>
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li>
<li class="online current-xmpp-contact d-flex">
<li class=" controlbox-padded online current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
<span class="fa fa-circle" title="This contact is online"></span> Peter</a>
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li>
<li class="online current-xmpp-contact d-flex">
<li class=" controlbox-padded online current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
<span class="fa fa-circle" title="This contact is online"></span> Sampson</a>
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
@ -194,14 +196,14 @@
</div>
<div class="roster-group" id="pending-xmpp-contacts">
<a href="#" class="group-toggle" title="Click to hide these contacts">
<a href="#" class="group-toggle controlbox-padded " title="Click to hide these contacts">
<span class="fa fa-caret-down"></span> Pending Contacts</a>
<ul>
<li class="offline pending-xmpp-contact d-flex">
<li class=" controlbox-padded offline pending-xmpp-contact d-flex">
<span class="pending-contact-name w-100">An Apothecary</span>
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li>
<li class="offline pending-xmpp-contact d-flex">
<li class=" controlbox-padded offline pending-xmpp-contact d-flex">
<span class="pending-contact-name w-100">Abram</span>
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li>

59
sass/_controlbox.scss
View File

@ -274,13 +274,18 @@
}
.controlbox-pane {
padding: $controlbox-pane-padding;
background-color: white;
border: 0;
font-size: $font-size;
left: 0;
text-align: left;
overflow-x: hidden;
padding: 1em 0 1em 0;
.controlbox-padded {
padding-left: 1em;
padding-right: 1em;
}
.add-converse-contact {
margin: 0 0 0.75em 0;
@ -387,3 +392,55 @@
}
}
}
#conversejs:not(.converse-fullscreen) {
#controlbox {
order: -1;
min-width: $controlbox-width !important;
width: $controlbox-width;
.box-flyout {
min-width: $controlbox-width !important;
width: $controlbox-width;
}
&:not(.logged-out) {
.controlbox-head {
height: 15px;
}
}
.controlbox-head {
display: flex;
flex-direction: row-reverse;
flex-wrap: nowrap;
justify-content: space-between;
.brand-heading {
@include make-col-ready();
@include make-col(8);
color: $text-color;
font-size: 2em;
}
.chatbox-btn {
color: $controlbox-head-color;
margin: 0;
}
}
#converse-register, #converse-login {
@include make-col(12);
padding-bottom: 0;
}
#converse-register {
.button-cancel {
font-size: 90%;
}
}
.controlbox-panes {
border-radius: $chatbox-border-radius;
}
}
}

11
sass/_forms.scss
View File

@ -5,7 +5,7 @@
}
.form-check-label {
margin-top: 0.1rem;
margin-top: $form-check-input-margin-y;
}
.form-control {
@ -108,12 +108,3 @@
}
}
}
#conversejs.fullscreen {
form {
.form-check-label {
margin-top: $form-check-input-margin-y;
}
}
}

3
sass/_roster.scss
View File

@ -70,7 +70,8 @@
color: $text-color;
display: block;
width: 100%;
padding: 0 0 0.3rem 0;
padding-top: 0;
padding-bottom: 0.3rem;
}
li {

1
sass/converse.scss
View File

@ -46,7 +46,6 @@
@import "chatbox";
@import "converse/chatbox";
@import "controlbox";
@import "converse/controlbox";
@import "roomslist";
@import "roster";
@import "chatrooms";

51
sass/converse/_controlbox.scss
View File

@ -1,51 +0,0 @@
#conversejs:not(.fullscreen) {
#controlbox {
order: -1;
min-width: $controlbox-width !important;
width: $controlbox-width;
.box-flyout {
min-width: $controlbox-width !important;
width: $controlbox-width;
}
&:not(.logged-out) {
.controlbox-head {
height: 15px;
}
}
.controlbox-head {
display: flex;
flex-direction: row-reverse;
flex-wrap: nowrap;
justify-content: space-between;
.brand-heading {
@include make-col-ready();
@include make-col(8);
color: $text-color;
font-size: 2em;
}
.chatbox-btn {
color: $controlbox-head-color;
margin: 0;
}
}
#converse-register, #converse-login {
@include make-col(12);
padding-bottom: 0;
}
#converse-register {
.button-cancel {
font-size: 90%;
}
}
.controlbox-panes {
border-radius: $chatbox-border-radius;
}
}
}

1
sass/converse/_variables.scss
View File

@ -7,7 +7,6 @@ $chat-head-height: 55px !default;
$controlbox-dropdown-height: 25px !default;
$controlbox-head-height: 55px !default;
$controlbox-pane-padding: 1em !default;
$chatbox-hover-height: 1em !default;

1
sass/inverse/_variables.scss
View File

@ -9,7 +9,6 @@ $chat-head-height: 62px !default;
$controlbox-dropdown-height: 30px !default;
$controlbox-head-height: 63px !default;
$controlbox-pane-padding: $flyout-padding !default;
$rounded-border-radius: 4px !default;

2
src/converse-rosterview.js
View File

@ -357,7 +357,7 @@
_converse.RosterContactView = Backbone.NativeView.extend({
tagName: 'li',
className: 'd-flex hidden',
className: 'd-flex hidden controlbox-padded',
events: {
"click .accept-xmpp-request": "acceptRequest",

2
src/templates/bookmark.html
View File

@ -1,4 +1,4 @@
<div class="list-item room-item available-chatroom d-flex flex-row {[ if (o.hidden) { ]} hidden {[ } ]}" data-room-jid="{{{o.jid}}}">
<div class="list-item controlbox-padded room-item available-chatroom d-flex flex-row {[ if (o.hidden) { ]} hidden {[ } ]}" data-room-jid="{{{o.jid}}}">
<a class="open-room w-100" data-room-jid="{{{o.jid}}}" title="{{{o.open_title}}}" href="#">{{{o.name}}}</a>
<a class="remove-bookmark fa fa-bookmark align-self-center {[ if (o.bookmarked) { ]} button-on {[ } ]}"
data-room-jid="{{{o.jid}}}" data-bookmark-name="{{{o.name}}}"

2
src/templates/bookmarks_list.html
View File

@ -1,4 +1,4 @@
<a href="#" class="rooms-toggle bookmarks-toggle" title="{{{o.desc_bookmarks}}}">
<a href="#" class="rooms-toggle bookmarks-toggle controlbox-padded" title="{{{o.desc_bookmarks}}}">
<span class="fa {[ if (o.toggle_state === o._converse.OPENED) { ]} fa-caret-down {[ } else { ]} fa-caret-right {[ } ]}">
</span> {{{o.label_bookmarks}}}</a>
<div class="items-list bookmarks rooms-list {[ if (o.toggle_state !== o._converse.OPENED) { ]} hidden {[ } ]}"></div>

2
src/templates/group_header.html
View File

@ -1,4 +1,4 @@
<a href="#" class="group-toggle" title="{{{o.desc_group_toggle}}}">
<a href="#" class="group-toggle controlbox-padded" title="{{{o.desc_group_toggle}}}">
<span class="fa {[ if (o.toggle_state === o._converse.OPENED) { ]} fa-caret-down {[ } else { ]} fa-caret-right {[ } ]}">
</span> {{{o.label_group}}}</a>
<ul class="roster-group-contacts {[ if (o.toggle_state === o._converse.CLOSED) { ]} collapsed {[ } ]}"></ul>

6
src/templates/login_panel.html
View File

@ -1,4 +1,4 @@
<div id="converse-login-panel" class="controlbox-pane fade-in row">
<div id="converse-login-panel" class="controlbox-pane fade-in row no-gutters">
<form id="converse-login" class="converse-form" method="post">
<div class="conn-feedback fade-in {[ if (!o.conn_feedback_subject) { ]} hidden {[ } ]} {{{o.conn_feedback_class}}}">
<p class="feedback-subject">{{{ o.conn_feedback_subject }}}</p>
@ -22,8 +22,8 @@
<input id="converse-login-trusted" type="checkbox" class="form-check-input" name="trusted" checked="checked">
<label for="converse-login-trusted" class="form-check-label">{{{o.__('This is a trusted device')}}}</label>
<i class="fa fa-info-circle" data-toggle="popover"
data-title=""
data-content="{{{o.__('To improve performance, we cache your data in this browser. Uncheck this box if you want your data to be deleted when you log out. It\'s important that you explicitly log out, otherwise not all data might be deleted.')}}}"></i>
data-title="Trusted device?"
data-content="{{{o.__('To improve performance, we cache your data in this browser. Uncheck this box if this is a public computer or if you want your data to be deleted when you log out. It\'s important that you explicitly log out, otherwise not all cached data might be deleted.')}}}"></i>
</div>
<fieldset class="buttons">

2
src/templates/profile_view.html
View File

@ -1,4 +1,4 @@
<div class="userinfo">
<div class="userinfo controlbox-padded">
<div class="profile d-flex">
<a class="show-profile" href="#">
<img alt="User Avatar" class="avatar align-self-center" height="40px" width="40px" src="data:{{{o.image_type}}};base64,{{{o.image}}}"/>

2
src/templates/room_panel.html
View File

@ -1,5 +1,5 @@
<!-- <div id="chatrooms"> -->
<div class="d-flex">
<div class="d-flex controlbox-padded">
<span class="w-100 controlbox-heading">{{{o.heading_chatrooms}}}</span>
<a class="chatbox-btn trigger-list-chatrooms-modal fa fa-list-ul" title="{{{o.title_list_rooms}}}" data-toggle="modal" data-target="#list-chatrooms-modal"></a>
<a class="chatbox-btn trigger-add-chatrooms-modal fa fa-users" title="{{{o.title_new_room}}}" data-toggle="modal" data-target="#add-chatrooms-modal"></a>

2
src/templates/rooms_list.html
View File

@ -1,4 +1,4 @@
<a href="#" class="rooms-toggle open-rooms-toggle" title="{{{o.desc_rooms}}}">
<a href="#" class="rooms-toggle open-rooms-toggle controlbox-padded" title="{{{o.desc_rooms}}}">
<span class="fa {[ if (o.toggle_state === o._converse.OPENED) { ]} fa-caret-down {[ } else { ]} fa-caret-right {[ } ]}">
</span> {{{o.label_rooms}}}</a>
<div class="items-list rooms-list open-rooms-list"></div>

2
src/templates/rooms_list_item.html
View File

@ -1,4 +1,4 @@
<div class="list-item available-chatroom d-flex flex-row {[ if (o.num_unread_general) { ]} unread-msgs {[ } ]}" data-room-jid="{{{o.jid}}}">
<div class="list-item controlbox-padded available-chatroom d-flex flex-row {[ if (o.num_unread_general) { ]} unread-msgs {[ } ]}" data-room-jid="{{{o.jid}}}">
{[ if (o.num_unread) { ]}
<span class="msgs-indicator badge badge-info">{{{ o.num_unread }}}</span>
{[ } ]}

2
src/templates/roster.html
View File

@ -1,4 +1,4 @@
<div class="d-flex">
<div class="d-flex controlbox-padded">
<span class="w-100 controlbox-heading">{{{o.heading_contacts}}}</span>
<a class="chatbox-btn add-contact fa fa-user-plus" title="{{{o.title_add_contact}}}"
data-toggle="modal" data-target="#add-contact-modal"></a>

2
src/templates/roster_filter.html
View File

@ -1,4 +1,4 @@
<form class="roster-filter-form input-button-group {[ if (!o.visible) { ]} hidden {[ } ]}">
<form class="controlbox-padded roster-filter-form input-button-group {[ if (!o.visible) { ]} hidden {[ } ]}">
<div class="form-inline flex-nowrap">
<div class="btn-group">
<input {[ if (o.filter_text) { ]} value="{{{o.filter_text}}}" {[ } ]}