Skip to content

C
converse.js
Commit 9436f6ed authored by JC Brand's avatar JC Brand
Browse files
Options

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).
parent 88f043d9
Show whitespace changes
Inline Side-by-side
Showing with 99 additions and 70 deletions
converse.js
View file @ 9436f6ed
...@@ -1253,6 +1253,9 @@ ...@@ -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')
} }
) )
......
css/converse.css
View file @ 9436f6ed
...@@ -103,6 +103,8 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 {
......
mockup/index.html
View file @ 9436f6ed
...@@ -247,12 +247,13 @@ ...@@ -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>
......
sass/_chatbox.scss
View file @ 9436f6ed
...@@ -15,26 +15,36 @@ ...@@ -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 @@ ...@@ -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 {
......
sass/_chatrooms.scss
View file @ 9436f6ed
#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 {
......
sass/_core.scss
View file @ 9436f6ed
...@@ -96,8 +96,7 @@ ...@@ -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 @@ ...@@ -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;
} }
......
sass/_fonts.scss
View file @ 9436f6ed
...@@ -60,6 +60,7 @@ ...@@ -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"; }
......
sass/_variables.scss
View file @ 9436f6ed
...@@ -10,15 +10,16 @@ $text-shadow-color: #FAFAFA !default; ...@@ -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; ...@@ -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;
src/templates/chatbox.html
View file @ 9436f6ed
...@@ -3,8 +3,9 @@ ...@@ -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">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7