0c340c4f74
* Prevent multiple inclusion of variables in CSS files * Use dict instead of tuple for variables * Add comments to variables * Improve appearance of main window * Tweak main window styles * Use json.dumps over pprint.format * Make study button primary * Improve header margin * Make bottom toolbar slimmer * Make congrats page more balanced * Fix type issue * Replace day/night with light/dark * Exclude top-level-drag-row from hover effect * Create dataclass for variables * Run formatter * Apply CSS variables from Python side Why go full-circle with the Sass variables? This way we only need one interface for add-on authors to interact with. It also makes it easier for us to apply additional themes in the future. * Fix typing * Fix rgba values in Qt * Darken button background * Fix palette not being applied in light theme For some odd reason this problem arose much later than #2016. * Tweak default button look * Reformat * Apply CSS vars to ts pages * Include elevation in button_mixins_lib * Cast opacity to int * Add some margin to studiedToday info * Tweak light theme button gradient * Tweak highlight-bg for light theme * Add back default button color as it made the browser sidebar tool icons dark in light theme. * Reformat * Tweak light theme buttons once more Sorry for the back-and-forth. Sass only compiles when there are changes in user files, not when I only change the vars. * Fix bottom toolbar button indicators * Make buttons more clicky * Fix button padding * Handle macOS separately again * Decrease elevation effect for main window buttons to 1 * Imitate box-shadow for Qt elements * Adjust shadow vars * Adjust primary border color because the save button in the deck options had a lighter color than its background gradient. * Boost box-shadow color of primary buttons * Format * Adjust Qt box-shadow imitation and shadow colors * Use more subtle default shadow color * Add some more padding to top toolbar * Revert "Apply CSS vars to ts pages" This reverts commit 5d8e7f6b7ffc8894b6517ecbb8cfba35407fc69a. * Revert "Apply CSS variables from Python side" This reverts commit 87db774412fd2bfd75e2630d2c5e782daef96b5f. * Better match the standard macOS buttons In the dark theme the standard color is a lighter grey, but at least the size/shape is similar again. This doesn't work for the editor buttons. * Reduce the top margin of the congrats screen * Fix illegible buttons when changing theme on macOS; match dark button style
88 lines
2.3 KiB
Svelte
88 lines
2.3 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 IconConstrain from "./IconConstrain.svelte";
|
|
import { chevronDown } from "./icons";
|
|
import Popover from "./Popover.svelte";
|
|
import WithFloating from "./WithFloating.svelte";
|
|
|
|
export let id: string | undefined = undefined;
|
|
let className = "";
|
|
export { className as class };
|
|
export let disabled = false;
|
|
export let current: string = "";
|
|
|
|
export let tooltip: string | undefined = undefined;
|
|
|
|
const rtl: boolean = window.getComputedStyle(document.body).direction == "rtl";
|
|
export let element: HTMLElement | undefined = undefined;
|
|
let hover = false;
|
|
|
|
let showFloating = false;
|
|
let clientWidth: number;
|
|
</script>
|
|
|
|
<WithFloating
|
|
show={showFloating}
|
|
placement="bottom"
|
|
offset={0}
|
|
shift={0}
|
|
hideArrow
|
|
inline
|
|
closeOnInsideClick
|
|
on:close={() => (showFloating = false)}
|
|
let:asReference
|
|
>
|
|
<div
|
|
{id}
|
|
class="{className} select-container"
|
|
class:rtl
|
|
class:hover
|
|
{disabled}
|
|
title={tooltip}
|
|
tabindex="-1"
|
|
on:mouseenter={() => (hover = true)}
|
|
on:mouseleave={() => (hover = false)}
|
|
on:click={() => (showFloating = !showFloating)}
|
|
bind:this={element}
|
|
use:asReference
|
|
bind:clientWidth
|
|
>
|
|
{current}
|
|
<div class="chevron">
|
|
<IconConstrain iconSize={80}>
|
|
{@html chevronDown}
|
|
</IconConstrain>
|
|
</div>
|
|
</div>
|
|
<Popover slot="floating" scrollable --popover-width="{clientWidth}px">
|
|
<slot />
|
|
</Popover>
|
|
</WithFloating>
|
|
|
|
<style lang="scss">
|
|
@use "sass/button-mixins" as button;
|
|
.select-container {
|
|
@include button.select($with-disabled: false);
|
|
padding: 0.2rem 2rem 0.2rem 0.75rem;
|
|
line-height: 1.5;
|
|
height: var(--buttons-size, 100%);
|
|
position: relative;
|
|
}
|
|
|
|
.chevron {
|
|
position: absolute;
|
|
inset: 0 0 0 auto;
|
|
border-left: 1px solid var(--border-subtle);
|
|
}
|
|
:global([dir="rtl"]) {
|
|
.chevron {
|
|
inset: 0 auto 0 0;
|
|
border-left: none;
|
|
border-right: 1px solid var(--border-subtle);
|
|
}
|
|
}
|
|
</style>
|