Skip to content

Commit

Permalink
Trending features
Browse files Browse the repository at this point in the history
  • Loading branch information
@rgantzos
rgantzos committed Aug 25, 2023
1 parent d41a0f2 commit 359e700
Show file tree
Hide file tree
Showing 3 changed files with 131 additions and 75 deletions.
48 changes: 29 additions & 19 deletions extras/popup/popup.css
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");

html {
--radius: .5rem;
--radius: 0.5rem;
width: 400px;
font-family: "Inter", sans-serif;
height: 500px;
Expand Down Expand Up @@ -55,7 +55,7 @@ a {
margin: 2em;
margin-bottom: 1rem;
background: var(--feature-bg);
border-radius: .5rem;
border-radius: 0.5rem;
padding: 17px;
padding-top: 5px;
position: relative;
Expand Down Expand Up @@ -345,22 +345,22 @@ input:checked + .slider:before {
.feature span.new-feature-tag {
background-color: var(--theme);
color: white;
padding: .25rem;
padding: 0.25rem;
display: inline-block;
margin-left: .5rem;
padding-left: .5rem;
padding-right: .5rem;
border-radius: .75rem;
margin-left: 0.5rem;
padding-left: 0.5rem;
padding-right: 0.5rem;
border-radius: 0.75rem;
position: relative;
top: -.15rem;
top: -0.15rem;
user-select: none;
transition: opacity .3s, transform .3s;
transition: opacity 0.3s, transform 0.3s;
opacity: 1;
transform: none;
}

.feature span.new-feature-tag:hover {
opacity: .75;
opacity: 0.75;
transform: scale(105%);
}

Expand All @@ -380,11 +380,11 @@ span.new-feature-tag.beta {
.warning-component {
background-color: #fc8c4f20;
border: 1.5px solid #fc8c4f;
border-radius: .5rem;
padding: .5rem;
font-size: .8rem;
border-radius: 0.5rem;
padding: 0.5rem;
font-size: 0.8rem;
font-weight: 600;
margin-top: .5rem;
margin-bottom: 0.5rem;
display: flex;
align-items: center;
border-bottom-width: 3px;
Expand All @@ -402,10 +402,10 @@ span.new-feature-tag.beta {
.info-component {
background-color: #fcd44f20;
border: 1.5px solid #fcd44f;
border-radius: .5rem;
padding: .5rem;
font-size: .8rem;
margin-top: .5rem;
border-radius: 0.5rem;
padding: 0.5rem;
font-size: 0.8rem;
margin-bottom: 0.5rem;
display: flex;
align-items: center;
border-bottom-width: 3px;
Expand All @@ -418,4 +418,14 @@ span.new-feature-tag.beta {
margin-right: 0.5rem;
margin-inline-end: 10px;
transform: scale(1.15);
}
}

.feature h3 .icon svg {
height: 1rem;
width: 1rem;
margin-right: 1.5rem;
position: relative;
left: 0.6rem;
transform: scale(1.5);
top: 0.1rem;
}
43 changes: 35 additions & 8 deletions extras/popup/popup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -762,6 +762,8 @@ async function getFeatures() {
}
}

div.appendChild(generateComponents(feature.components || []));

var span = document.createElement("span");
span.textContent =
(chrome.i18n.getMessage("creditsText") || "Credits") + ": ";
Expand Down Expand Up @@ -801,8 +803,6 @@ async function getFeatures() {
});
div.appendChild(span);

div.appendChild(generateComponents(feature.components || []));

if (
feature.versionAdded?.replace("v", "") ===
chrome.runtime.getManifest().version.toString()
Expand Down Expand Up @@ -835,6 +835,7 @@ async function getFeatures() {
document.querySelector(".settings").appendChild(div);
}
}
getTrending()
}
getFeatures();

Expand Down Expand Up @@ -1293,22 +1294,48 @@ function generateComponents(components) {
value = true;
}
}
if (cond.type === "version") {
if (cond.value === chrome.runtime.getManifest().version) {
value = true;
}
}
conditions.push(value);
});

if (el.if.type === "any") {
if (!!conditions.find((cond) => cond)) {
div.appendChild(element);
if (!conditions.find((cond) => cond)) {
div.style.display = "none"
}
} else if (el.if.type === "all") {
if (conditions.find((cond) => !cond) === undefined) {
div.appendChild(element);
if (conditions.find((cond) => !cond) !== undefined) {
div.style.display = "none"
}
}
} else {
div.appendChild(element);
}
div.appendChild(element);
});

return div;
}

async function getTrending() {
let data = await (await fetch("https://data.scratchtools.app/trending/")).json()

data.forEach(function(el) {
if (!document.querySelector(`div.feature[data-id='${el}']`)) return;

let icon = document.createElement("span")
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>'
icon.className = "icon"

icon.addEventListener("click", function () {
ScratchTools.modals.create({
title: "Trending feature",
description:
"This feature is especially popular among ScratchTools users. Try it out!",
});
});

document.querySelector(`div.feature[data-id='${el}'] > h3`).prepend(icon)
})
}
115 changes: 67 additions & 48 deletions extras/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,11 +25,13 @@ a {
cursor: pointer;
}

.more-settings-btn svg, .feedback-btn svg, .support-btn svg {
.more-settings-btn svg,
.feedback-btn svg,
.support-btn svg {
height: 1rem;
position: relative;
top: 0.2rem;
margin-right: .5rem;
margin-right: 0.5rem;
width: 1rem;
}

Expand Down Expand Up @@ -83,7 +85,7 @@ a {
padding-left: 1.5rem !important;
padding-right: 1.5rem !important;
color: var(--primary-color);
border-radius: .5rem;
border-radius: 0.5rem;
padding: 1rem;
padding-top: 5px;
margin-bottom: 0px;
Expand Down Expand Up @@ -322,7 +324,7 @@ a {
.section1 .note {
color: rgba(0, 0, 0, 0.8);
padding: 2em;
border-radius: .5rem;
border-radius: 0.5rem;
margin-top: 1rem;
}
.section1 .note.yellow {
Expand Down Expand Up @@ -491,7 +493,7 @@ button.secondary-btn {
position: relative;
top: 3.1rem;
border-left: 2px solid var(--searchbar-bg);
margin-left: 0.5rem;
margin-left: 0.5rem;
}

.buttons button {
Expand Down Expand Up @@ -618,36 +620,36 @@ body[data-filter="Egg"] .feature[data-type*="Egg"] {
}

.feedback-btn,
.more-settings-btn, .support-btn {
.more-settings-btn,
.support-btn {
right: 1rem;
left: inherit;
}
}


.themes-div .dropdown{
.themes-div .dropdown {
position: relative;
display: inline-block;
margin-left: 1rem;
margin-right: 1rem;
height: max-content;
width: 12.5rem;
box-sizing: border-box;
background: var(--theme);
float: right;
margin-top: 3.8em;
right: -4.5em;
border-radius: 0 0 var(--radius) var(--radius);
overflow: hidden;
border: 1.5px solid rgba(0,0,0,0.1);
border-top: none;
box-shadow: 0px 10px 20px -15px rgba(0, 0, 0, 0.5);
}

.themes-div .dropdown .item{
display: inline-block;
margin-left: 1rem;
margin-right: 1rem;
height: max-content;
width: 12.5rem;
box-sizing: border-box;
background: var(--theme);
float: right;
margin-top: 3.8em;
right: -4.5em;
border-radius: 0 0 var(--radius) var(--radius);
overflow: hidden;
border: 1.5px solid rgba(0, 0, 0, 0.1);
border-top: none;
box-shadow: 0px 10px 20px -15px rgba(0, 0, 0, 0.5);
}

.themes-div .dropdown .item {
height: 2.5rem;
width: 12.5rem;
color:white;
color: white;
font-size: 1rem;
background: var(--theme);
padding: 0.5rem;
Expand All @@ -658,7 +660,7 @@ body[data-filter="Egg"] .feature[data-type*="Egg"] {
align-items: center;
padding: 0.5em;
}
.themes-div .dropdown .item .circle{
.themes-div .dropdown .item .circle {
height: 1.5rem;
width: 1.5rem;
border-radius: 50%;
Expand All @@ -669,12 +671,12 @@ body[data-filter="Egg"] .feature[data-type*="Egg"] {
margin-left: 0.5rem; */
}

.themes-div .dropdown .item#text{
.themes-div .dropdown .item#text {
float: left;
margin-top: 0.5rem;
}
.themes-div .dropdown .item:hover{
background:color-mix(in srgb, var(--theme) 95%, black);
.themes-div .dropdown .item:hover {
background: color-mix(in srgb, var(--theme) 95%, black);
}

.feedback-btn .notification {
Expand All @@ -693,23 +695,23 @@ body[data-filter="Egg"] .feature[data-type*="Egg"] {
.feature span.new-feature-tag {
background-color: var(--theme);
color: white;
padding: .25rem;
padding: 0.25rem;
display: inline-block;
margin-left: .5rem;
padding-left: .5rem;
padding-right: .5rem;
border-radius: .75rem;
margin-left: 0.5rem;
padding-left: 0.5rem;
padding-right: 0.5rem;
border-radius: 0.75rem;
position: relative;
top: -.15rem;
top: -0.15rem;
line-height: normal;
user-select: none;
transition: opacity .3s, transform .3s;
transition: opacity 0.3s, transform 0.3s;
opacity: 1;
transform: none;
}

.feature span.new-feature-tag:hover {
opacity: .75;
opacity: 0.75;
transform: scale(105%);
}

Expand All @@ -725,11 +727,11 @@ span.new-feature-tag.beta {
.warning-component {
background-color: #fc8c4f20;
border: 1.5px solid #fc8c4f;
border-radius: .5rem;
padding: .5rem;
font-size: .8rem;
border-radius: 0.5rem;
padding: 0.5rem;
font-size: 0.8rem;
font-weight: 600;
margin-top: .5rem;
margin-bottom: 0.5rem;
display: flex;
align-items: center;
border-bottom-width: 3px;
Expand All @@ -747,10 +749,10 @@ span.new-feature-tag.beta {
.info-component {
background-color: #fcd44f20;
border: 1.5px solid #fcd44f;
border-radius: .5rem;
padding: .5rem;
font-size: .8rem;
margin-top: .5rem;
border-radius: 0.5rem;
padding: 0.5rem;
font-size: 0.8rem;
margin-bottom: 0.5rem;
display: flex;
align-items: center;
border-bottom-width: 3px;
Expand All @@ -763,4 +765,21 @@ span.new-feature-tag.beta {
margin-right: 0.5rem;
margin-inline-end: 10px;
transform: scale(1.15);
}
}

.feature h3 .icon svg {
height: 1rem;
width: 1rem;
margin-right: 1.5rem;
position: relative;
left: 0.6rem;
transform: scale(1.5);
top: 0.1rem;
transition: transform 0.3s, opacity 0.3s;
}

.feature h3 .icon svg:hover {
opacity: 0.75;
transform: scale(1.8);
cursor: pointer;
}

0 comments on commit 359e700

Please sign in to comment.