mirror of
https://github.com/Qortal/qortal-ui.git
synced 2025-02-11 09:45:52 +00:00
Added Icons to Chatbar & Styled Chat Bubbles
This commit is contained in:
Justin Ferrari
parent
5a096126ad
commit
bceb25afa1
4
img/qchat-send-message-icon.svg
Normal file
4
img/qchat-send-message-icon.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
|
||||
<path d="M4.02 42l41.98-18-41.98-18-.02 14 30 4-30 4z" fill="#03a9f4"/>
|
||||
<path d="M0 0h48v48h-48z" fill="none"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 253 B |
@ -7,6 +7,7 @@ html {
|
||||
--border: #d0d6de;
|
||||
--border2: #dde2e8;
|
||||
--copybutton: #707584;
|
||||
--chat-bubble: #efefef73;
|
||||
--sectxt: #576374;
|
||||
--vdicon: #707b8a;
|
||||
--tradehead: #6a6c75;
|
||||
@ -17,11 +18,11 @@ html {
|
||||
--relaynodetxt: #646464;
|
||||
--menuhover: #eeeeee;
|
||||
--menuactive: #ebebeb;
|
||||
--mainmenutext:#080808;
|
||||
--mainmenutexthover:#080808;
|
||||
--mainmenutext: #080808;
|
||||
--mainmenutexthover: #080808;
|
||||
--switchbackground: #666666;
|
||||
--switchborder: #333333;
|
||||
--sidetopbar: #ffffff;
|
||||
--sidetopbar: #ffffff;
|
||||
--nav-selected-color: #dddddd;
|
||||
--nav-selected-color-text: #333333;
|
||||
--nav-color-active: #d1d1d1;
|
||||
@ -43,6 +44,7 @@ html[theme="dark"] {
|
||||
--border: #0b305e;
|
||||
--border2: #0b305e;
|
||||
--copybutton: #d0d6de;
|
||||
--chat-bubble: #9694941a;
|
||||
--sectxt: #bbc3cd;
|
||||
--vdicon: #d0d6de;
|
||||
--tradehead: #008fd5;
|
||||
@ -53,11 +55,11 @@ html[theme="dark"] {
|
||||
--relaynodetxt: #d4d4d4;
|
||||
--menuhover: #008fd5;
|
||||
--menuactive: #008fd5;
|
||||
--mainmenutext:#008fd5;
|
||||
--mainmenutexthover:#0f1a2e;
|
||||
--mainmenutext: #008fd5;
|
||||
--mainmenutexthover: #0f1a2e;
|
||||
--switchbackground: #eeeeee;
|
||||
--switchborder: #03a9f4;
|
||||
--sidetopbar: #070d19;
|
||||
--sidetopbar: #070d19;
|
||||
--nav-selected-color: #0f1a2e;
|
||||
--nav-selected-color-text: #76c8f5;
|
||||
--nav-color-active: #d1d1d1;
|
||||
|
||||
@ -7,6 +7,7 @@ html {
|
||||
--border: #d0d6de;
|
||||
--border2: #dde2e8;
|
||||
--copybutton: #707584;
|
||||
--chat-bubble: #efefef73;
|
||||
--sectxt: #576374;
|
||||
--vdicon: #707b8a;
|
||||
--tradehead: #6a6c75;
|
||||
@ -17,11 +18,11 @@ html {
|
||||
--relaynodetxt: #646464;
|
||||
--menuhover: #eeeeee;
|
||||
--menuactive: #ebebeb;
|
||||
--mainmenutext:#080808;
|
||||
--mainmenutexthover:#080808;
|
||||
--mainmenutext: #080808;
|
||||
--mainmenutexthover: #080808;
|
||||
--switchbackground: #666666;
|
||||
--switchborder: #333333;
|
||||
--sidetopbar: #ffffff;
|
||||
--sidetopbar: #ffffff;
|
||||
--nav-selected-color: #dddddd;
|
||||
--nav-selected-color-text: #333333;
|
||||
--nav-color-active: #d1d1d1;
|
||||
@ -42,6 +43,7 @@ html[theme="dark"] {
|
||||
--border: #0b305e;
|
||||
--border2: #0b305e;
|
||||
--copybutton: #d0d6de;
|
||||
--chat-bubble: #9694941a;
|
||||
--sectxt: #bbc3cd;
|
||||
--vdicon: #d0d6de;
|
||||
--tradehead: #008fd5;
|
||||
@ -52,11 +54,11 @@ html[theme="dark"] {
|
||||
--relaynodetxt: #d4d4d4;
|
||||
--menuhover: #008fd5;
|
||||
--menuactive: #008fd5;
|
||||
--mainmenutext:#008fd5;
|
||||
--mainmenutexthover:#0f1a2e;
|
||||
--mainmenutext: #008fd5;
|
||||
--mainmenutexthover: #0f1a2e;
|
||||
--switchbackground: #eeeeee;
|
||||
--switchborder: #03a9f4;
|
||||
--sidetopbar: #070d19;
|
||||
--sidetopbar: #070d19;
|
||||
--nav-selected-color: #0f1a2e;
|
||||
--nav-selected-color-text: #76c8f5;
|
||||
--nav-color-active: #d1d1d1;
|
||||
|
||||
@ -8,7 +8,6 @@ registerTranslateConfig({
|
||||
})
|
||||
import ShortUniqueId from 'short-unique-id';
|
||||
import Compressor from 'compressorjs';
|
||||
|
||||
import { escape, unescape } from 'html-escaper';
|
||||
import { inputKeyCodes } from '../../utils/keyCodes.js'
|
||||
import './ChatScroller.js'
|
||||
@ -17,7 +16,6 @@ import './NameMenu.js'
|
||||
import './TimeAgo.js'
|
||||
import { EmojiPicker } from 'emoji-picker-js';
|
||||
import '@polymer/paper-spinner/paper-spinner-lite.js'
|
||||
|
||||
import '@material/mwc-button'
|
||||
import '@material/mwc-dialog'
|
||||
import '@material/mwc-icon'
|
||||
@ -134,6 +132,7 @@ class ChatPage extends LitElement {
|
||||
margin: 0;
|
||||
color: var(--mdc-theme-primary);
|
||||
font-weight: bold;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.original-message {
|
||||
@ -169,9 +168,9 @@ class ChatPage extends LitElement {
|
||||
width: auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
align-items: center;
|
||||
height: auto;
|
||||
padding: 5px;
|
||||
padding: 5px 5px 5px 7px;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
@ -194,6 +193,27 @@ class ChatPage extends LitElement {
|
||||
img {
|
||||
border-radius: 25%;
|
||||
}
|
||||
|
||||
.paperclip-icon {
|
||||
color: #494949;
|
||||
width: 25px;
|
||||
}
|
||||
|
||||
.paperclip-icon:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.send-icon {
|
||||
width: 30px;
|
||||
margin-left: 5px;
|
||||
transition: all 0.1s ease-in-out;
|
||||
}
|
||||
|
||||
.send-icon:hover {
|
||||
cursor: pointer;
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
|
||||
`
|
||||
}
|
||||
|
||||
@ -236,9 +256,8 @@ class ChatPage extends LitElement {
|
||||
<div class="chat-container">
|
||||
<div>
|
||||
${this.isLoadingMessages ? html`<h1>${translate("chatpage.cchange22")}</h1>` : this.renderChatScroller(this._initialMessages)}
|
||||
<mwc-dialog id="showDialogPublicKey" ?open=${this.imageFile}>
|
||||
<div class="dialog-header" >
|
||||
|
||||
<mwc-dialog id="showDialogPublicKey" ?open=${this.imageFile}>
|
||||
<div class="dialog-header">
|
||||
</div>
|
||||
<div class="dialog-container">
|
||||
hello
|
||||
@ -251,18 +270,15 @@ class ChatPage extends LitElement {
|
||||
slot="primaryAction"
|
||||
dialogAction="cancel"
|
||||
class="red"
|
||||
@click=${()=>{
|
||||
|
||||
@click=${()=> {
|
||||
this._sendMessage({
|
||||
type: 'image',
|
||||
imageFile: this.imageFile,
|
||||
caption: 'This is a caption'
|
||||
|
||||
|
||||
})
|
||||
type: 'image',
|
||||
imageFile: this.imageFile,
|
||||
caption: 'This is a caption'
|
||||
})
|
||||
}}
|
||||
>
|
||||
send
|
||||
send
|
||||
</mwc-button>
|
||||
<mwc-button
|
||||
slot="primaryAction"
|
||||
@ -277,7 +293,7 @@ class ChatPage extends LitElement {
|
||||
</mwc-button>
|
||||
</mwc-dialog>
|
||||
</div>
|
||||
<div class="chat-text-area" style="${`height: ${this.iframeHeight}px`}">
|
||||
<div class="chat-text-area" style="${`height: ${this.iframeHeight}px; ${(this.repliedToMessageObj || this.editedMessageObj) && "min-height: 120px"}`}">
|
||||
<div class="typing-area">
|
||||
${this.repliedToMessageObj && html`
|
||||
<div class="repliedTo-container">
|
||||
@ -314,22 +330,41 @@ class ChatPage extends LitElement {
|
||||
</div>
|
||||
`}
|
||||
<div class="chatbar">
|
||||
<vaadin-icon
|
||||
class="paperclip-icon"
|
||||
icon="vaadin:paperclip"
|
||||
slot="icon"
|
||||
@click=${() => this.closeEditMessageContainer()}
|
||||
></vaadin-icon>
|
||||
<textarea style="color: var(--black);" tabindex='1' ?autofocus=${true} ?disabled=${this.isLoading || this.isLoadingMessages} id="messageBox" rows="1"></textarea>
|
||||
<iframe style="${`height: ${this.iframeHeight}px`}" class="chat-editor" id="_chatEditorDOM" tabindex="-1" height=${this.iframeHeight}>
|
||||
</iframe>
|
||||
<button class="emoji-button" ?disabled=${this.isLoading || this.isLoadingMessages}>
|
||||
${this.isLoading === false ? html`<img class="emoji" draggable="false" alt="😀" src="/emoji/svg/1f600.svg">` : html`<paper-spinner-lite active></paper-spinner-lite>`}
|
||||
${html`<img class="emoji" draggable="false" alt="😀" src="/emoji/svg/1f600.svg" />`}
|
||||
</button>
|
||||
${this.editedMessageObj ? (
|
||||
html`
|
||||
<div>
|
||||
${this.isLoading === false ? html`
|
||||
<vaadin-icon
|
||||
class="checkmark-icon"
|
||||
icon="vaadin:check"
|
||||
slot="icon"
|
||||
@click=${() => this._sendMessage()}
|
||||
></vaadin-icon>
|
||||
`
|
||||
) : html`<div></div>`
|
||||
>
|
||||
</vaadin-icon>
|
||||
` :
|
||||
html`
|
||||
<paper-spinner-lite active></paper-spinner-lite>
|
||||
`}
|
||||
</div>
|
||||
`
|
||||
) :
|
||||
html`
|
||||
<div style="display:flex;">
|
||||
${this.isLoading === false ? html`<img src="/img/qchat-send-message-icon.svg" alt="send-icon" class="send-icon" />` : html`<paper-spinner-lite active></paper-spinner-lite>`}
|
||||
</div>
|
||||
`
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
@ -1655,23 +1690,21 @@ class ChatPage extends LitElement {
|
||||
|
||||
e.preventDefault();
|
||||
const item_list = await navigator.clipboard.read();
|
||||
let image_type; // we will feed this later
|
||||
const item = item_list.find( item => // choose the one item holding our image
|
||||
item.types.some( type => { // does this item have our type
|
||||
if( type.startsWith( 'image/' ) ) {
|
||||
image_type = type; // store which kind of image type it is
|
||||
return true;
|
||||
}
|
||||
} )
|
||||
);
|
||||
const blob = item && await item.getType( image_type );
|
||||
var file = new File([blob], "name", {
|
||||
type: image_type
|
||||
});
|
||||
|
||||
editorConfig.insertImage(file)
|
||||
|
||||
let image_type; // we will feed this later
|
||||
const item = item_list.find( item => // choose the one item holding our image
|
||||
item.types.some( type => { // does this item have our type
|
||||
if( type.startsWith( 'image/' ) ) {
|
||||
image_type = type; // store which kind of image type it is
|
||||
return true;
|
||||
}
|
||||
} )
|
||||
);
|
||||
const blob = item && await item.getType( image_type );
|
||||
var file = new File([blob], "name", {
|
||||
type: image_type
|
||||
});
|
||||
|
||||
editorConfig.insertImage(file)
|
||||
|
||||
navigator.clipboard.readText().then(clipboardText => {
|
||||
|
||||
|
||||
@ -39,7 +39,7 @@ export const chatStyles = css`
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
padding: 20px 17px;
|
||||
}
|
||||
|
||||
.last-message-ref {
|
||||
@ -77,6 +77,7 @@ export const chatStyles = css`
|
||||
|
||||
.message-data-name {
|
||||
color: var(--black);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.message-data-time {
|
||||
@ -84,6 +85,7 @@ export const chatStyles = css`
|
||||
font-size: 13px;
|
||||
padding-left: 6px;
|
||||
padding-bottom: 4px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.message-data-level {
|
||||
@ -91,6 +93,7 @@ export const chatStyles = css`
|
||||
font-size: 13px;
|
||||
padding-left: 8px;
|
||||
padding-bottom: 4px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.chat-bubble-container {
|
||||
@ -100,16 +103,27 @@ export const chatStyles = css`
|
||||
|
||||
.message-container {
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.message-subcontainer {
|
||||
position: relative;
|
||||
display: flex;
|
||||
background-color: #f3f3f3;
|
||||
flex-grow: 0;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
background-color: whitesmoke;
|
||||
border-radius: 5px;
|
||||
padding: 10px 15px;
|
||||
gap: 10px;
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.message-reactions {
|
||||
background-color: transparent;
|
||||
width: 100%;
|
||||
margin-left: 54px;
|
||||
}
|
||||
|
||||
.original-message {
|
||||
@ -120,10 +134,10 @@ export const chatStyles = css`
|
||||
line-height: 19px;
|
||||
overflow-wrap: break-word;
|
||||
user-select: text;
|
||||
font-size: 16px;
|
||||
font-size: 13px;
|
||||
width: 90%;
|
||||
border-radius: 5px;
|
||||
background-color: rgba(209, 209, 209, 0.79);
|
||||
background-color: rgba(232, 232, 232, 0.79);
|
||||
padding: 8px 5px 8px 25px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@ -169,12 +183,19 @@ export const chatStyles = css`
|
||||
float: left;
|
||||
}
|
||||
|
||||
.message-parent:hover .chat-hover {
|
||||
display: block;
|
||||
.message-parent {
|
||||
padding: 3px;
|
||||
background: rgba(245, 245, 245, 0);
|
||||
transition: all 0.1s ease-in-out;
|
||||
}
|
||||
|
||||
.message-parent:hover .message-container {
|
||||
filter:brightness(0.90);
|
||||
.message-parent:hover {
|
||||
background: var(--chat-bubble);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.message-parent:hover .chat-hover {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.chat-hover {
|
||||
@ -192,16 +213,6 @@ export const chatStyles = css`
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.my-message {
|
||||
background: #d1d1d1;
|
||||
border: 2px solid #eeeeee;
|
||||
}
|
||||
|
||||
.other-message {
|
||||
background: #f1f1f1;
|
||||
border: 2px solid #dedede;
|
||||
}
|
||||
|
||||
.align-left {
|
||||
text-align: left;
|
||||
}
|
||||
@ -322,12 +333,18 @@ export const chatStyles = css`
|
||||
}
|
||||
|
||||
.reactions-bg {
|
||||
background-color: #3C4048;
|
||||
background-color: #d5d5d5;
|
||||
border-radius: 10px;
|
||||
padding: 4px;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
color: black;
|
||||
margin-right: 10px;
|
||||
cursor: pointer
|
||||
transition: all 0.1s ease-in-out;
|
||||
border: 0.5px solid transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.reactions-bg:hover {
|
||||
border: 0.5px solid #6b6969;
|
||||
}
|
||||
|
||||
.image-container {
|
||||
|
||||
@ -273,59 +273,65 @@ class MessageTemplate extends LitElement {
|
||||
<div class="message-data-avatar">
|
||||
${avatarImg}
|
||||
</div>
|
||||
<div class="message-container ${this.messageObj.sender === this.myAddress ? "my-message" : "other-message"}">
|
||||
${repliedToData && html`
|
||||
<div
|
||||
class="original-message"
|
||||
style=${this.messageObj.sender === this.myAddress && "background-color: rgb(179 179 179 / 79%)"}>
|
||||
<p class="original-message-sender">${repliedToData.sendName ?? repliedToData.sender}</p>
|
||||
<p class="replied-message">${repliedToData.decodedMessage.messageText}</p>
|
||||
</div>
|
||||
`}
|
||||
${image && !isImageDeleted ? html`
|
||||
<div class="image-container">
|
||||
${imageHTML}<vaadin-icon
|
||||
@click=${() => this.sendMessage({
|
||||
type: 'delete',
|
||||
name: image.name,
|
||||
identifier: image.identifier,
|
||||
editedMessageObj: this.messageObj,
|
||||
<div class="message-container">
|
||||
<div class="message-subcontainer">
|
||||
${repliedToData && html`
|
||||
<div class="original-message">
|
||||
<p class="original-message-sender">${repliedToData.sendName ?? repliedToData.sender}</p>
|
||||
<p class="replied-message">${repliedToData.decodedMessage.messageText}</p>
|
||||
</div>
|
||||
`}
|
||||
${image && !isImageDeleted ? html`
|
||||
<div class="image-container">
|
||||
${imageHTML}<vaadin-icon
|
||||
@click=${() => this.sendMessage({
|
||||
type: 'delete',
|
||||
name: image.name,
|
||||
identifier: image.identifier,
|
||||
editedMessageObj: this.messageObj,
|
||||
|
||||
})}
|
||||
class="image-delete-icon" icon="vaadin:close" slot="icon"></vaadin-icon>
|
||||
})}
|
||||
class="image-delete-icon" icon="vaadin:close" slot="icon"></vaadin-icon>
|
||||
</div>
|
||||
` : html``}
|
||||
<div id="messageContent" class="message">
|
||||
${unsafeHTML(this.emojiPicker.parse(this.escapeHTML(message)))}
|
||||
</div>
|
||||
</div>
|
||||
` : html``}
|
||||
<div id="messageContent" class="message">
|
||||
${unsafeHTML(this.emojiPicker.parse(this.escapeHTML(message)))}
|
||||
</div>
|
||||
<div>
|
||||
${reactions.map((reaction)=> {
|
||||
return html`<span @click=${() => this.sendMessage({
|
||||
type: 'reaction',
|
||||
editedMessageObj: this.messageObj,
|
||||
reaction: reaction.type,
|
||||
})} class="reactions-bg" >${reaction.type} ${reaction.qty}</span>`
|
||||
})}
|
||||
</div>
|
||||
<chat-menu
|
||||
tabindex="0"
|
||||
class="chat-hover"
|
||||
style=${this.showBlockAddressIcon && "display: block"}
|
||||
toblockaddress="${this.messageObj.sender}"
|
||||
.showPrivateMessageModal=${() => this.showPrivateMessageModal()}
|
||||
.showBlockUserModal=${() => this.showBlockUserModal()}
|
||||
.showBlockIconFunc=${(props) => this.showBlockIconFunc(props)}
|
||||
.showBlockAddressIcon=${this.showBlockAddressIcon}
|
||||
.originalMessage=${{...this.messageObj, message}}
|
||||
.setRepliedToMessageObj=${this.setRepliedToMessageObj}
|
||||
.setEditedMessageObj=${this.setEditedMessageObj}
|
||||
.focusChatEditor=${this.focusChatEditor}
|
||||
.myAddress=${this.myAddress}
|
||||
@blur=${() => this.showBlockIconFunc(false)}
|
||||
.sendMessage=${this.sendMessage}
|
||||
>
|
||||
</chat-menu>
|
||||
<div class="message-reactions">
|
||||
${reactions.map((reaction)=> {
|
||||
return html`
|
||||
<span
|
||||
@click=${() => this.sendMessage({
|
||||
type: 'reaction',
|
||||
editedMessageObj: this.messageObj,
|
||||
reaction: reaction.type,
|
||||
})}
|
||||
class="reactions-bg">
|
||||
${reaction.type} ${reaction.qty}
|
||||
</span>`
|
||||
})}
|
||||
</div>
|
||||
<chat-menu
|
||||
tabindex="0"
|
||||
class="chat-hover"
|
||||
style=${this.showBlockAddressIcon && "display: block"}
|
||||
toblockaddress="${this.messageObj.sender}"
|
||||
.showPrivateMessageModal=${() => this.showPrivateMessageModal()}
|
||||
.showBlockUserModal=${() => this.showBlockUserModal()}
|
||||
.showBlockIconFunc=${(props) => this.showBlockIconFunc(props)}
|
||||
.showBlockAddressIcon=${this.showBlockAddressIcon}
|
||||
.originalMessage=${{...this.messageObj, message}}
|
||||
.setRepliedToMessageObj=${this.setRepliedToMessageObj}
|
||||
.setEditedMessageObj=${this.setEditedMessageObj}
|
||||
.focusChatEditor=${this.focusChatEditor}
|
||||
.myAddress=${this.myAddress}
|
||||
@blur=${() => this.showBlockIconFunc(false)}
|
||||
.sendMessage=${this.sendMessage}
|
||||
>
|
||||
</chat-menu>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<chat-modals
|
||||
.openDialogPrivateMessage=${this.openDialogPrivateMessage}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user