anki/ts/components/TitledContainer.svelte
Matthias Metelka 9f8667fb47
Auto-hide toolbar in Reviewer (#2262)
* Give webviews a slide-in animation

if reduced motion isn't set.

* Auto-hide toolbar in review mode

moving the mouse above the main webview expands the toolbar. When the mouse leaves the toolbar, it will collapse after a delay of 2s.

* Save some space on bottom toolbars

* Use props for all hard-coded transition durations

and decrease most commonly used duration (200ms) to 150ms.

* Move auto-hide logic into ToolbarWebView

and handle auto-hide specific events in the respective webview subclasses.

* Fix typing issues

* Fix flickering issue

* Add auto_hide_toolbar opt-in to preferences

* Rename hide_toolbar to collapse_toolbar

to better describe the dock-like behaviour.

* Rename setting to minimize_distractions

* Reduce calls to pm in eventFilter

* Run formatter

* Revert setting title to something more specific

* Increase default animation time to 180ms

* Inset toolbar in review mode

when auto-hide is not enabled.

* Use card background on toolbar and add glass effect

* Use flatten/elevate over inset/outset

* Use flatten/elevate over inset/outset

* Update toolbar.py

* Fix toolbar background delay

* Tweak styles

* Use "collapse" instead of "auto-hide"

* Fix background misalignment in collapse mode

* Do not collapse toolbar when pointer is outside MainWebView

* Reduce hide_timer interval to 1000ms

* Use CSS to hide toolbar instead of setting webview height

* Add guard to prevent backdrop-filter: blur on Qt 5.14

* Apply transition to body instead of toolbar

to not complicate things for #2301.

* Fix Qt 5.14 and apply guard globally

* Fix background image scaling difference

* Tweak preference wording (dae)
2023-01-09 14:39:31 +10:00

87 lines
2.2 KiB
Svelte

<!--
Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script lang="ts">
import { pageTheme } from "../sveltelib/theme";
const rtl: boolean = window.getComputedStyle(document.body).direction == "rtl";
export let id: string | undefined = undefined;
let className: string = "";
export { className as class };
export let title: string;
</script>
<div
{id}
class="container {className}"
class:light={!$pageTheme.isDark}
class:dark={$pageTheme.isDark}
class:rtl
style:--gutter-block="2px"
style:--container-margin="0"
>
<div class="position-relative">
<h1>{title}</h1>
<div class="help-badge position-absolute" class:rtl>
<slot name="tooltip" />
</div>
</div>
<slot />
</div>
<style lang="scss">
@use "sass/elevation" as *;
.container {
width: 100%;
background: var(--canvas-elevated);
border: 1px solid var(--border-subtle);
border-radius: var(--border-radius-large, 10px);
padding: 1rem 1.75rem 0.75rem 1.25rem;
&.rtl {
padding: 1rem 1.25rem 0.75rem 1.75rem;
}
&:hover,
&:focus-within {
.help-badge {
color: var(--fg-subtle);
}
}
&.light {
@include elevation(2, $opacity-boost: -0.08);
&:hover,
&:focus-within {
@include elevation(3);
}
}
&.dark {
@include elevation(3, $opacity-boost: -0.08);
&:hover,
&:focus-within {
@include elevation(4);
}
}
transition: box-shadow var(--transition) ease-in-out;
page-break-inside: avoid;
}
h1 {
border-bottom: 1px solid var(--border);
}
.help-badge {
right: 0;
bottom: 4px;
color: var(--fg-faint);
transition: color var(--transition) linear;
&:hover {
transition: none;
color: var(--fg);
}
&.rtl {
right: unset;
left: 0;
}
}
</style>