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

feat(browser-extension): add loader now that we have more queries

Browse Source
This commit is contained in:
wanhose 2024-11-11 13:34:48 +01:00
parent 3e539e9e1c
commit b1f09ce11f
3 changed files with 43 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -121,7 +121,7 @@
</svg> </svg>
</a> </a>
</p> </p>
<div class="content"> <div class="grid">
<button class="popup-button" disabled id="power-option"> <button class="popup-button" disabled id="power-option">
<svg <svg
aria-hidden="true" aria-hidden="true"
@ -329,6 +329,9 @@
<div class="report-issue-button" data-i18n="contextMenu_issueOption"></div> <div class="report-issue-button" data-i18n="contextMenu_issueOption"></div>
</div> </div>
</div> </div>
<div id="loader">
<span></span>
</div>
</main> </main>
<footer></footer> <footer></footer>
</body> </body>

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

@ -134,6 +134,9 @@ async function handleContentLoaded() {
updateBannerUrl.href += `/tag/${latestVersion}`; updateBannerUrl.href += `/tag/${latestVersion}`;
} }
const loader = document.getElementById('loader');
loader.style.setProperty('display', 'none');
if (exclusions?.domains.some((x) => url.hostname.match(x.replaceAll(/\*/g, '[^ ]*')))) { if (exclusions?.domains.some((x) => url.hostname.match(x.replaceAll(/\*/g, '[^ ]*')))) {
const supportBanner = document.getElementById('support-banner'); const supportBanner = document.getElementById('support-banner');
supportBanner.removeAttribute('aria-hidden'); supportBanner.removeAttribute('aria-hidden');

40
packages/browser-extension/src/styles/popup.css
View File

@ -64,7 +64,7 @@ header {
} }
} }
main > .banner { .banner {
font-size: 14px; font-size: 14px;
line-height: 18px; line-height: 18px;
margin: 0px; margin: 0px;
@ -96,7 +96,7 @@ main > .banner {
} }
} }
main > .content { .grid {
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
gap: 16px; gap: 16px;
@ -404,8 +404,36 @@ main > .content {
} }
} }
#refresh-database-check { #loader {
display: none; align-items: center;
background-color: var(--color-white);
bottom: 0px;
display: flex;
justify-content: center;
left: 0px;
position: fixed;
right: 0px;
top: 0px;
& > span {
animation: rotation 1s linear infinite;
border-bottom-color: var(--color-primary) !important;
border-radius: 50%;
border: 6px solid var(--color-secondary);
box-sizing: border-box;
display: inline-block;
height: 48px;
width: 48px;
}
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
} }
#power-option { #power-option {
@ -430,3 +458,7 @@ main > .content {
color: var(--color-warning); color: var(--color-warning);
fill: var(--color-warning); fill: var(--color-warning);
} }
#refresh-database-check {
display: none;
}