anki/ts/components/Popover.svelte
Henrik Giesel 88217c5e7d
Replace (some) Bootstrap dropdowns with Floating UI (#1695)
* Implement a first version of WithFloating and Portal

* Add outside slot for Portal

* Execute computePosition from WithFloating

* Set up a first example of new WithFloating with the Latex menu

* Use autoUpdate in WithFloating

* Create sveltelib/position

* Add event-store

* Use event-store in close-on-click

* Implement subscribeToUpdates

* Introduce sass/elevation

* Split close-on-click to closing-click and subscribe-trigger

* Have closing-* stores return a symbol

- This way they act more of an EventEmitter than a store

* Allow passing show store

* Remove styling on float on updatePosition removal

* Implement a nice border for dropdowns

* Apply different border and box-shadow to Popover in dark/light theme

* Fix Ctrl+Shift+T not working

* Satisfy formatters and tests

* Add copyright header

* move copyright header to top (dae)
2022-03-02 14:21:19 +10:00

40 lines
863 B
Svelte

<!--
Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
Alternative to DropdownMenu that avoids Bootstrap
-->
<script>
import { pageTheme } from "../sveltelib/theme";
</script>
<div class="popover" class:dark={$pageTheme.isDark} on:mousedown|preventDefault>
<slot />
</div>
<style lang="scss">
.popover {
border-radius: 5px;
background-color: var(--frame-bg);
min-width: 1rem;
padding: 0.5rem 0;
font-size: 1rem;
color: var(--text-fg);
/* outer border */
border: 1px solid #b6b6b6;
&.dark {
border-color: #060606;
}
/* inner border */
box-shadow: inset 0 0 0 1px #eeeeee;
&.dark {
box-shadow: inset 0 0 0 1px #565656;
}
}
</style>