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

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

pull/127/head
Phillip Lang Martinez 2 years ago
parent
37823e9298 7df50f3076
commit
a50aae5f19
2 changed files with 84 additions and 115 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 183
      qortal-ui-plugins/plugins/core/components/ChatPage.js
  2. 16
      qortal-ui-plugins/plugins/core/components/ChatScroller.js

183
qortal-ui-plugins/plugins/core/components/ChatPage.js
Unescape 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);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@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; }
}
.smallLoading {
border-width: 0.6em;
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);
}
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
Unescape 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) {

Write Preview
Loading…
Cancel
Save