qortal.link/qortal-ui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge remote-tracking branch 'justin/feature/implement-UI-edit-reply-messages' into feature/implement-logic-edit-reply-messages

Browse Source
This commit is contained in:
Phillip Lang Martinez 2022-11-16 19:50:09 +02:00
commit a50aae5f19
2 changed files with 84 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -404,30 +404,23 @@ class ChatPage extends LitElement {
.dialogCustom p { .dialogCustom p {
color: var(--black) color: var(--black)
} }
.row {
display: flex;
width: 100%;
align-items: center;
}
.between {
justify-content: space-between;
}
.dialogCustomInner { .dialogCustomInner {
min-width: 300px; min-width: 300px;
height: 40px; height: 40px;
background-color: var(--white); background-color: var(--white);
box-shadow: var(--mdc-dialog-box-shadow, 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)); box-shadow: rgb(119 119 119 / 32%) 0px 4px 12px;
padding: 10px; padding: 10px;
border-radius: 4px; border-radius: 4px;
} }
.dialogCustomInner ul { .dialogCustomInner ul {
padding-left: 0px padding-left: 0px
} }
.dialogCustomInner li { .dialogCustomInner li {
margin-bottom: 10px; margin-bottom: 10px;
} }
.marginLoader { .marginLoader {
margin-right: 8px; margin-right: 8px;
} }
@ -438,7 +431,7 @@ class ChatPage extends LitElement {
height: 2px; height: 2px;
} }
.smallLoading { .smallLoading {
border-width: 0.6em; border-width: 0.8em;
border-style: solid; border-style: solid;
border-color: rgba(3, 169, 244, 0.2) rgba(3, 169, 244, 0.2) border-color: rgba(3, 169, 244, 0.2) rgba(3, 169, 244, 0.2)
rgba(3, 169, 244, 0.2) rgb(3, 169, 244); rgba(3, 169, 244, 0.2) rgb(3, 169, 244);
@ -479,20 +472,9 @@ class ChatPage extends LitElement {
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; padding: 0 10px;
flex-direction: column; gap: 10px;
height: 100%; height: 100%;
padding: 18px 18px 0 18px;
gap: 15px;
}
.dialog-container:after {
position: absolute;
content: "";
bottom: -15px;
height: 1px;
width: 95%;
background: #dddddd;
} }
.dialog-image { .dialog-image {
@ -746,27 +728,16 @@ class ChatPage extends LitElement {
<div class="dialogCustom"> <div class="dialogCustom">
<div class="dialogCustomInner"> <div class="dialogCustomInner">
<div class="dialog-container"> <div class="dialog-container">
<div class="row between">
<div class=${`smallLoading marginLoader`}></div> <div class=${`smallLoading marginLoader`}></div>
<p> <p>
${this.isDeletingImage ? ${this.isDeletingImage ?
translate("chatpage.cchange31") : translate("chatpage.cchange30")} translate("chatpage.cchange31") : translate("chatpage.cchange30")}
</p> </p>
</div> </div>
</div> </div>
</div>
</div> </div>
</div> </div>
`: ''} `: ''}
</div> </div>
` `
} }

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

@ -114,16 +114,14 @@ class ChatScroller extends LitElement {
} }
async firstUpdated() { async firstUpdated() {
this.viewElement = this.shadowRoot.getElementById('viewElement') this.viewElement = this.shadowRoot.getElementById('viewElement');
this.upObserverElement = this.shadowRoot.getElementById('upObserver') this.upObserverElement = this.shadowRoot.getElementById('upObserver');
this.downObserverElement = this.shadowRoot.getElementById('downObserver') this.downObserverElement = this.shadowRoot.getElementById('downObserver');
// Intialize Observers // Intialize Observers
this.upElementObserver() this.upElementObserver();
this.downElementObserver() this.downElementObserver();
await this.updateComplete await this.updateComplete;
this.viewElement.scrollTop = this.viewElement.scrollHeight + 50 this.viewElement.scrollTop = this.viewElement.scrollHeight;
} }
_getOldMessage(_scrollElement) { _getOldMessage(_scrollElement) {