Initial updates to the chat head look.
- 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
parent
88f043d9ca
commit
9436f6ed2f
@ -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')
|
||||
}
|
||||
)
|
||||
|
||||
@ -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 {
|
||||
color: white;
|
||||
line-height: 15px;
|
||||
display: block; }
|
||||
#conversejs .chatbox .chat-title a {
|
||||
color: white;
|
||||
width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap; }
|
||||
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 {
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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"; }
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user