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

v0.23.69

Browse Source 
Feat (user): add option to clear chats

Feat (user): add option to delete chats (DMs only)

Feat (user): add touch and hold interaction to show chat options popup

Fix (user): fix bug while creating group searching for contacts would show all contacts instead of valid only

Fix (user): Searching while creating group contacts will not cause already selected contacts to reset
This commit is contained in:
sairaj mote 2021-02-01 01:41:25 +05:30
parent e6c6c535bb
commit b003dda997
6 changed files with 1198 additions and 1112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1954
assets/illustrations-2.ai
View File

File diff suppressed because one or more lines are too long

62
css/main.css
View File

@ -301,7 +301,7 @@ sm-popup sm-input + sm-input {
#confirmation_popup .flex, #confirmation_popup .flex,
#prompt_popup .flex { #prompt_popup .flex {
padding: 0; padding: 0;
margin-top: 2rem; margin-top: 1rem;
} }
#confirmation_popup .flex sm-button:first-of-type, #confirmation_popup .flex sm-button:first-of-type,
#prompt_popup .flex sm-button:first-of-type { #prompt_popup .flex sm-button:first-of-type {
@ -723,38 +723,31 @@ sm-button.danger {
margin-left: 0.5rem; margin-left: 0.5rem;
} }
#contact_details_popup > .flex:first-of-type { #contact_details_popup::part(popup-body) {
margin: 1rem 0; padding: 0 0 1.5rem 0;
} }
#contact_details_popup > .flex:first-of-type .flex .icon { #contact_details_popup .popup-section {
height: 2.6rem; margin: 1.5rem;
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 { #contact_details_popup h5 {
font-weight: 500; font-weight: 500;
opacity: 0.8; opacity: 0.8;
} }
#contact_details_popup .copy-row {
margin-bottom: 1.5rem;
}
#contact_details_popup .copy-row h4 { #contact_details_popup .copy-row h4 {
font-weight: 400; font-weight: 400;
} }
#contact_details_popup .group-icon { #contact_details_popup .group-icon {
padding: 0.2rem !important; padding: 0.2rem !important;
height: 2.4rem;
width: 2.4rem;
} }
#contact_details_popup #contact_initial { #contact_details_popup #contact_initial {
height: 3.6rem; height: 3.6rem;
width: 3.6rem; width: 3.6rem;
font-size: 1.6rem; font-size: 1.6rem;
border-radius: 4rem; border-radius: 4rem;
margin-bottom: 1rem; margin-top: 3rem;
margin-bottom: 0.5rem;
} }
#contact_details_popup #contact_name { #contact_details_popup #contact_name {
margin: 0.6rem 0; margin: 0.6rem 0;
@ -763,6 +756,11 @@ sm-button.danger {
font-size: 1.2rem; font-size: 1.2rem;
font-weight: 500; font-weight: 500;
} }
#contact_details_popup .option .icon {
padding: 0;
width: 1.2rem;
background: none;
}
#warn_no_encryption, .date-card, .group-event-card { #warn_no_encryption, .date-card, .group-event-card {
padding: 0.4rem 0.8rem; padding: 0.4rem 0.8rem;
@ -920,6 +918,18 @@ sm-button.danger {
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;
} }
.option {
display: flex;
align-items: center;
padding: 0.8rem 1.5rem;
}
.option .icon {
height: 1.4rem;
width: 1.4rem;
margin-right: 1rem;
stroke: rgba(255, 255, 255, 0.8);
}
#main_navbar { #main_navbar {
position: fixed; position: fixed;
flex-direction: column; flex-direction: column;
@ -1028,25 +1038,14 @@ sm-button.danger {
#contacts #group_creation_panel .header { #contacts #group_creation_panel .header {
padding-top: 0.7rem; padding-top: 0.7rem;
} }
#contacts .option {
display: flex;
align-items: center;
padding: 0.8rem 1.5rem;
}
#contacts .option .icon {
height: 2.4rem;
width: 2.4rem;
padding: 0.6rem;
background: var(--accent-color);
border-radius: 50%;
margin-right: 1rem;
stroke: rgba(255, 255, 255, 0.8);
}
#contacts .scrolling-wrapper { #contacts .scrolling-wrapper {
height: 100%; height: 100%;
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
} }
#contacts .scrolling-wrapper .empty-state {
padding: 0 1.5rem;
}
#contacts #contacts_container { #contacts #contacts_container {
padding-bottom: 6rem; padding-bottom: 6rem;
} }
@ -1196,6 +1195,9 @@ sm-button.danger {
#chat_details_panel .card .tip { #chat_details_panel .card .tip {
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
#chat_details_panel .card .danger:not(:last-of-type) {
margin-bottom: 1rem;
}
#chat_details_panel header { #chat_details_panel header {
position: sticky; position: sticky;
top: 0; top: 0;

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

65
css/main.scss
View File

@ -258,7 +258,7 @@ sm-popup{
} }
.flex { .flex {
padding: 0; padding: 0;
margin-top: 2rem; margin-top: 1rem;
sm-button:first-of-type { sm-button:first-of-type {
margin-right: 0.6rem; margin-right: 0.6rem;
margin-left: auto; margin-left: auto;
@ -666,40 +666,33 @@ sm-button.danger{
} }
} }
#contact_details_popup{ #contact_details_popup{
& > .flex:first-of-type{ &::part(popup-body){
margin: 1rem 0; padding: 0 0 1.5rem 0;
.flex{ }
.icon{ .popup-section{
height: 2.6rem; margin: 1.5rem;
width: 2.6rem;
padding: 0.85rem;
cursor: pointer;
stroke-width: 8;
&:hover{
background: rgba(var(--text-color), 0.06);
}
}
}
} }
h5{ h5{
font-weight: 500; font-weight: 500;
opacity: 0.8; opacity: 0.8;
} }
.copy-row{ .copy-row{
margin-bottom: 1.5rem;
h4{ h4{
font-weight: 400; font-weight: 400;
} }
} }
.group-icon{ .group-icon{
padding: 0.2rem !important; padding: 0.2rem !important;
height: 2.4rem;
width: 2.4rem;
} }
#contact_initial{ #contact_initial{
height: 3.6rem; height: 3.6rem;
width: 3.6rem; width: 3.6rem;
font-size: 1.6rem; font-size: 1.6rem;
border-radius: 4rem; border-radius: 4rem;
margin-bottom: 1rem; margin-top: 3rem;
margin-bottom: 0.5rem;
} }
#contact_name{ #contact_name{
margin: 0.6rem 0; margin: 0.6rem 0;
@ -708,6 +701,13 @@ sm-button.danger{
font-weight: 500; font-weight: 500;
} }
} }
.option{
.icon{
padding: 0;
width: 1.2rem;
background: none;
}
}
} }
#warn_no_encryption, .date-card, .group-event-card{ #warn_no_encryption, .date-card, .group-event-card{
padding: 0.4rem 0.8rem; padding: 0.4rem 0.8rem;
@ -853,6 +853,17 @@ sm-button.danger{
display: grid; display: grid;
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;
} }
.option{
display: flex;
align-items: center;
padding: 0.8rem 1.5rem;
.icon{
height: 1.4rem;
width: 1.4rem;
margin-right: 1rem;
stroke: rgba(255, 255, 255, 0.8);
}
}
#main_navbar{ #main_navbar{
position: fixed; position: fixed;
flex-direction: column; flex-direction: column;
@ -958,24 +969,13 @@ sm-button.danger{
padding-top: 0.7rem; padding-top: 0.7rem;
} }
} }
.option{
display: flex;
align-items: center;
padding: 0.8rem 1.5rem;
.icon{
height: 2.4rem;
width: 2.4rem;
padding: 0.6rem;
background: var(--accent-color);
border-radius: 50%;
margin-right: 1rem;
stroke: rgba(255, 255, 255, 0.8);
}
}
.scrolling-wrapper{ .scrolling-wrapper{
height: 100%; height: 100%;
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
.empty-state{
padding: 0 1.5rem;
}
} }
#contacts_container{ #contacts_container{
padding-bottom: 6rem; padding-bottom: 6rem;
@ -1123,6 +1123,9 @@ sm-button.danger{
.tip{ .tip{
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
.danger:not(:last-of-type){
margin-bottom: 1rem;
}
} }
header{ header{
position: sticky; position: sticky;

223
index.html
View File

@ -189,10 +189,10 @@
<sm-button id="send_mail_button" variant="primary" disable>Send</sm-button> <sm-button id="send_mail_button" variant="primary" disable>Send</sm-button>
</header> </header>
<div id="auto_complete_contact" class="flex direction-column"> <div id="auto_complete_contact" class="flex direction-column">
<sm-input id="send_mail_to" placeholder="To" animate required></sm-input> <sm-input id="send_mail_to" class="outlined" placeholder="To" animate required></sm-input>
<div id="mail_contact_list" class="hide-completely contact-list"></div> <div id="mail_contact_list" class="hide-completely contact-list"></div>
</div> </div>
<sm-input id="subject_of_mail" placeholder="Subject" animate></sm-input> <sm-input id="subject_of_mail" class="outlined" placeholder="Subject" animate></sm-input>
<textarea id="mail_content" placeholder="Type a mail" name="" id="" rows="10" required></textarea> <textarea id="mail_content" placeholder="Type a mail" name="" id="" rows="10" required></textarea>
</sm-popup> </sm-popup>
<sm-popup id="reply_mail_popup"> <sm-popup id="reply_mail_popup">
@ -205,7 +205,7 @@
<h4>Reply</h4> <h4>Reply</h4>
<sm-button id="reply_mail_button" variant="primary" disable>Send</sm-button> <sm-button id="reply_mail_button" variant="primary" disable>Send</sm-button>
</header> </header>
<sm-input id="subject_of_reply_mail" placeholder="Subject" animate></sm-input> <sm-input id="subject_of_reply_mail" class="outlined" placeholder="Subject" animate></sm-input>
<textarea id="reply_mail_content" placeholder="Type a mail" id="" rows="10" required></textarea> <textarea id="reply_mail_content" placeholder="Type a mail" id="" rows="10" required></textarea>
</sm-popup> </sm-popup>
<!-- Contact popup --> <!-- Contact popup -->
@ -220,26 +220,36 @@
<div class="flex direction-column align-center"> <div class="flex direction-column align-center">
<div id="contact_initial" class="initial flex align-center"></div> <div id="contact_initial" class="initial flex align-center"></div>
<text-field id="contact_name"></text-field> <text-field id="contact_name"></text-field>
<div class="flex space-between align-center"> </div>
<svg id="delete_person" onclick="deleteChat()" class="icon" viewBox="0 0 64 64" title="Remove"> <section class="popup-section">
<title>remove</title> <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>
</section>
<ul id="contact_options">
<li class="option" onclick="clearChat()">
<svg class="icon" viewBox="0 0 64 64">
<line x1="4" y1="6.3" x2="60" y2="6.3" /> <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="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" /> <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> </svg>
</div> Clear this chat
</div> </li>
<h5>FLO ID</h5> <li id="delete_chat_option" class="option" onclick="deleteChat()">
<div class="copy-row grid"> <svg class="icon" viewBox="0 0 64 64">
<h4 id="contact_flo_id" class="copy"></h4> <line x1="4" y1="6.3" x2="60" y2="6.3" />
<svg class="icon" onclick="copyToClipboard(this, 'Copied FLO ID')" viewBox="0 0 64 64"> <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" />
<title>Copy</title> <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" />
<rect x="16" y="16" width="48" height="48" rx="6" /> </svg>
<path d="M.5,47.52V6.5a6,6,0,0,1,6-6h41" /> Delete this chat
</svg> </li>
</div> </ul>
<div class="flex">
</div>
</sm-popup> </sm-popup>
<!-- all contacts popup --> <!-- all contacts popup -->
@ -422,14 +432,14 @@
<p class="warning empty-state">*Contacts that haven't yet replied to you, can't be added to a group. So they won't be visible here.</p> <p class="warning empty-state">*Contacts that haven't yet replied to you, can't be added to a group. So they won't be visible here.</p>
</div> </div>
<div class="scrolling-wrapper"> <div class="scrolling-wrapper">
<div id="contact_options"> <div id="all_contacts_options">
<div id="create_group_option" class="option interact" onclick="initGroupCreation()"> <div id="create_group_option" class="option interact" onclick="initGroupCreation()">
<svg xmlns="http://www.w3.org/2000/svg" class="icon filled" viewBox="0 0 64 64"><path d="M13.61,19.27c-1.63,0-4.72-2.35-5.33-3.57A21.71,21.71,0,0,1,6.93,8.37S6.67,2.3,13.61,2.3A6.38,6.38,0,0,1,20.3,8.37,21.71,21.71,0,0,1,19,15.7c-.62,1.22-3.7,3.57-5.34,3.57"/><path d="M32,22.92c-2.21,0-6.37-3.17-7.2-4.82A29.42,29.42,0,0,1,23,8.21S22.62,0,32,0c8.68,0,9,8.21,9,8.21A29.42,29.42,0,0,1,39.2,18.1c-.82,1.65-5,4.82-7.2,4.82"/><path d="M14.82,27.75c.76-.33,1.54-.65,2.3-1,2.49-1,4.85-2,6.22-3.44C21.07,22.41,19,21.43,18,19.6a8.85,8.85,0,0,1-4.41,2.75,8.85,8.85,0,0,1-4.4-2.75C7.9,22.05,4.63,23,1.55,24.33c-1.26.53-2.3,7.32-.84,7.32A24.66,24.66,0,0,0,11.57,35C11.89,32,12.86,28.57,14.82,27.75Z"/><path d="M49.15,34.3A14.85,14.85,0,1,0,64,49.15,14.85,14.85,0,0,0,49.15,34.3Zm8,16.31H50.58v6.61H47.66V50.61H41.05V47.69h6.61V41.08h2.92v6.61h6.61Z"/><path d="M48.93,30.42a1.56,1.56,0,0,0-.64-.66c-4.16-1.83-8.57-3.08-10.34-6.4a12,12,0,0,1-6,3.73,12,12,0,0,1-5.95-3.73c-1.77,3.32-6.18,4.57-10.34,6.4-1.7.71-3.11,9.88-1.13,9.88a33,33,0,0,0,16.5,4.52A18.73,18.73,0,0,1,48.93,30.42Z"/></svg> <svg xmlns="http://www.w3.org/2000/svg" class="icon filled" viewBox="0 0 64 64"><path d="M13.61,19.27c-1.63,0-4.72-2.35-5.33-3.57A21.71,21.71,0,0,1,6.93,8.37S6.67,2.3,13.61,2.3A6.38,6.38,0,0,1,20.3,8.37,21.71,21.71,0,0,1,19,15.7c-.62,1.22-3.7,3.57-5.34,3.57"/><path d="M32,22.92c-2.21,0-6.37-3.17-7.2-4.82A29.42,29.42,0,0,1,23,8.21S22.62,0,32,0c8.68,0,9,8.21,9,8.21A29.42,29.42,0,0,1,39.2,18.1c-.82,1.65-5,4.82-7.2,4.82"/><path d="M14.82,27.75c.76-.33,1.54-.65,2.3-1,2.49-1,4.85-2,6.22-3.44C21.07,22.41,19,21.43,18,19.6a8.85,8.85,0,0,1-4.41,2.75,8.85,8.85,0,0,1-4.4-2.75C7.9,22.05,4.63,23,1.55,24.33c-1.26.53-2.3,7.32-.84,7.32A24.66,24.66,0,0,0,11.57,35C11.89,32,12.86,28.57,14.82,27.75Z"/><path d="M49.15,34.3A14.85,14.85,0,1,0,64,49.15,14.85,14.85,0,0,0,49.15,34.3Zm8,16.31H50.58v6.61H47.66V50.61H41.05V47.69h6.61V41.08h2.92v6.61h6.61Z"/><path d="M48.93,30.42a1.56,1.56,0,0,0-.64-.66c-4.16-1.83-8.57-3.08-10.34-6.4a12,12,0,0,1-6,3.73,12,12,0,0,1-5.95-3.73c-1.77,3.32-6.18,4.57-10.34,6.4-1.7.71-3.11,9.88-1.13,9.88a33,33,0,0,0,16.5,4.52A18.73,18.73,0,0,1,48.93,30.42Z"/></svg>
Create new group Create new group
</div> </div>
<div id="add_contact_option" class="option interact" onclick="showPopup('add_contact_popup')"> <div id="add_contact_option" class="option interact" onclick="showPopup('add_contact_popup')">
<svg xmlns="http://www.w3.org/2000/svg" class="icon filled" viewBox="0 0 64 64"><path d="M49.15,34.3A14.85,14.85,0,1,0,64,49.15,14.85,14.85,0,0,0,49.15,34.3Zm8,16.31H50.58v6.61H47.66V50.61H41.05V47.69h6.61V41.08h2.92v6.61h6.61Z"/><path d="M21.36,26.63C18.79,26.63,14,23,13,21s-2.12-7.45-2.12-11.49c0,0-.41-9.53,10.49-9.53C31.45,0,31.85,9.53,31.85,9.53c0,4-1.17,9.58-2.12,11.49s-5.8,5.61-8.37,5.61"/><path d="M28.78,49.15A20.28,20.28,0,0,1,36.7,33.07c-3.6-1.49-6.88-3-8.42-5.93a14,14,0,0,1-6.92,4.33,14,14,0,0,1-6.92-4.33c-2,3.85-7.18,5.3-12,7.43-2,.82-3.61,11.48-1.31,11.48a38.44,38.44,0,0,0,19.34,5.26h1.8a37.94,37.94,0,0,0,6.6-.59C28.82,50.2,28.78,49.68,28.78,49.15Z"/></svg> <svg xmlns="http://www.w3.org/2000/svg" class="icon filled" viewBox="0 0 64 64"><path d="M49.15,34.3A14.85,14.85,0,1,0,64,49.15,14.85,14.85,0,0,0,49.15,34.3Zm8,16.31H50.58v6.61H47.66V50.61H41.05V47.69h6.61V41.08h2.92v6.61h6.61Z"/><path d="M21.36,26.63C18.79,26.63,14,23,13,21s-2.12-7.45-2.12-11.49c0,0-.41-9.53,10.49-9.53C31.45,0,31.85,9.53,31.85,9.53c0,4-1.17,9.58-2.12,11.49s-5.8,5.61-8.37,5.61"/><path d="M28.78,49.15A20.28,20.28,0,0,1,36.7,33.07c-3.6-1.49-6.88-3-8.42-5.93a14,14,0,0,1-6.92,4.33,14,14,0,0,1-6.92-4.33c-2,3.85-7.18,5.3-12,7.43-2,.82-3.61,11.48-1.31,11.48a38.44,38.44,0,0,0,19.34,5.26h1.8a37.94,37.94,0,0,0,6.6-.59C28.82,50.2,28.78,49.68,28.78,49.15Z"/></svg>
Add a contact Add contact
</div> </div>
</div> </div>
<div id="contacts_container" class="observe-empty-state"></div> <div id="contacts_container" class="observe-empty-state"></div>
@ -455,7 +465,7 @@
<form action="" onsubmit="return false"> <form action="" onsubmit="return false">
<div class="grid"> <div class="grid">
<svg class="icon group-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M13.61,28.09c-1.63,0-4.72-2.35-5.33-3.58a21.65,21.65,0,0,1-1.35-7.32s-.26-6.07,6.68-6.07a6.38,6.38,0,0,1,6.69,6.07A21.65,21.65,0,0,1,19,24.51c-.62,1.23-3.7,3.58-5.34,3.58"/><path d="M50.39,28.09c-1.64,0-4.72-2.35-5.34-3.58a21.9,21.9,0,0,1-1.35-7.32s-.26-6.07,6.69-6.07a6.37,6.37,0,0,1,6.68,6.07,21.65,21.65,0,0,1-1.35,7.32c-.61,1.23-3.7,3.58-5.33,3.58"/><path d="M32,31.74c-2.21,0-6.37-3.17-7.2-4.83A29.3,29.3,0,0,1,23,17s-.35-8.21,9-8.21c8.68,0,9,8.21,9,8.21a29.3,29.3,0,0,1-1.83,9.88c-.82,1.66-5,4.83-7.2,4.83"/><path d="M48.29,38.58c-4.16-1.83-8.57-3.08-10.34-6.4a12,12,0,0,1-6,3.73,12,12,0,0,1-5.95-3.73c-1.77,3.32-6.18,4.57-10.34,6.4-1.7.71-3.11,9.88-1.13,9.88A33.06,33.06,0,0,0,31.23,53h1.54a33.06,33.06,0,0,0,16.65-4.53C51.4,48.46,50,39.29,48.29,38.58Z"/><path d="M14.82,36.57c.76-.33,1.54-.65,2.3-1,2.49-1,4.85-2,6.22-3.44C21.07,31.23,19,30.25,18,28.41a8.83,8.83,0,0,1-4.41,2.76,8.83,8.83,0,0,1-4.4-2.76c-1.31,2.46-4.58,3.38-7.66,4.74-1.26.52-2.3,7.31-.84,7.31a24.55,24.55,0,0,0,10.86,3.31C11.89,40.81,12.86,37.39,14.82,36.57Z"/><path d="M62.45,33.15c-3.08-1.36-6.35-2.28-7.66-4.74a8.83,8.83,0,0,1-4.4,2.76A8.83,8.83,0,0,1,46,28.41c-1,1.84-3,2.82-5.32,3.76,1.37,1.43,3.73,2.41,6.22,3.44.76.31,1.54.63,2.26,1,2,.83,3,4.25,3.29,7.21a24.55,24.55,0,0,0,10.86-3.31C64.75,40.46,63.71,33.67,62.45,33.15Z"/></svg> <svg class="icon group-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M13.61,28.09c-1.63,0-4.72-2.35-5.33-3.58a21.65,21.65,0,0,1-1.35-7.32s-.26-6.07,6.68-6.07a6.38,6.38,0,0,1,6.69,6.07A21.65,21.65,0,0,1,19,24.51c-.62,1.23-3.7,3.58-5.34,3.58"/><path d="M50.39,28.09c-1.64,0-4.72-2.35-5.34-3.58a21.9,21.9,0,0,1-1.35-7.32s-.26-6.07,6.69-6.07a6.37,6.37,0,0,1,6.68,6.07,21.65,21.65,0,0,1-1.35,7.32c-.61,1.23-3.7,3.58-5.33,3.58"/><path d="M32,31.74c-2.21,0-6.37-3.17-7.2-4.83A29.3,29.3,0,0,1,23,17s-.35-8.21,9-8.21c8.68,0,9,8.21,9,8.21a29.3,29.3,0,0,1-1.83,9.88c-.82,1.66-5,4.83-7.2,4.83"/><path d="M48.29,38.58c-4.16-1.83-8.57-3.08-10.34-6.4a12,12,0,0,1-6,3.73,12,12,0,0,1-5.95-3.73c-1.77,3.32-6.18,4.57-10.34,6.4-1.7.71-3.11,9.88-1.13,9.88A33.06,33.06,0,0,0,31.23,53h1.54a33.06,33.06,0,0,0,16.65-4.53C51.4,48.46,50,39.29,48.29,38.58Z"/><path d="M14.82,36.57c.76-.33,1.54-.65,2.3-1,2.49-1,4.85-2,6.22-3.44C21.07,31.23,19,30.25,18,28.41a8.83,8.83,0,0,1-4.41,2.76,8.83,8.83,0,0,1-4.4-2.76c-1.31,2.46-4.58,3.38-7.66,4.74-1.26.52-2.3,7.31-.84,7.31a24.55,24.55,0,0,0,10.86,3.31C11.89,40.81,12.86,37.39,14.82,36.57Z"/><path d="M62.45,33.15c-3.08-1.36-6.35-2.28-7.66-4.74a8.83,8.83,0,0,1-4.4,2.76A8.83,8.83,0,0,1,46,28.41c-1,1.84-3,2.82-5.32,3.76,1.37,1.43,3.73,2.41,6.22,3.44.76.31,1.54.63,2.26,1,2,.83,3,4.25,3.29,7.21a24.55,24.55,0,0,0,10.86-3.31C64.75,40.46,63.71,33.67,62.45,33.15Z"/></svg>
<sm-input id="group_name_field" placeholder="Group name" required></sm-input> <sm-input id="group_name_field" class="outlined" placeholder="Group name" animate required></sm-input>
<sm-textarea id="group_description_field" placeholder="Group description"></sm-textarea> <sm-textarea id="group_description_field" placeholder="Group description"></sm-textarea>
</div> </div>
<sm-button id="create_group_button" variant="primary" class="fab round" type="submit" disable> <sm-button id="create_group_button" variant="primary" class="fab round" type="submit" disable>
@ -541,8 +551,8 @@
<div id="group_members_list"></div> <div id="group_members_list"></div>
</div> </div>
<div class="card"> <div class="card">
<sm-button class="danger">Clear chat</sm-button> <sm-button class="danger" onclick="clearChat()">Clear chat</sm-button>
<sm-button class="danger">Delete chat</sm-button> <sm-button id="delete_chat_button" class="danger" onclick="deleteChat()">Delete chat</sm-button>
</div> </div>
</div> </div>
</div> </div>
@ -812,6 +822,12 @@
switch (e.detail.popup.id) { switch (e.detail.popup.id) {
case 'contact_details_popup': case 'contact_details_popup':
if(clickedContact.chatCard.closest('#chat_container')){
getRef('contact_options').classList.remove('hide-completely')
}
else{
getRef('contact_options').classList.add('hide-completely')
}
if(clickedContact.isGroup){ if(clickedContact.isGroup){
getRef("contact_initial").innerHTML = ` getRef("contact_initial").innerHTML = `
<svg class="icon group-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M13.61,28.09c-1.63,0-4.72-2.35-5.33-3.58a21.65,21.65,0,0,1-1.35-7.32s-.26-6.07,6.68-6.07a6.38,6.38,0,0,1,6.69,6.07A21.65,21.65,0,0,1,19,24.51c-.62,1.23-3.7,3.58-5.34,3.58"/><path d="M50.39,28.09c-1.64,0-4.72-2.35-5.34-3.58a21.9,21.9,0,0,1-1.35-7.32s-.26-6.07,6.69-6.07a6.37,6.37,0,0,1,6.68,6.07,21.65,21.65,0,0,1-1.35,7.32c-.61,1.23-3.7,3.58-5.33,3.58"/><path d="M32,31.74c-2.21,0-6.37-3.17-7.2-4.83A29.3,29.3,0,0,1,23,17s-.35-8.21,9-8.21c8.68,0,9,8.21,9,8.21a29.3,29.3,0,0,1-1.83,9.88c-.82,1.66-5,4.83-7.2,4.83"/><path d="M48.29,38.58c-4.16-1.83-8.57-3.08-10.34-6.4a12,12,0,0,1-6,3.73,12,12,0,0,1-5.95-3.73c-1.77,3.32-6.18,4.57-10.34,6.4-1.7.71-3.11,9.88-1.13,9.88A33.06,33.06,0,0,0,31.23,53h1.54a33.06,33.06,0,0,0,16.65-4.53C51.4,48.46,50,39.29,48.29,38.58Z"/><path d="M14.82,36.57c.76-.33,1.54-.65,2.3-1,2.49-1,4.85-2,6.22-3.44C21.07,31.23,19,30.25,18,28.41a8.83,8.83,0,0,1-4.41,2.76,8.83,8.83,0,0,1-4.4-2.76c-1.31,2.46-4.58,3.38-7.66,4.74-1.26.52-2.3,7.31-.84,7.31a24.55,24.55,0,0,0,10.86,3.31C11.89,40.81,12.86,37.39,14.82,36.57Z"/><path d="M62.45,33.15c-3.08-1.36-6.35-2.28-7.66-4.74a8.83,8.83,0,0,1-4.4,2.76A8.83,8.83,0,0,1,46,28.41c-1,1.84-3,2.82-5.32,3.76,1.37,1.43,3.73,2.41,6.22,3.44.76.31,1.54.63,2.26,1,2,.83,3,4.25,3.29,7.21a24.55,24.55,0,0,0,10.86-3.31C64.75,40.46,63.71,33.67,62.45,33.15Z"/></svg> <svg class="icon group-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M13.61,28.09c-1.63,0-4.72-2.35-5.33-3.58a21.65,21.65,0,0,1-1.35-7.32s-.26-6.07,6.68-6.07a6.38,6.38,0,0,1,6.69,6.07A21.65,21.65,0,0,1,19,24.51c-.62,1.23-3.7,3.58-5.34,3.58"/><path d="M50.39,28.09c-1.64,0-4.72-2.35-5.34-3.58a21.9,21.9,0,0,1-1.35-7.32s-.26-6.07,6.69-6.07a6.37,6.37,0,0,1,6.68,6.07,21.65,21.65,0,0,1-1.35,7.32c-.61,1.23-3.7,3.58-5.33,3.58"/><path d="M32,31.74c-2.21,0-6.37-3.17-7.2-4.83A29.3,29.3,0,0,1,23,17s-.35-8.21,9-8.21c8.68,0,9,8.21,9,8.21a29.3,29.3,0,0,1-1.83,9.88c-.82,1.66-5,4.83-7.2,4.83"/><path d="M48.29,38.58c-4.16-1.83-8.57-3.08-10.34-6.4a12,12,0,0,1-6,3.73,12,12,0,0,1-5.95-3.73c-1.77,3.32-6.18,4.57-10.34,6.4-1.7.71-3.11,9.88-1.13,9.88A33.06,33.06,0,0,0,31.23,53h1.54a33.06,33.06,0,0,0,16.65-4.53C51.4,48.46,50,39.29,48.29,38.58Z"/><path d="M14.82,36.57c.76-.33,1.54-.65,2.3-1,2.49-1,4.85-2,6.22-3.44C21.07,31.23,19,30.25,18,28.41a8.83,8.83,0,0,1-4.41,2.76,8.83,8.83,0,0,1-4.4-2.76c-1.31,2.46-4.58,3.38-7.66,4.74-1.26.52-2.3,7.31-.84,7.31a24.55,24.55,0,0,0,10.86,3.31C11.89,40.81,12.86,37.39,14.82,36.57Z"/><path d="M62.45,33.15c-3.08-1.36-6.35-2.28-7.66-4.74a8.83,8.83,0,0,1-4.4,2.76A8.83,8.83,0,0,1,46,28.41c-1,1.84-3,2.82-5.32,3.76,1.37,1.43,3.73,2.41,6.22,3.44.76.31,1.54.63,2.26,1,2,.83,3,4.25,3.29,7.21a24.55,24.55,0,0,0,10.86-3.31C64.75,40.46,63.71,33.67,62.45,33.15Z"/></svg>
@ -820,12 +836,14 @@
getRef('contact_name').disabled = false getRef('contact_name').disabled = false
else else
getRef('contact_name').disabled = true getRef('contact_name').disabled = true
getRef('delete_chat_option').classList.add('hide-completely')
} }
else{ else{
getRef('contact_name').disabled = false getRef('contact_name').disabled = false
getRef('contact_initial').textContent = clickedContact['name'].charAt(0) getRef('contact_initial').textContent = clickedContact['name'].charAt(0)
getRef('delete_chat_option').classList.remove('hide-completely')
} }
getRef('contact_initial').setAttribute('style', `background: ${clickedContact['card'].getAttribute('background-color')}`) getRef('contact_initial').setAttribute('style', `background: ${clickedContact['chatCard'].getAttribute('background-color')}`)
getRef('contact_name').value = clickedContact['name'] getRef('contact_name').value = clickedContact['name']
getRef('contact_flo_id').textContent = clickedContact['floID'] getRef('contact_flo_id').textContent = clickedContact['floID']
break; break;
@ -1104,7 +1122,7 @@
} }
}) })
document.addEventListener('mousedown', (e) => { document.addEventListener('pointerdown', (e) => {
if (e.target.closest('sm-button, .interact')) { if (e.target.closest('sm-button, .interact')) {
createRipple(e, e.target.closest('sm-button, .interact')) createRipple(e, e.target.closest('sm-button, .interact'))
} }
@ -1148,7 +1166,7 @@
const signIn = (type) => { const signIn = (type) => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
mainPage.classList.add('hide-completely') getRef('main').classList.add('hide-completely')
getRef('loading_page').classList.add('hide-completely') getRef('loading_page').classList.add('hide-completely')
getRef('landing_page').classList.remove('hide-completely') getRef('landing_page').classList.remove('hide-completely')
getRef('sign_in_button').addEventListener('clicked', () => { getRef('sign_in_button').addEventListener('clicked', () => {
@ -1275,7 +1293,7 @@
console.log(`Load Successful!`) console.log(`Load Successful!`)
//hide loading screen //hide loading screen
getRef('loading_page').classList.add("hide-completely") getRef('loading_page').classList.add("hide-completely")
mainPage.classList.remove('hide-completely') getRef('main').classList.remove('hide-completely')
getRef('chat').classList.add('hide-completely') getRef('chat').classList.add('hide-completely')
getRef('mail').classList.add('hide-completely') getRef('mail').classList.add('hide-completely')
getRef('chat_page_button').click() getRef('chat_page_button').click()
@ -1304,8 +1322,6 @@
activeMail, activeMail,
frag = document.createDocumentFragment() frag = document.createDocumentFragment()
const mainPage = document.querySelector('main')
// render elements // render elements
const render = { const render = {
mailCard(floID, ref, subject, timestamp, content, markUnread){ mailCard(floID, ref, subject, timestamp, content, markUnread){
@ -1364,7 +1380,7 @@
return card return card
}, },
contactCard(floID, options = {}){ contactCard(floID, options = {}){
let {name, type, prepend = false, markUnread = false, contactOnly = false, isAdmin = false} = options let {name, type, prepend = false, markUnread = false, contactOnly = false, isAdmin = false, isSelected = false} = options
let card = getRef('contact_template').content.cloneNode(true), let card = getRef('contact_template').content.cloneNode(true),
cardContainer = card.firstElementChild cardContainer = card.firstElementChild
if(!name) if(!name)
@ -1442,6 +1458,8 @@
activeChat['chatCard'].classList.remove('active') activeChat['chatCard'].classList.remove('active')
} }
} }
if(isSelected)
addTick(cardContainer, {animate: false})
return card return card
}, },
messageBubble(msg){ messageBubble(msg){
@ -1734,14 +1752,16 @@
getRef('search_contacts').addEventListener('input', function() { getRef('search_contacts').addEventListener('input', function() {
if(this.value.trim !== ''){ if(this.value.trim !== ''){
for(child of getRef('contacts_container').children) { const contacts = {}
if(child.getAttribute('name').toLowerCase().includes(this.value.toLowerCase()) || child.getAttribute('flo-id').toLowerCase().includes(this.value.toLowerCase())){ for(contact in floGlobals.contacts) {
child.classList.remove('hide-completely') if(contact.toLowerCase().includes(this.value.toLowerCase()) || floGlobals.contacts[contact].toLowerCase().includes(this.value.toLowerCase())){
} contacts[contact] = floGlobals.contacts[contact]
else{ if(isCreatingGroup && !(contact in floGlobals.pubKeys))
child.classList.add('hide-completely') delete contacts[contact]
} }
} }
getRef('contacts_container').innerHTML = ''
renderContactList(contacts)
} }
}) })
@ -1810,6 +1830,36 @@
} }
}) })
getRef('chat_page').addEventListener('contextmenu', e => {
if(e.target.closest('.contact')){
e.preventDefault()
}
})
let touchStartTime = 0
let touchEndTime = 0
let holdThreshold = 500
getRef('chat_page').addEventListener('touchstart', e => {
if(e.target.closest('.contact')){
touchStartTime = e.timeStamp
}
})
getRef('chat_page').addEventListener('touchend', e => {
if(e.target.closest('.contact')){
touchEndTime = e.timeStamp
if(touchEndTime - touchStartTime > holdThreshold){
let contact = e.target.closest(".contact")
clickedContact['chatCard'] = contact
clickedContact['floID'] = contact.getAttribute("flo-id")
clickedContact['name'] = contact.getAttribute("name")
clickedContact['isGroup'] = floGlobals.groups.hasOwnProperty(clickedContact['floID'])
showPopup('contact_details_popup')
}
}
})
getRef('mail_contact_list').addEventListener('click', e => { getRef('mail_contact_list').addEventListener('click', e => {
if(e.target.closest('.contact')){ if(e.target.closest('.contact')){
getRef('send_mail_to').value = e.target.closest('.contact').getAttribute('flo-id') getRef('send_mail_to').value = e.target.closest('.contact').getAttribute('flo-id')
@ -1824,7 +1874,7 @@
//detect click on chat cards //detect click on chat cards
if (e.target.closest(".contact")){ if (e.target.closest(".contact")){
let contact = e.target.closest(".contact") let contact = e.target.closest(".contact")
clickedContact['card'] = contact clickedContact['chatCard'] = contact
clickedContact['floID'] = contact.getAttribute("flo-id") clickedContact['floID'] = contact.getAttribute("flo-id")
clickedContact['name'] = contact.getAttribute("name") clickedContact['name'] = contact.getAttribute("name")
clickedContact['isGroup'] = floGlobals.groups.hasOwnProperty(clickedContact['floID']) clickedContact['isGroup'] = floGlobals.groups.hasOwnProperty(clickedContact['floID'])
@ -1863,7 +1913,7 @@
} }
} }
else if(e.target.closest('.contact-preview')){ else if(e.target.closest('.contact-preview')){
removeSelectedContact(e.target.closest('.contact-preview')) removeSelectedContact(e.target.closest('.contact-preview').getAttribute('flo-id'))
} }
}) })
getRef('contacts_popup').addEventListener('click', e => { getRef('contacts_popup').addEventListener('click', e => {
@ -1907,7 +1957,7 @@
contactsDrawerAnimation.reverse() contactsDrawerAnimation.reverse()
contactsDrawerAnimation.onfinish = () => { contactsDrawerAnimation.onfinish = () => {
getRef('all_contacts').classList.add('hide-completely') getRef('all_contacts').classList.add('hide-completely')
getRef('contact_options').classList.remove('hide-completely') getRef('all_contacts_options').classList.remove('hide-completely')
getRef('selected_contacts').classList.add('hide-completely') getRef('selected_contacts').classList.add('hide-completely')
getRef('skip_members_button').classList.add('hide-completely') getRef('skip_members_button').classList.add('hide-completely')
getRef('contacts_container').innerHTML = '' getRef('contacts_container').innerHTML = ''
@ -1954,22 +2004,7 @@
addTick(contact) addTick(contact)
} }
else{ else{
selectedGroupMembers.delete(clickedContact.floID) removeSelectedContact(clickedContact.floID)
const relatedPreview = getRef('selected_contacts_container').querySelector(`[flo-id="${clickedContact.floID}"]`)
relatedPreview.animate(
[
{transform: 'scale(1)'},
{transform: 'scale(0)'},
],
{
duration: 150,
easing: 'ease',
fill: 'forwards'
}
).onfinish = () => {
relatedPreview.remove()
}
removeTick(contact)
} }
if(selectedGroupMembers.size){ if(selectedGroupMembers.size){
getRef('skip_members_button').textContent = 'Next' getRef('skip_members_button').textContent = 'Next'
@ -1979,8 +2014,25 @@
} }
} }
function removeSelectedContact(preview){ function removeSelectedContact(floID){
getRef('contacts_container').querySelector(`[flo-id="${preview.getAttribute('flo-id')}"]`).click() selectedGroupMembers.delete(floID)
const relatedContact = getRef('contacts_container').querySelector(`[flo-id="${floID}"]`)
const relatedPreview = getRef('selected_contacts_container').querySelector(`[flo-id="${floID}"]`)
if(relatedContact)
removeTick(relatedContact)
relatedPreview.animate(
[
{transform: 'scale(1)'},
{transform: 'scale(0)'},
],
{
duration: 150,
easing: 'ease',
fill: 'forwards'
}
).onfinish = () => {
relatedPreview.remove()
}
} }
function clearAllMembers(){ function clearAllMembers(){
@ -1991,7 +2043,7 @@
function initGroupCreation(){ function initGroupCreation(){
isCreatingGroup = true isCreatingGroup = true
showContacts({show: true, onlyValid: true}) showContacts({show: true, onlyValid: true})
getRef('contact_options').classList.add('hide-completely') getRef('all_contacts_options').classList.add('hide-completely')
getRef('selected_contacts').classList.remove('hide-completely') getRef('selected_contacts').classList.remove('hide-completely')
getRef('skip_members_button').classList.remove('hide-completely') getRef('skip_members_button').classList.remove('hide-completely')
} }
@ -2067,7 +2119,7 @@
).onfinish = () => { ).onfinish = () => {
getRef('all_contacts').classList.add('hide-completely') getRef('all_contacts').classList.add('hide-completely')
getRef('group_creation_panel').classList.add('hide-completely') getRef('group_creation_panel').classList.add('hide-completely')
getRef('contact_options').classList.remove('hide-completely') getRef('all_contacts_options').classList.remove('hide-completely')
getRef('selected_contacts').classList.add('hide-completely') getRef('selected_contacts').classList.add('hide-completely')
} }
notify('Group created', 'success') notify('Group created', 'success')
@ -2468,8 +2520,10 @@
function renderContactList(contactList = {}) { function renderContactList(contactList = {}) {
const frag = document.createDocumentFragment() const frag = document.createDocumentFragment()
for (floID in contactList) for (floID in contactList){
frag.append(render.contactCard(floID, {type: 'contact'})) let isSelected = selectedGroupMembers.has(floID)
frag.append(render.contactCard(floID, {type: 'contact', isSelected}))
}
getRef('contacts_container').append(frag) getRef('contacts_container').append(frag)
} }
@ -2963,6 +3017,9 @@
getRef("group_description_card").classList.remove('hide-completely') getRef("group_description_card").classList.remove('hide-completely')
getRef("group_members_card").classList.remove('hide-completely') getRef("group_members_card").classList.remove('hide-completely')
getRef('delete_chat_button').classList.add('hide-completely')
getRef("group_description").value = floGlobals.groups[floID].description === '' ? 'Add group description' : floGlobals.groups[floID].description; getRef("group_description").value = floGlobals.groups[floID].description === '' ? 'Add group description' : floGlobals.groups[floID].description;
if(floGlobals.groups[activeChat['floID']].admin === myFloID){ if(floGlobals.groups[activeChat['floID']].admin === myFloID){
@ -2984,6 +3041,8 @@
getRef("group_description_card").classList.add('hide-completely') getRef("group_description_card").classList.add('hide-completely')
getRef("group_members_card").classList.add('hide-completely') getRef("group_members_card").classList.add('hide-completely')
getRef('delete_chat_button').classList.remove('hide-completely')
} }
getRef('chat').classList.add('expand-side-panel') getRef('chat').classList.add('expand-side-panel')
@ -3016,11 +3075,21 @@
} }
} }
async function clearChat(){
if(await confirmation('Clear chat?', `Are you sure to clear this chat?`, 'No', "Yes")){
messenger.clearChat(clickedContact.floID).then(result => {
getRef('messages_container').innerHTML = ''
hidePopup()
notify('Chat cleared', 'success')
})
}
}
async function deleteChat(){ async function deleteChat(){
if(await confirmation('Delete chat?', `Are you sure to delete this chat?`, 'No', "Yes")){ if(await confirmation('Delete chat?', `Are you sure to delete this chat?`, 'No', "Yes")){
messenger.rmChat(clickedContact.floID).then(result => { messenger.rmChat(clickedContact.floID).then(result => {
clickedContact.card.remove() clickedContact.chatCard.remove()
clickedContact.card = '' clickedContact.chatCard = ''
hidePopup() hidePopup()
getRef('chat').classList.add('hide-completely') getRef('chat').classList.add('hide-completely')
notify('Chat deleted', 'success') notify('Chat deleted', 'success')
@ -3111,7 +3180,8 @@
} }
} }
function addTick(contact){ function addTick(contact, options = {}){
const {animate = true} = options
contact.classList.add('selected') contact.classList.add('selected')
const initial = contact.querySelector('.initial') const initial = contact.querySelector('.initial')
const tick = document.createElement('div'); const tick = document.createElement('div');
@ -3122,17 +3192,18 @@
` `
tick.classList.add('tick') tick.classList.add('tick')
initial.append(tick) initial.append(tick)
tick.animate( if(animate)
[ tick.animate(
{transform: 'scale(0)'}, [
{transform: 'scale(1)'}, {transform: 'scale(0)'},
], {transform: 'scale(1)'},
{ ],
duration: 300, {
fill: 'forwards', duration: 300,
easing: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)' fill: 'forwards',
} easing: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)'
) }
)
} }
function removeTick(contact){ function removeTick(contact){
contact.classList.remove('selected') contact.classList.remove('selected')

4
scripts/components.js
View File

@ -579,6 +579,10 @@ smTextarea.innerHTML = `
:host{ :host{
display: grid; display: grid;
} }
:host(.outlined) .textarea {
box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 0.4) inset;
background: rgba(var(--foreground-color), 1);
}
.textarea{ .textarea{
display: grid; display: grid;
position: relative; position: relative;