From 936323e430bac47fc2cf37f5eee9acde45ea5257 Mon Sep 17 00:00:00 2001
From: Matthias Metelka <62722460+kleinerpirat@users.noreply.github.com>
Date: Fri, 3 Dec 2021 23:08:20 +0100
Subject: [PATCH] Show downwards arrow on SelectButton (#1521)

* Show downwards arrow on SelectButton

The arrow wasn't showing because the button linear-gradient background overrides the background-image for the arrow.

Select can't have pseudo-elements, so I had to add an extra div.

* Remove height definition

to fix text cutting off on Windows.

* Hide default arrow in light theme

to keep consistency with dark theme, where the arrow has to be custom due to the button gradient.

* Use alternative approach to prevent text getting cropped

and add height definition back again.

Co-Authored-By: Hikaru Y. <47855854+hikaru-y@users.noreply.github.com>

* Adjust arrow position for rtl

Co-authored-by: Hikaru Y. <47855854+hikaru-y@users.noreply.github.com>
---
 ts/components/SelectButton.svelte | 44 ++++++++++++++++++++++++-------
 1 file changed, 35 insertions(+), 9 deletions(-)

diff --git a/ts/components/SelectButton.svelte b/ts/components/SelectButton.svelte
index 29df4027c..bb1fbb6ec 100644
--- a/ts/components/SelectButton.svelte
+++ b/ts/components/SelectButton.svelte
@@ -5,6 +5,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script lang="ts">
     import { onMount, createEventDispatcher } from "svelte";
     import { pageTheme } from "../sveltelib/theme";
+    let rtl: boolean = window.getComputedStyle(document.body).direction == "rtl";
 
     export let id: string | undefined = undefined;
     let className = "";
@@ -20,7 +21,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <!-- svelte-ignore a11y-no-onchange -->
-
 <select
     tabindex="-1"
     bind:this={buttonRef}
@@ -29,27 +29,53 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     class="{className} form-select"
     class:btn-day={!$pageTheme.isDark}
     class:btn-night={$pageTheme.isDark}
-    class:visible-down-arrow={$pageTheme.isDark}
+    class:rtl
     title={tooltip}
     on:change
 >
     <slot />
 </select>
+<div class="arrow" class:dark={$pageTheme.isDark} class:rtl />
 
 <style lang="scss">
     @use "sass/button-mixins" as button;
+    @include button.btn-day($with-hover: false);
+    @include button.btn-night($with-hover: false);
 
     select {
         height: var(--buttons-size);
         /* Long option name can create overflow */
-        overflow-x: hidden;
+        text-overflow: ellipsis;
+        /* Prevents text getting cropped on Windows */
+        padding: {
+            top: 0;
+            bottom: 0;
+        }
+        &.rtl {
+            direction: rtl;
+            /* Reversed Bootstrap values */
+            padding-left: 2.25rem;
+            padding-right: 0.75rem;
+        }
+        &.btn-day {
+            /* Hide default arrow for consistency */
+            background: var(--frame-bg);
+        }
     }
 
-    .visible-down-arrow {
-        /* override the default down arrow */
-        background-image: button.down-arrow(white);
+    .arrow {
+        top: 0;
+        right: 10px;
+        &.rtl {
+            left: 10px;
+        }
+        width: 15px;
+        height: 100%;
+        position: absolute;
+        pointer-events: none;
+        background: button.down-arrow(black) no-repeat right;
+        &.dark {
+            background-image: button.down-arrow(white);
+        }
     }
-
-    @include button.btn-day($with-hover: false);
-    @include button.btn-night($with-hover: false);
 </style>