Browse Source

Merge branch 'master' into bugfix/remove-logs-messages

q-apps
Phillip 2 years ago committed by GitHub
parent
commit
d4f6df882c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 4
      qortal-ui-core/font/switch-theme.css
  2. 7
      qortal-ui-core/language/us.json
  3. 7
      qortal-ui-core/language/zhc.json
  4. 7
      qortal-ui-core/language/zht.json
  5. 4
      qortal-ui-core/src/styles/switch-theme.css
  6. 74
      qortal-ui-plugins/plugins/core/components/ChatPage.js
  7. 13
      qortal-ui-plugins/plugins/core/components/ChatScroller-css.js
  8. 75
      qortal-ui-plugins/plugins/core/components/ChatScroller.js

4
qortal-ui-core/font/switch-theme.css

@ -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;
}

7
qortal-ui-core/language/us.json

@ -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",

7
qortal-ui-core/language/zhc.json

@ -574,7 +574,12 @@
"cchange65": "请输入收件人",
"cchange66": "无法获取回覆消息。消息太旧了。",
"cchange68": "编辑",
"cchange69": "自动显示图像"
"cchange69": "自动显示图像",
"cchange70": "不支援此类型图像",
"cchange71": "和",
"cchange72": "其他",
"cchange73": "的",
"cchange74": "心情回应"
},
"welcomepage": {
"wcchange1": "欢迎来到Q-Chat",

7
qortal-ui-core/language/zht.json

@ -574,7 +574,12 @@
"cchange65": "請輸入收件人",
"cchange66": "無法獲取回覆消息。消息太舊了。",
"cchange68": "編輯",
"cchange69": "自動顯示圖像"
"cchange69": "自動顯示圖像",
"cchange70": "不支援此類型圖像",
"cchange71": "和",
"cchange72": "其他",
"cchange73": "的",
"cchange74": "心情回應"
},
"welcomepage": {
"wcchange1": "歡迎來到 Q-Chat",

4
qortal-ui-core/src/styles/switch-theme.css

@ -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;
}

74
qortal-ui-plugins/plugins/core/components/ChatPage.js

@ -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)
@ -1341,7 +1342,7 @@ class ChatPage extends LitElement {
async connectedCallback() {
async connectedCallback() {
super.connectedCallback();
await this.initUpdate()
this.webWorker = new WebWorker();
@ -1419,7 +1420,8 @@ class ChatPage extends LitElement {
]
})
document.addEventListener('keydown', this.initialChat);
}
document.addEventListener('paste', this.pasteImage);
}
disconnectedCallback() {
super.disconnectedCallback();
@ -1441,7 +1443,8 @@ class ChatPage extends LitElement {
}
document.removeEventListener('keydown', this.initialChat);
}
document.removeEventListener('paste', this.pasteImage);
}
initialChat(e) {
if (this.editor && !this.editor.isFocused && this.currentEditor === '_chatEditorDOM' && !this.openForwardOpen && !this.openTipUser) {
@ -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 = {

13
qortal-ui-plugins/plugins/core/components/ChatScroller-css.js

@ -175,9 +175,13 @@ export const chatStyles = css`
}
.message-reactions {
background-color: transparent;
width: calc(100% - 54px);
margin-left: 54px;
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;
@ -723,6 +727,5 @@ export const chatStyles = css`
transform: rotate(360deg);
}
}
`

75
qortal-ui-plugins/plugins/core/components/ChatScroller.js

@ -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,17 +691,66 @@ 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({
@click=${() => this.sendMessage({
type: 'reaction',
editedMessageObj: this.messageObj,
reaction: reaction.type,
})}
class="reactions-bg">
${reaction.type} ${reaction.qty}
</span>`
id=${`reactions-${index}`}
class="reactions-bg">
${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…
Cancel
Save