Docks

[simurai]

Description of the Change

In anticipation of Atom getting Docks atom/atom#13977, this PR makes some changes, mainly:

• 🔥 Remove "Spacious" and "Auto" layout mode. Meaning panes will only be separated with a border and no gap. Except for the dock "frames" that have 4px borders.
• Shrink tabs. So they fit better when used in docks.
• Single tabs take up the full width of the tab bar.
• Option to hide toggle buttons + dock frames.

Just a single editor

All 3 docks open

☝️ The style guide and settings-view would also need some updating so they fit better in a more narrow dock. And the linter is "just dragged" inside with the DevTools to get an idea how it would look.

Alternate Designs

Was also considering having different tabs for the center and the docks, but that felt weird.

Benefits

More space for code and dock panes.

Possible Drawbacks

Those that liked the spacious layout mode might won't like this change. There is still the option to increase the UI font size to make everything a bit bigger.

Applicable Issues

Depends on atom/atom#13977

[simurai]

Added an option to hide the toggle buttons:

[rogeriochaves]

I'm using this for myself:

.tab-bar {
  height: 3.5em;
  .tab {
    line-height: 3.5em;
  }
  .close-icon {
    top: 1em!important;
  }
}

[simurai]

This issue atom/one-dark-ui#198 in the dark version also has some examples how to customize the tabs.

[jesseleite]

Not sure where to post this. I notice it's awkward trying to drag an editor tab to be the leftmost tab, as it often tries to add itself to the tree view as a tab.

Great work on this btw. I really miss the look and feel of the old 'spacious' mode 😢 But I do like the new direction of docks functionality-wise. Interested to see how this evolves 👍

[simurai]

@jesseleite Great work on this btw. I really miss the look and feel of the old 'spacious' mode 😢 But I do like the new direction of docks functionality-wise. Interested to see how this evolves 👍

Same here. Really like the flexibility that comes with the docks.

I notice it's awkward trying to drag an editor tab to be the leftmost tab, as it often tries to add itself to the tree view as a tab.

Hmmm.. You don't have to drag too close to the tree-view tab. As long as you are over half of the first tab, you're fine. Notice the little arrows pointing left/right. They should give you a clue where the tab will be inserted:

[jesseleite]

I realize that, but is there ever a use case where someone would want to add text editor tabs to the tree-view dock?

[winstliu]

I think it'll be disallowed starting with atom/atom#14695.

[simurai]

Oh.. I see. Your point is, it shouldn't be allowed at all. Ya, your wish might come true.

Although sometimes I still find it handy. For example having a long list of variables that you can quickly toggle on/off as a reference.