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

Add own class and style for controlbox heading buttons

Browse Source
This commit is contained in:
JC Brand 2018-11-07 11:09:41 +01:00
parent a7211863e6
commit 5e7d5d7fb1
7 changed files with 41 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
css/converse.css
View File

@ -9594,23 +9594,6 @@ body.reset {
color: var(--link-color) !important; }
#conversejs .circle {
border-radius: 50%; }
#conversejs .sidebar {
display: none;
width: 50px;
height: 100vh;
padding: 1rem 0;
background-color: var(--controlbox-head-color);
color: white;
text-align: center; }
#conversejs .sidebar .chatbox-btn {
float: none;
margin: 0;
font-size: 1.35em; }
#conversejs .sidebar .chatbox-btn.fa-vcard {
margin-top: 1em; }
#conversejs .sidebar .bottom {
position: absolute;
bottom: 1em; }
#conversejs .badge {
line-height: 1;
font-weight: normal;
@ -10658,12 +10641,20 @@ body.reset {
#conversejs #controlbox #chatrooms .add-chatroom input[type=submit],
#conversejs #controlbox #chatrooms .add-chatroom input[type=text] {
width: 100%; }
#conversejs #controlbox .controlbox-section {
margin: 1em 0 0 0; }
#conversejs #controlbox .controlbox-section .controlbox-heading {
font-family: var(--heading-font);
margin: 0 0 0.5em 0;
text-transform: uppercase; }
#conversejs #controlbox .controlbox-section .controlbox-heading {
font-family: var(--heading-font);
padding: 0;
margin: 0.75em 0;
font-size: 1.1em;
text-transform: uppercase; }
#conversejs #controlbox .controlbox-section .controlbox-heading__btn {
cursor: pointer;
align-self: flex-start;
font-size: 1.1em;
padding: 0;
margin: 0.75em 0 0.75em 0.75em; }
#conversejs #controlbox .controlbox-section .controlbox-heading__btn.fa-vcard {
margin-top: 1em; }
#conversejs #controlbox .dropdown a {
width: 143px;
display: inline-block; }

11
mockup/user-panel.html
View File

@ -5,12 +5,12 @@
<span class="username w-100 align-self-center">Romeo Montague</span>
<!-- <a class="chatbox-btn fa fa-vcard align-self-center" title="Your profile" data-toggle="modal" data-target="#userProfileModal"></a> -->
<!-- <a class="chatbox-btn fa fa-cog align-self-center" title="Change settings" data-toggle="modal" data-target="#settingsModal"></a> -->
<a class="chatbox-btn logout fa fa-sign-out align-self-center" title="Log out"></a>
<a class="chatbox-btn logout fa fa-sign-out-alt align-self-center" title="Log out"></a>
</div>
<div class="d-flex xmpp-status">
<span class="online w-100 align-self-center" data-value="online">
<span class="fa fa-circle"></span> Online</span>
<a class="chatbox-btn fa fa-pencil" title="Click to change your chat status" data-toggle="modal" data-target="#changeStatusModal"></a>
<a class="chatbox-btn fa fa-pencil-alt" title="Click to change your chat status" data-toggle="modal" data-target="#changeStatusModal"></a>
</div>
</div>
@ -33,7 +33,9 @@
<div id="chatrooms" class="controlbox-section">
<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>
<a class="controlbox-heading__btn show-list-muc-modal fa fa-list-ul" title="Query for groupchats" data-toggle="modal" data-target="#list-chatrooms-modal"></a>
<a class="controlbox-heading__btn fa fa-plus" title="Click to add a new room" data-toggle="modal" data-target="#chatroomsModal"></a>
</div>
<div class="list-container items-list-container">
<div class="items-list">
@ -88,7 +90,8 @@
<div id="converse-roster" class="controlbox-section">
<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>
<a class="fa-spin controlbox-heading__btn fa fa-sync" title="Re-sync your contacts"></a>
<a class="controlbox-heading__btn fa fa-user-plus" title="Click to add new chat contacts" data-toggle="modal" data-target="#addContactModal"></a>
</div>
<form class="controlbox-padded roster-filter-form input-button-group">
<div class="form-inline flex-nowrap">

16
sass/_controlbox.scss
View File

@ -212,13 +212,25 @@
}
.controlbox-section {
margin: 1em 0 0 0;
.controlbox-heading {
font-family: var(--heading-font);
margin: 0 0 0.5em 0;
padding: 0;
margin: 0.75em 0;
font-size: 1.1em;
text-transform: uppercase;
}
.controlbox-heading__btn {
cursor: pointer;
align-self: flex-start;
font-size: 1.1em;
padding: 0;
margin: 0.75em 0 0.75em 0.75em;
&.fa-vcard {
margin-top: 1em;
}
}
}
.dropdown {

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

@ -1756,8 +1756,8 @@ converse.plugins.add('converse-muc-views', {
className: 'controlbox-section',
id: 'chatrooms',
events: {
'click a.chatbox-btn.show-add-muc-modal': 'showAddRoomModal',
'click a.chatbox-btn.show-list-muc-modal': 'showListRoomsModal'
'click a.controlbox-heading__btn.show-add-muc-modal': 'showAddRoomModal',
'click a.controlbox-heading__btn.show-list-muc-modal': 'showListRoomsModal'
},
render () {

2
src/converse-rosterview.js
View File

@ -750,7 +750,7 @@ converse.plugins.add('converse-rosterview', {
subviewIndex: 'name',
events: {
'click a.chatbox-btn.add-contact': 'showAddContactModal',
'click a.controlbox-heading__btn.add-contact': 'showAddContactModal',
},
initialize () {

4
src/templates/room_panel.html
View File

@ -1,8 +1,8 @@
<!-- <div id="chatrooms"> -->
<div class="d-flex controlbox-padded">
<span class="w-100 controlbox-heading">{{{o.heading_chatrooms}}}</span>
<a class="chatbox-btn show-list-muc-modal fa fa-list-ul" title="{{{o.title_list_rooms}}}" data-toggle="modal" data-target="#list-chatrooms-modal"></a>
<a class="chatbox-btn show-add-muc-modal fa fa-plus" title="{{{o.title_new_room}}}" data-toggle="modal" data-target="#add-chatrooms-modal"></a>
<a class="controlbox-heading__btn show-list-muc-modal fa fa-list-ul" title="{{{o.title_list_rooms}}}" data-toggle="modal" data-target="#list-chatrooms-modal"></a>
<a class="controlbox-heading__btn show-add-muc-modal fa fa-plus" title="{{{o.title_new_room}}}" data-toggle="modal" data-target="#add-chatrooms-modal"></a>
</div>
<div class="list-container open-rooms-list rooms-list-container"></div>
<div class="list-container bookmarks-list rooms-list-container"></div>

2
src/templates/roster.html
View File

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