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

Initial updates to the chat head look.

Browse Source 
- Round buttons
- Make the head taller
- Wrap name
- Add "view" button for viewing vcard data (needs JS code still).
This commit is contained in:
JC Brand 2015-10-31 18:29:43 +00:00
parent 88f043d9ca
commit 9436f6ed2f
9 changed files with 99 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
converse.js
View File

@ -1253,6 +1253,9 @@
.html(converse.templates.chatbox(
_.extend(this.model.toJSON(), {
show_toolbar: converse.show_toolbar,
info_close: __('Close this chat box'),
info_minimize: __('Minimize this chat box'),
info_view: __('View more information on this person'),
label_personal_message: __('Personal message')
}
)

86
css/converse.css
View File

@ -103,6 +103,8 @@
content: "\2b14"; }
#conversejs .icon-info:before {
content: "\2360"; }
#conversejs .icon-info-2:before {
content: "i"; }
#conversejs .icon-italic:before {
content: "\e04f"; }
#conversejs .icon-key-2:before {
@ -1132,8 +1134,7 @@
display: block;
text-align: center;
width: 100%; }
#conversejs a.restore-chat,
#conversejs .chat-title {
#conversejs a.restore-chat {
padding: 1px 0 1px 5px;
color: white;
line-height: 15px;
@ -1143,17 +1144,6 @@
white-space: nowrap; }
#conversejs a.restore-chat:visited {
color: white; }
#conversejs .user-custom-message,
#conversejs .chatroom-topic {
color: white;
font-size: 80%;
font-style: italic;
height: 1.3em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin: 0;
padding: 1px 0 1px 5px; }
#conversejs .activated {
display: block !important; }
#conversejs .pure-button {
@ -1215,28 +1205,37 @@
border-top-right-radius: 4px;
color: #ffffff;
font-size: 100%;
height: 44px;
height: 55px;
margin: 0;
padding: 5px;
position: relative; }
#conversejs .chat-head .avatar {
margin-right: 0.5em;
border-radius: 50%;
float: left; }
#conversejs .chat-head.chat-head-chatbox {
background-color: #F4A261; }
#conversejs .chat-head .user-custom-message {
clear: left;
color: white;
font-size: 80%;
font-style: italic;
height: 1.3em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin: 0;
margin-top: 0.3em; }
#conversejs .chatbox-btn {
border-radius: 4px;
border-radius: 50%;
border: 1px solid white;
color: white;
cursor: pointer;
display: inline-block;
float: right;
font-size: 10px;
margin: 0 0 0 3px;
padding-bottom: 4px;
padding-left: 4px;
padding-right: 4px;
padding-top: 4px;
font-size: 9px;
margin: 0 0.2em;
padding: 5px;
text-decoration: none; }
#conversejs .chatbox-btn:active {
position: relative;
@ -1262,19 +1261,22 @@
#conversejs .chatbox .box-flyout {
height: 400px;
width: 100%; } }
#conversejs .chatbox .chat-title a {
#conversejs .chatbox .chat-title {
color: white;
width: 100%;
text-overflow: ellipsis;
white-space: nowrap; }
line-height: 15px;
display: block; }
#conversejs .chatbox .chat-title a {
color: white;
width: 100%;
word-wrap: break-word; }
#conversejs .chatbox .chat-body {
background-color: white;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-top: 0;
height: 289px;
height: -webkit-calc(100% - 44px);
height: calc(100% - 44px); }
height: -webkit-calc(100% - 55px);
height: calc(100% - 55px); }
#conversejs .chatbox .chat-body p {
color: #818479;
font-size: 14px;
@ -1459,7 +1461,7 @@
border-top-left-radius: 4px;
border-top-right-radius: 4px;
color: white;
height: 44px;
height: 55px;
margin: 0;
padding: 6px 6px 6px 0; }
#conversejs #controlbox form.search-xmpp-contact {
@ -1632,8 +1634,8 @@
color: #818479;
display: block;
font-size: 12px;
height: 43px;
line-height: 43px;
height: 54px;
line-height: 54px;
margin: 0;
text-align: center;
text-decoration: none; }
@ -1642,7 +1644,7 @@
#conversejs #controlbox #controlbox-tabs li a.current, #conversejs #controlbox #controlbox-tabs li a.current:hover {
box-shadow: none;
border-bottom: 0;
height: 44px;
height: 55px;
cursor: default;
color: #818479; }
#conversejs #controlbox .xmpp-status {
@ -1684,8 +1686,8 @@
text-align: center;
width: 100%;
height: 289px;
height: -webkit-calc(100% - 44px);
height: calc(100% - 44px);
height: -webkit-calc(100% - 55px);
height: calc(100% - 55px);
overflow-y: scroll;
overflow-x: hidden; }
#conversejs #controlbox .controlbox-pane label {
@ -1845,6 +1847,16 @@
#conversejs .chat-head-chatroom {
background-color: #E76F51; }
#conversejs .chat-head-chatroom .chatroom-topic {
color: white;
font-size: 80%;
font-style: italic;
height: 1.3em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin: 0;
margin-top: 0.3em; }
#conversejs .chatroom {
width: 300px; }
@media screen and (max-width: 480px) {
@ -1860,8 +1872,8 @@
height: 289px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
height: -webkit-calc(100% - 44px);
height: calc(100% - 44px);
height: -webkit-calc(100% - 55px);
height: calc(100% - 55px);
background-color: white;
border-top: 0;
display: table;
@ -1917,8 +1929,8 @@
color: #818479;
font-size: 14px;
height: 289px;
height: -webkit-calc(100% - 44px);
height: calc(100% - 44px);
height: -webkit-calc(100% - 55px);
height: calc(100% - 55px);
overflow-y: auto;
position: absolute; }
#conversejs .chatroom .chat-textarea {

7
mockup/index.html
View File

@ -247,12 +247,13 @@
<div class="dragresize dragresize-topleft"></div>
<div class="dragresize dragresize-left"></div>
<div class="chat-head chat-head-chatbox">
<a class="chatbox-btn close-chatbox-button icon-close"></a>
<a class="chatbox-btn toggle-chatbox-button icon-minus"></a>
<a class="chatbox-btn close-chatbox-button icon-close" title="Close this chat box"></a>
<a class="chatbox-btn toggle-chatbox-button icon-minus" title="Minimize this chat box"></a>
<a class="chatbox-btn toggle-chatbox-button icon-eye" title="View more information on this person"></a>
<canvas height="31px" width="31px" class="avatar" style="background-color: black"></canvas>
<div class="chat-title">
<a href="http://opkode.com" target="_blank" class="user">
JC Brand
Jan-Carel Brand
</a>
</div>
<p class="user-custom-message" title="10000ft in the air">10000ft in the air</p>

28
sass/_chatbox.scss
View File

@ -15,26 +15,36 @@
padding: 5px;
position: relative;
.avatar {
margin-right: 0.5em;
border-radius: 50%;
float: left;
}
&.chat-head-chatbox {
background-color: $chat-head-color;
}
.user-custom-message {
clear: left;
color: white;
font-size: 80%;
font-style: italic;
height: 1.3em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin: 0;
margin-top: 0.3em;
}
}
.chatbox-btn {
border-radius: $chatbox-border-radius;
border-radius: 50%;
border: 1px solid white;
color: white;
cursor: pointer;
display: inline-block;
float: right;
font-size: $box-close-font-size;
margin: 0 0 0 3px;
padding-bottom: $box-close-button-padding-bottom;
padding-left: $box-close-button-padding-left;
padding-right: $box-close-button-padding-right;
padding-top: $box-close-button-padding-top;
margin: 0 0.2em;
padding: 5px;
text-decoration: none;
&:active {
position: relative;
@ -64,11 +74,13 @@
}
}
.chat-title {
color: $chat-head-text-color;
line-height: 15px;
display: block;
a {
color: $chat-head-text-color;
width: 100%;
text-overflow: ellipsis;
white-space: nowrap;
word-wrap: break-word;
}
}
.chat-body {

12
sass/_chatrooms.scss
View File

@ -1,6 +1,18 @@
#conversejs {
.chat-head-chatroom {
background-color: $chatroom-head-color;
.chatroom-topic {
color: white;
font-size: 80%;
font-style: italic;
height: 1.3em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin: 0;
margin-top: 0.3em;
}
}
.chatroom {

16
sass/_core.scss
View File

@ -96,8 +96,7 @@
width: 100%;
}
a.restore-chat,
.chat-title {
a.restore-chat {
padding: 1px 0 1px 5px;
color: $chat-head-text-color;
line-height: 15px;
@ -111,19 +110,6 @@
color: $chat-head-text-color;
}
.user-custom-message,
.chatroom-topic {
color: white;
font-size: 80%;
font-style: italic;
height: 1.3em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin: 0;
padding: 1px 0 1px 5px;
}
.activated {
display: block !important;
}

1
sass/_fonts.scss
View File

@ -60,6 +60,7 @@
.icon-home:before { content: "\e000"; }
.icon-image:before { content: "\2b14"; }
.icon-info:before { content: "\2360"; }
.icon-info-2:before { content: "i"; }
.icon-italic:before { content: "\e04f"; }
.icon-key-2:before { content: "\e029"; }
.icon-key:before { content: "\e028"; }

11
sass/_variables.scss
View File

@ -10,15 +10,16 @@ $text-shadow-color: #FAFAFA !default;
$text-color: #818479 !default;
$border-color: #CCC !default;
$icon-color: #114327 !default;
$chat-head-color: #F4A261 !default;
$chat-head-text-color: white !default;
$chat-head-inverse-text-color: white !default;
$chat-head-height: 44px !default;
$save-button-color: #436F64 !default;
$chat-textarea-height: 70px !default;
$message-them-color: #1A9707 !default;
$roster-height: 194px !default;
$chat-head-color: #F4A261 !default;
$chat-head-text-color: white !default;
$chat-head-inverse-text-color: white !default;
$chat-head-height: 55px !default;
$input-focus-color: #1A9707 !default;
$highlight-color: #DCF9F6 !default;
@ -66,4 +67,4 @@ $box-close-button-padding-top: 4px !default;
$box-close-button-padding-bottom: 4px !default;
$box-close-button-padding-left: 4px !default;
$box-close-button-padding-right: 4px !default;
$box-close-font-size: 10px !default;
$box-close-font-size: 9px !default;

5
src/templates/chatbox.html
View File

@ -3,8 +3,9 @@
<div class="dragresize dragresize-topleft"></div>
<div class="dragresize dragresize-left"></div>
<div class="chat-head chat-head-chatbox">
<a class="chatbox-btn close-chatbox-button icon-close"></a>
<a class="chatbox-btn toggle-chatbox-button icon-minus"></a>
<a class="chatbox-btn close-chatbox-button icon-close" title="{{info_close}}"></a>
<a class="chatbox-btn toggle-chatbox-button icon-minus" title="{{info_minimize}}"></a>
<a class="chatbox-btn toggle-chatbox-button icon-eye" title="{{info_view}}"></a>
<div class="chat-title">
{[ if (url) { ]}
<a href="{{url}}" target="_blank" class="user">