From f267f3a7e296c215c6bd1400a87eeb290231969b Mon Sep 17 00:00:00 2001
From: Peterson JEAN <petersonjean45@gmail.com>
Date: Tue, 22 Oct 2019 16:45:38 -0400
Subject: [PATCH 1/2] Added  icon and text style for empty pages

---
 src/views/Issues.vue   | 27 +++++++++++++++++++++++++--
 src/views/Projects.vue | 29 ++++++++++++++++++++++++++---
 src/views/Runners.vue  | 28 +++++++++++++++++++++++++---
 src/views/Todos.vue    | 27 +++++++++++++++++++++++++--
 4 files changed, 101 insertions(+), 10 deletions(-)

diff --git a/src/views/Issues.vue b/src/views/Issues.vue
index bf82317..8e4a914 100644
--- a/src/views/Issues.vue
+++ b/src/views/Issues.vue
@@ -7,8 +7,22 @@
       </template>
     </v-list>
     <v-layout v-else ma-4>
-      <v-flex>
-        <span>Looks like you do not have created any issue...</span>
+      <v-flex xs12 md6 class="empty-message" style="margin:auto"  >
+        <v-layout
+           row fill-height
+        >
+        <v-flex xs12 >
+          <v-icon size="100"  :color="(darkMode) ? `grey darken-2` : `grey lighten-4`">bug_report</v-icon>
+        </v-flex> 
+        </v-layout>
+        <v-layout
+          row fill-height
+        >
+        <v-flex xs12 > 
+          <span class="text-xs-center display-1">Looks like you do not have created any issue...</span>
+        </v-flex> 
+        </v-layout>
+       
       </v-flex>
     </v-layout>
   </div>
@@ -32,3 +46,12 @@ export default {
   methods: {}
 };
 </script>
+<style lang="css" scoped>
+  .empty-message{
+    margin: auto;
+    text-align: center;
+    border: 3px solid currentColor;
+    border-style: dashed;
+    padding: 5%;
+  }
+</style>
diff --git a/src/views/Projects.vue b/src/views/Projects.vue
index feb5f1d..a1c4e77 100644
--- a/src/views/Projects.vue
+++ b/src/views/Projects.vue
@@ -6,9 +6,23 @@
         <v-divider v-if="index + 1 < projects.length" :key="index"></v-divider>
       </template>
     </v-list>
-    <v-layout v-else ma-4>
-      <v-flex>
-        <span>No projects to show...</span>
+    <v-layout v-else ma-4> 
+      <v-flex xs12 md6 class="empty-message" style="margin:auto"  >
+        <v-layout
+           row fill-height
+        >
+        <v-flex xs12 >
+          <v-icon size="100"  :color="(darkMode) ? `grey darken-2` : `grey lighten-4`">lightbulb</v-icon>
+        </v-flex> 
+        </v-layout>
+        <v-layout
+          row fill-height
+        >
+        <v-flex xs12 > 
+          <span class="text-xs-center display-1">No projects to show...</span>
+        </v-flex> 
+        </v-layout>
+       
       </v-flex>
     </v-layout>
   </div>
@@ -31,3 +45,12 @@ export default {
   }
 };
 </script>
+<style lang="css" scoped>
+  .empty-message{
+    margin: auto;
+    text-align: center;
+    border: 3px solid currentColor;
+    border-style: dashed;
+    padding: 5%;
+  }
+</style>
diff --git a/src/views/Runners.vue b/src/views/Runners.vue
index 8b9cb47..187b75d 100644
--- a/src/views/Runners.vue
+++ b/src/views/Runners.vue
@@ -6,9 +6,22 @@
         <v-divider v-if="index + 1 < runners.length" :key="index" ></v-divider>
       </template>
     </v-list>
-    <v-layout v-else ma-4>
-      <v-flex>
-        <span>Looks like you do not have enough rights to access the runners Gitlab API.</span>
+    <v-layout v-else ma-4> 
+      <v-flex xs12 md6 class="empty-message" style="margin:auto"  >
+        <v-layout
+           row fill-height
+        >
+        <v-flex xs12 >
+          <v-icon size="100"  :color="(darkMode) ? `grey darken-2` : `grey lighten-4`">directions_run</v-icon>
+        </v-flex> 
+        </v-layout>
+        <v-layout
+          row fill-height
+        >
+        <v-flex xs12 > 
+          <span class="text-xs-center display-1">Looks like you do not have enough rights to access the runners Gitlab API.</span>
+        </v-flex>
+        </v-layout>
       </v-flex>
     </v-layout>
   </div>
@@ -32,3 +45,12 @@ export default {
   methods: {}
 };
 </script>
+<style lang="css" scoped>
+  .empty-message{
+    margin: auto;
+    text-align: center;
+    border: 3px solid red;
+    border-style: dashed;
+    padding: 5%;
+  }
+</style>
diff --git a/src/views/Todos.vue b/src/views/Todos.vue
index 3495696..1699945 100644
--- a/src/views/Todos.vue
+++ b/src/views/Todos.vue
@@ -13,8 +13,22 @@
       </template>
     </v-list>
     <v-layout v-else ma-4>
-      <v-flex>
-        <span>Looks like you do not have anything to do...</span>
+       <v-flex xs12 md6 class="empty-message" style="margin:auto"  >
+        <v-layout
+           row fill-height
+        >
+        <v-flex xs12 >
+          <v-icon size="100"  :color="(darkMode) ? `grey darken-2` : `grey lighten-4`">list</v-icon>
+        </v-flex> 
+        </v-layout>
+        <v-layout
+          row fill-height
+        >
+        <v-flex xs12 > 
+          <span class="text-xs-center display-1">Looks like you do not have anything to do...</span>
+        </v-flex> 
+        </v-layout>
+       
       </v-flex>
     </v-layout>
   </div>
@@ -42,3 +56,12 @@ export default {
   }
 };
 </script>
+<style lang="css" scoped>
+  .empty-message{
+    margin: auto;
+    text-align: center;
+    border: 3px solid currentColor;
+    border-style: dashed;
+    padding: 5%;
+  }
+</style>

From 5c303e7a2a20a5ce564307484d09aacba03c8e6d Mon Sep 17 00:00:00 2001
From: Peterson JEAN <petersonjean45@gmail.com>
Date: Thu, 24 Oct 2019 12:05:35 -0400
Subject: [PATCH 2/2] added reusable  empty message component

---
 src/components/EmptyMessage.vue | 52 +++++++++++++++++++++++++++++++++
 src/views/Issues.vue            | 36 ++++++-----------------
 src/views/Projects.vue          | 38 +++++++-----------------
 src/views/Runners.vue           | 37 +++++++----------------
 src/views/Todos.vue             | 36 ++++++-----------------
 5 files changed, 90 insertions(+), 109 deletions(-)
 create mode 100644 src/components/EmptyMessage.vue

diff --git a/src/components/EmptyMessage.vue b/src/components/EmptyMessage.vue
new file mode 100644
index 0000000..ea6747c
--- /dev/null
+++ b/src/components/EmptyMessage.vue
@@ -0,0 +1,52 @@
+<template>
+  <v-flex xs12 md6 class="empty-message"   style="margin:auto"   :color="(darkMode) ? `grey darken-2` : `grey lighten-4`">
+    <v-layout row fill-height>
+      <v-flex xs12>
+        <v-icon :size="iconSize"  :color="(darkMode) ? `grey darken-2` : `grey lighten-4`">{{ icon }}</v-icon>
+      </v-flex>
+    </v-layout>
+    <v-layout row fill-height>
+      <v-flex xs12>
+        <span class="text-xs-center" :class="fontSize">{{ message }}</span>
+      </v-flex>
+    </v-layout>
+  </v-flex>
+</template>
+
+<script>
+export default {
+  name: "EmptyMessage",
+  props: {
+    icon: {
+      type: String,
+      required: true
+    },
+    iconSize: {
+      type: String,
+      required: true
+    },
+    fontSize: {
+      type: String,
+      required: true
+    },
+    message: {
+      type: String,
+      required: true
+    }
+  },
+  computed: {
+    darkMode() {
+      return this.$store.state.settings.darkMode;
+    }
+  }
+};
+</script>
+<style lang="css" scoped>
+.empty-message{
+  margin: auto;
+  text-align: center;
+  border: 3px solid;
+  border-style: dashed;
+  padding: 5%;
+}
+</style>
diff --git a/src/views/Issues.vue b/src/views/Issues.vue
index 8e4a914..20e3929 100644
--- a/src/views/Issues.vue
+++ b/src/views/Issues.vue
@@ -7,23 +7,12 @@
       </template>
     </v-list>
     <v-layout v-else ma-4>
-      <v-flex xs12 md6 class="empty-message" style="margin:auto"  >
-        <v-layout
-           row fill-height
-        >
-        <v-flex xs12 >
-          <v-icon size="100"  :color="(darkMode) ? `grey darken-2` : `grey lighten-4`">bug_report</v-icon>
-        </v-flex> 
-        </v-layout>
-        <v-layout
-          row fill-height
-        >
-        <v-flex xs12 > 
-          <span class="text-xs-center display-1">Looks like you do not have created any issue...</span>
-        </v-flex> 
-        </v-layout>
-       
-      </v-flex>
+      <empty-message
+        message="Looks like you do not have created any issue..."
+        icon="bug_report"
+        icon-size="100"
+        font-size="display-1"
+      ></empty-message>
     </v-layout>
   </div>
 </template>
@@ -31,11 +20,13 @@
 <script>
 import { mapGetters } from "vuex";
 import Issue from "@/components/Issue.vue";
+import EmptyMessage from "@/components/EmptyMessage.vue";
 
 export default {
   name: "issues",
   components: {
-    Issue
+    Issue,
+    EmptyMessage
   },
   computed: {
     ...mapGetters({
@@ -46,12 +37,3 @@ export default {
   methods: {}
 };
 </script>
-<style lang="css" scoped>
-  .empty-message{
-    margin: auto;
-    text-align: center;
-    border: 3px solid currentColor;
-    border-style: dashed;
-    padding: 5%;
-  }
-</style>
diff --git a/src/views/Projects.vue b/src/views/Projects.vue
index a1c4e77..166b73e 100644
--- a/src/views/Projects.vue
+++ b/src/views/Projects.vue
@@ -6,24 +6,13 @@
         <v-divider v-if="index + 1 < projects.length" :key="index"></v-divider>
       </template>
     </v-list>
-    <v-layout v-else ma-4> 
-      <v-flex xs12 md6 class="empty-message" style="margin:auto"  >
-        <v-layout
-           row fill-height
-        >
-        <v-flex xs12 >
-          <v-icon size="100"  :color="(darkMode) ? `grey darken-2` : `grey lighten-4`">lightbulb</v-icon>
-        </v-flex> 
-        </v-layout>
-        <v-layout
-          row fill-height
-        >
-        <v-flex xs12 > 
-          <span class="text-xs-center display-1">No projects to show...</span>
-        </v-flex> 
-        </v-layout>
-       
-      </v-flex>
+    <v-layout v-else ma-4>
+      <empty-message
+        message="No projects to show..."
+        icon="lightbulb"
+        icon-size="100"
+        font-size="display-1"
+      ></empty-message>
     </v-layout>
   </div>
 </template>
@@ -31,11 +20,13 @@
 <script>
 import { mapGetters } from "vuex";
 import Project from "@/components/Project.vue";
+import EmptyMessage from "@/components/EmptyMessage.vue";
 
 export default {
   name: "projects",
   components: {
-    Project
+    Project,
+    EmptyMessage
   },
   computed: {
     ...mapGetters({
@@ -45,12 +36,3 @@ export default {
   }
 };
 </script>
-<style lang="css" scoped>
-  .empty-message{
-    margin: auto;
-    text-align: center;
-    border: 3px solid currentColor;
-    border-style: dashed;
-    padding: 5%;
-  }
-</style>
diff --git a/src/views/Runners.vue b/src/views/Runners.vue
index 187b75d..02796c2 100644
--- a/src/views/Runners.vue
+++ b/src/views/Runners.vue
@@ -6,23 +6,13 @@
         <v-divider v-if="index + 1 < runners.length" :key="index" ></v-divider>
       </template>
     </v-list>
-    <v-layout v-else ma-4> 
-      <v-flex xs12 md6 class="empty-message" style="margin:auto"  >
-        <v-layout
-           row fill-height
-        >
-        <v-flex xs12 >
-          <v-icon size="100"  :color="(darkMode) ? `grey darken-2` : `grey lighten-4`">directions_run</v-icon>
-        </v-flex> 
-        </v-layout>
-        <v-layout
-          row fill-height
-        >
-        <v-flex xs12 > 
-          <span class="text-xs-center display-1">Looks like you do not have enough rights to access the runners Gitlab API.</span>
-        </v-flex>
-        </v-layout>
-      </v-flex>
+    <v-layout v-else ma-4>
+      <empty-message
+        message="Looks like you do not have enough rights to access the runners Gitlab API."
+        icon="directions_run"
+        iconSize="100"
+        fontSize="display-1"
+      ></empty-message>
     </v-layout>
   </div>
 </template>
@@ -30,11 +20,13 @@
 <script>
 import { mapGetters } from "vuex";
 import Runner from "@/components/Runner.vue";
+import EmptyMessage from "@/components/EmptyMessage.vue";
 
 export default {
   name: "runners",
   components: {
-    Runner
+    Runner,
+    EmptyMessage
   },
   computed: {
     ...mapGetters({
@@ -45,12 +37,3 @@ export default {
   methods: {}
 };
 </script>
-<style lang="css" scoped>
-  .empty-message{
-    margin: auto;
-    text-align: center;
-    border: 3px solid red;
-    border-style: dashed;
-    padding: 5%;
-  }
-</style>
diff --git a/src/views/Todos.vue b/src/views/Todos.vue
index 1699945..3adaf6f 100644
--- a/src/views/Todos.vue
+++ b/src/views/Todos.vue
@@ -13,23 +13,12 @@
       </template>
     </v-list>
     <v-layout v-else ma-4>
-       <v-flex xs12 md6 class="empty-message" style="margin:auto"  >
-        <v-layout
-           row fill-height
-        >
-        <v-flex xs12 >
-          <v-icon size="100"  :color="(darkMode) ? `grey darken-2` : `grey lighten-4`">list</v-icon>
-        </v-flex> 
-        </v-layout>
-        <v-layout
-          row fill-height
-        >
-        <v-flex xs12 > 
-          <span class="text-xs-center display-1">Looks like you do not have anything to do...</span>
-        </v-flex> 
-        </v-layout>
-       
-      </v-flex>
+      <empty-message
+        message="Looks like you do not have anything to do..."
+        icon="list"
+        icon-size="100"
+        font-size="display-1"
+      ></empty-message>
     </v-layout>
   </div>
 </template>
@@ -37,11 +26,13 @@
 <script>
 import { mapGetters } from "vuex";
 import Todo from "@/components/Todo.vue";
+import EmptyMessage from "@/components/EmptyMessage.vue";
 
 export default {
   name: "todos",
   components: {
-    Todo
+    Todo,
+    EmptyMessage
   },
   computed: {
     ...mapGetters({
@@ -56,12 +47,3 @@ export default {
   }
 };
 </script>
-<style lang="css" scoped>
-  .empty-message{
-    margin: auto;
-    text-align: center;
-    border: 3px solid currentColor;
-    border-style: dashed;
-    padding: 5%;
-  }
-</style>