Added lazy loading for chat messages
-improved emoji rendering with bigger emojis - added more emojis with sections
This commit is contained in:
sairaj mote
parent
dfa59b2587
commit
28156940f0
74
css/main.css
74
css/main.css
@ -548,11 +548,17 @@ sm-button[variant=primary] .icon {
|
||||
position: relative;
|
||||
display: grid;
|
||||
gap: 0 1rem;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
grid-template-areas: "dp . menu" "dp . menu";
|
||||
padding: 0.8rem 1.5rem;
|
||||
align-items: center;
|
||||
}
|
||||
.contact.chat {
|
||||
grid-template-columns: auto 1fr auto;
|
||||
grid-template-areas: "dp . menu" "dp . .";
|
||||
}
|
||||
.contact:not(.chat) {
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-template-areas: "dp .";
|
||||
}
|
||||
.contact:focus {
|
||||
background: rgba(var(--text-color), 0.06);
|
||||
outline: none;
|
||||
@ -566,6 +572,7 @@ sm-button[variant=primary] .icon {
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
.contact .last-message {
|
||||
grid-column: 2/4;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
@ -598,7 +605,7 @@ sm-button[variant=primary] .icon {
|
||||
.contact.unread .initial::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
padding: 0.3rem;
|
||||
padding: 0.4rem;
|
||||
border-radius: 1rem;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@ -973,6 +980,9 @@ sm-button[variant=primary] .icon {
|
||||
margin-top: 0.8rem;
|
||||
}
|
||||
#chat .message .message-body {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
@ -988,6 +998,11 @@ sm-button[variant=primary] .icon {
|
||||
#chat .message .message-body a {
|
||||
color: inherit;
|
||||
}
|
||||
#chat .message .message-body .text-emoji {
|
||||
align-self: center;
|
||||
font-size: 1.4em;
|
||||
letter-spacing: 0ch;
|
||||
}
|
||||
#chat .message .time {
|
||||
white-space: nowrap;
|
||||
font-size: 0.8em;
|
||||
@ -1044,18 +1059,28 @@ sm-button[variant=primary] .icon {
|
||||
}
|
||||
#chat .unconfirmed {
|
||||
opacity: 0.7;
|
||||
transform-origin: left;
|
||||
transform-origin: right;
|
||||
animation: slide-up 0.3s forwards;
|
||||
}
|
||||
|
||||
@keyframes slide-up {
|
||||
from {
|
||||
transform: translate(-2rem, 2rem) scale(0.8);
|
||||
transform: translateY(-2rem);
|
||||
}
|
||||
to {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
.big-emoji::after {
|
||||
display: none;
|
||||
}
|
||||
.big-emoji .message-body {
|
||||
background: none !important;
|
||||
box-shadow: none !important;
|
||||
padding: 0 !important;
|
||||
font-size: 2.6rem;
|
||||
}
|
||||
|
||||
#chat_container {
|
||||
flex: 1;
|
||||
padding: 0 1rem;
|
||||
@ -1063,15 +1088,26 @@ sm-button[variant=primary] .icon {
|
||||
|
||||
#emoji_picker {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
background: rgba(var(--text-color), 0.06);
|
||||
border-radius: 1rem;
|
||||
margin: 0 1rem;
|
||||
grid-template-columns: repeat(auto-fill, minmax(3rem, 1fr));
|
||||
box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.3);
|
||||
padding: 1rem;
|
||||
overflow-y: auto;
|
||||
max-height: 30vh;
|
||||
}
|
||||
#emoji_picker section {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
max-height: min(16rem, 30vh);
|
||||
padding: 1rem;
|
||||
}
|
||||
#emoji_picker .section-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: linear-gradient(rgba(var(--text-color), 0.06), rgba(var(--text-color), 0.06)), rgba(var(--foreground-color), 1);
|
||||
padding: 1rem 0;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.emoji {
|
||||
@ -1081,16 +1117,7 @@ sm-button[variant=primary] .icon {
|
||||
border-radius: 0.6rem;
|
||||
user-select: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.big-emoji::after {
|
||||
display: none;
|
||||
}
|
||||
.big-emoji .message-body {
|
||||
background: none !important;
|
||||
box-shadow: none !important;
|
||||
padding: 0 !important;
|
||||
font-size: 2.6rem;
|
||||
min-width: 3rem;
|
||||
}
|
||||
|
||||
#new_conversation, #no_mails {
|
||||
@ -1269,6 +1296,11 @@ sm-tab-panels {
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
#dm_container,
|
||||
#contact_container {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
#chat header {
|
||||
padding: 1rem;
|
||||
}
|
||||
@ -1340,7 +1372,7 @@ sm-tab-panels {
|
||||
#main_navbar {
|
||||
position: relative;
|
||||
width: auto;
|
||||
background: rgba(var(--text-color), 0.06);
|
||||
background: rgba(var(--text-color), 0.05);
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
#main_navbar .navbar-item {
|
||||
@ -1369,6 +1401,10 @@ sm-tab-panels {
|
||||
grid-template-columns: auto 1fr;
|
||||
}
|
||||
|
||||
#emoji_picker {
|
||||
max-height: 18rem;
|
||||
}
|
||||
|
||||
#chat .message .message-body {
|
||||
max-width: 65ch;
|
||||
}
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -498,11 +498,17 @@ sm-button[variant="primary"]{
|
||||
position: relative;
|
||||
display: grid;
|
||||
gap: 0 1rem;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
grid-template-areas: 'dp . menu'
|
||||
'dp . menu';
|
||||
padding: 0.8rem 1.5rem;
|
||||
align-items: center;
|
||||
&.chat{
|
||||
grid-template-columns: auto 1fr auto;
|
||||
grid-template-areas: 'dp . menu'
|
||||
'dp . .';
|
||||
}
|
||||
&:not(.chat){
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-template-areas: 'dp .';
|
||||
}
|
||||
&:focus{
|
||||
background: rgba(var(--text-color), 0.06);
|
||||
outline: none;
|
||||
@ -516,6 +522,7 @@ sm-button[variant="primary"]{
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
.last-message{
|
||||
grid-column: 2/4;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
@ -546,7 +553,7 @@ sm-button[variant="primary"]{
|
||||
.contact.unread .initial::before{
|
||||
content: '';
|
||||
position: absolute;
|
||||
padding: 0.3rem;
|
||||
padding: 0.4rem;
|
||||
border-radius: 1rem;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@ -911,6 +918,9 @@ sm-button[variant="primary"]{
|
||||
margin-bottom: 0.2rem;
|
||||
margin-top: 0.8rem;
|
||||
.message-body{
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
@ -925,6 +935,11 @@ sm-button[variant="primary"]{
|
||||
a{
|
||||
color: inherit;
|
||||
}
|
||||
.text-emoji{
|
||||
align-self: center;
|
||||
font-size: 1.4em;
|
||||
letter-spacing: 0ch;
|
||||
}
|
||||
}
|
||||
.time{
|
||||
white-space: nowrap;
|
||||
@ -985,42 +1000,18 @@ sm-button[variant="primary"]{
|
||||
}
|
||||
.unconfirmed{
|
||||
opacity: 0.7;
|
||||
transform-origin: left;
|
||||
transform-origin: right;
|
||||
animation: slide-up 0.3s forwards;
|
||||
}
|
||||
}
|
||||
@keyframes slide-up{
|
||||
from{
|
||||
transform: translate(-2rem, 2rem) scale(0.8);
|
||||
transform: translateY(-2rem);
|
||||
}
|
||||
to{
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
#chat_container{
|
||||
flex: 1;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
#emoji_picker{
|
||||
display: grid;
|
||||
background: rgba(var(--text-color), 0.06);
|
||||
border-radius: 1rem;
|
||||
margin: 0 1rem;
|
||||
grid-template-columns: repeat(auto-fill, minmax(3rem, 1fr));
|
||||
box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.3);
|
||||
padding: 1rem;
|
||||
overflow-y: auto;
|
||||
flex-wrap: wrap;
|
||||
max-height: min(16rem, 30vh);
|
||||
}
|
||||
.emoji{
|
||||
font-size: 1.6rem;
|
||||
cursor: pointer;
|
||||
padding: 0.4rem;
|
||||
border-radius: 0.6rem;
|
||||
user-select: none;
|
||||
text-align: center;
|
||||
}
|
||||
.big-emoji{
|
||||
&::after{
|
||||
display: none;
|
||||
@ -1032,6 +1023,42 @@ sm-button[variant="primary"]{
|
||||
font-size: 2.6rem;
|
||||
}
|
||||
}
|
||||
#chat_container{
|
||||
flex: 1;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
#emoji_picker{
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
background: rgba(var(--text-color), 0.06);
|
||||
border-radius: 1rem;
|
||||
margin: 0 1rem;
|
||||
box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.3);
|
||||
overflow-y: auto;
|
||||
max-height: 30vh;
|
||||
section{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 1rem;
|
||||
}
|
||||
.section-header{
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: linear-gradient(rgba(var(--text-color), 0.06), rgba(var(--text-color), 0.06)), rgba(var(--foreground-color), 1);
|
||||
padding: 1rem 0;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
.emoji{
|
||||
font-size: 1.6rem;
|
||||
cursor: pointer;
|
||||
padding: 0.4rem;
|
||||
border-radius: 0.6rem;
|
||||
user-select: none;
|
||||
text-align: center;
|
||||
min-width: 3rem;
|
||||
}
|
||||
#new_conversation, #no_mails{
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
@ -1194,6 +1221,10 @@ sm-tab-panels{
|
||||
transition: transform 0.3s;
|
||||
z-index: 4;
|
||||
}
|
||||
#dm_container,
|
||||
#contact_container{
|
||||
gap: 0.5rem;
|
||||
}
|
||||
#chat{
|
||||
header{
|
||||
padding: 1rem;
|
||||
@ -1264,7 +1295,7 @@ sm-tab-panels{
|
||||
#main_navbar{
|
||||
position: relative;
|
||||
width: auto;
|
||||
background: rgba(var(--text-color), 0.06);
|
||||
background: rgba(var(--text-color), 0.05);
|
||||
padding-bottom: 0.5rem;
|
||||
.navbar-item{
|
||||
margin: 0 0.5rem;
|
||||
@ -1289,6 +1320,9 @@ sm-tab-panels{
|
||||
height: 100vh;
|
||||
grid-template-columns: auto 1fr;
|
||||
}
|
||||
#emoji_picker{
|
||||
max-height: 18rem;
|
||||
}
|
||||
#chat{
|
||||
.message{
|
||||
.message-body{
|
||||
|
||||
229
index.html
229
index.html
File diff suppressed because one or more lines are too long
@ -662,6 +662,7 @@ customElements.define('sm-textarea',
|
||||
}
|
||||
set value(val) {
|
||||
this.shadowRoot.querySelector('textarea').value = val;
|
||||
this.textareaBox.dataset.value = val
|
||||
this.checkInput()
|
||||
this.fireEvent()
|
||||
}
|
||||
@ -2127,18 +2128,18 @@ customElements.define('sm-popup', class extends HTMLElement {
|
||||
|
||||
this.popupHeader.addEventListener('touchstart', (e) => {
|
||||
this.handleTouchStart(e)
|
||||
})
|
||||
}, {passive: true})
|
||||
this.popupHeader.addEventListener('touchmove', (e) => {
|
||||
this.handleTouchMove(e)
|
||||
})
|
||||
}, {passive: true})
|
||||
this.popupHeader.addEventListener('touchend', (e) => {
|
||||
this.handleTouchEnd(e)
|
||||
})
|
||||
}, {passive: true})
|
||||
}
|
||||
disconnectedCallback() {
|
||||
this.popupHeader.removeEventListener('touchstart', this.handleTouchStart)
|
||||
this.popupHeader.removeEventListener('touchmove', this.handleTouchMove)
|
||||
this.popupHeader.removeEventListener('touchend', this.handleTouchEnd)
|
||||
this.popupHeader.removeEventListener('touchstart', this.handleTouchStart, {passive: true})
|
||||
this.popupHeader.removeEventListener('touchmove', this.handleTouchMove, {passive: true})
|
||||
this.popupHeader.removeEventListener('touchend', this.handleTouchEnd, {passive: true})
|
||||
}
|
||||
})
|
||||
|
||||
@ -2694,9 +2695,9 @@ customElements.define('sm-notifications', class extends HTMLElement {
|
||||
} else {
|
||||
notification.setAttribute('style', `transform: translateY(0); opacity: 1`)
|
||||
}
|
||||
notification.addEventListener('touchstart', this.handleTouchStart)
|
||||
notification.addEventListener('touchmove', this.handleTouchMove)
|
||||
notification.addEventListener('touchend', this.handleTouchEnd)
|
||||
notification.addEventListener('touchstart', this.handleTouchStart, {passive: true})
|
||||
notification.addEventListener('touchmove', this.handleTouchMove, {passive: true})
|
||||
notification.addEventListener('touchend', this.handleTouchEnd, {passive: true})
|
||||
}
|
||||
|
||||
removeNotification = (notification, toLeft) => {
|
||||
@ -2829,6 +2830,7 @@ smMenu.innerHTML = `
|
||||
.hide{
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
.select{
|
||||
position: relative;
|
||||
@ -2941,6 +2943,9 @@ customElements.define('sm-menu', class extends HTMLElement {
|
||||
this.optionList.classList.add('no-transformations')
|
||||
this.open = true
|
||||
this.icon.classList.add('focused')
|
||||
this.availableOptions.forEach(option => {
|
||||
option.setAttribute('tabindex', '0')
|
||||
})
|
||||
}
|
||||
}
|
||||
collapse() {
|
||||
@ -2949,6 +2954,9 @@ customElements.define('sm-menu', class extends HTMLElement {
|
||||
this.icon.classList.remove('focused')
|
||||
this.optionList.classList.add('hide')
|
||||
this.optionList.classList.remove('no-transformations')
|
||||
this.availableOptions.forEach(option => {
|
||||
option.removeAttribute('tabindex')
|
||||
})
|
||||
}
|
||||
}
|
||||
connectedCallback() {
|
||||
@ -3067,7 +3075,6 @@ customElements.define('sm-menu-option', class extends HTMLElement {
|
||||
this.click()
|
||||
}
|
||||
})
|
||||
this.setAttribute('tabindex', '0')
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user