From dba8379a0cf4ba59bd3bb44bb01365c47d68e4ed Mon Sep 17 00:00:00 2001 From: Fluffy-Bean Date: Sun, 7 Aug 2022 11:02:42 +0100 Subject: [PATCH] Replaced symlink with local version of Plugins --- .gitmodules | 6 --- Flyout | 1 - Flyout/.flyout.css.swp | Bin 0 -> 12288 bytes Flyout/flyout.css | 51 +++++++++++++++++++ Flyout/flyout.js | 50 ++++++++++++++++++ Sniffle | 1 - Sniffle/sniffle.css | 112 +++++++++++++++++++++++++++++++++++++++++ Sniffle/sniffle.js | 52 +++++++++++++++++++ 8 files changed, 265 insertions(+), 8 deletions(-) delete mode 160000 Flyout create mode 100644 Flyout/.flyout.css.swp create mode 100644 Flyout/flyout.css create mode 100644 Flyout/flyout.js delete mode 160000 Sniffle create mode 100644 Sniffle/sniffle.css create mode 100644 Sniffle/sniffle.js diff --git a/.gitmodules b/.gitmodules index 474978f..e69de29 100644 --- a/.gitmodules +++ b/.gitmodules @@ -1,6 +0,0 @@ -[submodule "Sniffle"] - path = Sniffle - url = https://github.com/Fluffy-Bean/Sniffle.git -[submodule "Flyout"] - path = Flyout - url = https://github.com/Fluffy-Bean/Flyout.git diff --git a/Flyout b/Flyout deleted file mode 160000 index 57d63d7..0000000 --- a/Flyout +++ /dev/null @@ -1 +0,0 @@ -Subproject commit 57d63d741f57eaaa8b863b1ecd5d6df8c1d00834 diff --git a/Flyout/.flyout.css.swp b/Flyout/.flyout.css.swp new file mode 100644 index 0000000000000000000000000000000000000000..c09233443a2d9229763897d8abdfc9703f2d30cb GIT binary patch literal 12288 zcmeI2yN=U96ov;1B(&TFRL~qiNLjQ_>@17GDG^8%bX+SmwkPp`;|ca;y%!-0cn?54 z2NFC1E9emgh>n7ai$MJ2I2*)ek?4?)qfcIY&YU^(&7_ESBLB*Ti*&jj2weMwFt6T6 zM-T20FAob*7-QY*zg?AzJgZ8p^TC#(on={cs;cUwc9?Zsj~nIftaCnFHDlZ9*SB_D zmRly_MmE3({?Wj0vDgiK*ZJ7dBXnT@<$uh>-PiydU;}J`4X^<=zy{a=8~7g$*wHp| z7lm(cieGH*+kUz?k9=bTY=8~00XDz}*Z><~18jf|umLu}2L3|>G7;j)oDe&Ap?LiN zfBO6X!(Jg?f*0T!cnThZ2jD)q2NDp2%it3DvPXzd;3IesHo$Z60BDecbD#yj?H1xI zcnvndb6`OUu7CjS0lUB)_>B7Afw$ld*Z@z!WAF%E2WP=a&;^IU9B}j64)|gNY=8~0 z0XDz}*Z><~18kr+aA$G}qDm(=4M~oz>52B_K&~fat4$u66*_^>y0|k741E9i?*rFG z=LB6fMV6FQrrNs0zEqjwmMqLTPskdQG%8G#sUcmUR4yyZ4aM15QEDpJ-q#qhQxAv1 zy;85?d~ryTDH2t9c-2E8i7rQ(Tn$O*na&J(o~(iwNvLk;DMmnuC-k*4drjx>F&cN`6Mz8MhI0m$rnHT&{ZH^9P8 zcPWaCTW$xEM~n4hP23J;G0^bp_h=-Oq~0`>#oS!;>0}1sbcHREXFFwICb0X<*#b%fX(kfZrnEj!!^DjXSte5c8}?% K1254-c=!&($9%m2 literal 0 HcmV?d00001 diff --git a/Flyout/flyout.css b/Flyout/flyout.css new file mode 100644 index 0000000..44b04c9 --- /dev/null +++ b/Flyout/flyout.css @@ -0,0 +1,51 @@ +.flyout-dim { + width: 100vw; height: 100vh; + + display: none; + + position: fixed; z-index: 99; + + object-position: center; + + background-color: #151515aa; + + opacity: 0; + + transition: opacity 1s cubic-bezier(.19,1,.22,1), filter 1s cubic-bezier(.19,1,.22,1); +} + +.flyout { + margin: 0; padding: 0.5rem; + + max-width: 621px; width: calc(100% - 3.5rem); + max-height: 20rem; height: auto; min-height: 10rem; + + position: fixed; z-index: 99999; + left: 50%; bottom: -15rem; + transform: translateX(-50%) scale(0.5); + + background-color: #151515; + color: white; + + transition: transform 1s cubic-bezier(.19,1,.22,1), bottom 1s cubic-bezier(.19,1,.22,1); + + border-radius: var(--rad); + border: 0.2rem solid var(--green); + outline: 0.5rem solid var(--bg); +} + +.flyout-header { + font-size: 20px; +} + +.flyout-actionbox { + display: inline; + box-sizing: border-box; +} +/* Worlds shittest workaround to a problem I have no clue how to fix */ +.flyout-actionbox * { + width: 100%; +} +.flyout-actionbox * * { + width: auto; +} diff --git a/Flyout/flyout.js b/Flyout/flyout.js new file mode 100644 index 0000000..af75cbc --- /dev/null +++ b/Flyout/flyout.js @@ -0,0 +1,50 @@ +$(document).ready(function() { + var flyoutRoot = document.getElementById("#flyoutRoot"); + var flyoutDim = document.getElementById("#flyoutDim"); + + var flyoutHeader = document.getElementById("#flyoutHeader"); + var flyoutDescription = document.getElementById("#flyoutDescription"); + var flyoutActionbox = document.getElementById("#flyoutActionbox"); +}); + +function flyoutShow(header, description, actionbox) { + // Checking if actionbox is set + if (typeof actionbox === 'undefined') { + flyoutActionbox.style.display = "none"; + } else if (actionbox == "") { + flyoutActionbox.style.display = "none"; + } else { + flyoutActionbox.style.display = "block"; + } + + // Set information in flyout + flyoutHeader.textContent = header; + flyoutDescription.textContent = description; + flyoutActionbox.innerHTML = actionbox; + + // Show the flyout + flyoutRoot.style.display = "flex"; + // Show the dim + flyoutDim.style.display = "block"; + setTimeout(function(){ + // Show the flyout + flyoutRoot.style.transform = "translateX(-50%) scale(1)"; + flyoutRoot.style.bottom = "1rem"; + // Show the dim + flyoutDim.style.opacity = "1"; + }, 1); +}; + +function flyoutClose() { + // Hide the flyout + flyoutRoot.style.transform = "translateX(-50%) scale(0.5)"; + flyoutRoot.style.bottom = "-20rem"; + // Hide the dim + flyoutDim.style.opacity = "0"; + setTimeout(function(){ + // Hide the flyout + flyoutRoot.style.display = "none"; + // Hide the dim + flyoutDim.style.display = "none"; + }, 500); +}; diff --git a/Sniffle b/Sniffle deleted file mode 160000 index 471cd36..0000000 --- a/Sniffle +++ /dev/null @@ -1 +0,0 @@ -Subproject commit 471cd363a78fd2b73d960211a33829bada62e849 diff --git a/Sniffle/sniffle.css b/Sniffle/sniffle.css new file mode 100644 index 0000000..f55b256 --- /dev/null +++ b/Sniffle/sniffle.css @@ -0,0 +1,112 @@ +/* + Sniffle CSS + + Written simply for easy changing! +*/ + + +/* + Base notification stacking + + It allows for the notifications to stack simply + Due to div having no height initself there is no + reason in hiding it when no notifications are showing +*/ +.sniffle { + margin: 0; padding: 0 1rem; + + max-width: 621px; width: calc(100% - 1rem); + + top: 0.5rem; left: 50%; + transform: translateX(-50%); + + position: fixed; z-index: 999; +} + +/* + Notification body + + It contains 2 child elements, + am image .sniffle-img + and a text div .sniffle-content +*/ +.sniffle-notification { + margin-bottom: 1rem; padding: 0.5rem; + + max-width: calc(100% - 1rem); min-height: 2.5rem; + + display: flex; flex-direction: row; overflow-y: hidden; + + z-index: 999; + + background-color: #151515; + + box-shadow: 5px 5px 5px #151515aa; + + transition: transform 1s cubic-bezier(.19,1,.22,1), opacity 0.2s cubic-bezier(.19,1,.22,1); + + border-radius: var(--rad); +} +.sniffle-notification:hover { + transform: scale(1.05); + + cursor: pointer; +} + + +/* + Notification content Root + + Overflow is hidden incase the description of the message is too long too display + And to prevent text from overflowing the notification +*/ +.sniffle-content { + margin: 0 auto; + + width: calc(100% - 3.5rem); + flex-direction: column; flex-wrap: wrap; + + overflow-y: hidden; +} + +/* + Notification icon/image +*/ +.sniffle-img { + margin-right: 1rem; + + max-width: 2.5rem; width: auto; + height: auto; + + object-fit: contain; +} +/* + Notification header +*/ +.sniffle-header { + margin: 0 0 0.25rem 0; padding: 0; + + font-size: 16px; + font-weight: bold; + + color: var(--fg); +} +/* + Notification description +*/ +.sniffle-description { + margin: 0; padding: 0; + font-size: 14px; + + word-wrap: break-word; + font-weight: bold; + + color: var(--fg); +} +.sniffle-description::after { + content: '\A Click\00A0 to\00A0 dissmiss'; + + white-space: pre; + + opacity: 0.6; +} diff --git a/Sniffle/sniffle.js b/Sniffle/sniffle.js new file mode 100644 index 0000000..111e4b3 --- /dev/null +++ b/Sniffle/sniffle.js @@ -0,0 +1,52 @@ +/* + Close notification + Used by the notifications themself, don't use in code +*/ +function sniffleClose(a) { + a.closest(".sniffle-notification").style.transform="translateY(-20rem) scale(0.8)"; + a.closest(".sniffle-notification").style.opacity="0"; + + setTimeout(function(){ + a.closest(".sniffle-notification").style.display="none"; + a.remove() + }, 200); +}; + + +/* + Add notification + + Header > Required + Takes in String input + + Description > Required + Takes in String input + + Img > Optional + Takes in String input +*/ +function sniffleAdd(header, description, colour, img) { + // Colour is optional, so check if it was added or not + if (typeof colour === 'undefined') { + colour = ''; + } else { + colour = `style="background-color:${colour};"`; + } + + // Image is optional, so check if it was added or not + if (typeof img === 'undefined') { + img = ''; + } else { + img = ``; + } + + var newSniffle = `
\ + ${img}\ +
\ +

${header}

\ +

${description}

\ +
\ +
`; + + $(".sniffle").append(newSniffle); +};