From a72daee9997136efc5321af6ad580ad09f58a71a Mon Sep 17 00:00:00 2001 From: Alexander Brown Date: Mon, 17 Jul 2023 15:15:32 -0700 Subject: [PATCH] Add some more conditional styling and transitions to the image feed panel. --- js/imageFeed.js | 127 ++++++++++++++++++++++++++++++++++-------------- 1 file changed, 90 insertions(+), 37 deletions(-) diff --git a/js/imageFeed.js b/js/imageFeed.js index 0b000f8..e6a8f10 100644 --- a/js/imageFeed.js +++ b/js/imageFeed.js @@ -13,23 +13,28 @@ $el("style", { z-index: 99; font-family: sans-serif; font-size: 12px; + display: flex; + flex-direction: column; } .pysssss-image-feed--top, .pysssss-image-feed--bottom { width: 100vw; min-height: 30px; - max-height: var(--max-size, 200px); + max-height: calc(var(--max-size, 20) * 1vh); + transition: max-height .2s ease-in; } .pysssss-image-feed--top { top: 0; } .pysssss-image-feed--bottom { bottom: 0; + flex-direction: column-reverse; } .pysssss-image-feed--left, .pysssss-image-feed--right { top: 0; height: 100vh; - min-width: 30px; - max-width: var(--max-size, 200px); + min-width: 200px; + max-width: calc(var(--max-size, 10) * 1vw); + transition: max-width .2s ease-in; } .pysssss-image-feed--left { left: 0; @@ -37,39 +42,87 @@ $el("style", { .pysssss-image-feed--right { right: 0; } + + .pysssss-image-feed--left .pysssss-image-feed-menu, .pysssss-image-feed--right .pysssss-image-feed-menu { + flex-direction: column; + } + .pysssss-image-feed-menu { - position: sticky; - top: 0; - height: 0px; + position: relative; + flex: 0 1 min-content; display: flex; gap: 5px; - padding: 5px 5px 0 5px; + padding: 5px; + justify-content: space-between; + } + .pysssss-image-feed-btn-group { + align-items: stretch; + display: flex; + gap: .5rem; + flex: 0 1 fit-content; + justify-content: flex-end; } .pysssss-image-feed-btn { - cursor: pointer; + background-color:#666666; + border-radius:5px; + border:1px solid #ffffff; + color:#ffffff; + cursor:pointer; + display:inline-block; + flex: 0 1 fit-content; + text-decoration:none; } + .pysssss-image-feed-btn.clear-btn { + padding: 5px 20px; + } + .pysssss-image-feed-btn.hide-btn { + padding: 5px; + aspect-ratio: 1 / 1; + } + .pysssss-image-feed-btn:hover { + background-color:#3d3d3d; + } + .pysssss-image-feed-btn:active { + position:relative; + top:1px; + } + .pysssss-image-feed-menu section { + flex: 1 1 auto; border-radius: 5px; background: rgba(0,0,0,0.6); padding: 0 5px; display: flex; gap: 5px; align-items: center; + position: relative; } - .pysssss-image-feed-menu section * { - display: none; + .pysssss-image-feed-menu section span { + white-space: nowrap; } - .pysssss-image-feed-menu section:hover * { - display: initial; + .pysssss-image-feed-menu section input { + flex: 1 1 100%; + background: rgba(0,0,0,0.6); + border-radius: 5px; + overflow: hidden; + transition: max-width .2s ease-in; + z-index: 100; } + .pysssss-image-feed--right .pysssss-image-feed-menu section input { + direction: rtl; + } + .pysssss-image-feed-menu > * { min-height: 24px; } .pysssss-image-feed-list { + flex: 1 1 auto; + overflow-y: auto; display: grid; align-items: center; justify-content: center; - grid-template-columns: repeat( auto-fit, minmax(var(--img-sz), 1fr) ); + grid-template-columns: repeat( auto-fit, minmax(calc(var(--img-sz) * 1vh), 1fr)); + transition: 300ms; } .pysssss-image-feed-list div { text-align: center; @@ -77,7 +130,8 @@ $el("style", { .pysssss-image-feed-list img { object-fit: var(--img-fit, contain); max-width: 100%; - max-height: var(--max-size); + max-height: calc(var(--max-size) * 1vh); + transition: max-height .2s ease-in; } .pysssss-image-feed-list img:hover { filter: brightness(1.2); @@ -189,7 +243,12 @@ app.registerExtension({ }, }); - const hideButton = $el("button.pysssss-image-feed-btn", { + const clearButton = $el("button.pysssss-image-feed-btn.clear-btn", { + textContent: "Clear", + onclick: () => imageList.replaceChildren(), + }); + + const hideButton = $el("button.pysssss-image-feed-btn.hide-btn", { textContent: "❌", onclick: () => { imageFeed.style.display = "none"; @@ -202,24 +261,24 @@ app.registerExtension({ $el("div.pysssss-image-feed-menu", [ $el( "section", - { - textContent: "Feed Size...", - }, + {}, [ + $el("span", { + textContent: "Feed Size...", + }), $el("input", { type: "range", - style: { width: "100px" }, min: 10, max: 80, - oninput: (e) => { + onchange: (e) => { e.target.parentElement.title = `Controls the maximum size of the image feed panel (${e.target.value}vh)`; - imageFeed.style.setProperty("--max-size", e.target.value + "vh"); + imageFeed.style.setProperty("--max-size", e.target.value); saveVal("FeedSize", e.target.value); }, $: (el) => { requestAnimationFrame(() => { el.value = getVal("FeedSize", 25); - el.oninput({ target: el }); + el.onchange({ target: el }); }); }, }), @@ -227,37 +286,31 @@ app.registerExtension({ ), $el( "section", - { - textContent: "Image Size...", - style: { - marginRight: "auto", - }, - }, + {}, [ + $el("span", {textContent: "Image Size...",}), $el("input", { type: "range", - style: { width: "100px" }, min: 5, max: 100, - oninput: (e) => { + onchange: (e) => { e.target.parentElement.title = `Controls the maximum size images in the feed (${e.target.value}vw)`; - imageFeed.style.setProperty("--img-sz", e.target.value + "vw"); + imageFeed.style.setProperty("--img-sz", e.target.value); saveVal("ImageSize", e.target.value); }, $: (el) => { requestAnimationFrame(() => { el.value = getVal("ImageSize", 25); - el.oninput({ target: el }); + el.onchange({ target: el }); }); }, }), ] ), - $el("button.pysssss-image-feed-btn", { - textContent: "Clear", - onclick: () => imageList.replaceChildren(), - }), - hideButton, + $el("div.pysssss-image-feed-btn-group", {}, [ + clearButton, + hideButton, + ]), ]), imageList );