diff --git a/frappe/hooks.py b/frappe/hooks.py
index 7587b2f4e3..d7a459e3c3 100755
--- a/frappe/hooks.py
+++ b/frappe/hooks.py
@@ -188,9 +188,10 @@ sounds = [
# {"name": "alert", "src": "/assets/frappe/sounds/alert.mp3"},
# {"name": "chime", "src": "/assets/frappe/sounds/chime.mp3"},
- # frappe chat sounds
+ # frappe.chat sounds
{ "name": "chat-message", "src": "/assets/frappe/sounds/chat-message.mp3", "volume": 0.1 },
{ "name": "chat-notification", "src": "/assets/frappe/sounds/chat-notification.mp3", "volume": 0.1 }
+ # frappe.chat sounds
]
bot_parsers = [
diff --git a/frappe/public/css/chat.css b/frappe/public/css/chat.css
index 28a73390a5..18d218b667 100644
--- a/frappe/public/css/chat.css
+++ b/frappe/public/css/chat.css
@@ -302,6 +302,9 @@ a.no-decoration:active {
overflow-y: auto;
padding: 0 1px 0 1px;
}
+.frappe-chat > .frappe-chat-popper > .frappe-chat-popper-collapse > .panel .frappe-chat-room-list > li > a {
+ border-radius: 0px !important;
+}
.frappe-chat > .frappe-chat-popper > .frappe-chat-popper-collapse > .panel .frappe-chat-room-list .media .media-heading,
.frappe-chat > .frappe-chat-popper > .frappe-chat-popper-collapse > .panel .frappe-chat-room-list .media .media-subtitle {
white-space: nowrap;
@@ -311,6 +314,19 @@ a.no-decoration:active {
vertical-align: middle;
max-width: 180px;
}
+.frappe-chat > .frappe-chat-popper > .frappe-chat-popper-collapse > .panel .frappe-chat-room-list .message-count {
+ background: #ff5858;
+ display: inline-block;
+ padding: 5px;
+ color: white;
+ border-radius: 50%;
+ font-size: 12px;
+ height: 20px;
+ line-height: 10px;
+ text-align: center;
+ min-width: 20px;
+ margin-top: 4px;
+}
.frappe-chat > .frappe-chat-popper > .frappe-chat-popper-collapse > .panel .chat-list.list-group {
height: 390px;
overflow-y: scroll;
@@ -351,7 +367,7 @@ a.no-decoration:active {
border-radius: 0px !important;
}
.frappe-chat .panel .frappe-chat-form .hint-list.list-group {
- margin: 0px !important;
+ margin: 0px;
max-height: 150px;
overflow-y: auto;
}
@@ -363,3 +379,15 @@ a.no-decoration:active {
.frappe-chat .panel .frappe-chat-form .hint-list.list-group .hint-list-item.list-group-item:last-child a {
text-decoration: none;
}
+.chat-message {
+ background: #E8DDFF;
+ padding: 5px 15px;
+ margin: 5px;
+ border-radius: 5px;
+ display: inline-block;
+}
+.seen-check {
+ font-size: 12px;
+ display: inline-block;
+ margin-left: 5px;
+}
diff --git a/frappe/public/js/frappe/chat.js b/frappe/public/js/frappe/chat.js
index a7f737776c..ca6f6dbdc4 100644
--- a/frappe/public/js/frappe/chat.js
+++ b/frappe/public/js/frappe/chat.js
@@ -1015,7 +1015,9 @@ frappe.provide('frappe.chat.sound')
frappe.chat.sound.play = function (name, volume = 0.1)
{
// frappe._.play_sound(`chat-${name}`)
- const $audio = $(``)
+ const $audio = $(``)
+ $audio.attr('volume', volume)
+
if ( frappe._.is_empty($audio) )
$(document).append($audio)
@@ -1959,6 +1961,8 @@ class extends Component
if ( props.last_message )
item.timestamp = frappe.chat.pretty_datetime(props.last_message.creation)
+ console.log(props)
+
return (
h("li", null,
h("a", { class: props.active ? "active": "", onclick: () => props.click(props) },
@@ -1970,7 +1974,6 @@ class extends Component
h("div", { class: "text-muted", style: { "font-size": "9px" } }, item.timestamp)
),
)
-
)
)
)
@@ -2003,9 +2006,9 @@ class extends Component
h("div", { class: "media", style: position.class === "media-right" ? { "text-align": "right" } : null },
position.class === "media-left" ? avatar : null,
h("div", { class: "media-body" },
- h("div", { class: "media-heading h6 ellipsis", style: `max-width: ${props.width_title || "100%"} display: inline-block` }, props.title),
+ h("div", { class: "media-heading ellipsis small", style: `max-width: ${props.width_title || "100%"} display: inline-block` }, props.title),
props.content ? h("div","",h("small","",props.content)) : null,
- props.subtitle ? h("div",{ class: "media-subtitle" },h("small", { class: "h6 text-muted" }, props.subtitle)) : null
+ props.subtitle ? h("div",{ class: "media-subtitle small" },h("small", { class: "text-muted" }, props.subtitle)) : null
),
position.class === "media-right" ? avatar : null
)
@@ -2131,8 +2134,8 @@ class extends Component
messages: props.messages
})
:
- h("div", { class: "panel-body" },
- h("div", { style: "margin-top: 135px" },
+ h("div", { class: "panel-body vcenter" },
+ h("div","",
h("div", { class: "text-center text-extra-muted" },
h(frappe.components.Octicon, { type: "comment-discussion", style: "font-size: 48px" }),
h("p","",__("Start a conversation."))
@@ -2196,12 +2199,12 @@ class extends Component
return (
h("div", { class: "panel-heading" },
- h("div", { class: "row" },
+ h("div", { class: "level" },
popper ?
- h("div", { class: "col-xs-1" },
+ h("div", { style: { "padding-right": "15px" } }, // sins of mine.
h("a", { onclick: props.back }, h(frappe.components.Octicon, { type: "chevron-left" }))
) : null,
- h("div", { class: popper ? "col-xs-10" : "col-xs-9" },
+ h("div","",
h("div", { class: "panel-title" },
h("div", { class: "cursor-pointer", onclick: () => { frappe.set_route(item.route) }},
h(frappe.Chat.Widget.MediaProfile, { ...item })
diff --git a/frappe/public/less/chat.less b/frappe/public/less/chat.less
index bf3d3ae1f8..58d00fa9f0 100644
--- a/frappe/public/less/chat.less
+++ b/frappe/public/less/chat.less
@@ -1,10 +1,5 @@
// Author - Achilles Rasquinha
-// For most part, we haven't used the LESS framework and its language features.
-// We could have written everything in CSS than introducing a compiler.
-// A good start to learn the same - http://lesscss.org
-// - Achilles Rasquinha
-
// http://codeguide.co - @mdo (Author of Bootstrap)
@import "common.less";
@@ -37,7 +32,7 @@
.font-bold { font-weight: @font-weight-bold; }
.font-heavy { font-weight: @font-weight-heavy; }
-// utilities
+// Utilities
.cursor-pointer { cursor: pointer; }
// Hacks and Fixes
@@ -106,6 +101,11 @@
overflow-y: auto;
padding: 0 1px 0 1px;
+ & > li > a
+ {
+ border-radius: 0px !important;
+ }
+
.media
{
.media-heading, .media-subtitle
@@ -114,6 +114,21 @@
max-width: @frappe-chat-room-list-content-max-width;
}
}
+
+ .message-count
+ {
+ background: #ff5858;
+ display: inline-block;
+ padding: 5px;
+ color: white;
+ border-radius: 50%;
+ font-size: 12px;
+ height: 20px;
+ line-height: 10px;
+ text-align: center;
+ min-width: 20px;
+ margin-top: 4px;
+ }
}
.chat-list.list-group
@@ -191,4 +206,19 @@
}
}
}
-}
\ No newline at end of file
+}
+
+//
+.chat-message {
+ background: #E8DDFF;
+ padding: 5px 15px;
+ margin: 5px;
+ border-radius: 5px;
+ display: inline-block;
+}
+
+.seen-check {
+ font-size: 12px;
+ display: inline-block;
+ margin-left: 5px;
+}
diff --git a/frappe/public/sounds/chat-message.mp3 b/frappe/public/sounds/chat-message.mp3
index 611474eaff..5e714310c7 100644
Binary files a/frappe/public/sounds/chat-message.mp3 and b/frappe/public/sounds/chat-message.mp3 differ