Modal components (#111)

* Rename to modal & remove isActive state & related actions
* Create modal component
* Create card, header, body & footer component
* Revert to default value of addLocalRepository modal
* Split TCardHeader into TCardHeaderHeading & TCardHeaderClose
* Appen "Modal" to each mutation name
* Loading modals dynamically
   Use vue dynamic components to load modals dynamic based on the true value
* Mixins for closeModal
* Change z-index for modal overlay & navbar
* Remove `model.sass` styles
* Pass modal status as params to mutations
* Set modalName to required
* Use modal & card components and move to modal dir
* Use modal mutations to toggle modals
* Create initalizeGitRepository state & mutation
* Toggle initalizeGitRepository to repository view
* FIX: "closeModel" is not defined
* Add spacing b/w exportCommitData inputs
* Adjust inputField size in exportCommitData

src/renderer/App.vue

@@ -2,34 +2,33 @@
 	<div id="app">
 		<menubar />
 		<router-view />
-		<div v-if="this.$store.state.model.isActive" class="model__placeholder">
-			<div class="model__container">
-				<newRepository />
-				<addLocalRepository />
-				<about />
-				<exportCommitData />
-				<newRemote />
-				<initalizeGitRepository />
-				<cloneRepository />
-			</div>
-		</div>
+
+		<t-modal v-if="activeModal">
+			<components :is="modal"></components>
+		</t-modal>
+		<div v-if="activeModal" class="t-overlay"></div>
 	</div>
 </template>
 
 <script>
+// components
 import menubar from "./components/menubar";
-import newRepository from "./components/model/newRepository";
-import addLocalRepository from "./components/model/addLocalRepository";
-import about from "./components/model/about";
-import exportCommitData from "./components/model/exportCommitData";
-import newRemote from "./components/model/newRemote";
-import initalizeGitRepository from "./components/model/initalizeGitRepository";
-import cloneRepository from "./components/model/cloneRepository";
+import TModal from "./components/TModal/TModal";
+
+// modals
+import newRepository from "./modal/newRepository";
+import addLocalRepository from "./modal/addLocalRepository";
+import about from "./modal/about";
+import exportCommitData from "./modal/exportCommitData";
+import newRemote from "./modal/newRemote";
+import initalizeGitRepository from "./modal/initalizeGitRepository";
+import cloneRepository from "./modal/cloneRepository";
 
 export default {
 	name: "App",
 	components: {
 		menubar,
+		TModal,
 		newRepository,
 		addLocalRepository,
 		about,
@@ -38,6 +37,27 @@ export default {
 		initalizeGitRepository,
 		cloneRepository
 	},
+	computed: {
+		modal() {
+			let modalsActiveStatus = Object.values(this.$store.state.modal);
+			let ModalNames = Object.keys(this.$store.state.modal);
+			let activeModal = modalsActiveStatus.findIndex(result => {
+				return result === true;
+			});
+			if (ModalNames[activeModal] !== "") {
+				return ModalNames[activeModal];
+			} else {
+				return "";
+			}
+		},
+		activeModal() {
+			if (this.modal === undefined) {
+				return false;
+			} else {
+				return true;
+			}
+		}
+	},
 	beforeCreate() {
 		this.$store.commit("repository/getRepositoryList");
 		this.$store.commit("settings/getSettingsList");
@@ -46,32 +66,12 @@ export default {
 </script>
 
 <style lang="sass">
-.model
-	&__placeholder
-		position: fixed
-		left: 0
-		top: 0
-		width: 100%
-		height: 100%
-		background-color: rgba(0, 0, 0, .5)
-		z-index: 9
-
-	&__container
-		position: absolute
-		top: 50%
-		background-color: white
-		border-radius: 5px
-		left: 50%
-		transform: translate(-50%, -50%)
-		margin-left: 20px
-		margin-right: 20px
-
-	&--small
-		width: 450px
-
-	&--medium
-		width: 700px
-
-	&--large
-		width: 100%
+.t-overlay
+	position: fixed
+	top: 0
+	bottom: 0
+	left: 0
+	right: 0
+	background-color: rgba(0, 0, 0, .4)
+	z-index: 4
 </style>

src/renderer/assets/css/_utilities.sass

@@ -2,5 +2,4 @@
 @import "utilities/display"
 @import "utilities/flex"
 @import "utilities/scrollbar"
-@import "utilities/model"
 @import "utilities/settings"

src/renderer/components/TCard/TCard.vue

@@ -0,0 +1,44 @@
+<template>
+	<div class="t-card" :style="{ maxWidth: cardSize }">
+		<slot />
+	</div>
+</template>
+
+<script>
+export default {
+	name: "TCard",
+	props: {
+		width: {
+			type: [String, Number],
+			default: "medium"
+		}
+	},
+	computed: {
+		cardSize() {
+			if (!isNaN(this.width)) {
+				return this.width + "px";
+			} else {
+				switch (this.width) {
+					case "small":
+						return "450px";
+					case "medium":
+					default:
+						return "700px";
+					case "large":
+						return "100%";
+				}
+			}
+		}
+	}
+};
+</script>
+
+<style lang="sass">
+.t-card
+	background-color: white
+	box-shadow: 0px 11px 15px -7px rgba(0,0,0,0.2), 0px 24px 38px 3px rgba(0,0,0,0.14), 0px 9px 46px 8px rgba(0,0,0,0.12)
+	border-radius: .35rem
+	margin-left: 20px
+	margin-right: 20px
+	width: 100%
+</style>

src/renderer/components/TCard/TCardBody.vue

@@ -0,0 +1,18 @@
+<template>
+	<div class="t-card__body">
+		<slot />
+	</div>
+</template>
+
+<script>
+export default {
+	name: "TCardBody"
+};
+</script>
+
+<style lang="sass">
+.t-card__body
+	display: flex
+	border-bottom: 1px solid #eee
+	padding: 1rem
+</style>

src/renderer/components/TCard/TCardFooter.vue

@@ -0,0 +1,17 @@
+<template>
+	<div class="t-card__footer">
+		<slot />
+	</div>
+</template>
+
+<script>
+export default {
+	name: "TCardFooter"
+};
+</script>
+
+<style lang="sass">
+.t-card__footer
+	display: flex
+	padding: .8rem 1rem
+</style>

src/renderer/components/TCard/TCardHeader.vue

@@ -0,0 +1,18 @@
+<template>
+	<div class="t-card__header">
+		<slot />
+	</div>
+</template>
+
+<script>
+export default {
+	name: "TCardHeader"
+};
+</script>
+
+<style lang="sass">
+.t-card__header
+	display: flex
+	border-bottom: 1px solid #eee
+	padding: 0.8rem 1rem
+</style>

src/renderer/components/TCard/TCardHeaderClose.vue

@@ -0,0 +1,37 @@
+<template>
+	<div class="t-card__header-close" @click="closeModal(modalName)">
+		<close-icon />
+	</div>
+</template>
+
+<script>
+import CloseIcon from "../icon/close";
+import closeModalMixin from "../../mixins/closeModal";
+
+export default {
+	name: "TCardHeaderClose",
+	components: {
+		CloseIcon
+	},
+	mixins: [closeModalMixin],
+	props: {
+		modalName: {
+			type: String,
+			required: true
+		}
+	}
+};
+</script>
+
+<style lang="sass">
+.t-card__header
+	&-close
+		cursor: pointer
+		display: flex
+		margin-left: auto
+
+		svg
+			width: 20px
+			height: 20px
+			stroke: #7f8186
+</style>

src/renderer/components/TCard/TCardHeaderHeading.vue

@@ -0,0 +1,17 @@
+<template>
+	<div class="t-card__header-heading">
+		{{ heading }}
+	</div>
+</template>
+
+<script>
+export default {
+	name: "TCardHeaderHeading",
+	props: {
+		heading: {
+			type: String,
+			default: ""
+		}
+	}
+};
+</script>

src/renderer/components/TModal/TModal.vue

@@ -0,0 +1,24 @@
+<template>
+	<div class="t-modal">
+		<slot />
+	</div>
+</template>
+
+<script>
+export default {
+	name: "Modal"
+};
+</script>
+
+<style lang="sass">
+.t-modal
+	display: flex
+	align-items: center
+	justify-content: center
+	width: 100%
+	height: 100%
+	position: fixed
+	top: 0
+	left: 0
+	z-index: 5
+</style>

src/renderer/components/menubar.vue

@@ -286,13 +286,13 @@ export default {
 		},
 		// File
 		newRepository() {
-			this.$store.dispatch("model/showNewRepository");
+			this.$store.commit("modal/toggleNewRepositoryModal", true);
 		},
 		addLocalRepository() {
-			this.$store.dispatch("model/showAddLocalRepositoryModel");
+			this.$store.commit("modal/toggleAddLocalRepositoryModal", true);
 		},
 		cloneRepository() {
-			this.$store.dispatch("model/showCloneRepository");
+			this.$store.commit("modal/toggleCloneRepositoryModal", true);
 		},
 		switchRepository() {
 			this.$store.dispatch("workspace/switchWorkspaceRepository");
@@ -332,7 +332,7 @@ export default {
 			shell.openExternal("https://discord.gg/f5mYum8");
 		},
 		about() {
-			this.$store.dispatch("model/showAboutModel");
+			this.$store.commit("modal/toggleAboutModal", true);
 		}
 	}
 };