How to make my tabs look like TextEditor tabs in the new One Themes


#1

I’m creating a new document type that I’d like to be styled the same as standard TextEditors. So for example I’m using the variables in syntax-variables.less to style the contents of my editor, etc.

But I’ve run into a problem in the new “One” themes. They have special handling for the tab style for TextEditors… they make the tab background match the syntax color background with this style rule:

.tab.active[data-type="TextEditor"] {
  color: @tab-text-color-editor;
  background-color: @tab-background-color-editor;
  &:after {
    border-bottom-color: @tab-background-color-editor;
  }
}

But I don’t get that styling since my editor class isn’t TextEditor. I could add a special syntax rule for my editor type, but then it would mess up other themes.

I think a solution will require some sort of Atom code change, but before I create a pull request I’d like suggestions on the best approach to take.

The root problem is that the tabs package is setting the data-type for each tab to the class of the item represented by the tab with this code:

if itemClass = @item.constructor?.name
  @dataset.type = itemClass
else
  delete @dataset.type

I’m not really sure where this ‘data-type’ attribute is used other then styling? If it’s only for styling a simple solution might be to allow items to return other types. Changing the above to something like this:

if itemClass = @item.dataTypeOverride or @item.constructor?.name

Seems simple and effective, but a bit arbitrary. Any other ideas? The trouble is I’m not sure about the larger intention is for the data-type attribute in tabs.

Jesse


#2

This is just a stab in the dark because I’m Not a CSS Guy™ …

The atom-workspace tag has classes that match the syntax and UI theme names:

<atom-workspace class="workspace scrollbars-visible-when-scrolling theme-advanced-railscasts-syntax theme-atom-dark-ui white-cursor" tabindex="-1" callattachhooks="true">

Can you use that to key off of when the “One” themes are active and activate the special handling for your view?


#3

@leedohm Thanks… yes that would be a workaround for this case. Though it wouldn’t be a general solution… I’d have to do it for every theme that targeted data-type TextView and applied different styling.

Turns out the commit that adds this is very recent:

Maybe @kevinsawicki has an idea?

Thanks,
Jesse


#4

That data-type attribute has been added specifically to enable editor tabs to take on the editor background, while others like SettingsView or MarkdownPreviewView get their own matching color. I don’t think it’s intended to do anything other than styling.

I think you could just go add your own data-type (or take what it does by default, not sure how that works) and issue a pull request for one-dark-ui to make the colors match up. I think only one-dark-ui and isotope-(light)-ui currently use this.


#5

@braver It’s been a while, I couldn’t think of a good solution that didn’t require adding API or hardcoding my own class into all Adaptive themes. But now I’ve got an idea! :smile:

I didn’t realize until now that CSS attribute selectors can do partial matches. What about changing the hard coded “TextEditor” tab style rules to:

[data-type$=Editor] {
...
}

That way any class that wants similar special adaptive tab styling just need to end with “Editor”. Seem reasonable?


#6

Oh, that is pretty smart! If @simurai’s themes and isotope use that, that would make it easier for other packages to add tabs that say “I’m like an editor tab”.