Merge pull request #25 from SparingSoftware/feature/add-dark-theme

Feature/add dark theme

Author: vladyslavprosolupov

src/main/config/menu.js

@@ -1,4 +1,4 @@
-import { shell, Menu } from 'electron'
+import { shell, Menu, ipcMain } from 'electron'
 
 const setDefaultApplicationMenu = () => {
   if (Menu.getApplicationMenu()) return
@@ -33,7 +33,29 @@ const setDefaultApplicationMenu = () => {
         { role: 'reload' },
         { role: 'forcereload' },
         { type: 'separator' },
-        { role: 'togglefullscreen' }
+        { role: 'togglefullscreen' },
+        { type: 'separator' },
+        {
+          label: 'Theme',
+          submenu: [
+            {
+              id: 'theme-light',
+              label: 'Light',
+              type: 'radio',
+              click (item, browserWindow) {
+                browserWindow.webContents.send('theme-change', 'light')
+              }
+            },
+            {
+              id: 'theme-dark',
+              label: 'Dark',
+              type: 'radio',
+              click (item, browserWindow) {
+                browserWindow.webContents.send('theme-change', 'dark')
+              }
+            }
+          ]
+        }
       ]
     },
     {
@@ -53,6 +75,10 @@ const setDefaultApplicationMenu = () => {
 
   const menu = Menu.buildFromTemplate(template)
   Menu.setApplicationMenu(menu)
+
+  ipcMain.on('theme-change', (_, theme) => {
+    menu.getMenuItemById(`theme-${theme}`).checked = true
+  })
 }
 
 export {

src/main/index.js

@@ -24,6 +24,7 @@ function createWindow () {
     height: 563,
     useContentSize: true,
     width: 1000,
+    titleBarStyle: 'hiddenInset',
     webPreferences: {
       webSecurity: false
     }

src/renderer/components/dashboardPage/index.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="view">
+    <header-component/>
     <div class="pickers">
       <boards-picker/>
       <sprints-picker/>
     </div>
     <el-tabs v-model="currentTab" stretch @tab-click="changeTab">
       <el-tab-pane label="Issues" name="issues"/>
-      <!--<el-tab-pane label="Recent Worklogs" name="worklogs"/>-->
     </el-tabs>
     <issues v-if="currentTab === 'issues'"/>
     <recent-worklogs v-if="currentTab === 'worklogs'"/>
@@ -18,10 +18,12 @@ import Issues from './issues/'
 import RecentWorklogs from './recentWorklogs/'
 import BoardsPicker from './pickers/boardsPicker/'
 import SprintsPicker from './pickers/sprintsPicker/'
+import HeaderComponent from '../header'
 import { mapActions } from 'vuex'
 
 export default {
   components: {
+    HeaderComponent,
     BoardsPicker,
     RecentWorklogs,
     SprintsPicker,

src/renderer/components/dashboardPage/issues/index.vue

@@ -49,7 +49,7 @@
     <div ref="issuesContainer" class="issues">
       <no-results v-if="noIssues"/>
       <preloader-bar v-wait:visible="'issuesLoading'" main/>
-      <transition-group name="el-fade-in" mode="out-in">
+      <transition-group name="el-fade-in" mode="out-in" tag="div">
         <issue
           v-for="(issue, i) in getFilteredIssues"
           :id="issue.key"
@@ -155,6 +155,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+  $topbar-height: 262px; // 262px = title, boards picker, sprint picker, tabs, search input height
+
   .filters-bar {
     padding: 0 15px 15px;
     display: flex;
@@ -169,11 +171,11 @@ export default {
 
   .pinned-tracker {
     left: 0;
-    top: 221px;
+    top: $topbar-height;
   }
 
   .issues {
-    height: calc(100vh - 221px); // 221px = boards picker, sprint picker, tabs, search input height
+    height: calc(100vh - #{$topbar-height});
     padding-right: 5px;
     overflow-y: scroll;
   }

src/renderer/components/dashboardPage/issues/issue/index.vue

@@ -42,21 +42,20 @@ export default {
     display: flex;
     justify-content: space-between;
     padding: 15px;
-    border-top: 1px solid #e2e2e2;
-    border-bottom: 1px solid #e2e2e2;
-    &:hover {
-      background: #f8f8f8;
-    }
+
     &--subtask {
       padding: 10px 15px 10px 40px;
     }
+
     &__key {
       cursor: pointer;
       font-weight: 700;
     }
+
     &__description {
       margin: 0 0 5px;
     }
+
     &__tracking {
       margin-left: 15px;
       text-align: right;

src/renderer/components/dashboardPage/issues/issue/infoBar/index.vue

@@ -57,16 +57,19 @@ export default {
       vertical-align: middle;
       margin-right: 5px;
     }
+
     &__status {
       vertical-align: middle;
       margin-right: 5px;
     }
+
     &__link {
       vertical-align: middle;
       margin-right: 5px;
       font-size: 16px;
       cursor: pointer;
     }
+
     &__avatar {
       display: inline-block;
       vertical-align: middle;

src/renderer/components/dashboardPage/issues/issue/tracker/index.vue

@@ -184,12 +184,10 @@ export default {
   background: 0;
   border: 0;
   font-size: 40px;
-  color: #409EFF;
   outline: none;
 
   &:hover, &:focus {
     background: 0;
-    color: #86d8ff;
     cursor: pointer;
   }
 }

src/renderer/components/dashboardPage/issues/pinned-tracker/index.vue

@@ -55,7 +55,6 @@ export default {
     width: 100%;
     padding: 4px 15px;
     margin-bottom: 11px;
-    background-color: #333333;
     color: #ffffff;
     display: flex;
     align-items: center;

src/renderer/components/dashboardPage/pickers/sprintsPicker/index.vue

@@ -10,12 +10,14 @@
         clearable
         filterable
       >
-        <el-option
-          v-for="item in sprints"
-          :key="item.id"
-          :label="item.name"
-          :value="item.id"
-        />
+        <el-option-group label="Sprints and Backlog">
+          <el-option
+            v-for="item in sprints"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-option-group>
       </el-select>
     </transition>
   </div>
@@ -52,5 +54,9 @@ export default {
   .sprints-picker {
     margin-top: 7px;
     position: relative;
+
+    /deep/ .el-input__inner {
+      height: auto !important;
+    }
   }
 </style>

src/renderer/components/header.vue

@@ -0,0 +1,15 @@
+<template>
+  <header class="title-container" style="-webkit-app-region: drag">
+    <h1 v-text="'workometer'"/>
+  </header>
+</template>
+
+<style lang="scss" scoped>
+  .title-container {
+    display: flex;
+    justify-content: center;
+    padding-top: 15px;
+    cursor: default;
+    user-select: none;
+  }
+</style>