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

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

@ -390,84 +390,77 @@ class ChatPage extends LitElement {
}
.dialogCustom {
position: fixed;
z-index: 10000;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
top: 10px;
right: 20px;
user-select: none;
}
position: fixed;
z-index: 10000;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
top: 10px;
right: 20px;
user-select: none;
}
.dialogCustom p {
color: var(--black)
}
.row {
display: flex;
width: 100%;
align-items: center;
}
.between {
justify-content: space-between;
}
.dialogCustomInner {
min-width: 300px;
height: 40px;
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));
padding: 10px;
border-radius: 4px;
}
.dialogCustomInner ul {
padding-left: 0px
}
.dialogCustomInner li {
margin-bottom: 10px;
}
.marginLoader {
margin-right: 8px;
min-width: 300px;
height: 40px;
background-color: var(--white);
box-shadow: rgb(119 119 119 / 32%) 0px 4px 12px;
padding: 10px;
border-radius: 4px;
}
.dialogCustomInner ul {
padding-left: 0px
}
.dialogCustomInner li {
margin-bottom: 10px;
}
.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,
.smallLoading:after {
border-radius: 50%;
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);
}
}
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 {
border-radius: 10px;
@ -479,20 +472,9 @@ class ChatPage extends LitElement {
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 10px;
gap: 10px;
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 {
@ -744,29 +726,18 @@ class ChatPage extends LitElement {
</div>
${(this.isUploadingImage || this.isDeletingImage) ? html`
<div class="dialogCustom">
<div class="dialogCustomInner">
<div class="dialog-container">
<div class="row between">
<div class=${`smallLoading marginLoader`}></div>
<p>
${this.isDeletingImage ?
translate("chatpage.cchange31") : translate("chatpage.cchange30")}
</p>
</div>
</div>
</div>
</div>
</div>
<div class="dialogCustomInner">
<div class="dialog-container">
<div class=${`smallLoading marginLoader`}></div>
<p>
${this.isDeletingImage ?
translate("chatpage.cchange31") : translate("chatpage.cchange30")}
</p>
</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() {
this.viewElement = this.shadowRoot.getElementById('viewElement')
this.upObserverElement = this.shadowRoot.getElementById('upObserver')
this.downObserverElement = this.shadowRoot.getElementById('downObserver')
this.viewElement = this.shadowRoot.getElementById('viewElement');
this.upObserverElement = this.shadowRoot.getElementById('upObserver');
this.downObserverElement = this.shadowRoot.getElementById('downObserver');
// Intialize Observers
this.upElementObserver()
this.downElementObserver()
await this.updateComplete
this.viewElement.scrollTop = this.viewElement.scrollHeight + 50
this.upElementObserver();
this.downElementObserver();
await this.updateComplete;
this.viewElement.scrollTop = this.viewElement.scrollHeight;
}
_getOldMessage(_scrollElement) {