v0.13.63
Fix (user): bug caused when trying to view a conversation with chat details
This commit is contained in:
sairaj mote
parent
18c30de121
commit
64c108ae59
30
css/main.css
30
css/main.css
@ -597,6 +597,9 @@ sm-button[variant=primary] .icon {
|
||||
grid-template-columns: auto 1fr auto;
|
||||
grid-template-areas: "dp . time" "dp . menu";
|
||||
}
|
||||
.contact.admin {
|
||||
grid-template-columns: auto 1fr auto;
|
||||
}
|
||||
.contact .initial {
|
||||
grid-area: dp;
|
||||
}
|
||||
@ -627,6 +630,12 @@ sm-button[variant=primary] .icon {
|
||||
color: rgba(var(--text-color), 0.7);
|
||||
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 {
|
||||
margin: 1rem 0;
|
||||
@ -984,7 +993,7 @@ sm-button[variant=primary] .icon {
|
||||
}
|
||||
|
||||
#contacts, #mails, #settings_page {
|
||||
height: 100vh;
|
||||
height: 100%;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
#contacts .header, #mails .header, #settings_page .header {
|
||||
@ -1061,7 +1070,7 @@ sm-button[variant=primary] .icon {
|
||||
}
|
||||
|
||||
#chat_page {
|
||||
overflow-y: hidden;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#chat_left,
|
||||
@ -1620,7 +1629,7 @@ sm-panel {
|
||||
}
|
||||
|
||||
#chat .message {
|
||||
width: fit-content;
|
||||
width: auto;
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
@ -1677,13 +1686,11 @@ sm-panel {
|
||||
width: auto;
|
||||
padding-bottom: 0.5rem;
|
||||
background: rgba(var(--text-color), 0.06);
|
||||
margin: 0.5rem;
|
||||
border-radius: 0.8rem;
|
||||
}
|
||||
#main_navbar .logo-section {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 1rem 0 2rem 0;
|
||||
margin: 1.5rem 0 2rem 0;
|
||||
}
|
||||
#main_navbar .logo-section .main-logo {
|
||||
margin: 0;
|
||||
@ -1791,9 +1798,6 @@ sm-panel {
|
||||
#chat.expand-side-panel #messages_container {
|
||||
padding: 1rem;
|
||||
}
|
||||
#chat .active {
|
||||
background: rgba(var(--text-color), 0.1);
|
||||
}
|
||||
|
||||
.contact.active,
|
||||
.mail-card.active {
|
||||
@ -1823,17 +1827,17 @@ sm-panel {
|
||||
background: rgba(var(--text-color), 0.5);
|
||||
}
|
||||
|
||||
.contact {
|
||||
.navbar-item:hover,
|
||||
.contact:hover {
|
||||
cursor: pointer;
|
||||
background: rgba(var(--text-color), 0.06);
|
||||
}
|
||||
|
||||
.contact .menu {
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.contact:hover {
|
||||
background: rgba(var(--text-color), 0.06);
|
||||
}
|
||||
.contact:hover .menu {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -546,6 +546,9 @@ sm-button[variant="primary"]{
|
||||
grid-template-areas: 'dp . time'
|
||||
'dp . menu';
|
||||
}
|
||||
&.admin{
|
||||
grid-template-columns: auto 1fr auto;
|
||||
}
|
||||
.initial{
|
||||
grid-area: dp;
|
||||
}
|
||||
@ -576,6 +579,12 @@ sm-button[variant="primary"]{
|
||||
color: rgba(var(--text-color), 0.7);
|
||||
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{
|
||||
& > .flex:first-of-type{
|
||||
@ -919,7 +928,7 @@ sm-button[variant="primary"]{
|
||||
grid-template-rows: max-content 1fr;
|
||||
}
|
||||
#contacts, #mails, #settings_page{
|
||||
height: 100vh;
|
||||
height: 100%;
|
||||
overflow-y: hidden;
|
||||
.header{
|
||||
//background: rgba(var(--text-color), 0.06);
|
||||
@ -999,7 +1008,7 @@ sm-button[variant="primary"]{
|
||||
}
|
||||
}
|
||||
#chat_page{
|
||||
overflow-y: hidden;
|
||||
overflow: hidden;
|
||||
}
|
||||
#chat_left,
|
||||
#chat_details_panel{
|
||||
@ -1534,7 +1543,7 @@ sm-panel{
|
||||
}
|
||||
#chat{
|
||||
.message{
|
||||
width: fit-content;
|
||||
width: auto;
|
||||
max-width: 90%;
|
||||
}
|
||||
}
|
||||
@ -1588,12 +1597,10 @@ sm-panel{
|
||||
width: auto;
|
||||
padding-bottom: 0.5rem;
|
||||
background: rgba(var(--text-color), 0.06);
|
||||
margin: 0.5rem;
|
||||
border-radius: 0.8rem;
|
||||
.logo-section{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 1rem 0 2rem 0;
|
||||
margin: 1.5rem 0 2rem 0;
|
||||
.main-logo{
|
||||
margin: 0;
|
||||
}
|
||||
@ -1694,9 +1701,6 @@ sm-panel{
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
.active{
|
||||
background: rgba(var(--text-color), 0.1);
|
||||
}
|
||||
}
|
||||
.contact.active,
|
||||
.mail-card.active{
|
||||
@ -1723,15 +1727,18 @@ sm-panel{
|
||||
background: rgba(var(--text-color), 0.5);
|
||||
}
|
||||
}
|
||||
.contact{
|
||||
.navbar-item:hover,
|
||||
.contact:hover{
|
||||
cursor: pointer;
|
||||
background: rgba(var(--text-color), 0.06);
|
||||
}
|
||||
.contact{
|
||||
.menu{
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
}
|
||||
.contact:hover{
|
||||
background: rgba(var(--text-color), 0.06);
|
||||
.menu{
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
58
index.html
58
index.html
@ -249,7 +249,7 @@
|
||||
<!-- Templates -->
|
||||
|
||||
<template id="mail_card_template">
|
||||
<div class="mail-card">
|
||||
<div class="mail-card interact">
|
||||
<div class="flex align-center">
|
||||
<h5 class="sender"></h5>
|
||||
<h5 class="date"></h5>
|
||||
@ -436,7 +436,7 @@
|
||||
<line x1="1" y1="32" x2="64" y2="32"/>
|
||||
<polyline points="29.64 60.97 0.65 32 29.64 3.03"/>
|
||||
</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>
|
||||
<h4 id="receiver_name"></h4>
|
||||
</div>
|
||||
@ -466,7 +466,7 @@
|
||||
</div>
|
||||
<div id="chat_details_panel" class="hide-completely">
|
||||
<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>
|
||||
<line x1="64" y1="0" x2="0" y2="64" />
|
||||
<line x1="64" y1="64" x2="0" y2="0" />
|
||||
@ -493,9 +493,15 @@
|
||||
<p id="group_description"></p>
|
||||
</div>
|
||||
<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>
|
||||
<div class="card">
|
||||
<sm-button>Clear chat</sm-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -1288,7 +1294,7 @@
|
||||
return card
|
||||
},
|
||||
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),
|
||||
cardContainer = card.firstElementChild
|
||||
if(!name)
|
||||
@ -1313,6 +1319,13 @@
|
||||
initial.setAttribute(`style`, `background-color: ${color};`)
|
||||
|
||||
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;
|
||||
}
|
||||
else if(type === 'contact'){
|
||||
@ -1735,7 +1748,7 @@
|
||||
contact = getRef('chat_container').querySelector(`[flo-id="${clickedContact['floID']}"]`)
|
||||
contact.classList.remove('unread')
|
||||
if(activeChat['chatCard'] === contact && window.innerWidth > 640) return
|
||||
showChatDetails(false)
|
||||
showChatDetails({show: false, animate: false})
|
||||
document.title = `FLO Messenger`
|
||||
getRef('chat').classList.remove('hide-completely')
|
||||
viewConversation(contact)
|
||||
@ -2431,7 +2444,8 @@
|
||||
|
||||
getRef('group_members_list').innerHTML = ''
|
||||
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)
|
||||
|
||||
@ -2705,16 +2719,36 @@
|
||||
getRef(target).children[1].focusIn()
|
||||
}
|
||||
|
||||
function showChatDetails(show){
|
||||
let isChatDetailsOpen = false
|
||||
function showChatDetails({show, animate= true}){
|
||||
if(show){
|
||||
isChatDetailsOpen = true
|
||||
getRef('chat').classList.add('expand-side-panel')
|
||||
getRef('chat_left').classList.add('hide-on-medium')
|
||||
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{
|
||||
getRef('chat').classList.remove('expand-side-panel')
|
||||
getRef('chat_left').classList.remove('hide-on-medium')
|
||||
getRef('chat_details_panel').classList.add('hide-completely')
|
||||
else if(isChatDetailsOpen){
|
||||
isChatDetailsOpen = false
|
||||
animateTo(getRef('chat_details_panel'), [
|
||||
{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')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user