refactor(browser-extension): popup layout
This commit is contained in:
wanhose
parent
35743a4853
commit
7bf55ed4a9
@ -12,99 +12,82 @@
|
||||
<h1 class="header-title">Cookie Dialog Monster</h1>
|
||||
</header>
|
||||
<main>
|
||||
<label class="switch-label">
|
||||
<span>
|
||||
<span data-i18n="toggleText"></span>
|
||||
<strong id="host"></strong>
|
||||
</span>
|
||||
<div class="switch">
|
||||
<input checked="checked" id="power" type="checkbox" />
|
||||
<span class="slider"></span>
|
||||
</div>
|
||||
</label>
|
||||
<div>
|
||||
<div class="rating">
|
||||
<span data-i18n="reviewText"></span>
|
||||
<div class="rating-actions">
|
||||
<button aria-label="Unlike" id="unlike">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path
|
||||
d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<button aria-label="Like" id="like">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path
|
||||
d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<p data-i18n="negativeText" hidden="true" id="negative"></p>
|
||||
<p data-i18n="positiveText" hidden="true" id="positive"></p>
|
||||
</div>
|
||||
<div class="contribute">
|
||||
<span data-i18n="contributeText"></span>
|
||||
<a href="https://www.github.com/wanhose/cookie-dialog-monster" target="_blank">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<circle cx="18" cy="18" r="3" />
|
||||
<circle cx="6" cy="6" r="3" />
|
||||
<path d="M13 6h3a2 2 0 0 1 2 2v7" />
|
||||
<line x1="6" y1="9" x2="6" y2="21" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<div class="help">
|
||||
<span data-i18n="helpText"></span>
|
||||
<a href="mailto:hello@wanhose.dev" target="_blank">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<line x1="22" y1="2" x2="11" y2="13" />
|
||||
<polygon points="22 2 15 22 11 13 2 9 22 2" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<popup-button id="power-option" role="button" tabindex="0">
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="none"
|
||||
height="32"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
width="32"
|
||||
>
|
||||
<path d="M18.36 6.64a9 9 0 1 1-12.73 0" />
|
||||
<line x1="12" y1="2" x2="12" y2="12" />
|
||||
</svg>
|
||||
<span id="host"></span>
|
||||
</popup-button>
|
||||
<popup-button data-href="mailto:hello@wanhose.dev" id="help-option" role="link" tabindex="0">
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="none"
|
||||
height="32"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
width="32"
|
||||
>
|
||||
<path
|
||||
d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"
|
||||
/>
|
||||
</svg>
|
||||
<span data-i18n="popup_helpOption"></span>
|
||||
</popup-button>
|
||||
<popup-button
|
||||
data-href="https://www.github.com/wanhose/cookie-dialog-monster"
|
||||
id="contribute-option"
|
||||
role="link"
|
||||
tabindex="0"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="none"
|
||||
height="32"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
width="32"
|
||||
>
|
||||
<path
|
||||
d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"
|
||||
/>
|
||||
</svg>
|
||||
<span data-i18n="popup_contributeOption"></span>
|
||||
</popup-button>
|
||||
<popup-button data-href="#" id="rate-option" role="link" tabindex="0">
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="none"
|
||||
height="32"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
width="32"
|
||||
>
|
||||
<polygon
|
||||
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
|
||||
/>
|
||||
</svg>
|
||||
<span data-i18n="popup_rateOption"></span>
|
||||
</popup-button>
|
||||
</main>
|
||||
<footer></footer>
|
||||
</body>
|
||||
|
||||
@ -24,7 +24,7 @@ const edgeUrl =
|
||||
* @type {string}
|
||||
*/
|
||||
|
||||
const firefoxUrl = 'https://addons.mozilla.org/es/firefox/addon/cookie-dialog-monster/';
|
||||
const firefoxUrl = 'https://addons.mozilla.org/firefox/addon/cookie-dialog-monster';
|
||||
|
||||
/**
|
||||
* @description Current hostname
|
||||
@ -77,57 +77,53 @@ const handleContentLoaded = async () => {
|
||||
const host = document.getElementById('host');
|
||||
host.innerText = hostname ?? 'unknown';
|
||||
|
||||
const like = document.getElementById('like');
|
||||
like.addEventListener('click', handleRate);
|
||||
const contribute = document.getElementById('contribute-option');
|
||||
contribute?.addEventListener('click', handleLinkRedirect);
|
||||
|
||||
const power = document.getElementById('power');
|
||||
power.addEventListener('change', handlePowerChange);
|
||||
if (!state.enabled) power.removeAttribute('checked');
|
||||
const help = document.getElementById('help-option');
|
||||
help?.addEventListener('click', handleLinkRedirect);
|
||||
|
||||
const store = document.getElementById('store');
|
||||
if (isEdge) store?.setAttribute('href', edgeUrl);
|
||||
else if (isChromium) store?.setAttribute('href', chromeUrl);
|
||||
else if (isFirefox) store?.setAttribute('href', firefoxUrl);
|
||||
const power = document.getElementById('power-option');
|
||||
power?.addEventListener('click', handlePowerToggle);
|
||||
if (state.enabled) power?.setAttribute('data-value', 'on');
|
||||
else power?.setAttribute('data-value', 'off');
|
||||
|
||||
const unlike = document.getElementById('unlike');
|
||||
unlike.addEventListener('click', handleRate);
|
||||
const rate = document.getElementById('rate-option');
|
||||
rate?.addEventListener('click', handleLinkRedirect);
|
||||
if (isEdge) rate?.setAttribute('data-href', edgeUrl);
|
||||
else if (isChromium) rate?.setAttribute('data-href', chromeUrl);
|
||||
else if (isFirefox) rate?.setAttribute('data-href', firefoxUrl);
|
||||
|
||||
translate();
|
||||
};
|
||||
|
||||
/**
|
||||
* @description Disables or enables extension on current page
|
||||
*/
|
||||
|
||||
const handlePowerChange = async () => {
|
||||
state = { enabled: !state.enabled };
|
||||
dispatch({ hostname, state, type: 'UPDATE_STATE' });
|
||||
await chrome.tabs.reload({ bypassCache: true });
|
||||
};
|
||||
|
||||
/**
|
||||
* @description Shows negative or positive messages
|
||||
* @async
|
||||
* @description Opens a new tab
|
||||
* @param {MouseEvent} event
|
||||
*/
|
||||
|
||||
const handleRate = (event) => {
|
||||
const negative = document.getElementById('negative');
|
||||
const positive = document.getElementById('positive');
|
||||
const handleLinkRedirect = async (event) => {
|
||||
const { href } = event.currentTarget.dataset;
|
||||
|
||||
switch (event.currentTarget.id) {
|
||||
case 'unlike':
|
||||
positive.setAttribute('hidden', 'true');
|
||||
negative.removeAttribute('hidden');
|
||||
break;
|
||||
case 'like':
|
||||
negative.setAttribute('hidden', 'true');
|
||||
positive.removeAttribute('hidden');
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
if (href) {
|
||||
await chrome.tabs.create({ url: href });
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @description Disables or enables extension on current page
|
||||
* @param {MouseEvent} event
|
||||
*/
|
||||
|
||||
const handlePowerToggle = async (event) => {
|
||||
state = { enabled: !state.enabled };
|
||||
dispatch({ hostname, state, type: 'UPDATE_STATE' });
|
||||
if (state.enabled) event.currentTarget.setAttribute('data-value', 'on');
|
||||
else event.currentTarget.setAttribute('data-value', 'off');
|
||||
await chrome.tabs.reload({ bypassCache: true });
|
||||
};
|
||||
|
||||
/**
|
||||
* @description Applies translations to tags with i18n data attribute
|
||||
*/
|
||||
|
||||
@ -4,39 +4,27 @@
|
||||
--color-secondary: #34495e;
|
||||
--color-success: #5cb85c;
|
||||
--color-tertiary: #6b7280;
|
||||
--color-warning: #ffdf00;
|
||||
--color-white: #ffffff;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
outline: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:focus,
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
body {
|
||||
box-sizing: border-box;
|
||||
color: var(--color-tertiary);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: Inter, Arial, Helvetica, sans-serif;
|
||||
height: 24rem;
|
||||
width: 20rem;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
button {
|
||||
outline: none;
|
||||
body * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
footer {
|
||||
background-color: var(--color-secondary);
|
||||
font-size: 0.75rem;
|
||||
height: 0.25rem;
|
||||
font-size: 12px;
|
||||
height: 4px;
|
||||
margin-top: auto;
|
||||
text-align: center;
|
||||
}
|
||||
@ -46,181 +34,72 @@ header {
|
||||
background-color: var(--color-secondary);
|
||||
color: var(--color-white);
|
||||
display: flex;
|
||||
font-size: 1rem;
|
||||
height: 3rem;
|
||||
font-size: 16px !important;
|
||||
height: 48px;
|
||||
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);
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.25rem;
|
||||
padding: 1rem;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 16px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
popup-button {
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
display: grid;
|
||||
font-size: 14px;
|
||||
gap: 16px;
|
||||
grid-template-rows: repeat(2, 1fr);
|
||||
height: 136px;
|
||||
justify-items: center;
|
||||
outline: none;
|
||||
padding: 8px;
|
||||
text-align: center;
|
||||
transition: 0.4s;
|
||||
width: 100%;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
popup-button:focus,
|
||||
popup-button:hover {
|
||||
box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
|
||||
}
|
||||
|
||||
popup-button > span {
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
popup-button > svg {
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.header-actions > button {
|
||||
border-radius: 0.125rem;
|
||||
#power-option {
|
||||
color: var(--color-white);
|
||||
padding: 0.25rem;
|
||||
transition: 0.4s;
|
||||
}
|
||||
|
||||
.header-actions > button:focus,
|
||||
.header-actions > button:hover {
|
||||
background-color: var(--color-white);
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.contribute,
|
||||
.help {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
font-size: 0.875rem;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.contribute > a,
|
||||
.help > a {
|
||||
color: var(--color-secondary);
|
||||
padding: 0.25rem;
|
||||
transition: 0.4s;
|
||||
}
|
||||
|
||||
.contribute > a:focus,
|
||||
.contribute > a:hover,
|
||||
.help > a:focus,
|
||||
.help > a:hover {
|
||||
background-color: var(--color-secondary);
|
||||
border-radius: 0.125rem;
|
||||
color: var(--color-white);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.rating {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
font-size: 0.875rem;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.rating-actions {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.rating-actions > button {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.switch {
|
||||
display: inline-block;
|
||||
flex-shrink: 0;
|
||||
height: 1.25rem;
|
||||
margin-left: 0.75rem;
|
||||
position: relative;
|
||||
width: 2.5rem;
|
||||
}
|
||||
|
||||
.switch input {
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.switch-label {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
font-size: 0.875rem;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.switch-label > span {
|
||||
line-height: 1.25rem;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.slider {
|
||||
background-color: var(--color-tertiary);
|
||||
bottom: 0;
|
||||
cursor: pointer;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
#power-option[data-value='off'] {
|
||||
background-color: var(--color-error);
|
||||
}
|
||||
|
||||
#power-option[data-value='on'] {
|
||||
background-color: var(--color-success);
|
||||
}
|
||||
|
||||
#rate-option > svg {
|
||||
transition: 0.4s;
|
||||
}
|
||||
|
||||
.slider:before {
|
||||
background-color: var(--color-white);
|
||||
bottom: 0.25rem;
|
||||
content: '';
|
||||
height: 0.75rem;
|
||||
left: 0.25rem;
|
||||
position: absolute;
|
||||
transition: 0.4s;
|
||||
width: 0.75rem;
|
||||
}
|
||||
|
||||
#like,
|
||||
#unlike {
|
||||
color: var(--color-secondary);
|
||||
cursor: pointer;
|
||||
padding: 0.25rem;
|
||||
transition: 0.4s;
|
||||
}
|
||||
|
||||
#like:focus,
|
||||
#like:hover {
|
||||
color: var(--color-success);
|
||||
}
|
||||
|
||||
#negative,
|
||||
#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);
|
||||
#rate-option:focus > svg,
|
||||
#rate-option:hover > svg {
|
||||
color: var(--color-warning);
|
||||
fill: var(--color-warning);
|
||||
}
|
||||
|
||||
@ -29,6 +29,7 @@ h6,
|
||||
th,
|
||||
td,
|
||||
caption {
|
||||
font-size: inherit;
|
||||
font-weight: normal;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user