mirror of
https://github.com/Qortal/qortal-ui.git
synced 2025-02-12 02:05:51 +00:00
Merge branch 'master' into bugfix/remove-logs-messages
This commit is contained in:
Phillip
GitHub
commit
d4f6df882c
@ -52,6 +52,7 @@ html {
|
||||
--lightChatHeadHover: #1e1f201a;
|
||||
--group-header: #929292;
|
||||
--group-drop-shadow: rgb(17 17 26 / 10%) 0px 1px 0px;
|
||||
--reactions-tooltip-bg: #ffffff;
|
||||
}
|
||||
|
||||
html[theme="dark"] {
|
||||
@ -107,5 +108,6 @@ html[theme="dark"] {
|
||||
--chatHeadTextActive: #ffffff;
|
||||
--lightChatHeadHover: #e0e1e31a;
|
||||
--group-header: #c8c8c8;
|
||||
--group-drop-shadow: rgb(191 191 191 / 32%) 0px 1px 0px
|
||||
--group-drop-shadow: rgb(191 191 191 / 32%) 0px 1px 0px;
|
||||
--reactions-tooltip-bg: #161515;
|
||||
}
|
||||
@ -574,7 +574,12 @@
|
||||
"cchange65": "Please enter a recipient",
|
||||
"cchange66": "Cannot fetch replied-to message. Message is too old.",
|
||||
"cchange68": "edited",
|
||||
"cchange69": "Auto-show images"
|
||||
"cchange69": "Auto-view images",
|
||||
"cchange70": "This image type is not supported",
|
||||
"cchange71": "and",
|
||||
"cchange72": "other",
|
||||
"cchange73": "s",
|
||||
"cchange74": "reacted with"
|
||||
},
|
||||
"welcomepage": {
|
||||
"wcchange1": "Welcome to Q-Chat",
|
||||
|
||||
@ -574,7 +574,12 @@
|
||||
"cchange65": "请输入收件人",
|
||||
"cchange66": "无法获取回覆消息。消息太旧了。",
|
||||
"cchange68": "编辑",
|
||||
"cchange69": "自动显示图像"
|
||||
"cchange69": "自动显示图像",
|
||||
"cchange70": "不支援此类型图像",
|
||||
"cchange71": "和",
|
||||
"cchange72": "其他",
|
||||
"cchange73": "的",
|
||||
"cchange74": "心情回应"
|
||||
},
|
||||
"welcomepage": {
|
||||
"wcchange1": "欢迎来到Q-Chat",
|
||||
|
||||
@ -574,7 +574,12 @@
|
||||
"cchange65": "請輸入收件人",
|
||||
"cchange66": "無法獲取回覆消息。消息太舊了。",
|
||||
"cchange68": "編輯",
|
||||
"cchange69": "自動顯示圖像"
|
||||
"cchange69": "自動顯示圖像",
|
||||
"cchange70": "不支援此類型圖像",
|
||||
"cchange71": "和",
|
||||
"cchange72": "其他",
|
||||
"cchange73": "的",
|
||||
"cchange74": "心情回應"
|
||||
},
|
||||
"welcomepage": {
|
||||
"wcchange1": "歡迎來到 Q-Chat",
|
||||
|
||||
@ -49,6 +49,7 @@ html {
|
||||
--chatHeadTextActive: #080808;
|
||||
--group-header: #929292;
|
||||
--group-drop-shadow: rgb(17 17 26 / 10%) 0px 1px 0px;
|
||||
--reactions-tooltip-bg: #ffffff;
|
||||
}
|
||||
|
||||
html[theme="dark"] {
|
||||
@ -101,5 +102,6 @@ html[theme="dark"] {
|
||||
--chatHeadText: #ffffff;
|
||||
--chatHeadTextActive: #ffffff;
|
||||
--group-header: #c8c8c8;
|
||||
--group-drop-shadow: rgb(191 191 191 / 32%) 0px 1px 0px
|
||||
--group-drop-shadow: rgb(191 191 191 / 32%) 0px 1px 0px;
|
||||
--reactions-tooltip-bg: #161515;
|
||||
}
|
||||
@ -831,6 +831,7 @@ class ChatPage extends LitElement {
|
||||
this.getOldMessage = this.getOldMessage.bind(this)
|
||||
this._sendMessage = this._sendMessage.bind(this)
|
||||
this.insertImage = this.insertImage.bind(this)
|
||||
this.pasteImage = this.pasteImage.bind(this)
|
||||
this.toggleEnableChatEnter = this.toggleEnableChatEnter.bind(this)
|
||||
this._downObserverhandler = this._downObserverhandler.bind(this)
|
||||
this.setOpenTipUser = this.setOpenTipUser.bind(this)
|
||||
@ -1419,6 +1420,7 @@ class ChatPage extends LitElement {
|
||||
]
|
||||
})
|
||||
document.addEventListener('keydown', this.initialChat);
|
||||
document.addEventListener('paste', this.pasteImage);
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
@ -1441,6 +1443,7 @@ class ChatPage extends LitElement {
|
||||
}
|
||||
|
||||
document.removeEventListener('keydown', this.initialChat);
|
||||
document.removeEventListener('paste', this.pasteImage);
|
||||
}
|
||||
|
||||
initialChat(e) {
|
||||
@ -1454,8 +1457,56 @@ class ChatPage extends LitElement {
|
||||
this.editor.commands.focus('end')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
async pasteImage (e) {
|
||||
const event = e;
|
||||
const handleTransferIntoURL = (dataTransfer) => {
|
||||
try {
|
||||
const [firstItem] = dataTransfer.items;
|
||||
console.log({firstItem});
|
||||
const blob = firstItem.getAsFile();
|
||||
console.log({blob});
|
||||
return blob;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
if (event.clipboardData) {
|
||||
const blobFound = handleTransferIntoURL(event.clipboardData)
|
||||
if (blobFound) {
|
||||
this.insertImage(blobFound);
|
||||
return;
|
||||
} else {
|
||||
const item_list = await navigator.clipboard.read();
|
||||
let image_type;
|
||||
const item = item_list.find(item =>
|
||||
item.types.some( type => {
|
||||
if (type.startsWith( 'image/')) {
|
||||
image_type = type;
|
||||
return true;
|
||||
}
|
||||
})
|
||||
);
|
||||
if (item) {
|
||||
try {
|
||||
const blob = item && await item.getType(image_type);
|
||||
let file = new File([blob], "name", {
|
||||
type: image_type
|
||||
});
|
||||
this.insertImage(file);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
let errorMsg = get("chatpage.cchange70")
|
||||
parentEpml.request('showSnackBar', `${errorMsg}`)
|
||||
}
|
||||
} else {
|
||||
return
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
async goToRepliedMessage(message, clickedOnMessage){
|
||||
@ -2611,6 +2662,8 @@ class ChatPage extends LitElement {
|
||||
if (!userName) {
|
||||
parentEpml.request('showSnackBar', get("chatpage.cchange27"));
|
||||
this.isLoading = false;
|
||||
this.isUploadingImage = false;
|
||||
this.imageFile = null;
|
||||
return;
|
||||
}
|
||||
|
||||
@ -2683,6 +2736,7 @@ class ChatPage extends LitElement {
|
||||
const stringifyMessageObject = JSON.stringify(messageObject);
|
||||
this.sendMessage(stringifyMessageObject, typeMessage);
|
||||
} else if (outSideMsg && outSideMsg.type === 'reaction') {
|
||||
const userName = await getName(this.selectedAddress.address);
|
||||
typeMessage = 'edit';
|
||||
let chatReference = outSideMsg.editedMessageObj.reference;
|
||||
|
||||
@ -2704,11 +2758,14 @@ class ChatPage extends LitElement {
|
||||
const findEmojiIndex = reactions.findIndex((reaction)=> reaction.type === outSideMsg.reaction)
|
||||
if(findEmojiIndex !== -1){
|
||||
let users = reactions[findEmojiIndex].users || []
|
||||
const findUserIndex = users.findIndex((user)=> user === this.selectedAddress.address )
|
||||
const findUserIndex = users.findIndex((user)=> user.address === this.selectedAddress.address )
|
||||
if(findUserIndex !== -1){
|
||||
users.splice(findUserIndex, 1)
|
||||
} else {
|
||||
users.push(this.selectedAddress.address)
|
||||
users.push({
|
||||
address: this.selectedAddress.address,
|
||||
name: userName
|
||||
})
|
||||
}
|
||||
reactions[findEmojiIndex] = {
|
||||
...reactions[findEmojiIndex],
|
||||
@ -2722,7 +2779,10 @@ class ChatPage extends LitElement {
|
||||
reactions = [...reactions, {
|
||||
type: outSideMsg.reaction,
|
||||
qty: 1,
|
||||
users: [this.selectedAddress.address]
|
||||
users: [{
|
||||
address: this.selectedAddress.address,
|
||||
name: userName
|
||||
}]
|
||||
}]
|
||||
}
|
||||
const messageObject = {
|
||||
|
||||
@ -178,6 +178,10 @@ export const chatStyles = css`
|
||||
background-color: transparent;
|
||||
width: calc(100% - 54px);
|
||||
margin-left: 54px;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: left;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.original-message {
|
||||
@ -412,11 +416,11 @@ export const chatStyles = css`
|
||||
}
|
||||
|
||||
.reactions-bg {
|
||||
position: relative;
|
||||
background-color: #d5d5d5;
|
||||
border-radius: 10px;
|
||||
padding: 5px;
|
||||
color: black;
|
||||
margin-right: 10px;
|
||||
transition: all 0.1s ease-in-out;
|
||||
border: 0.5px solid transparent;
|
||||
cursor: pointer;
|
||||
@ -724,5 +728,4 @@ export const chatStyles = css`
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
`
|
||||
|
||||
@ -13,6 +13,7 @@ import './WrapperModal';
|
||||
import "./UserInfo/UserInfo";
|
||||
import '@vaadin/icons';
|
||||
import '@vaadin/icon';
|
||||
import '@vaadin/tooltip';
|
||||
import '@material/mwc-button';
|
||||
import '@material/mwc-dialog';
|
||||
import '@material/mwc-icon';
|
||||
@ -293,10 +294,9 @@ class MessageTemplate extends LitElement {
|
||||
setUserName: { attribute: false },
|
||||
openTipUser:{ type: Boolean },
|
||||
goToRepliedMessage: { attribute: false },
|
||||
listSeenMessages: {type: Array},
|
||||
addSeenMessage: {attribute: false},
|
||||
chatId: {type: String}
|
||||
|
||||
listSeenMessages: { type: Array },
|
||||
addSeenMessage: { attribute: false },
|
||||
chatId: { type: String },
|
||||
}
|
||||
}
|
||||
|
||||
@ -349,6 +349,13 @@ class MessageTemplate extends LitElement {
|
||||
if(autoSeeChatList.includes(this.chatId) || this.listSeenMessages.includes(this.messageObj.reference)){
|
||||
this.viewImage = true
|
||||
}
|
||||
|
||||
const tooltips = this.shadowRoot.querySelectorAll('vaadin-tooltip');
|
||||
tooltips.forEach(tooltip => {
|
||||
const overlay = tooltip.shadowRoot.querySelector('vaadin-tooltip-overlay');
|
||||
overlay.shadowRoot.getElementById("overlay").style.cssText = "background-color: transparent; box-shadow: rgb(50 50 93 / 25%) 0px 2px 5px -1px, rgb(0 0 0 / 30%) 0px 1px 3px -1px";
|
||||
overlay.shadowRoot.getElementById('content').style.cssText = "background-color: var(--reactions-tooltip-bg); color: var(--chat-bubble-msg-color); text-align: center; padding: 20px 10px; border-radius: 8px; font-family: Roboto, sans-serif; letter-spacing: 0.3px; font-weight: 300; font-size: 13.5px; transition: all 0.3s ease-in-out;";
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
@ -377,6 +384,7 @@ class MessageTemplate extends LitElement {
|
||||
repliedToData = this.messageObj.repliedToData;
|
||||
isImageDeleted = parsedMessageObj.isImageDeleted;
|
||||
reactions = parsedMessageObj.reactions || [];
|
||||
console.log(reactions, 'reactions here');
|
||||
version = parsedMessageObj.version;
|
||||
isForwarded = parsedMessageObj.type === 'forward';
|
||||
isEdited = parsedMessageObj.isEdited && true;
|
||||
@ -683,7 +691,7 @@ class MessageTemplate extends LitElement {
|
||||
</div>
|
||||
<div class="message-reactions" style="${reactions.length > 0 &&
|
||||
'margin-top: 10px; margin-bottom: 5px;'}">
|
||||
${reactions.map((reaction)=> {
|
||||
${reactions.map((reaction, index)=> {
|
||||
return html`
|
||||
<span
|
||||
@click=${() => this.sendMessage({
|
||||
@ -691,9 +699,58 @@ class MessageTemplate extends LitElement {
|
||||
editedMessageObj: this.messageObj,
|
||||
reaction: reaction.type,
|
||||
})}
|
||||
id=${`reactions-${index}`}
|
||||
class="reactions-bg">
|
||||
${reaction.type} ${reaction.qty}
|
||||
</span>`
|
||||
${reaction.type}
|
||||
${reaction.qty}
|
||||
<vaadin-tooltip
|
||||
for=${`reactions-${index}`}
|
||||
position="top"
|
||||
hover-delay=${400}
|
||||
hide-delay=${1}
|
||||
text=${reaction.users.length > 3 ?
|
||||
(
|
||||
`${reaction.users[0].name
|
||||
? reaction.users[0].name
|
||||
: cropAddress(reaction.users[0].address)},
|
||||
${reaction.users[1].name
|
||||
? reaction.users[1].name
|
||||
: cropAddress(reaction.users[1].address)},
|
||||
${reaction.users[2].name
|
||||
? reaction.users[2].name
|
||||
: cropAddress(reaction.users[2].address)}
|
||||
${get("chatpage.cchange71")} ${reaction.users.length - 3} ${get("chatpage.cchange72")}${(reaction.users.length - 3) > 1 ? html`${get("chatpage.cchange73")}` : ""} ${get("chatpage.cchange74")} ${reaction.type}`
|
||||
) : reaction.users.length === 3 ?
|
||||
(
|
||||
`${reaction.users[0].name
|
||||
? reaction.users[0].name
|
||||
: cropAddress(reaction.users[0].address)},
|
||||
${reaction.users[1].name
|
||||
? reaction.users[1].name
|
||||
: cropAddress(reaction.users[1].address)}
|
||||
${get("chatpage.cchange71")}
|
||||
${reaction.users[2].name
|
||||
? reaction.users[2].name
|
||||
: cropAddress(reaction.users[2].address)} ${get("chatpage.cchange74")} ${reaction.type}`
|
||||
) : reaction.users.length === 2 ?
|
||||
(
|
||||
`${reaction.users[0].name
|
||||
? reaction.users[0].name
|
||||
: cropAddress(reaction.users[0].address)}
|
||||
${get("chatpage.cchange71")}
|
||||
${reaction.users[1].name
|
||||
? reaction.users[1].name
|
||||
: cropAddress(reaction.users[1].address)} ${get("chatpage.cchange74")} ${reaction.type}`
|
||||
) : reaction.users.length === 1 ?
|
||||
(
|
||||
`${reaction.users[0].name
|
||||
? reaction.users[0].name
|
||||
: cropAddress(reaction.users[0].address)} ${get("chatpage.cchange74")} ${reaction.type}`
|
||||
)
|
||||
: "" }>
|
||||
</vaadin-tooltip>
|
||||
</span>
|
||||
`
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user