UI changes
This commit is contained in:
sairaj mote
parent
5daf34ceb3
commit
e54513ee8c
3589
assets/components.js
3589
assets/components.js
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
@ -1 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="1920" height="1080" viewBox="0 0 1920 1080"><defs><style>.a{fill:#a579cc;opacity:0.2;}</style></defs><title>bg</title><path class="a" d="M623,1159c-87.68-165.38-129.16-438.77-9-634,37.72-61.28,92.93-117.41,455-293C1411,66.13,1582-16.8,1697-36c82.8-13.83,576.06-96.19,867,204,292.32,301.61,256.84,861.93,14,1172C2127.64,1915.05,909.4,1699.22,623,1159Z"/><path class="a" d="M810,1133c-49.8-128.47-45-298.39,23-435,76.63-154,210-218.3,429-320,274.53-127.47,576.8-267.83,916-172,85.07,24,231.42,67.54,340,204,122.67,154.17,121.49,331.91,121,406-1.57,237.61-115.25,473.71-277,614C1914.69,1818,981.6,1575.63,810,1133Z"/><path class="a" d="M1181,1142c-62.16-209.22,55-403,70-427,156.87-251,473.31-278.8,578-288,74.9-6.58,251.61-19.83,441,75,89.21,44.67,290.7,145.55,328,349,31.94,174.23-75.8,318.54-109,363-83.65,112-184,158.9-317,219-227.94,103-404.87,183-602,115-188.59-65-300.7-232.66-334-288C1217.51,1229.26,1196.3,1193.48,1181,1142Z"/><path class="a" d="M1455,1182c-53.36-145,46.26-302.52,130-380,107.31-99.3,235.1-110.22,291-115,82.39-7,247.07-21.12,360,100,83.24,89.28,112.47,224.24,77,337-76.11,242-411.58,259.25-432,260C1861.81,1384.71,1532.47,1392.52,1455,1182Z"/><path class="a" d="M1729,1156c-47.23-69.45-12.64-170.65,43-225,67.27-65.71,193.24-90.22,259-23,66.79,68.27,41.95,201-37,265C1916,1236.27,1782.44,1234.58,1729,1156Z"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.4 KiB |
@ -1 +0,0 @@
|
|||||||
.EmojiPanel__header,.EmojiPanel__footer{padding:10px;background:#FCFCFC}.EmojiPanel__header{border-bottom:1px solid #F9F9F9;border-radius:3px 3px 0 0}.EmojiPanel__header input{width:100%;padding:5px 14px;border:1px solid #EEE;border-radius:30px;outline:none;font-size:14px;font-weight:inherit}.EmojiPanel__header input:focus{border-color:#d5d5d5}.EmojiPanel__categories{display:flex;flex-wrap:wrap;margin:0 0 10px}.EmojiPanel__categories button{flex:1;min-width:30px;max-width:30px}@media (min-width: 290px){.EmojiPanel__categories button{min-width:30px;max-width:inherit}}.EmojiPanel__footer{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #F9F9F9;border-radius:0 0 3px 3px}.EmojiPanel__brand{margin:0;font-size:14px;text-decoration:none;color:#9d9d9d;transition:color 0.2s}.EmojiPanel__brand:hover,.EmojiPanel__brand:focus{color:#777}.EmojiPanel__btnModifierToggle{font-size:24px}.EmojiPanel__btnModifierToggle.active{display:none}.EmojiPanel__modifierDropdown{display:none;height:30px}.EmojiPanel__modifierDropdown.active{display:block}.EmojiPanel__results{overflow-y:auto;height:300px;padding:0 10px 10px}.EmojiPanel__results .emoji{background:#FFF}.EmojiPanel__noResults{display:none;width:100%;padding:100px 0;text-align:center;color:#777}.EmojiPanel__category{margin:15px 0 5px;padding:0 0 5px;border-bottom:1px solid #EEE;color:#777}.EmojiPanel__tooltip{display:none}.EmojiPanel{width:100%;border-radius:3px;background:#fff;text-align:left}@media (min-width: 290px){.EmojiPanel{width:290px}}.EmojiPanel--trigger{visibility:hidden;pointer-events:none}.EmojiPanel--open{visibility:visible;pointer-events:inherit}.EmojiPanel button{padding:0;border:none;outline:none;background:none;cursor:pointer}.EmojiPanel .emoji{width:30px;height:30px;border:5px solid transparent;border-radius:3px;font-size:20px;line-height:1.1;cursor:pointer;transition:all 0.2s}.EmojiPanel .emoji:hover,.EmojiPanel .emoji:focus{background:#F1F1F1;border-color:#F1F1F1}.EmojiPanel .temp{flex:initial;width:20px;min-width:initial;height:20px;margin:5px;border-radius:3px;background:#EEE}
|
|
||||||
@ -9,7 +9,7 @@
|
|||||||
|
|
||||||
:root {
|
:root {
|
||||||
scroll-behavior: smooth;
|
scroll-behavior: smooth;
|
||||||
font-size: clamp(16px, 1.2vmax, 36px);
|
font-size: clamp(16px, 1vmax, 18px);
|
||||||
}
|
}
|
||||||
|
|
||||||
html, body {
|
html, body {
|
||||||
@ -338,9 +338,8 @@ sm-button[variant=primary] .icon {
|
|||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
#sign_in .title-font {
|
#sign_in .title-font {
|
||||||
font-kerning: normal;
|
|
||||||
line-height: 1.2;
|
|
||||||
text-transform: capitalize;
|
text-transform: capitalize;
|
||||||
|
line-height: 1.2;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-size: 2.5rem;
|
font-size: 2.5rem;
|
||||||
}
|
}
|
||||||
@ -833,6 +832,7 @@ sm-button[variant=primary] .icon {
|
|||||||
#chat footer sm-textarea::part(textarea) {
|
#chat footer sm-textarea::part(textarea) {
|
||||||
background: rgba(var(--text-color), 0.1);
|
background: rgba(var(--text-color), 0.1);
|
||||||
padding-right: 3rem;
|
padding-right: 3rem;
|
||||||
|
border-radius: 2rem;
|
||||||
}
|
}
|
||||||
#chat #send_message_button {
|
#chat #send_message_button {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -1098,7 +1098,7 @@ sm-tab-header {
|
|||||||
|
|
||||||
.logo-section {
|
.logo-section {
|
||||||
padding: 2rem 3rem;
|
padding: 2rem 3rem;
|
||||||
margin: 0;
|
margin: 0.5rem 0 1rem 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#sign_in {
|
#sign_in {
|
||||||
|
|||||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -8,7 +8,7 @@
|
|||||||
}
|
}
|
||||||
:root{
|
:root{
|
||||||
scroll-behavior: smooth;
|
scroll-behavior: smooth;
|
||||||
font-size: clamp(16px, 1.2vmax, 36px);
|
font-size: clamp(16px, 1vmax, 18px);
|
||||||
}
|
}
|
||||||
html, body{
|
html, body{
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@ -296,9 +296,8 @@ sm-button[variant="primary"]{
|
|||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
.title-font{
|
.title-font{
|
||||||
font-kerning: normal;
|
|
||||||
line-height: 1.2;
|
|
||||||
text-transform: capitalize;
|
text-transform: capitalize;
|
||||||
|
line-height: 1.2;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-size: 2.5rem;
|
font-size: 2.5rem;
|
||||||
}
|
}
|
||||||
@ -774,6 +773,7 @@ sm-button[variant="primary"]{
|
|||||||
sm-textarea::part(textarea){
|
sm-textarea::part(textarea){
|
||||||
background: rgba(var(--text-color), 0.1);
|
background: rgba(var(--text-color), 0.1);
|
||||||
padding-right: 3rem;
|
padding-right: 3rem;
|
||||||
|
border-radius: 2rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
#send_message_button{
|
#send_message_button{
|
||||||
@ -1029,7 +1029,7 @@ sm-tab-header{
|
|||||||
}
|
}
|
||||||
.logo-section{
|
.logo-section{
|
||||||
padding: 2rem 3rem;
|
padding: 2rem 3rem;
|
||||||
margin: 0;
|
margin: .5rem 0 1rem 0;
|
||||||
}
|
}
|
||||||
#sign_in{
|
#sign_in{
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|||||||
229
index.html
229
index.html
@ -5,6 +5,7 @@
|
|||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>FLO Messenger</title>
|
<title>FLO Messenger</title>
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
|
||||||
<link rel="stylesheet" href="css/main.min.css">
|
<link rel="stylesheet" href="css/main.min.css">
|
||||||
</head>
|
</head>
|
||||||
@ -888,125 +889,125 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<script id="floGlobals">
|
<script id="floGlobals">
|
||||||
/* Constants for FLO blockchain operations !!Make sure to add this at begining!! */
|
/* Constants for FLO blockchain operations !!Make sure to add this at begining!! */
|
||||||
const floGlobals = {
|
const floGlobals = {
|
||||||
|
|
||||||
//Required for all
|
|
||||||
blockchain: "FLO",
|
|
||||||
|
|
||||||
//Required for blockchain API operators
|
|
||||||
apiURL: {
|
|
||||||
FLO: ['https://explorer.mediciland.com/', 'https://livenet.flocha.in/',
|
|
||||||
'https://flosight.duckdns.org/', 'http://livenet-explorer.floexperiments.com/'
|
|
||||||
],
|
|
||||||
FLO_TEST: ['https://testnet-flosight.duckdns.org/', 'https://testnet.flocha.in/']
|
|
||||||
},
|
|
||||||
|
|
||||||
//Required for Supernode operations
|
|
||||||
SNStorageID: "FNaN9McoBAEFUjkRmNQRYLmBF8SpS7Tgfk",
|
|
||||||
supernodes: {}, //each supnernode must be stored as floID : {uri:<uri>,pubKey:<publicKey>}
|
|
||||||
|
|
||||||
//for app
|
|
||||||
application: "messenger",
|
|
||||||
adminID: "FMRsefPydWznGWneLqi4ABeQAJeFvtS3aQ",
|
|
||||||
pubKeys: {},
|
|
||||||
contacts: {},
|
|
||||||
appendix: {}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<script id="onLoadStartUp">
|
|
||||||
function onLoadStartUp() {
|
|
||||||
privKeyNotSecured = true;
|
|
||||||
|
|
||||||
//display loading screen
|
//Required for all
|
||||||
getRef('loading_page').classList.remove("hide-completely")
|
blockchain: "FLO",
|
||||||
//clear Rendered Elements
|
|
||||||
let elementsToReset = ['inbox_mail_container', 'sent_mail_container', 'contacts_container', 'chat_container',
|
|
||||||
'receiver_floID', 'receiver_name', 'mail_contact_list'
|
|
||||||
]
|
|
||||||
//, "backup_info"
|
|
||||||
elementsToReset.forEach(e => clearElement(document.getElementById(e)))
|
|
||||||
|
|
||||||
floDapps.setCustomPrivKeyInput((type) => {
|
//Required for blockchain API operators
|
||||||
return new Promise((resolve, reject) => {
|
apiURL: {
|
||||||
mainPage.classList.add('hide-completely')
|
FLO: ['https://explorer.mediciland.com/', 'https://livenet.flocha.in/',
|
||||||
getRef('loading_page').classList.add('hide-completely')
|
'https://flosight.duckdns.org/', 'http://livenet-explorer.floexperiments.com/'
|
||||||
getRef('sign_in_page').classList.remove('hide-completely')
|
],
|
||||||
getRef('sign_in_button').addEventListener('clicked', () => {
|
FLO_TEST: ['https://testnet-flosight.duckdns.org/', 'https://testnet.flocha.in/']
|
||||||
let key = getRef('private_key_input_field').value;
|
},
|
||||||
hidePopup()
|
|
||||||
console.log(key)
|
//Required for Supernode operations
|
||||||
getRef('sign_in_page').classList.add('hide-completely')
|
SNStorageID: "FNaN9McoBAEFUjkRmNQRYLmBF8SpS7Tgfk",
|
||||||
getRef('loading_page').classList.remove('hide-completely')
|
supernodes: {}, //each supnernode must be stored as floID : {uri:<uri>,pubKey:<publicKey>}
|
||||||
resolve(key)
|
|
||||||
})
|
//for app
|
||||||
getRef('guest_login_button').onclick = () => {
|
application: "messenger",
|
||||||
getRef('sign_in_page').classList.add('hide-completely')
|
adminID: "FMRsefPydWznGWneLqi4ABeQAJeFvtS3aQ",
|
||||||
getRef('loading_page').classList.remove('hide-completely')
|
pubKeys: {},
|
||||||
reject(null)
|
contacts: {},
|
||||||
}
|
appendix: {}
|
||||||
if (type === "PRIVATE_KEY") {
|
}
|
||||||
getRef('private_key_input_field').setAttribute("placeholder", "Private Key")
|
</script>
|
||||||
document.getElementById("type_of_key").textContent = 'FLO private key'
|
<script id="onLoadStartUp">
|
||||||
document.getElementById("remove_account").classList.add("hide-completely");
|
function onLoadStartUp() {
|
||||||
} else if (type === "PIN/Password") {
|
privKeyNotSecured = true;
|
||||||
getRef('private_key_input_field').setAttribute("placeholder", "PIN/Password")
|
|
||||||
showPopup('sign_in_popup')
|
//display loading screen
|
||||||
document.getElementById("remove_account").classList.remove("hide-completely");
|
getRef('loading_page').classList.remove("hide-completely")
|
||||||
document.getElementById("type_of_key").textContent = 'PIN/Password'
|
//clear Rendered Elements
|
||||||
privKeyNotSecured = false;
|
let elementsToReset = ['inbox_mail_container', 'sent_mail_container', 'contacts_container', 'chat_container',
|
||||||
|
'receiver_floID', 'receiver_name', 'mail_contact_list'
|
||||||
|
]
|
||||||
|
//, "backup_info"
|
||||||
|
elementsToReset.forEach(e => clearElement(document.getElementById(e)))
|
||||||
|
|
||||||
|
floDapps.setCustomPrivKeyInput((type) => {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
mainPage.classList.add('hide-completely')
|
||||||
|
getRef('loading_page').classList.add('hide-completely')
|
||||||
|
getRef('sign_in_page').classList.remove('hide-completely')
|
||||||
|
getRef('sign_in_button').addEventListener('clicked', () => {
|
||||||
|
let key = getRef('private_key_input_field').value;
|
||||||
|
hidePopup()
|
||||||
|
console.log(key)
|
||||||
|
getRef('sign_in_page').classList.add('hide-completely')
|
||||||
|
getRef('loading_page').classList.remove('hide-completely')
|
||||||
|
resolve(key)
|
||||||
|
})
|
||||||
|
getRef('guest_login_button').onclick = () => {
|
||||||
|
getRef('sign_in_page').classList.add('hide-completely')
|
||||||
|
getRef('loading_page').classList.remove('hide-completely')
|
||||||
|
reject(null)
|
||||||
|
}
|
||||||
|
if (type === "PRIVATE_KEY") {
|
||||||
|
getRef('private_key_input_field').setAttribute("placeholder", "Private Key")
|
||||||
|
document.getElementById("type_of_key").textContent = 'FLO private key'
|
||||||
|
document.getElementById("remove_account").classList.add("hide-completely");
|
||||||
|
} else if (type === "PIN/Password") {
|
||||||
|
getRef('private_key_input_field').setAttribute("placeholder", "PIN/Password")
|
||||||
|
showPopup('sign_in_popup')
|
||||||
|
document.getElementById("remove_account").classList.remove("hide-completely");
|
||||||
|
document.getElementById("type_of_key").textContent = 'PIN/Password'
|
||||||
|
privKeyNotSecured = false;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
//invoke the startup functions
|
||||||
|
floDapps.launchStartUp().then(result => {
|
||||||
|
console.log(result)
|
||||||
|
document.getElementById("greet_tag").textContent = myFloID
|
||||||
|
//load messages from IDB and render them
|
||||||
|
console.log(`Loading Data! Please Wait...`)
|
||||||
|
messenger.initUserDB().then(result => {
|
||||||
|
console.log(result)
|
||||||
|
messenger.loadDataFromIDB().then(data => {
|
||||||
|
console.log(data)
|
||||||
|
floGlobals.appendix = data.appendix;
|
||||||
|
floGlobals.groups = data.groups;
|
||||||
|
floGlobals.chats = data.chats
|
||||||
|
renderContactList(floGlobals.contacts)
|
||||||
|
renderMailContactList(floGlobals.contacts)
|
||||||
|
renderMessages(data.messages, false)
|
||||||
|
renderMailList(data.mails, false)
|
||||||
|
renderMarked(data.marked)
|
||||||
|
messenger.setUIcallbacks(renderDirectUI, renderGroupUI)
|
||||||
|
messenger.requestDirectInbox()
|
||||||
|
.then(r => console.log("DirectConn:", r))
|
||||||
|
.catch(e => console.error("Request error:", e))
|
||||||
|
messenger.requestGroupInbox()
|
||||||
|
.then(r => console.log(r))
|
||||||
|
console.log(`Load Successful!`)
|
||||||
|
//hide loading screen
|
||||||
|
getRef('loading_page').classList.add("hide-completely")
|
||||||
|
mainPage.classList.remove('hide-completely')
|
||||||
|
getRef('chat').classList.add('hide-completely')
|
||||||
|
getRef('mail').classList.add('hide-completely')
|
||||||
|
document.getElementById('chat_page_button').click()
|
||||||
|
if (privKeyNotSecured) {
|
||||||
|
notify("Private key is not secured with password. Remember to secure the private key in settings",
|
||||||
|
"warn", '')
|
||||||
|
document.getElementById("secure_key").textContent = 'Set password'
|
||||||
|
} else {
|
||||||
|
document.getElementById("secure_key").textContent = 'Change password'
|
||||||
}
|
}
|
||||||
|
}).catch(error => {
|
||||||
|
//console.error(`Failed to load data`)
|
||||||
|
notify(error, "error")
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
//invoke the startup functions
|
}).catch(error => notify(error, "error"))
|
||||||
floDapps.launchStartUp().then(result => {
|
}
|
||||||
console.log(result)
|
</script>
|
||||||
document.getElementById("greet_tag").textContent = myFloID
|
|
||||||
//load messages from IDB and render them
|
|
||||||
console.log(`Loading Data! Please Wait...`)
|
|
||||||
messenger.initUserDB().then(result => {
|
|
||||||
console.log(result)
|
|
||||||
messenger.loadDataFromIDB().then(data => {
|
|
||||||
console.log(data)
|
|
||||||
floGlobals.appendix = data.appendix;
|
|
||||||
floGlobals.groups = data.groups;
|
|
||||||
floGlobals.chats = data.chats
|
|
||||||
renderContactList(floGlobals.contacts)
|
|
||||||
renderMailContactList(floGlobals.contacts)
|
|
||||||
renderMessages(data.messages, false)
|
|
||||||
renderMailList(data.mails, false)
|
|
||||||
renderMarked(data.marked)
|
|
||||||
messenger.setUIcallbacks(renderDirectUI, renderGroupUI)
|
|
||||||
messenger.requestDirectInbox()
|
|
||||||
.then(r => console.log("DirectConn:", r))
|
|
||||||
.catch(e => console.error("Request error:", e))
|
|
||||||
messenger.requestGroupInbox()
|
|
||||||
.then(r => console.log(r))
|
|
||||||
console.log(`Load Successful!`)
|
|
||||||
//hide loading screen
|
|
||||||
getRef('loading_page').classList.add("hide-completely")
|
|
||||||
mainPage.classList.remove('hide-completely')
|
|
||||||
getRef('chat').classList.add('hide-completely')
|
|
||||||
getRef('mail').classList.add('hide-completely')
|
|
||||||
document.getElementById('chat_page_button').click()
|
|
||||||
if (privKeyNotSecured) {
|
|
||||||
notify("Private key is not secured with password. Remember to secure the private key in settings",
|
|
||||||
"warn", '')
|
|
||||||
document.getElementById("secure_key").textContent = 'Set password'
|
|
||||||
} else {
|
|
||||||
document.getElementById("secure_key").textContent = 'Change password'
|
|
||||||
}
|
|
||||||
}).catch(error => {
|
|
||||||
//console.error(`Failed to load data`)
|
|
||||||
notify(error, "error")
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
}).catch(error => notify(error, "error"))
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<script>
|
<script>
|
||||||
let isSignInOpen = false,
|
let isSignInOpen = false,
|
||||||
activePage = {
|
activePage = {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user