v0.25.73
Fix (user): issue with touch and hold where even after moving finger it would register long press Fix (user): default selected color wouldn't show up when app first loaded
This commit is contained in:
sairaj mote
parent
95205eae5b
commit
8e4c1ca9a6
@ -38,7 +38,7 @@ body[data-theme=dark] {
|
||||
--text-color: 240, 240, 240;
|
||||
--text-color-light: 170, 170, 170;
|
||||
--foreground-color: 20, 20, 20;
|
||||
--error-color: rgb(255, 87, 87);
|
||||
--theme-color-red: #f8fc22;
|
||||
}
|
||||
body[data-theme=dark] .initial {
|
||||
color: rgba(var(--text-color), 1) !important;
|
||||
@ -457,7 +457,7 @@ sm-button.danger {
|
||||
}
|
||||
|
||||
.frame {
|
||||
height: 100vh;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: min(24rem, 100%);
|
||||
@ -1678,6 +1678,9 @@ sm-panel {
|
||||
#settings_page #sign_out::part(button) {
|
||||
color: var(--error-color);
|
||||
}
|
||||
#settings_page color-grid {
|
||||
width: min(24rem, 100%);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 640px) {
|
||||
.hide-on-mobile {
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -34,7 +34,7 @@ body[data-theme='dark']{
|
||||
--text-color: 240, 240, 240;
|
||||
--text-color-light: 170, 170, 170;
|
||||
--foreground-color: 20, 20, 20;
|
||||
--error-color: rgb(255, 87, 87);
|
||||
--theme-color-red: #f8fc22;
|
||||
.initial{
|
||||
color: rgba(var(--text-color), 1) !important;
|
||||
box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.16);
|
||||
@ -407,7 +407,7 @@ sm-button.danger{
|
||||
#on_boarding_page{
|
||||
}
|
||||
.frame{
|
||||
height: 100vh;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: min(24rem, 100%);
|
||||
@ -1593,6 +1593,9 @@ sm-panel{
|
||||
#sign_out::part(button){
|
||||
color: var(--error-color);
|
||||
}
|
||||
color-grid{
|
||||
width: min(24rem, 100%);
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 640px){
|
||||
.hide-on-mobile{
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
.color-grid{
|
||||
width:120px;
|
||||
height:140px;
|
||||
width: 120px;
|
||||
height: 140px;
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
align-content: space-around;
|
||||
@ -16,8 +16,6 @@
|
||||
.color-grid .colorRow div{
|
||||
width:50px;
|
||||
height:50px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
#themeRed{
|
||||
@ -51,4 +49,13 @@
|
||||
|
||||
#themePink{
|
||||
background-color:#ffc0cb;
|
||||
}
|
||||
|
||||
.color-tile{
|
||||
height: 4rem;
|
||||
width: 4rem;
|
||||
background: teal;
|
||||
}
|
||||
.color-tile input{
|
||||
display: none;
|
||||
}
|
||||
53
index.html
53
index.html
@ -657,25 +657,9 @@
|
||||
<p>If this toggle is ON then pressing 'Enter' key will send messages</p>
|
||||
<sm-switch id="is_enter_send_toggle" class="justify-right"></sm-switch>
|
||||
</section>
|
||||
<section class="color-grid">
|
||||
<h4>Colors</h4>
|
||||
<div class="colorGrid">
|
||||
<div class="colorRow">
|
||||
<div id="themeRed" onclick="setTheme('Red')"></div>
|
||||
<div id="themeBlue" onclick="setTheme('Blue')"></div>
|
||||
<div id="themeGreen" onclick="setTheme('Green')"></div>
|
||||
<div id="themePurple" onclick="setTheme('Purple')"></div>
|
||||
</div>
|
||||
|
||||
<div class="colorRow">
|
||||
<div id="themeCyan" onclick="setTheme('Cyan')"></div>
|
||||
<div id="themePink" onclick="setTheme('Pink')"></div>
|
||||
<div id="themeMustard" onclick="setTheme('Mustard')"></div>
|
||||
<div id="themeSalmon" onclick="setTheme('Salmon')"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- <color-grid></color-grid> -->
|
||||
<section>
|
||||
<h4>Colors</h4>
|
||||
<color-grid id="accent_color_selector"></color-grid>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
@ -1279,9 +1263,9 @@
|
||||
//invoke the startup functions
|
||||
floDapps.launchStartUp().then(result => {
|
||||
console.log(result)
|
||||
if(!isPinSet){
|
||||
/* if(!isPinSet){
|
||||
showFrame(2)
|
||||
}
|
||||
} */
|
||||
getRef("greet_tag").textContent = myFloID
|
||||
//load messages from IDB and render them
|
||||
console.log(`Loading Data! Please Wait...`)
|
||||
@ -1303,9 +1287,10 @@
|
||||
messenger.requestGroupInbox()
|
||||
.then(r => console.log(r))
|
||||
console.log(`Load Successful!`)
|
||||
if(isPinSet){
|
||||
/* if(isPinSet){
|
||||
showPage('main')
|
||||
}
|
||||
} */
|
||||
showPage('main')
|
||||
}).catch(error => {
|
||||
//console.error(`Failed to load data`)
|
||||
notify(error, "error")
|
||||
@ -1845,12 +1830,20 @@
|
||||
clickedContact['isGroup'] = floGlobals.groups.hasOwnProperty(clickedContact['floID'])
|
||||
showPopup('contact_details_popup')
|
||||
}, 500)
|
||||
getRef('chat_page').addEventListener('touchmove', handleTouchMove)
|
||||
}
|
||||
})
|
||||
|
||||
function handleTouchMove(e){
|
||||
if(e.target.closest('.contact')){
|
||||
clearTimeout(holdTimeout)
|
||||
}
|
||||
}
|
||||
|
||||
getRef('chat_page').addEventListener('touchend', e => {
|
||||
if(e.target.closest('.contact')){
|
||||
clearTimeout(holdTimeout)
|
||||
getRef('chat_page').removeEventListener('touchmove', handleTouchMove)
|
||||
}
|
||||
})
|
||||
|
||||
@ -3294,6 +3287,20 @@
|
||||
}
|
||||
}
|
||||
|
||||
getRef('accent_color_selector').colors = selectedColors
|
||||
|
||||
if(localStorage.getItem('accent-color')){
|
||||
const color = localStorage.getItem('accent-color')
|
||||
getRef('accent_color_selector').selectedColor = color
|
||||
document.body.style.setProperty('--accent-color', color);
|
||||
}
|
||||
|
||||
document.addEventListener('colorselected', e => {
|
||||
const color = e.detail.value
|
||||
localStorage.setItem("accent-color", color);
|
||||
document.body.style.setProperty('--accent-color', color);
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<script id="init_lib" version="1.0.1">
|
||||
|
||||
@ -1,99 +1,3 @@
|
||||
//Color Grid
|
||||
const colorGrid = document.createElement('template');
|
||||
colorGrid.innerHTML =`
|
||||
<style>
|
||||
*{
|
||||
padding:0;
|
||||
margin:0;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.color-grid{
|
||||
width:120px;
|
||||
height:140px;
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
align-content: space-around;
|
||||
}
|
||||
|
||||
.color-grid .colorRow{
|
||||
display:flex;
|
||||
justify-content: space-around;
|
||||
margin-top:10px;
|
||||
width:230px;
|
||||
}
|
||||
|
||||
.color-grid .colorRow div{
|
||||
width:50px;
|
||||
height:50px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
#themeRed{
|
||||
background-color:#ff0000;
|
||||
}
|
||||
|
||||
#themeBlue{
|
||||
background-color: #0000ff;
|
||||
}
|
||||
|
||||
#themeGreen{
|
||||
background-color: #00ff00;
|
||||
}
|
||||
|
||||
#themeMustard{
|
||||
background-color: #ffdb58;
|
||||
}
|
||||
|
||||
#themeSalmon{
|
||||
background-color: #FFA07A;
|
||||
}
|
||||
|
||||
#themeYellow{
|
||||
background-color: #ffff00;
|
||||
}
|
||||
|
||||
#themeCyan{
|
||||
background-color: #00FFFF;
|
||||
}
|
||||
|
||||
#themePink{
|
||||
background-color:#ffc0cb;
|
||||
}
|
||||
|
||||
</style>
|
||||
<div class="colorGrid">
|
||||
<div class="colorRow">
|
||||
<div id="themeRed"></div>
|
||||
<div id="themeBlue"></div>
|
||||
<div id="themeGreen"></div>
|
||||
<div id="themeYellow"></div>
|
||||
</div>
|
||||
|
||||
<div class="colorRow">
|
||||
<div id="themeCyan"></div>
|
||||
<div id="themePink"></div>
|
||||
<div id="themeMustard"></div>
|
||||
<div id="themeSalmon"></div>
|
||||
</div>
|
||||
|
||||
</div> `;
|
||||
|
||||
customElements.define('color-grid',
|
||||
class extends HTMLElement {
|
||||
constructor() {
|
||||
super()
|
||||
this.attachShadow({
|
||||
mode: 'open'
|
||||
}).append(colorGrid.content.cloneNode(true))
|
||||
}
|
||||
|
||||
|
||||
})
|
||||
|
||||
|
||||
//Button
|
||||
const smButton = document.createElement('template')
|
||||
smButton.innerHTML = `
|
||||
@ -3845,4 +3749,122 @@ customElements.define('text-field', class extends HTMLElement{
|
||||
this.editButton.removeEventListener('click', this.setEditable)
|
||||
this.saveButton.removeEventListener('click', this.setNonEditable)
|
||||
}
|
||||
})
|
||||
|
||||
//Color Grid
|
||||
const colorGrid = document.createElement('template');
|
||||
colorGrid.innerHTML =`
|
||||
<style>
|
||||
*{
|
||||
padding:0;
|
||||
margin:0;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
:host{
|
||||
display: flex;
|
||||
}
|
||||
.color-tile-container{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.color-tile{
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
.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), 1) inset;
|
||||
display: none;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.color-tile input[type="radio"]:checked ~ .border{
|
||||
display: flex;
|
||||
}
|
||||
|
||||
</style>
|
||||
<div class="color-tile-container">
|
||||
</div>`;
|
||||
|
||||
customElements.define('color-grid',
|
||||
class extends HTMLElement {
|
||||
constructor() {
|
||||
super()
|
||||
this.attachShadow({
|
||||
mode: 'open'
|
||||
}).append(colorGrid.content.cloneNode(true))
|
||||
|
||||
this.colorArray = []
|
||||
this.container = this.shadowRoot.querySelector('.color-tile-container')
|
||||
}
|
||||
|
||||
set colors(arr) {
|
||||
this.colorArray = arr
|
||||
this.renderTiles()
|
||||
}
|
||||
|
||||
set selectedColor(color) {
|
||||
if (this.colorArray.includes(color) && this.container.querySelector(`[data-color="${color}"]`)) {
|
||||
this.container.querySelector(`[data-color="${color}"] input`).checked = true
|
||||
}
|
||||
}
|
||||
|
||||
randString(length) {
|
||||
let result = '';
|
||||
let characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
|
||||
|
||||
for (let i = 0; i < length; i++)
|
||||
result += characters.charAt(Math.floor(Math.random() * characters.length));
|
||||
return result;
|
||||
}
|
||||
|
||||
renderTiles() {
|
||||
this.container.innerHTML = ''
|
||||
const frag = document.createDocumentFragment()
|
||||
const groupName = this.randString(6)
|
||||
this.colorArray.forEach(color => {
|
||||
const label = document.createElement('label')
|
||||
label.classList.add('color-tile')
|
||||
label.setAttribute('data-color', color)
|
||||
label.setAttribute('style', `background-color: ${color}`)
|
||||
label.innerHTML = `
|
||||
<input type="radio" name="${groupName}">
|
||||
<div class="border"></div>
|
||||
`
|
||||
frag.append(label)
|
||||
})
|
||||
this.container.append(frag)
|
||||
}
|
||||
|
||||
handleChange(e) {
|
||||
const clickedTile = e.target.closest('.color-tile')
|
||||
const clickedTileColor = clickedTile.dataset.color
|
||||
const tileSelected = new CustomEvent('colorselected', {
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
detail: {
|
||||
value: clickedTileColor,
|
||||
}
|
||||
})
|
||||
this.dispatchEvent(tileSelected)
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.container.addEventListener('change', this.handleChange)
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
this.container.removeEventListener('change', this.handleChange)
|
||||
}
|
||||
})
|
||||
@ -1,79 +0,0 @@
|
||||
|
||||
function getHexCode(colorName){
|
||||
switch(colorName){
|
||||
case "Red":
|
||||
return "#ff0000";
|
||||
|
||||
case "Blue":
|
||||
return "#0000ff";
|
||||
|
||||
case "Purple":
|
||||
return "#5b00d3";
|
||||
|
||||
case "Mustard":
|
||||
return "#ffdb58";
|
||||
|
||||
case "Green":
|
||||
return "#00ff00";
|
||||
|
||||
case "Pink":
|
||||
return "#ffc0cb";
|
||||
|
||||
case "Cyan":
|
||||
return "#00ffff";
|
||||
|
||||
case "Salmon":
|
||||
return "#FFA07A";
|
||||
}
|
||||
}
|
||||
|
||||
function saveColor(colorName){
|
||||
|
||||
if(colorName){
|
||||
localStorage.setItem("color", colorName);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
let selected = false;
|
||||
let previousColor;
|
||||
function selectedColor(colorName){
|
||||
let colorID = "theme" + colorName;
|
||||
let colorCard = getRef(colorID);
|
||||
let previousColorID;
|
||||
let previousColorCard;
|
||||
|
||||
if(selected){
|
||||
previousColorID = "theme" + previousColor;
|
||||
previousColorCard = getRef(previousColorID);
|
||||
previousColorCard.style.border = "none";
|
||||
}
|
||||
|
||||
if(localStorage.getItem('theme') =='dark'){
|
||||
|
||||
colorCard.style.border = "4px solid #fff";
|
||||
|
||||
}else{
|
||||
|
||||
colorCard.style.border = "4px solid #000";
|
||||
}
|
||||
|
||||
selected = true;
|
||||
previousColor = colorName;
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
function setTheme(colorName){
|
||||
|
||||
colorHex = getHexCode(colorName);
|
||||
|
||||
document.body.style.setProperty('--accent-color', colorHex);
|
||||
|
||||
saveColor(colorName);
|
||||
|
||||
selectedColor(colorName);
|
||||
|
||||
}
|
||||
39
test.html
Normal file
39
test.html
Normal file
@ -0,0 +1,39 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="css/main.min.css">
|
||||
</head>
|
||||
<body data-theme="dark">
|
||||
<script src="scripts/components.js"></script>
|
||||
<script src="scripts/script.js"></script>
|
||||
<color-grid id="color_grid"></color-grid>
|
||||
<sm-input id="my_input"></sm-input>
|
||||
<script>
|
||||
const colors = ['#ff0000', '#ff7500', '#ffa500', '#ff0465', '#ff0048', '#ff0040', '#ff00d4']
|
||||
const themeSelector = document.getElementById('color_grid')
|
||||
themeSelector.colors = colors
|
||||
|
||||
document.addEventListener('colorselected', e => {
|
||||
const color = e.detail.value
|
||||
localStorage.setItem("color", color);
|
||||
document.body.style.setProperty('--accent-color', color);
|
||||
})
|
||||
const myInput = document.getElementById('my_input')
|
||||
|
||||
myInput.addEventListener('keydown', function(e) {
|
||||
if(e.key.match(/[0-9]/)){
|
||||
if(this.value.trim().length < 6){
|
||||
console.log('type more')
|
||||
}
|
||||
else{
|
||||
e.preventDefault()
|
||||
console.log('stop')
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user