Skip to content

Commit

Permalink
feat(popup): improve popup UI and fix bugs
Browse files Browse the repository at this point in the history
  • Loading branch information
@mitko8009
mitko8009 committed Jan 3, 2025
1 parent 87a64b4 commit 14af491
Show file tree
Hide file tree
Showing 14 changed files with 101 additions and 54 deletions.
Binary file added marketing/Promo Banner.psd
View file
Binary file not shown.
13 changes: 11 additions & 2 deletions src/_locales/bg/messages.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,10 +87,10 @@
"message": "Актуалнa версия"
},
"outdatedVersion": {
"message": "Актуализация е налична"
"message": "Актуализация е налична - %s"
},
"devVersion": {
"message": "Разработчиска версия"
"message": "Разработчиска версия - %s"
},
"customizations": {
"message": "Персонализации"
Expand All @@ -103,5 +103,14 @@
},
"CountdownFooter": {
"message": "Тази статистика НЕ ​​включва ваканции."
},
"githubLabel": {
"message": "GitHub"
},
"instagramLabel": {
"message": "Instagram"
},
"websiteLabel": {
"message": "Официален Уебсайт"
}
}
13 changes: 11 additions & 2 deletions src/_locales/en/messages.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,10 +87,10 @@
"message": "Up to date"
},
"outdatedVersion": {
"message": "Update available"
"message": "Update available - %s"
},
"devVersion": {
"message": "Development version"
"message": "Development version - %s"
},
"customizations": {
"message": "Customizations"
Expand All @@ -103,5 +103,14 @@
},
"CountdownFooter": {
"message": "This statistic does NOT include holidays."
},
"githubLabel": {
"message": "GitHub"
},
"instagramLabel": {
"message": "Instagram"
},
"websiteLabel": {
"message": "Official Website"
}
}
1 change: 1 addition & 0 deletions src/assets/Instagram_Glyph.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/LogoBanner.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/bg.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions src/assets/github-mark.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified src/assets/icon_x128.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified src/assets/icon_x48.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion src/manifest.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"name": "ShkoloTweaks (BETA)",
"short_name": "ShkoloTW",
"description": "__MSG_extDescription__",
"version": "0.5",
"version": "0.6",
"author": "ITPG Web Studios",
"default_locale": "en",
"homepage_url": "https://shkolotweaks.web.app/",
Expand Down
3 changes: 3 additions & 0 deletions src/popup/popup-i18n.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,3 +13,6 @@ $("#rounded").attr("data-tooltip", chrome.i18n.getMessage("roundedLabel"))
$("#cleanup").attr("data-tooltip", chrome.i18n.getMessage("cleanUpLabel"))
$("#blurpfp").attr("data-tooltip", chrome.i18n.getMessage("blurLabel"))
$("#scWidget").attr("data-tooltip", chrome.i18n.getMessage("scLabel"))
$("#github").attr("data-tooltip", chrome.i18n.getMessage("githubLabel"))
$("#instagram").attr("data-tooltip", chrome.i18n.getMessage("instagramLabel"))
$("#website").attr("data-tooltip", chrome.i18n.getMessage("websiteLabel"))
37 changes: 28 additions & 9 deletions src/popup/popup.css
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
html {
background-image: url("../assets/bg.png");
}

html, #theme, .button{
background-color: #141414;
color: #fff;
}

Expand Down Expand Up @@ -33,10 +36,21 @@ body {
pointer-events: none;
}

#main_container {
min-width: 250px;
}

#saveBtn {
transition: .5s;
background-color: #ffffff00;
background-color: #e4e4e427;
box-shadow: 0 0 0 0;
border: #ffffff 3px solid;
}

#saveBtn:hover {
background-color: #e4e4e463;
color: #fff;
box-shadow: 0 0 10px 0 #ffffff;
}

.icon32 {
Expand Down Expand Up @@ -71,7 +85,7 @@ body {
width: 32px;
height: 32px;

background-color: hsl(0, 0%, 22%) !important;
background-color: hsla(0, 0%, 22%, 0.5) !important;
border: hsl(0, 0%, 90%) 1px solid;
border-radius: 8px;
outline: none;
Expand All @@ -81,13 +95,13 @@ body {

.option:hover {
outline: #cccccc 1px solid;
background-color: #444444 !important;
background-color: hsl(0, 0%, 27%, 0.7) !important;
filter: brightness(1.1);
}

.option.active {
outline: hsl(0, 0%, 90%) 1px solid;
background-color: #616161 !important;
background-color: hsl(0, 0%, 38%, 0.8) !important;
filter: brightness(1.2);
}

Expand Down Expand Up @@ -116,6 +130,10 @@ body {
transition: 200ms;
}

.button:hover {
color: hsl(0, 0%, 80%);
}

.warning {
color: rgb(185, 167, 0) !important;
font-size: smaller;
Expand All @@ -140,10 +158,6 @@ body {
color: #fff;
}

.button:hover {
color: hsl(0, 0%, 80%);
}

.checkbox:hover, .radio:hover {
color: #cccccc;
}
Expand Down Expand Up @@ -200,3 +214,8 @@ body {
.dev_flag:hover {
color: #cccccc;
}

#version {
font-size: 1.2em;
font-weight: bold;
}
13 changes: 9 additions & 4 deletions src/popup/popup.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,14 +22,14 @@
<div id="custom-themes" class="options-row" style="margin-top: 8px;"></div>
</div>

<div class="grid-container">
<div class="grid-container" id="main_container"> <!-- Main Container -->
<div class="container" id="header"> <!-- Header -->
<h1 class="title"><img src="../assets/icon_x128.png" style="height: 48px; margin-bottom: -10px; margin-right: 6px;">Shkolo Tweaks</h1>
<h1 class="title"><img src="../assets/LogoBanner.png" style="height: 100px; margin-bottom: -16px; margin-right: 6px; margin-top: -16px;"></h1>
<a class="button" id="shkoloBtn" href="https://app.shkolo.bg/dashboard" target="_blank"></a>
</div>
<div class="container"> <!-- Customizations -->
<div class="container-m1" style="display: grid; justify-content: center; align-items: center; text-align: center; gap: 8px;">
<label id="customizations" style="font-size: 1.1em; margin-bottom: -2px;"></label>
<div class="container-m1" style="display: grid; justify-content: center; align-items: center; text-align: center; gap: 8px; margin-right: -16px;">
<label id="customizations" style="font-size: 1.3em; margin-bottom: -2px; font-weight: bold;"></label>
<div class="options-row">
<a type="button" class="option" id="rounded" aria-pressed="false"><img src="../assets/rounded.svg" class="icon32"></a>
<a type="button" class="option" id="cleanup" aria-pressed="false"><img src="../assets/clean.svg" class="icon32"></a>
Expand All @@ -42,6 +42,11 @@ <h1 class="title"><img src="../assets/icon_x128.png" style="height: 48px; margin
</div>
</div>
<a class="button" id="saveBtn"></a>
<div style="display: grid; justify-content: center; align-items: center; text-align: center; gap: 8px; margin-right: -16px; grid-template-columns: 1fr 1fr 1fr 1fr 1fr;">
<a id="github" type="button" class="option" href="https://github.com/mitko8009/ShkoloTweaks" target="_blank"><img src="../assets/github-mark.svg" class="icon32"></a>
<a id="instagram" type="button" class="option" href="https://www.instagram.com/mitko8009_/" target="_blank" ><img src="../assets/Instagram_Glyph.svg" class="icon32"></a>
<a id="website" type="button" class="option" href="https://shkolotweaks.xyz/" target="_blank"><img src="../assets/icon_x48.png" class="icon32"></a>
</div>
<label id="version"></label>

</div>
Expand Down
72 changes: 36 additions & 36 deletions src/popup/popup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ function saveData() {
scheduleWidget: $("#scWidget").attr("aria-pressed") === "true"
}

$("#saveBtn").css("background", "none").css("box-shadow", "0 0 0 0");
// $("#saveBtn").css("background", "none").css("box-shadow", "0 0 0 0");
chrome.storage.sync.set(prefs)
refreshPage()
}
Expand Down Expand Up @@ -62,49 +62,49 @@ function checkForUpdates() {
.then(response => response.json())
.then(data => {
if (version < data.version) {
label_version.innerHTML = `v${version} (${chrome.i18n.getMessage("outdatedVersion")})`
label_version.innerHTML = `v${version} (${chrome.i18n.getMessage("outdatedVersion").replace("%s", data.version)})`
} else if (version > data.version) {
label_version.innerHTML = `v${version} (${chrome.i18n.getMessage("devVersion")})`
label_version.innerHTML = `v${version} (${chrome.i18n.getMessage("devVersion").replace("%s", data.version)})`
} else {
label_version.innerHTML = `v${version} (${chrome.i18n.getMessage("latestVersion")})`
}
});
}
setTimeout(() => { checkForUpdates() }, 5000);
checkForUpdates();

// Developer Panel
function refreshDevPanel() {
chrome.storage.sync.get(["flags"], (result) => {
console.log(result)
const flags = result.flags
$("#dev_flags").empty()
for (const flag in flags) {
$("#dev_flags").append(`<div class="dev_flag${flags[flag].value?"active":""}" data-flag="${flags[flag].flag}">${flags[flag].display}</div>`)
}
});

// $("#dev_flags").append(`<div class="dev_flag" data-flag="test" id="test">Test</div>`)
// $("#dev_flag").click(() => { console.log("Clicked!"); })
// document.getElementById("#dev_flags").append(`<div class="dev_flag" data-flag="test">Test</div>`)

// $(".dev_flag").click(function() {
// console.log("Clicked: "+$(this).attr("data-flag"))
// const flag = $(this).attr("data-flag")
// chrome.storage.sync.get(["flags"], (result) => {
// const flags = result.flags
// flags[flag].value = !flags[flag].value
// chrome.storage.sync.set({flags: flags})
// console.log(flags)
// });
// });
}

$(label_version).click(() => {
checkForUpdates();
refreshDevPanel();
$("#dev_panel").css("opacity", 0).show().animate({opacity: 1}, 200);
});
$("#close_dev_panel").click(() => { $("#dev_panel").animate({opacity: 0}, 200, function() { $(this).hide(); }); });
// function refreshDevPanel() {
// chrome.storage.sync.get(["flags"], (result) => {
// console.log(result)
// const flags = result.flags
// $("#dev_flags").empty()
// for (const flag in flags) {
// $("#dev_flags").append(`<div class="dev_flag${flags[flag].value?"active":""}" data-flag="${flags[flag].flag}">${flags[flag].display}</div>`)
// }
// });

// // $("#dev_flags").append(`<div class="dev_flag" data-flag="test" id="test">Test</div>`)
// // $("#dev_flag").click(() => { console.log("Clicked!"); })
// // document.getElementById("#dev_flags").append(`<div class="dev_flag" data-flag="test">Test</div>`)

// // $(".dev_flag").click(function() {
// // console.log("Clicked: "+$(this).attr("data-flag"))
// // const flag = $(this).attr("data-flag")
// // chrome.storage.sync.get(["flags"], (result) => {
// // const flags = result.flags
// // flags[flag].value = !flags[flag].value
// // chrome.storage.sync.set({flags: flags})
// // console.log(flags)
// // });
// // });
// }

// $(label_version).click(() => {
// checkForUpdates();
// refreshDevPanel();
// $("#dev_panel").css("opacity", 0).show().animate({opacity: 1}, 200);
// });
// $("#close_dev_panel").click(() => { $("#dev_panel").animate({opacity: 0}, 200, function() { $(this).hide(); }); });
// $("#logging").click(function() {
// chrome.storage.sync.get(["logging"], (result) => {
// const logging = result.logging
Expand Down

0 comments on commit 14af491

Please sign in to comment.