wanhose/cookie-dialog-monster
wanhose/cookie-dialog-monster
2
5
Fork 0
Code Issues 304 Pull Requests Releases 18 Wiki Activity

Merge pull request #43 from wanhose/5.5.4

Browse Source 
5.5.4
This commit is contained in:
wanhose 2022-05-24 23:34:34 +02:00 committed by GitHub
commit 9d75a38cac
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 105 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
packages/browser-extension/src/assets/fonts/Lato-BoldItalic.ttf
View File

Binary file not shown.

BIN
packages/browser-extension/src/assets/fonts/Lato-Italic.ttf
View File

Binary file not shown.

2
packages/browser-extension/src/manifest.json
View File

@ -1,7 +1,7 @@
{ {
"manifest_version": 2, "manifest_version": 2,
"name": "Cookie Dialog Monster", "name": "Cookie Dialog Monster",
"version": "5.5.3", "version": "5.5.4",
"default_locale": "en", "default_locale": "en",
"description": "__MSG_appDesc__", "description": "__MSG_appDesc__",
"icons": { "icons": {

5
packages/browser-extension/src/popup.html
View File

@ -8,7 +8,7 @@
<script src="/scripts/popup.js"></script> <script src="/scripts/popup.js"></script>
</head> </head>
<body> <body>
<header class="header"> <header>
<h1 class="header-title">Cookie Dialog Monster</h1> <h1 class="header-title">Cookie Dialog Monster</h1>
<div class="header-actions"> <div class="header-actions">
<button aria-label="Reload page" id="reload"> <button aria-label="Reload page" id="reload">
@ -41,7 +41,6 @@
<span class="slider"></span> <span class="slider"></span>
</div> </div>
</label> </label>
<div class="separator"></div>
<div> <div>
<div class="rating"> <div class="rating">
<span data-i18n="reviewText"></span> <span data-i18n="reviewText"></span>
@ -85,7 +84,6 @@
<p data-i18n="negativeText" hidden="true" id="negative"></p> <p data-i18n="negativeText" hidden="true" id="negative"></p>
<p data-i18n="positiveText" hidden="true" id="positive"></p> <p data-i18n="positiveText" hidden="true" id="positive"></p>
</div> </div>
<div class="separator"></div>
<div class="help"> <div class="help">
<span data-i18n="helpText"></span> <span data-i18n="helpText"></span>
<a href="mailto:wanhose.development@gmail.com" target="_blank"> <a href="mailto:wanhose.development@gmail.com" target="_blank">
@ -107,6 +105,7 @@
</div> </div>
</main> </main>
<footer> <footer>
<hr />
<span data-i18n="footerText"></span> <span data-i18n="footerText"></span>
<a href="https://github.com/wanhose" target="_blank">wanhose</a> <a href="https://github.com/wanhose" target="_blank">wanhose</a>
</footer> </footer>

6
packages/browser-extension/src/scripts/background.js
View File

@ -123,9 +123,11 @@ const getData = async (callback) => {
const getTab = (callback) => { const getTab = (callback) => {
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => { chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
const tab = tabs[0];
callback({ callback({
id: tabs[0]?.id, id: tab?.id,
hostname: new URL(tabs[0].url).hostname.split('.').slice(-2).join('.'), hostname: tab ? new URL(tab.url).hostname.split('.').slice(-2).join('.') : undefined,
}); });
}); });
}; };

4
packages/browser-extension/src/scripts/popup.js
View File

@ -37,11 +37,7 @@ const isChromium = chrome.runtime.getURL('').startsWith('chrome-extension://');
const handlePowerChange = () => { const handlePowerChange = () => {
dispatch({ type: 'GET_TAB' }, null, ({ hostname, id }) => { dispatch({ type: 'GET_TAB' }, null, ({ hostname, id }) => {
dispatch({ hostname, type: 'GET_STORE' }, null, ({ enabled }) => { dispatch({ hostname, type: 'GET_STORE' }, null, ({ enabled }) => {
const power = document.getElementById('power');
dispatch({ hostname, state: { enabled: !enabled }, type: 'UPDATE_STORE' }); dispatch({ hostname, state: { enabled: !enabled }, type: 'UPDATE_STORE' });
if (!enabled === false) power.removeAttribute('checked');
if (!enabled === true) power.setAttribute('checked', 'checked');
chrome.tabs.reload(id, { bypassCache: true }); chrome.tabs.reload(id, { bypassCache: true });
}); });
}); });

185
packages/browser-extension/src/styles/globals.css
View File

@ -1,18 +1,27 @@
:root { :root {
--color-chocolate: #47321e;
--color-cookie: #f2e9df;
--color-error: #cc0000; --color-error: #cc0000;
--color-primary: #3dd9eb;
--color-secondary: #34495e;
--color-success: #5cb85c; --color-success: #5cb85c;
--color-tertiary: #6b7280;
--color-white: #ffffff; --color-white: #ffffff;
} }
a { a {
color: var(--color-star); color: inherit;
display: inline-block; display: inline-block;
font-weight: bold;
outline: none;
text-decoration: none;
}
a:focus,
a:hover {
text-decoration: underline;
} }
body { body {
color: var(--color-chocolate); color: var(--color-tertiary);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
font-family: 'Lato', Arial, Helvetica, sans-serif; font-family: 'Lato', Arial, Helvetica, sans-serif;
@ -21,15 +30,48 @@ body {
} }
button { button {
background-color: transparent; outline: none;
border: none;
cursor: pointer;
padding: 0;
margin: 0;
} }
button:focus { footer {
outline: none; font-size: 0.75rem;
margin-top: auto;
padding: 1rem;
text-align: center;
}
header {
align-items: center;
background-color: var(--color-secondary);
color: var(--color-white);
display: flex;
font-size: 1rem;
height: 3rem;
justify-content: space-between;
padding: 0 1rem;
}
hr {
margin-bottom: 1rem;
}
input:checked + .slider {
background-color: var(--color-secondary);
}
input:focus + .slider {
box-shadow: 0 0 0.0625rem var(--color-secondary);
}
input:checked + .slider:before {
transform: translateX(1.25rem);
}
main {
display: flex;
flex-direction: column;
gap: 1.25rem;
padding: 1rem;
} }
span { span {
@ -45,19 +87,6 @@ svg {
width: 1rem; width: 1rem;
} }
/* Header */
.header {
align-items: center;
background-color: var(--color-cookie);
display: flex;
font-size: 1rem;
font-weight: bold;
height: 3rem;
justify-content: space-between;
padding: 0 1rem;
}
.header-actions { .header-actions {
align-items: center; align-items: center;
display: flex; display: flex;
@ -65,43 +94,21 @@ svg {
.header-actions > button { .header-actions > button {
border-radius: 0.125rem; border-radius: 0.125rem;
color: var(--color-chocolate); color: var(--color-white);
padding: 0.25rem; padding: 0.25rem;
transition: 0.4s; transition: 0.4s;
} }
.header-actions > button:focus, .header-actions > button:focus,
.header-actions > button:hover { .header-actions > button:hover {
background-color: var(--color-chocolate); background-color: var(--color-white);
color: var(--color-cookie); color: var(--color-secondary);
} }
.header-title { .header-title {
font-size: 1rem; font-size: 1rem;
font-weight: bold;
margin: 0;
} }
/* Main */
main {
display: flex;
flex-direction: column;
padding: 1rem;
}
/* Footer */
footer {
border-top: 0.0625rem solid var(--color-cookie);
font-size: 0.75rem;
margin-top: auto;
padding: 1rem;
text-align: center;
}
/* Help */
.help { .help {
align-items: center; align-items: center;
display: flex; display: flex;
@ -109,16 +116,16 @@ footer {
} }
.help > a { .help > a {
color: var(--color-secondary);
padding: 0.25rem; padding: 0.25rem;
text-decoration: none;
transition: 0.4s; transition: 0.4s;
} }
.help > a:focus, .help > a:focus,
.help > a:hover { .help > a:hover {
background-color: var(--color-chocolate); background-color: var(--color-secondary);
border-radius: 0.125rem; border-radius: 0.125rem;
color: var(--color-cookie); color: var(--color-white);
outline: none; outline: none;
} }
@ -126,32 +133,6 @@ footer {
font-size: 0.875rem; font-size: 0.875rem;
} }
/* Rating */
#like,
#unlike {
color: var(--color-chocolate);
cursor: pointer;
padding: 0.25rem;
transition: 0.4s;
}
#like:focus,
#like:hover {
color: var(--color-success);
}
#negative,
#positive {
background-color: var(--color-cookie);
border-radius: 0.125rem;
font-size: 0.75rem;
line-height: 1rem;
margin-bottom: 0;
margin-top: 1rem;
padding: 1rem;
}
.rating { .rating {
align-items: center; align-items: center;
display: flex; display: flex;
@ -171,22 +152,6 @@ footer {
margin-left: 1rem; margin-left: 1rem;
} }
#unlike:focus,
#unlike:hover {
color: var(--color-error);
}
/* Separator */
.separator {
border-bottom: 0.0625rem solid var(--color-cookie);
height: 0;
margin-bottom: 1rem;
margin-top: 1rem;
}
/* Switch */
.switch { .switch {
display: inline-block; display: inline-block;
flex-shrink: 0; flex-shrink: 0;
@ -214,7 +179,7 @@ footer {
} }
.slider { .slider {
background-color: var(--color-cookie); background-color: var(--color-tertiary);
bottom: 0; bottom: 0;
cursor: pointer; cursor: pointer;
left: 0; left: 0;
@ -235,14 +200,32 @@ footer {
width: 0.75rem; width: 0.75rem;
} }
input:checked + .slider { #like,
background-color: var(--color-chocolate); #unlike {
color: var(--color-secondary);
cursor: pointer;
padding: 0.25rem;
transition: 0.4s;
} }
input:focus + .slider { #like:focus,
box-shadow: 0 0 0.0625rem var(--color-chocolate); #like:hover {
color: var(--color-success);
} }
input:checked + .slider:before { #negative,
transform: translateX(1.25rem); #positive {
background-color: var(--color-secondary);
border-radius: 0.125rem;
color: var(--color-white);
font-size: 0.75rem;
line-height: 1rem;
margin-bottom: 0;
margin-top: 1rem;
padding: 1rem;
}
#unlike:focus,
#unlike:hover {
color: var(--color-error);
} }

14
packages/browser-extension/src/styles/reset.css
View File

@ -30,8 +30,22 @@ th,
td, td,
caption { caption {
font-weight: normal; font-weight: normal;
margin: 0;
} }
img { img {
border: 0; border: 0;
} }
button {
background-color: transparent;
border: none;
cursor: pointer;
padding: 0;
margin: 0;
}
hr {
margin: 0;
padding: 0;
}