Skip to content

Commit 359e700

Browse files
rgantzosrgantzos
committed
Trending features
1 parent d41a0f2 commit 359e700

3 files changed

Lines changed: 131 additions & 75 deletions

File tree

‎extras/popup/popup.css‎

Lines changed: 29 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");
22

33
html {
4-
--radius: .5rem;
4+
--radius: 0.5rem;
55
width: 400px;
66
font-family: "Inter", sans-serif;
77
height: 500px;
@@ -55,7 +55,7 @@ a {
5555
margin: 2em;
5656
margin-bottom: 1rem;
5757
background: var(--feature-bg);
58-
border-radius: .5rem;
58+
border-radius: 0.5rem;
5959
padding: 17px;
6060
padding-top: 5px;
6161
position: relative;
@@ -345,22 +345,22 @@ input:checked + .slider:before {
345345
.feature span.new-feature-tag {
346346
background-color: var(--theme);
347347
color: white;
348-
padding: .25rem;
348+
padding: 0.25rem;
349349
display: inline-block;
350-
margin-left: .5rem;
351-
padding-left: .5rem;
352-
padding-right: .5rem;
353-
border-radius: .75rem;
350+
margin-left: 0.5rem;
351+
padding-left: 0.5rem;
352+
padding-right: 0.5rem;
353+
border-radius: 0.75rem;
354354
position: relative;
355-
top: -.15rem;
355+
top: -0.15rem;
356356
user-select: none;
357-
transition: opacity .3s, transform .3s;
357+
transition: opacity 0.3s, transform 0.3s;
358358
opacity: 1;
359359
transform: none;
360360
}
361361

362362
.feature span.new-feature-tag:hover {
363-
opacity: .75;
363+
opacity: 0.75;
364364
transform: scale(105%);
365365
}
366366

@@ -380,11 +380,11 @@ span.new-feature-tag.beta {
380380
.warning-component {
381381
background-color: #fc8c4f20;
382382
border: 1.5px solid #fc8c4f;
383-
border-radius: .5rem;
384-
padding: .5rem;
385-
font-size: .8rem;
383+
border-radius: 0.5rem;
384+
padding: 0.5rem;
385+
font-size: 0.8rem;
386386
font-weight: 600;
387-
margin-top: .5rem;
387+
margin-bottom: 0.5rem;
388388
display: flex;
389389
align-items: center;
390390
border-bottom-width: 3px;
@@ -402,10 +402,10 @@ span.new-feature-tag.beta {
402402
.info-component {
403403
background-color: #fcd44f20;
404404
border: 1.5px solid #fcd44f;
405-
border-radius: .5rem;
406-
padding: .5rem;
407-
font-size: .8rem;
408-
margin-top: .5rem;
405+
border-radius: 0.5rem;
406+
padding: 0.5rem;
407+
font-size: 0.8rem;
408+
margin-bottom: 0.5rem;
409409
display: flex;
410410
align-items: center;
411411
border-bottom-width: 3px;
@@ -418,4 +418,14 @@ span.new-feature-tag.beta {
418418
margin-right: 0.5rem;
419419
margin-inline-end: 10px;
420420
transform: scale(1.15);
421-
}
421+
}
422+
423+
.feature h3 .icon svg {
424+
height: 1rem;
425+
width: 1rem;
426+
margin-right: 1.5rem;
427+
position: relative;
428+
left: 0.6rem;
429+
transform: scale(1.5);
430+
top: 0.1rem;
431+
}

‎extras/popup/popup.js‎

Lines changed: 35 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -762,6 +762,8 @@ async function getFeatures() {
762762
}
763763
}
764764

765+
div.appendChild(generateComponents(feature.components || []));
766+
765767
var span = document.createElement("span");
766768
span.textContent =
767769
(chrome.i18n.getMessage("creditsText") || "Credits") + ": ";
@@ -801,8 +803,6 @@ async function getFeatures() {
801803
});
802804
div.appendChild(span);
803805

804-
div.appendChild(generateComponents(feature.components || []));
805-
806806
if (
807807
feature.versionAdded?.replace("v", "") ===
808808
chrome.runtime.getManifest().version.toString()
@@ -835,6 +835,7 @@ async function getFeatures() {
835835
document.querySelector(".settings").appendChild(div);
836836
}
837837
}
838+
getTrending()
838839
}
839840
getFeatures();
840841

@@ -1293,22 +1294,48 @@ function generateComponents(components) {
12931294
value = true;
12941295
}
12951296
}
1297+
if (cond.type === "version") {
1298+
if (cond.value === chrome.runtime.getManifest().version) {
1299+
value = true;
1300+
}
1301+
}
12961302
conditions.push(value);
12971303
});
12981304

12991305
if (el.if.type === "any") {
1300-
if (!!conditions.find((cond) => cond)) {
1301-
div.appendChild(element);
1306+
if (!conditions.find((cond) => cond)) {
1307+
div.style.display = "none"
13021308
}
13031309
} else if (el.if.type === "all") {
1304-
if (conditions.find((cond) => !cond) === undefined) {
1305-
div.appendChild(element);
1310+
if (conditions.find((cond) => !cond) !== undefined) {
1311+
div.style.display = "none"
13061312
}
13071313
}
1308-
} else {
1309-
div.appendChild(element);
13101314
}
1315+
div.appendChild(element);
13111316
});
13121317

13131318
return div;
13141319
}
1320+
1321+
async function getTrending() {
1322+
let data = await (await fetch("https://data.scratchtools.app/trending/")).json()
1323+
1324+
data.forEach(function(el) {
1325+
if (!document.querySelector(`div.feature[data-id='${el}']`)) return;
1326+
1327+
let icon = document.createElement("span")
1328+
icon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="m122-218-67-67 321-319 167 167 203-205H628v-95h278v278h-94v-115L542-303 375-470 122-218Z" fill="var(--theme)"/></svg>'
1329+
icon.className = "icon"
1330+
1331+
icon.addEventListener("click", function () {
1332+
ScratchTools.modals.create({
1333+
title: "Trending feature",
1334+
description:
1335+
"This feature is especially popular among ScratchTools users. Try it out!",
1336+
});
1337+
});
1338+
1339+
document.querySelector(`div.feature[data-id='${el}'] > h3`).prepend(icon)
1340+
})
1341+
}

‎extras/style.css‎

Lines changed: 67 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -25,11 +25,13 @@ a {
2525
cursor: pointer;
2626
}
2727

28-
.more-settings-btn svg, .feedback-btn svg, .support-btn svg {
28+
.more-settings-btn svg,
29+
.feedback-btn svg,
30+
.support-btn svg {
2931
height: 1rem;
3032
position: relative;
3133
top: 0.2rem;
32-
margin-right: .5rem;
34+
margin-right: 0.5rem;
3335
width: 1rem;
3436
}
3537

@@ -83,7 +85,7 @@ a {
8385
padding-left: 1.5rem !important;
8486
padding-right: 1.5rem !important;
8587
color: var(--primary-color);
86-
border-radius: .5rem;
88+
border-radius: 0.5rem;
8789
padding: 1rem;
8890
padding-top: 5px;
8991
margin-bottom: 0px;
@@ -322,7 +324,7 @@ a {
322324
.section1 .note {
323325
color: rgba(0, 0, 0, 0.8);
324326
padding: 2em;
325-
border-radius: .5rem;
327+
border-radius: 0.5rem;
326328
margin-top: 1rem;
327329
}
328330
.section1 .note.yellow {
@@ -491,7 +493,7 @@ button.secondary-btn {
491493
position: relative;
492494
top: 3.1rem;
493495
border-left: 2px solid var(--searchbar-bg);
494-
margin-left: 0.5rem;
496+
margin-left: 0.5rem;
495497
}
496498

497499
.buttons button {
@@ -618,36 +620,36 @@ body[data-filter="Egg"] .feature[data-type*="Egg"] {
618620
}
619621

620622
.feedback-btn,
621-
.more-settings-btn, .support-btn {
623+
.more-settings-btn,
624+
.support-btn {
622625
right: 1rem;
623626
left: inherit;
624627
}
625628
}
626629

627-
628-
.themes-div .dropdown{
630+
.themes-div .dropdown {
629631
position: relative;
630-
display: inline-block;
631-
margin-left: 1rem;
632-
margin-right: 1rem;
633-
height: max-content;
634-
width: 12.5rem;
635-
box-sizing: border-box;
636-
background: var(--theme);
637-
float: right;
638-
margin-top: 3.8em;
639-
right: -4.5em;
640-
border-radius: 0 0 var(--radius) var(--radius);
641-
overflow: hidden;
642-
border: 1.5px solid rgba(0,0,0,0.1);
643-
border-top: none;
644-
box-shadow: 0px 10px 20px -15px rgba(0, 0, 0, 0.5);
645-
}
646-
647-
.themes-div .dropdown .item{
632+
display: inline-block;
633+
margin-left: 1rem;
634+
margin-right: 1rem;
635+
height: max-content;
636+
width: 12.5rem;
637+
box-sizing: border-box;
638+
background: var(--theme);
639+
float: right;
640+
margin-top: 3.8em;
641+
right: -4.5em;
642+
border-radius: 0 0 var(--radius) var(--radius);
643+
overflow: hidden;
644+
border: 1.5px solid rgba(0, 0, 0, 0.1);
645+
border-top: none;
646+
box-shadow: 0px 10px 20px -15px rgba(0, 0, 0, 0.5);
647+
}
648+
649+
.themes-div .dropdown .item {
648650
height: 2.5rem;
649651
width: 12.5rem;
650-
color:white;
652+
color: white;
651653
font-size: 1rem;
652654
background: var(--theme);
653655
padding: 0.5rem;
@@ -658,7 +660,7 @@ body[data-filter="Egg"] .feature[data-type*="Egg"] {
658660
align-items: center;
659661
padding: 0.5em;
660662
}
661-
.themes-div .dropdown .item .circle{
663+
.themes-div .dropdown .item .circle {
662664
height: 1.5rem;
663665
width: 1.5rem;
664666
border-radius: 50%;
@@ -669,12 +671,12 @@ body[data-filter="Egg"] .feature[data-type*="Egg"] {
669671
margin-left: 0.5rem; */
670672
}
671673

672-
.themes-div .dropdown .item#text{
674+
.themes-div .dropdown .item#text {
673675
float: left;
674676
margin-top: 0.5rem;
675677
}
676-
.themes-div .dropdown .item:hover{
677-
background:color-mix(in srgb, var(--theme) 95%, black);
678+
.themes-div .dropdown .item:hover {
679+
background: color-mix(in srgb, var(--theme) 95%, black);
678680
}
679681

680682
.feedback-btn .notification {
@@ -693,23 +695,23 @@ body[data-filter="Egg"] .feature[data-type*="Egg"] {
693695
.feature span.new-feature-tag {
694696
background-color: var(--theme);
695697
color: white;
696-
padding: .25rem;
698+
padding: 0.25rem;
697699
display: inline-block;
698-
margin-left: .5rem;
699-
padding-left: .5rem;
700-
padding-right: .5rem;
701-
border-radius: .75rem;
700+
margin-left: 0.5rem;
701+
padding-left: 0.5rem;
702+
padding-right: 0.5rem;
703+
border-radius: 0.75rem;
702704
position: relative;
703-
top: -.15rem;
705+
top: -0.15rem;
704706
line-height: normal;
705707
user-select: none;
706-
transition: opacity .3s, transform .3s;
708+
transition: opacity 0.3s, transform 0.3s;
707709
opacity: 1;
708710
transform: none;
709711
}
710712

711713
.feature span.new-feature-tag:hover {
712-
opacity: .75;
714+
opacity: 0.75;
713715
transform: scale(105%);
714716
}
715717

@@ -725,11 +727,11 @@ span.new-feature-tag.beta {
725727
.warning-component {
726728
background-color: #fc8c4f20;
727729
border: 1.5px solid #fc8c4f;
728-
border-radius: .5rem;
729-
padding: .5rem;
730-
font-size: .8rem;
730+
border-radius: 0.5rem;
731+
padding: 0.5rem;
732+
font-size: 0.8rem;
731733
font-weight: 600;
732-
margin-top: .5rem;
734+
margin-bottom: 0.5rem;
733735
display: flex;
734736
align-items: center;
735737
border-bottom-width: 3px;
@@ -747,10 +749,10 @@ span.new-feature-tag.beta {
747749
.info-component {
748750
background-color: #fcd44f20;
749751
border: 1.5px solid #fcd44f;
750-
border-radius: .5rem;
751-
padding: .5rem;
752-
font-size: .8rem;
753-
margin-top: .5rem;
752+
border-radius: 0.5rem;
753+
padding: 0.5rem;
754+
font-size: 0.8rem;
755+
margin-bottom: 0.5rem;
754756
display: flex;
755757
align-items: center;
756758
border-bottom-width: 3px;
@@ -763,4 +765,21 @@ span.new-feature-tag.beta {
763765
margin-right: 0.5rem;
764766
margin-inline-end: 10px;
765767
transform: scale(1.15);
766-
}
768+
}
769+
770+
.feature h3 .icon svg {
771+
height: 1rem;
772+
width: 1rem;
773+
margin-right: 1.5rem;
774+
position: relative;
775+
left: 0.6rem;
776+
transform: scale(1.5);
777+
top: 0.1rem;
778+
transition: transform 0.3s, opacity 0.3s;
779+
}
780+
781+
.feature h3 .icon svg:hover {
782+
opacity: 0.75;
783+
transform: scale(1.8);
784+
cursor: pointer;
785+
}

0 commit comments

Comments
 (0)