Can atom change folder colors?


#1

Anyone know if there is a way to put colors on the folders in the tree view?
I’ve looked, and I don’t see any packages that already exist for this.

Example.

If you have a large folder tree open, allow setting arbitrary folder colors. Maybe fetch those colors from OSX ?


#2

It would require a medium-sized package. You should check out the tree-view project at https://github.com/atom/tree-view.

I’m curious about your use case. What do the colors represent?


#3

The colors are a simple file categorization system built into OS X. See here for more information:


#4

I use chef to manage my infrastructure. I have atom open the entire tree so I can see all cookbooks at once.

Two of the folders (the red folders), are the most important ones, which I access very frequently. Its easy to loose them in the list.


#5

Here’s a proof of concept, something that you can put in your ~/.atom/styles.less.

I decided to use a separate icon instead of coloring the folder name or folder icon, because the Tree View already uses them to display the folder’s status in a git repository, but a similar approach could be used to target the name or icon instead.

Disclaimer: I am definitely no css or less expert so I took this as a learning opportunity. No doubt the less code can be improved substantially.

Folder Tags

First, let’s create some test folders and open them in Atom:

mkdir -p TestFolder/test-folder-{1..20}
atom --dev TestFolder

Next, open your stylesheet and append the following:

@red-folders:
  'test-folder-3'
  'test-folder-4'
;

@orange-folders:
  'test-folder-18'
;

@yellow-folders:
  'test-folder-10'
;

@green-folders:
  'test-folder-6'
  'test-folder-8'
;

@blue-folders:
  'test-folder-14'
  'test-folder-16'
;

@purple-folders:
  'test-folder-15'
;

@gray-folders:
  'test-folder-11'
;

// OS X Finder Tags: https://support.apple.com/en-us/HT202754
@red-folders-color: rgb(255, 114, 117);
@orange-folders-color: rgb(255, 191, 30);
@yellow-folders-color: rgb(255, 243, 0);
@green-folders-color: rgb(177, 244, 0);
@blue-folders-color: rgb(131, 198, 255);
@purple-folders-color: rgb(230, 157, 255);
@gray-folders-color: rgb(188, 188, 188);

// Octicons: https://octicons.github.com/
// Encoding: https://github.com/github/octicons/blob/master/octicons/octicons.less
@octicon-icon: '\f015';

@folder-to-color-maps:
  @red-folders @red-folders-color,
  @orange-folders @orange-folders-color,
  @yellow-folders @yellow-folders-color,
  @green-folders @green-folders-color,
  @blue-folders @blue-folders-color,
  @purple-folders @purple-folders-color,
  @gray-folders @gray-folders-color,
;

.add-icon-to-folders(@octicon-icon, @folder-to-color-maps);

// Adds an @octicon-icon according to the mapping defined in @folder-to-color-maps.
.add-icon-to-folders(@octicon-icon, @folder-to-color-maps) {
  .i-loop(@i: length(@folder-to-color-maps)) when (@i > 0) { .i-loop((@i - 1));
    @folder-to-color-map: extract(@folder-to-color-maps, @i);
    @folders: extract(@folder-to-color-map, 1);
    @octicon-color: extract(@folder-to-color-map, 2);
    .j-loop(@j: length(@folders)) when (@j > 0) { .j-loop((@j - 1));
      @folderName: extract(@folders, @j);
      .add-icon-to-folder(@folderName, @octicon-icon, @octicon-color);
    } .j-loop;
  } .i-loop;
}

// Adds an @octicon-icon with a certain @octicon-color after the @folderName in the Tree View.
.add-icon-to-folder(@folderName, @octicon-icon, @octicon-color) {
  .icon-file-directory[data-name=@{folderName}]::after {
    color: @octicon-color;
    font-family: 'Octicons Regular';
    content: "@{octicon-icon}";
    font-size: 16px;
    margin-left: 20px;
  }
}

Result:

Usage:

Add the name of each folder to the desired @color-folders arrays, where color is one of the 7 defined colors. See the example above.

Possible Improvements:

Code:

  • Creates duplicate (identical) entries in the compiled css code. No doubt the for-loops are at fault there, somehow. I couldn’t figure out why they are creating duplicate entries for the folders.
  • Even with the above fixed, it will still create a new entry for every folder, resulting in a lot of duplication in the compiled css code. Doesn’t feel nice, but the overhead of the extra lines is probably negligible.

UX:

  • Would work best in a package, as this allows creating an easy way to add or remove tags from a folder. For the OS X folks, possibly even syncing them with the tags from the Finder if such an API exists. If anyone feels inspired… :slight_smile:
  • Tag icons are not vertically aligned, but instead their location depends on the length of the folder name.
  • Tag tooltips on mouseover with configurable notes per tag color or folder specific.

#6

I had this idea too, I was thinking it would be nice to have the same Photoshop layers colouring logic.
This way, it is easier to know where are your files, especially if you use a structured framework like Ruby on Rails.


#7

Wow this is fantastic. I love the atom community.

Looks like on OSX it is possible to querry the color of a folder with xattr

xattr -px com.apple.FinderInfo ~/Desktop/foo

xattr doesn’t act predictably if you have multiple colors tagged. Instead it only returns the first color

Another program that I may look into:


#8

Fabulous idea! I tweaked the .less to move the icon on top of tree view icon.

Change to the folder icon:

@octicon-icon: '\f016';

Change the last declaration to:

.add-icon-to-folder(@folderName, @octicon-icon, @octicon-color) {
  .icon-file-directory[data-name=@{folderName}]::after {
    color: @octicon-color;
    font-family: 'Octicons Regular';
    content: "@{octicon-icon}";
    font-size: 16px;
	position: relative;
	left: -100%;
    margin-right: -12px;
	top: 2px;
	
  }
}

And what you get is:

I’m using the Seti theme.


#9

Is there a way to point to nested folders? I have two branches loaded as project folders. directory structure in both are the same, but the project folder is different. I need to make feature1/src a different color than feature2/src.


#10

You can target a folder called feature1 with the selector span[data-name="feature1"].