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

Update and further style toolbars

Browse Source
This commit is contained in:
JC Brand 2018-03-06 14:48:23 +01:00
parent af5a9fbfc4
commit 181b1836b0
9 changed files with 59 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
css/converse.css
View File

@ -5396,6 +5396,7 @@ body.reset {
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
background-clip: padding-box;
background-color: white;
border-top: 1px solid #BBB;
border: 0;
margin: 0;
@ -5445,14 +5446,14 @@ body.reset {
padding: 0.25em;
height: 25px;
display: block;
background-color: #50c282;
color: white; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar a,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar a {
color: white;
font-size: 16px;
text-decoration: none;
text-shadow: none; }
border-top: 8px solid #3AA569;
background-color: white;
color: #3AA569; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .fa, #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .fa:hover,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .fa,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .fa:hover {
color: #3AA569;
font-size: 16px; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unencrypted a,
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unencrypted,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .unencrypted a,
@ -5541,9 +5542,6 @@ body.reset {
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover {
color: #8f2831; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu {
color: white; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
@ -6363,7 +6361,13 @@ body.reset {
background-color: #E77051; }
#converse-embedded-chat .chatroom .sendXMPPMessage .chat-toolbar,
#conversejs .chatroom .sendXMPPMessage .chat-toolbar {
background-color: #ed957e; }
background-color: white;
border-top: 8px solid #E77051;
color: #E77051; }
#converse-embedded-chat .chatroom .sendXMPPMessage .chat-toolbar .fa, #converse-embedded-chat .chatroom .sendXMPPMessage .chat-toolbar .fa:hover,
#conversejs .chatroom .sendXMPPMessage .chat-toolbar .fa,
#conversejs .chatroom .sendXMPPMessage .chat-toolbar .fa:hover {
color: #E77051; }
#converse-embedded-chat .chatroom .sendXMPPMessage .chat-textarea,
#conversejs .chatroom .sendXMPPMessage .chat-textarea {
border-bottom-right-radius: 0; }

28
css/inverse.css
View File

@ -5446,6 +5446,7 @@ body {
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
background-clip: padding-box;
background-color: white;
border-top: 1px solid #BBB;
border: 0;
margin: 0;
@ -5495,14 +5496,14 @@ body {
padding: 0.25em;
height: 29px;
display: block;
background-color: #50c282;
color: white; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar a,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar a {
color: white;
font-size: 18px;
text-decoration: none;
text-shadow: none; }
border-top: 8px solid #3AA569;
background-color: white;
color: #3AA569; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .fa, #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .fa:hover,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .fa,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .fa:hover {
color: #3AA569;
font-size: 18px; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unencrypted a,
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unencrypted,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .unencrypted a,
@ -5591,9 +5592,6 @@ body {
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover {
color: #8f2831; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu {
color: white; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
@ -6480,7 +6478,13 @@ body {
background-color: #E77051; }
#converse-embedded-chat .chatroom .sendXMPPMessage .chat-toolbar,
#conversejs .chatroom .sendXMPPMessage .chat-toolbar {
background-color: #ed957e; }
background-color: white;
border-top: 8px solid #E77051;
color: #E77051; }
#converse-embedded-chat .chatroom .sendXMPPMessage .chat-toolbar .fa, #converse-embedded-chat .chatroom .sendXMPPMessage .chat-toolbar .fa:hover,
#conversejs .chatroom .sendXMPPMessage .chat-toolbar .fa,
#conversejs .chatroom .sendXMPPMessage .chat-toolbar .fa:hover {
color: #E77051; }
#converse-embedded-chat .chatroom .sendXMPPMessage .chat-textarea,
#conversejs .chatroom .sendXMPPMessage .chat-textarea {
border-bottom-right-radius: 0; }

6
mockup/chatroom.html
View File

@ -23,11 +23,11 @@
<div class="chatbox chatroom col-xl-10 col-md-9" id="chatbox-4a77380f1cd9d392627b0e1469688f9ca44e9392">
<div class="flyout box-flyout">
<div class="chat-head chat-head-chatroom row no-gutters">
<div class="col-sm-10 col-lg-10">
<div class="col">
<div class="chat-title">Chatroom with a very long name</div>
<p class="chatroom-topic">May the force be with you</p>
</div>
<div class="col-sm-2 col-lg-2">
<div class="col-sm-3 col-lg-2">
<div class="chatbox-buttons row no-gutters">
<a class="chatbox-btn fa fa-minus"></a>
<a class="chatbox-btn fa fa-close"></a>
@ -80,7 +80,7 @@
<ul class="chat-toolbar no-text-select">
<li class="toggle-smiley fa fa-smile-o" title="Insert a smiley"></li>
<li class="toggle-occupants"><a class="fa fa-user-times" title="Hide the list of occupants"></a></li>
<li class="toggle-clear"><a class="fa fa-times" title="Clear all messages"></a></li>
<li class="toggle-clear"><a class="fa fa-eraser" title="Clear all messages"></a></li>
</ul>
<textarea class="chat-textarea form-control" placeholder="Message"></textarea>
</form>

15
sass/_chatbox.scss
View File

@ -284,6 +284,7 @@
-webkit-background-clip: padding-box;
@include border-bottom-radius($chatbox-border-radius);
background-clip: padding-box;
background-color: white;
border-top: 1px solid #BBB;
border: 0;
margin: 0;
@ -332,13 +333,12 @@
padding: 0.25em;
height: $toolbar-height;
display: block;
background-color: lighten($chat-head-color, 10%);
color: white;
a {
color: white;
border-top: 8px solid $chat-head-color;
background-color: white;
color: $chat-head-color;
.fa, .fa:hover {
color: $chat-head-color;
font-size: $font-size-large;
text-decoration: none;
text-shadow: none;
}
.unencrypted a,
.unencrypted {
@ -427,9 +427,6 @@
}
}
}
&.toggle-toolbar-menu {
color: white;
}
&.toggle-smiley {
.emoji-toolbar {
.emoji-category-picker,

7
sass/_chatrooms.scss
View File

@ -276,7 +276,12 @@
.sendXMPPMessage {
.chat-toolbar {
background-color: lighten($chatroom-head-color, 10%);
background-color: white;
border-top: 8px solid $chatroom-head-color;
color: $chatroom-head-color;
.fa, .fa:hover {
color: $chatroom-head-color;
}
}
.chat-textarea {
border-bottom-right-radius: 0;

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

@ -397,7 +397,7 @@
'click .toggle-smiley ul.emoji-picker li': 'insertEmoji',
'click .toggle-clear': 'clearChatRoomMessages',
'click .toggle-call': 'toggleCall',
'click .toggle-occupants a': 'toggleOccupants',
'click .toggle-occupants': 'toggleOccupants',
'click .new-msgs-indicator': 'viewUnreadMessages',
'click .occupant': 'onOccupantClicked',
'keypress .chat-textarea': 'keyPressed',
@ -545,6 +545,7 @@
}
this.occupantsview.setOccupantsHeight();
this.scrollDown();
this.renderEmojiPicker();
if (focus) { this.focus(); }
},
@ -563,7 +564,6 @@
if (this.model.get('connection_status') === converse.ROOMSTATUS.ENTERED) {
this.setChatState(_converse.ACTIVE);
this.scrollDown();
this.renderEmojiPicker();
this.focus();
}
},
@ -599,20 +599,11 @@
},
setOccupantsVisibility () {
const icon_el = this.el.querySelector('.toggle-occupants');
if (this.model.get('hidden_occupants')) {
const icon_el = this.el.querySelector('.icon-hide-users');
if (!_.isNull(icon_el)) {
icon_el.classList.remove('icon-hide-users');
icon_el.classList.add('icon-show-users');
}
this.el.querySelector('.chat-area').classList.add('full');
u.hideElement(this.el.querySelector('.occupants'));
} else {
const icon_el = this.el.querySelector('.icon-show-users');
if (!_.isNull(icon_el)) {
icon_el.classList.remove('icon-show-users');
icon_el.classList.add('icon-hide-users');
}
this.el.querySelector('.chat-area').classList.remove('full');
this.el.querySelector('.occupants').classList.remove('hidden');
}

4
src/templates/chatroom_head.html
View File

@ -1,4 +1,4 @@
<div class="col-sm-9 col-lg-9">
<div class="col">
<div class="chat-title" title="{{{o.jid}}}">
{[ if (o.name && o.name !== o.Strophe.getNodeFromJid(o.jid)) { ]}
<span class="chatroom-name">{{{ o.name }}}</span>
@ -8,7 +8,7 @@
<p class="chatroom-description">{{{ o.description }}}<p/>
</div>
</div>
<div class="col-sm-3 col-lg-3">
<div class="col-sm-3 col-lg-2">
<div class="chatbox-buttons row no-gutters">
<a class="chatbox-btn close-chatbox-button fa fa-sign-out" title="{{{o.info_close}}}"></a>
{[ if (o.affiliation == 'owner') { ]}

9
src/templates/chatroom_toolbar.html
View File

@ -1,16 +1,15 @@
{[ if (o.use_emoji) { ]}
<li class="toggle-toolbar-menu toggle-smiley">
<a class="icon-happy" title="{{{o.label_insert_smiley}}}"></a>
<li class="toggle-toolbar-menu toggle-smiley fa fa-smile-o" title="{{{o.label_insert_smiley}}}"></a>
<span class="emoji-picker"></span>
</li>
{[ } ]}
{[ if (o.show_call_button) { ]}
<li class="toggle-call"><a class="icon-phone" title="{{{o.label_start_call}}}"></a></li>
<li class="toggle-call fa fa-phone" title="{{{o.label_start_call}}}"></li>
{[ } ]}
{[ if (o.show_occupants_toggle) { ]}
<li class="toggle-occupants"><a class="icon-hide-users" title="{{{o.label_hide_occupants}}}"></a></li>
<li class="toggle-occupants fa fa-users" title="{{{o.label_hide_occupants}}}"></li>
{[ } ]}
{[ if (o.show_clear_button) { ]}
<li class="toggle-clear"><a class="icon-trash" title="{{{o.label_clear}}}"></a></li>
<li class="toggle-clear fa fa-eraser" title="{{{o.label_clear}}}"></li>
{[ } ]}

7
src/templates/toolbar.html
View File

@ -1,12 +1,11 @@
{[ if (o.use_emoji) { ]}
<li class="toggle-toolbar-menu toggle-smiley">
<a class="icon-happy" title="{{{o.label_insert_smiley}}}"></a>
<li class="toggle-toolbar-menu toggle-smiley fa fa-smile-o" title="{{{o.label_insert_smiley}}}"></a>
<span class="emoji-picker"></span>
</li>
{[ } ]}
{[ if (o.show_call_button) { ]}
<li class="toggle-call"><a class="icon-phone" title="{{{o.label_start_call}}}"></a></li>
<li class="toggle-call fa fa-phone" title="{{{o.label_start_call}}}"></li>
{[ } ]}
{[ if (o.show_clear_button) { ]}
<li class="toggle-clear"><a class="icon-remove" title="{{{o.label_clear}}}"></a></li>
<li class="toggle-clear fa fa-eraser" title="{{{o.label_clear}}}"></li>
{[ } ]}