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

v0.25.71

Browse Source 
feat (user) : add feature to change accent-color
This commit is contained in:
Ritika-Agrawal0811 2021-02-04 19:11:00 +05:30
parent 6665c6cf2f
commit 95205eae5b
4 changed files with 253 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
css/style.css Normal file
View File

@ -0,0 +1,54 @@
.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;
}
#themePurple{
background-color: #5b00d3;
}
#themeCyan{
background-color: #00FFFF;
}
#themePink{
background-color:#ffc0cb;
}

24
index.html
View File

@ -9,6 +9,7 @@
<link rel="preconnect" href="https://fonts.gstatic.com"> <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/main.min.css"> <link rel="stylesheet" href="css/main.min.css">
<link rel="stylesheet" href="css/style.css">
</head> </head>
<body data-theme="dark" onload="onLoadStartUp()" class="hide-completely"> <body data-theme="dark" onload="onLoadStartUp()" class="hide-completely">
@ -656,6 +657,27 @@
<p>If this toggle is ON then pressing 'Enter' key will send messages</p> <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> <sm-switch id="is_enter_send_toggle" class="justify-right"></sm-switch>
</section> </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>
</div> </div>
<div id="backup_panel" class="panel hide-completely"> <div id="backup_panel" class="panel hide-completely">
<section> <section>
@ -682,6 +704,7 @@
</section> </section>
</main> </main>
<script src="scripts/components.js"></script> <script src="scripts/components.js"></script>
<script src="scripts/script.js"></script>
<script id="standard_UI_functions"> <script id="standard_UI_functions">
const domRefs = {} const domRefs = {}
@ -692,6 +715,7 @@
return domRefs[elementId] return domRefs[elementId]
} }
//Checks for internet connection status //Checks for internet connection status
if (!navigator.onLine) if (!navigator.onLine)
notify('There seems to be a problem connecting to the internet, Please check you internet connection.', 'error', '', true) notify('There seems to be a problem connecting to the internet, Please check you internet connection.', 'error', '', true)

96
scripts/components.js
View File

@ -1,3 +1,99 @@
//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 //Button
const smButton = document.createElement('template') const smButton = document.createElement('template')
smButton.innerHTML = ` smButton.innerHTML = `

79
scripts/script.js Normal file
View File

@ -0,0 +1,79 @@
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);
}