CSS for the lastly clicked file in the UI tree-view


#1

I use isotope-ui to edit style of UI and tree-view.
I color files in the tree.

.tree-view.list-tree li:not(.selected) {
   color: rgb(10,240,190); // greener cyan
}

.tree-view.list-tree li.selected {
  color: rgb(100,240,100); // green
}

.tree-view.list-tree :hover {
  color: rgb(160,200,250); // light blue
}

The lastly clicked file is grey, how to change its color.
What CSS should I select?

Is there a good explanation of atom.io’s classes and pseudo-classes.


#2

There is the styleguide package to refer to for the complete basics, but nothing standardized package-by-package.


#3

I don’t think such a feature exists by default in the tree view package, but you can definitely emulate it in your init.coffee:

addDelegatedEventListener = (el, type, delegationTarget, callback, useCapture = true) ->
  wrapper = (event) ->
    {target} = event
    while(!target.matches(delegationTarget) && target isnt el)
      target = target.parentNode
    if(target isnt el) callback.call(target, event)
  el.addEventListener(type, wrapper, useCapture)

MY_LAST_SELECTED_CLASS = 'last-selected'
treeView = document.querySelector('.tree-view-resizer')

addDelegatedEventListener(treeView, 'click', '.entry.file', ->
  for(el in treeView.querySelector('.entry'))
    el.classList.remove(MY_LAST_SELECTED_CLASS)
  this.classList.add(MY_LAST_SELECTED_CLASS)
)

EDIT Oh, I forgot, but in your styles.less you can then do

.tree-view-resizer .last-selected {
  color: @my-awesome-last-selected-color;
}

replace the last-selected with the string you chose in your init.coffee for MY_LAST_SELECTED_CLASS