Use classes rather than location attributes

This commit is contained in:
Ben Ogle 2014-11-17 16:07:53 -08:00
parent 0c75a4fd9c
commit 1b85810735
4 changed files with 19 additions and 20 deletions

View File

@ -34,8 +34,8 @@ describe "PanelContainerElement", ->
element = container.getView()
jasmineContent.appendChild(element)
it 'has a location attribute with value from the model', ->
expect(element.getAttribute('location')).toBe 'left'
it 'has a location class with value from the model', ->
expect(element).toHaveClass 'left'
it 'removes the element when the container is destroyed', ->
expect(element.parentNode).toBe jasmineContent
@ -50,7 +50,7 @@ describe "PanelContainerElement", ->
panel1 = new Panel({viewRegistry, item: new TestPanelContainerItem()})
container.addPanel(panel1)
expect(element.childNodes.length).toBe 1
expect(element.childNodes[0].getAttribute('location')).toBe 'left'
expect(element.childNodes[0]).toHaveClass 'left'
expect(element.childNodes[0].tagName).toBe 'ATOM-PANEL'
@ -79,7 +79,7 @@ describe "PanelContainerElement", ->
panel1 = new Panel({viewRegistry, item: new TestPanelContainerItem(), className: 'one'})
container.addPanel(panel1)
expect(element.childNodes.length).toBe 1
expect(element.childNodes[0].getAttribute('location')).toBe 'bottom'
expect(element.childNodes[0]).toHaveClass 'bottom'
expect(element.childNodes[0].tagName).toBe 'ATOM-PANEL'
expect(panel1.getView()).toHaveClass 'one'

View File

@ -277,15 +277,15 @@ describe "WorkspaceView", ->
workspaceElement = atom.views.getView(atom.workspace)
it 'inserts panel container elements in the correct places in the DOM', ->
leftContainer = workspaceElement.querySelector('atom-panel-container[location="left"]')
rightContainer = workspaceElement.querySelector('atom-panel-container[location="right"]')
leftContainer = workspaceElement.querySelector('atom-panel-container.left')
rightContainer = workspaceElement.querySelector('atom-panel-container.right')
expect(leftContainer.nextSibling).toBe workspaceElement.verticalAxis
expect(rightContainer.previousSibling).toBe workspaceElement.verticalAxis
topContainer = workspaceElement.querySelector('atom-panel-container[location="top"]')
bottomContainer = workspaceElement.querySelector('atom-panel-container[location="bottom"]')
topContainer = workspaceElement.querySelector('atom-panel-container.top')
bottomContainer = workspaceElement.querySelector('atom-panel-container.bottom')
expect(topContainer.nextSibling).toBe workspaceElement.paneContainer
expect(bottomContainer.previousSibling).toBe workspaceElement.paneContainer
modalContainer = workspaceElement.querySelector('atom-panel-container[location="modal"]')
modalContainer = workspaceElement.querySelector('atom-panel-container.modal')
expect(modalContainer.parentNode).toBe workspaceElement

View File

@ -10,12 +10,11 @@ class PanelContainerElement extends HTMLElement
@subscriptions.add @model.onDidAddPanel(@panelAdded.bind(this))
@subscriptions.add @model.onDidRemovePanel(@panelRemoved.bind(this))
@subscriptions.add @model.onDidDestroy(@destroyed.bind(this))
@setAttribute('location', @model.getLocation())
@classList.add(@model.getLocation())
panelAdded: ({panel, index}) ->
panelElement = panel.getView()
panelElement.setAttribute('location', @model.getLocation())
panelElement.classList.add(@model.getLocation())
if index >= @childNodes.length
@appendChild(panelElement)
else

View File

@ -44,8 +44,8 @@
// Tool panels
atom-panel-container[location="left"],
atom-panel-container[location="right"] {
atom-panel-container.left,
atom-panel-container.right {
display: -webkit-flex;
-webkit-flex-direction: row;
-webkit-align-items: stretch;
@ -59,10 +59,10 @@ atom-panel {
display: block;
}
atom-panel[location="top"],
atom-panel[location="bottom"],
atom-panel[location="left"],
atom-panel[location="right"] {
atom-panel.top,
atom-panel.bottom,
atom-panel.left,
atom-panel.right {
background-color: @tool-panel-background-color;
}
@ -75,7 +75,7 @@ atom-panel[location="right"] {
// Modal panels
.overlay, // deprecated .overlay
atom-panel[location="modal"] {
atom-panel.modal {
position: absolute;
left: 50%;
width: 500px;
@ -117,7 +117,7 @@ atom-panel[location="modal"] {
// deprecated: from-top, from-bottom
.overlay.from-top,
atom-panel[location="modal"] {
atom-panel.modal {
top: 0;
border-top: none;
border-top-left-radius: 0;