2.1.0

* Added an ability to customize tab height and intends manually; * Fixed bugs with shrinking tabs down to 0px with the `Over tree view` tabs placement
OddMorning · Nov 9, 2017 · 180bc7a · 180bc7a
1 parent f5cfda5
commit 180bc7a
Show file tree

Hide file tree

Showing 6 changed files with 117 additions and 64 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,11 +1,16 @@
-## 1.0.0 (08 Nov 2017)
+## 2.1.0 (09 Nov 2017)
+* Added an ability to customize tab height and intends manually;
+* Fixed bugs with shrinking tabs down to 0px with the `Over tree view` tabs placement.
+
+## 2.0.0 (08 Nov 2017)
 * Completely rewritten styles and code, still based on the original tiger4th's package;
 * Corrected small interface flaws like weird space between tabs, 1px shift when dragging tabs, missing left border for a first tab, double borders in other places and so on;
 * Added an ability to switch tabs by scrolling (inspired by the same named option of the Vivaldi browser);
 * Tabs can be placed over the projects folders (a.k.a. tree view). It's still beta so there can be bugs (like descriebed);
 * Works best with the default theme (One Light/Dark) but should work with other themes too. Is tested with [https://atom.io/themes/nord-atom-ui](Nord) and [https://atom.io/themes/atom-material-ui](Material) themes;
 * It's the first release of this forked package so there still can be bugs and flaws.
 
-Known bugs:
+### Known bugs:
 * Some special tabs like Settings or About can't be moved when the `Over tree view` tabs placement is chosen. Instead or sorting, tab just docks near the tree view (other tabs don't have that problem since they can't be docked). Currently I have no idea how to fix that but you can press `Esc` if you accidentally dragged the tab and didn't release mouse button yet.
-* Tab switching with scrolling doesn't work when the main pane (e.g. code editor) isn't focused.
+* Tab switching with scrolling doesn't work when the main pane (e.g. code editor) isn't focused.
+
diff --git a/LICENSE.md b/LICENSE.md
@@ -1,4 +1,4 @@
-Copyright © 2016 tiger4th, fork © 2017 OddMorning
+Copyright © 2016 tiger4th, fork © 2017 OddMorning
 
 Permission is hereby granted, free of charge, to any person obtaining
 a copy of this software and associated documentation files (the

diff --git a/README.md b/README.md
@@ -1,24 +1,6 @@
 # Vertical Tabs Plus package
 Makes tabs vertical. Fork from tiger4th's vertical-tabs package.
 
-## Screenshots
-![](https://github.com/OddMorning/vertical-tabs-plus/blob/master/screenshots/left.png)
-![](https://github.com/OddMorning/vertical-tabs-plus/blob/master/screenshots/right.png)
-![](https://github.com/OddMorning/vertical-tabs-plus/blob/master/screenshots/over-project-view.png)
-![](https://github.com/OddMorning/vertical-tabs-plus/blob/master/screenshots/different-theme.png)
-
-## Why forked?
-Originally I had a bunch of custom styles that were fixing weird things in the original package like space under each tab and wrong styles that are used to be actual for vertical tabs only (extra border on each left tab side except the first one, double borders at the bottom of the tab container, etc.). Then I put some own code into the init script file to switch between tabs with scroll wheel (blame Vivaldi and QTTabBar, they made me love it). Later I completely rewrote styles and vertical tabs stopped look weird when themes like Material are used. And then found a way to move tabs over the project tree view and that required even more JS code. So I moved everything to a separate package.
-
-There are too many changes for a single pull request but it's still based on the tiger4th's package so I decided to fork it. Well, people fork projects for purposes like this so why not?
-
-## What's the difference?
-* Works well with “Material” theme and should work with other themes too (at the time of development is tested with “One”, “Nord”, and “Material”);
-* No missing or extra borders (in case if you care about interface up to 1px lines);
-* Replaced fixed tabs width with `min` and `max` values;
-* Customizable tab height;
-* Extra features.
-
 ## Features
 
 ### Switch tabs by scrolling
@@ -29,4 +11,21 @@ Tabs can be placed on either left or right side of the main pane. It's also poss
 
 ### Customizable tab width and height
 Vertical tabs are not hosintal tabs so it makes sense to adjust their sizes manually. When Atom 1.17 has been released, the default theme ("One") got tiny tabs. Some people liked it, some were looking for the way to bring spacious tabs back and made a number of custom styles. One more reason why this option is more important than it seems :)  
-Tab width is also customizable or, more accurately, its limits are. Atom adjusts tab width itself all the time, this package just set min and max values.
+Tab width is also customizable or, more accurately, its limits are. Atom adjusts tab width itself all the time, this package just set min and max values.
+
+## Why forked?
+Originally I had a bunch of custom styles that were fixing weird things in the original package like space under each tab and wrong styles that are used to be actual for vertical tabs only (extra border on each left tab side except the first one, double borders at the bottom of the tab container, etc.). Then I put some own code into the init script file to switch between tabs with scroll wheel (blame Vivaldi and QTTabBar, they made me love it). Later I completely rewrote styles, added custimizable tab height (via LESS variable) and vertical tabs stopped look weird when themes like Material are used. And then I found a way to move tabs over the project tree view what required even more JS code. So I moved everything to a separate package.
+
+There are too many changes for a single pull request but it's still based on the tiger4th's package so I decided to fork it. Well, people fork projects for purposes like this so why not?
+
+The difference from the original package:
+* Works well with "Material" theme, other themes shouldn't break it either (at the time of development is tested with "One", "Nord", and "Material");
+* No missing or extra borders (in case if you care about interface up to 1px lines);
+* Replaced fixed tabs width with `min` and `max` values;
+* Customizable tab height;
+* Extra features.
+
+## Screenshots
+![](https://github.com/OddMorning/vertical-tabs-plus/raw/master/screenshots/left.png)
+![](https://github.com/OddMorning/vertical-tabs-plus/raw/master/screenshots/right.png)
+![](https://github.com/OddMorning/vertical-tabs-plus/raw/master/screenshots/over-project-view.png)
diff --git a/lib/vertical-tabs-plus.js b/lib/vertical-tabs-plus.js
@@ -4,54 +4,68 @@ const
   ROOT_CLASS = 'vertical-tabs-plus';
 
 let
-  GUI = {}, Common, Controller, atomConfig;
+  GUI = {}, Common, Controller, atomConfig, Helper;
 
 /* =============================================================================================== */
 
 atomConfig = {
   switchTabsByScrolling: {
     type:        'boolean',
     default:     true,
-    description: 'Move cursor over tabs and use scroll wheel to switch between them.',
+    description: 'Move cursor over tabs and use scroll wheel to switch between them',
     order:       1,
   },
   tabsPlacement: {
     type:    'string',
-    default: 'Left',
+    default: 'Right',
     enum:    ['Left', 'Right', 'Over tree view (beta)'],
     order:   2,
   },
   tabHeight: {
     type:        'string',
-    default:     'Medium',
-    enum:        ['Dense', 'Compact', 'Medium', 'Spacious'],
+    default:     'Medium (2.9em)',
+    enum:        ['Dense (2em)', 'Compact (2.5em)', 'Medium (2.9em)', 'Spacious (3.25em)', 'Custom'],
     description: 'Atom before version 1.17 had `Spacious` tabs and with 1.17 they became `Compact`',
     order:       3,
   },
   minTabWidth: {
     type:        'string',
-    default:     '11em',
-    description: 'Any valid CSS value is allowed. Number without any unit is considered as `em`. Use `initial` to disable limit (not recommended)',
+    default:     '11',
+    description: 'Any valid CSS value is allowed. Number without any unit is considered as `em` (`11` == `11em`). Use `initial` to disable limit (not recommended)',
     order:       4,
   },
   maxTabWidth: {
     type:        'string',
-    default:     '14em',
+    default:     '14',
     description: 'Note that these values are ignored when the `Over tree view` tabs placement is chosen',
     order:       5,
   },
+  customTabHeight: {
+    type:        'string',
+    default:     '2.5',
+    description: 'Any valid CSS value is allowed. Number without any unit is considered as `em`. You have to chose `Custom` tab height to make custom options work',
+    order:       6,
+  },
+  customTabIndent: {
+    title:       'Custom Tab Indent Factor',
+    type:        'number',
+    default:     '4',
+    description: 'Tab left and right indents are calculated the following way: `tab-height / tab-indent-factor`. This options allows to set `tab-indent-factor`. In other words, value `1` means huge indents because they\'re equal to tab height. `2` means half of tab height (e.g. `1.5em` indents for `3em` tab height) and so on. The default value for every stock tab height is equal to 4, for `Dense` is 2',
+    order:       7,
+  },
 };
 
 /* ============================================================================================= */
 
 Controller = {
   switchTabsByScrolling(enable) {
-    console.log('Ee,', enable);
     if (enable)
       GUI.wrapper.addEventListener('wheel', Common.switchTabsByScrolling);
     else
       GUI.wrapper.removeEventListener('wheel', Common.switchTabsByScrolling);
   },
+
+  /* --------------- */
   tabsPlacement(optionID, oldOptionID) {
     let
       className = 'right-sided-tabs',
@@ -72,34 +86,47 @@ Controller = {
       GUI.atomPane.insertAdjacentElement('afterBegin', GUI.wrapper);
     }
   },
+
+  /* --------------- */
   tabHeight(optionID) {
     let
-      value = ['2em', '2.5em', '2.9em', '3.25em'][
+      value = ['2em', '2.5em', '2.9em', '3.25em', 'custom'][
         atomConfig.tabHeight.enum.indexOf(optionID)
-      ],
-      extraPadding = (value == '2em') ? '2' : false;
-    Common.CSSvar(GUI.wrapper, 'tab-height', value);
-
-    // Чуть уменьшенное значение отступов для плотных вкладок. Костыль, потом нужно будет продумать его получше.
-    Common.CSSvar(GUI.wrapper, 'tab-padding-multiplier', extraPadding);
+      ];
+
+    if (value == 'custom') {
+      let get = param => atom.config.get(`vertical-tabs-plus.${param}`);
+      Controller.customTabHeight(get('customTabHeight'));
+      Controller.customTabIndent(get('customTabIndent'));
+    } else {
+      Helper.CSSvar(GUI.wrapper, 'tab-height', value);
+
+      // Чуть уменьшенное значение отступов для плотных вкладок.
+      let extraPadding = (value == '2em') ? '2' : false;
+      Helper.CSSvar(GUI.wrapper, 'tab-padding-multiplier', extraPadding);
+    }
   },
-  minTabWidth(value) {
-    let
-      isNum = Number.isInteger(+value);
 
-    if (isNum)
-      value = `${value}em`;
-
-    Common.CSSvar(GUI.wrapper, 'min-tab-width', value);
+  /* --------------- */
+  minTabWidth(value) {
+    Helper.CSSvar(GUI.wrapper, 'min-tab-width', Helper.normalizeNumber(value));
   },
+
+  /* --------------- */
   maxTabWidth(value) {
-    let
-      isNum = Number.isInteger(+value);
+    Helper.CSSvar(GUI.wrapper, 'max-tab-width', Helper.normalizeNumber(value));
+  },
 
-    if (isNum)
-      value = `${value}em`;
+  /* --------------- */
+  customTabHeight(value) {
+    if (Helper.isCustomHeightEnabled())
+      Helper.CSSvar(GUI.wrapper, 'tab-height', Helper.normalizeNumber(value));
+  },
 
-    Common.CSSvar(GUI.wrapper, 'max-tab-width', value);
+  /* --------------- */
+  customTabIndent(value) {
+    if (Helper.isCustomHeightEnabled())
+      Helper.CSSvar(GUI.wrapper, 'tab-padding-multiplier', value);
   },
 };
 
@@ -123,10 +150,8 @@ Common = {
 
     // Создание обёртки и помещение в неё вкладок для удобства перемещения вкладок в другое место)
     GUI.wrapper = document.createElement('div');
-    GUI.wrapper.classList.add('wrapper');
+    GUI.wrapper.classList.add('vtabs-wrapper');
     GUI.wrapper.appendChild(GUI.tabBar);
-
-    // GUI.wrapper.classList.add('wrapper');
     GUI.atomPane.insertAdjacentElement('afterBegin', GUI.wrapper);
 
     // Оживляет настройки
@@ -171,8 +196,11 @@ Common = {
     let command = ev.deltaY > 0 ? 'pane:show-next-item' : 'pane:show-previous-item';
     atom.commands.dispatch(atom.views.getView(atom.workspace), command);
   },
+};
 
-  /* -------------------------------------------------------------------------------------------- */
+/* =============================================================================================== */
+
+Helper = {
   // Задаёт элементу переменную CSS
   CSSvar(el, variable, value) {
     let str = `--${variable}`;
@@ -186,6 +214,17 @@ Common = {
     else
       el.style.setProperty(str, value);
   },
+
+  /* --------------- */
+  normalizeNumber(value) {
+    return Number.isNaN(+value) ? value : `${value}em`;
+  },
+
+  /* --------------- */
+  isCustomHeightEnabled(value) {
+    let isCustomHeight = (atom.config.get(`vertical-tabs-plus.tabHeight`) == 'Custom');
+    return isCustomHeight;
+  },
 };
 
 /* =============================================================================================== */

diff --git a/screenshots/different-theme.png b/screenshots/different-theme.png
diff --git a/styles/main.less b/styles/main.less
@@ -28,25 +28,34 @@
   // Левосторонние вкладки
   &[data-tabs-position="left"] {
     flex-direction: row;
-    .wrapper {
+    .vtabs-wrapper {
       // Добавляет границу, отделяющую вкладки от основного окна
       border-right: 1px solid @tab-border-color;
     }
   }
   // И правосторонние вкладки
   &[data-tabs-position="right"] {
     flex-direction: row-reverse; 
-    .wrapper {
+    .vtabs-wrapper {
       border-left: 1px solid @tab-border-color;
     }
   }
 
-  // Контейнер вкладок, когда сбоку
-  &.tree-view .tab-bar {
-    padding: .5em 0;
-    .tab {
-      // Убирает линии между вкладками
-      box-shadow: none;
+  // Вкладои, когда сбоку
+  &.tree-view {
+    // Чтобы вкладки не скроллились вместе с деревом
+    overflow: hidden;
+    .tree-view-root {
+      overflow: auto;
+    }
+
+    // Контейнер вкладок
+    .tab-bar {
+      padding: .5em 0;
+      .tab {
+        // Убирает линии между вкладками
+        box-shadow: none;
+      }
     }
   }
   // Контейнер вкладок, когда не сбоку
@@ -55,8 +64,9 @@
     max-width: var(--max-tab-width);
   }
 
-  .wrapper {
+  .vtabs-wrapper {
     overflow-y: auto;
+    flex-shrink: 0; 
   }
 
   // Контейнер вкладок