BlankSlate placeholder (#129)

* Create BlankSlate placeholder component
* Remove flex-direction style from BlankSlate
* Import BlankSlate component

src/renderer/components/BlankSlate.vue

@@ -0,0 +1,27 @@
+<template>
+	<t-flexbox
+		justify-content="center"
+		align-items="center"
+		class="blankslate"
+	>
+		No content to show
+	</t-flexbox>
+</template>
+
+<script>
+import TFlexbox from "./TLayouts/TFlexbox";
+
+export default {
+	name: "BlankSlate",
+	components: {
+		TFlexbox
+	}
+};
+</script>
+
+<style lang="sass">
+.blankslate
+	width: 100%
+	font-size: 12px
+	color: #7A7D84
+</style>

src/renderer/pages/repository/history.vue

@@ -39,15 +39,11 @@
 				</t-scrollbar>
 			</div>
 		</div>
-		<div class="history__preview">
-			<diffPreview
-				v-if="this.$store.state.history.filePreview.isActive"
-				:preview="commitFileDiffPreview"
-			/>
-			<div v-else>
-				No content to show
-			</div>
-		</div>
+		<diffPreview
+			v-if="this.$store.state.history.filePreview.isActive"
+			:preview="commitFileDiffPreview"
+		/>
+		<blank-slate v-else />
 	</t-flexbox>
 </template>
 
@@ -59,6 +55,7 @@ import fileIcon from "../../components/icon/file";
 import TScrollbar from "../../components/TLayouts/TScrollbar";
 import gitLog from "../../git/log";
 import logSkeleton from "../../components/skeleton/logs";
+import BlankSlate from "../../components/BlankSlate";
 import TFlexbox from "../../components/TLayouts/TFlexbox";
 
 export default {
@@ -70,6 +67,7 @@ export default {
 		TScrollbar,
 		fileIcon,
 		logSkeleton,
+		BlankSlate,
 		TFlexbox
 	},
 	data() {
@@ -146,7 +144,4 @@ export default {
 						stroke: #6C6F75
 						width: 18px
 						height: 18px
-
-	&__preview
-		padding: 10px
 </style>

src/renderer/pages/repository/workspace.vue

@@ -57,15 +57,11 @@
 				padding-right="10px"
 			/>
 		</div>
-		<div class="workspace__preview">
-			<diffPreview
-				v-if="this.$store.state.workspace.filePreview.isActive"
-				:preview="fileDiffPreview"
-			/>
-			<div v-else>
-				No file selected.
-			</div>
-		</div>
+		<diffPreview
+			v-if="this.$store.state.workspace.filePreview.isActive"
+			:preview="fileDiffPreview"
+		/>
+		<blank-slate v-else />
 	</t-flexbox>
 </template>
 
@@ -77,6 +73,7 @@ import commitMessage from "../../components/commit/commitMessage";
 import branchIcon from "../../components/icon/branch";
 import diffPreview from "../../components/diff/diffPreview";
 import fileChangesSkeleton from "../../components/skeleton/fileChanges";
+import BlankSlate from "../../components/BlankSlate";
 import TFlexbox from "../../components/TLayouts/TFlexbox";
 
 export default {
@@ -87,6 +84,7 @@ export default {
 		commitMessage,
 		diffPreview,
 		fileChangesSkeleton,
+		BlankSlate,
 		TFlexbox
 	},
 	data() {