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

92
index.html
View File

@ -110,7 +110,7 @@
</div>
</div>
<div id="loading_page" class="page hide-completely">
<svg viewBox="0 0 512 512">
<svg class="page__loader" viewBox="0 0 512 512">
<defs>
<style>
.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" />
</svg>
<div class="shadow"></div>
<h4>Getting everything ready, Hang on.</h4>
<h4 class="page__tag-line">Getting everything ready, Hang on.</h4>
</div>
<sm-popup id="add_contact_popup">
<header class="popup-header" slot="header">
@ -370,11 +370,11 @@
<polyline points="29.64 60.97 0.65 32 29.64 3.03"/>
</svg>
<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>
<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"/>
</svg>
</svg> -->
</sm-input>
</div>
</header>
@ -407,11 +407,11 @@
<polyline points="29.64 60.97 0.65 32 29.64 3.03"/>
</svg>
<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>
<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"/>
</svg>
</svg> -->
</sm-input>
</div>
</header>
@ -660,13 +660,15 @@
<div id="personalise_panel" class="panel hide-completely">
<section>
<h4>Chat preview</h4>
<div class="message sent">
<p class="message-body">Hey there!</p>
<time class="time">12:00PM</time>
</div>
<div class="message received">
<p class="message-body">How are you?</p>
<time class="time">12:00PM</time>
<div id="chat_preview">
<div class="message sent">
<p class="message-body">Hey there!</p>
<time class="time">12:00PM</time>
</div>
<div class="message received">
<p class="message-body">How are you?</p>
<time class="time">12:00PM</time>
</div>
</div>
</section>
<sm-switch id="theme_switcher">
@ -678,10 +680,10 @@
<section>
<h4>Set chat and mail background image</h4>
<div id="bg_preview_container" class="flex">
<div id="selected_bg_preview" class="bg-preview" onclick="setBgImage()">
<img src="" alt="background perview">
<div id="selected_bg_preview" class="bg-preview hide-completely" onclick="setBgImage()">
<img src="" alt="background perview" class="bg-preview__image">
</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>
<label class="select-file">
<sm-button id="select_bg_button">Select background</sm-button>
@ -1347,6 +1349,20 @@
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 id="floGlobals">
/* Constants for FLO blockchain operations !!Make sure to add this at begining!! */
@ -2664,7 +2680,7 @@
}
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){
contact.classList.add("unread");
if(contact !== getRef('chat_container').children[0]){
@ -2683,10 +2699,13 @@
}
}
if(updateChatCard){
let chatCard = getRef('chat_container').querySelector(`.contact[flo-id="${floID || groupID}"]`)
if(!chatCard){
chatCard = render.contactCard(floID, {type: 'chat', markUnread: true})
getRef('chat_container').prepend(chatCard)
let chatCard
if(!contact){
getRef('chat_container').prepend(render.contactCard(floID, {type: 'chat', markUnread: true}))
chatCard = getRef('chat_container').firstElementChild
}
else{
chatCard = contact
}
let finalMessage
if(floGlobals.contacts[sender])
@ -2695,8 +2714,6 @@
finalMessage = `You: ${message}`
else
finalMessage = message
chatCard.querySelector('.last-message').textContent = finalMessage
chatCard.querySelector('.time').textContent = getFormatedTime(time, true)
if(activeChat.floID === (floID || groupID)){
if(chatScrollInfo.isScrolledUp)
@ -3122,7 +3139,7 @@
getRef('chat_left').classList.add('hide-on-medium')
getRef('chat_details_panel').classList.remove('hide-completely')
animateTo(getRef('chat_details_panel'), [
{transform: 'translateX(3rem)'},
{transform: 'translateX(100%)'},
{transform: 'translateX(0)'},
],
{
@ -3134,10 +3151,10 @@
isChatDetailsOpen = false
animateTo(getRef('chat_details_panel'), [
{transform: 'translateX(0)'},
{transform: 'translateX(3rem)'},
{transform: 'translateX(100%)'},
],
{
duration: animate ? 300 : 0,
duration: animate ? 150 : 0,
easing: 'ease'
}).onfinish = () => {
getRef('chat').classList.remove('expand-side-panel')
@ -3359,6 +3376,14 @@
}
else{
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')
}
@ -3419,18 +3444,21 @@
async function setBgImage(){
try{
const image = await compactIDB.readData('userSettings', 'bgImage')
console.log(image)
if(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('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('mail').style.backgroundSize = 'cover'
getRef('chat_preview').style.backgroundSize = 'cover'
getRef('chat').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').classList.add('selected')
getRef('default_bg_preview').classList.remove('selected')
getRef('selected_bg_preview').classList.add('bg-preview--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'
}
}
@ -3442,10 +3470,12 @@
function setDefaultBg(){
getRef('chat').style.background = ``
getRef('mail').style.background = ``
getRef('chat_preview').style.background = ``
getRef('chat').classList.remove('has-bg-image')
getRef('mail').classList.remove('has-bg-image')
getRef('selected_bg_preview').classList.remove('selected')
getRef('default_bg_preview').classList.add('selected')
getRef('chat_preview').classList.remove('has-bg-image')
getRef('selected_bg_preview').classList.remove('bg-preview--selected')
getRef('default_bg_preview').classList.add('bg-preview--selected')
notify('Default background applied', 'success')
}