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

v0.29.81

Browse Source 
Feat: add option to add unknown contacts directly from chat screen
This commit is contained in:
sairaj mote 2021-02-13 18:57:47 +05:30
parent ad51bba083
commit 8d17c25f97
6 changed files with 1107 additions and 1107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2078
assets/illustrations-2.ai
View File

File diff suppressed because it is too large Load Diff

41
css/main.css
View File

@ -713,8 +713,8 @@ sm-button.danger {
margin-left: 0.5rem; margin-left: 0.5rem;
} }
#contact_details_popup::part(popup-body) { #contact_details_popup {
padding: 0 0 1.5rem 0; --body-padding: 0 0 1.5rem 0;
} }
#contact_details_popup .popup-section { #contact_details_popup .popup-section {
margin: 1.5rem; margin: 1.5rem;
@ -1450,9 +1450,9 @@ sm-button.danger {
align-items: flex-end; align-items: flex-end;
padding: 0.5rem 1rem 0.5rem 0.5rem; padding: 0.5rem 1rem 0.5rem 0.5rem;
} }
#chat_footer sm-textarea::part(textarea) { #chat_footer sm-textarea {
padding-right: 3rem; --padding-right: 3rem;
border-radius: 0.5rem; --border-radius: 0.5rem;
} }
#emoji_toggle { #emoji_toggle {
@ -1523,6 +1523,8 @@ sm-button.danger {
--outline-color: var(--accent-color); --outline-color: var(--accent-color);
--input-font-color: var(--text-color); --input-font-color: var(--text-color);
--input-placeholder-color: rgba(var(--text-color), 0.6); --input-placeholder-color: rgba(var(--text-color), 0.6);
--indicator-color: var(--accent-color);
--button-hover-background: rgba(var(--text-color), 0.2);
user-select: none; user-select: none;
width: 100%; width: 100%;
max-height: 40vh; max-height: 40vh;
@ -1583,8 +1585,8 @@ sm-button.danger {
padding-bottom: 6rem; padding-bottom: 6rem;
} }
#contacts_popup::part(popup-body) { #contacts_popup {
padding: 0; --body-padding: 0;
} }
#contacts_popup .popup-header { #contacts_popup .popup-header {
padding: 1.5rem; padding: 1.5rem;
@ -1621,8 +1623,8 @@ sm-panel {
.has-bg-image #emoji_toggle path { .has-bg-image #emoji_toggle path {
fill: rgba(var(--text-color), 0.8); fill: rgba(var(--text-color), 0.8);
} }
.has-bg-image sm-textarea::part(textarea) { .has-bg-image sm-textarea {
background: rgba(var(--foreground-color), 0.6); --background: rgba(var(--foreground-color), 0.6);
} }
.has-bg-image #chat_details_panel { .has-bg-image #chat_details_panel {
background: rgba(var(--foreground-color), 0.8); background: rgba(var(--foreground-color), 0.8);
@ -1802,6 +1804,10 @@ sm-panel {
} }
@media screen and (max-width: 640px) { @media screen and (max-width: 640px) {
sm-popup {
--border-radius: 1rem 1rem 0 0;
}
.hide-on-mobile { .hide-on-mobile {
position: fixed; position: fixed;
max-height: 0; max-height: 0;
@ -1909,9 +1915,10 @@ sm-panel {
margin: 0.5rem 0; margin: 0.5rem 0;
} }
sm-popup::part(popup) { sm-popup {
width: 24rem; --width: 24rem;
min-width: 24rem; --min-width: 24rem;
--border-radius: 0.5rem;
} }
#landing { #landing {
@ -1961,13 +1968,13 @@ sm-panel {
display: none; display: none;
} }
#add_contact_popup::part(popup) { #add_contact_popup {
min-width: 24rem; --min-width: 24rem;
} }
#compose_mail_popup::part(popup), #compose_mail_popup,
#reply_mail_popup::part(popup) { #reply_mail_popup {
min-width: 36rem; --min-width: 36rem;
} }
#main_page { #main_page {

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

40
css/main.scss
View File

@ -653,9 +653,7 @@ sm-button.danger{
} }
} }
#contact_details_popup{ #contact_details_popup{
&::part(popup-body){ --body-padding: 0 0 1.5rem 0;
padding: 0 0 1.5rem 0;
}
.popup-section{ .popup-section{
margin: 1.5rem; margin: 1.5rem;
} }
@ -1363,9 +1361,9 @@ sm-button.danger{
align-items: flex-end; align-items: flex-end;
padding: 0.5rem 1rem 0.5rem 0.5rem; padding: 0.5rem 1rem 0.5rem 0.5rem;
} }
sm-textarea::part(textarea){ sm-textarea{
padding-right: 3rem; --padding-right: 3rem;
border-radius: 0.5rem; --border-radius: 0.5rem;
} }
} }
#emoji_toggle{ #emoji_toggle{
@ -1431,6 +1429,8 @@ sm-button.danger{
--outline-color: var(--accent-color); --outline-color: var(--accent-color);
--input-font-color: var(--text-color); --input-font-color: var(--text-color);
--input-placeholder-color: rgba(var(--text-color), 0.6); --input-placeholder-color: rgba(var(--text-color), 0.6);
--indicator-color: var(--accent-color);
--button-hover-background: rgba(var(--text-color), 0.2);
user-select: none; user-select: none;
width: 100%; width: 100%;
max-height: 40vh; max-height: 40vh;
@ -1485,9 +1485,7 @@ sm-button.danger{
padding-bottom: 6rem; padding-bottom: 6rem;
} }
#contacts_popup{ #contacts_popup{
&::part(popup-body){ --body-padding: 0;
padding: 0;
}
.popup-header{ .popup-header{
padding: 1.5rem; padding: 1.5rem;
} }
@ -1525,8 +1523,8 @@ sm-panel{
fill: rgba(var(--text-color), 0.8); fill: rgba(var(--text-color), 0.8);
} }
} }
sm-textarea::part(textarea){ sm-textarea{
background: rgba(var(--foreground-color), 0.6); --background: rgba(var(--foreground-color), 0.6);
} }
#chat_details_panel{ #chat_details_panel{
background: rgba(var(--foreground-color), 0.8); background: rgba(var(--foreground-color), 0.8);
@ -1698,6 +1696,9 @@ sm-panel{
--border-radius: 50%; --border-radius: 50%;
} }
@media screen and (max-width: 640px){ @media screen and (max-width: 640px){
sm-popup{
--border-radius: 1rem 1rem 0 0;
}
.hide-on-mobile{ .hide-on-mobile{
position: fixed; position: fixed;
max-height: 0; max-height: 0;
@ -1794,9 +1795,10 @@ sm-panel{
padding: 2rem 3rem 0 3rem; padding: 2rem 3rem 0 3rem;
margin: 0.5rem 0; margin: 0.5rem 0;
} }
sm-popup::part(popup){ sm-popup{
width: 24rem; --width: 24rem;
min-width: 24rem; --min-width: 24rem;
--border-radius: 0.5rem;
} }
#landing{ #landing{
align-items: center; align-items: center;
@ -1842,12 +1844,12 @@ sm-panel{
display: none; display: none;
} }
} }
#add_contact_popup::part(popup){ #add_contact_popup{
min-width: 24rem; --min-width: 24rem;
} }
#compose_mail_popup::part(popup), #compose_mail_popup,
#reply_mail_popup::part(popup){ #reply_mail_popup{
min-width: 36rem; --min-width: 36rem;
} }
#main_page{ #main_page{
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;

25
index.html
View File

@ -73,7 +73,7 @@
<sm-input id="private_key_input_field" class="outlined" type="password" placeholder="FLO private key" privateKey animate></sm-input> <sm-input id="private_key_input_field" class="outlined" type="password" placeholder="FLO private key" privateKey animate></sm-input>
<sm-button id="sign_in_button" width="cover" variant="primary" disable>continue</sm-button> <sm-button id="sign_in_button" width="cover" variant="primary" disable>continue</sm-button>
</form> </form>
<sm-button id="remove_account" class="hide-completely" variant="outlined" onclick="signOut()">Remove Account</sm-button> <sm-button id="remove_account" class="hide-completely" onclick="signOut()">Remove Account</sm-button>
</div> </div>
</section> </section>
<div id="on_boarding_page" class="page grid hide-completely"> <div id="on_boarding_page" class="page grid hide-completely">
@ -226,6 +226,9 @@
</div> </div>
</section> </section>
<ul id="contact_options"> <ul id="contact_options">
<li id="add_as_contact_option" class="option" onclick="addAsContact()">
Add as contact
</li>
<li id="mark_read_option" class="option" onclick="markAsRead()"> <li id="mark_read_option" class="option" onclick="markAsRead()">
Mark as read Mark as read
</li> </li>
@ -395,8 +398,8 @@
<line x1="423.3" y1="306.34" x2="423.3" y2="379.64"/> <line x1="423.3" y1="306.34" x2="423.3" y2="379.64"/>
<line x1="459.95" y1="342.99" x2="386.65" y2="342.99"/> <line x1="459.95" y1="342.99" x2="386.65" y2="342.99"/>
</svg> </svg>
<h4>Add a contact for getting started</h4> <h4>Start your first conversation</h4>
<p class="light-text">Tap/click on added contact to start a conversation</p> <p class="light-text">Tap/click on 'New chat' to add or select a contact.</p>
</div> </div>
<div id="all_contacts" class="flex direction-column hide-completely"> <div id="all_contacts" class="flex direction-column hide-completely">
<header class="grid header"> <header class="grid header">
@ -588,8 +591,8 @@
<div id="mail_container"> <div id="mail_container">
</div> </div>
<div class="flex"> <div class="flex">
<sm-button id="prev_mail" variant="outlined">View Previous Mail</sm-button> <sm-button id="prev_mail">View Previous Mail</sm-button>
<sm-button id="show_reply_popup" variant="outlined">reply</sm-button> <sm-button id="show_reply_popup">reply</sm-button>
</div> </div>
</div> </div>
</section> </section>
@ -954,6 +957,13 @@
switch (e.detail.popup.id) { switch (e.detail.popup.id) {
case 'contact_details_popup': case 'contact_details_popup':
if(floGlobals.contacts.hasOwnProperty(clickedContact.floID)){
getRef('add_as_contact_option').classList.add('hide-completely')
}
else{
getRef('add_as_contact_option').classList.remove('hide-completely')
}
const markUnread = floGlobals.marked[clickedContact.floID]?.includes('unread') const markUnread = floGlobals.marked[clickedContact.floID]?.includes('unread')
if(markUnread){ if(markUnread){
getRef('mark_read_option').classList.remove('hide-completely') getRef('mark_read_option').classList.remove('hide-completely')
@ -3182,6 +3192,11 @@
} }
} }
function addAsContact(){
showPopup('add_contact_popup')
getRef('add_contact_floID').value = clickedContact.floID
}
function markAsUnread(){ function markAsUnread(){
clickedContact.chatCard.classList.add('unread') clickedContact.chatCard.classList.add('unread')
messenger.addMark(clickedContact.floID, 'unread') messenger.addMark(clickedContact.floID, 'unread')

28
scripts/components.js
View File

@ -578,6 +578,9 @@ smTextarea.innerHTML = `
:host{ :host{
display: grid; display: grid;
--border-radius: 0.3s; --border-radius: 0.3s;
--background: rgba(var(--text-color), 0.06);
--padding-right: initial;
--padding-left: initial;
} }
:host(.outlined) .textarea { :host(.outlined) .textarea {
box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 0.4) inset; box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 0.4) inset;
@ -593,8 +596,10 @@ smTextarea.innerHTML = `
grid-template-columns: 1fr; grid-template-columns: 1fr;
align-items: stretch; align-items: stretch;
max-height: 8rem; max-height: 8rem;
background: rgba(var(--text-color), 0.06); background: var(--background);
border-radius: var(--border-radius); border-radius: var(--border-radius);
padding-left: var(--padding-left);
padding-right: var(--padding-right);
} }
.textarea::after, .textarea::after,
textarea{ textarea{
@ -1863,6 +1868,10 @@ smPopup.innerHTML = `
display: -ms-grid; display: -ms-grid;
display: grid; display: grid;
z-index: 10; z-index: 10;
--width: 100%;
--min-width: auto;
--body-padding: 1.5rem;
--border-radius: 0.8rem 0.8rem 0 0;
} }
::-webkit-scrollbar{ ::-webkit-scrollbar{
width: 0.5rem; width: 0.5rem;
@ -1908,8 +1917,9 @@ smPopup.innerHTML = `
-webkit-box-align: start; -webkit-box-align: start;
-ms-flex-align: start; -ms-flex-align: start;
align-items: flex-start; align-items: flex-start;
width: 100%; width: var(--width);
border-radius: 0.8rem 0.8rem 0 0; min-width: var(--min-width);
border-radius: var(--border-radius);
-webkit-transform: scale(1) translateY(100%); -webkit-transform: scale(1) translateY(100%);
transform: scale(1) translateY(100%); transform: scale(1) translateY(100%);
-webkit-transition: -webkit-transform 0.3s; -webkit-transition: -webkit-transform 0.3s;
@ -1948,7 +1958,7 @@ smPopup.innerHTML = `
-ms-flex: 1; -ms-flex: 1;
flex: 1; flex: 1;
width: 100%; width: 100%;
padding: 1.5rem; padding: var(--body-padding);
overflow-y: auto; overflow-y: auto;
} }
.hide{ .hide{
@ -1957,14 +1967,14 @@ smPopup.innerHTML = `
visiblity: none; visiblity: none;
} }
@media screen and (min-width: 640px){ @media screen and (min-width: 640px){
:host{
--border-radius: 0.4rem;
}
.popup{ .popup{
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
-ms-flex-item-align: center; -ms-flex-item-align: center;
-ms-grid-row-align: center; -ms-grid-row-align: center;
align-self: center; align-self: center;
border-radius: 0.4rem; border-radius: var(--border-radius);
height: auto; height: auto;
-webkit-transform: scale(1) translateY(3rem); -webkit-transform: scale(1) translateY(3rem);
transform: scale(1) translateY(3rem); transform: scale(1) translateY(3rem);
@ -1983,7 +1993,7 @@ smPopup.innerHTML = `
.handle{ .handle{
height: 0.3rem; height: 0.3rem;
width: 2rem; width: 2rem;
background: rgba(var(--text-color), .2); background: rgba(var(--text-color), .4);
border-radius: 1rem; border-radius: 1rem;
margin: 0.5rem 0; margin: 0.5rem 0;
} }