diff --git a/package.json b/package.json index 9d7d5781..87d4d2e1 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,7 @@ "autoprefixer": "^10.4.15", "color": "^4.2.3", "install": "^0.13.0", + "motion": "^10.16.4", "npm": "^10.1.0", "postcss": "^8.4.29", "react": "^18.2.0", diff --git a/src/SEQTA.js b/src/SEQTA.js index 0a20b8e9..a443a21c 100644 --- a/src/SEQTA.js +++ b/src/SEQTA.js @@ -1,4 +1,5 @@ /*global chrome*/ +import { animate, spring } from "motion"; import Color from "color"; import ShortcutLinks from "./seqta/content/links.json"; @@ -95,42 +96,50 @@ function OpenWhatsNewPopup() { let text = stringToHTML( String.raw`
-
  • Custom backgrounds and themes coming soon!
    • -

    3.1.2 - New settings menu!

    -
  • Overhauled the settings menu
    • -
  • Added custom gradients
    • -

    3.1.1 - Minor Bug fixes

    -
  • Fixed assessments overlapping
    • -
  • Fixed houses not displaying if they aren't a specific color
    • -
  • Fixed Chrome Webstore Link
    • - -

    3.1.0 - Design Improvements

    -
  • Minor UI improvements
    • -
  • Added Animation Speed Slider
    • -
  • Animation now enables and disables without reloading SEQTA
    • -
  • Changed logo
    • +
  • Custom backgrounds and themes coming soon!
    • +

    3.1.2 - New settings menu!

    +
  • Overhauled the settings menu
    • +
  • Added custom gradients
    • +

    3.1.1 - Minor Bug fixes

    +
  • Fixed assessments overlapping
    • +
  • Fixed houses not displaying if they aren't a specific color
    • +
  • Fixed Chrome Webstore Link
    • + +

    3.1.0 - Design Improvements

    +
  • Minor UI improvements
    • +
  • Added Animation Speed Slider
    • +
  • Animation now enables and disables without reloading SEQTA
    • +
  • Changed logo
    • -

    3.0.0 - BetterSEQTA+ *Complete Overhaul*

    -
  • Redesigned appearance
    • -
  • Upgraded to manifest V3 (longer support)
    • -
  • Fixed transitional glitches
    • -
  • Under the hood improvements
    • -
  • Fixed News Feed
    • +

    3.0.0 - BetterSEQTA+ *Complete Overhaul*

    +
  • Redesigned appearance
    • +
  • Upgraded to manifest V3 (longer support)
    • +
  • Fixed transitional glitches
    • +
  • Under the hood improvements
    • +
  • Fixed News Feed
    • -

    2.0.7 - Added support to other domains + Minor bug fixes

  • Fixed BetterSEQTA+ not loading on some pages
  • Fixed text colour of notices being unreadable
  • Fixed pages not reloading when saving changes
    • -

    2.0.2 - Minor bug fixes

  • Fixed indicator for current lesson
  • Fixed text colour for DM messages list in Light mode
  • Fixed user info text colour
    • -

    Sleek New Layout

  • Updated with a new font and presentation, BetterSEQTA+ has never looked better.
    • -

    New Updated Sidebar

  • Condensed appearance with new updated icons.
    • -

    Independent Light Mode and Dark Mode

  • Dark mode and Light mode are now available to pick alongside your chosen Theme Colour. Your Theme Colour will now become an accent colour for the page. - Light/Dark mode can be toggled with the new button, found in the top-right of the menu bar. -
    • - -

    Create Custom Shortcuts

  • Found in the BetterSEQTA+ Settings menu, custom shortcuts can now be created with a name and URL of your choice.
    • - +

    2.0.7 - Added support to other domains + Minor bug fixes

    +
  • Fixed BetterSEQTA+ not loading on some pages
    • +
  • Fixed text colour of notices being unreadable
    • +
  • Fixed pages not reloading when saving changes
    • + +

    2.0.2 - Minor bug fixes

    +
  • Fixed indicator for current lesson
    • +
  • Fixed text colour for DM messages list in Light mode
    • +
  • Fixed user info text colour
    • + +

    Sleek New Layout

    +
  • Updated with a new font and presentation, BetterSEQTA+ has never looked better.
    • + +

    New Updated Sidebar

    +
  • Condensed appearance with new updated icons.
    • + +

    Independent Light Mode and Dark Mode

    +
  • Dark mode and Light mode are now available to pick alongside your chosen Theme Colour. Your Theme Colour will now become an accent colour for the page. + Light/Dark mode can be toggled with the new button, found in the top-right of the menu bar.
    • + +

    Create Custom Shortcuts

    +
  • Found in the BetterSEQTA+ Settings menu, custom shortcuts can now be created with a name and URL of your choice.
    • `, ).firstChild; @@ -140,10 +149,14 @@ function OpenWhatsNewPopup() {
    Report bugs and feedback: - + + + + + - +
    @@ -151,7 +164,6 @@ function OpenWhatsNewPopup() { `).firstChild; let exitbutton = document.createElement("div"); - exitbutton.innerText = "x"; exitbutton.id = "whatsnewclosebutton"; container.append(header); @@ -161,20 +173,31 @@ function OpenWhatsNewPopup() { container.append(footer); container.append(exitbutton); + background.append(container); + document.getElementById("container").append(background); - document.getElementById("container").append(container); + + let bkelement = document.getElementById("whatsnewbk"); + let popup = document.getElementsByClassName("whatsnewContainer")[0]; + + animate( + [popup, bkelement], + { scale: [0, 1], opacity: [0, 1] }, + { easing: spring({ stiffness: 220, damping: 18 }) } + ); chrome.storage.local.remove(["justupdated"]); - var bkelement = document.getElementById("whatsnewbk"); - bkelement.addEventListener("click", function () { - DeleteWhatsNew(); - //WhatsNewOpen = false; - }); + bkelement.addEventListener("click", function (event) { + // Check if the click event originated from the element itself and not any of its children + if (event.target === bkelement) { + DeleteWhatsNew(); + } + }); + var closeelement = document.getElementById("whatsnewclosebutton"); closeelement.addEventListener("click", function () { DeleteWhatsNew(); - //WhatsNewOpen = false; }); } @@ -190,20 +213,25 @@ async function finishLoad() { chrome.storage.local.get(["justupdated"], function (result) { if (result.justupdated) { - //WhatsNewOpen = true; OpenWhatsNewPopup(); } }); } async function DeleteWhatsNew() { - var bkelement = document.getElementById("whatsnewbk"); - var popup = document.getElementsByClassName("whatsnewContainer")[0]; - bkelement.classList.add("whatsnewfadeout"); - popup.classList.add("whatsnewzoomout"); - await delay(500); - bkelement.remove(); - popup.remove(); + const bkelement = document.getElementById("whatsnewbk"); + const popup = document.getElementsByClassName("whatsnewContainer")[0]; + + bkelement.classList.add("opacity-0"); + + animate( + [popup, bkelement], + { scale: [1, 0], opacity: [1, 0] }, + { easing: spring({ stiffness: 220, damping: 18 }) } + ).then(() => { + popup.remove(); + bkelement.remove(); + }); } export function CreateBackground() { diff --git a/src/inject/injected.css b/src/inject/injected.css index 54f9a2ec..3f417a03 100644 --- a/src/inject/injected.css +++ b/src/inject/injected.css @@ -2742,40 +2742,15 @@ body { max-height: 60em; background: var(--background-primary); z-index: 50; - left: 50%; - top: 50%; - transform: translate(-50%, -50%) scale(0.8); border-radius: 20px; + margin: auto; display: flex; flex-direction: column; color: var(--text-primary); - animation: zoomin 0.5s; animation-fill-mode: forwards; transform-origin: center center; } -@keyframes zoomin { - 75% { - transform: translate(-50%, -50%) scale(1.05); - } - - 100% { - transform: translate(-50%, -50%) scale(1); - } -} - -@keyframes zoomout { - 0% { - opacity: 1; - transform: translate(-50%, -50%) scale(1); - } - - 100% { - opacity: 0; - transform: translate(-50%, -50%) scale(0.8); - } -} - .whatsnewHeader { margin: 20px; width: 100%; @@ -2799,27 +2774,11 @@ body { position: absolute; top: 0; left: 0; + display: grid; + place-items: center; background: rgba(0, 0, 0, 0.5); z-index: 49; - opacity: 0; - animation: fadein 0.2s; - animation-fill-mode: forwards; -} - -@keyframes fadein { - 100% { - opacity: 1; - } -} - -@keyframes fadeout { - 0% { - opacity: 1; - } - - 100% { - opacity: 0; - } + transform: scale(1) !important; } .whatsnewImgContainer { @@ -2900,10 +2859,11 @@ body { cursor: pointer; } -.whatsnewfadeout { - animation: fadeout 0.6s; -} - -.whatsnewzoomout { - animation: zoomout 0.7s; -} +#whatsnewclosebutton::before { + content: "\ed8a"; + color: currentColor; + font-size: 16px; + margin-right: 8px; /* Adjusted to margin-right for the icon to be on the left */ + font-family: "IconFamily"; + pointer-events: none; +} \ No newline at end of file