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

feature addition and UI changes

Browse Source 
Features added
- Popup for showing all information related to a contact and options available related that to an user
-Ability to edit contact names
-Ability to copy contact FLO ID

Fixes
-Fixed issue with lazy loading on mobile chrome causing rapid scrolling to top without user interaction
-Small send icon being visible even when no message is written in message field
This commit is contained in:
sairaj mote 2021-01-14 00:39:37 +05:30
parent e54890b5f1
commit af9c12200b
5 changed files with 278 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
css/main.css
View File

@ -96,6 +96,10 @@ textarea:focus {
box-shadow: 0 0 0 0.1rem var(--accent-color);
}
strong {
font-weight: 500;
}
.flex {
display: flex;
}
@ -167,12 +171,15 @@ textarea:focus {
.fab {
filter: drop-shadow(0 0.4rem 0.3rem rgba(0, 0, 0, 0.2));
margin-right: 1rem;
margin: 1.5rem;
position: fixed;
right: 0;
bottom: 0;
z-index: 1;
}
.fab::part(button) {
padding: 0.9rem 1.6rem;
}
.fab .icon {
margin-left: 0 !important;
margin-right: 0.5rem;
@ -588,6 +595,46 @@ sm-button[variant=primary] .icon {
align-self: flex-start;
}
#contact_details_popup > .flex:first-of-type {
margin: 1rem 0;
}
#contact_details_popup > .flex:first-of-type .flex .icon {
height: 2.6rem;
width: 2.6rem;
padding: 0.85rem;
cursor: pointer;
stroke-width: 8;
}
#contact_details_popup > .flex:first-of-type .flex .icon:hover {
background: rgba(var(--text-color), 0.06);
}
#contact_details_popup h5 {
font-weight: 500;
opacity: 0.8;
}
#contact_details_popup .copy-row {
margin-bottom: 1.5rem;
}
#contact_details_popup .copy-row h4 {
font-weight: 400;
}
#contact_details_popup #contact_initial {
height: 3.6rem;
width: 3.6rem;
font-size: 1.6rem;
border-radius: 4rem;
margin-bottom: 1rem;
}
#contact_details_popup #contact_name {
border-radius: 0.5rem;
max-width: 30ch;
padding: 0.6rem 1.2rem;
}
#contact_details_popup #contact_name:focus {
outline: none;
background: rgba(var(--text-color), 0.1);
}
#warn_no_encryption, .date-card {
padding: 0.4rem 0.8rem;
background: rgba(var(--text-color), 0.1);
@ -723,8 +770,7 @@ sm-button[variant=primary] .icon {
bottom: 0;
top: 0;
padding: 0;
width: max(18rem, 80vw);
height: 100vh;
width: max(16rem, 60vw);
background: rgba(var(--foreground-color), 1);
}
#main_navbar .logo-section {
@ -820,7 +866,8 @@ sm-button[variant=primary] .icon {
height: 100%;
width: 100%;
z-index: 1;
background: linear-gradient(rgba(157, 166, 255, 0.063), rgba(157, 166, 255, 0.063)), rgba(var(--foreground-color), 1);
padding-bottom: 1.5rem;
background: rgba(var(--foreground-color), 1);
transition: transform 0.3s;
transform: translateX(-100%);
}
@ -875,9 +922,15 @@ sm-button[variant=primary] .icon {
#contacts .header h4, #mails .header h4, #settings_page .header h4 {
text-transform: capitalize;
}
#contacts .header .icon, #mails .header .icon, #settings_page .header .icon {
-webkit-tap-highlight-color: transparent;
}
#contacts .header .flex .hamburger-menu-button, #mails .header .flex .hamburger-menu-button, #settings_page .header .flex .hamburger-menu-button {
-webkit-tap-highlight-color: transparent;
margin-right: 1rem;
}
#contacts .header .flex h4, #mails .header .flex h4, #settings_page .header .flex h4 {
flex: 1;
margin: 0 1rem;
}
#contacts .header .flex .icon, #mails .header .flex .icon, #settings_page .header .flex .icon {
height: 2.2rem;
@ -915,8 +968,10 @@ sm-button[variant=primary] .icon {
padding: 0.1rem;
stroke-width: 8;
margin-right: 0.5rem;
stroke: rgba(var(--text-color), 0.8);
}
#chat header .initial {
cursor: pointer;
margin-right: 1rem;
}
#chat header h4 {
@ -965,6 +1020,8 @@ sm-button[variant=primary] .icon {
position: absolute;
right: 1.5rem;
transform: scale(0);
opacity: 0;
pointer-events: none;
z-index: 1;
align-self: center;
height: 2.4rem;
@ -977,8 +1034,10 @@ sm-button[variant=primary] .icon {
transition: 0.3s;
}
#chat #send_message_button.active {
opacity: 1;
fill: var(--accent-color);
transform: none;
pointer-events: all;
}
#chat #type_message {
margin: 0;
@ -1188,7 +1247,7 @@ sm-button[variant=primary] .icon {
}
#dm_container {
padding-bottom: 3.5rem;
padding-bottom: 5rem;
}
sm-tab-panels {
@ -1202,7 +1261,7 @@ sm-panel {
#inbox_mail_container,
#sent_mail_container {
padding-bottom: 3.5rem;
padding-bottom: 5rem;
}
#chat, #mail {
@ -1326,15 +1385,16 @@ sm-panel {
#main_navbar .logo-section {
padding: 1rem;
}
#main_navbar #navbar_backdrop {
#navbar_backdrop {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
z-index: -1;
transition: transform 0.3s;
z-index: 2;
transition: transform 0.3s, opacity 0.3s;
}
#dm_container,
@ -1393,6 +1453,7 @@ sm-panel {
}
sm-popup::part(popup) {
width: 24rem;
min-width: 24rem;
}
@ -1414,8 +1475,8 @@ sm-panel {
#main_navbar {
position: relative;
width: auto;
background: rgba(var(--text-color), 0.05);
padding-bottom: 0.5rem;
background: rgba(var(--text-color), 0.06);
}
#main_navbar .logo-section {
display: flex;
@ -1465,10 +1526,6 @@ sm-panel {
z-index: 1;
}
#contacts, #mails, #settings_sidebar {
background-color: rgba(157, 166, 255, 0.063);
}
#settings_page {
display: grid;
height: 100vh;

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

101
css/main.scss
View File

@ -83,6 +83,9 @@ textarea{
box-shadow: 0 0 0 0.1rem var(--accent-color);
}
}
strong{
font-weight: 500;
}
.flex{
display: flex;
}
@ -138,11 +141,14 @@ textarea{
}
.fab{
filter: drop-shadow(0 0.4rem 0.3rem rgba(0, 0, 0, 0.2));
margin-right: 1rem;
margin: 1.5rem;
position: fixed;
right: 0;
bottom: 0;
z-index: 1;
&::part(button){
padding: 0.9rem 1.6rem;
}
.icon{
margin-left: 0 !important;
margin-right: 0.5rem;
@ -538,6 +544,49 @@ sm-button[variant="primary"]{
align-self: flex-start;
}
}
#contact_details_popup{
& > .flex:first-of-type{
margin: 1rem 0;
.flex{
.icon{
height: 2.6rem;
width: 2.6rem;
padding: 0.85rem;
cursor: pointer;
stroke-width: 8;
&:hover{
background: rgba(var(--text-color), 0.06);
}
}
}
}
h5{
font-weight: 500;
opacity: 0.8;
}
.copy-row{
margin-bottom: 1.5rem;
h4{
font-weight: 400;
}
}
#contact_initial{
height: 3.6rem;
width: 3.6rem;
font-size: 1.6rem;
border-radius: 4rem;
margin-bottom: 1rem;
}
#contact_name{
border-radius: 0.5rem;
max-width: 30ch;
padding: 0.6rem 1.2rem;
&:focus{
outline: none;
background: rgba(var(--text-color), 0.1);
}
}
}
#warn_no_encryption, .date-card{
padding: 0.4rem 0.8rem;
background: rgba(var(--text-color), 0.1);
@ -665,8 +714,7 @@ sm-button[variant="primary"]{
bottom: 0;
top: 0;
padding: 0;
width: max(18rem, 80vw);
height: 100vh;
width: max(16rem, 60vw);
background: rgba(var(--foreground-color), 1);
.logo-section{
margin: 1rem 0 1.5rem 0;
@ -760,7 +808,8 @@ sm-button[variant="primary"]{
height: 100%;
width: 100%;
z-index: 1;
background: linear-gradient(rgba(157, 166, 255, 0.063), rgba(157, 166, 255, 0.063)), rgba(var(--foreground-color), 1);
padding-bottom: 1.5rem;
background: rgba(var(--foreground-color), 1);
transition: transform 0.3s;
transform: translateX(-100%);
.header{
@ -812,10 +861,16 @@ sm-button[variant="primary"]{
h4{
text-transform: capitalize;
}
.icon{
-webkit-tap-highlight-color: transparent;
}
.flex{
.hamburger-menu-button{
-webkit-tap-highlight-color: transparent;
margin-right: 1rem;
}
h4{
flex: 1;
margin: 0 1rem;
}
.icon{
height: 2.2rem;
@ -852,8 +907,10 @@ sm-button[variant="primary"]{
padding: 0.1rem;
stroke-width: 8;
margin-right: 0.5rem;
stroke: rgba(var(--text-color), 0.8);
}
.initial{
cursor: pointer;
margin-right: 1rem;
}
h4{
@ -905,6 +962,8 @@ sm-button[variant="primary"]{
position: absolute;
right: 1.5rem;
transform: scale(0);
opacity: 0;
pointer-events: none;
z-index: 1;
align-self: center;
height: 2.4rem;
@ -916,8 +975,10 @@ sm-button[variant="primary"]{
margin-left: 1rem;
transition: 0.3s;
&.active{
opacity: 1;
fill: var(--accent-color);
transform: none;
pointer-events: all;
}
}
#type_message{
@ -1123,7 +1184,7 @@ sm-button[variant="primary"]{
display: none;
}
#dm_container{
padding-bottom: 3.5rem;
padding-bottom: 5rem;
}
sm-tab-panels{
overflow: hidden auto;
@ -1136,7 +1197,7 @@ sm-panel{
#inbox_mail_container,
#sent_mail_container
{
padding-bottom: 3.5rem;
padding-bottom: 5rem;
}
#chat, #mail{
background: rgba(var(--foreground-color), 1);
@ -1252,16 +1313,16 @@ sm-panel{
.logo-section{
padding: 1rem;
}
#navbar_backdrop{
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
z-index: -1;
transition: transform 0.3s;
}
}
#navbar_backdrop{
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
z-index: 2;
transition: transform 0.3s, opacity 0.3s;
}
#dm_container,
#contact_container{
@ -1316,6 +1377,7 @@ sm-panel{
margin: 0.5rem 0;
}
sm-popup::part(popup){
width: 24rem;
min-width: 24rem;
}
#landing{
@ -1338,8 +1400,8 @@ sm-panel{
#main_navbar{
position: relative;
width: auto;
background: rgba(var(--text-color), 0.05);
padding-bottom: 0.5rem;
background: rgba(var(--text-color), 0.06);
.logo-section{
display: flex;
justify-content: center;
@ -1386,9 +1448,6 @@ sm-panel{
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
z-index: 1;
}
#contacts, #mails, #settings_sidebar{
background-color: rgba(157, 166, 255, 0.063);
}
#settings_page{
display: grid;
height: 100vh;

151
index.html
View File

@ -95,7 +95,7 @@
<h5>FLO ID (User ID)</h5>
<div class="copy-row">
<h4 id="generated_id" class="copy"></h4>
<svg class="icon" onclick="copyToClipboard(this.parentNode)" viewBox="0 0 64 64">
<svg class="icon" onclick="copyToClipboard(this, 'Copied FLO ID')" viewBox="0 0 64 64">
<title>Copy</title>
<rect x="16" y="16" width="48" height="48" rx="6" />
<path d="M.5,47.52V6.5a6,6,0,0,1,6-6h41" />
@ -104,7 +104,7 @@
<h5>Private key (Password)</h5>
<div class="copy-row">
<h4 id="generated_key" class="copy"></h4>
<svg class="icon" onclick="copyToClipboard(this.parentNode)" viewBox="0 0 64 64">
<svg class="icon" onclick="copyToClipboard('this, Copied private key')" viewBox="0 0 64 64">
<title>Copy</title>
<rect x="16" y="16" width="48" height="48" rx="6" />
<path d="M.5,47.52V6.5a6,6,0,0,1,6-6h41"/>
@ -208,7 +208,44 @@
</header>
<sm-input id="subject_of_reply_mail" placeholder="Subject" animate></sm-input>
<textarea id="reply_mail_content" placeholder="Type a mail" id="" rows="10" required></textarea>
</sm-popup>
</sm-popup>
<!-- Contact popup -->
<sm-popup id="contact_details_popup">
<header class="popup-header" slot="header">
<svg class="icon" onclick="this.closest('sm-popup').hide()" viewBox="0 0 64 64">
<title>close</title>
<line x1="64" y1="0" x2="0" y2="64" />
<line x1="64" y1="64" x2="0" y2="0" />
</svg>
</header>
<div class="flex direction-column align-center">
<div id="contact_initial" class="initial flex align-center"></div>
<h4 id="contact_name" ondblclick="setNameEditable()"></h4>
<div class="flex space-between align-center">
<svg tooltip="Edit" id="edit_contact_name" class="icon" onclick="setNameEditable()" viewBox="0 0 64 64">
<path
d="M46.73,14.81l7,7,7.65-7.6A7.15,7.15,0,0,0,61.39,4L60.11,2.77a7.23,7.23,0,0,0-10.19,0L3.87,48.57a5,5,0,0,0-1.39,2.6L.53,61.27a1.74,1.74,0,0,0,2,2l10.15-1.94A5.06,5.06,0,0,0,15.34,60L49.6,25.9" />
</svg>
<!--<svg id="delete_person" onclick="deletePerson()" class="icon" viewBox="0 0 64 64" title="Remove">
<title>remove</title>
<line x1="4" y1="6.3" x2="60" y2="6.3" />
<path d="M53.5,20.5v38.9c0,2.3-1.8,4.1-4.1,4.1h0H14.6c-2.3,0-4.1-1.8-4.1-4.1c0,0,0,0,0,0V20.5" />
<path d="M22.7,6.6V3.8c0-1.8,1.5-3.3,3.3-3.3h11.4c1.8,0,3.3,1.5,3.3,3.3v2.8" />
</svg>-->
</div>
</div>
<h5>FLO ID</h5>
<div class="copy-row grid">
<h4 id="contact_flo_id" class="copy"></h4>
<svg class="icon" onclick="copyToClipboard(this, 'Copied FLO ID')" viewBox="0 0 64 64">
<title>Copy</title>
<rect x="16" y="16" width="48" height="48" rx="6" />
<path d="M.5,47.52V6.5a6,6,0,0,1,6-6h41" />
</svg>
</div>
<div class="flex">
</div>
</sm-popup>
<!-- Templates -->
@ -256,10 +293,10 @@
<p class="message-body"></p>
<time class="time"></time>
</div>
</template>
</template>
<div id="navbar_backdrop" class="hide" onclick="toggleDrawer()"></div>
<main id="main" class="grid hide-completely">
<nav id="main_navbar" class="flex">
<div id="navbar_backdrop" onclick="toggleDrawer()"></div>
<div class="logo-section" title="RanchiMall FLO Messenger">
<svg class="main-logo" viewBox="0 0 27.25 32">
<title>RanchiMall</title>
@ -292,20 +329,21 @@
<path d="M32,21A11,11,0,1,1,21,32,11,11,0,0,1,32,21m0-1A12,12,0,1,0,44,32,12,12,0,0,0,32,20Z" />
</svg>
<h5 class="label">Settings</h5>
</div>
</nav>
</div>
</nav>
<section id="chat_page" class="grid page">
<div id="contacts" class="grid">
<header class="grid header">
<div class="flex align-center">
<svg class="icon" onclick="toggleDrawer()" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<svg class="hamburger-menu-button icon hide-on-desktop" onclick="toggleDrawer()" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<line y1="10.66" x2="64" y2="10.66"/>
<line y1="32" x2="64" y2="32"/>
<line y1="53.34" x2="64" y2="53.34"/>
</svg>
<h4>Chat</h4>
<sm-menu align-options="right">
<sm-menu-option onclick="initGroupCreation()">Create a group</sm-menu-option>
<sm-menu-option onclick="showPopup('add_contact_popup')">Add a contact</sm-menu-option>
<sm-menu-option onclick="initGroupCreation()">Create new group</sm-menu-option>
</sm-menu>
</div>
<sm-input id="search_chats" type="search" placeholder="Search">
@ -386,7 +424,7 @@
<line x1="1" y1="32" x2="64" y2="32"/>
<polyline points="29.64 60.97 0.65 32 29.64 3.03"/>
</svg>
<div id="receiver_initial" class="initial flex align-center"></div>
<div id="receiver_initial" onclick="showPopup('contact_details_popup')" class="initial flex align-center"></div>
<h4 id="receiver_name"></h4>
</header>
<h5 id="warn_no_encryption">Messages are not encrypted until receiver replies</h5>
@ -412,7 +450,7 @@
<div id="mails" class="grid">
<header class="grid header">
<div class="flex align-center">
<svg class="icon" onclick="toggleDrawer()" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<svg class="hamburger-menu-button icon hide-on-desktop" onclick="toggleDrawer()" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<line y1="10.66" x2="64" y2="10.66"/>
<line y1="32" x2="64" y2="32"/>
<line y1="53.34" x2="64" y2="53.34"/>
@ -458,7 +496,7 @@
<aside id="settings_sidebar">
<header class="grid header">
<div class="flex align-center">
<svg class="icon" onclick="toggleDrawer()" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<svg class="hamburger-menu-button icon hide-on-desktop" onclick="toggleDrawer()" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<line y1="10.66" x2="64" y2="10.66"/>
<line y1="32" x2="64" y2="32"/>
<line y1="53.34" x2="64" y2="53.34"/>
@ -485,7 +523,7 @@
<h4>My FLO ID</h4>
<div class="copy-row">
<p id="greet_tag" class="copy"></p>
<svg class="icon" onclick="copyToClipboard('#greet_tag', 'FLO ID Copied')" viewBox="0 0 64 64">
<svg class="icon" onclick="copyToClipboard(this, 'FLO ID Copied')" viewBox="0 0 64 64">
<title>Copy</title>
<rect x="16" y="16" width="48" height="48" rx="6" />
<path d="M.5,47.52V6.5a6,6,0,0,1,6-6h41" />
@ -514,7 +552,7 @@
<div id="personalise_panel" class="panel hide-completely">
<section class="setting-toggle">
<h4>Dark mode</h4>
<p>Toggle dark mode on/off. Setting applies to this browser only</p>
<p>Toggle dark mode on/off.<br><strong>*Setting applies to this browser only</strong></p>
<sm-switch id="theme_switcher"></sm-switch>
</section>
<section class="setting-toggle">
@ -672,11 +710,25 @@
if (window.innerWidth > 720 && firstInput)
firstInput.focusIn()
switch (e.detail.popup.id) {
case 'contact_details_popup':
getRef('contact_initial').setAttribute('style', `background: ${clickedContact['card'].getAttribute('background-color')}`)
getRef('contact_initial').textContent = clickedContact['name'].charAt(0)
getRef('contact_name').textContent = clickedContact['name']
getRef('contact_flo_id').textContent = clickedContact['floID']
break;
}
})
document.addEventListener('popupclosed', e => {
popupStack = e.detail.popupStack
let thisPopup = e.detail.popup
switch (e.detail.popup.id) {
case 'contact_details_popup':
clickedContact['name'] = getRef('contact_name').textContent
break;
}
})
window.addEventListener('popstate', e => {
@ -1357,7 +1409,10 @@
}
})
let prevScroll = {};
getRef('chat_container').addEventListener('scroll', function() {
prevScroll['scrollTop'] = this.scrollTop
prevScroll['scrollheight'] = this.scrollHeight
if((this.scrollHeight > this.clientHeight) && (this.scrollHeight - this.clientHeight - this.scrollTop >= 100)){
getRef('scroll_to_bottom').classList.add('no-transformations')
}
@ -1414,8 +1469,10 @@
}
activePage.button = targetButton
activePage.page = targetPage;
if(getRef('main_navbar').classList.contains('no-transformations'))
if(getRef('main_navbar').classList.contains('no-transformations')){
getRef('main_navbar').classList.remove('no-transformations')
getRef('navbar_backdrop').classList.add('hide')
}
}
if(e.target.closest('#send_mail_to') || e.target.closest('#mail_contact_list')){
getRef('mail_contact_list').classList.remove('hide-completely')
@ -1454,8 +1511,9 @@
const contact = e.target.closest(".contact")
clickedContact['card'] = contact
clickedContact['floID'] = contact.getAttribute("flo-id")
if(e.target.closest("sm-menu")){
//show contact detail popup
clickedContact['name'] = contact.getAttribute("name")
if(e.target.closest(".initial") || e.target.closest("sm-menu")){
showPopup('contact_details_popup')
}
else if(isCreatingGroup){
// code for adding group members
@ -1548,15 +1606,9 @@
getRef('emoji_picker').classList.toggle('hide-completely')
}
function copyToClipboard(target, message, parent){
let copyText, copyTarget = target;
if(typeof target === 'string'){
if(parent)
copyTarget = parent.querySelector(target)
else{
copyTarget = document.querySelector(target)
}
}
function copyToClipboard(element, message, parent = '.copy-row'){
const parentElement = element.closest(parent)
const copyTarget = parentElement.querySelector('.copy')
if(copyTarget.tagName === 'SM-INPUT' || copyTarget.tagName === 'INPUT' || copyTarget.tagName === 'TEXTAREA')
copyText = copyTarget.value
else
@ -1816,6 +1868,10 @@
notify( `you can't add your own FLO ID as contact`, 'error')
return
}
if(floGlobals.contacts.hasOwnProperty(floID)){
notify( `Contact already saved`, 'error')
return
}
messenger.storeContact(floID, name).then(result => {
render.contactCard(floID, name, 'contact')
hidePopup()
@ -1905,6 +1961,8 @@
}
if(reRender || lazyLoad){
currentDate = null
prevScroll['scrollTop'] = getRef('chat_container').scrollTop
prevScroll['scrollHeight'] = getRef('chat_container').scrollHeight
getRef('chat_container').prepend(frag)
}
if(reRender){
@ -1918,11 +1976,14 @@
for(const mutation of mutations) {
if (mutation.type === 'childList' && mutation.addedNodes.length) {
chatMessageObserver.observe(getRef('chat_container').firstElementChild)
prevScroll['scrollTop'] += (getRef('chat_container').scrollHeight - prevScroll['scrollHeight'])
prevScroll['scrollHeight'] = getRef('chat_container').scrollHeight
getRef('chat_container').scrollTo({top: prevScroll['scrollTop']})
}
}
}
)
chatMutationObserver.observe(getRef('chat_container'), { attributes: true, childList: true })
chatMutationObserver.observe(getRef('chat_container'), {childList: true })
//Lazy loading for chat messages
const chatMessageObserver = new IntersectionObserver(
@ -2146,8 +2207,43 @@
function toggleDrawer(){
getRef('main_navbar').classList.toggle('no-transformations')
getRef('navbar_backdrop').classList.toggle('hide')
}
function setNameEditable() {
if (!getRef('contact_name').isContentEditable) {
getRef('contact_name').contentEditable = 'true'
getRef('contact_name').focus()
document.execCommand('selectAll', false, null);
clickedContact['name'] = getRef('contact_name').textContent
}
}
async function changeContactName() {
clickedContact['name'] = getRef('contact_name').textContent.trim()
if (clickedContact['name'] === '')
clickedContact['name'] = 'Unknown'
messenger.storeContact(clickedContact['floID'], clickedContact['name']).then(result => {
getRef('contact_initial').textContent = clickedContact['name'].charAt(0)
document.querySelectorAll(`.contact[flo-id="${clickedContact['floID']}"]`).forEach(contact => {
contact.children[0].textContent = clickedContact['name'].charAt(0)
contact.children[1].textContent = clickedContact['name']
})
notify('Renamed contact', 'success')
})
.catch(error => notify(error, "error"));
}
document.getElementById('contact_details_popup').addEventListener('click', e => {
if (!e.target.closest('#contact_name') && !e.target.closest('#edit_contact_name')) {
if (getRef('contact_name').isContentEditable)
getRef('contact_name').contentEditable = 'false'
if (clickedContact['name'] !== getRef('contact_name').textContent)
changeContactName()
}
})
</script>
<script id="init_lib" version="1.0.1">
@ -11602,6 +11698,7 @@ Bitcoin.Util = {
groups: {},
gkeys: {},
appendix: {},
contactsInfo: {}
}
compactIDB.initDB(`${floGlobals.application}_${myFloID}`, obj).then(result => {
console.info(result)

1
scripts/components.js
View File

@ -1851,6 +1851,7 @@ smPopup.innerHTML = `
-o-transition: opacity 0.3s;
transition: opacity 0.3s;
z-index: 10;
touch-action: none;
}
:host(.stacked) .popup{
-webkit-transform: scale(0.9) translateY(-2rem) !important;