Small improvements to Dropdown(WithInput) UI components

SchoofsKelvin · Feb 17, 2022 · 9c83b07 · 9c83b07
1 parent b477887
commit 9c83b07
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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,13 +105,16 @@ div.FieldDropdownWithInput ul.list {
     top: 100%;
     left: 0;
 }
+
+div.FieldDropdown p.arrow,
 div.FieldDropdownWithInput p.arrow {
     z-index: 999;
     top: 0;
     position: absolute;
     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;
 }