kamo
/
Ucontrol
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

icons and popup

Browse Source
master
km0 3 years ago
parent 9446848335
commit 8c9d0ebd00
22 changed files with 223 additions and 156 deletions
Show Stats Download Patch File Download Diff File

2
uc-front/about.html → about.html
Unescape Escape View File

@ -51,7 +51,7 @@
<div class="big-card">
<h2 class="quote">“A fresh start for the people.”</h2>
<img src="assets/test.jpg" alt="" />
<img src="images/test.jpg" alt="" />
</div>
</main>
</body>

46
accordion.js
Unescape Escape View File

@ -0,0 +1,46 @@
const accordions = document.querySelectorAll(".accordion");
chrome.storage.sync.get(["selected"], (result) => {
syncCategories(result.selected);
});
const syncCategories = function (selected) {
for (const accordion of accordions) {
let expandButton = accordion.querySelector('.more-info input[type="checkbox"]');
let content = accordion.querySelector(".content");
accordion.style.height = expandButton.addEventListener("change", (e) => {
if (e.target.checked) {
content.style.maxHeight = content.scrollHeight + "px";
content.style.marginTop = "24px";
} else {
content.style.marginTop = 0;
content.style.maxHeight = null;
}
});
let checkbox = accordion.querySelector(".switch input");
let category = checkbox.id;
console.log(category);
checkbox.checked = selected.includes(category);
checkbox.addEventListener("change", () => {
checkbox.checked
? selected.push(category)
: selected.splice(selected.indexOf(category), 1);
chrome.storage.sync.set({ selected });
});
}
};
window.addEventListener("resize", (e) => {
for (const accordion of accordions) {
let content = accordion.querySelector(".content");
if (accordion.querySelector('.more-info input[type="checkbox"]').checked) {
content.style.maxHeight = content.scrollHeight + "px";
content.style.marginTop = "24px";
} else {
content.style.marginTop = 0;
content.style.maxHeight = null;
}
}
});

6
background.js
Unescape Escape View File

@ -3,6 +3,10 @@ let categories = {
title: "Collection of Data",
keywords: ["data", "collect"],
},
usage: {
title: "How do they use this data",
keywords: ["usage", "use"],
},
third: {
title: "Usage of Data",
keywords: ["share", "third", "companies", "party"],
@ -25,7 +29,7 @@ let categories = {
},
};
let selected = ["location"];
let selected = [];
chrome.runtime.onInstalled.addListener(() => {
chrome.storage.sync.set({ selected, categories });

14
uc-front/categories.html → categories.html
Unescape Escape View File

@ -35,7 +35,7 @@
<span>?</span>
</label>
<label class="switch">
<input type="checkbox" />
<input type="checkbox" id="collect" />
<span class="slider round"></span>
</label>
</div>
@ -53,7 +53,7 @@
<span>?</span>
</label>
<label class="switch">
<input type="checkbox" />
<input type="checkbox" id="usage" />
<span class="slider round"></span>
</label>
</div>
@ -68,7 +68,7 @@
<span>?</span>
</label>
<label class="switch">
<input type="checkbox" />
<input type="checkbox" id="third" />
<span class="slider round"></span>
</label>
</div>
@ -86,7 +86,7 @@
<span>?</span>
</label>
<label class="switch">
<input type="checkbox" />
<input type="checkbox" id="location" />
<span class="slider round"></span>
</label>
</div>
@ -101,7 +101,7 @@
<span>?</span>
</label>
<label class="switch">
<input type="checkbox" />
<input type="checkbox" id="permission" />
<span class="slider round"></span>
</label>
</div>
@ -118,7 +118,7 @@
<span>?</span>
</label>
<label class="switch">
<input type="checkbox" />
<input type="checkbox" id="upload" />
<span class="slider round"></span>
</label>
</div>
@ -135,7 +135,7 @@
<span>?</span>
</label>
<label class="switch">
<input type="checkbox" />
<input type="checkbox" id="suspension" />
<span class="slider round"></span>
</label>
</div>

BIN
images/icon_128.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
images/icon_16.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 342 B

After

Width:  |  Height:  |  Size: 370 B

BIN
images/icon_32.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 610 B

After

Width:  |  Height:  |  Size: 540 B

BIN
images/icon_48.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 889 B

After

Width:  |  Height:  |  Size: 731 B

0
uc-front/assets/logo.svg → images/logo.svg
Unescape Escape View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.5 KiB

After

Width:  |  Height:  |  Size: 6.5 KiB

0
uc-front/assets/test.jpg → images/test.jpg
Unescape Escape View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 90 KiB

After

Width:  |  Height:  |  Size: 90 KiB

29
options.html
Unescape Escape View File

@ -4,20 +4,23 @@
<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>Parse Policies - Options</title>
<link rel="stylesheet" href="options.css" />
<script src="options.js" defer></script>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Sora:wght@400;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<a href="start.html">Go to start</a>
<h1>Parse Policies - Options</h1>
<ul id="categories">
<li class="category reference">
<label for=""></label>
<input type="checkbox" name="" id="" />
</li>
</ul>
</div>
<main class="welcome">
<img src="images/logo.svg" class="title" alt="U Control" />
<div class="description">
You are one step closer <br />
<strong>more control</strong> over your data
</div>
<a href="categories.html" class="button">Get Started</a>
</main>
</body>
</html>

117
popup.css
Unescape Escape View File

@ -1,5 +1,16 @@
body {
width: 200px;
* {
box-sizing: border-box;
}
html {
width: 300px;
}
body,
html {
font-family: "Sora";
margin: 0px;
padding: 8px;
}
button {
@ -8,33 +19,117 @@ button {
outline: none;
border-radius: 2px;
cursor: pointer;
border: 1px solid currentColor;
background: white;
border: 1px solid #b6c2e2;
}
button:active {
background-color: currentColor;
button.active {
background-color: #1834e9;
}
button.current {
box-shadow: 0 0 0 2px white, 0 0 0 4px black;
}
h1,
h2 {
font-size: 1rem;
margin: 8px 0;
header {
display: flex;
justify-content: space-between;
}
ul {
h1 {
color: #1834e9;
font-weight: bold;
font-size: 24px;
margin: 0;
}
#selected-list {
margin: 0;
margin-top: 32px;
padding: 0;
list-style: none;
}
.category + .category {
border-top: 1px solid #eef1f8;
}
#preferences {
background: none;
padding: 0;
margin: 8px 0;
border: none;
border-bottom: 1px solid currentColor;
color: #1834e9;
}
.category {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 12px 0;
}
.category .title {
margin: 0;
}
.switch {
position: relative;
display: inline-block;
width: 30px;
height: 17px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #eef1f8;
border: 1px solid #b6c2e2;
transition: 0.4s;
}
.slider:before {
position: absolute;
content: "";
height: 13px;
width: 13px;
left: 2px;
bottom: 1px;
background-color: white;
transition: 0.4s;
}
input:checked + .slider {
background-color: #1834e9;
}
input:focus + .slider {
box-shadow: 0 0 1px #b6c2e2;
}
input:checked + .slider:before {
-webkit-transform: translateX(12px);
-ms-transform: translateX(12px);
transform: translateX(12px);
}
/* Rounded sliders */
.slider.round {
border-radius: 17px;
}
.slider.round:before {
border-radius: 50%;
}

27
popup.html
Unescape Escape View File

@ -2,15 +2,28 @@
<html>
<head>
<link rel="stylesheet" href="popup.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Sora:wght@400;700&display=swap"
rel="stylesheet"
/>
<script src="popup.js" defer></script>
</head>
<body>
<h1>Parse Policies</h1>
<button id="activate"></button>
<div>
<h2>Selected categories</h2>
<ul id="selected-list"></ul>
<button id="preferences">Preferences</button>
</div>
<header>
<h1>Ucontrol</h1>
<button id="activate"></button>
</header>
<ul id="selected-list">
<li class="category reference">
<h3 class="title">The</h3>
<label class="switch">
<input type="checkbox" id="collect" />
<span class="slider round"></span>
</label>
</li>
</ul>
<button id="preferences">Preferences</button>
</body>
</html>

22
popup.js
Unescape Escape View File

@ -8,11 +8,25 @@ chrome.storage.sync.get(["categories", "selected"], (result) => {
const listCategories = function (categories, selected) {
let selectedList = document.getElementById("selected-list");
for (const category of selected) {
item = document.createElement("li");
item.innerHTML = categories[category].title;
let reference = selectedList.querySelector(".category.reference");
for (const [key, category] of Object.entries(categories)) {
item = reference.cloneNode(true);
item.classList.remove("reference");
item.querySelector(".title").innerHTML = category.title;
let checkbox = item.querySelector(".switch input");
checkbox.checked = selected.includes(key);
checkbox.addEventListener("change", () => {
checkbox.checked ? selected.push(key) : selected.splice(selected.indexOf(key), 1);
chrome.storage.sync.set({ selected });
});
selectedList.appendChild(item);
}
reference.remove();
};
const preferences = document.getElementById("preferences");
@ -22,6 +36,8 @@ preferences.addEventListener("click", () => {
const activate = document.getElementById("activate");
activate.addEventListener("click", async () => {
activate.classList.toggle("active");
let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
chrome.scripting.executeScript({

12
start.html
Unescape Escape View File

@ -1,12 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
Start test
</body>
</html>

6
uc-front/style.css → style.css
Unescape Escape View File

@ -113,7 +113,7 @@ header .description {
}
main.tips {
padding: 64px;
padding: 24px;
display: flex;
justify-content: center;
align-items: flex-start;
@ -133,7 +133,7 @@ main.tips .card {
}
.tips .card .title {
font-weight: 600;
font-weight: 400;
font-size: 32px;
text-align: center;
color: var(--color);
@ -298,7 +298,7 @@ input:checked + .slider:before {
.accordion .header {
display: flex;
align-items: center;
align-items: baseline;
}
.accordion + .accordion {

20
test.html
Unescape Escape View File

@ -1,20 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
<p>
Tempor dolore voluptate aute velit. Anim laboris deserunt ut Lorem sunt. Occaecat
consectetur ex proident culpa consectetur aliqua minim nulla consequat amet enim. Ipsum
excepteur fugiat reprehenderit laboris sint.
</p>
<p>Location tempor eheh ahah</p>
<p>Usage of data</p>
</body>
</html>

0
uc-front/tips.html → tips.html
Unescape Escape View File

28
uc-front/accordion.js
Unescape Escape View File

@ -1,28 +0,0 @@
const accordions = document.querySelectorAll(".accordion");
for (const accordion of accordions) {
let expandButton = accordion.querySelector('.more-info input[type="checkbox"]');
let content = accordion.querySelector(".content");
accordion.style.height = expandButton.addEventListener("change", (e) => {
if (e.target.checked) {
content.style.maxHeight = content.scrollHeight + "px";
content.style.marginTop = "24px";
} else {
content.style.marginTop = 0;
content.style.maxHeight = null;
}
});
}
window.addEventListener("resize", (e) => {
for (const accordion of accordions) {
let content = accordion.querySelector(".content");
if (accordion.querySelector('.more-info input[type="checkbox"]').checked) {
content.style.maxHeight = content.scrollHeight + "px";
content.style.marginTop = "24px";
} else {
content.style.marginTop = 0;
content.style.maxHeight = null;
}
}
});

24
uc-front/assets/logo type.svg
Unescape Escape View File

@ -1,24 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Laag_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1117 479" style="enable-background:new 0 0 1117 479;" xml:space="preserve">
<style type="text/css">
.st0{fill:#1834E9;}
.st1{fill:#FFFFFF;}
.st2{font-family:'Sora-ExtraBold';}
.st3{font-size:121.1839px;}
</style>
<rect x="0.9" y="-1.2" class="st0" width="1115.1" height="481.2"/>
<g>
<text transform="matrix(1 0 0 1 278.1071 276.7521)" class="st1 st2 st3">CONTROL</text>
</g>
<g>
<g>
<path class="st1" d="M251,242.7c0.1-1.2,0.1-2.3,0.1-3.5v-52.4h-22.6v52.9c0,1.1-0.1,2.1-0.2,3H251z"/>
<path class="st1" d="M217.3,256.1c-1.7,0.4-3.6,0.7-5.7,0.7c-3.6,0-6.7-0.7-9.2-2.1c-2.5-1.4-4.4-3.4-5.8-6c-1.3-2.6-2-5.6-2-9.1
v-52.9H172v52.4c0,7.9,1.5,14.8,4.6,20.6c3.1,5.8,7.6,10.3,13.4,13.4c5.9,3.2,13.1,4.7,21.6,4.7c2,0,3.8-0.1,5.7-0.3V256.1z"/>
</g>
<path class="st1" d="M242.1,256.7c-0.3,2-0.9,3.8-1.7,5.4c-1.3,2.6-3.2,4.5-5.7,5.9c-1.1,0.6-2.3,1.1-3.6,1.4V291
c6.1-0.6,11.4-2,15.9-4.5c5.9-3.2,10.3-7.6,13.4-13.4c2.5-4.7,3.9-10.2,4.4-16.4H242.1z"/>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.2 KiB

BIN
uc-front/assets/logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 8.8 KiB

26
uc-front/index.html
Unescape Escape View File

@ -1,26 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<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" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Sora:wght@400;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<main class="welcome">
<img src="assets/logo.svg" class="title" alt="U Control" />
<div class="description">
You are one step closer <br />
<strong>more control</strong> over your data
</div>
<a href="categories.html" class="button">Get Started</a>
</main>
</body>
</html>
Write Preview
Loading…
Cancel
Save