+
@@ -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')
+ }
}
}
@@ -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);
}
}
diff --git a/src/renderer/components/sideBar/folderContents.vue b/src/renderer/components/sideBar/folderContents.vue
deleted file mode 100644
index 4860cbda..00000000
--- a/src/renderer/components/sideBar/folderContents.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/src/renderer/components/sideBar/openedFile.vue b/src/renderer/components/sideBar/openedFile.vue
index f488e293..1e2b54d4 100644
--- a/src/renderer/components/sideBar/openedFile.vue
+++ b/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]"
>