From 9c83b07e8d5c5f08027f0a8d7a5f429e34440afb Mon Sep 17 00:00:00 2001
From: Kelvin Schoofs <schoofs.kelvin@gmail.com>
Date: Tue, 21 Dec 2021 22:20:19 +0100
Subject: [PATCH] Small improvements to Dropdown(WithInput) UI components

---
 CHANGELOG.md                                 |  5 +++++
 webview/src/FieldTypes/dropdown.tsx          |  2 +-
 webview/src/FieldTypes/dropdownwithinput.tsx |  2 +-
 webview/src/FieldTypes/index.css             | 12 ++++++++----
 4 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a6bb01a..ebebd1c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,11 @@
 
 # Changelog
 
+## Unreleased
+
+### Changes
+- Small improvements to Dropdown(WithInput) UI components
+
 ## v1.24.1 (2021-12-07)
 
 ### New features
diff --git a/webview/src/FieldTypes/dropdown.tsx b/webview/src/FieldTypes/dropdown.tsx
index b028b9f..c66896a 100644
--- a/webview/src/FieldTypes/dropdown.tsx
+++ b/webview/src/FieldTypes/dropdown.tsx
@@ -25,7 +25,7 @@ export class FieldDropdown<T> extends FieldBase<T, Props<T>, State> {
         const { displayName } = this.props;
         const display = newValue ? (displayName ? displayName(newValue) : `${newValue}`) : '';
         return <div className="FieldDropdown" ref={this.mainDivRef}>
-            <p style={{ float: 'right', margin: 5 }}>▼</p>
+            <p className="arrow" onClick={this.toggle}>▼</p>
             <div className="current" onClick={this.toggle}>{display}</div>
             {open && this.generateDropdown()}
         </div>;
diff --git a/webview/src/FieldTypes/dropdownwithinput.tsx b/webview/src/FieldTypes/dropdownwithinput.tsx
index b4995eb..5a6259c 100644
--- a/webview/src/FieldTypes/dropdownwithinput.tsx
+++ b/webview/src/FieldTypes/dropdownwithinput.tsx
@@ -23,7 +23,7 @@ export class FieldDropdownWithInput extends FieldBase<string | undefined, Props,
     public renderInput() {
         const { newValue, open } = this.state;
         return <div className="FieldDropdown FieldDropdownWithInput" ref={this.mainDivRef}>
-            <p className="arrow">▼</p>
+            <p className="arrow" onClick={this.toggle}>▼</p>
             <input className="current" value={newValue || ''} onChange={this.onChangeEvent} onClick={this.toggle} />
             {open && this.generateDropdown()}
         </div>;
diff --git a/webview/src/FieldTypes/index.css b/webview/src/FieldTypes/index.css
index 76c1e38..0bf4bfe 100644
--- a/webview/src/FieldTypes/index.css
+++ b/webview/src/FieldTypes/index.css
@@ -1,4 +1,3 @@
-
 div.Field {
     padding: 20px 9px 3px 9px;
 }
@@ -50,6 +49,7 @@ div.FieldDropdown {
     color: var(--vscode-settings-dropdownForeground);
     border: 1px solid var(--vscode-settings-dropdownBorder);
     position: relative;
+    cursor: pointer;
 }
 
 div.FieldDropdown > ul.list {
@@ -66,7 +66,8 @@ div.FieldDropdown > ul.list {
     box-sizing: border-box;
 }
 
-div.FieldDropdown > .current, div.FieldDropdown ul.list > li {
+div.FieldDropdown > .current,
+div.FieldDropdown ul.list > li {
     height: 1em;
     padding: 5px;
     list-style: none;
@@ -104,6 +105,8 @@ div.FieldDropdownWithInput ul.list {
     top: 100%;
     left: 0;
 }
+
+div.FieldDropdown p.arrow,
 div.FieldDropdownWithInput p.arrow {
     z-index: 999;
     top: 0;
@@ -111,6 +114,7 @@ div.FieldDropdownWithInput p.arrow {
     padding: 5px;
     right: 0;
     margin: 0;
+    cursor: pointer;
 }
 
 div.FieldPath {
@@ -162,7 +166,7 @@ div.FieldCheckbox > .description {
     margin-left: calc(var(--checkbox-size) + 10px);
 }
 
-.checkbox > .checkbox-box > .checkbox { 
+.checkbox > .checkbox-box > .checkbox {
     float: left;
     height: var(--checkbox-size);
     width: var(--checkbox-size);
@@ -174,7 +178,7 @@ div.FieldCheckbox > .description {
 }
 
 .checkbox > .checkbox-box > .checkbox.checked::before {
-    content: '\2713';
+    content: "\2713";
     display: block;
     text-align: center;
 }