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

v0.27.76

Browse Source 
Feat (user): add feature to allow users to set custom background images

Fix (user): issue with toggle switch shrinking too much
This commit is contained in:
sairaj mote 2021-02-08 20:25:39 +05:30
parent 4cbe1d4f41
commit 3b36655cca
5 changed files with 462 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

153
css/main.css
View File

@ -236,6 +236,9 @@ span.ripple {
-webkit-tap-highlight-color: transparent;
}
sm-popup sm-input::part(input) {
border-radius: 0.5rem;
}
sm-popup sm-input + sm-input {
margin-top: 1rem;
}
@ -568,7 +571,7 @@ sm-button.danger {
}
.filled {
fill: white;
fill: rgba(var(--text-color), 0.7);
stroke: none !important;
}
@ -583,7 +586,7 @@ sm-button.danger {
position: relative;
display: grid;
gap: 0 1rem;
padding: 1rem 1.5rem;
padding: 0.8rem 1.5rem;
align-items: center;
flex-shrink: 0;
user-select: none;
@ -790,6 +793,7 @@ sm-button.danger {
width: 1rem;
background: var(--accent-color);
border-radius: 100%;
border: solid rgba(var(--foreground-color), 1) 1px;
transform: scale(0);
transition: transform 0.3s;
}
@ -802,6 +806,10 @@ sm-button.danger {
.contact.unread .time {
color: var(--accent-color);
}
.mail-card.unread h4,
.contact.unread h4 {
color: rgba(var(--text-color), 1);
}
.mail-card.unread h4, .mail-card.unread h5, .mail-card.unread p,
.contact.unread h4,
.contact.unread h5,
@ -921,6 +929,7 @@ sm-button.danger {
#main_navbar {
position: fixed;
flex-direction: column;
height: 100%;
bottom: 0;
top: 0;
padding: 0;
@ -1256,7 +1265,7 @@ sm-button.danger {
.message {
position: relative;
display: flex;
flex-direction: column;
flex-wrap: wrap;
width: auto;
font-size: 0.92rem;
max-width: max-content;
@ -1300,6 +1309,7 @@ sm-button.danger {
padding-left: 1rem;
align-self: flex-end;
margin-top: 0.2rem;
margin-left: auto;
}
.sent {
@ -1353,6 +1363,7 @@ sm-button.danger {
}
.distinct-sender {
display: grid;
border-radius: 0 0.8rem 0.8rem 0.8rem !important;
margin-top: 0.8rem !important;
}
@ -1386,7 +1397,7 @@ sm-button.danger {
#chat_header {
padding: 0 1rem;
min-height: 4rem;
grid-template-columns: 1fr;
grid-template-columns: 1fr auto;
}
#chat_header .flex {
height: 100%;
@ -1443,7 +1454,16 @@ sm-button.danger {
stroke-width: 8;
}
#chat_footer #emoji_toggle {
#chat_footer .flex {
align-items: flex-end;
padding: 1rem 1rem 1rem 0.4rem;
}
#chat_footer sm-textarea::part(textarea) {
padding-right: 3rem;
border-radius: 0.5rem;
}
#emoji_toggle {
align-self: center;
padding: 0.6rem;
margin-right: 0.5rem;
@ -1452,20 +1472,12 @@ sm-button.danger {
border-radius: 2rem;
cursor: pointer;
}
#chat_footer #emoji_toggle path {
#emoji_toggle path {
fill: rgba(var(--text-color), 0.5);
}
#chat_footer #emoji_toggle.active path {
#emoji_toggle.active path {
fill: var(--accent-color);
}
#chat_footer .flex {
align-items: flex-end;
padding: 1rem 1rem 1rem 0.4rem;
}
#chat_footer sm-textarea::part(textarea) {
padding-right: 3rem;
border-radius: 0.5rem;
}
#send_message_button {
position: absolute;
@ -1495,6 +1507,9 @@ sm-button.danger {
margin: 0;
}
.big-emoji {
flex-direction: column;
}
.big-emoji .message-body {
font-size: 2.6rem;
}
@ -1516,8 +1531,7 @@ sm-button.danger {
}
#emoji_picker section {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(3.6rem, 1fr));
gap: 0.5rem;
grid-template-columns: repeat(auto-fill, minmax(3rem, 1fr));
padding: 0 1rem;
width: 100%;
}
@ -1610,9 +1624,24 @@ sm-panel {
padding-bottom: 6rem;
}
#chat, #mail {
.has-bg-image .received,
.has-bg-image .group-event-card,
.has-bg-image .date-card {
background: rgba(var(--foreground-color), 0.6);
}
.has-bg-image #emoji_picker,
.has-bg-image #emoji_picker .section-header {
background: rgba(var(--foreground-color), 1);
}
.has-bg-image #emoji_toggle path {
fill: rgba(var(--text-color), 0.8);
}
.has-bg-image sm-textarea::part(textarea) {
background: rgba(var(--foreground-color), 0.6);
}
.has-bg-image #chat_details_panel {
background: rgba(var(--foreground-color), 0.8);
}
#mail {
height: 100vh;
@ -1665,10 +1694,17 @@ sm-panel {
margin-left: 1rem;
}
#settings_page sm-switch {
padding: 1rem 1.5rem;
display: flex;
margin-bottom: 1.5rem;
margin-bottom: 1rem;
width: min(60ch, 100%);
}
#settings_page sm-switch .flex {
margin-right: 1rem;
}
#settings_page sm-switch h4 {
margin-bottom: 0.5rem;
}
#settings_page sm-button {
width: 100%;
}
@ -1679,9 +1715,14 @@ sm-panel {
height: 100%;
}
#settings_page #settings_panel {
padding: 0 1.5rem;
overflow-y: auto;
height: 100%;
}
#settings_page #settings_panel .panel > *:first-of-type {
margin-top: 2rem;
}
#settings_page section {
padding: 1rem 1.5rem;
width: min(60ch, 100%);
display: grid;
gap: 0.3rem;
@ -1691,7 +1732,7 @@ sm-panel {
margin-bottom: 0;
}
#settings_page section:not(:last-of-type) {
margin-bottom: 2rem;
margin-bottom: 1rem;
}
#settings_page #sign_out::part(button) {
color: var(--error-color);
@ -1700,6 +1741,61 @@ sm-panel {
margin: 0.5rem 0 1.5rem 0;
width: min(60ch, 100%);
}
#settings_page #bg_preview_container {
padding: 1rem 0;
gap: 0.5rem;
flex-wrap: wrap;
}
#settings_page .bg-preview {
position: relative;
display: grid;
place-items: center;
height: 8rem;
width: 8rem;
cursor: pointer;
border-radius: 1rem;
overflow: hidden;
background: rgba(var(--text-color), 0.1);
}
#settings_page .bg-preview img {
object-fit: cover;
height: 100%;
width: 100%;
}
#settings_page .bg-preview.selected::after {
content: "";
position: absolute;
height: 100%;
width: 100%;
box-shadow: 0 0 0 0.5rem rgba(var(--text-color), 0.8) inset;
}
#settings_page #selected_bg_preview[src=""] {
display: none;
}
#video_call_page {
position: relative;
display: grid;
}
#video_call_page video {
position: fixed;
object-fit: cover;
object-position: center;
}
#video_call_page #their_video {
height: 100%;
}
#video_call_page #my_video {
width: max(20vh, 12rem);
bottom: 0;
right: 0;
border-radius: 1rem;
}
#video_call_page #call_controls {
padding: 1.5rem;
margin-top: auto;
justify-self: center;
}
@media screen and (max-width: 640px) {
.hide-on-mobile {
@ -1772,7 +1868,7 @@ sm-panel {
}
#chat_header {
grid-template-columns: auto 1fr;
grid-template-columns: auto 1fr auto;
}
#settings_page {
@ -1895,9 +1991,6 @@ sm-panel {
#settings_page sm-button {
width: max-content;
}
#settings_page #settings_panel {
padding: 1.5rem;
}
#settings_page .active {
background: rgba(var(--text-color), 0.1);
}
@ -1911,11 +2004,6 @@ sm-panel {
display: inline-flex;
width: auto;
}
#settings_panel {
overflow-y: auto;
max-height: 100vh;
}
}
@media only screen and (max-width: 1280px) {
.hide-on-medium {
@ -1960,11 +2048,6 @@ sm-panel {
display: inline-flex;
width: auto;
}
#settings_panel {
overflow-y: auto;
max-height: 100vh;
}
}
@media (hover: hover) {
::-webkit-scrollbar {

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

160
css/main.scss
View File

@ -199,6 +199,9 @@ span.ripple{
-webkit-tap-highlight-color: transparent;
}
sm-popup{
sm-input::part(input){
border-radius: 0.5rem;
}
sm-input + sm-input{
margin-top: 1rem;
}
@ -515,7 +518,7 @@ sm-button.danger{
user-select: none;
}
.filled{
fill: white;
fill: rgba(var(--text-color), 0.7);
stroke: none !important;
}
.group-icon{
@ -528,7 +531,7 @@ sm-button.danger{
position: relative;
display: grid;
gap: 0 1rem;
padding: 1rem 1.5rem;
padding: 0.8rem 1.5rem;
align-items: center;
flex-shrink: 0;
user-select: none;
@ -734,6 +737,7 @@ sm-button.danger{
width: 1rem;
background: var(--accent-color);
border-radius: 100%;
border: solid rgba(var(--foreground-color), 1) 1px;
transform: scale(0);
transition: transform 0.3s;
}
@ -745,6 +749,9 @@ sm-button.danger{
.time{
color: var(--accent-color);
}
h4{
color: rgba(var(--text-color), 1);
}
h4, h5 ,p{
font-weight: 700;
}
@ -856,6 +863,7 @@ sm-button.danger{
#main_navbar{
position: fixed;
flex-direction: column;
height: 100%;
bottom: 0;
top: 0;
padding: 0;
@ -1183,7 +1191,7 @@ sm-button.danger{
.message{
position: relative;
display: flex;
flex-direction: column;
flex-wrap: wrap;
width: auto;
font-size: 0.92rem;
max-width: max-content;
@ -1226,6 +1234,7 @@ sm-button.danger{
padding-left: 1rem;
align-self: flex-end;
margin-top: 0.2rem;
margin-left: auto;
}
}
.sent{
@ -1274,6 +1283,7 @@ sm-button.danger{
border-radius: 0.8rem;
}
.distinct-sender{
display: grid;
border-radius: 0 0.8rem 0.8rem 0.8rem !important;
margin-top: 0.8rem !important;
&::after{
@ -1305,7 +1315,7 @@ sm-button.danger{
#chat_header{
padding: 0 1rem;
min-height: 4rem;
grid-template-columns: 1fr;
grid-template-columns: 1fr auto;
.flex{
height: 100%;
}
@ -1361,21 +1371,6 @@ sm-button.danger{
}
}
#chat_footer{
#emoji_toggle{
align-self: center;
padding: 0.6rem;
margin-right: 0.5rem;
width: 2.6rem;
height: 2.6rem;
border-radius: 2rem;
cursor: pointer;
path{
fill: rgba(var(--text-color), 0.5);
}
&.active path{
fill: var(--accent-color);
}
}
.flex{
align-items: flex-end;
padding: 1rem 1rem 1rem 0.4rem;
@ -1385,6 +1380,21 @@ sm-button.danger{
border-radius: 0.5rem;
}
}
#emoji_toggle{
align-self: center;
padding: 0.6rem;
margin-right: 0.5rem;
width: 2.6rem;
height: 2.6rem;
border-radius: 2rem;
cursor: pointer;
path{
fill: rgba(var(--text-color), 0.5);
}
&.active path{
fill: var(--accent-color);
}
}
#send_message_button{
position: absolute;
right: 1.5rem;
@ -1412,6 +1422,7 @@ sm-button.danger{
margin: 0;
}
.big-emoji{
flex-direction: column;
.message-body{
font-size: 2.6rem;
}
@ -1431,8 +1442,7 @@ sm-button.danger{
max-height: 30vh;
section{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(3.6rem, 1fr));
gap: 0.5rem;
grid-template-columns: repeat(auto-fill, minmax(3rem, 1fr));
padding: 0 1rem;
width: 100%;
}
@ -1519,8 +1529,27 @@ sm-panel{
{
padding-bottom: 6rem;
}
#chat, #mail{
background: rgba(var(--foreground-color), 1);
.has-bg-image{
.received,
.group-event-card,
.date-card{
background: rgba(var(--foreground-color), 0.6);
}
#emoji_picker,
#emoji_picker .section-header{
background: rgba(var(--foreground-color), 1);
}
#emoji_toggle{
path{
fill: rgba(var(--text-color), 0.8);
}
}
sm-textarea::part(textarea){
background: rgba(var(--foreground-color), 0.6);
}
#chat_details_panel{
background: rgba(var(--foreground-color), 0.8);
}
}
#mail{
height: 100vh;
@ -1571,9 +1600,16 @@ sm-panel{
margin-left: 1rem;
}
sm-switch{
padding: 1rem 1.5rem;
display: flex;
margin-bottom: 1.5rem;
margin-bottom: 1rem;
width: min(60ch, 100%);
.flex{
margin-right: 1rem;
}
h4{
margin-bottom: 0.5rem;
}
}
sm-button{
width: 100%;
@ -1585,9 +1621,14 @@ sm-panel{
height: 100%;
}
#settings_panel{
padding: 0 1.5rem;
overflow-y: auto;
height: 100%;
.panel > *:first-of-type{
margin-top: 2rem;
}
}
section{
padding: 1rem 1.5rem;
width: min(60ch, 100%);
display: grid;
gap: .3rem;
@ -1596,7 +1637,7 @@ sm-panel{
margin-bottom: 0;
}
&:not(:last-of-type){
margin-bottom: 2rem;
margin-bottom: 1rem;
}
}
#sign_out::part(button){
@ -1606,6 +1647,60 @@ sm-panel{
margin: 0.5rem 0 1.5rem 0;
width: min(60ch, 100%);
}
#bg_preview_container{
padding: 1rem 0;
gap: 0.5rem;
flex-wrap: wrap;
}
.bg-preview{
position: relative;
display: grid;
place-items: center;
height: 8rem;
width: 8rem;
cursor: pointer;
border-radius: 1rem;
overflow: hidden;
background: rgba(var(--text-color), 0.1);
img{
object-fit: cover;
height: 100%;
width: 100%;
}
&.selected::after{
content: '';
position: absolute;
height: 100%;
width: 100%;
box-shadow: 0 0 0 0.5rem rgba(var(--text-color), 0.8) inset;
}
}
#selected_bg_preview[src=""]{
display: none;
}
}
#video_call_page{
position: relative;
display: grid;
video{
position: fixed;
object-fit: cover;
object-position: center;
}
#their_video{
height: 100%;
}
#my_video{
width: max(20vh, 12rem);
bottom: 0;
right: 0;
border-radius: 1rem;
}
#call_controls{
padding: 1.5rem;
margin-top: auto;
justify-self: center;
}
}
@media screen and (max-width: 640px){
.hide-on-mobile{
@ -1673,7 +1768,7 @@ sm-panel{
}
}
#chat_header{
grid-template-columns: auto 1fr;
grid-template-columns: auto 1fr auto;
}
#settings_page{
overflow-x: hidden;
@ -1781,9 +1876,6 @@ sm-panel{
sm-button{
width: max-content;
}
#settings_panel{
padding: 1.5rem;
}
.active{
background: rgba(var(--text-color), 0.1);
}
@ -1796,10 +1888,6 @@ sm-panel{
display: inline-flex;
width: auto;
}
#settings_panel{
overflow-y: auto;
max-height: 100vh;
}
}
@media only screen and (max-width: 1280px){
.hide-on-medium{
@ -1843,10 +1931,6 @@ sm-panel{
display: inline-flex;
width: auto;
}
#settings_panel{
overflow-y: auto;
max-height: 100vh;
}
}
@media (hover: hover){
::-webkit-scrollbar{

243
index.html
View File

@ -305,7 +305,7 @@
</div>
</template>
<div id="navbar_backdrop" class="hide" onclick="toggleDrawer()"></div>
<main id="main" class="grid hide-completely">
<main id="main" class="page grid hide-completely">
<nav id="main_navbar" class="flex">
<div class="logo-section" title="RanchiMall FLO Messenger">
<svg class="main-logo" viewBox="0 0 27.25 32">
@ -369,7 +369,7 @@
<line x1="1" y1="32" x2="64" y2="32"/>
<polyline points="29.64 60.97 0.65 32 29.64 3.03"/>
</svg>
<sm-input id="search_chats" type="search" placeholder="Search">
<sm-input id="search_chats" class="outlined" type="search" placeholder="Search">
<svg slot="icon" class="icon" viewBox="0 0 64 64">
<title>Search</title>
<path d="M25.69,1A24.7,24.7,0,0,1,43.15,43.15,24.7,24.7,0,0,1,8.23,8.22,24.53,24.53,0,0,1,25.69,1m0-1A25.7,25.7,0,1,0,43.85,7.51,25.64,25.64,0,0,0,25.69,0Z"/>
@ -406,7 +406,7 @@
<line x1="1" y1="32" x2="64" y2="32"/>
<polyline points="29.64 60.97 0.65 32 29.64 3.03"/>
</svg>
<sm-input id="search_contacts" type="search" placeholder="Enter name or FLO ID">
<sm-input id="search_contacts" class="outlined" type="search" placeholder="Enter name or FLO ID">
<svg slot="icon" class="icon" viewBox="0 0 64 64">
<title>Search</title>
<path d="M25.69,1A24.7,24.7,0,0,1,43.15,43.15,24.7,24.7,0,0,1,8.23,8.22,24.53,24.53,0,0,1,25.69,1m0-1A25.7,25.7,0,1,0,43.85,7.51,25.64,25.64,0,0,0,25.69,0Z"/>
@ -475,6 +475,7 @@
<div id="receiver_initial" class="initial flex align-center"></div>
<h4 id="receiver_name"></h4>
</div>
<sm-button id="video_call_button" class="hide-completely" onclick="createOffer()">Call</sm-button>
</header>
<section id="chat_middle" class="flex direction-column">
<div id="chat_first_child"></div>
@ -492,7 +493,7 @@
<div id="emoji_picker" class="hide-completely"></div>
<div class="flex">
<svg id="emoji_toggle" onclick="toggleEmoji('toggle')" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M32,0A32,32,0,1,0,64,32,32,32,0,0,0,32,0ZM43.84,17.51a4.92,4.92,0,1,1-4.92,4.92A4.92,4.92,0,0,1,43.84,17.51Zm-23.62-.06a5,5,0,1,1-5,5A5,5,0,0,1,20.22,17.45ZM32,54.42A19.68,19.68,0,0,1,12.31,34.73H51.69A19.68,19.68,0,0,1,32,54.42Z"/></svg>
<sm-textarea id="type_message" placeholder="Type a message" class="rest"></sm-textarea>
<sm-textarea id="type_message" placeholder="Type a message" class="rest outlined"></sm-textarea>
<svg xmlns="http://www.w3.org/2000/svg" id="send_message_button" class="icon" viewBox="0 0 64 64">
<path d="M63.34,31,3.07,4.71A2.19,2.19,0,0,0,.18,7.58L8.94,28.29,42.18,32,8.94,35.71.18,56.42a2.19,2.19,0,0,0,2.89,2.87L63.34,33A1.09,1.09,0,0,0,63.34,31Z"/>
</svg>
@ -663,6 +664,19 @@
<p>Toggle dark mode on/off.<br><strong>*Setting applies to this browser only</strong></p>
</div>
</sm-switch>
<section>
<h4>Set chat and mail background image</h4>
<div id="bg_preview_container" class="flex">
<div id="selected_bg_preview" class="bg-preview selected" onclick="setBgImage()">
<img src="" alt="background perview">
</div>
<div id="default_bg_preview" class="bg-preview selected" onclick="setDefaultBg()">Default</div>
</div>
<label class="select-file">
<sm-button id="select_bg_button">Select background</sm-button>
<input type="file" id="select_bg_image" accept="image/*" />
</label>
</section>
<section>
<h4>Accent color</h4>
<color-grid id="accent_color_selector"></color-grid>
@ -701,8 +715,110 @@
</div>
</section>
</main>
<div id="video_call_page" class="page">
<video id="my_video" autoplay></video>
<video id="their_video" autoplay></video>
<div id="call_controls" class="flex">
<sm-button id="pick_up_call" onclick="createAnswer()">Answer</sm-button>
<sm-button id="end_call" class="danger" onclick="endCall()">End call</sm-button>
</div>
</div>
<script src="scripts/components.js"></script>
<script src="scripts/script.js"></script>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
<script id="WEBRTC">
const myVideo = document.getElementById('my_video')
const theirVideo = document.getElementById('their_video')
let dataChannel
let peerConnection
let localStream
let remoteSdp = ''
const server = { urls: "stun:stun.l.google.com:19302" };
async function initPeerConnection(){
peerConnection = new RTCPeerConnection({ iceServers: [server] });
peerConnection.ontrack = (e) => theirVideo.srcObject = e.streams[0];
peerConnection.ondatachannel = e => initDataChannel(dataChannel = e.channel);
peerConnection.oniceconnectionstatechange = e => console.log(peerConnection.iceConnectionState);
try{
localStream = await navigator.mediaDevices.getUserMedia({video:true, audio:true})
localStream.getTracks().forEach(track => peerConnection.addTrack(track, localStream));
}
catch(err) {
console.log("An error occurred: " + err);
}
}
function initDataChannel() {
dataChannel.onopen = () => console.log("Chat!");
dataChannel.onmessage = e => console.log(e.data);
}
async function createOffer() {
await initPeerConnection()
showPage('video_call_page')
initDataChannel(dataChannel = peerConnection.createDataChannel("chat"));
try{
myVideo.srcObject = localStream
const offer = await peerConnection.createOffer()
peerConnection.setLocalDescription(offer)
}
catch(err){
console.log(err)
}
peerConnection.onicecandidate = e => {
if (e.candidate) return;
// Send invitation
const sdp = peerConnection.localDescription.sdp
messenger.sendMessage(sdp, activeChat.floID).then(data => {
console.log('offer sent')
}).catch(error => notify(error, "error"));
}
}
async function createAnswer(){
await initPeerConnection()
if (peerConnection.signalingState !== "stable") return;
button.disabled = offer.disabled = true;
let desc = new RTCSessionDescription({ type:"offer", sdp: remoteSdp});
try{
await peerConnection.setRemoteDescription(desc)
const answer = await peerConnection.createAnswer()
peerConnection.setLocalDescription(answer)
}
catch(err){
console.log(err)
}
peerConnection.onicecandidate = e => {
if (e.candidate) return;
const sdp = peerConnection.localDescription.sdp
messenger.sendMessage(sdp, activeChat.floID, 'answer').then(data => {
console.log('answer sent')
}).catch(error => notify(error, "error"));
};
}
function startVideoCall(answer){
if (peerConnection.signalingState != "have-local-offer") return;
let desc = new RTCSessionDescription({ type:"answer", sdp: answer});
peerConnection.setRemoteDescription(desc).catch(log);
}
function endCall(){
remoteSdp = ''
peerConnection.close()
}
/*
chat.onkeypress = e => {
if (!enterPressed(e)) return;
dataChannel.send(chat.value);
log(chat.value);
chat.value = "";
}; */
</script>
<script id="standard_UI_functions">
const domRefs = {}
@ -1280,6 +1396,7 @@
/* if(!isPinSet){
showFrame(2)
} */
getRef("greet_tag").textContent = myFloID
getRef('accent_color_selector').colors = selectedColors
@ -1297,6 +1414,8 @@
console.log(`Loading Data! Please Wait...`)
messenger.initUserDB().then(result => {
console.log(result)
//Check for availble bg image
setBgImage()
messenger.loadDataFromIDB().then(data => {
console.log(data)
floGlobals.appendix = data.appendix;
@ -1491,6 +1610,28 @@
}
if(message){
if(updateChatCard){
if(category === 'offer'){
showPage('video_call_page')
remoteSdp = message
}
else if(category === 'answer'){
startVideoCall(message)
return
}
}
else if(category === 'offer'){
let eventCard = document.createElement('p')
eventCard.classList.add('group-event-card')
eventCard.textContent = `You called ${getContactName(floID)}`
return eventCard
}
else if(category === 'answer'){
let eventCard = document.createElement('p')
eventCard.classList.add('group-event-card')
eventCard.textContent = `${getContactName(floID)} called you`
return eventCard
}
cardContainer.id = `${floID}_${timestamp}`
if(unconfirmed)
cardContainer.classList.add('unconfirmed')
@ -1757,32 +1898,28 @@
})
getRef('search_chats').addEventListener('input', function(e) {
if(this.value.trim() !== ''){
const contacts = getRef('chat_container').querySelectorAll('.contact')
contacts.forEach( child => {
if(child.getAttribute('search-tags').toLowerCase().includes(this.value.toLowerCase())){
child.classList.remove('hide-completely')
}
else{
child.classList.add('hide-completely')
}
})
}
const contacts = getRef('chat_container').querySelectorAll('.contact')
contacts.forEach( child => {
if(child.getAttribute('search-tags').toLowerCase().includes(this.value.toLowerCase())){
child.classList.remove('hide-completely')
}
else{
child.classList.add('hide-completely')
}
})
})
getRef('search_contacts').addEventListener('input', function() {
if(this.value.trim() !== ''){
const contacts = {}
for(contact in floGlobals.contacts) {
if(contact.toLowerCase().includes(this.value.toLowerCase()) || floGlobals.contacts[contact].toLowerCase().includes(this.value.toLowerCase())){
contacts[contact] = floGlobals.contacts[contact]
if(isCreatingGroup && !(contact in floGlobals.pubKeys))
delete contacts[contact]
}
const contacts = {}
for(contact in floGlobals.contacts) {
if(contact.toLowerCase().includes(this.value.toLowerCase()) || floGlobals.contacts[contact].toLowerCase().includes(this.value.toLowerCase())){
contacts[contact] = floGlobals.contacts[contact]
if(isCreatingGroup && !(contact in floGlobals.pubKeys))
delete contacts[contact]
}
getRef('contacts_container').innerHTML = ''
renderContactList(contacts)
}
getRef('contacts_container').innerHTML = ''
renderContactList(contacts)
})
document.addEventListener('click', e => {
@ -2604,7 +2741,11 @@
}
}
if(updateChatCard){
const chatCard = getRef('chat_container').querySelector(`.contact[flo-id="${floID || groupID}"]`)
let chatCard = getRef('chat_container').querySelector(`.contact[flo-id="${floID || groupID}"]`)
if(!chatCard){
chatCard = render.contactCard(floID, {type: 'chat', markUnread: true})
getRef('chat_container').prepend(chatCard)
}
let finalMessage
if(floGlobals.contacts[sender])
finalMessage = `${floGlobals.contacts[sender]}: ${message}`
@ -2693,9 +2834,11 @@
getRef("receiver_initial").innerHTML = `
<svg class="icon group-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M13.61,28.09c-1.63,0-4.72-2.35-5.33-3.58a21.65,21.65,0,0,1-1.35-7.32s-.26-6.07,6.68-6.07a6.38,6.38,0,0,1,6.69,6.07A21.65,21.65,0,0,1,19,24.51c-.62,1.23-3.7,3.58-5.34,3.58"/><path d="M50.39,28.09c-1.64,0-4.72-2.35-5.34-3.58a21.9,21.9,0,0,1-1.35-7.32s-.26-6.07,6.69-6.07a6.37,6.37,0,0,1,6.68,6.07,21.65,21.65,0,0,1-1.35,7.32c-.61,1.23-3.7,3.58-5.33,3.58"/><path d="M32,31.74c-2.21,0-6.37-3.17-7.2-4.83A29.3,29.3,0,0,1,23,17s-.35-8.21,9-8.21c8.68,0,9,8.21,9,8.21a29.3,29.3,0,0,1-1.83,9.88c-.82,1.66-5,4.83-7.2,4.83"/><path d="M48.29,38.58c-4.16-1.83-8.57-3.08-10.34-6.4a12,12,0,0,1-6,3.73,12,12,0,0,1-5.95-3.73c-1.77,3.32-6.18,4.57-10.34,6.4-1.7.71-3.11,9.88-1.13,9.88A33.06,33.06,0,0,0,31.23,53h1.54a33.06,33.06,0,0,0,16.65-4.53C51.4,48.46,50,39.29,48.29,38.58Z"/><path d="M14.82,36.57c.76-.33,1.54-.65,2.3-1,2.49-1,4.85-2,6.22-3.44C21.07,31.23,19,30.25,18,28.41a8.83,8.83,0,0,1-4.41,2.76,8.83,8.83,0,0,1-4.4-2.76c-1.31,2.46-4.58,3.38-7.66,4.74-1.26.52-2.3,7.31-.84,7.31a24.55,24.55,0,0,0,10.86,3.31C11.89,40.81,12.86,37.39,14.82,36.57Z"/><path d="M62.45,33.15c-3.08-1.36-6.35-2.28-7.66-4.74a8.83,8.83,0,0,1-4.4,2.76A8.83,8.83,0,0,1,46,28.41c-1,1.84-3,2.82-5.32,3.76,1.37,1.43,3.73,2.41,6.22,3.44.76.31,1.54.63,2.26,1,2,.83,3,4.25,3.29,7.21a24.55,24.55,0,0,0,10.86-3.31C64.75,40.46,63.71,33.67,62.45,33.15Z"/></svg>
`
getRef('video_call_button').classList.add('hide-completely')
}
else{
getRef("receiver_initial").textContent = getContactName(floID).charAt(0);
// getRef('video_call_button').classList.remove('hide-completely')
}
getRef("receiver_initial").setAttribute('style', `color: ${textColor}; background-color: ${backgroundColor};`)
if (floGlobals.pubKeys[floID] || activeChat.isGroup)
@ -3321,6 +3464,49 @@
document.body.style.setProperty('--accent-color', color);
})
document.getElementById('select_bg_image').addEventListener('change', function(e){
console
compactIDB.writeData('userSettings', this.files[0], 'bgImage')
.then(async res => {
setBgImage()
notify('Background applied', 'success')
})
.catch(err => console.error(err))
})
async function setBgImage(){
try{
const image = await compactIDB.readData('userSettings', 'bgImage')
console.log(image)
if(image){
const url = URL.createObjectURL(image)
getRef('chat').style.background = `linear-gradient(rgba(var(--foreground-color), 0.6), rgba(var(--foreground-color), 0.6)), url(${url}) center no-repeat`
getRef('mail').style.background = `linear-gradient(rgba(var(--foreground-color), 0.6), rgba(var(--foreground-color), 0.6)), url(${url}) center no-repeat`
getRef('chat').style.backgroundSize = 'cover'
getRef('mail').style.backgroundSize = 'cover'
getRef('chat').classList.add('has-bg-image')
getRef('mail').classList.add('has-bg-image')
getRef('selected_bg_preview').firstElementChild.src = url
getRef('selected_bg_preview').classList.add('selected')
getRef('default_bg_preview').classList.remove('selected')
getRef('select_bg_button').textContent = 'Change background'
}
}
catch(err){
console.error(err)
}
}
function setDefaultBg(){
getRef('chat').style.background = ``
getRef('mail').style.background = ``
getRef('chat').classList.remove('has-bg-image')
getRef('mail').classList.remove('has-bg-image')
getRef('selected_bg_preview').classList.remove('selected')
getRef('default_bg_preview').classList.add('selected')
notify('Default background applied', 'success')
}
</script>
<script id="init_lib" version="1.0.1">
@ -12789,7 +12975,8 @@ Bitcoin.Util = {
chats: {},
groups: {},
gkeys: {},
appendix: {}
appendix: {},
userSettings: {}
}
compactIDB.initDB(`${floGlobals.application}_${myFloID}`, obj).then(result => {
console.info(result)
@ -12806,7 +12993,7 @@ Bitcoin.Util = {
let data = {
floID: receiver,
time: result[vc].time,
category: "sent",
category,
message: this.util.encrypt(message)
}
floGlobals.chats[receiver] = parseInt(vc)

8
scripts/components.js
View File

@ -994,6 +994,7 @@ smSwitch.innerHTML = `
-ms-flex-align: center;
align-items: center;
width: 2.4rem;
flex-shrink: 0;
margin-left: auto;
padding: 0.2rem;
cursor: pointer;
@ -3804,7 +3805,7 @@ colorGrid.innerHTML =`
position: absolute;
z-index: 1;
border-radius: 0.5rem;
box-shadow: 0 0 0 0.5rem rgba(var(--text-color), 1) inset;
box-shadow: 0 0 0 0.5rem rgba(var(--text-color), 0.8) inset;
display: none;
height: 100%;
width: 100%;
@ -3857,7 +3858,10 @@ class extends HTMLElement {
const label = document.createElement('label')
label.classList.add('color-tile')
label.setAttribute('data-color', color)
label.setAttribute('style', `background-color: ${color}`)
if(color.includes('--'))
label.setAttribute('style', `background-color: var(${color})`)
else
label.setAttribute('style', `background-color: ${color}`)
label.innerHTML = `
<input type="radio" name="${groupName}">
<div class="border"></div>