Merge pull request #9274 from atom/sm-top-bottom-bars

Add top/bottom bars

spec/workspace-element-spec.coffee

@@ -72,9 +72,49 @@ describe "WorkspaceElement", ->
       expect(topContainer.nextSibling).toBe workspaceElement.paneContainer
       expect(bottomContainer.previousSibling).toBe workspaceElement.paneContainer
 
+      headerContainer = workspaceElement.querySelector('atom-panel-container.header')
+      footerContainer = workspaceElement.querySelector('atom-panel-container.footer')
+      expect(headerContainer.nextSibling).toBe workspaceElement.horizontalAxis
+      expect(footerContainer.previousSibling).toBe workspaceElement.horizontalAxis
+
       modalContainer = workspaceElement.querySelector('atom-panel-container.modal')
       expect(modalContainer.parentNode).toBe workspaceElement
 
+    it 'stretches header/footer panels to the workspace width', ->
+      workspaceElement = atom.views.getView(atom.workspace)
+      jasmine.attachToDOM(workspaceElement)
+      expect(workspaceElement.offsetWidth).toBeGreaterThan(0)
+
+      headerItem = document.createElement('div')
+      atom.workspace.addHeaderPanel({item: headerItem})
+      expect(headerItem.offsetWidth).toEqual(workspaceElement.offsetWidth)
+
+      footerItem = document.createElement('div')
+      atom.workspace.addFooterPanel({item: footerItem})
+      expect(footerItem.offsetWidth).toEqual(workspaceElement.offsetWidth)
+
+    it 'shrinks horizontal axis according to header/footer panels height', ->
+      workspaceElement = atom.views.getView(atom.workspace)
+      workspaceElement.style.height = '100px'
+      horizontalAxisElement = workspaceElement.querySelector('atom-workspace-axis.horizontal')
+      jasmine.attachToDOM(workspaceElement)
+
+      originalHorizontalAxisHeight = horizontalAxisElement.offsetHeight
+      expect(workspaceElement.offsetHeight).toBeGreaterThan(0)
+      expect(originalHorizontalAxisHeight).toBeGreaterThan(0)
+
+      headerItem = document.createElement('div')
+      headerItem.style.height = '10px'
+      atom.workspace.addHeaderPanel({item: headerItem})
+      expect(headerItem.offsetHeight).toBeGreaterThan(0)
+
+      footerItem = document.createElement('div')
+      footerItem.style.height = '15px'
+      atom.workspace.addFooterPanel({item: footerItem})
+      expect(footerItem.offsetHeight).toBeGreaterThan(0)
+
+      expect(horizontalAxisElement.offsetHeight).toEqual(originalHorizontalAxisHeight - headerItem.offsetHeight - footerItem.offsetHeight)
+
   describe "the 'window:toggle-invisibles' command", ->
     it "shows/hides invisibles in all open and future editors", ->
       workspaceElement = atom.views.getView(atom.workspace)

spec/workspace-spec.coffee

@@ -894,6 +894,36 @@ describe "Workspace", ->
         expect(itemView instanceof TestItemElement).toBe(true)
         expect(itemView.getModel()).toBe(model)
 
+    describe '::addHeaderPanel(model)', ->
+      it 'adds a panel to the correct panel container', ->
+        expect(atom.workspace.getHeaderPanels().length).toBe(0)
+        atom.workspace.panelContainers.header.onDidAddPanel addPanelSpy = jasmine.createSpy()
+
+        model = new TestItem
+        panel = atom.workspace.addHeaderPanel(item: model)
+
+        expect(panel).toBeDefined()
+        expect(addPanelSpy).toHaveBeenCalledWith({panel, index: 0})
+
+        itemView = atom.views.getView(atom.workspace.getHeaderPanels()[0].getItem())
+        expect(itemView instanceof TestItemElement).toBe(true)
+        expect(itemView.getModel()).toBe(model)
+
+    describe '::addFooterPanel(model)', ->
+      it 'adds a panel to the correct panel container', ->
+        expect(atom.workspace.getFooterPanels().length).toBe(0)
+        atom.workspace.panelContainers.footer.onDidAddPanel addPanelSpy = jasmine.createSpy()
+
+        model = new TestItem
+        panel = atom.workspace.addFooterPanel(item: model)
+
+        expect(panel).toBeDefined()
+        expect(addPanelSpy).toHaveBeenCalledWith({panel, index: 0})
+
+        itemView = atom.views.getView(atom.workspace.getFooterPanels()[0].getItem())
+        expect(itemView instanceof TestItemElement).toBe(true)
+        expect(itemView.getModel()).toBe(model)
+
     describe '::addModalPanel(model)', ->
       it 'adds a panel to the correct panel container', ->
         expect(atom.workspace.getModalPanels().length).toBe(0)

src/workspace-element.coffee

@@ -74,6 +74,8 @@ class WorkspaceElement extends HTMLElement
       left: @views.getView(@model.panelContainers.left)
       right: @views.getView(@model.panelContainers.right)
       bottom: @views.getView(@model.panelContainers.bottom)
+      header: @views.getView(@model.panelContainers.header)
+      footer: @views.getView(@model.panelContainers.footer)
       modal: @views.getView(@model.panelContainers.modal)
 
     @horizontalAxis.insertBefore(@panelContainers.left, @verticalAxis)
@@ -82,6 +84,9 @@ class WorkspaceElement extends HTMLElement
     @verticalAxis.insertBefore(@panelContainers.top, @paneContainer)
     @verticalAxis.appendChild(@panelContainers.bottom)
 
+    @insertBefore(@panelContainers.header, @horizontalAxis)
+    @appendChild(@panelContainers.footer)
+
     @appendChild(@panelContainers.modal)
 
     this

src/workspace.coffee

@@ -47,6 +47,8 @@ class Workspace extends Model
       left: new PanelContainer({location: 'left'})
       right: new PanelContainer({location: 'right'})
       bottom: new PanelContainer({location: 'bottom'})
+      header: new PanelContainer({location: 'header'})
+      footer: new PanelContainer({location: 'footer'})
       modal: new PanelContainer({location: 'modal'})
 
     @subscribeToEvents()
@@ -66,6 +68,8 @@ class Workspace extends Model
       left: new PanelContainer({location: 'left'})
       right: new PanelContainer({location: 'right'})
       bottom: new PanelContainer({location: 'bottom'})
+      header: new PanelContainer({location: 'header'})
+      footer: new PanelContainer({location: 'footer'})
       modal: new PanelContainer({location: 'modal'})
 
     @originalFontSize = null
@@ -834,6 +838,44 @@ class Workspace extends Model
   addTopPanel: (options) ->
     @addPanel('top', options)
 
+  # Essential: Get an {Array} of all the panel items in the header.
+  getHeaderPanels: ->
+    @getPanels('header')
+
+  # Essential: Adds a panel item to the header.
+  #
+  # * `options` {Object}
+  #   * `item` Your panel content. It can be DOM element, a jQuery element, or
+  #     a model with a view registered via {ViewRegistry::addViewProvider}. We recommend the
+  #     latter. See {ViewRegistry::addViewProvider} for more information.
+  #   * `visible` (optional) {Boolean} false if you want the panel to initially be hidden
+  #     (default: true)
+  #   * `priority` (optional) {Number} Determines stacking order. Lower priority items are
+  #     forced closer to the edges of the window. (default: 100)
+  #
+  # Returns a {Panel}
+  addHeaderPanel: (options) ->
+    @addPanel('header', options)
+
+  # Essential: Get an {Array} of all the panel items in the footer.
+  getFooterPanels: ->
+    @getPanels('footer')
+
+  # Essential: Adds a panel item to the footer.
+  #
+  # * `options` {Object}
+  #   * `item` Your panel content. It can be DOM element, a jQuery element, or
+  #     a model with a view registered via {ViewRegistry::addViewProvider}. We recommend the
+  #     latter. See {ViewRegistry::addViewProvider} for more information.
+  #   * `visible` (optional) {Boolean} false if you want the panel to initially be hidden
+  #     (default: true)
+  #   * `priority` (optional) {Number} Determines stacking order. Lower priority items are
+  #     forced closer to the edges of the window. (default: 100)
+  #
+  # Returns a {Panel}
+  addFooterPanel: (options) ->
+    @addPanel('footer', options)
+
   # Essential: Get an {Array} of all the modal panel items
   getModalPanels: ->
     @getPanels('modal')

static/panels.less

@@ -46,37 +46,33 @@
 
 atom-panel-container.left,
 atom-panel-container.right {
-  display: -webkit-flex;
-  -webkit-flex-direction: row;
-  -webkit-align-items: stretch;
-  height: 100%;
-  atom-panel {
-    height: 100%;
-  }
+  display: flex;
 }
 
+.tool-panel, // deprecated: .tool-panel
 atom-panel {
   display: block;
-}
-
-atom-panel.top,
-atom-panel.bottom,
-atom-panel.left,
-atom-panel.right {
-  background-color: @tool-panel-background-color;
-}
-
-// deprecated
-.tool-panel {
   position: relative;
   background-color: @tool-panel-background-color;
 }
 
+atom-panel-container > atom-panel.left,
+atom-panel-container > atom-panel.right {
+  display: flex;
+}
+
+// Some packages use `height: 100%` which doesn't play nice with flexbox
+atom-panel-container > atom-panel.left > *,
+atom-panel-container > atom-panel.right > * {
+  height: initial;
+}
+
 // Modal panels
 
 .overlay, // deprecated .overlay
 atom-panel.modal {
   position: absolute;
+  display: block;
   left: 50%;
   width: 500px;
   margin-left: -250px;

static/workspace-view.less

@@ -16,7 +16,8 @@ body {
 }
 
 atom-workspace {
-  display: block;
+  display: flex;
+  flex-direction: column;
   height: 100%;
   overflow: hidden;
   position: relative;
@@ -25,13 +26,13 @@ atom-workspace {
   font-family: @font-family;
 
   atom-workspace-axis.horizontal {
-    display: -webkit-flex;
-    height: 100%;
+    display: flex;
+    flex: 1;
   }
 
   atom-workspace-axis.vertical {
-    display: -webkit-flex;
-    -webkit-flex: 1;
-    -webkit-flex-flow: column;
+    display: flex;
+    flex: 1;
+    flex-direction: column;
   }
 }