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

v0.13.63

Browse Source 
Fix (user): bug caused when trying to view a conversation with chat details
This commit is contained in:
sairaj mote 2021-01-25 16:45:40 +05:30
parent 18c30de121
commit 64c108ae59
4 changed files with 82 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
css/main.css
View File

@ -597,6 +597,9 @@ sm-button[variant=primary] .icon {
grid-template-columns: auto 1fr auto; grid-template-columns: auto 1fr auto;
grid-template-areas: "dp . time" "dp . menu"; grid-template-areas: "dp . time" "dp . menu";
} }
.contact.admin {
grid-template-columns: auto 1fr auto;
}
.contact .initial { .contact .initial {
grid-area: dp; grid-area: dp;
} }
@ -627,6 +630,12 @@ sm-button[variant=primary] .icon {
color: rgba(var(--text-color), 0.7); color: rgba(var(--text-color), 0.7);
grid-area: time; grid-area: time;
} }
.contact .admin-tag {
padding: 0.1rem 0.6rem;
font-size: 0.8rem;
border: #00c465 1px solid;
border-radius: 0.3rem;
}
#contact_details_popup > .flex:first-of-type { #contact_details_popup > .flex:first-of-type {
margin: 1rem 0; margin: 1rem 0;
@ -984,7 +993,7 @@ sm-button[variant=primary] .icon {
} }
#contacts, #mails, #settings_page { #contacts, #mails, #settings_page {
height: 100vh; height: 100%;
overflow-y: hidden; overflow-y: hidden;
} }
#contacts .header, #mails .header, #settings_page .header { #contacts .header, #mails .header, #settings_page .header {
@ -1061,7 +1070,7 @@ sm-button[variant=primary] .icon {
} }
#chat_page { #chat_page {
overflow-y: hidden; overflow: hidden;
} }
#chat_left, #chat_left,
@ -1620,7 +1629,7 @@ sm-panel {
} }
#chat .message { #chat .message {
width: fit-content; width: auto;
max-width: 90%; max-width: 90%;
} }
@ -1677,13 +1686,11 @@ sm-panel {
width: auto; width: auto;
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
background: rgba(var(--text-color), 0.06); background: rgba(var(--text-color), 0.06);
margin: 0.5rem;
border-radius: 0.8rem;
} }
#main_navbar .logo-section { #main_navbar .logo-section {
display: flex; display: flex;
justify-content: center; justify-content: center;
margin: 1rem 0 2rem 0; margin: 1.5rem 0 2rem 0;
} }
#main_navbar .logo-section .main-logo { #main_navbar .logo-section .main-logo {
margin: 0; margin: 0;
@ -1791,9 +1798,6 @@ sm-panel {
#chat.expand-side-panel #messages_container { #chat.expand-side-panel #messages_container {
padding: 1rem; padding: 1rem;
} }
#chat .active {
background: rgba(var(--text-color), 0.1);
}
.contact.active, .contact.active,
.mail-card.active { .mail-card.active {
@ -1823,17 +1827,17 @@ sm-panel {
background: rgba(var(--text-color), 0.5); background: rgba(var(--text-color), 0.5);
} }
.contact { .navbar-item:hover,
.contact:hover {
cursor: pointer; cursor: pointer;
background: rgba(var(--text-color), 0.06);
} }
.contact .menu { .contact .menu {
opacity: 0; opacity: 0;
transition: opacity 0.3s; transition: opacity 0.3s;
} }
.contact:hover {
background: rgba(var(--text-color), 0.06);
}
.contact:hover .menu { .contact:hover .menu {
opacity: 1; opacity: 1;
} }

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

29
css/main.scss
View File

@ -546,6 +546,9 @@ sm-button[variant="primary"]{
grid-template-areas: 'dp . time' grid-template-areas: 'dp . time'
'dp . menu'; 'dp . menu';
} }
&.admin{
grid-template-columns: auto 1fr auto;
}
.initial{ .initial{
grid-area: dp; grid-area: dp;
} }
@ -576,6 +579,12 @@ sm-button[variant="primary"]{
color: rgba(var(--text-color), 0.7); color: rgba(var(--text-color), 0.7);
grid-area: time; grid-area: time;
} }
.admin-tag{
padding: 0.1rem 0.6rem;
font-size: 0.8rem;
border: #00c465 1px solid;
border-radius: 0.3rem;
}
} }
#contact_details_popup{ #contact_details_popup{
& > .flex:first-of-type{ & > .flex:first-of-type{
@ -919,7 +928,7 @@ sm-button[variant="primary"]{
grid-template-rows: max-content 1fr; grid-template-rows: max-content 1fr;
} }
#contacts, #mails, #settings_page{ #contacts, #mails, #settings_page{
height: 100vh; height: 100%;
overflow-y: hidden; overflow-y: hidden;
.header{ .header{
//background: rgba(var(--text-color), 0.06); //background: rgba(var(--text-color), 0.06);
@ -999,7 +1008,7 @@ sm-button[variant="primary"]{
} }
} }
#chat_page{ #chat_page{
overflow-y: hidden; overflow: hidden;
} }
#chat_left, #chat_left,
#chat_details_panel{ #chat_details_panel{
@ -1534,7 +1543,7 @@ sm-panel{
} }
#chat{ #chat{
.message{ .message{
width: fit-content; width: auto;
max-width: 90%; max-width: 90%;
} }
} }
@ -1588,12 +1597,10 @@ sm-panel{
width: auto; width: auto;
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
background: rgba(var(--text-color), 0.06); background: rgba(var(--text-color), 0.06);
margin: 0.5rem;
border-radius: 0.8rem;
.logo-section{ .logo-section{
display: flex; display: flex;
justify-content: center; justify-content: center;
margin: 1rem 0 2rem 0; margin: 1.5rem 0 2rem 0;
.main-logo{ .main-logo{
margin: 0; margin: 0;
} }
@ -1694,9 +1701,6 @@ sm-panel{
padding: 1rem; padding: 1rem;
} }
} }
.active{
background: rgba(var(--text-color), 0.1);
}
} }
.contact.active, .contact.active,
.mail-card.active{ .mail-card.active{
@ -1723,15 +1727,18 @@ sm-panel{
background: rgba(var(--text-color), 0.5); background: rgba(var(--text-color), 0.5);
} }
} }
.contact{ .navbar-item:hover,
.contact:hover{
cursor: pointer; cursor: pointer;
background: rgba(var(--text-color), 0.06);
}
.contact{
.menu{ .menu{
opacity: 0; opacity: 0;
transition: opacity 0.3s; transition: opacity 0.3s;
} }
} }
.contact:hover{ .contact:hover{
background: rgba(var(--text-color), 0.06);
.menu{ .menu{
opacity: 1; opacity: 1;
} }

58
index.html
View File

@ -249,7 +249,7 @@
<!-- Templates --> <!-- Templates -->
<template id="mail_card_template"> <template id="mail_card_template">
<div class="mail-card"> <div class="mail-card interact">
<div class="flex align-center"> <div class="flex align-center">
<h5 class="sender"></h5> <h5 class="sender"></h5>
<h5 class="date"></h5> <h5 class="date"></h5>
@ -436,7 +436,7 @@
<line x1="1" y1="32" x2="64" y2="32"/> <line x1="1" y1="32" x2="64" y2="32"/>
<polyline points="29.64 60.97 0.65 32 29.64 3.03"/> <polyline points="29.64 60.97 0.65 32 29.64 3.03"/>
</svg> </svg>
<div class="flex align-center interact" onclick="showChatDetails(true)"> <div class="flex align-center interact" onclick="showChatDetails({show: true})">
<div id="receiver_initial" class="initial flex align-center"></div> <div id="receiver_initial" class="initial flex align-center"></div>
<h4 id="receiver_name"></h4> <h4 id="receiver_name"></h4>
</div> </div>
@ -466,7 +466,7 @@
</div> </div>
<div id="chat_details_panel" class="hide-completely"> <div id="chat_details_panel" class="hide-completely">
<header class="flex align-center"> <header class="flex align-center">
<svg class="icon" onclick="showChatDetails(false)" viewBox="0 0 64 64"> <svg class="icon" onclick="showChatDetails({show: false})" viewBox="0 0 64 64">
<title>close</title> <title>close</title>
<line x1="64" y1="0" x2="0" y2="64" /> <line x1="64" y1="0" x2="0" y2="64" />
<line x1="64" y1="64" x2="0" y2="0" /> <line x1="64" y1="64" x2="0" y2="0" />
@ -493,9 +493,15 @@
<p id="group_description"></p> <p id="group_description"></p>
</div> </div>
<div id="group_members_card" class="card hide-completely"> <div id="group_members_card" class="card hide-completely">
<h4>Group members</h4> <div class="flex align-center">
<h4>Group members</h4>
<sm-button class="admin-option justify-right round">Add member</sm-button>
</div>
<div id="group_members_list"></div> <div id="group_members_list"></div>
</div> </div>
<div class="card">
<sm-button>Clear chat</sm-button>
</div>
</div> </div>
</div> </div>
</section> </section>
@ -1288,7 +1294,7 @@
return card return card
}, },
contactCard(floID, options = {}){ contactCard(floID, options = {}){
let {name, type, prepend = false, markUnread = false, contactOnly = false} = options let {name, type, prepend = false, markUnread = false, contactOnly = false, isAdmin = 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)
@ -1313,6 +1319,13 @@
initial.setAttribute(`style`, `background-color: ${color};`) initial.setAttribute(`style`, `background-color: ${color};`)
if(contactOnly){ if(contactOnly){
if(isAdmin){
let adminTag = document.createElement('p')
adminTag.textContent = 'Admin'
cardContainer.classList.add('admin')
adminTag.classList.add('admin-tag')
cardContainer.append(adminTag)
}
return card; return card;
} }
else if(type === 'contact'){ else if(type === 'contact'){
@ -1735,7 +1748,7 @@
contact = getRef('chat_container').querySelector(`[flo-id="${clickedContact['floID']}"]`) contact = getRef('chat_container').querySelector(`[flo-id="${clickedContact['floID']}"]`)
contact.classList.remove('unread') contact.classList.remove('unread')
if(activeChat['chatCard'] === contact && window.innerWidth > 640) return if(activeChat['chatCard'] === contact && window.innerWidth > 640) return
showChatDetails(false) showChatDetails({show: false, animate: false})
document.title = `FLO Messenger` document.title = `FLO Messenger`
getRef('chat').classList.remove('hide-completely') getRef('chat').classList.remove('hide-completely')
viewConversation(contact) viewConversation(contact)
@ -2431,7 +2444,8 @@
getRef('group_members_list').innerHTML = '' getRef('group_members_list').innerHTML = ''
floGlobals.groups[floID].members.forEach(member => { floGlobals.groups[floID].members.forEach(member => {
frag.append(render.contactCard(member, {type: 'contact', contactOnly: true})) let isAdmin = floGlobals.groups[floID].admin === member ? true : false
frag.append(render.contactCard(member, {type: 'contact', contactOnly: true, isAdmin}))
}) })
getRef('group_members_list').append(frag) getRef('group_members_list').append(frag)
@ -2705,16 +2719,36 @@
getRef(target).children[1].focusIn() getRef(target).children[1].focusIn()
} }
function showChatDetails(show){ let isChatDetailsOpen = false
function showChatDetails({show, animate= true}){
if(show){ if(show){
isChatDetailsOpen = true
getRef('chat').classList.add('expand-side-panel') getRef('chat').classList.add('expand-side-panel')
getRef('chat_left').classList.add('hide-on-medium') getRef('chat_left').classList.add('hide-on-medium')
getRef('chat_details_panel').classList.remove('hide-completely') getRef('chat_details_panel').classList.remove('hide-completely')
animateTo(getRef('chat_details_panel'), [
{transform: 'translateX(3rem)'},
{transform: 'translateX(0)'},
],
{
duration: animate ? 300 : 0,
easing: 'ease'
})
} }
else{ else if(isChatDetailsOpen){
getRef('chat').classList.remove('expand-side-panel') isChatDetailsOpen = false
getRef('chat_left').classList.remove('hide-on-medium') animateTo(getRef('chat_details_panel'), [
getRef('chat_details_panel').classList.add('hide-completely') {transform: 'translateX(0)'},
{transform: 'translateX(3rem)'},
],
{
duration: animate ? 300 : 0,
easing: 'ease'
}).onfinish = () => {
getRef('chat').classList.remove('expand-side-panel')
getRef('chat_left').classList.remove('hide-on-medium')
getRef('chat_details_panel').classList.add('hide-completely')
}
} }
} }