RanchiMall/messenger
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v0.28.80

Browse Source 
Fix: issue with new chats throwing error when first initiated

Fix: issue chat preview in personalise didn't show chat background
This commit is contained in:
sairaj mote 2021-02-10 19:27:20 +05:30
parent bc4dbf6c03
commit 971c5dc5b3
4 changed files with 135 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
css/main.css
View File

@ -508,14 +508,16 @@ sm-button.danger {
place-content: center; place-content: center;
justify-items: center; justify-items: center;
} }
#loading_page svg {
.page__loader {
z-index: 1; z-index: 1;
transform-origin: bottom; transform-origin: bottom;
height: 6rem; height: 6rem;
width: 6rem; width: 6rem;
animation: bounce 0.5s infinite alternate ease-in; animation: bounce 0.5s infinite alternate ease-in;
} }
#loading_page .shadow {
.shadow {
margin-top: -1rem; margin-top: -1rem;
width: 5rem; width: 5rem;
height: 2rem; height: 2rem;
@ -524,7 +526,8 @@ sm-button.danger {
animation: scale 0.5s infinite alternate ease-in; animation: scale 0.5s infinite alternate ease-in;
margin-left: 1rem; margin-left: 1rem;
} }
#loading_page h4 {
.page__tag-line {
margin-top: 2rem; margin-top: 2rem;
} }
@ -1045,7 +1048,7 @@ sm-button.danger {
text-align: center; text-align: center;
} }
#contacts #contacts_container { #contacts #contacts_container {
padding-bottom: 6rem; padding-bottom: 1.5rem;
} }
#contacts #contacts_container::before { #contacts #contacts_container::before {
display: flex; display: flex;
@ -1107,14 +1110,9 @@ sm-button.danger {
margin: 0; margin: 0;
width: 100%; width: 100%;
} }
#contacts .header sm-input .icon, #mails .header sm-input .icon, #settings_page .header sm-input .icon {
stroke: rgba(var(--text-color), 0.5);
height: 0.9rem;
width: 0.9rem;
}
#contacts .header sm-input::part(input), #mails .header sm-input::part(input), #settings_page .header sm-input::part(input) { #contacts .header sm-input::part(input), #mails .header sm-input::part(input), #settings_page .header sm-input::part(input) {
border-radius: 0.5rem; border-radius: 0.5rem;
padding: 0.2rem 0.8rem; padding: 0.5rem 1rem;
} }
#contacts .header h4, #mails .header h4, #settings_page .header h4 { #contacts .header h4, #mails .header h4, #settings_page .header h4 {
text-transform: capitalize; text-transform: capitalize;
@ -1122,6 +1120,7 @@ sm-button.danger {
} }
#contacts .header .icon, #mails .header .icon, #settings_page .header .icon { #contacts .header .icon, #mails .header .icon, #settings_page .header .icon {
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
margin-right: 1rem;
} }
#contacts .header .flex .hamburger-menu-button, #mails .header .flex .hamburger-menu-button, #settings_page .header .flex .hamburger-menu-button { #contacts .header .flex .hamburger-menu-button, #mails .header .flex .hamburger-menu-button, #settings_page .header .flex .hamburger-menu-button {
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
@ -1615,7 +1614,7 @@ sm-panel {
.has-bg-image .received, .has-bg-image .received,
.has-bg-image .group-event-card, .has-bg-image .group-event-card,
.has-bg-image .date-card { .has-bg-image .date-card {
background: rgba(var(--foreground-color), 0.6); background: rgba(var(--foreground-color), 0.8);
} }
.has-bg-image .received::after { .has-bg-image .received::after {
border-color: transparent rgba(var(--foreground-color), 0.6) transparent transparent; border-color: transparent rgba(var(--foreground-color), 0.6) transparent transparent;
@ -1728,6 +1727,11 @@ sm-panel {
margin: 0.5rem 0 1.5rem 0; margin: 0.5rem 0 1.5rem 0;
width: min(60ch, 100%); width: min(60ch, 100%);
} }
#settings_page #chat_preview {
margin-top: 1rem;
padding: 1rem;
border-radius: 0.5rem;
}
#settings_page #bg_preview_container { #settings_page #bg_preview_container {
padding: 1rem 0; padding: 1rem 0;
gap: 0.5rem; gap: 0.5rem;
@ -1744,20 +1748,17 @@ sm-panel {
overflow: hidden; overflow: hidden;
background: rgba(var(--text-color), 0.1); background: rgba(var(--text-color), 0.1);
} }
#settings_page .bg-preview img { #settings_page .bg-preview--selected::after {
object-fit: cover;
height: 100%;
width: 100%;
}
#settings_page .bg-preview.selected::after {
content: ""; content: "";
position: absolute; position: absolute;
height: 100%; height: 100%;
width: 100%; width: 100%;
box-shadow: 0 0 0 0.5rem rgba(var(--text-color), 0.8) inset; box-shadow: 0 0 0 0.5rem rgba(var(--text-color), 0.8) inset;
} }
#settings_page #selected_bg_preview[src=""] { #settings_page .bg-preview__image {
display: none; object-fit: cover;
height: 100%;
width: 100%;
} }
#video_call_page { #video_call_page {
@ -1769,16 +1770,19 @@ sm-panel {
object-fit: cover; object-fit: cover;
object-position: center; object-position: center;
} }
#video_call_page #their_video {
#their_video {
height: 100%; height: 100%;
} }
#video_call_page #my_video {
#my_video {
width: max(20vh, 12rem); width: max(20vh, 12rem);
bottom: 0; bottom: 0;
right: 0; right: 0;
border-radius: 1rem; border-radius: 1rem;
} }
#video_call_page #call_controls {
#call_controls {
padding: 1.5rem; padding: 1.5rem;
margin-top: auto; margin-top: auto;
justify-self: center; justify-self: center;

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

96
css/main.scss
View File

@ -457,25 +457,25 @@ sm-button.danger{
display: grid; display: grid;
place-content: center; place-content: center;
justify-items: center; justify-items: center;
svg{ }
z-index: 1; .page__loader{
transform-origin: bottom; z-index: 1;
height: 6rem; transform-origin: bottom;
width: 6rem; height: 6rem;
animation: bounce 0.5s infinite alternate ease-in; width: 6rem;
} animation: bounce 0.5s infinite alternate ease-in;
.shadow{ }
margin-top: -1rem; .shadow{
width: 5rem; margin-top: -1rem;
height: 2rem; width: 5rem;
background: rgba(var(--text-color), 0.1); height: 2rem;
border-radius: 50%; background: rgba(var(--text-color), 0.1);
animation: scale 0.5s infinite alternate ease-in; border-radius: 50%;
margin-left: 1rem; animation: scale 0.5s infinite alternate ease-in;
} margin-left: 1rem;
h4{ }
margin-top: 2rem; .page__tag-line{
} margin-top: 2rem;
} }
@keyframes bounce{ @keyframes bounce{
0%{ 0%{
@ -976,7 +976,7 @@ sm-button.danger{
} }
} }
#contacts_container{ #contacts_container{
padding-bottom: 6rem; padding-bottom: 1.5rem;
&::before{ &::before{
display: flex; display: flex;
content: 'Contacts'; content: 'Contacts';
@ -1035,15 +1035,10 @@ sm-button.danger{
sm-input{ sm-input{
margin: 0; margin: 0;
width: 100%; width: 100%;
.icon{
stroke: rgba(var(--text-color), 0.5);
height: 0.9rem;
width: 0.9rem;
}
} }
sm-input::part(input){ sm-input::part(input){
border-radius: 0.5rem; border-radius: 0.5rem;
padding: 0.2rem 0.8rem; padding: 0.5rem 1rem;
} }
h4{ h4{
text-transform: capitalize; text-transform: capitalize;
@ -1051,6 +1046,7 @@ sm-button.danger{
} }
.icon{ .icon{
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
margin-right: 1rem;
} }
.flex{ .flex{
.hamburger-menu-button{ .hamburger-menu-button{
@ -1521,7 +1517,7 @@ sm-panel{
.received, .received,
.group-event-card, .group-event-card,
.date-card{ .date-card{
background: rgba(var(--foreground-color), 0.6); background: rgba(var(--foreground-color), 0.8);
} }
.received::after{ .received::after{
border-color: transparent rgba(var(--foreground-color), 0.6) transparent transparent; border-color: transparent rgba(var(--foreground-color), 0.6) transparent transparent;
@ -1634,6 +1630,11 @@ sm-panel{
margin: 0.5rem 0 1.5rem 0; margin: 0.5rem 0 1.5rem 0;
width: min(60ch, 100%); width: min(60ch, 100%);
} }
#chat_preview{
margin-top: 1rem;
padding: 1rem;
border-radius: 0.5rem;
}
#bg_preview_container{ #bg_preview_container{
padding: 1rem 0; padding: 1rem 0;
gap: 0.5rem; gap: 0.5rem;
@ -1649,12 +1650,7 @@ sm-panel{
border-radius: 1rem; border-radius: 1rem;
overflow: hidden; overflow: hidden;
background: rgba(var(--text-color), 0.1); background: rgba(var(--text-color), 0.1);
img{ &--selected::after{
object-fit: cover;
height: 100%;
width: 100%;
}
&.selected::after{
content: ''; content: '';
position: absolute; position: absolute;
height: 100%; height: 100%;
@ -1662,8 +1658,10 @@ sm-panel{
box-shadow: 0 0 0 0.5rem rgba(var(--text-color), 0.8) inset; box-shadow: 0 0 0 0.5rem rgba(var(--text-color), 0.8) inset;
} }
} }
#selected_bg_preview[src=""]{ .bg-preview__image{
display: none; object-fit: cover;
height: 100%;
width: 100%;
} }
} }
#video_call_page{ #video_call_page{
@ -1674,20 +1672,20 @@ sm-panel{
object-fit: cover; object-fit: cover;
object-position: center; object-position: center;
} }
#their_video{ }
height: 100%; #their_video{
} height: 100%;
#my_video{ }
width: max(20vh, 12rem); #my_video{
bottom: 0; width: max(20vh, 12rem);
right: 0; bottom: 0;
border-radius: 1rem; right: 0;
} border-radius: 1rem;
#call_controls{ }
padding: 1.5rem; #call_controls{
margin-top: auto; padding: 1.5rem;
justify-self: center; margin-top: auto;
} justify-self: center;
} }
@media screen and (max-width: 640px){ @media screen and (max-width: 640px){
.hide-on-mobile{ .hide-on-mobile{

92
index.html
View File

@ -110,7 +110,7 @@
</div> </div>
</div> </div>
<div id="loading_page" class="page hide-completely"> <div id="loading_page" class="page hide-completely">
<svg viewBox="0 0 512 512"> <svg class="page__loader" viewBox="0 0 512 512">
<defs> <defs>
<style> <style>
.a { .a {
@ -156,7 +156,7 @@
<path class="e" d="M325,314.13c21,4.22,36.85,12.82,36.85,25.8a69.7,69.7,0,0,1-41.09,63.58" /> <path class="e" d="M325,314.13c21,4.22,36.85,12.82,36.85,25.8a69.7,69.7,0,0,1-41.09,63.58" />
</svg> </svg>
<div class="shadow"></div> <div class="shadow"></div>
<h4>Getting everything ready, Hang on.</h4> <h4 class="page__tag-line">Getting everything ready, Hang on.</h4>
</div> </div>
<sm-popup id="add_contact_popup"> <sm-popup id="add_contact_popup">
<header class="popup-header" slot="header"> <header class="popup-header" slot="header">
@ -370,11 +370,11 @@
<polyline points="29.64 60.97 0.65 32 29.64 3.03"/> <polyline points="29.64 60.97 0.65 32 29.64 3.03"/>
</svg> </svg>
<sm-input id="search_chats" class="outlined" type="search" placeholder="Search"> <sm-input id="search_chats" class="outlined" type="search" placeholder="Search">
<svg slot="icon" class="icon" viewBox="0 0 64 64"> <!-- <svg slot="icon" class="icon" viewBox="0 0 64 64">
<title>Search</title> <title>Search</title>
<path d="M25.69,1A24.7,24.7,0,0,1,43.15,43.15,24.7,24.7,0,0,1,8.23,8.22,24.53,24.53,0,0,1,25.69,1m0-1A25.7,25.7,0,1,0,43.85,7.51,25.64,25.64,0,0,0,25.69,0Z"/> <path d="M25.69,1A24.7,24.7,0,0,1,43.15,43.15,24.7,24.7,0,0,1,8.23,8.22,24.53,24.53,0,0,1,25.69,1m0-1A25.7,25.7,0,1,0,43.85,7.51,25.64,25.64,0,0,0,25.69,0Z"/>
<line x1="63.65" y1="63.66" x2="43.36" y2="43.37"/> <line x1="63.65" y1="63.66" x2="43.36" y2="43.37"/>
</svg> </svg> -->
</sm-input> </sm-input>
</div> </div>
</header> </header>
@ -407,11 +407,11 @@
<polyline points="29.64 60.97 0.65 32 29.64 3.03"/> <polyline points="29.64 60.97 0.65 32 29.64 3.03"/>
</svg> </svg>
<sm-input id="search_contacts" class="outlined" type="search" placeholder="Enter name or FLO ID"> <sm-input id="search_contacts" class="outlined" type="search" placeholder="Enter name or FLO ID">
<svg slot="icon" class="icon" viewBox="0 0 64 64"> <!-- <svg slot="icon" class="icon" viewBox="0 0 64 64">
<title>Search</title> <title>Search</title>
<path d="M25.69,1A24.7,24.7,0,0,1,43.15,43.15,24.7,24.7,0,0,1,8.23,8.22,24.53,24.53,0,0,1,25.69,1m0-1A25.7,25.7,0,1,0,43.85,7.51,25.64,25.64,0,0,0,25.69,0Z"/> <path d="M25.69,1A24.7,24.7,0,0,1,43.15,43.15,24.7,24.7,0,0,1,8.23,8.22,24.53,24.53,0,0,1,25.69,1m0-1A25.7,25.7,0,1,0,43.85,7.51,25.64,25.64,0,0,0,25.69,0Z"/>
<line x1="63.65" y1="63.66" x2="43.36" y2="43.37"/> <line x1="63.65" y1="63.66" x2="43.36" y2="43.37"/>
</svg> </svg> -->
</sm-input> </sm-input>
</div> </div>
</header> </header>
@ -660,13 +660,15 @@
<div id="personalise_panel" class="panel hide-completely"> <div id="personalise_panel" class="panel hide-completely">
<section> <section>
<h4>Chat preview</h4> <h4>Chat preview</h4>
<div class="message sent"> <div id="chat_preview">
<p class="message-body">Hey there!</p> <div class="message sent">
<time class="time">12:00PM</time> <p class="message-body">Hey there!</p>
</div> <time class="time">12:00PM</time>
<div class="message received"> </div>
<p class="message-body">How are you?</p> <div class="message received">
<time class="time">12:00PM</time> <p class="message-body">How are you?</p>
<time class="time">12:00PM</time>
</div>
</div> </div>
</section> </section>
<sm-switch id="theme_switcher"> <sm-switch id="theme_switcher">
@ -678,10 +680,10 @@
<section> <section>
<h4>Set chat and mail background image</h4> <h4>Set chat and mail background image</h4>
<div id="bg_preview_container" class="flex"> <div id="bg_preview_container" class="flex">
<div id="selected_bg_preview" class="bg-preview" onclick="setBgImage()"> <div id="selected_bg_preview" class="bg-preview hide-completely" onclick="setBgImage()">
<img src="" alt="background perview"> <img src="" alt="background perview" class="bg-preview__image">
</div> </div>
<div id="default_bg_preview" class="bg-preview selected" onclick="setDefaultBg()">Default</div> <div id="default_bg_preview" class="bg-preview bg-preview--selected" onclick="setDefaultBg()">Default</div>
</div> </div>
<label class="select-file"> <label class="select-file">
<sm-button id="select_bg_button">Select background</sm-button> <sm-button id="select_bg_button">Select background</sm-button>
@ -1347,6 +1349,20 @@
renderArticle(location.hash.slice(1)) renderArticle(location.hash.slice(1))
} }
} }
function debounce(func, wait, immediate) {
let timeout;
return function() {
let context = this, args = arguments;
let later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
let callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};
</script> </script>
<script id="floGlobals"> <script id="floGlobals">
/* Constants for FLO blockchain operations !!Make sure to add this at begining!! */ /* Constants for FLO blockchain operations !!Make sure to add this at begining!! */
@ -2664,7 +2680,7 @@
} }
frag.append(render.messageBubble({...messages[i], updateChatCard})) frag.append(render.messageBubble({...messages[i], updateChatCard}))
} }
const contact = getRef('chat_container').querySelector(`.chat[flo-id='${floID}']`) const contact = getRef('chat_container').querySelector(`.contact[flo-id='${floID || groupID}']`)
if (markUnread && contact){ if (markUnread && contact){
contact.classList.add("unread"); contact.classList.add("unread");
if(contact !== getRef('chat_container').children[0]){ if(contact !== getRef('chat_container').children[0]){
@ -2683,10 +2699,13 @@
} }
} }
if(updateChatCard){ if(updateChatCard){
let chatCard = getRef('chat_container').querySelector(`.contact[flo-id="${floID || groupID}"]`) let chatCard
if(!chatCard){ if(!contact){
chatCard = render.contactCard(floID, {type: 'chat', markUnread: true}) getRef('chat_container').prepend(render.contactCard(floID, {type: 'chat', markUnread: true}))
getRef('chat_container').prepend(chatCard) chatCard = getRef('chat_container').firstElementChild
}
else{
chatCard = contact
} }
let finalMessage let finalMessage
if(floGlobals.contacts[sender]) if(floGlobals.contacts[sender])
@ -2695,8 +2714,6 @@
finalMessage = `You: ${message}` finalMessage = `You: ${message}`
else else
finalMessage = message finalMessage = message
chatCard.querySelector('.last-message').textContent = finalMessage
chatCard.querySelector('.time').textContent = getFormatedTime(time, true)
if(activeChat.floID === (floID || groupID)){ if(activeChat.floID === (floID || groupID)){
if(chatScrollInfo.isScrolledUp) if(chatScrollInfo.isScrolledUp)
@ -3122,7 +3139,7 @@
getRef('chat_left').classList.add('hide-on-medium') getRef('chat_left').classList.add('hide-on-medium')
getRef('chat_details_panel').classList.remove('hide-completely') getRef('chat_details_panel').classList.remove('hide-completely')
animateTo(getRef('chat_details_panel'), [ animateTo(getRef('chat_details_panel'), [
{transform: 'translateX(3rem)'}, {transform: 'translateX(100%)'},
{transform: 'translateX(0)'}, {transform: 'translateX(0)'},
], ],
{ {
@ -3134,10 +3151,10 @@
isChatDetailsOpen = false isChatDetailsOpen = false
animateTo(getRef('chat_details_panel'), [ animateTo(getRef('chat_details_panel'), [
{transform: 'translateX(0)'}, {transform: 'translateX(0)'},
{transform: 'translateX(3rem)'}, {transform: 'translateX(100%)'},
], ],
{ {
duration: animate ? 300 : 0, duration: animate ? 150 : 0,
easing: 'ease' easing: 'ease'
}).onfinish = () => { }).onfinish = () => {
getRef('chat').classList.remove('expand-side-panel') getRef('chat').classList.remove('expand-side-panel')
@ -3359,6 +3376,14 @@
} }
else{ else{
document.querySelectorAll('.page').forEach(page => page.classList.add('hide-completely')) document.querySelectorAll('.page').forEach(page => page.classList.add('hide-completely'))
switch(targetPage){
case 'sign_in_page':
console.log('signing in')
setTimeout(() => {
getRef('private_key_input_field').focusIn()
},100)
break;
}
} }
getRef(targetPage).classList.remove('hide-completely') getRef(targetPage).classList.remove('hide-completely')
} }
@ -3419,18 +3444,21 @@
async function setBgImage(){ async function setBgImage(){
try{ try{
const image = await compactIDB.readData('userSettings', 'bgImage') const image = await compactIDB.readData('userSettings', 'bgImage')
console.log(image)
if(image){ if(image){
const url = URL.createObjectURL(image) const url = URL.createObjectURL(image)
getRef('chat').style.background = `linear-gradient(rgba(var(--foreground-color), 0.6), rgba(var(--foreground-color), 0.6)), url(${url}) center no-repeat` getRef('chat').style.background = `linear-gradient(rgba(var(--foreground-color), 0.6), rgba(var(--foreground-color), 0.6)), url(${url}) center no-repeat`
getRef('mail').style.background = `linear-gradient(rgba(var(--foreground-color), 0.6), rgba(var(--foreground-color), 0.6)), url(${url}) center no-repeat` getRef('mail').style.background = `linear-gradient(rgba(var(--foreground-color), 0.6), rgba(var(--foreground-color), 0.6)), url(${url}) center no-repeat`
getRef('chat_preview').style.background = `linear-gradient(rgba(var(--foreground-color), 0.6), rgba(var(--foreground-color), 0.6)), url(${url}) center no-repeat`
getRef('chat').style.backgroundSize = 'cover' getRef('chat').style.backgroundSize = 'cover'
getRef('mail').style.backgroundSize = 'cover' getRef('mail').style.backgroundSize = 'cover'
getRef('chat_preview').style.backgroundSize = 'cover'
getRef('chat').classList.add('has-bg-image') getRef('chat').classList.add('has-bg-image')
getRef('mail').classList.add('has-bg-image') getRef('mail').classList.add('has-bg-image')
getRef('chat_preview').classList.add('has-bg-image')
getRef('selected_bg_preview').firstElementChild.src = url getRef('selected_bg_preview').firstElementChild.src = url
getRef('selected_bg_preview').classList.add('selected') getRef('selected_bg_preview').classList.add('bg-preview--selected')
getRef('default_bg_preview').classList.remove('selected') getRef('selected_bg_preview').classList.remove('hide-completely')
getRef('default_bg_preview').classList.remove('bg-preview--selected')
getRef('select_bg_button').textContent = 'Change background' getRef('select_bg_button').textContent = 'Change background'
} }
} }
@ -3442,10 +3470,12 @@
function setDefaultBg(){ function setDefaultBg(){
getRef('chat').style.background = `` getRef('chat').style.background = ``
getRef('mail').style.background = `` getRef('mail').style.background = ``
getRef('chat_preview').style.background = ``
getRef('chat').classList.remove('has-bg-image') getRef('chat').classList.remove('has-bg-image')
getRef('mail').classList.remove('has-bg-image') getRef('mail').classList.remove('has-bg-image')
getRef('selected_bg_preview').classList.remove('selected') getRef('chat_preview').classList.remove('has-bg-image')
getRef('default_bg_preview').classList.add('selected') getRef('selected_bg_preview').classList.remove('bg-preview--selected')
getRef('default_bg_preview').classList.add('bg-preview--selected')
notify('Default background applied', 'success') notify('Default background applied', 'success')
} }