Help us understand the problem. What is going on with this article?

atom tree-view を全体的にタイトにする

More than 5 years have passed since last update.

概要

Atom エディタでディレクトリを開いた際、左ペインに表示されるツリービューを全体的に縮めるというか、もうちょっとタイトに表示したいなと思ったのでしました。

どのぐらいタイトになるか

このぐらいタイトになります。

スクリーンショット 2015-03-27 16.53.25.png

やり方

style.less をいじる

[Atom]-[Open Your Stylesheet] で style.less を開き、以下をコピペして保存します。

style.less
.list-group li:not(.list-nested-item),
.list-tree li:not(.list-nested-item),
.list-group li.list-nested-item > .list-item,
.list-tree li.list-nested-item > .list-item {
  line-height: 21px; /* 同じ値 */
  letter-spacing: -0.1rem; /* お好みで */
}

li.directory.entry.list-nested-item.project-root.selected::before {
  height: 31px; /* ディレクトリのハイライトはそのまま */
}

.list-group .selected::before,
.list-tree .selected::before {
  height: 21px; /* 同じ値 */
}

/* 一部の icomoon アイコンに top が指定されていてズレるため調整 */
.icon-file-text[data-name$=".scss"]:before,
.icon-file-text[data-name$=".sass"]:before,
.icon-file-text[data-name$=".npm"]:before,
.icon-file-text[data-name$=".gulp"]:before {
  font-family: "icomoon";
  font-size: small;
  text-align: center;
  content: "\e603";
  color: #825078;
}

反映

style.less 保存時に反映されるので、ベストな値を探してみて下さい。letter-spacing はお好みで。

ltcmdr927
趣味はボランティアです
https://about.me/ltcmdr927
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away