From 1bde81f5f1519f29d87a093f74f514be47f690b9 Mon Sep 17 00:00:00 2001 From: Robin van der Linde Date: Sun, 21 Apr 2024 01:19:48 +0200 Subject: [PATCH] Basic filtering in studio (#1898) --- public/css/index-tailwind-output.css | 82 ++++++++++++------------- src/UI/StudioGUI.svelte | 89 +++++++++++++++++++++++++--- 2 files changed, 120 insertions(+), 51 deletions(-) diff --git a/public/css/index-tailwind-output.css b/public/css/index-tailwind-output.css index 0f5db9ed3..5edcd85be 100644 --- a/public/css/index-tailwind-output.css +++ b/public/css/index-tailwind-output.css @@ -693,6 +693,10 @@ video { position: relative; } +.\!relative { + position: relative !important; +} + .sticky { position: -webkit-sticky; position: sticky; @@ -717,6 +721,10 @@ video { top: 14rem; } +.bottom-0 { + bottom: 0px; +} + .top-0 { top: 0px; } @@ -725,10 +733,6 @@ video { left: 0px; } -.bottom-0 { - bottom: 0px; -} - .right-4 { right: 1rem; } @@ -896,14 +900,6 @@ video { margin-right: 4rem; } -.mb-4 { - margin-bottom: 1rem; -} - -.mb-8 { - margin-bottom: 2rem; -} - .mt-4 { margin-top: 1rem; } @@ -936,6 +932,10 @@ video { margin-right: 0.25rem; } +.mb-4 { + margin-bottom: 1rem; +} + .ml-1 { margin-left: 0.25rem; } @@ -968,6 +968,10 @@ video { margin-top: 2rem; } +.mb-8 { + margin-bottom: 2rem; +} + .-ml-6 { margin-left: -1.5rem; } @@ -1076,12 +1080,18 @@ video { height: 6rem; } +.h-full { + height: 100%; +} + .h-screen { height: 100vh; } -.h-full { - height: 100%; +.h-fit { + height: -webkit-fit-content; + height: -moz-fit-content; + height: fit-content; } .h-32 { @@ -1105,16 +1115,6 @@ video { height: 1.5rem; } -.h-fit { - height: -webkit-fit-content; - height: -moz-fit-content; - height: fit-content; -} - -.h-96 { - height: 24rem; -} - .h-0 { height: 0px; } @@ -1786,10 +1786,6 @@ video { background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } -.bg-white\/50 { - background-color: rgb(255 255 255 / 0.5); -} - .bg-red-400 { --tw-bg-opacity: 1; background-color: rgb(248 113 113 / var(--tw-bg-opacity)); @@ -1876,6 +1872,10 @@ video { padding-right: 0.5rem; } +.pl-2 { + padding-left: 0.5rem; +} + .pr-12 { padding-right: 3rem; } @@ -1888,10 +1888,6 @@ video { padding-right: 0.25rem; } -.pl-2 { - padding-left: 0.5rem; -} - .pt-0\.5 { padding-top: 0.125rem; } @@ -2122,6 +2118,11 @@ video { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } +.outline-none { + outline: 2px solid transparent; + outline-offset: 2px; +} + .outline { outline-style: solid; } @@ -2217,12 +2218,6 @@ video { backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } -.transition-colors { - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} - .transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; @@ -2231,6 +2226,12 @@ video { transition-duration: 150ms; } +.transition-colors { + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + .duration-200 { transition-duration: 200ms; } @@ -2928,11 +2929,6 @@ svg.apply-fill path { max-width: 100%; } -.hover\:bg-white:hover { - --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); -} - .hover\:bg-indigo-200:hover { --tw-bg-opacity: 1; background-color: rgb(199 210 254 / var(--tw-bg-opacity)); diff --git a/src/UI/StudioGUI.svelte b/src/UI/StudioGUI.svelte index 10f544bfa..2a240a238 100644 --- a/src/UI/StudioGUI.svelte +++ b/src/UI/StudioGUI.svelte @@ -29,6 +29,7 @@ import Translations from "./i18n/Translations" import Tr from "./Base/Tr.svelte" import Add from "../assets/svg/Add.svelte" + import { SearchIcon } from "@rgossiaux/svelte-heroicons/solid" export let studioUrl = window.location.hostname === "127.0.0.2" @@ -54,26 +55,66 @@ const uid = osmConnection.userDetails.map((ud) => ud?.uid) const studio = new StudioServer(studioUrl, uid) + let layerFilterTerm: string = "" + let layersWithErr = UIEventSource.FromPromiseWithErr(studio.fetchOverview()) let layers: Store<{ owner: number; id: string }[]> = layersWithErr.mapD((l) => l["success"]?.filter((l) => l.category === "layers") ) - let selfLayers = layers.mapD((ls) => ls.filter((l) => l.owner === uid.data), [uid]) - let otherLayers = layers.mapD( - (ls) => ls.filter((l) => l.owner !== undefined && l.owner !== uid.data), + $: selfLayers = layers.mapD( + (ls) => + ls.filter( + (l) => l.owner === uid.data && l.id.toLowerCase().includes(layerFilterTerm.toLowerCase()) + ), [uid] ) - let officialLayers = layers.mapD((ls) => ls.filter((l) => l.owner === undefined), [uid]) + $: otherLayers = layers.mapD( + (ls) => + ls.filter( + (l) => + l.owner !== undefined && + l.owner !== uid.data && + l.id.toLowerCase().includes(layerFilterTerm.toLowerCase()) + ), + [uid] + ) + $: officialLayers = layers.mapD( + (ls) => + ls.filter( + (l) => l.owner === undefined && l.id.toLowerCase().includes(layerFilterTerm.toLowerCase()) + ), + [uid] + ) + + let themeFilterTerm: string = "" let themes: Store<{ owner: number; id: string }[]> = layersWithErr.mapD((l) => l["success"]?.filter((l) => l.category === "themes") ) - let selfThemes = themes.mapD((ls) => ls.filter((l) => l.owner === uid.data), [uid]) - let otherThemes = themes.mapD( - (ls) => ls.filter((l) => l.owner !== undefined && l.owner !== uid.data), + $: selfThemes = themes.mapD( + (ls) => + ls.filter( + (l) => l.owner === uid.data && l.id.toLowerCase().includes(themeFilterTerm.toLowerCase()) + ), + [uid] + ) + $: otherThemes = themes.mapD( + (ls) => + ls.filter( + (l) => + l.owner !== undefined && + l.owner !== uid.data && + l.id.toLowerCase().includes(themeFilterTerm.toLowerCase()) + ), + [uid] + ) + $: officialThemes = themes.mapD( + (ls) => + ls.filter( + (l) => l.owner === undefined && l.id.toLowerCase().includes(themeFilterTerm.toLowerCase()) + ), [uid] ) - let officialThemes = themes.mapD((ls) => ls.filter((l) => l.owner === undefined), [uid]) let state: | undefined @@ -224,6 +265,22 @@ MapComplete Studio

Choose a layer to edit

+ +
+ +
+

Your layers

 @@ -257,6 +314,22 @@ MapComplete Studio

Choose a theme to edit

+ +
+ +
+

Your themes