Fix the dropdown of the currency selecto being cut off and make setti…

…ngs scrollable Fixes #414 Fixes #415 FIxes #399
atomiclabs · Jul 10, 2018 · 90cbbb6 · 90cbbb6
1 parent cf96da9
commit 90cbbb6
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 12 deletions.
diff --git a/app/renderer/components/Select.scss b/app/renderer/components/Select.scss
@@ -1,6 +1,7 @@
 @import '../styles/variables';
 
 .Select {
+	--dropdown-max-height: 200px;
 	position: relative;
 	z-index: 10;
 	text-align: left;
@@ -213,7 +214,7 @@
 .Select--multi .Select-multi-value-wrapper {
 	display: inline-block;
 	padding: 4px 2px 8px;
-	max-height: 300px;
+	max-height: 240px;
 	overflow-y: auto;
 }
 
@@ -243,7 +244,7 @@
 	border: 1px solid var(--input-border-color);
 	box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
 	margin-top: 4px;
-	max-height: 200px;
+	max-height: var(--dropdown-max-height);
 	position: absolute;
 	top: 100%;
 	width: 100%;
@@ -252,7 +253,7 @@
 }
 
 .Select-menu {
-	max-height: 198px;
+	max-height: calc(var(--dropdown-max-height) - 2px);
 	overflow-y: auto;
 }
 

diff --git a/app/renderer/views/Settings.scss b/app/renderer/views/Settings.scss
@@ -1,5 +1,7 @@
 .Settings,
 .AppSettings {
+	display: flex;
+	flex-direction: column;
 	border-radius: 4px;
 	background-color: var(--widget-background-color);
 
@@ -16,6 +18,10 @@
 	}
 
 	main {
+		display: flex;
+		flex-direction: column;
+		overflow-x: hidden;
+		overflow-y: auto;
 		padding: 30px;
 
 		h3 {
@@ -35,25 +41,24 @@
 			color: var(--text-color);
 			line-height: 1.5;
 		}
-
-		.enabled-currencies {
-			margin: 5px 0;
-		}
 	}
 }
 
 .Settings {
-	width: 600px;
+	width: 660px;
 	height: 100%;
 	margin: 0 auto;
+
+	main {
+		.enabled-currencies {
+			--dropdown-max-height: 160px;
+			margin: 5px 0;
+		}
+	}
 }
 
 .AppSettings {
-	display: flex;
-	flex-direction: column;
 	margin: 70px 50px;
-	overflow-x: hidden;
-	overflow-y: auto;
 
 	.window-draggable-area {
 		width: 100%;

diff --git a/app/renderer/views/Settings/Currency.js b/app/renderer/views/Settings/Currency.js
@@ -49,6 +49,13 @@ class CurrencySetting extends React.Component {
 					onChange={this.handleSelectChange}
 					valueRenderer={CurrencySelectOption}
 					optionRenderer={CurrencySelectOption}
+					onOpen={() => {
+						// TODO: This is very ugly, but not worth doing better since
+						// React Select v2 will soon be out and will be completely different.
+						// We can perfect it more then.
+						const mainElement = document.body.querySelector('.Settings main');
+						mainElement.scrollTop = mainElement.scrollHeight;
+					}}
 				/>
 			</div>
 		);