feature: tab view in dark and light theme

src/renderer/components/editorWithTabs/editor.vue

@@ -443,7 +443,8 @@
   @import '../../../editor/index.css';
   .editor-wrapper {
     position: relative;
-    height: calc(100vh - 22px);
+    overflow: auto;
+    flex: 1;
   }
   .editor-wrapper.source {
     position: absolute;

src/renderer/components/editorWithTabs/index.vue

@@ -56,5 +56,9 @@
 <style scoped>
   .editor-with-tabs {
     flex: 1;
+    display: flex;
+    flex-direction: column;
+    height: calc(100vh - 22px);
+    overflow: hidden;
   }
 </style>

src/renderer/components/editorWithTabs/tabs.vue

@@ -1,9 +1,12 @@
 <template>
-    <div class="editor-tabs">
+    <div
+      class="editor-tabs"
+      :class="theme"
+    >
       <ul class="tabs-container">
         <li
           :title="file.pathname"
-          :class="{'active': currentFile.pathname === file.pathname, 'unsaved': !file.isSaved }"
+          :class="{'active': currentFile.id === file.id, 'unsaved': !file.isSaved }"
           v-for="(file, index) of tabs"
           :key="index"
           @click.stop="selectFile(file)"
@@ -15,6 +18,13 @@
             <use xlink:href="#icon-close-small"></use>
           </svg>
         </li>
+        <li class="new-file">
+          <svg class="icon" aria-hidden="true"
+            @click.stop="newFile()"
+          >
+            <use xlink:href="#icon-plus"></use>
+          </svg>
+        </li>
       </ul>
     </div>
 </template>
@@ -27,9 +37,15 @@
     mixins: [tabsMixins],
     computed: {
       ...mapState({
+        theme: state => state.preferences.theme,
         currentFile: state => state.editor.currentFile,
         tabs: state => state.editor.tabs
       })
+    },
+    methods: {
+      newFile () {
+        this.$store.dispatch('NEW_BLANK_FILE')
+      }
     }
   }
 </script>
@@ -47,16 +63,60 @@
     padding: 0;
     display: flex;
     flex-direction: row;
+    overflow: auto;
+    &::-webkit-scrollbar:horizontal {
+      display: none;
+    }
     & > li {
       padding: 0 8px;
       color: var(--secondaryColor);
       font-size: 12px;
       line-height: 35px;
+      height: 35px;
       border-right: 1px solid #fff;
       background: var(--lightTabColor);
+      display: flex;
+      align-items: center;
+      & > svg {
+        opacity: 0;
+      }
+      &:hover > svg {
+        opacity: 1;
+      }
+      & > span {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        margin-right: 3px;
+      }
     }
     & > li.active {
       background: #fff;
+      & > svg {
+        opacity: 1;
+      }
+    }
+
+    & > li.new-file {
+      width: 35px;
+      height: 35px;
+      border-right: none;
+      background: transparent;
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+      cursor: pointer;
+    }
+  }
+  .editor-tabs.dark {
+    background: var(--darkBgColor);
+  }
+  .editor-tabs.dark ul li {
+    background: var(--darkBgColor);
+    border-right-color: var(--darkHoverColor);
+    &.active {
+      background: var(--darkHoverColor);
+      color: var(--lightBorder);
     }
   }
 </style>

src/renderer/components/sideBar/folderContents.vue

@@ -1,36 +0,0 @@
-<template>
-  <div class="side-bar-folder-contents">
-    <folder
-      v-for="(childFolder, index) of folder.folders" :key="index + 'folder'"
-      :folder="childFolder"
-    ></folder>
-    <file
-      v-for="(file, index) of folder.files" :key="index + 'file'"
-      :file="file"
-    ></file>  
-  </div>
-</template>
-
-<script>
-  import Folder from './folder.vue'
-  import File from './file.vue'
-
-  export default {
-    name: 'folder-content',
-    props: {
-      folder: {
-        type: Object,
-        required: true
-      }
-    },
-    components: {
-      Folder,
-      File
-    }
-  }
-</script>
-
-<style scoped>
-  .side-bar-folder-contents {
-  }
-</style>

src/renderer/components/sideBar/openedFile.vue

@@ -3,7 +3,7 @@
       class="opened-file"
       :title="file.pathname"
       @click="selectFile(file)"
-      :class="[{'active': currentFile.pathname === file.pathname, 'unsaved': !file.isSaved }, theme]"
+      :class="[{'active': currentFile.id === file.id, 'unsaved': !file.isSaved }, theme]"
     >
       <svg class="icon" aria-hidden="true"
         @click.stop="removeFileInTab(file)"

src/renderer/store/editor.js

@@ -6,6 +6,7 @@ import { getOptionsFromState, getSingleFileState, getBlankFileState } from './he
 const toc = require('markdown-toc')
 
 const state = {
+  lineEnding: 'lf',
   currentFile: {},
   tabs: []
 }
@@ -110,6 +111,9 @@ const mutations = {
         f.filename = path.basename(dest)
       }
     })
+  },
+  SET_GLOBAL_LINE_ENDING (state, ending) {
+    state.lineEnding = ending
   }
 }
 
@@ -280,10 +284,12 @@ const actions = {
   LISTEN_FOR_OPEN_SINGLE_FILE ({ commit, state, dispatch }) {
     ipcRenderer.on('AGANI::open-single-file', (e, { markdown, filename, pathname, options }) => {
       const fileState = getSingleFileState({ markdown, filename, pathname, options })
+      const { lineEnding } = options
+      commit('SET_GLOBAL_LINE_ENDING', lineEnding)
       dispatch('UPDATE_CURRENT_FILE', fileState)
       bus.$emit('file-loaded', markdown)
       commit('SET_LAYOUT', {
-        rightColumn: 'list',
+        rightColumn: 'files',
         showSideBar: false,
         showTabBar: false
       })
@@ -291,15 +297,24 @@ const actions = {
     })
   },
 
+  NEW_BLANK_FILE ({ commit, state, dispatch }) {
+    const { tabs, lineEnding } = state
+    const fileState = getBlankFileState(tabs, lineEnding)
+    const { markdown } = fileState
+    dispatch('UPDATE_CURRENT_FILE', fileState)
+    bus.$emit('file-loaded', markdown)
+  },
+
   LISTEN_FOR_OPEN_BLANK_WINDOW ({ commit, state, dispatch }) {
     ipcRenderer.on('AGANI::open-blank-window', (e, { lineEnding }) => {
       const { tabs } = state
       const fileState = getBlankFileState(tabs, lineEnding)
       const { markdown } = fileState
+      commit('SET_GLOBAL_LINE_ENDING', lineEnding)
       dispatch('UPDATE_CURRENT_FILE', fileState)
       bus.$emit('file-loaded', markdown)
       commit('SET_LAYOUT', {
-        rightColumn: 'list',
+        rightColumn: 'files',
         showSideBar: false,
         showTabBar: false
       })

src/renderer/store/help.js

@@ -54,21 +54,22 @@ export const getFileStateFromData = data => {
   })
 }
 
-export const getBlankFileState = (tabs, lineEnding) => {
+export const getBlankFileState = (tabs, lineEnding = 'lf') => {
   const fileState = JSON.parse(JSON.stringify(defaultFileState))
-  const untitleId = Math.max(...tabs.map(f => {
+  let untitleId = Math.max(...tabs.map(f => {
     if (f.pathname === '') {
       return +f.filename.split('-')[1]
     } else {
       return 0
     }
-  }), 1)
+  }), 0)
+
   const id = getUniqueId()
 
   return Object.assign(fileState, {
     lineEnding,
     id,
-    filename: `Untitled-${untitleId}`
+    filename: `Untitled-${++untitleId}`
   })
 }