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;
}
#contact_details_popup::part(popup-body) {
padding: 0 0 1.5rem 0;
#contact_details_popup {
--body-padding: 0 0 1.5rem 0;
}
#contact_details_popup .popup-section {
margin: 1.5rem;
@ -1450,9 +1450,9 @@ sm-button.danger {
align-items: flex-end;
padding: 0.5rem 1rem 0.5rem 0.5rem;
}
#chat_footer sm-textarea::part(textarea) {
padding-right: 3rem;
border-radius: 0.5rem;
#chat_footer sm-textarea {
--padding-right: 3rem;
--border-radius: 0.5rem;
}
#emoji_toggle {
@ -1523,6 +1523,8 @@ sm-button.danger {
--outline-color: var(--accent-color);
--input-font-color: var(--text-color);
--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;
width: 100%;
max-height: 40vh;
@ -1583,8 +1585,8 @@ sm-button.danger {
padding-bottom: 6rem;
}
#contacts_popup::part(popup-body) {
padding: 0;
#contacts_popup {
--body-padding: 0;
}
#contacts_popup .popup-header {
padding: 1.5rem;
@ -1621,8 +1623,8 @@ sm-panel {
.has-bg-image #emoji_toggle path {
fill: rgba(var(--text-color), 0.8);
}
.has-bg-image sm-textarea::part(textarea) {
background: rgba(var(--foreground-color), 0.6);
.has-bg-image sm-textarea {
--background: rgba(var(--foreground-color), 0.6);
}
.has-bg-image #chat_details_panel {
background: rgba(var(--foreground-color), 0.8);
@ -1802,6 +1804,10 @@ sm-panel {
}
@media screen and (max-width: 640px) {
sm-popup {
--border-radius: 1rem 1rem 0 0;
}
.hide-on-mobile {
position: fixed;
max-height: 0;
@ -1909,9 +1915,10 @@ sm-panel {
margin: 0.5rem 0;
}
sm-popup::part(popup) {
width: 24rem;
min-width: 24rem;
sm-popup {
--width: 24rem;
--min-width: 24rem;
--border-radius: 0.5rem;
}
#landing {
@ -1961,13 +1968,13 @@ sm-panel {
display: none;
}
#add_contact_popup::part(popup) {
min-width: 24rem;
#add_contact_popup {
--min-width: 24rem;
}
#compose_mail_popup::part(popup),
#reply_mail_popup::part(popup) {
min-width: 36rem;
#compose_mail_popup,
#reply_mail_popup {
--min-width: 36rem;
}
#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{
&::part(popup-body){
padding: 0 0 1.5rem 0;
}
--body-padding: 0 0 1.5rem 0;
.popup-section{
margin: 1.5rem;
}
@ -1363,9 +1361,9 @@ sm-button.danger{
align-items: flex-end;
padding: 0.5rem 1rem 0.5rem 0.5rem;
}
sm-textarea::part(textarea){
padding-right: 3rem;
border-radius: 0.5rem;
sm-textarea{
--padding-right: 3rem;
--border-radius: 0.5rem;
}
}
#emoji_toggle{
@ -1431,6 +1429,8 @@ sm-button.danger{
--outline-color: var(--accent-color);
--input-font-color: var(--text-color);
--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;
width: 100%;
max-height: 40vh;
@ -1485,9 +1485,7 @@ sm-button.danger{
padding-bottom: 6rem;
}
#contacts_popup{
&::part(popup-body){
padding: 0;
}
--body-padding: 0;
.popup-header{
padding: 1.5rem;
}
@ -1525,8 +1523,8 @@ sm-panel{
fill: rgba(var(--text-color), 0.8);
}
}
sm-textarea::part(textarea){
background: rgba(var(--foreground-color), 0.6);
sm-textarea{
--background: rgba(var(--foreground-color), 0.6);
}
#chat_details_panel{
background: rgba(var(--foreground-color), 0.8);
@ -1698,6 +1696,9 @@ sm-panel{
--border-radius: 50%;
}
@media screen and (max-width: 640px){
sm-popup{
--border-radius: 1rem 1rem 0 0;
}
.hide-on-mobile{
position: fixed;
max-height: 0;
@ -1794,9 +1795,10 @@ sm-panel{
padding: 2rem 3rem 0 3rem;
margin: 0.5rem 0;
}
sm-popup::part(popup){
width: 24rem;
min-width: 24rem;
sm-popup{
--width: 24rem;
--min-width: 24rem;
--border-radius: 0.5rem;
}
#landing{
align-items: center;
@ -1842,12 +1844,12 @@ sm-panel{
display: none;
}
}
#add_contact_popup::part(popup){
min-width: 24rem;
#add_contact_popup{
--min-width: 24rem;
}
#compose_mail_popup::part(popup),
#reply_mail_popup::part(popup){
min-width: 36rem;
#compose_mail_popup,
#reply_mail_popup{
--min-width: 36rem;
}
#main_page{
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-button id="sign_in_button" width="cover" variant="primary" disable>continue</sm-button>
</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>
</section>
<div id="on_boarding_page" class="page grid hide-completely">
@ -226,6 +226,9 @@
</div>
</section>
<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()">
Mark as read
</li>
@ -395,8 +398,8 @@
<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"/>
</svg>
<h4>Add a contact for getting started</h4>
<p class="light-text">Tap/click on added contact to start a conversation</p>
<h4>Start your first conversation</h4>
<p class="light-text">Tap/click on 'New chat' to add or select a contact.</p>
</div>
<div id="all_contacts" class="flex direction-column hide-completely">
<header class="grid header">
@ -588,8 +591,8 @@
<div id="mail_container">
</div>
<div class="flex">
<sm-button id="prev_mail" variant="outlined">View Previous Mail</sm-button>
<sm-button id="show_reply_popup" variant="outlined">reply</sm-button>
<sm-button id="prev_mail">View Previous Mail</sm-button>
<sm-button id="show_reply_popup">reply</sm-button>
</div>
</div>
</section>
@ -954,6 +957,13 @@
switch (e.detail.popup.id) {
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')
if(markUnread){
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(){
clickedContact.chatCard.classList.add('unread')
messenger.addMark(clickedContact.floID, 'unread')

28
scripts/components.js
View File

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