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:
parent
88f043d9ca
commit
9436f6ed2f
@ -1253,6 +1253,9 @@
|
|||||||
.html(converse.templates.chatbox(
|
.html(converse.templates.chatbox(
|
||||||
_.extend(this.model.toJSON(), {
|
_.extend(this.model.toJSON(), {
|
||||||
show_toolbar: converse.show_toolbar,
|
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')
|
label_personal_message: __('Personal message')
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
@ -103,6 +103,8 @@
|
|||||||
content: "\2b14"; }
|
content: "\2b14"; }
|
||||||
#conversejs .icon-info:before {
|
#conversejs .icon-info:before {
|
||||||
content: "\2360"; }
|
content: "\2360"; }
|
||||||
|
#conversejs .icon-info-2:before {
|
||||||
|
content: "i"; }
|
||||||
#conversejs .icon-italic:before {
|
#conversejs .icon-italic:before {
|
||||||
content: "\e04f"; }
|
content: "\e04f"; }
|
||||||
#conversejs .icon-key-2:before {
|
#conversejs .icon-key-2:before {
|
||||||
@ -1132,8 +1134,7 @@
|
|||||||
display: block;
|
display: block;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
width: 100%; }
|
width: 100%; }
|
||||||
#conversejs a.restore-chat,
|
#conversejs a.restore-chat {
|
||||||
#conversejs .chat-title {
|
|
||||||
padding: 1px 0 1px 5px;
|
padding: 1px 0 1px 5px;
|
||||||
color: white;
|
color: white;
|
||||||
line-height: 15px;
|
line-height: 15px;
|
||||||
@ -1143,17 +1144,6 @@
|
|||||||
white-space: nowrap; }
|
white-space: nowrap; }
|
||||||
#conversejs a.restore-chat:visited {
|
#conversejs a.restore-chat:visited {
|
||||||
color: white; }
|
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 {
|
#conversejs .activated {
|
||||||
display: block !important; }
|
display: block !important; }
|
||||||
#conversejs .pure-button {
|
#conversejs .pure-button {
|
||||||
@ -1215,28 +1205,37 @@
|
|||||||
border-top-right-radius: 4px;
|
border-top-right-radius: 4px;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
font-size: 100%;
|
font-size: 100%;
|
||||||
height: 44px;
|
height: 55px;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
position: relative; }
|
position: relative; }
|
||||||
#conversejs .chat-head .avatar {
|
#conversejs .chat-head .avatar {
|
||||||
|
margin-right: 0.5em;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
float: left; }
|
float: left; }
|
||||||
#conversejs .chat-head.chat-head-chatbox {
|
#conversejs .chat-head.chat-head-chatbox {
|
||||||
background-color: #F4A261; }
|
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 {
|
#conversejs .chatbox-btn {
|
||||||
border-radius: 4px;
|
border-radius: 50%;
|
||||||
border: 1px solid white;
|
border: 1px solid white;
|
||||||
color: white;
|
color: white;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
float: right;
|
float: right;
|
||||||
font-size: 10px;
|
font-size: 9px;
|
||||||
margin: 0 0 0 3px;
|
margin: 0 0.2em;
|
||||||
padding-bottom: 4px;
|
padding: 5px;
|
||||||
padding-left: 4px;
|
|
||||||
padding-right: 4px;
|
|
||||||
padding-top: 4px;
|
|
||||||
text-decoration: none; }
|
text-decoration: none; }
|
||||||
#conversejs .chatbox-btn:active {
|
#conversejs .chatbox-btn:active {
|
||||||
position: relative;
|
position: relative;
|
||||||
@ -1262,19 +1261,22 @@
|
|||||||
#conversejs .chatbox .box-flyout {
|
#conversejs .chatbox .box-flyout {
|
||||||
height: 400px;
|
height: 400px;
|
||||||
width: 100%; } }
|
width: 100%; } }
|
||||||
|
#conversejs .chatbox .chat-title {
|
||||||
|
color: white;
|
||||||
|
line-height: 15px;
|
||||||
|
display: block; }
|
||||||
#conversejs .chatbox .chat-title a {
|
#conversejs .chatbox .chat-title a {
|
||||||
color: white;
|
color: white;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-overflow: ellipsis;
|
word-wrap: break-word; }
|
||||||
white-space: nowrap; }
|
|
||||||
#conversejs .chatbox .chat-body {
|
#conversejs .chatbox .chat-body {
|
||||||
background-color: white;
|
background-color: white;
|
||||||
border-bottom-left-radius: 4px;
|
border-bottom-left-radius: 4px;
|
||||||
border-bottom-right-radius: 4px;
|
border-bottom-right-radius: 4px;
|
||||||
border-top: 0;
|
border-top: 0;
|
||||||
height: 289px;
|
height: 289px;
|
||||||
height: -webkit-calc(100% - 44px);
|
height: -webkit-calc(100% - 55px);
|
||||||
height: calc(100% - 44px); }
|
height: calc(100% - 55px); }
|
||||||
#conversejs .chatbox .chat-body p {
|
#conversejs .chatbox .chat-body p {
|
||||||
color: #818479;
|
color: #818479;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
@ -1459,7 +1461,7 @@
|
|||||||
border-top-left-radius: 4px;
|
border-top-left-radius: 4px;
|
||||||
border-top-right-radius: 4px;
|
border-top-right-radius: 4px;
|
||||||
color: white;
|
color: white;
|
||||||
height: 44px;
|
height: 55px;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 6px 6px 6px 0; }
|
padding: 6px 6px 6px 0; }
|
||||||
#conversejs #controlbox form.search-xmpp-contact {
|
#conversejs #controlbox form.search-xmpp-contact {
|
||||||
@ -1632,8 +1634,8 @@
|
|||||||
color: #818479;
|
color: #818479;
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
height: 43px;
|
height: 54px;
|
||||||
line-height: 43px;
|
line-height: 54px;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
text-decoration: none; }
|
text-decoration: none; }
|
||||||
@ -1642,7 +1644,7 @@
|
|||||||
#conversejs #controlbox #controlbox-tabs li a.current, #conversejs #controlbox #controlbox-tabs li a.current:hover {
|
#conversejs #controlbox #controlbox-tabs li a.current, #conversejs #controlbox #controlbox-tabs li a.current:hover {
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
border-bottom: 0;
|
border-bottom: 0;
|
||||||
height: 44px;
|
height: 55px;
|
||||||
cursor: default;
|
cursor: default;
|
||||||
color: #818479; }
|
color: #818479; }
|
||||||
#conversejs #controlbox .xmpp-status {
|
#conversejs #controlbox .xmpp-status {
|
||||||
@ -1684,8 +1686,8 @@
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 289px;
|
height: 289px;
|
||||||
height: -webkit-calc(100% - 44px);
|
height: -webkit-calc(100% - 55px);
|
||||||
height: calc(100% - 44px);
|
height: calc(100% - 55px);
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
overflow-x: hidden; }
|
overflow-x: hidden; }
|
||||||
#conversejs #controlbox .controlbox-pane label {
|
#conversejs #controlbox .controlbox-pane label {
|
||||||
@ -1845,6 +1847,16 @@
|
|||||||
|
|
||||||
#conversejs .chat-head-chatroom {
|
#conversejs .chat-head-chatroom {
|
||||||
background-color: #E76F51; }
|
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 {
|
#conversejs .chatroom {
|
||||||
width: 300px; }
|
width: 300px; }
|
||||||
@media screen and (max-width: 480px) {
|
@media screen and (max-width: 480px) {
|
||||||
@ -1860,8 +1872,8 @@
|
|||||||
height: 289px;
|
height: 289px;
|
||||||
border-bottom-left-radius: 4px;
|
border-bottom-left-radius: 4px;
|
||||||
border-bottom-right-radius: 4px;
|
border-bottom-right-radius: 4px;
|
||||||
height: -webkit-calc(100% - 44px);
|
height: -webkit-calc(100% - 55px);
|
||||||
height: calc(100% - 44px);
|
height: calc(100% - 55px);
|
||||||
background-color: white;
|
background-color: white;
|
||||||
border-top: 0;
|
border-top: 0;
|
||||||
display: table;
|
display: table;
|
||||||
@ -1917,8 +1929,8 @@
|
|||||||
color: #818479;
|
color: #818479;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
height: 289px;
|
height: 289px;
|
||||||
height: -webkit-calc(100% - 44px);
|
height: -webkit-calc(100% - 55px);
|
||||||
height: calc(100% - 44px);
|
height: calc(100% - 55px);
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
position: absolute; }
|
position: absolute; }
|
||||||
#conversejs .chatroom .chat-textarea {
|
#conversejs .chatroom .chat-textarea {
|
||||||
|
@ -247,12 +247,13 @@
|
|||||||
<div class="dragresize dragresize-topleft"></div>
|
<div class="dragresize dragresize-topleft"></div>
|
||||||
<div class="dragresize dragresize-left"></div>
|
<div class="dragresize dragresize-left"></div>
|
||||||
<div class="chat-head chat-head-chatbox">
|
<div class="chat-head chat-head-chatbox">
|
||||||
<a class="chatbox-btn close-chatbox-button icon-close"></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"></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>
|
<canvas height="31px" width="31px" class="avatar" style="background-color: black"></canvas>
|
||||||
<div class="chat-title">
|
<div class="chat-title">
|
||||||
<a href="http://opkode.com" target="_blank" class="user">
|
<a href="http://opkode.com" target="_blank" class="user">
|
||||||
JC Brand
|
Jan-Carel Brand
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<p class="user-custom-message" title="10000ft in the air">10000ft in the air</p>
|
<p class="user-custom-message" title="10000ft in the air">10000ft in the air</p>
|
||||||
|
@ -15,26 +15,36 @@
|
|||||||
padding: 5px;
|
padding: 5px;
|
||||||
position: relative;
|
position: relative;
|
||||||
.avatar {
|
.avatar {
|
||||||
|
margin-right: 0.5em;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
&.chat-head-chatbox {
|
&.chat-head-chatbox {
|
||||||
background-color: $chat-head-color;
|
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 {
|
.chatbox-btn {
|
||||||
border-radius: $chatbox-border-radius;
|
border-radius: 50%;
|
||||||
border: 1px solid white;
|
border: 1px solid white;
|
||||||
color: white;
|
color: white;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
float: right;
|
float: right;
|
||||||
font-size: $box-close-font-size;
|
font-size: $box-close-font-size;
|
||||||
margin: 0 0 0 3px;
|
margin: 0 0.2em;
|
||||||
padding-bottom: $box-close-button-padding-bottom;
|
padding: 5px;
|
||||||
padding-left: $box-close-button-padding-left;
|
|
||||||
padding-right: $box-close-button-padding-right;
|
|
||||||
padding-top: $box-close-button-padding-top;
|
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
&:active {
|
&:active {
|
||||||
position: relative;
|
position: relative;
|
||||||
@ -64,11 +74,13 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.chat-title {
|
.chat-title {
|
||||||
|
color: $chat-head-text-color;
|
||||||
|
line-height: 15px;
|
||||||
|
display: block;
|
||||||
a {
|
a {
|
||||||
color: $chat-head-text-color;
|
color: $chat-head-text-color;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-overflow: ellipsis;
|
word-wrap: break-word;
|
||||||
white-space: nowrap;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.chat-body {
|
.chat-body {
|
||||||
|
@ -1,6 +1,18 @@
|
|||||||
#conversejs {
|
#conversejs {
|
||||||
.chat-head-chatroom {
|
.chat-head-chatroom {
|
||||||
background-color: $chatroom-head-color;
|
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 {
|
.chatroom {
|
||||||
|
@ -96,8 +96,7 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
a.restore-chat,
|
a.restore-chat {
|
||||||
.chat-title {
|
|
||||||
padding: 1px 0 1px 5px;
|
padding: 1px 0 1px 5px;
|
||||||
color: $chat-head-text-color;
|
color: $chat-head-text-color;
|
||||||
line-height: 15px;
|
line-height: 15px;
|
||||||
@ -111,19 +110,6 @@
|
|||||||
color: $chat-head-text-color;
|
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 {
|
.activated {
|
||||||
display: block !important;
|
display: block !important;
|
||||||
}
|
}
|
||||||
|
@ -60,6 +60,7 @@
|
|||||||
.icon-home:before { content: "\e000"; }
|
.icon-home:before { content: "\e000"; }
|
||||||
.icon-image:before { content: "\2b14"; }
|
.icon-image:before { content: "\2b14"; }
|
||||||
.icon-info:before { content: "\2360"; }
|
.icon-info:before { content: "\2360"; }
|
||||||
|
.icon-info-2:before { content: "i"; }
|
||||||
.icon-italic:before { content: "\e04f"; }
|
.icon-italic:before { content: "\e04f"; }
|
||||||
.icon-key-2:before { content: "\e029"; }
|
.icon-key-2:before { content: "\e029"; }
|
||||||
.icon-key:before { content: "\e028"; }
|
.icon-key:before { content: "\e028"; }
|
||||||
|
@ -10,15 +10,16 @@ $text-shadow-color: #FAFAFA !default;
|
|||||||
$text-color: #818479 !default;
|
$text-color: #818479 !default;
|
||||||
$border-color: #CCC !default;
|
$border-color: #CCC !default;
|
||||||
$icon-color: #114327 !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;
|
$save-button-color: #436F64 !default;
|
||||||
$chat-textarea-height: 70px !default;
|
$chat-textarea-height: 70px !default;
|
||||||
$message-them-color: #1A9707 !default;
|
$message-them-color: #1A9707 !default;
|
||||||
$roster-height: 194px !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;
|
$input-focus-color: #1A9707 !default;
|
||||||
$highlight-color: #DCF9F6 !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-bottom: 4px !default;
|
||||||
$box-close-button-padding-left: 4px !default;
|
$box-close-button-padding-left: 4px !default;
|
||||||
$box-close-button-padding-right: 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-topleft"></div>
|
||||||
<div class="dragresize dragresize-left"></div>
|
<div class="dragresize dragresize-left"></div>
|
||||||
<div class="chat-head chat-head-chatbox">
|
<div class="chat-head chat-head-chatbox">
|
||||||
<a class="chatbox-btn close-chatbox-button icon-close"></a>
|
<a class="chatbox-btn close-chatbox-button icon-close" title="{{info_close}}"></a>
|
||||||
<a class="chatbox-btn toggle-chatbox-button icon-minus"></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">
|
<div class="chat-title">
|
||||||
{[ if (url) { ]}
|
{[ if (url) { ]}
|
||||||
<a href="{{url}}" target="_blank" class="user">
|
<a href="{{url}}" target="_blank" class="user">
|
||||||
|
Loading…
Reference in New Issue
Block a user