Fixed Chat Sound issues and Room Layout
This commit is contained in:
Achilles Rasquinha
parent
2a615d112a
commit
a56452744a
5 changed files with 80 additions and 18 deletions
|
|
@ -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 = [
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 = $(`<audio class="chat-audio" volume="${volume}"/>`)
|
||||
const $audio = $(`<audio class="chat-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 })
|
||||
|
|
|
|||
|
|
@ -1,10 +1,5 @@
|
|||
// Author - Achilles Rasquinha <achilles@frappe.io>
|
||||
|
||||
// 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 <achilles@frappe.io>
|
||||
|
||||
// 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 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
.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;
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
Loading…
Add table
Reference in a new issue