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

css/main.css

@@ -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 {

css/main.scss

@@ -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{

css/style.css

@@ -1,6 +1,6 @@
 .color-grid{
-    width:120px;
+    width: 120px;
-    height:140px;
+    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;
 }

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">
+                    <section>
-                     <h4>Colors</h4>
+                        <h4>Colors</h4>
-                     <div class="colorGrid">
+                        <color-grid id="accent_color_selector"></color-grid>
-                        <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>
 
                 </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">

scripts/components.js

@@ -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)
+    }
 })

scripts/script.js

@@ -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);
-    
-}

test.html

@@ -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>