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

v0.19.66

Browse Source 
Feat (user): add empty state when no contacts are availble to add.

Fix (user): added waring for admin when adding new members to group.
This commit is contained in:
sairaj mote 2021-01-28 19:37:34 +05:30
parent e59347030e
commit 0f1b733d80
4 changed files with 74 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
css/main.css
View File

@ -202,6 +202,11 @@ a:any-link {
font-weight: normal; font-weight: normal;
} }
.warning {
background: wheat;
color: #111;
}
.icon { .icon {
fill: none; fill: none;
stroke-width: 6; stroke-width: 6;
@ -590,6 +595,7 @@ sm-button.danger {
padding: 0.8rem 1.5rem; padding: 0.8rem 1.5rem;
align-items: center; align-items: center;
flex-shrink: 0; flex-shrink: 0;
user-select: none;
overflow: hidden; overflow: hidden;
} }
.contact:not(.chat) { .contact:not(.chat) {
@ -603,6 +609,9 @@ sm-button.danger {
.contact.admin { .contact.admin {
grid-template-columns: auto 1fr auto; grid-template-columns: auto 1fr auto;
} }
.contact.selected {
background-color: rgba(var(--text-color), 0.06);
}
.contact .initial { .contact .initial {
grid-area: dp; grid-area: dp;
} }
@ -1291,9 +1300,12 @@ sm-button.danger {
} }
} }
#chat_header { #chat_header {
padding: 1rem; padding: 0 1rem;
min-height: 4rem; min-height: 4rem;
grid-template-columns: auto 1fr auto; grid-template-columns: 1fr;
}
#chat_header .flex {
height: 100%;
} }
#chat_header .back-button { #chat_header .back-button {
height: 2rem; height: 2rem;
@ -1478,11 +1490,11 @@ sm-button.danger {
overflow-y: auto; overflow-y: auto;
} }
#chat_container:empty { .observe-empty-state:empty {
display: none; display: none;
} }
#chat_container:not(:empty) ~ .empty-state { .observe-empty-state:not(:empty) ~ .empty-state {
display: none; display: none;
} }
@ -1493,6 +1505,12 @@ sm-button.danger {
#contacts_popup::part(popup-body) { #contacts_popup::part(popup-body) {
padding: 0; padding: 0;
} }
#contacts_popup .popup-header {
padding: 1.5rem;
}
#contacts_popup .warning {
padding: 0.5rem 1.5rem;
}
sm-tab-panels { sm-tab-panels {
overflow: hidden auto; overflow: hidden auto;
@ -1668,6 +1686,10 @@ sm-panel {
max-width: 90%; max-width: 90%;
} }
#chat_header {
grid-template-columns: auto 1fr;
}
#settings_page { #settings_page {
overflow-x: hidden; overflow-x: hidden;
} }

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

34
css/main.scss
View File

@ -168,6 +168,10 @@ a:any-link{
.normal-weight{ .normal-weight{
font-weight: normal; font-weight: normal;
} }
.warning{
background: wheat;
color: #111;
}
.icon{ .icon{
fill: none; fill: none;
stroke-width: 6; stroke-width: 6;
@ -537,6 +541,7 @@ sm-button.danger{
padding: 0.8rem 1.5rem; padding: 0.8rem 1.5rem;
align-items: center; align-items: center;
flex-shrink: 0; flex-shrink: 0;
user-select: none;
overflow: hidden; overflow: hidden;
&:not(.chat){ &:not(.chat){
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;
@ -551,6 +556,9 @@ sm-button.danger{
&.admin{ &.admin{
grid-template-columns: auto 1fr auto; grid-template-columns: auto 1fr auto;
} }
&.selected{
background-color: rgba(var(--text-color), 0.06);
}
.initial{ .initial{
grid-area: dp; grid-area: dp;
} }
@ -1223,9 +1231,12 @@ sm-button.danger{
} }
} }
#chat_header{ #chat_header{
padding: 1rem; padding: 0 1rem;
min-height: 4rem; min-height: 4rem;
grid-template-columns: auto 1fr auto; grid-template-columns: 1fr;
.flex{
height: 100%;
}
.back-button{ .back-button{
height: 2rem; height: 2rem;
width: 2rem; width: 2rem;
@ -1403,17 +1414,25 @@ sm-button.danger{
height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;
} }
#chat_container:empty{ .observe-empty-state:empty{
display: none; display: none;
} }
#chat_container:not(:empty) ~ .empty-state{ .observe-empty-state:not(:empty) ~ .empty-state{
display: none; display: none;
} }
#chat_container{ #chat_container{
padding-bottom: 6rem; padding-bottom: 6rem;
} }
#contacts_popup::part(popup-body){ #contacts_popup{
padding: 0; &::part(popup-body){
padding: 0;
}
.popup-header{
padding: 1.5rem;
}
.warning{
padding: 0.5rem 1.5rem;
}
} }
sm-tab-panels{ sm-tab-panels{
overflow: hidden auto; overflow: hidden auto;
@ -1580,6 +1599,9 @@ sm-panel{
max-width: 90%; max-width: 90%;
} }
} }
#chat_header{
grid-template-columns: auto 1fr;
}
#settings_page{ #settings_page{
overflow-x: hidden; overflow-x: hidden;
#settings_panel header{ #settings_panel header{

34
index.html
View File

@ -254,7 +254,11 @@
<h4>Select contact to add</h4> <h4>Select contact to add</h4>
<sm-button id="add_members_button" variant="primary" disabled>Add</sm-button> <sm-button id="add_members_button" variant="primary" disabled>Add</sm-button>
</header> </header>
<div id="popup_contacts_container"></div> <p class="warning">*Contacts that haven't yet replied to you, can't be added to a group. So they won't be visible here.</p>
<div id="popup_contacts_container" class="observe-empty-state"></div>
<div class="empty-state">
<p>You don't have any other contacts to show.</p>
</div>
</sm-popup> </sm-popup>
<!-- Templates --> <!-- Templates -->
@ -383,7 +387,7 @@
</svg> </svg>
New chat New chat
</sm-button> </sm-button>
<div id="chat_container" class="flex"></div> <div id="chat_container" class="flex observe-empty-state"></div>
<div id="new_conversation" class="flex direction-column empty-state"> <div id="new_conversation" class="flex direction-column empty-state">
<svg class="icon new-conversation align-center" viewBox="0 0 512 512"> <svg class="icon new-conversation align-center" viewBox="0 0 512 512">
<title>new conversation</title> <title>new conversation</title>
@ -506,7 +510,7 @@
<div id="group_members_card" class="card hide-completely"> <div id="group_members_card" class="card hide-completely">
<div class="flex align-center"> <div class="flex align-center">
<h4 class="h4">Group members</h4> <h4 class="h4">Group members</h4>
<sm-button id="edit_group_button" class="admin-option round small justify-right" onclick="editGroupMembers()">Edit</sm-button> <sm-button id="edit_group_button" class="admin-option hide-completely round small justify-right" onclick="editGroupMembers()">Edit</sm-button>
</div> </div>
<p id="remove_members_tip" class="tip hide-completely">Select members to remove or add new members</p> <p id="remove_members_tip" class="tip hide-completely">Select members to remove or add new members</p>
<div id="member_options" class="flex hide-completely"> <div id="member_options" class="flex hide-completely">
@ -516,8 +520,8 @@
<div id="group_members_list"></div> <div id="group_members_list"></div>
</div> </div>
<div class="card"> <div class="card">
<sm-button>Clear chat</sm-button> <sm-button class="danger">Clear chat</sm-button>
<sm-button>Delete chat</sm-button> <sm-button class="danger">Delete chat</sm-button>
</div> </div>
</div> </div>
</div> </div>
@ -679,9 +683,9 @@
//Checks for internet connection status //Checks for internet connection status
if (!navigator.onLine) if (!navigator.onLine)
notify('There seems to be a problem connecting to the internet.', 'error', '', true) notify('There seems to be a problem connecting to the internet, Please check you internet connection.', 'error', '', true)
window.addEventListener('offline', () => { window.addEventListener('offline', () => {
notify('There seems to be a problem connecting to the internet.', 'error', true, true) notify('There seems to be a problem connecting to the internet, Please check you internet connection.', 'error', true, true)
}) })
window.addEventListener('online', () => { window.addEventListener('online', () => {
getRef('notification_drawer').clearAll() getRef('notification_drawer').clearAll()
@ -807,7 +811,7 @@
case 'contacts_popup': case 'contacts_popup':
const contacts = [] const contacts = []
for(contact in floGlobals.contacts){ for(contact in floGlobals.contacts){
if(!floGlobals.groups[activeChat.floID].members.includes(contact)){ if(!floGlobals.groups[activeChat.floID].members.includes(contact) && contact in floGlobals.pubKeys){
contacts.push(contact) contacts.push(contact)
} }
} }
@ -818,7 +822,6 @@
getRef('popup_contacts_container').querySelectorAll('.contact').forEach(cont => { getRef('popup_contacts_container').querySelectorAll('.contact').forEach(cont => {
cont.classList.add('selectable') cont.classList.add('selectable')
}) })
isAddingMember = true
isRemovingMember = false isRemovingMember = false
break break
} }
@ -834,7 +837,6 @@
break; break;
case 'contacts_popup': case 'contacts_popup':
getRef('popup_contacts_container').innerHTML = '' getRef('popup_contacts_container').innerHTML = ''
isAddingMember = false
isRemovingMember = true isRemovingMember = true
membersToAdd.clear() membersToAdd.clear()
break; break;
@ -2856,10 +2858,12 @@
if(floGlobals.groups[activeChat['floID']].admin === myFloID){ if(floGlobals.groups[activeChat['floID']].admin === myFloID){
getRef("chat_name").disabled = false getRef("chat_name").disabled = false
getRef('group_description').disabled = false getRef('group_description').disabled = false
getRef('edit_group_button').classList.remove('hide-completely')
} }
else{ else{
getRef("chat_name").disabled = true getRef("chat_name").disabled = true
getRef('group_description').disabled = true getRef('group_description').disabled = true
getRef('edit_group_button').classList.add('hide-completely')
} }
} }
else{ else{
@ -2916,7 +2920,6 @@
let isGroupEditable = false let isGroupEditable = false
let isRemovingMember = false let isRemovingMember = false
let isAddingMember = false
function editGroupMembers(){ function editGroupMembers(){
if(!isChatDetailsOpen && !isGroupEditable) return if(!isChatDetailsOpen && !isGroupEditable) return
if(isGroupEditable){ if(isGroupEditable){
@ -2935,7 +2938,6 @@
getRef('remove_members_tip').classList.add('hide-completely') getRef('remove_members_tip').classList.add('hide-completely')
getRef('member_options').classList.add('hide-completely') getRef('member_options').classList.add('hide-completely')
isGroupEditable = false isGroupEditable = false
isAddingMember = false
isRemovingMember = false isRemovingMember = false
} }
else{ else{
@ -2953,7 +2955,6 @@
getRef('remove_members_button').classList.add('hide-completely') getRef('remove_members_button').classList.add('hide-completely')
getRef('init_add_members_button').classList.remove('hide-completely') getRef('init_add_members_button').classList.remove('hide-completely')
isGroupEditable = true isGroupEditable = true
isAddingMember = false
isRemovingMember = true isRemovingMember = true
} }
} }
@ -3001,6 +3002,7 @@
} }
function addTick(contact){ function addTick(contact){
contact.classList.add('selected')
const initial = contact.querySelector('.initial') const initial = contact.querySelector('.initial')
const tick = document.createElement('div'); const tick = document.createElement('div');
tick.innerHTML = ` tick.innerHTML = `
@ -3022,7 +3024,8 @@
} }
) )
} }
function removeTick(contact, options){ function removeTick(contact){
contact.classList.remove('selected')
const tick = contact.querySelector('.tick') const tick = contact.querySelector('.tick')
tick.animate([ tick.animate([
{transform: 'scale(1)'}, {transform: 'scale(1)'},
@ -3054,9 +3057,10 @@
function removeGroupMembers(){ function removeGroupMembers(){
messenger.rmGroupMembers(activeChat.floID, [...membersToRemove]) messenger.rmGroupMembers(activeChat.floID, [...membersToRemove])
.then(res => { .then(res => {
getRef('group_members_list').querySelectorAll('.contact .tick').forEach(contact => { getRef('group_members_list').querySelectorAll('.selected').forEach(contact => {
contact.remove() contact.remove()
}) })
editGroupMembers()
}) })
.catch(err => console.log(err)) .catch(err => console.log(err))
} }