TLayout components (#133)

* TFlexbox layout (#128)
* Create TFlexbox layout component
* Apply TFlexbox layout component
* Flexbox the repository index view
* Use TFlexbox layout to menubar
* Use TFlexbox layout component
* Use TFlexbox to windowsButton component
* Add flexGrow props to TFlexbox props
* Switch from flex classes to TFlexbox layout component
* Use TFlexbox layout component
* TFlexbox in dropdownList component
* TFlexbox in commitInformation component
* TFlexbox in commitHistoryItem component
* Scrollbar layout (#115)
* Create scrollbar layout component
* Add height props to TScrollbar component
  As VueScrollbar requires a height and based on which it can create a scrollbar.
* Use TScrollbar component
* Change to TScrollbar component in diffPreview
* Use TScrollbar layout component
* Add refs for calculating size of elements
* Change TScrollbar layout component
* Use TFlexbox to experimental page
* TContainer layout (#137)
* Create TContainer layout component
* Remove container.sass styles
* Fix menubar dropdown toggle
* Container fluid props
* Add width props to TScrollbar
* Use TContainer in settings page
* Use TContainer in repository stats
* Use TContainer in repository settings
* Set width 100% & static height
* Format the indentation of codebase
* Set root element size to 1000%
* Use flexbox layout for group settings
* Calculate height inline height attribute
* Add flexbox styles to t-flexbox layout
* Bug fix: Duplicate key 'components'
  https://dev.azure.com/codecarrot/Thermal/_build/results?buildId=715&view=logs&jobId=03c9b7aa-3025-5776-c20a-35d2538e500f&taskId=e9b0d7bb-2e43-53fa-b0ce-11002919699b&lineStart=104&lineEnd=104&colStart=49&colEnd=75
* Add css class styles to experimental items
  Add css class style "settings__section__group__item"
* Center welcome page heading
* Remove flexbox class styles
* FIX: Example repository modal positioning
* BlankSlate placeholder (#129)
* Create BlankSlate placeholder component
* Remove flex-direction style from BlankSlate
* Import BlankSlate component
* Format the code
* Change to default value to null of height props
  Remove required as true in height props and set default value as null.
* Manually calculate height of scrollbar
* Set 300px min width of history logs
* Set history page to flex grow 1
* Optamize performace: Display of logs & commit detail
  Improve performace by not removing history logs list from DOM and just display none when commit detail is enabled.

src/renderer/App.vue

@@ -1,8 +1,7 @@
 <template>
 	<div id="app">
 		<menubar />
-		<router-view />
-
+		<router-view style="height: 100%" />
 		<t-modal v-if="activeModal">
 			<components :is="modal"></components>
 		</t-modal>
@@ -66,6 +65,10 @@ export default {
 </script>
 
 <style lang="sass">
+html, body, #app
+	width: 100%
+	height: 100%
+
 .t-overlay
 	position: fixed
 	top: 0

src/renderer/assets/css/all.sass

@@ -1,6 +1,5 @@
 @import 'base'
 @import 'font'
 @import 'utilities'
-@import 'container'
 @import 'type'
 @import 'spacing'

src/renderer/assets/css/utilities/_settings.sass

@@ -1,7 +1,5 @@
 .settings
-
 	&__input
-
 		&:not(:last-child)
 			margin-bottom: .8rem
 
@@ -12,14 +10,9 @@
 			border: 1px solid #eee
 			border-radius: .3rem
 			padding: 1rem
-
-			&__item
-				display: flex
-				flex-direction: row
-				align-items: center
 
+			&__item
 				p
-
 					a
 						border-bottom: 1px solid #00adb5
 

src/renderer/components/BlankSlate.vue

@@ -0,0 +1,23 @@
+<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/components/TLayouts/TContainer.vue

@@ -0,0 +1,46 @@
+<template>
+	<div
+		class="container"
+		:class="{
+			container__fluid: fluid
+		}"
+	>
+		<slot />
+	</div>
+</template>
+
+<script>
+export default {
+	name: "TContainer",
+	props: {
+		fluid: {
+			type: Boolean,
+			default: false
+		}
+	}
+};
+</script>
+
+<style lang="sass">
+.container
+	width: 100%
+	padding-right: 15px
+	padding-left: 15px
+	margin-right: auto
+	margin-left: auto
+
+.container__fluid
+	min-width: 100%
+
+@media (min-width: 576px)
+	.container
+		max-width: 540px
+
+@media (min-width: 768px)
+	.container
+		max-width: 720px
+
+@media (min-width: 992px)
+	.container
+		max-width: 960px
+</style>

src/renderer/components/TLayouts/TFlexbox.vue

@@ -0,0 +1,47 @@
+<template>
+	<div
+		:style="{
+			display: 'flex',
+			flexDirection: flexDirection,
+			justifyContent: justifyContent,
+			flexWrap: flexWrap,
+			alignItems: alignItems,
+			alignSelf: alignSelf,
+			flexGrow: flexGrow
+		}"
+	>
+		<slot />
+	</div>
+</template>
+
+<script>
+export default {
+	name: "TFlexbox",
+	props: {
+		flexDirection: {
+			type: String,
+			default: null
+		},
+		flexWrap: {
+			type: String,
+			default: null
+		},
+		justifyContent: {
+			type: String,
+			default: null
+		},
+		alignItems: {
+			type: String,
+			default: null
+		},
+		alignSelf: {
+			type: String,
+			default: null
+		},
+		flexGrow: {
+			type: Number,
+			default: null
+		}
+	}
+};
+</script>

src/renderer/components/TLayouts/TScrollbar.vue

@@ -0,0 +1,26 @@
+<template>
+	<vue-scrollbar :style="{ height: height, width: width }">
+		<slot />
+	</vue-scrollbar>
+</template>
+
+<script>
+import VueScrollbar from "vue2-scrollbar";
+
+export default {
+	name: "TScrollbarLayout",
+	components: {
+		VueScrollbar
+	},
+	props: {
+		height: {
+			type: String,
+			default: null
+		},
+		width: {
+			type: String,
+			default: null
+		}
+	}
+};
+</script>

src/renderer/components/commit/commitHistoryItem.vue

@@ -1,44 +1,55 @@
 <template>
-	<div>
+	<t-flexbox flex-direction="column">
 		<a
-			class="history__item d-flex flex-column"
+			class="history__item"
 			@mouseenter="showFiles(data.hash)"
 			@mouseleave="hideFiles()"
 		>
 			<div :title="data.message" class="history__item__title">
 				{{ data.message }}
 			</div>
-			<div class="history__item__author d-flex flex-row align-items-center">
+			<t-flexbox
+				flex-direction="row"
+				align-items="center"
+				class="history__item__author"
+			>
 				<img
 					class="history__item__author__image"
 					src="../../../../static/image/user_avatar.png"
 				/>
 				{{ data.author_name }} committed {{ data.date | moment("from", "now") }}
-			</div>
+			</t-flexbox>
 		</a>
-		<div
+		<t-flexbox
 			v-if="
 				$store.state.settings.experimental.quickFilePreview && files.isActive
 			"
+			flex-direction="column"
 			class="history__files"
 		>
 			<dropdown-list class="history__files__dropdown">
 				<dropdown-item v-for="item in files.list" :key="item">
 					{{ item }}
 				</dropdown-item>
 			</dropdown-list>
-		</div>
-	</div>
+		</t-flexbox>
+	</t-flexbox>
 </template>
 
 <script>
 import showMixin from "../../git/show";
 import trimFilePathMixin from "../../mixins/trimFilePath";
+import TFlexbox from "../TLayouts/TFlexbox";
 import DropdownList from "../dropdown/dropdownList";
 import DropdownItem from "../dropdown/dropdownItem";
 
 export default {
 	name: "CommitHistoryItem",
+	components: {
+		TFlexbox,
+		DropdownList,
+		DropdownItem
+	},
 	props: {
 		data: {
 			type: Object,
@@ -53,10 +64,6 @@ export default {
 			}
 		};
 	},
-	components: {
-		DropdownList,
-		DropdownItem
-	},
 	computed: {
 		currentRepository() {
 			return this.$store.getters["workspace/currentRepository"];

src/renderer/components/commit/commitInformation.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="commit__detail">
-		<div class="commit__detail__author">
+		<t-flexbox flex-direction="row" class="commit__detail__author">
 			<img
 				class="commit__detail__author__image"
 				src="../../../../static/image/user_avatar.png"
@@ -13,7 +13,7 @@
 					{{ commitInformation.author.email }}
 				</p>
 			</div>
-		</div>
+		</t-flexbox>
 		<div class="commit__detail__summary">
 			<div class="commit__detail__summary__title">
 				{{ commitInformation.title }}
@@ -123,9 +123,13 @@
 import showMixin from "../../git/show";
 import diffMixin from "../../git/diff";
 import trimFilePathMixin from "../../mixins/trimFilePath";
+import TFlexbox from "../TLayouts/TFlexbox";
 
 export default {
 	name: "CommitInformation",
+	components: {
+		TFlexbox
+	},
 	computed: {
 		commitInformation() {
 			return this.$store.getters["history/getCommitInformation"];
@@ -268,8 +272,6 @@ export default {
 	&__author
 		padding: 10px
 		border-bottom: 1px solid #DEE0E3
-		display: flex
-		flex-direction: row
 
 		&__image
 			width: 50px
@@ -306,7 +308,6 @@ export default {
 				color: #2E3034
 
 	&__files
-
 		&__summary
 			padding: 10px
 			color: #BEBEBE

src/renderer/components/diff/diffPreview.vue

@@ -1,20 +1,20 @@
 <template>
-	<VueScrollbar class="diff__preview">
+	<t-scrollbar height="90vh">
 		<div>
 			<div v-for="(line, index) in preview" :key="index">
 				{{ line }}
 			</div>
 		</div>
-	</VueScrollbar>
+	</t-scrollbar>
 </template>
 
 <script>
-import VueScrollbar from "vue2-scrollbar";
+import TScrollbar from "../TLayouts/TScrollbar";
 
 export default {
 	name: "DiffPreview",
 	components: {
-		VueScrollbar
+		TScrollbar
 	},
 	props: {
 		preview: {
@@ -24,8 +24,3 @@ export default {
 	}
 };
 </script>
-
-<style lang="sass">
-.diff__preview
-	max-height: 90vh
-</style>