Merge pull request #3 from kudapara/new-ui

Revamp the ui to be more user friendly and aesthetically pleasing

package.json

@@ -1,6 +1,6 @@
 {
   "name": "assignme",
-  "version": "0.16.1",
+  "version": "1.0.0-alpha1",
   "author": "Kudakwashe Paradzayi <[email protected]>",
   "description": "A project to help me remember the assignments I have been given",
   "license": "MIT",

src/main/index.js

@@ -5,7 +5,9 @@ import Api from '../api'
 import fs from 'fs'
 
 const dbFolder = `${app.getPath('documents')}/assignme`
-const dbPath = `${dbFolder}/db.json`
+const dbPath = process.env.NODE_ENV === 'development'
+  ? `${dbFolder}/db_dev.json`
+  : `${dbFolder}/db.json`
 
 // Check if the ~/Documents/assignme folder and create it if it doesn't exist
 if (!fs.existsSync(dbFolder)) fs.mkdirSync(dbFolder)
@@ -29,7 +31,7 @@ function createWindow () {
    * Initial window options
    */
   mainWindow = new BrowserWindow({
-    height: 620,
+    height: 650,
     useContentSize: true,
     width: 1000
   })

src/renderer/App.vue

@@ -2,40 +2,56 @@
   <v-app id="app">
     <!-- show alerts using the snackbar -->
     <app-alert :alert="alert" :showAlert="showAlert" @close="closeAlert"></app-alert>
-    <app-toolbar></app-toolbar>
+    <app-navigation-drawer v-if="authenticated"></app-navigation-drawer>
+    <app-toolbar v-if="authenticated"></app-toolbar>
 
-    <v-container id="wrapping">
-      <router-view></router-view>
-    </v-container>
+    <!-- The Main content -->
+    <main>
+      <v-container id="wrapping" fluid>
+        <router-view></router-view>
+      </v-container>
+    </main>
+
+    <!--The footer region -->
+    <v-footer class="pa-3 pinkish" fixed>
+      <v-spacer></v-spacer>
+      <div class="pink--text">assignme v{{version}}</div>
+    </v-footer>
   </v-app>
 </template>
 
 <script>
   import AppAlert from '@/components/AppAlert'
+  import AppNavigationDrawer from '@/components/AppNavigationDrawer'
   import AppToolbar from '@/components/AppToolbar'
 
   export default {
     name: 'assignme',
 
-    components: { AppAlert, AppToolbar },
+    components: { AppAlert, AppNavigationDrawer, AppToolbar },
 
     data () {
       return {
-        showAlert: false
+        showAlert: false,
+        version: require('../../package.json').version
       }
     },
 
     methods: {
       closeAlert () {
         this.$store.commit('closeAlert')
+      },
+      open (link) {
+        this.$electron.shell.openExternal(link)
       }
     },
 
     computed: {
       alert () {
         this.showAlert = this.$store.getters.alert.show
         return this.$store.getters.alert
-      }
+      },
+      authenticated () { return !!this.$store.getters.authUser === true }
     }
   }
 </script>
@@ -44,4 +60,7 @@
   /* CSS */
   @import './stylus/main'
   body { font-family: 'Ubuntu', 'Source Sans Pro', sans-serif; }
+  .pinkish {
+    border-top 0.2px solid pink
+  }
 </style>

src/renderer/components/AppAlert.vue

@@ -5,7 +5,8 @@
       :info="alert.type === 'info'"
       :error="alert.type === 'error'"
       :timeout="2000"
-      top
+      bottom
+      right
       v-model="show">
       {{ alert.title }}
       <v-btn class="white" @click.native="$emit('close')">

src/renderer/components/AppNavigationDrawer.vue

@@ -0,0 +1,143 @@
+<template>
+ <v-navigation-drawer
+      permanent
+      light
+      right
+      enable-resize-watcher
+      absolute
+      class="elevation-1"
+      style="position:fixed;"
+      >
+
+      <v-list dense class="pt-0">
+        <v-subheader v-text="'Tasks'"></v-subheader>
+        <v-list-tile v-for="item in items" :key="item.title" @click="showTasksByStatus(item.status)">
+          <v-list-tile-action>
+            <v-progress-circular
+              v-bind:rotate="360"
+              v-bind:value="item.percent"
+              :size="30"
+              :class="{
+                  'red--text': item.color === 'red',
+                  'orange--text': item.color === 'orange',
+                  'green--text': item.color === 'green',
+                  'pink--text': item.color === 'pink',
+                  }">
+              {{ item.value }}
+            </v-progress-circular>
+          </v-list-tile-action>
+          <v-list-tile-content>
+            <v-list-tile-title>{{ item.title }}</v-list-tile-title>
+          </v-list-tile-content>
+        </v-list-tile>
+
+        <v-divider></v-divider>
+
+        <v-subheader v-text="'Actions'"></v-subheader>
+        <v-list-tile router to="/create">
+          <v-list-tile-content class="pink--text">
+            <span><v-icon class="pink--text">add</v-icon> New Task</span>
+          </v-list-tile-content>
+        </v-list-tile>
+
+        <v-list-tile @click="open('https://github.com/kudapara/assignme/releases')">
+          <v-list-tile-content class="pink--text">
+            <span><v-icon class="pink--text">update</v-icon> Check for updates</span>
+          </v-list-tile-content>
+        </v-list-tile>
+
+        <v-list-tile @click="signOut">
+          <v-list-tile-content class="pink--text">
+            <span><v-icon class="pink--text">lock_outline</v-icon> Lock App</span>
+          </v-list-tile-content>
+        </v-list-tile>
+      </v-list>
+    </v-navigation-drawer>
+ </template>
+
+<script>
+export default {
+  data () {
+    return {
+      drawer: null,
+      right: null,
+      drawerRight: true
+    }
+  },
+
+  methods: {
+    showTasksByStatus (status) {
+      this.$store.commit('setTaskStatus', status)
+      this.$router.push('/')
+    },
+    signOut () {
+      this.$store.commit('signOut')
+      this.$router.push('/signin')
+    },
+    open (link) {
+      this.$electron.shell.openExternal(link)
+    }
+  },
+
+  computed: {
+    taskStatus () {
+      return this.$store.getters.taskStatus
+    },
+    items () {
+      return [
+        {
+          title: 'New',
+          value: this.idleTasks.length,
+          status: 'idle',
+          percent: this.idleTasks.length === 0
+            ? 0
+            : (100 * (this.allTasks.length / this.idleTasks.length)),
+          color: 'red' },
+        {
+          title: 'In progress',
+          value: this.startedTasks.length,
+          status: 'started',
+          percent: this.startedTasks.length === 0
+            ? 0
+            : (100 * (this.allTasks.length / this.startedTasks.length)),
+          color: 'orange'
+        },
+        {
+          title: 'Completed',
+          value: this.finishedTasks.length,
+          status: 'finished',
+          percent: this.finishedTasks.length === 0
+            ? 0
+            : (100 * (this.allTasks.length / this.finishedTasks.length)),
+          color: 'green'
+        },
+        {
+          title: 'All',
+          value: this.allTasks.length,
+          status: 'all',
+          percent: this.allTasks.length === 0
+            ? 0
+            : 100,
+          color: 'pink'
+        }
+      ]
+    },
+    allTasks () {
+      return this.$store.getters.tasks
+    },
+    idleTasks () {
+      return this.allTasks.filter(task => task.status === 'new')
+    },
+    startedTasks () {
+      return this.allTasks.filter(task => task.status === 'in_progress')
+    },
+    finishedTasks () {
+      return this.allTasks.filter(task => task.status === 'done')
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

src/renderer/components/AppTaskList.vue

@@ -40,19 +40,19 @@
         <span class="grey--text"><v-icon>date_range</v-icon><b> Due {{ task.deadline | niceDate }}</b></span>
         <v-spacer></v-spacer>
 
-        <v-btn v-if="taskToExpand !== task.id" icon class="primary white--text" @click.native="taskToExpand = task.id">
-          <v-icon dark>expand_more</v-icon>
+        <v-btn v-if="taskToExpand !== task.id" class="white--text" @click.native="taskToExpand = task.id" small fab>
+          <v-icon class="primary--text">expand_more</v-icon>
         </v-btn>
-        <v-btn v-if="taskToExpand === task.id" icon class="primary white--text" @click.native="taskToExpand = ''">
-          <v-icon dark>expand_less</v-icon>
+        <v-btn v-if="taskToExpand === task.id" class="white--text" @click.native="taskToExpand = ''" small fab>
+          <v-icon class="primary--text">expand_less</v-icon>
         </v-btn>
 
-        <v-btn icon class="green white--text" @click.native="$emit('editTask', task)">
-          <v-icon dark>edit</v-icon>
+        <v-btn class="white--text" @click.native="$emit('editTask', task)" small fab>
+          <v-icon class="green--text">edit</v-icon>
         </v-btn>
 
-        <v-btn @click.native="$emit('deleteTask', task)" class="red white--text" dark icon>
-          <v-icon dark>delete</v-icon>
+        <v-btn @click.native="$emit('deleteTask', task)" class=" white--text" small fab>
+          <v-icon class="red--text">delete</v-icon>
         </v-btn>
       </v-card-actions>
     </v-card>

src/renderer/components/AppTaskTimeline.vue

@@ -1,6 +1,6 @@
 <template>
  <div>
-    <section id="cd-timeline" class="cd-container">
+    <section id="cd-timeline" class="cd-container" v-if="tasks.length">
       <div class="cd-timeline-block" v-for="task in tasks" :key="task.id" >
         <div :class="{
         new: task.status === 'new',
@@ -25,11 +25,11 @@
           </h3>
           <p>{{task.description}}</p>
 
-          <v-btn small fab class="cd-read-more red white--text" @click.native="$emit('deleteTask', task)">
-            <v-icon class="white--text">delete</v-icon>
+          <v-btn small fab class="cd-read-more  white--text" @click.native="$emit('deleteTask', task)">
+            <v-icon class="red--text">delete</v-icon>
           </v-btn>
-          <v-btn small fab class="cd-read-more green white--text" @click.native="$emit('editTask', task)">
-            <v-icon class="white--text">edit</v-icon>
+          <v-btn small fab class="cd-read-more white--text" @click.native="$emit('editTask', task)">
+            <v-icon class="green--text">edit</v-icon>
           </v-btn>
 
           <v-btn v-if="task.status === 'new'" class="cd-read-more orange white--text" @click.native="$emit('startTask', task)">Start task</v-btn>

src/renderer/components/AppToolbar.vue

@@ -1,57 +1,30 @@
 <template>
-  <v-toolbar light class="elevation-1" dense>
-    <v-btn flat @click.native="goBack" v-if="showBackBtn">
+  <v-toolbar light class="elevation-1" dense v-if="showToolbar">
+    <!-- back button.-->
+    <v-btn flat @click.native="goBack">
       <v-icon>chevron_left</v-icon> Back
     </v-btn>
-    <v-toolbar-title class="pink--text">assignme</v-toolbar-title>
-    <v-spacer></v-spacer>
-    <!--sho user the version and allow them to check for updates-->
-    <v-menu open-on-click offset-y>
-      <v-btn outline dark slot="activator" class="pink pink--text"><v-icon class="pink--text">label</v-icon> {{version}}</v-btn>
-      <v-list>
-          <v-btn flat class="pink--text" @click.native="open('https://github.com/kudapara/assignme/releases')"><v-icon class="pink--text">update</v-icon> Check for Updates</v-btn>
-      </v-list>
-    </v-menu>
 
+    <v-spacer></v-spacer>
+
+    <!-- The sign in button -->
     <v-btn
       to="/signin"
       v-if="showSignInBtn"
       class="pink white--text">
       Sign in
     </v-btn>
-
-    <v-btn
-      v-if="showSignOutBtn"
-      @click.native="signOut"
-      class="pink white--text">
-      <v-icon class="white--text">lock_outline</v-icon> Lock App
-    </v-btn>
   </v-toolbar>
 </template>
 
 <script>
   export default {
-    data () {
-      return {
-        version: require('../../../package.json').version
-      }
-    },
-
     methods: {
-      open (link) {
-        this.$electron.shell.openExternal(link)
-      },
-
       goBack () {
         // whenever you leave the create task window, cleat the taskToEdit
         // so that when a new task is going to be created there will be no problem
         this.$store.commit('setTaskToUpdate', null)
         this.$router.push('/')
-      },
-
-      signOut () {
-        this.$store.commit('signOut')
-        this.$router.push('/signin')
       }
     },
 
@@ -60,16 +33,12 @@
         return this.$store.getters.authUser
       },
 
-      showBackBtn () {
-        return this.$route.name !== 'landing-page' && this.$route.name !== 'signin-page'
+      showToolbar () {
+        return this.$route.name === 'create-task'
       },
 
       showSignInBtn () {
         return !this.authUser && this.$route.name !== 'signin-page' && this.$route.name !== 'signup-page'
-      },
-
-      showSignOutBtn () {
-        return this.authUser
       }
     }
   }