This is a major upgrade with assorted things included. - Navigation flows improved, search appears in URL history, cleared when navigating to another folder - More efficient file list format for faster loads - Efficient updates, never re-send full root another time (except at connection) - Large number of watching and filelist updates (inotify issues remain) - File size coloring - Fixed ZIP generation random glitches (thread race condition) - Code refactoring, cleanup, typing fixes - More tests Reviewed-on: #3
80 lines
1.3 KiB
Vue
80 lines
1.3 KiB
Vue
<template>
|
|
<dialog ref="dialog">
|
|
<h1 v-if="props.title">{{ props.title }}</h1>
|
|
<div>
|
|
<slot>
|
|
Dialog with no content
|
|
<button onclick="dialog.close()">OK</button>
|
|
</slot>
|
|
</div>
|
|
</dialog>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted } from 'vue'
|
|
|
|
const dialog = ref<HTMLDialogElement | null>(null)
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
title: string
|
|
}>(),
|
|
{
|
|
title: ''
|
|
}
|
|
)
|
|
const show = () => {
|
|
dialog.value!.showModal()
|
|
}
|
|
defineExpose({ show })
|
|
onMounted(() => {
|
|
show()
|
|
})
|
|
</script>
|
|
|
|
<style>
|
|
/* Style for the background */
|
|
dialog::backdrop {
|
|
content: '';
|
|
display: block;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #0008;
|
|
backdrop-filter: blur(0.4em);
|
|
z-index: 1000;
|
|
}
|
|
|
|
/* Hide the dialog by default */
|
|
dialog[open] {
|
|
background: #ddd;
|
|
color: black;
|
|
display: block;
|
|
border: none;
|
|
font-size: 1.2rem;
|
|
border-radius: 0.5rem;
|
|
box-shadow: 0.2rem 0.2rem 1rem #000;
|
|
padding: 1rem;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 1001;
|
|
}
|
|
input {
|
|
font: inherit;
|
|
}
|
|
dialog[open] > h1 {
|
|
background: var(--soft-color);
|
|
color: #fff;
|
|
font-size: 1.2rem;
|
|
margin: -1rem -1rem 0 -1rem;
|
|
padding: 0.5rem 1rem 0.5rem 1rem;
|
|
}
|
|
|
|
dialog[open] > div {
|
|
padding: 1em 0;
|
|
}
|
|
</style>
|