jschulthess/qortal-ui
1
0
Fork 0
forked from Qortal/qortal-ui
Code Issues Pull Requests Projects Releases Wiki Activity

Fixed chat image loading modal

Browse Source
This commit is contained in:
Justin Ferrari 2022-11-16 12:40:51 -05:00
parent 0b7dbeeb0d
commit 7df50f3076
2 changed files with 84 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -390,84 +390,77 @@ class ChatPage extends LitElement {
} }
.dialogCustom { .dialogCustom {
position: fixed; position: fixed;
z-index: 10000; z-index: 10000;
display: flex; display: flex;
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
top: 10px; top: 10px;
right: 20px; right: 20px;
user-select: none; user-select: none;
} }
.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 {
padding-left: 0px .dialogCustomInner ul {
} padding-left: 0px
.dialogCustomInner li { }
margin-bottom: 10px; .dialogCustomInner li {
} margin-bottom: 10px;
.marginLoader { }
margin-right: 8px;
.marginLoader {
margin-right: 8px;
}
.smallLoading,
.smallLoading:after {
border-radius: 50%;
width: 2px;
height: 2px;
}
.smallLoading {
border-width: 0.8em;
border-style: solid;
border-color: rgba(3, 169, 244, 0.2) rgba(3, 169, 244, 0.2)
rgba(3, 169, 244, 0.2) rgb(3, 169, 244);
font-size: 10px;
position: relative;
text-indent: -9999em;
transform: translateZ(0px);
animation: 1.1s linear 0s infinite normal none running loadingAnimation;
}
@-webkit-keyframes loadingAnimation {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
} }
.smallLoading, 100% {
.smallLoading:after { -webkit-transform: rotate(360deg);
border-radius: 50%; transform: rotate(360deg);
width: 2px; }
height: 2px; }
} @keyframes loadingAnimation {
.smallLoading { 0% {
border-width: 0.6em; -webkit-transform: rotate(0deg);
border-style: solid; transform: rotate(0deg);
border-color: rgba(3, 169, 244, 0.2) rgba(3, 169, 244, 0.2) }
rgba(3, 169, 244, 0.2) rgb(3, 169, 244); 100% {
font-size: 10px; -webkit-transform: rotate(360deg);
position: relative; transform: rotate(360deg);
text-indent: -9999em; }
transform: translateZ(0px); }
animation: 1.1s linear 0s infinite normal none running loadingAnimation;
}
@-webkit-keyframes loadingAnimation {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes loadingAnimation {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.mdc-dialog .mdc-dialog__surface { .mdc-dialog .mdc-dialog__surface {
border-radius: 10px; border-radius: 10px;
@ -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 {
@ -744,29 +726,18 @@ class ChatPage extends LitElement {
</div> </div>
${(this.isUploadingImage || this.isDeletingImage) ? html` ${(this.isUploadingImage || this.isDeletingImage) ? html`
<div class="dialogCustom"> <div class="dialogCustom">
<div class="dialogCustomInner"> <div class="dialogCustomInner">
<div class="dialog-container"> <div class="dialog-container">
<div class=${`smallLoading marginLoader`}></div>
<div class="row between"> <p>
${this.isDeletingImage ?
<div class=${`smallLoading marginLoader`}></div> translate("chatpage.cchange31") : translate("chatpage.cchange30")}
<p> </p>
${this.isDeletingImage ? </div>
translate("chatpage.cchange31") : translate("chatpage.cchange30")} </div>
</div>
</p> </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) {