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

fix (user)

Browse Source 
- Fixed scroll to bottom button behaviour
- lazy loading not working properly with smaller messages
- added hamburger menu
- changed color scheme
-added different sections for direct and group messages
This commit is contained in:
sairaj mote 2021-01-12 23:41:25 +05:30
parent 28156940f0
commit e54890b5f1
6 changed files with 1234 additions and 1163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2016
assets/illustrations-2.ai
View File

File diff suppressed because one or more lines are too long

149
css/main.css
View File

@ -9,7 +9,7 @@
:root {
scroll-behavior: smooth;
font-size: clamp(16px, 1.2vw, 48px);
font-size: clamp(16px, 1.2vmax, 48px);
}
html, body {
@ -17,7 +17,7 @@ html, body {
}
body {
--accent-color: #1976D2;
--accent-color:#d60739;
--secondary-color: #ffac2e;
--text-color: 17, 17, 17;
--text-color-light: 100, 100, 100;
@ -33,8 +33,9 @@ body #scroll_to_bottom {
}
body[data-theme=dark] {
--secondary-color: #FDB956;
--text-color: 218, 218, 218;
--accent-color: rgb(214 7 57);
--secondary-color: #d60739;
--text-color: 240, 240, 240;
--text-color-light: 170, 170, 170;
--foreground-color: 20, 20, 20;
}
@ -550,6 +551,7 @@ sm-button[variant=primary] .icon {
gap: 0 1rem;
padding: 0.8rem 1.5rem;
align-items: center;
min-height: max-content;
}
.contact.chat {
grid-template-columns: auto 1fr auto;
@ -739,6 +741,7 @@ sm-button[variant=primary] .icon {
color: white;
}
#main_navbar .label {
font-weight: 500;
font-size: 0.9rem;
}
#main_navbar .navbar-item {
@ -808,23 +811,6 @@ sm-button[variant=primary] .icon {
#contacts {
position: relative;
}
#contacts header {
position: relative;
gap: 0.5rem;
}
#contacts header sm-input {
margin: 0;
width: 100%;
}
#contacts header sm-input .icon {
stroke: rgba(var(--text-color), 0.5);
height: 0.9rem;
width: 0.9rem;
}
#contacts header sm-input::part(input) {
border-radius: 3rem;
padding: 0.5rem 1rem;
}
#contacts #all_contacts {
position: absolute;
top: 0;
@ -834,10 +820,13 @@ sm-button[variant=primary] .icon {
height: 100%;
width: 100%;
z-index: 1;
background-color: rgba(var(--foreground-color), 1);
background: linear-gradient(rgba(157, 166, 255, 0.063), rgba(157, 166, 255, 0.063)), rgba(var(--foreground-color), 1);
transition: transform 0.3s;
transform: translateX(-100%);
}
#contacts #all_contacts .header {
padding-bottom: 1rem;
}
#selected_contacts {
padding: 1.5rem;
@ -852,31 +841,58 @@ sm-button[variant=primary] .icon {
}
#contacts, #mails {
overflow-y: hidden;
position: relative;
grid-template-rows: max-content 1fr;
}
#contacts, #mails, #settings_page {
height: 100vh;
overflow-y: hidden;
}
#contacts header, #mails header {
padding: 1rem 1.5rem;
}
#contacts header h4, #mails header h4 {
text-transform: capitalize;
}
#contacts header .grid, #mails header .grid {
grid-template-columns: 1fr auto;
#contacts .header, #mails .header, #settings_page .header {
background: rgba(var(--text-color), 0.06);
padding: 1rem 1.5rem 0 1.5rem;
border-bottom: solid 1px rgba(var(--text-color), 0.2);
position: relative;
gap: 0.5rem;
}
#contacts header .grid .icon, #mails header .grid .icon {
#contacts .header sm-tab::part(tab), #mails .header sm-tab::part(tab), #settings_page .header sm-tab::part(tab) {
padding: 0.8rem 1rem;
}
#contacts .header sm-input, #mails .header sm-input, #settings_page .header sm-input {
margin: 0;
width: 100%;
}
#contacts .header sm-input .icon, #mails .header sm-input .icon, #settings_page .header sm-input .icon {
stroke: rgba(var(--text-color), 0.5);
height: 0.9rem;
width: 0.9rem;
}
#contacts .header sm-input::part(input), #mails .header sm-input::part(input), #settings_page .header sm-input::part(input) {
border-radius: 3rem;
padding: 0.5rem 1rem;
}
#contacts .header h4, #mails .header h4, #settings_page .header h4 {
text-transform: capitalize;
}
#contacts .header .flex h4, #mails .header .flex h4, #settings_page .header .flex h4 {
flex: 1;
margin: 0 1rem;
}
#contacts .header .flex .icon, #mails .header .flex .icon, #settings_page .header .flex .icon {
height: 2.2rem;
width: 2.2rem;
padding: 0.4rem;
padding: 0.6rem;
margin-left: -0.4rem;
cursor: pointer;
}
#contacts header sm-button, #mails header sm-button {
#contacts .header .flex sm-menu, #mails .header .flex sm-menu, #settings_page .header .flex sm-menu {
margin-right: -0.7rem;
}
#contacts .header sm-button, #mails .header sm-button, #settings_page .header sm-button {
margin: 0 0 0 auto;
}
#contacts header sm-button .icon, #mails header sm-button .icon {
#contacts .header sm-button .icon, #mails .header sm-button .icon, #settings_page .header sm-button .icon {
height: 0.9rem;
width: 0.9rem;
align-self: center;
@ -1143,9 +1159,9 @@ sm-button[variant=primary] .icon {
stroke: rgba(var(--text-color), 0.4);
}
#contacts_container,
#dm_container,
#chat_container,
#dm_container,
#contacts_container,
#inbox_mail_container,
#sent_mail_container,
#mail {
@ -1155,6 +1171,14 @@ sm-button[variant=primary] .icon {
overflow-y: auto;
}
#dm_container,
#contacts_container,
#inbox_mail_container,
#sent_mail_container {
height: auto;
min-height: 100%;
}
#dm_container:empty {
display: none;
}
@ -1171,6 +1195,11 @@ sm-tab-panels {
overflow: hidden auto;
}
sm-panel {
width: 100%;
overflow-y: auto;
}
#inbox_mail_container,
#sent_mail_container {
padding-bottom: 3.5rem;
@ -1213,7 +1242,6 @@ sm-tab-panels {
padding: 0.7rem;
height: 2.4rem;
width: 2.4rem;
background-color: rgba(var(--foreground-color), 1);
margin-left: -0.5rem;
cursor: pointer;
stroke-width: 8;
@ -1224,9 +1252,8 @@ sm-tab-panels {
opacity: 1;
}
#settings_page {
height: 100vh;
overflow: hidden auto;
#settings_page #settings_sidebar header {
padding: 1rem 1.5rem;
}
#settings_page .flex sm-button {
margin: 0;
@ -1242,7 +1269,7 @@ sm-tab-panels {
text-transform: capitalize;
}
#settings_page #settings_sidebar {
padding: 1rem 0;
height: 100%;
}
#settings_page #settings_panel {
padding: 0 1.5rem;
@ -1294,6 +1321,20 @@ sm-tab-panels {
transform: translateX(-100%);
transition: transform 0.3s;
z-index: 4;
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.3);
}
#main_navbar .logo-section {
padding: 1rem;
}
#main_navbar #navbar_backdrop {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
z-index: -1;
transition: transform 0.3s;
}
#dm_container,
@ -1313,10 +1354,11 @@ sm-tab-panels {
max-width: 90%;
}
#settings_page header {
#settings_page #settings_panel header {
position: sticky;
top: 0;
padding: 1.5rem 0;
padding: 1rem 0;
margin-bottom: 0.5rem;
background: rgba(var(--foreground-color), 1);
}
}
@ -1375,6 +1417,14 @@ sm-tab-panels {
background: rgba(var(--text-color), 0.05);
padding-bottom: 0.5rem;
}
#main_navbar .logo-section {
display: flex;
justify-content: center;
margin: 1.5rem 0;
}
#main_navbar .logo-section .main-logo {
margin: 0;
}
#main_navbar .navbar-item {
margin: 0 0.5rem;
border-radius: 0.5rem;
@ -1416,7 +1466,6 @@ sm-tab-panels {
}
#contacts, #mails, #settings_sidebar {
height: 100vh;
background-color: rgba(157, 166, 255, 0.063);
}
@ -1460,16 +1509,6 @@ sm-tab-panels {
font-size: 3rem;
}
#main_navbar {
width: 12rem;
}
#main_navbar .navbar-item .icon {
margin-right: 0.8rem;
}
#main_navbar .label {
display: block;
}
#chat_page, #mail_page {
grid-template-columns: 21rem 1fr;
}

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

139
css/main.scss
View File

@ -8,13 +8,13 @@
}
:root{
scroll-behavior: smooth;
font-size: clamp(16px, 1.2vw, 48px);
font-size: clamp(16px, 1.2vmax, 48px);
}
html, body{
height: 100%;
}
body{
--accent-color: #1976D2;
--accent-color:#d60739;
--secondary-color: #ffac2e;
--text-color: 17, 17, 17;
--text-color-light: 100, 100, 100;
@ -29,8 +29,9 @@ body{
}
}
body[data-theme='dark']{
--secondary-color: #FDB956;
--text-color: 218, 218, 218;
--accent-color: rgb(214 7 57);
--secondary-color: #d60739;
--text-color: 240, 240, 240;
--text-color-light: 170, 170, 170;
--foreground-color: 20, 20, 20;
.initial{
@ -500,6 +501,7 @@ sm-button[variant="primary"]{
gap: 0 1rem;
padding: 0.8rem 1.5rem;
align-items: center;
min-height: max-content;
&.chat{
grid-template-columns: auto 1fr auto;
grid-template-areas: 'dp . menu'
@ -666,7 +668,6 @@ sm-button[variant="primary"]{
width: max(18rem, 80vw);
height: 100vh;
background: rgba(var(--foreground-color), 1);
// box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
.logo-section{
margin: 1rem 0 1.5rem 0;
padding: 0 1rem;
@ -681,6 +682,7 @@ sm-button[variant="primary"]{
}
}
.label{
font-weight: 500;
font-size: 0.9rem;
}
.navbar-item{
@ -749,23 +751,6 @@ sm-button[variant="primary"]{
}
#contacts{
position: relative;
header{
position: relative;
gap: 0.5rem;
sm-input{
margin: 0;
width: 100%;
.icon{
stroke: rgba(var(--text-color), 0.5);
height: 0.9rem;
width: 0.9rem;
}
}
sm-input::part(input){
border-radius: 3rem;
padding: 0.5rem 1rem;
}
}
#all_contacts{
position: absolute;
top: 0;
@ -775,9 +760,12 @@ sm-button[variant="primary"]{
height: 100%;
width: 100%;
z-index: 1;
background-color:rgba(var(--foreground-color), 1);
background: linear-gradient(rgba(157, 166, 255, 0.063), rgba(157, 166, 255, 0.063)), rgba(var(--foreground-color), 1);
transition: transform 0.3s;
transform: translateX(-100%);
.header{
padding-bottom: 1rem;
}
}
}
#selected_contacts{
@ -792,24 +780,53 @@ sm-button[variant="primary"]{
}
}
#contacts, #mails{
overflow-y: hidden;
position: relative;
grid-template-rows: max-content 1fr;
}
#contacts, #mails, #settings_page{
height: 100vh;
header{
padding: 1rem 1.5rem;
overflow-y: hidden;
.header{
background: rgba(var(--text-color), 0.06);
padding: 1rem 1.5rem 0 1.5rem;
border-bottom: solid 1px rgba(var(--text-color), 0.2);
position: relative;
gap: 0.5rem;
// margin-bottom: 1rem;
sm-tab::part(tab){
padding: 0.8rem 1rem;
}
sm-input{
margin: 0;
width: 100%;
.icon{
stroke: rgba(var(--text-color), 0.5);
height: 0.9rem;
width: 0.9rem;
}
}
sm-input::part(input){
border-radius: 3rem;
padding: 0.5rem 1rem;
}
h4{
text-transform: capitalize;
}
.grid{
grid-template-columns: 1fr auto;
gap: 0.5rem;
.flex{
h4{
flex: 1;
margin: 0 1rem;
}
.icon{
height: 2.2rem;
width: 2.2rem;
padding: 0.4rem;
padding: 0.6rem;
margin-left: -0.4rem;
cursor: pointer;
}
sm-menu{
margin-right: -0.7rem;
}
}
sm-button{
margin: 0 0 0 auto;
@ -1081,9 +1098,9 @@ sm-button[variant="primary"]{
stroke-width: 16;
stroke: rgba(var(--text-color), 0.4);
}
#contacts_container,
#dm_container,
#chat_container,
#dm_container,
#contacts_container,
#inbox_mail_container,
#sent_mail_container,
#mail{
@ -1092,6 +1109,13 @@ sm-button[variant="primary"]{
height: 100%;
overflow-y: auto;
}
#dm_container,
#contacts_container,
#inbox_mail_container,
#sent_mail_container{
height: auto;
min-height: 100%;
}
#dm_container:empty{
display: none;
}
@ -1104,6 +1128,10 @@ sm-button[variant="primary"]{
sm-tab-panels{
overflow: hidden auto;
}
sm-panel{
width: 100%;
overflow-y: auto;
}
#inbox_mail_container,
#sent_mail_container
@ -1144,7 +1172,6 @@ sm-tab-panels{
padding: 0.7rem;
height: 2.4rem;
width: 2.4rem;
background-color: rgba(var(--foreground-color), 1);
margin-left: -0.5rem;
cursor: pointer;
stroke-width: 8;
@ -1155,8 +1182,9 @@ sm-tab-panels{
}
}
#settings_page{
height: 100vh;
overflow: hidden auto;
#settings_sidebar header{
padding: 1rem 1.5rem;
}
.flex sm-button{
margin: 0;
margin-left: 1rem;
@ -1171,7 +1199,7 @@ sm-tab-panels{
text-transform: capitalize;
}
#settings_sidebar{
padding: 1rem 0;
height: 100%;
}
#settings_panel{
padding: 0 1.5rem;
@ -1220,6 +1248,20 @@ sm-tab-panels{
transform: translateX(-100%);
transition: transform 0.3s;
z-index: 4;
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.3);
.logo-section{
padding: 1rem;
}
#navbar_backdrop{
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
z-index: -1;
transition: transform 0.3s;
}
}
#dm_container,
#contact_container{
@ -1239,10 +1281,11 @@ sm-tab-panels{
}
}
#settings_page{
header{
#settings_panel header{
position: sticky;
top: 0;
padding: 1.5rem 0;
padding: 1rem 0;
margin-bottom: 0.5rem;
background: rgba(var(--foreground-color), 1);
}
}
@ -1297,6 +1340,14 @@ sm-tab-panels{
width: auto;
background: rgba(var(--text-color), 0.05);
padding-bottom: 0.5rem;
.logo-section{
display: flex;
justify-content: center;
margin: 1.5rem 0;
.main-logo{
margin: 0;
}
}
.navbar-item{
margin: 0 0.5rem;
border-radius: 0.5rem;
@ -1336,7 +1387,6 @@ sm-tab-panels{
z-index: 1;
}
#contacts, #mails, #settings_sidebar{
height: 100vh;
background-color: rgba(157, 166, 255, 0.063);
}
#settings_page{
@ -1375,17 +1425,6 @@ sm-tab-panels{
font-size: 3rem;
}
}
#main_navbar{
width: 12rem;
.navbar-item{
.icon{
margin-right: 0.8rem;
}
}
.label{
display: block;
}
}
#chat_page, #mail_page{
grid-template-columns: 21rem 1fr;
}

87
index.html
View File

@ -259,7 +259,8 @@
</template>
<main id="main" class="grid hide-completely">
<nav id="main_navbar" class="flex">
<div class="logo-section hide-on-mobile" title="RanchiMall FLO Messenger">
<div id="navbar_backdrop" onclick="toggleDrawer()"></div>
<div class="logo-section" title="RanchiMall FLO Messenger">
<svg class="main-logo" viewBox="0 0 27.25 32">
<title>RanchiMall</title>
<path
@ -295,9 +296,14 @@
</nav>
<section id="chat_page" class="grid page">
<div id="contacts" class="grid">
<header class="grid">
<div class="grid align-center">
<h4>Chats</h4>
<header class="grid header">
<div class="flex align-center">
<svg class="icon" onclick="toggleDrawer()" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<line y1="10.66" x2="64" y2="10.66"/>
<line y1="32" x2="64" y2="32"/>
<line y1="53.34" x2="64" y2="53.34"/>
</svg>
<h4>Chat</h4>
<sm-menu align-options="right">
<sm-menu-option onclick="initGroupCreation()">Create a group</sm-menu-option>
</sm-menu>
@ -309,6 +315,10 @@
<line x1="63.65" y1="63.66" x2="43.36" y2="43.37"/>
</svg>
</sm-input>
<sm-tab-header target="chat_panels">
<sm-tab>Direct</sm-tab>
<sm-tab>Groups</sm-tab>
</sm-tab-header>
</header>
<sm-button variant="primary" id="new_message_button" onclick="showContacts()" class="fab round">
<svg xmlns="http://www.w3.org/2000/svg"class="icon" viewBox="0 0 64 64">
@ -318,20 +328,25 @@
</svg>
New chat
</sm-button>
<div id="dm_container" class="flex"></div>
<div id="new_conversation" class="flex direction-column empty-state">
<svg class="icon new-conversation align-center" viewBox="0 0 512 512">
<title>new conversation</title>
<path d="M304.11,403.5H101.42a51,51,0,0,1-51-51v-191L6.87,84.82H424.36a51,51,0,0,1,51,51v86.72"/>
<ellipse cx="423.3" cy="342.48" rx="84.7"/>
<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>
</div>
<sm-tab-panels id="chat_panels">
<sm-panel>
<div id="dm_container" class="flex"></div>
<div id="new_conversation" class="flex direction-column empty-state">
<svg class="icon new-conversation align-center" viewBox="0 0 512 512">
<title>new conversation</title>
<path d="M304.11,403.5H101.42a51,51,0,0,1-51-51v-191L6.87,84.82H424.36a51,51,0,0,1,51,51v86.72"/>
<ellipse cx="423.3" cy="342.48" rx="84.7"/>
<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>
</div>
</sm-panel>
<sm-panel></sm-panel>
</sm-tab-panels>
<div id="all_contacts">
<header class="grid">
<header class="grid header">
<div class="flex align-center">
<svg xmlns="http://www.w3.org/2000/svg" class="icon back" onclick="showContacts(false)" viewBox="0 0 64 64">
<title>back-arrow</title>
@ -395,8 +410,16 @@
</section>
<section class="page grid hide-completely" id="mail_page">
<div id="mails" class="grid">
<header class="flex align-center">
<sm-tab-header variant="tab" target="all_mail_container">
<header class="grid header">
<div class="flex align-center">
<svg class="icon" onclick="toggleDrawer()" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<line y1="10.66" x2="64" y2="10.66"/>
<line y1="32" x2="64" y2="32"/>
<line y1="53.34" x2="64" y2="53.34"/>
</svg>
<h4>Mail</h4>
</div>
<sm-tab-header target="all_mail_container">
<sm-tab>Inbox</sm-tab>
<sm-tab>Sent</sm-tab>
</sm-tab-header>
@ -433,6 +456,16 @@
</section>
<section id="settings_page" class="page hide-completely">
<aside id="settings_sidebar">
<header class="grid header">
<div class="flex align-center">
<svg class="icon" onclick="toggleDrawer()" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<line y1="10.66" x2="64" y2="10.66"/>
<line y1="32" x2="64" y2="32"/>
<line y1="53.34" x2="64" y2="53.34"/>
</svg>
<h4>Settings</h4>
</div>
</header>
<div class="sidebar-item interact active" data-target="profile_panel">Account</div>
<div class="sidebar-item interact" data-target="personalise_panel">personalise</div>
<div class="sidebar-item interact" data-target="backup_panel">backup & restore</div>
@ -1324,9 +1357,8 @@
}
})
let prevScroll
getRef('chat_container').addEventListener('scroll', function() {
if((this.scrollHeight > this.clientHeight) && (prevScroll - this.scrollTop >= 100)){
if((this.scrollHeight > this.clientHeight) && (this.scrollHeight - this.clientHeight - this.scrollTop >= 100)){
getRef('scroll_to_bottom').classList.add('no-transformations')
}
else{
@ -1381,7 +1413,9 @@
activePage.button.classList.remove('active')
}
activePage.button = targetButton
activePage.page = targetPage;
activePage.page = targetPage;
if(getRef('main_navbar').classList.contains('no-transformations'))
getRef('main_navbar').classList.remove('no-transformations')
}
if(e.target.closest('#send_mail_to') || e.target.closest('#mail_contact_list')){
getRef('mail_contact_list').classList.remove('hide-completely')
@ -1820,13 +1854,13 @@
let messages
if(reRender){
activeChat['allMessages'] = Object.values(data)
startIndex = (activeChat['allMessages'].length - 10) > 0 ? activeChat['allMessages'].length - 10 : 0
startIndex = (activeChat['allMessages'].length - 20) > 0 ? activeChat['allMessages'].length - 20 : 0
endIndex = activeChat['allMessages'].length
messages = activeChat['allMessages']
}
else if(lazyLoad){
messages = activeChat['allMessages']
startIndex = startIndex > 10 ? startIndex -= 10 : 0
startIndex = startIndex > 20 ? startIndex -= 20 : 0
markUnread = false
}
else{
@ -1872,7 +1906,6 @@
if(reRender || lazyLoad){
currentDate = null
getRef('chat_container').prepend(frag)
prevScroll = getRef('chat_container').scrollTop
}
if(reRender){
scrollToBottom()
@ -2111,6 +2144,10 @@
}
}
function toggleDrawer(){
getRef('main_navbar').classList.toggle('no-transformations')
}
</script>
<script id="init_lib" version="1.0.1">

4
scripts/components.js
View File

@ -1887,6 +1887,7 @@ smPopup.innerHTML = `
display: -webkit-box;
display: flex;
width: 100%;
touch-action: none;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
@ -2051,7 +2052,6 @@ customElements.define('sm-popup', class extends HTMLElement {
}
handleTouchMove = (e) => {
e.preventDefault()
if (this.touchStartY < e.changedTouches[0].clientY) {
this.offset = e.changedTouches[0].clientY - this.touchStartY;
this.touchEndAnimataion = window.requestAnimationFrame(() => this.movePopup())
@ -2509,6 +2509,7 @@ smNotifications.innerHTML = `
-webkit-hyphens: auto;
hyphens: auto;
max-width: 100%;
touch-action: none;
}
h4:first-letter,
p:first-letter{
@ -2612,7 +2613,6 @@ customElements.define('sm-notifications', class extends HTMLElement {
}
handleTouchMove = (e) => {
e.preventDefault()
if (this.touchStartX < e.changedTouches[0].clientX) {
this.offset = e.changedTouches[0].clientX - this.touchStartX;
this.touchEndAnimataion = requestAnimationFrame(this.movePopup)