Skip to content

Commit

Permalink
Better UI
Browse files Browse the repository at this point in the history 
some updates to the UI
  • Loading branch information
@printflucasguanabara
printflucasguanabara committed Jul 24, 2024
1 parent 53eac43 commit 8d2243c
Show file tree
Hide file tree
Showing 4 changed files with 98 additions and 133 deletions.
28 changes: 0 additions & 28 deletions Compressed extension/ColorCatcher_EXTENSION.pem
View file

This file was deleted.

95 changes: 43 additions & 52 deletions Popup.html
View file
Original file line number Diff line number Diff line change
@@ -1,105 +1,96 @@
<!DOCTYPE html>
<html lang="pt-BR">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ColorCatcher</title>

<style>
@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');

#mainCont {
min-width: 150px;
min-width: 200px;
width: max-content;
padding: 10px;
font-family: Arial, sans-serif;
}

#mainCont>h1 {
font-family: lobster, sans-serif;
h1 {
font-family: 'Lobster', sans-serif;
margin: 0;
margin-bottom: 15px;
text-align: center;
font-size: 30px;
font-size: 24px;
}

#picker_btn {
padding: 5px 7px;
border-radius: 10px;
background-color: white;
border: 1px solid black;
#picker_btn, #ClearButton {
padding: 10px;
border-radius: 5px;
background-color: #007bff;
border: none;
color: white;
font-size: 15px;
width: 100%;
text-align: center;
margin: 0px 4px;
cursor: pointer;
transition: all 0.3s;
transition: background-color 0.3s;
}

#picker_btn:hover {
background-color: black;
color: white;
#picker_btn:hover, #ClearButton:hover {
background-color: #0056b3;
}

#result {
list-style: none;
grid-gap: 10px;
padding: 0;
margin-top: 15px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
grid-gap: 10px;
}

#result>li {
cursor: pointer;
padding: 2px 5px;
font-weight: bolder;
font-size: 15px;
border: 1px solid black;
#result > li {
display: flex;
align-items: center;
padding: 5px;
border: 1px solid #ccc;
border-radius: 5px;
text-shadow: 0.5px 0.5px 0 #cfcfcf, -0.5px -0.5px 0 #cfcfcf, 0.5px -0.5px 0 #cfcfcf, -0.5px 0.5px 0 #cfcfcf;
cursor: pointer;
transition: background-color 0.3s;
}

#result > li:hover {
background-color: #f0f0f0;
}

.color-preview {
width: 20px;
height: 20px;
border-radius: 50%;
border: 1px solid #ccc;
margin-right: 10px;
flex-shrink: 0;
}

.errorLabel {
background-color: red;
color: white;
font-weight: bold;
padding: 5px;
text-align: center;
margin: 0;
margin-top: 20px;
font-size: 14px;
border-radius: 10px;
}

#ClearButton {
padding: 5px 7px;
border-radius: 10px;
background-color: black;
color: white;
border: 1px solid black;
font-size: 15px;
width: 100%;
text-align: center;
margin: 0px 4px;
cursor: pointer;
transition: all 0.3s;
}

#ClearButton:hover {
background-color: white;
color: black;
border-radius: 5px;
}
</style>
</head>

<body>
<div id="mainCont">
<h1>ColorCatcher</h1>
<div id="picker_btn_cont"></div>

<ul id="result">
</ul>
<ul id="result"></ul>
</div>
<script src="popup.js"></script>
</body>
<script src="popup.js"></script>

</html>
</html>
9 changes: 4 additions & 5 deletions contentScript.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
console.log("content script injected rsrs")

console.log("content script injected rsrs");

chrome.runtime.onMessage.addListener((message, sender) => {
if (message.from === "popup" && message.query === "eye_dropper_clicked") {
Expand All @@ -14,13 +13,13 @@ chrome.runtime.onMessage.addListener((message, sender) => {
chrome.storage.local.set({ "color_hex_code": [...resp.color_hex_code, result.sRGBHex] })
}
else {
console.log("no")
console.log("no");
chrome.storage.local.set({ "color_hex_code": [result.sRGBHex] })
}
})
}).catch(e => {
console.log(e)
console.log(e);
})
}, 500);
}
})
});
99 changes: 51 additions & 48 deletions popup.js
View file
Original file line number Diff line number Diff line change
@@ -1,79 +1,82 @@

window.addEventListener('DOMContentLoaded', () => {
const mainCont = document.getElementById("mainCont");
const buttonCont = document.getElementById("picker_btn_cont");
const resultList = document.getElementById("result");

const GiveMetheChild = (color, msg) => {
const errorLabel = document.createElement("p")
errorLabel.setAttribute("class", "errorLabel")
errorLabel.style.backgroundColor = color
errorLabel.innerText = msg
const errorLabel = document.createElement("p");
errorLabel.setAttribute("class", "errorLabel");
errorLabel.style.backgroundColor = color;
errorLabel.innerText = msg;

mainCont.appendChild(errorLabel)
mainCont.appendChild(errorLabel);
setTimeout(() => {
mainCont.removeChild(errorLabel)
}, 2000)
}
mainCont.removeChild(errorLabel);
}, 2000);
};

chrome.tabs.query({ active: true, currentWindow: true }, tabs => {
const tab = tabs[0]

if (tab.url === undefined || tab.url.indexOf('chrome') == 0) {
buttonCont.innerHTML = '<span style="font-family: lobster, sans-serif">Color Catcher</span> não pode acessar <i>páginas do Chrome</i>'
}
else if (tab.url.indexOf('file') === 0) {
buttonCont.innerHTML = '<span style="font-family: lobster, sans-serif">EColor Catcher</span> não pode acessar <i>páginas locais</i>'
const tab = tabs[0];

if (tab.url === undefined || tab.url.indexOf('chrome') === 0) {
buttonCont.innerHTML = '<span style="font-family: Lobster, sans-serif">ColorCatcher</span> não pode acessar <i>páginas do Chrome</i>';
} else if (tab.url.indexOf('file') === 0) {
buttonCont.innerHTML = '<span style="font-family: Lobster, sans-serif">ColorCatcher</span> não pode acessar <i>páginas locais</i>';
} else {
const button = document.createElement("button")
button.setAttribute("id", "picker_btn")
button.innerText = "Selecionar cor da página da web"
const button = document.createElement("button");
button.setAttribute("id", "picker_btn");
button.innerText = "Selecionar cor da página da web";

button.addEventListener("click", () => {
if (!window.EyeDropper) {
GiveMetheChild("#ad5049", 'Seu navegador não suporta a API Color Catcher')
return
GiveMetheChild("#ad5049", 'Seu navegador não suporta a API EyeDropper');
return;
}

chrome.tabs.sendMessage(
tabs[0].id,
{ from: "popup", query: "eye_dropper_clicked" }
);
window.close()
})
window.close();
});

buttonCont.appendChild(button)
buttonCont.appendChild(button);
}
});




chrome.storage.local.get("color_hex_code", (resp) => {

if (resp.color_hex_code && resp.color_hex_code.length > 0) {
resp.color_hex_code.forEach(hexCode => {
const liElem = document.createElement("li")
liElem.innerText = hexCode
liElem.style.backgroundColor = hexCode
liElem.addEventListener("click", () => {
navigator.clipboard.writeText(hexCode);
GiveMetheChild("#e19526", "O código Hex foi copiado para a área de transferência!")
})
resultList.appendChild(liElem)
})
const liElem = document.createElement("li");

const ClearButton = document.createElement("button")
ClearButton.innerText = "Limpar histórico"
ClearButton.setAttribute("id", "ClearButton")
ClearButton.addEventListener("click", () => {
chrome.storage.local.remove("color_hex_code")
window.close()
})
mainCont.appendChild(ClearButton)
}
const colorPreview = document.createElement("div");
colorPreview.classList.add("color-preview");
colorPreview.style.backgroundColor = hexCode; // Define a cor com base no código HEX

})
const colorText = document.createElement("span");
colorText.innerText = hexCode;

})
liElem.appendChild(colorPreview);
liElem.appendChild(colorText);
liElem.addEventListener("click", () => {
navigator.clipboard.writeText(hexCode).then(() => {
GiveMetheChild("#e19526", "O código HEX foi copiado para a área de transferência!");
}).catch(err => {
console.error('Failed to copy:', err);
});
});

resultList.appendChild(liElem);
});

const ClearButton = document.createElement("button");
ClearButton.innerText = "Limpar histórico";
ClearButton.setAttribute("id", "ClearButton");
ClearButton.addEventListener("click", () => {
chrome.storage.local.remove("color_hex_code");
window.close();
});
mainCont.appendChild(ClearButton);
}
});
});

0 comments on commit 8d2243c

Please sign in to comment.