Move toolbar to bottom of editor

samuelmeuli · Feb 7, 2020 · 524e934 · 524e934
1 parent 0a05eb8
commit 524e934
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 20 deletions.
diff --git a/src/renderer/assets/styles/base/_variables.scss b/src/renderer/assets/styles/base/_variables.scss
@@ -58,7 +58,6 @@ $editor-max-width: 860px;
 $header-height: 37px;
 $input-height: 40px;
 $input-width: 210px;
-$editor-buttons-width: $input-height + $spacing-abs-medium;
 $scrollbar-padding: 4px;
 $scrollbar-width: 14px;
 

diff --git a/src/renderer/assets/styles/components/_editor.scss b/src/renderer/assets/styles/components/_editor.scss
@@ -1,25 +1,24 @@
 .editor {
 	@include background-color("background-input");
 	position: relative;
+	display: flex;
+	flex-direction: column;
 	border-radius: $border-radius-input;
 	box-shadow: $box-shadow-inset;
 }
 
 .editor-scrollable {
 	display: grid;
+	flex: 1;
 	grid-template-rows: auto auto 1fr;
-	width: 100%;
-	height: 100%;
 	overflow-y: auto;
 
 	@media (max-width: $screen-desktop) {
-		padding: 1.25 * $spacing-abs-large (1.25 * $spacing-abs-large + $editor-buttons-width) 0 1.25 *
-			$spacing-abs-large;
+		padding: (1.25 * $spacing-abs-large) (1.25 * $spacing-abs-large) 0 (1.25 * $spacing-abs-large);
 	}
 
 	@media (min-width: $screen-desktop + 1px) {
-		padding: (2 * $spacing-abs-large) (2 * $spacing-abs-large + $editor-buttons-width) 0
-			(2 * $spacing-abs-large);
+		padding: (2 * $spacing-abs-large) (2 * $spacing-abs-large) 0 (2 * $spacing-abs-large);
 	}
 }
 
@@ -28,18 +27,9 @@
 	font-size: 150%;
 }
 
-.editor-buttons-wrapper {
-	@include background-color("background");
-	position: absolute;
-	top: 0;
-	right: $spacing-abs-medium;
-	bottom: 0;
-	width: $input-height;
-	height: 4 * $input-height;
-	margin-top: auto;
-	margin-bottom: auto;
-	border-radius: $border-radius-button;
-	box-shadow: $box-shadow;
+.editor-toolbar {
+	@include background-color("background-hover");
+	height: $input-height;
 }
 
 // stylelint-disable selector-class-pattern

diff --git a/src/renderer/components/elements/diary-editor/editor-toolbar/EditorToolbar.tsx b/src/renderer/components/elements/diary-editor/editor-toolbar/EditorToolbar.tsx
@@ -68,7 +68,7 @@ export default class EditorToolbar extends PureComponent<Props, {}> {
 
 		return (
 			<div
-				className="editor-buttons-wrapper"
+				className="editor-toolbar"
 				onMouseDown={(e): void => {
 					e.preventDefault(); // Keep focus on editor when a button is clicked
 				}}