Qortal
/
qortal-ui
mirror of https://github.com/qortal/qortal-ui
4
1
Fork 4
Code Issues Projects Releases Wiki Activity
Browse Source

Finish styling of the modal + fixed down arrow bug

pull/127/head
Justin Ferrari 2 years ago
parent
73e4129d06
commit
55436f6fc1
4 changed files with 150 additions and 78 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 144
      qortal-ui-plugins/plugins/core/components/ChatPage.js
  2. 24
      qortal-ui-plugins/plugins/core/components/ChatScroller-css.js
  3. 16
      qortal-ui-plugins/plugins/core/components/ChatScroller.js
  4. 44
      qortal-ui-plugins/plugins/core/components/ChatTextEditor.js

144
qortal-ui-plugins/plugins/core/components/ChatPage.js
Unescape View File

@ -65,6 +65,7 @@ class ChatPage extends LitElement {
chatEditor: { type: Object },
chatEditorNewChat: { type: Object },
userLanguage: { type: String },
lastMessageRefVisible: { type: Boolean },
}
}
@ -82,10 +83,10 @@ class ChatPage extends LitElement {
.chat-text-area {
display: flex;
position: relative;
justify-content: center;
min-height: 60px;
max-height: 100%;
overflow: hidden;
}
.chat-text-area .typing-area {
@ -145,7 +146,7 @@ class ChatPage extends LitElement {
}
.original-message {
color: black;
color: var(--chat-bubble-msg-color);
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
@ -225,7 +226,7 @@ class ChatPage extends LitElement {
height: auto;
overflow: hidden;
justify-content: center;
background: white;
background-color: var(--white);
padding: 5px;
border-radius: 1px;
}
@ -380,12 +381,14 @@ class ChatPage extends LitElement {
.marginLoader {
margin-right: 8px;
}
.smallLoading,
.smallLoading:after {
border-radius: 50%;
width: 2px;
height: 2px;
}
.smallLoading {
border-width: 0.8em;
border-style: solid;
@ -397,6 +400,7 @@ class ChatPage extends LitElement {
transform: translateZ(0px);
animation: 1.1s linear 0s infinite normal none running loadingAnimation;
}
@-webkit-keyframes loadingAnimation {
0% {
-webkit-transform: rotate(0deg);
@ -407,6 +411,7 @@ class ChatPage extends LitElement {
transform: rotate(360deg);
}
}
@keyframes loadingAnimation {
0% {
-webkit-transform: rotate(0deg);
@ -446,9 +451,67 @@ class ChatPage extends LitElement {
object-fit: contain;
}
.red {
--mdc-theme-primary: #F44336;
.last-message-ref {
position: absolute;
font-size: 18px;
top: -40px;
right: 30px;
width: 50;
height: 50;
z-index: 5;
color: black;
background-color: white;
border-radius: 50%;
transition: all 0.1s ease-in-out;
}
.last-message-ref:hover {
cursor: pointer;
transform: scale(1.1);
}
.arrow-down-icon {
transform: scale(1.15);
}
.modal-button-row {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.modal-button {
font-family: Roboto, sans-serif;
font-size: 16px;
color: var(--mdc-theme-primary);
background-color: transparent;
padding: 8px 10px;
border-radius: 5px;
border: none;
transition: all 0.3s ease-in-out;
}
.modal-button-red {
font-family: Roboto, sans-serif;
font-size: 16px;
color: #F44336;
background-color: transparent;
padding: 8px 10px;
border-radius: 5px;
border: none;
transition: all 0.3s ease-in-out;
}
.modal-button-red:hover {
cursor: pointer;
background-color: #f4433663;
}
.modal-button:hover {
cursor: pointer;
background-color: #03a8f475;
}
`
}
@ -486,12 +549,10 @@ class ChatPage extends LitElement {
this.imageFile = null
this.uid = new ShortUniqueId()
this.userLanguage = ""
this.lastMessageRefVisible = false
}
render() {
console.log(this.chatEditorPlaceholder, "here1123")
const mstring = get("chatpage.cchange8");
console.log(mstring, "here5040");
return html`
<div class="chat-container">
<div>
@ -512,6 +573,17 @@ class ChatPage extends LitElement {
this.renderChatScroller()}
</div>
<div class="chat-text-area" style="${`${(this.repliedToMessageObj || this.editedMessageObj) && "min-height: 120px"}`}">
<div
class='last-message-ref'
style=${(this.lastMessageRefVisible && !this.imageFile) ? 'opacity: 1;' : 'opacity: 0;'}>
<vaadin-icon class='arrow-down-icon' icon='vaadin:arrow-circle-down' slot='icon' @click=${() => {
this.shadowRoot.querySelector("chat-scroller").shadowRoot.getElementById("downObserver")
.scrollIntoView({
behavior: 'smooth',
});
}}>
</vaadin-icon>
</div>
<div class="typing-area">
${this.repliedToMessageObj && html`
<div class="repliedTo-container">
@ -613,24 +685,28 @@ class ChatPage extends LitElement {
</div>
` :
html``}
<button
class="red"
@click=${()=>{
this.imageFile = null
}}
>
${translate("chatpage.cchange33")}
</button>
<button
@click=${()=> {
this._sendMessage({
type: 'image',
imageFile: this.imageFile,
})
}}
>
${translate("chatpage.cchange9")}
</button>
<div class="modal-button-row">
<button
class="modal-button-red"
@click=${()=>{
this.imageFile = null
}}
>
${translate("chatpage.cchange33")}
</button>
<button
class="modal-button"
@click=${()=> {
this._sendMessage({
type: 'image',
imageFile: this.imageFile,
})
}}
>
${translate("chatpage.cchange9")}
</button>
</div>
</div>
</div>
</wrapper-modal>
@ -638,6 +714,10 @@ class ChatPage extends LitElement {
`
}
showLastMessageRefScroller(props) {
this.lastMessageRefVisible = props;
}
setChatEditor(editor) {
this.chatEditor = editor;
}
@ -646,7 +726,7 @@ class ChatPage extends LitElement {
this.chatEditorNewChat = editor;
}
insertImage(file){
insertImage(file) {
if (file.type.includes('image')) {
this.imageFile = file;
this.chatEditor.disable();
@ -663,13 +743,13 @@ class ChatPage extends LitElement {
this.chatEditor.enable();
}
changeMsgInput(id){
changeMsgInput(id) {
this.chatEditor.remove()
this.chatMessageInput = this.shadowRoot.getElementById(id);
this.initChatEditor();
}
async firstUpdated() {
// TODO: Load and fetch messages from localstorage (maybe save messages to localstorage...)
@ -690,7 +770,6 @@ class ChatPage extends LitElement {
window.addEventListener('storage', () => {
const checkLanguage = localStorage.getItem('qortalLanguage');
use(checkLanguage);
console.log(checkLanguage, "language here");
this.userLanguage = checkLanguage;
})
@ -725,7 +804,6 @@ class ChatPage extends LitElement {
this.chatId.includes('direct') === true ? this.isReceipient = true : this.isReceipient = false;
this._chatId = this.chatId.split('/')[1];
const mstring = get("chatpage.cchange8");
console.log(mstring, "here5090");
const placeholder = isRecipient === true ? `Message ${this._chatId}` : `${mstring}`;
this.chatEditorPlaceholder = placeholder;
@ -769,7 +847,6 @@ class ChatPage extends LitElement {
renderPlaceholder() {
const mstring = get("chatpage.cchange8");
console.log(mstring, "here11");
const placeholder = this.isReceipient === true ? `Message ${this._chatId}` : `${mstring}`;
return placeholder;
}
@ -783,7 +860,8 @@ class ChatPage extends LitElement {
.setRepliedToMessageObj=${(val) => this.setRepliedToMessageObj(val)}
.setEditedMessageObj=${(val) => this.setEditedMessageObj(val)}
.focusChatEditor=${() => this.focusChatEditor()}
.sendMessage=${(val)=> this._sendMessage(val)}
.sendMessage=${(val) => this._sendMessage(val)}
.showLastMessageRefScroller=${(val) => this.showLastMessageRefScroller(val)}
>
</chat-scroller>
`

24
qortal-ui-plugins/plugins/core/components/ChatScroller-css.js
Unescape View File

@ -44,30 +44,6 @@ export const chatStyles = css`
padding: 20px 17px;
}
.last-message-ref {
position: fixed;
font-size: 18px;
right: 40px;
bottom: 100px;
width: 50;
height: 50;
z-index: 5;
opacity: 0;
color: black;
background-color: white;
border-radius: 50%;
transition: all 0.1s ease-in-out;
}
.last-message-ref:hover {
cursor: pointer;
transform: scale(1.1);
}
.arrow-down-icon {
transform: scale(1.15);
}
.chat-list {
overflow-y: auto;
overflow-x: hidden;

16
qortal-ui-plugins/plugins/core/components/ChatScroller.js
Unescape View File

@ -28,7 +28,8 @@ class ChatScroller extends LitElement {
setRepliedToMessageObj: { type: Function },
setEditedMessageObj: { type: Function },
focusChatEditor: { type: Function },
sendMessage: { type: Function}
sendMessage: { type: Function},
showLastMessageRefScroller: { type: Function },
}
}
@ -54,7 +55,6 @@ class ChatScroller extends LitElement {
render() {
let formattedMessages = this.messages.reduce((messageArray, message) => {
const lastGroupedMessage = messageArray[messageArray.length - 1];
let timestamp;
@ -103,14 +103,6 @@ class ChatScroller extends LitElement {
)
})}
<div id='downObserver'></div>
<div class='last-message-ref'>
<vaadin-icon class='arrow-down-icon' icon='vaadin:arrow-circle-down' slot='icon' @click=${() => {
this.shadowRoot.getElementById('downObserver').scrollIntoView({
behavior: 'smooth',
})
}}>
</vaadin-icon>
</div>
</ul>
`
}
@ -151,9 +143,9 @@ class ChatScroller extends LitElement {
_downObserverHandler(entries) {
if (!entries[0].isIntersecting) {
this.shadowRoot.querySelector(".last-message-ref").style.opacity = '1'
this.showLastMessageRefScroller(true);
} else {
this.shadowRoot.querySelector(".last-message-ref").style.opacity = '0'
this.showLastMessageRefScroller(false);
}
}

44
qortal-ui-plugins/plugins/core/components/ChatTextEditor.js
Unescape View File

@ -116,11 +116,11 @@ class ChatTextEditor extends LitElement {
cursor: pointer;
}
.chatbar-container textarea {
.chatbar-container textarea {
display: none;
}
.chatbar-container .chat-editor {
.chatbar-container .chat-editor {
display: flex;
max-height: -webkit-fill-available;
width: 100%;
@ -169,9 +169,7 @@ class ChatTextEditor extends LitElement {
</div>
</div>
<textarea style="color: var(--black);" tabindex='1' ?autofocus=${true} ?disabled=${this.isLoading || this.isLoadingMessages} id="messageBox" rows="1"></textarea>
<iframe
}}" id=${this.iframeId} class="chat-editor" tabindex="-1" height=${this.iframeHeight}>
</iframe>
<iframe id=${this.iframeId} class="chat-editor" tabindex="-1" height=${this.iframeHeight}></iframe>
<button class="emoji-button" ?disabled=${this.isLoading || this.isLoadingMessages}>
${html`<img class="emoji" draggable="false" alt="😀" src="/emoji/svg/1f600.svg" />`}
</button>
@ -259,13 +257,13 @@ class ChatTextEditor extends LitElement {
window.addEventListener('storage', () => {
const checkTheme = localStorage.getItem('qortalTheme');
const captionEditor = this.shadowRoot.getElementById(this.iframeId).contentWindow.document.getElementById('testingId')
const chatbar = this.shadowRoot.getElementById(this.iframeId).contentWindow.document.getElementById('testingId');
if (checkTheme === 'dark') {
this.theme = 'dark';
captionEditor.style.cssText = "color:#ffffff;"
chatbar.style.cssText = "color:#ffffff;"
} else {
this.theme = 'light';
captionEditor.style.cssText = "color:#080808;"
chatbar.style.cssText = "color:#080808;"
}
})
@ -416,7 +414,34 @@ class ChatTextEditor extends LitElement {
html {
cursor: text;
}
.chatbar-body {
display: flex;
align-items: center;
}
.chatbar-body::-webkit-scrollbar-track {
background-color: whitesmoke;
border-radius: 7px;
}
.chatbar-body::-webkit-scrollbar {
width: 6px;
border-radius: 7px;
background-color: whitesmoke;
}
.chatbar-body::-webkit-scrollbar-thumb {
background-color: rgb(180, 176, 176);
border-radius: 7px;
transition: all 0.3s ease-in-out;
}
.chatbar-body::-webkit-scrollbar-thumb:hover {
background-color: rgb(148, 146, 146);
cursor: pointer;
}
div {
font-size: 1rem;
line-height: 1.38rem;
@ -433,11 +458,11 @@ class ChatTextEditor extends LitElement {
div[contentEditable=true]:empty:before {
content: attr(data-placeholder);
display: block;
color: rgb(103, 107, 113);
text-overflow: ellipsis;
overflow: hidden;
user-select: none;
white-space: nowrap;
opacity: 0.7;
}
div[contentEditable=false]{
@ -672,6 +697,7 @@ class ChatTextEditor extends LitElement {
editor.mirror = editorConfig.mirrorElement;
editor.content = (editor.frame.contentDocument || editor.frame.document);
editor.content.body.classList.add("chatbar-body");
let elemDiv = document.createElement('div');
elemDiv.setAttribute('contenteditable', 'true');

Write Preview
Loading…
Cancel
Save