23e6b2123e
* Create _input-mixins.scss * Use button-mixins on more elements * Replace <select> tag with custom Select component * Fix RevertButton causing cursor: pointer when hidden * Increase SaveButton chevron width * Hide floating component box-shadow when inactive * Rework SpinBox and move it into components * Run eslint and prettier * Remove leftover options prop * Pass disabled array to EnumSelector again * Update MapperRow.svelte * Darken QHeaderView border color Slipping this in without an extra PR. * Adjust disabled color, border and cursor * Remove redundant icon definition from stylesheets * Fix deck options initial config * Fix z-index issues in change notetype screen It might be best to handle z-index locally in each user component instead of hard-coded component values. * Give web SpinBox a horizontal design * Give QRadioButton the same treatment as QCheckBox in #2079 * Fix unused CSS selector warning with base button-mixin * Remove redundant import * Fix deck options save button * Delete input-mixins and remove unused down-arrow * Run eslint on change-notetype * Run eslint on components
87 lines
2.3 KiB
Svelte
87 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}
|
|
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(--button-border);
|
|
}
|
|
:global([dir="rtl"]) {
|
|
.chevron {
|
|
inset: 0 auto 0 0;
|
|
border-left: none;
|
|
border-right: 1px solid var(--button-border);
|
|
}
|
|
}
|
|
</style>
|