forked from MapComplete/MapComplete
chore: automated housekeeping...
This commit is contained in:
parent
c9ce29f206
commit
40e894df8b
294 changed files with 14209 additions and 4192 deletions
|
|
@ -9,83 +9,82 @@
|
|||
export let open = new UIEventSource(false)
|
||||
export let dotsSize = `w-6 h-6`
|
||||
export let dotsPosition = `top-0 right-0`
|
||||
export let hideBackground= false
|
||||
export let hideBackground = false
|
||||
let menuPosition = ``
|
||||
if(dotsPosition.indexOf("left-0") >= 0){
|
||||
if (dotsPosition.indexOf("left-0") >= 0) {
|
||||
menuPosition = "left-0"
|
||||
}else{
|
||||
} else {
|
||||
menuPosition = `right-0`
|
||||
}
|
||||
|
||||
if(dotsPosition.indexOf("top-0") > 0){
|
||||
if (dotsPosition.indexOf("top-0") > 0) {
|
||||
menuPosition += " bottom-0"
|
||||
}else{
|
||||
} else {
|
||||
menuPosition += ` top-0`
|
||||
}
|
||||
|
||||
function toggle() {
|
||||
open.set(!open.data)
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<div class="relative" style="z-index: 50">
|
||||
<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) {
|
||||
fill: var(--interactive-background);
|
||||
transition: fill 350ms linear;
|
||||
cursor: pointer;
|
||||
:global(.dots-menu > path) {
|
||||
fill: var(--interactive-background);
|
||||
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 {
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,8 @@
|
|||
|
||||
export let fullscreen: boolean = false
|
||||
|
||||
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
|
||||
|
|
@ -27,20 +28,23 @@
|
|||
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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue