improved pre-selected accent colors
This commit is contained in:
sairaj mote
parent
6a4cc802a4
commit
34aaa8318e
30
css/main.css
30
css/main.css
@ -23,6 +23,21 @@ body {
|
||||
--danger-color: rgb(255, 75, 75);
|
||||
--green: #1cad59;
|
||||
--yellow: rgb(220, 165, 0);
|
||||
--dark-red: #d40e1e;
|
||||
--red: #f50000;
|
||||
--kinda-pink: #e40273;
|
||||
--purple: #462191;
|
||||
--shady-blue: #324de6;
|
||||
--nice-blue: #256eff;
|
||||
--maybe-cyan: #00b0ff;
|
||||
--teal: #00bcd4;
|
||||
--mint-green: #16c79a;
|
||||
--yellowish-green: #66bb6a;
|
||||
--greenish-yellow: #8bc34a;
|
||||
--dark-teal: #11698e;
|
||||
--tangerine: #ff6f00;
|
||||
--orange: #ff9100;
|
||||
--redish-orange: #ff3d00;
|
||||
color: rgba(var(--text-color), 1);
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
@ -40,6 +55,21 @@ body[data-theme=dark] {
|
||||
--danger-color: rgb(255, 106, 106);
|
||||
--green: #00e676;
|
||||
--yellow: rgb(255, 213, 5);
|
||||
--dark-red: #ff5e7e;
|
||||
--red: #ff6098;
|
||||
--kinda-pink: #c44ae6;
|
||||
--purple: #9565f7;
|
||||
--shady-blue: #7084f5;
|
||||
--nice-blue: #86afff;
|
||||
--maybe-cyan: #66cfff;
|
||||
--teal: #6aeeff;
|
||||
--mint-green: #4dffd2;
|
||||
--yellowish-green: #9effa2;
|
||||
--greenish-yellow: #c7fc8b;
|
||||
--dark-teal: #51cbff;
|
||||
--tangerine: #ffac6d;
|
||||
--orange: #ffbe68;
|
||||
--redish-orange: #ff8560;
|
||||
}
|
||||
body[data-theme=dark] .initial {
|
||||
color: rgba(var(--text-color), 1) !important;
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -20,6 +20,22 @@ body {
|
||||
--danger-color: rgb(255, 75, 75);
|
||||
--green: #1cad59;
|
||||
--yellow: rgb(220, 165, 0);
|
||||
// Accent colors
|
||||
--dark-red: #d40e1e;
|
||||
--red: #f50000;
|
||||
--kinda-pink: #e40273;
|
||||
--purple: #462191;
|
||||
--shady-blue: #324de6;
|
||||
--nice-blue: #256eff;
|
||||
--maybe-cyan: #00b0ff;
|
||||
--teal: #00bcd4;
|
||||
--mint-green: #16c79a;
|
||||
--yellowish-green: #66bb6a;
|
||||
--greenish-yellow: #8bc34a;
|
||||
--dark-teal: #11698e;
|
||||
--tangerine: #ff6f00;
|
||||
--orange: #ff9100;
|
||||
--redish-orange: #ff3d00;
|
||||
color: rgba(var(--text-color), 1);
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
#scroll_to_bottom {
|
||||
@ -36,6 +52,22 @@ body[data-theme="dark"] {
|
||||
--danger-color: rgb(255, 106, 106);
|
||||
--green: #00e676;
|
||||
--yellow: rgb(255, 213, 5);
|
||||
// Accent colors
|
||||
--dark-red: #ff5e7e;
|
||||
--red: #ff6098;
|
||||
--kinda-pink: #c44ae6;
|
||||
--purple: #9565f7;
|
||||
--shady-blue: #7084f5;
|
||||
--nice-blue: #86afff;
|
||||
--maybe-cyan: #66cfff;
|
||||
--teal: #6aeeff;
|
||||
--mint-green: #4dffd2;
|
||||
--yellowish-green: #9effa2;
|
||||
--greenish-yellow: #c7fc8b;
|
||||
--dark-teal: #51cbff;
|
||||
--tangerine: #ffac6d;
|
||||
--orange: #ffbe68;
|
||||
--redish-orange: #ff8560;
|
||||
.initial {
|
||||
color: rgba(var(--text-color), 1) !important;
|
||||
box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.16);
|
||||
|
||||
85
index.html
85
index.html
@ -26,7 +26,6 @@
|
||||
showPage('loading')
|
||||
floDapps.setAppObjectStores({ userSettings: {} })
|
||||
document.body.classList.remove('hide')
|
||||
isPinSet = false;
|
||||
|
||||
floDapps.setCustomPrivKeyInput(getSignedIn)
|
||||
getRef('emoji_picker').shadowRoot.append(style);
|
||||
@ -34,21 +33,8 @@
|
||||
floDapps.launchStartUp().then(result => {
|
||||
console.log(result)
|
||||
getRef("greet_tag").value = myFloID
|
||||
|
||||
getRef('accent_color_selector').colors = selectedColors
|
||||
|
||||
if (localStorage.getItem(`accent-color${myFloID}`)) {
|
||||
const color = localStorage.getItem(`accent-color${myFloID}`)
|
||||
getRef('accent_color_selector').selectedColor = color
|
||||
document.body.style.setProperty('--accent-color', color);
|
||||
} else {
|
||||
getRef('accent_color_selector').selectedColor = '#3D5AFE'
|
||||
}
|
||||
|
||||
//load messages from IDB and render them
|
||||
console.log(`Loading Data! Please Wait...`)
|
||||
//Check for available bg image
|
||||
setBgImage();
|
||||
//Set UI render functions
|
||||
messenger.renderUI.chats = renderChatList;
|
||||
messenger.renderUI.directChat = renderDirectUI;
|
||||
@ -58,6 +44,8 @@
|
||||
//init messenger
|
||||
messenger.init().then(result => {
|
||||
console.log(result);
|
||||
//Check for available bg image
|
||||
setBgImage();
|
||||
showPage(window.location.hash, { firstLoad: true })
|
||||
}).catch(error => notify(error, "error"))
|
||||
}).catch(error => notify(error, "error"))
|
||||
@ -481,12 +469,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<sm-switch id="theme_switcher">
|
||||
<div slot="left" class="flex flex-direction-column">
|
||||
<h4>Dark mode</h4>
|
||||
<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">
|
||||
@ -582,10 +564,12 @@
|
||||
</svg>
|
||||
</button>
|
||||
<h4>Add contact</h4>
|
||||
<sm-button id="add_contact_button" variant="primary" disable>Add</sm-button>
|
||||
</header>
|
||||
<sm-input id="add_contact_floID" floId placeholder="FLO address" animate required></sm-input>
|
||||
<sm-input id="add_contact_name" placeholder="Name" animate required></sm-input>
|
||||
<sm-form>
|
||||
<sm-input id="add_contact_floID" floId placeholder="FLO address" animate required></sm-input>
|
||||
<sm-input id="add_contact_name" placeholder="Name" animate required></sm-input>
|
||||
<sm-button id="add_contact_button" variant="primary" disable>Add</sm-button>
|
||||
</sm-form>
|
||||
</sm-popup>
|
||||
<sm-popup id="compose_mail_popup">
|
||||
<header class="popup__header" slot="header">
|
||||
@ -598,14 +582,16 @@
|
||||
</svg>
|
||||
</button>
|
||||
<h4>Compose Mail</h4>
|
||||
<sm-button id="send_mail_button" variant="primary" disable>Send</sm-button>
|
||||
</header>
|
||||
<div id="auto_complete_contact" class="flex flex-direction-column">
|
||||
<sm-input id="send_mail_to" placeholder="To" animate required></sm-input>
|
||||
<div id="mail_contact_list" class="hide contact-list"></div>
|
||||
</div>
|
||||
<sm-input id="subject_of_mail" placeholder="Subject" animate></sm-input>
|
||||
<sm-textarea id="mail_content" placeholder="Type a mail" name="" id="" rows="10" required></sm-textarea>
|
||||
<sm-form>
|
||||
<div id="auto_complete_contact" class="flex flex-direction-column">
|
||||
<sm-input id="send_mail_to" placeholder="To" animate required></sm-input>
|
||||
<div id="mail_contact_list" class="hide contact-list"></div>
|
||||
</div>
|
||||
<sm-input id="subject_of_mail" placeholder="Subject" animate></sm-input>
|
||||
<sm-textarea id="mail_content" placeholder="Type a mail" name="" id="" rows="10" required></sm-textarea>
|
||||
<sm-button id="send_mail_button" variant="primary" disable>Send</sm-button>
|
||||
</sm-form>
|
||||
</sm-popup>
|
||||
<sm-popup id="reply_mail_popup">
|
||||
<header class="popup__header" slot="header">
|
||||
@ -618,10 +604,12 @@
|
||||
</svg>
|
||||
</button>
|
||||
<h4>Reply</h4>
|
||||
<sm-button id="reply_mail_button" variant="primary" disable>Send</sm-button>
|
||||
</header>
|
||||
<sm-input id="subject_of_reply_mail" placeholder="Subject" animate></sm-input>
|
||||
<sm-textarea id="reply_mail_content" placeholder="Type a mail" id="" rows="10" required></sm-textarea>
|
||||
<sm-form>
|
||||
<sm-input id="subject_of_reply_mail" placeholder="Subject" animate></sm-input>
|
||||
<sm-textarea id="reply_mail_content" placeholder="Type a mail" id="" rows="10" required></sm-textarea>
|
||||
<sm-button id="reply_mail_button" variant="primary" disable>Send</sm-button>
|
||||
</sm-form>
|
||||
</sm-popup>
|
||||
<!-- Contact popup -->
|
||||
<sm-popup id="contact_details_popup">
|
||||
@ -1233,6 +1221,36 @@
|
||||
closePopup()
|
||||
})
|
||||
})
|
||||
getRef('accent_color_selector').colors = [
|
||||
'--dark-red',
|
||||
'--red',
|
||||
'--kinda-pink',
|
||||
'--purple',
|
||||
'--shady-blue',
|
||||
'--nice-blue',
|
||||
'--maybe-cyan',
|
||||
'--teal',
|
||||
'--mint-green',
|
||||
'--greenish-yellow',
|
||||
'--yellowish-green',
|
||||
'--dark-teal',
|
||||
'--orange',
|
||||
'--tangerine',
|
||||
'--redish-orange',
|
||||
]
|
||||
if (localStorage.getItem(`accent-color`)) {
|
||||
const color = localStorage.getItem(`accent-color`)
|
||||
getRef('accent_color_selector').selectedColor = color
|
||||
document.body.style.setProperty('--accent-color', `var(${color})`);
|
||||
}
|
||||
else {
|
||||
getRef('accent_color_selector').selectedColor = '--nice-blue'
|
||||
}
|
||||
document.addEventListener('colorselected', e => {
|
||||
const color = e.detail.value
|
||||
localStorage.setItem(`accent-color`, color);
|
||||
document.body.style.setProperty('--accent-color', `var(${color})`);
|
||||
})
|
||||
});
|
||||
function createRipple(event, target) {
|
||||
const circle = document.createElement("span");
|
||||
@ -3264,6 +3282,7 @@
|
||||
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`
|
||||
|
||||
@ -2930,24 +2930,39 @@ colorGrid.innerHTML = `
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
border-radius: 0.5rem;
|
||||
height: 2.5rem;
|
||||
width: 2.5rem;
|
||||
border-radius: 0.3rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.color-tile input[type="radio"]{
|
||||
display: none;
|
||||
}
|
||||
.border{
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 0 0 0.5rem rgba(var(--text-color), 0.8) inset;
|
||||
display: none;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.color-tile input[type="radio"]:checked ~ .border{
|
||||
.checkmark{
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.3rem;
|
||||
border-radius: 0.3rem;
|
||||
background-color: rgba(var(--background-color, (255,255,255)), 0.8);
|
||||
animation: checkmark 0.1s ease;
|
||||
}
|
||||
.icon{
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
fill: rgba(var(--text-color, (17,17,17)), 1);
|
||||
}
|
||||
@keyframes checkmark{
|
||||
from{
|
||||
transform: scale(0);
|
||||
}
|
||||
to{
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -2964,6 +2979,8 @@ customElements.define('color-grid',
|
||||
|
||||
this.colorArray = []
|
||||
this.container = this.shadowRoot.querySelector('.color-tile-container')
|
||||
this.handleChange = this.handleChange.bind(this)
|
||||
this.setCheckMark = this.setCheckMark.bind(this)
|
||||
}
|
||||
|
||||
set colors(arr) {
|
||||
@ -2973,7 +2990,11 @@ customElements.define('color-grid',
|
||||
|
||||
set selectedColor(color) {
|
||||
if (this.colorArray.includes(color) && this.container.querySelector(`[data-color="${color}"]`)) {
|
||||
this.container.querySelector(`[data-color="${color}"] input`).checked = true
|
||||
const selectedTile = this.container.querySelector(`[data-color="${color}"]`)
|
||||
if (selectedTile) {
|
||||
selectedTile.querySelector('input').checked = true
|
||||
this.setCheckMark(selectedTile)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -3000,15 +3021,24 @@ customElements.define('color-grid',
|
||||
label.setAttribute('style', `background-color: ${color}`)
|
||||
label.innerHTML = `
|
||||
<input type="radio" name="${groupName}">
|
||||
<div class="border"></div>
|
||||
`
|
||||
frag.append(label)
|
||||
})
|
||||
this.container.append(frag)
|
||||
}
|
||||
setCheckMark(target) {
|
||||
target.parentNode.querySelectorAll('.checkmark').forEach(checkmark => checkmark.remove())
|
||||
const checkMark = document.createElement('div')
|
||||
checkMark.classList.add('checkmark')
|
||||
checkMark.innerHTML = `
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/></svg>
|
||||
`
|
||||
target.append(checkMark)
|
||||
}
|
||||
|
||||
handleChange(e) {
|
||||
const clickedTile = e.target.closest('.color-tile')
|
||||
this.setCheckMark(clickedTile)
|
||||
const clickedTileColor = clickedTile.dataset.color
|
||||
const tileSelected = new CustomEvent('colorselected', {
|
||||
bubbles: true,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user