contrapunctus/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Merge develop

Browse source
This commit is contained in:
Pieter Vander Vennet 2024-11-18 20:45:16 +01:00
commit b5669f6bf8
786 changed files with 42904 additions and 35985 deletions
Download patch file Download diff file Expand all files Collapse all files

83
src/UI/Base/DotMenu.svelte
View file

@ -26,66 +26,65 @@
function toggle() {
open.set(!open.data)
}
</script>
<div class="relative" style="z-index: 50">
<div class="relative" style="z-index: 39">
<div
class="sidebar-unit absolute {menuPosition} collapsable normal-background button-unstyled "
class="sidebar-unit absolute {menuPosition} collapsable normal-background button-unstyled"
class:transition-background={hideBackground}
class:collapsed={!$open}>
class:collapsed={!$open}
>
<slot />
</div>
<DotsCircleHorizontal
class={ `absolute ${dotsPosition} ${dotsSize} dots-menu transition-colors ${$open?"dots-menu-opened":""}`}
on:click={toggle} />
class={`absolute ${dotsPosition} ${dotsSize} dots-menu transition-colors ${
$open ? "dots-menu-opened" : ""
}`}
on:click={toggle}
/>
</div>
<style>
.dots-menu {
z-index: 50;
}
.dots-menu {
z-index: 50;
}
:global(.dots-menu > path) {
:global(.dots-menu > path) {
fill: var(--button-background-hover);
transition: fill 350ms linear;
cursor: pointer;
transition: fill 350ms linear;
cursor: pointer;
}
}
:global(.dots-menu:hover > path, .dots-menu-opened > path) {
fill: var(--interactive-foreground);
}
:global(.dots-menu:hover > path, .dots-menu-opened > path) {
fill: var(--interactive-foreground)
}
.collapsable {
max-width: 50rem;
max-height: 10rem;
transition: max-width 500ms linear, max-height 500ms linear, border 500ms linear;
overflow: hidden;
flex-wrap: nowrap;
text-wrap: none;
width: max-content;
box-shadow: #ccc;
white-space: nowrap;
border: 1px solid var(--button-background);
background-color: white;
}
.collapsable {
max-width: 50rem;
max-height: 10rem;
transition: max-width 500ms linear, max-height 500ms linear, border 500ms linear;
overflow: hidden;
flex-wrap: nowrap;
text-wrap: none;
width: max-content;
box-shadow: #ccc;
white-space: nowrap;
border: 1px solid var(--button-background);
background-color: white;
}
.transition-background {
transition: background-color 150ms linear;
}
.transition-background.collapsed {
background-color: #00000000;
}
.collapsed {
max-width: 0;
max-height: 0;
border: 2px solid #00000000;
pointer-events: none;
}
.transition-background.collapsed {
background-color: #00000000;
}
.collapsed {
max-width: 0;
max-height: 0;
border: 2px solid #00000000;
pointer-events: none;
}
</style>

28
src/UI/Base/DrawerRight.svelte
View file

@ -8,11 +8,11 @@
let transitionParams = {
x: 640,
duration: 200,
easing: sineIn
easing: sineIn,
}
let hidden = !shown.data
shown.addCallback(sh => {
shown.addCallback((sh) => {
hidden = !sh
})
@ -23,19 +23,21 @@
})
</script>
<Drawer placement="right"
transitionType="fly" {transitionParams}
activateClickOutside={false}
divClass="overflow-y-auto z-3"
backdrop={false}
id="drawer-right"
width="w-full sm:w-80 md:w-96"
rightOffset="inset-y-0 right-0"
bind:hidden={hidden}>
<Drawer
placement="right"
transitionType="fly"
{transitionParams}
activateClickOutside={false}
divClass="overflow-y-auto z-3"
backdrop={false}
id="drawer-right"
width="w-full sm:w-80 md:w-96"
rightOffset="inset-y-0 right-0"
bind:hidden
>
<div class="low-interaction h-screen">
<div class="h-full" style={`padding-top: ${height}px`}>
<div class="flex flex-col h-full overflow-y-auto">
<div class="flex h-full flex-col overflow-y-auto">
<slot />
</div>
</div>

2
src/UI/Base/Page.svelte
View file

@ -3,12 +3,10 @@
import { UIEventSource } from "../../Logic/UIEventSource"
import Popup from "./Popup.svelte"
export let onlyLink: boolean = false
export let bodyPadding = "p-4 md:p-5 "
export let fullscreen: boolean = false
export let shown: UIEventSource<boolean>
</script>
{#if !onlyLink}

38
src/UI/Base/Popup.svelte
View file

@ -7,40 +7,48 @@
*/
export let fullscreen: boolean = false
export let bodyPadding = "p-4 md:p-5 "
export let shown: UIEventSource<boolean>
export let dismissable = true
/**
* Default: 50
*/
export let zIndex: string = "z-50"
const shared = "in-page normal-background dark:bg-gray-800 rounded-lg border-gray-200 dark:border-gray-700 border-gray-200 dark:border-gray-700 divide-gray-200 dark:divide-gray-700 shadow-md"
const shared =
"in-page normal-background dark:bg-gray-800 rounded-lg border-gray-200 dark:border-gray-700 border-gray-200 dark:border-gray-700 divide-gray-200 dark:divide-gray-700 shadow-md"
let defaultClass = "relative flex flex-col mx-auto w-full divide-y " + shared
if (fullscreen) {
defaultClass = shared
}
let dialogClass = "fixed top-0 start-0 end-0 h-modal inset-0 z-50 w-full p-4 flex"
let dialogClass = "fixed top-0 start-0 end-0 h-modal inset-0 w-full p-4 flex " + zIndex
if (fullscreen) {
dialogClass += " h-full-child"
}
export let bodyPadding = "p-4 md:p-5 "
let bodyClass = bodyPadding + " h-full space-y-4 flex-1 overflow-y-auto overscroll-contain"
let headerClass = "flex justify-between items-center p-2 px-4 md:px-5 rounded-t-lg"
if (!$$slots.header) {
headerClass = "hidden"
}
export let shown: UIEventSource<boolean>
export let dismissable = true
let _shown = false
shown.addCallbackAndRun(sh => {
shown.addCallbackAndRun((sh) => {
_shown = sh
})
</script>
<Modal open={_shown} on:close={() => shown.set(false)} outsideclose
size="xl"
{dismissable}
{defaultClass} {bodyClass} {dialogClass} {headerClass}
color="none">
<Modal
open={_shown}
on:close={() => shown.set(false)}
outsideclose
size="xl"
{dismissable}
{defaultClass}
{bodyClass}
{dialogClass}
{headerClass}
color="none"
>
<svelte:fragment slot="header">
{#if $$slots.header}
<h1 class="page-header w-full">

39
src/UI/Base/Searchbar.svelte
View file

@ -10,7 +10,7 @@
export let value: UIEventSource<string>
let _value = value.data ?? ""
value.addCallbackD(v => {
value.addCallbackD((v) => {
_value = v
})
$: value.set(_value)
@ -22,7 +22,7 @@
export let autofocus = false
isFocused?.addCallback(focussed => {
isFocused?.addCallback((focussed) => {
if (focussed) {
requestAnimationFrame(() => {
if (document.activeElement !== inputElement) {
@ -33,41 +33,44 @@
}
})
if(autofocus){
if (autofocus) {
isFocused.set(true)
}
</script>
<form
class="w-full"
on:submit|preventDefault={() => dispatch("search")}
>
<form class="w-full" on:submit|preventDefault={() => dispatch("search")}>
<label
class="neutral-label normal-background flex w-full items-center rounded-full border border-black box-shadow"
class="neutral-label normal-background box-shadow flex w-full items-center rounded-full border border-black"
>
<SearchIcon aria-hidden="true" class="h-8 w-8 ml-2" />
<SearchIcon aria-hidden="true" class="ml-2 h-8 w-8" />
<input
bind:this={inputElement}
on:focus={() => {isFocused?.setData(true)}}
on:blur={() => {isFocused?.setData(false)}}
on:focus={() => {
isFocused?.setData(true)
}}
on:blur={() => {
isFocused?.setData(false)
}}
type="search"
style=" --tw-ring-color: rgb(0 0 0 / 0) !important;"
class="px-0 ml-1 w-full outline-none border-none"
class="ml-1 w-full border-none px-0 outline-none"
on:keypress={(keypr) => {
return keypr.key === "Enter" ? dispatch("search") : undefined
}}
return keypr.key === "Enter" ? dispatch("search") : undefined
}}
bind:value={_value}
use:set_placeholder={placeholder}
use:ariaLabel={placeholder}
/>
{#if $value.length > 0}
<Backspace on:click={() => value.set("")} color="var(--button-background)" class="w-6 h-6 mr-3 cursor-pointer" />
<Backspace
on:click={() => value.set("")}
color="var(--button-background)"
class="mr-3 h-6 w-6 cursor-pointer"
/>
{:else}
<div class="w-6 mr-3" />
<div class="mr-3 w-6" />
{/if}
</label>
</form>

97
src/UI/Base/SidebarUnit.svelte
View file

@ -1,55 +1,64 @@
<div class="sidebar-unit">
<slot/>
<slot />
</div>
<style>
:global(.sidebar-unit) {
display: flex;
flex-direction: column;
row-gap: 0.25rem;
background: var(--background-color);
padding: 0.5rem;
border-radius: 0.5rem;
}
:global(.sidebar-unit) {
display: flex;
flex-direction: column;
row-gap: 0.25rem;
background: var(--background-color);
padding: 0.5rem;
border-radius: 0.5rem;
}
:global(.sidebar-unit > h3) {
margin-top: 0;
margin-bottom: 0.5rem;
padding: 0.25rem;
}
:global(.sidebar-unit > h3) {
margin-top: 0;
margin-bottom: 0.5rem;
padding: 0.25rem;
}
:global(.sidebar-button svg, .sidebar-button img, .sidebar-unit > button img, .sidebar-unit > button svg) {
width: 1.5rem;
height: 1.5rem;
margin-right: 0.5rem;
flex-shrink: 0;
}
:global(
.sidebar-button svg,
.sidebar-button img,
.sidebar-unit > button img,
.sidebar-unit > button svg
) {
width: 1.5rem;
height: 1.5rem;
margin-right: 0.5rem;
flex-shrink: 0;
}
:global(.sidebar-button .weblate-link > svg) {
width: 0.75rem;
height: 0.75rem;
flex-shrink: 0;
}
:global(.sidebar-button .weblate-link > svg) {
width: 0.75rem;
height: 0.75rem;
flex-shrink: 0;
}
:global(.sidebar-button, .sidebar-unit > a, .sidebar-unit > button) {
display: flex;
align-items: center;
border-radius: 0.25rem !important;
padding: 0.4rem 0.75rem !important;
text-decoration: none !important;
width: 100%;
text-align: start;
}
:global(.sidebar-button, .sidebar-unit > a, .sidebar-unit > button) {
display: flex;
align-items: center;
border-radius: 0.25rem !important;
padding: 0.4rem 0.75rem !important;
text-decoration: none !important;
width: 100%;
text-align: start;
}
:global(.sidebar-button > svg , .sidebar-button > img, .sidebar-unit > a img, .sidebar-unit > a svg, .sidebar-unit > button svg, .sidebar-unit > button img) {
margin-right: 0.5rem;
flex-shrink: 0;
}
:global(.sidebar-button:hover, .sidebar-unit > a:hover, .sidebar-unit > button:hover) {
background: var(--low-interaction-background) !important;
}
:global(
.sidebar-button > svg,
.sidebar-button > img,
.sidebar-unit > a img,
.sidebar-unit > a svg,
.sidebar-unit > button svg,
.sidebar-unit > button img
) {
margin-right: 0.5rem;
flex-shrink: 0;
}
:global(.sidebar-button:hover, .sidebar-unit > a:hover, .sidebar-unit > button:hover) {
background: var(--low-interaction-background) !important;
}
</style>