From 7eba9d3a23c6cad4a33f18433dbd58208c7b43f8 Mon Sep 17 00:00:00 2001 From: probablycorey Date: Wed, 8 Jan 2014 13:39:58 -0800 Subject: [PATCH 1/4] Use flexbox to arrange panes --- src/pane-axis.coffee | 8 ------- src/pane-column.coffee | 21 ----------------- src/pane-container.coffee | 8 ------- src/pane-row.coffee | 21 ----------------- src/pane.coffee | 10 --------- static/panes.less | 41 +++++++++++++++++++++++++++++---- static/workspace-view.less | 46 -------------------------------------- 7 files changed, 37 insertions(+), 118 deletions(-) diff --git a/src/pane-axis.coffee b/src/pane-axis.coffee index e256c58be..c2edc63c1 100644 --- a/src/pane-axis.coffee +++ b/src/pane-axis.coffee @@ -18,7 +18,6 @@ class PaneAxis extends View addChild: (child, index=@children().length) -> @insertAt(index, child) - @getContainer()?.adjustPaneDimensions() removeChild: (child) -> parent = @parent().view() @@ -47,7 +46,6 @@ class PaneAxis extends View else primitiveRemove(child) - container.adjustPaneDimensions() Pane = require './pane' container.trigger 'pane:removed', [child] if child instanceof Pane @@ -68,9 +66,3 @@ class PaneAxis extends View insertChildAfter: (child, newChild) -> newChild.insertAfter(child) - - horizontalChildUnits: -> - $(child).view().horizontalGridUnits() for child in @children() - - verticalChildUnits: -> - $(child).view().verticalGridUnits() for child in @children() diff --git a/src/pane-column.coffee b/src/pane-column.coffee index 522e54ca7..5fe964c33 100644 --- a/src/pane-column.coffee +++ b/src/pane-column.coffee @@ -11,24 +11,3 @@ class PaneColumn extends PaneAxis className: -> "PaneColumn" - - adjustDimensions: -> - totalUnits = @verticalGridUnits() - unitsSoFar = 0 - for child in @children() - child = $(child).view() - childUnits = child.verticalGridUnits() - child.css - width: '100%' - height: "#{childUnits / totalUnits * 100}%" - top: "#{unitsSoFar / totalUnits * 100}%" - left: 0 - - child.adjustDimensions() - unitsSoFar += childUnits - - horizontalGridUnits: -> - Math.max(@horizontalChildUnits()...) - - verticalGridUnits: -> - _.sum(@verticalChildUnits()) diff --git a/src/pane-container.coffee b/src/pane-container.coffee index 4ecda8359..623c1baf5 100644 --- a/src/pane-container.coffee +++ b/src/pane-container.coffee @@ -127,14 +127,6 @@ class PaneContainer extends View return pane if view? null - adjustPaneDimensions: -> - if root = @getRoot() - root.css(width: '100%', height: '100%', top: 0, left: 0) - root.adjustDimensions() - removeEmptyPanes: -> for pane in @getPanes() when pane.getItems().length == 0 pane.remove() - - afterAttach: -> - @adjustPaneDimensions() diff --git a/src/pane-row.coffee b/src/pane-row.coffee index 2c9b7774a..3a8e8d7bc 100644 --- a/src/pane-row.coffee +++ b/src/pane-row.coffee @@ -11,24 +11,3 @@ class PaneRow extends PaneAxis className: -> "PaneRow" - - adjustDimensions: -> - totalUnits = @horizontalGridUnits() - unitsSoFar = 0 - for child in @children() - child = $(child).view() - childUnits = child.horizontalGridUnits() - child.css - width: "#{childUnits / totalUnits * 100}%" - height: '100%' - top: 0 - left: "#{unitsSoFar / totalUnits * 100}%" - - child.adjustDimensions() - unitsSoFar += childUnits - - horizontalGridUnits: -> - _.sum(@horizontalChildUnits()) - - verticalGridUnits: -> - Math.max(@verticalChildUnits()...) diff --git a/src/pane.coffee b/src/pane.coffee index 8896d95bd..e2cd866cb 100644 --- a/src/pane.coffee +++ b/src/pane.coffee @@ -202,15 +202,6 @@ class Pane extends View viewForActiveItem: -> @viewForItem(@activeItem) - # Private: - adjustDimensions: -> # do nothing - - # Private: - horizontalGridUnits: -> 1 - - # Private: - verticalGridUnits: -> 1 - # Public: Creates a new pane above with a copy of the currently focused item. splitUp: (items...) -> @split(items, 'column', 'before') @@ -248,7 +239,6 @@ class Pane extends View switch side when 'before' then parent.insertChildBefore(this, newPane) when 'after' then parent.insertChildAfter(this, newPane) - @getContainer().adjustPaneDimensions() newPane.makeActive() newPane.focus() newPane diff --git a/static/panes.less b/static/panes.less index 33fdbe91a..38981bd5b 100644 --- a/static/panes.less +++ b/static/panes.less @@ -3,8 +3,41 @@ // Pane-items are things that go inside a pane. Like the UI-Demo, the // settings-view, the archive-view, the image-view. Etc. Basically a non- // editor resource with a tab. -.pane-item { - overflow: auto; - color: @text-color; - background-color: @pane-item-background-color; +.panes { + display: -webkit-flex; + -webkit-flex: 1; + + .column { + display: -webkit-flex; + -webkit-flex: 1; + -webkit-flex-direction: column; + } + + .row { + display: -webkit-flex; + -webkit-flex: 1; + -webkit-flex-direction: row; + } + + .pane { + display: -webkit-flex; + -webkit-flex: 1; + -webkit-flex-flow: column; + + .pane-item { + color: @text-color; + background-color: @pane-item-background-color; + } + + .item-views { + -webkit-flex: 1; + display: -webkit-flex; + min-height: 0; + } + + .item-views > * { + -webkit-flex: 1; + min-width: 0; + } + } } diff --git a/static/workspace-view.less b/static/workspace-view.less index ae0afcf56..55fdbd03b 100644 --- a/static/workspace-view.less +++ b/static/workspace-view.less @@ -39,49 +39,3 @@ h6 { -webkit-flex-flow: column; } } - -.panes { - position: relative; - -webkit-flex: 1; - - .column { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - overflow-y: hidden; - } - - .row { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - overflow-x: hidden; - margin: 0; - } - - .pane { - position: absolute; - display: -webkit-flex; - -webkit-flex-flow: column; - top: 0; - bottom: 0; - left: 0; - right: 0; - box-sizing: border-box; - } - - .pane .item-views { - -webkit-flex: 1; - display: -webkit-flex; - min-height: 0; - } - - .pane .item-views > * { - -webkit-flex: 1; - min-width: 0; - } -} From 6f766acac8ba8d2b304b43555364790952d9b64f Mon Sep 17 00:00:00 2001 From: probablycorey Date: Wed, 8 Jan 2014 14:30:33 -0800 Subject: [PATCH 2/4] Rename .row and .column to .pane-row and .pane-column Bootstrap's .row and .column css was influencing our pane rows and columns. --- src/pane-column.coffee | 2 +- src/pane-row.coffee | 2 +- static/panes.less | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/pane-column.coffee b/src/pane-column.coffee index 5fe964c33..4a89e0a6a 100644 --- a/src/pane-column.coffee +++ b/src/pane-column.coffee @@ -7,7 +7,7 @@ module.exports = class PaneColumn extends PaneAxis @content: -> - @div class: 'column' + @div class: 'pane-column' className: -> "PaneColumn" diff --git a/src/pane-row.coffee b/src/pane-row.coffee index 3a8e8d7bc..76106ab61 100644 --- a/src/pane-row.coffee +++ b/src/pane-row.coffee @@ -7,7 +7,7 @@ PaneAxis = require './pane-axis' module.exports = class PaneRow extends PaneAxis @content: -> - @div class: 'row' + @div class: 'pane-row' className: -> "PaneRow" diff --git a/static/panes.less b/static/panes.less index 38981bd5b..3aac5db27 100644 --- a/static/panes.less +++ b/static/panes.less @@ -7,13 +7,13 @@ display: -webkit-flex; -webkit-flex: 1; - .column { + .pane-column { display: -webkit-flex; -webkit-flex: 1; -webkit-flex-direction: column; } - .row { + .pane-row { display: -webkit-flex; -webkit-flex: 1; -webkit-flex-direction: row; From d908c8b02606db15cf0bd4b6b796953a19c1c382 Mon Sep 17 00:00:00 2001 From: probablycorey Date: Wed, 8 Jan 2014 14:31:46 -0800 Subject: [PATCH 3/4] Use absolute divs to limit repaints on keypresses --- src/pane.coffee | 3 ++- static/panes.less | 14 ++++++++++++-- 2 files changed, 14 insertions(+), 3 deletions(-) diff --git a/src/pane.coffee b/src/pane.coffee index e2cd866cb..fee6294e2 100644 --- a/src/pane.coffee +++ b/src/pane.coffee @@ -21,7 +21,8 @@ class Pane extends View @content: (wrappedView) -> @div class: 'pane', tabindex: -1, => - @div class: 'item-views', outlet: 'itemViews' + @div class: 'flexbox-repaint-hack', => + @div class: 'item-views', outlet: 'itemViews' @delegatesProperties 'items', 'activeItem', toProperty: 'model' @delegatesMethods 'getItems', 'showNextItem', 'showPreviousItem', 'getActiveItemIndex', diff --git a/static/panes.less b/static/panes.less index 3aac5db27..238cdb4a0 100644 --- a/static/panes.less +++ b/static/panes.less @@ -20,9 +20,19 @@ } .pane { - display: -webkit-flex; + position: relative; -webkit-flex: 1; - -webkit-flex-flow: column; + + .flexbox-repaint-hack { + display: -webkit-flex; + -webkit-flex-flow: column; + + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + } .pane-item { color: @text-color; From 196942d1267312f1ef6069709257bed2b2406803 Mon Sep 17 00:00:00 2001 From: probablycorey Date: Wed, 8 Jan 2014 16:31:56 -0800 Subject: [PATCH 4/4] Rename .row and .column in pane specs --- spec/pane-container-spec.coffee | 12 ++++++------ spec/pane-spec.coffee | 22 +++++++++++----------- 2 files changed, 17 insertions(+), 17 deletions(-) diff --git a/spec/pane-container-spec.coffee b/spec/pane-container-spec.coffee index 4dc770c16..cd2f7264e 100644 --- a/spec/pane-container-spec.coffee +++ b/spec/pane-container-spec.coffee @@ -124,19 +124,19 @@ describe "PaneContainer", -> describe "serialization", -> it "can be serialized and deserialized, and correctly adjusts dimensions of deserialized panes after attach", -> newContainer = atom.deserializers.deserialize(container.serialize()) - expect(newContainer.find('.row > :contains(1)')).toExist() - expect(newContainer.find('.row > .column > :contains(2)')).toExist() - expect(newContainer.find('.row > .column > :contains(3)')).toExist() + expect(newContainer.find('.pane-row > :contains(1)')).toExist() + expect(newContainer.find('.pane-row > .pane-column > :contains(2)')).toExist() + expect(newContainer.find('.pane-row > .pane-column > :contains(3)')).toExist() newContainer.height(200).width(300).attachToDom() - expect(newContainer.find('.row > :contains(1)').width()).toBe 150 - expect(newContainer.find('.row > .column > :contains(2)').height()).toBe 100 + expect(newContainer.find('.pane-row > :contains(1)').width()).toBe 150 + expect(newContainer.find('.pane-row > .pane-column > :contains(2)').height()).toBe 100 xit "removes empty panes on deserialization", -> # only deserialize pane 1's view successfully TestView.deserialize = ({name}) -> new TestView(name) if name is '1' newContainer = atom.deserializers.deserialize(container.serialize()) - expect(newContainer.find('.row, .column')).not.toExist() + expect(newContainer.find('.pane-row, .pane-column')).not.toExist() expect(newContainer.find('> :contains(1)')).toExist() describe "pane-container:active-pane-item-changed", -> diff --git a/spec/pane-spec.coffee b/spec/pane-spec.coffee index fd6339cab..53e3073ed 100644 --- a/spec/pane-spec.coffee +++ b/spec/pane-spec.coffee @@ -4,7 +4,7 @@ Pane = require '../src/pane' path = require 'path' temp = require 'temp' -describe "Pane", -> +fdescribe "Pane", -> [container, view1, view2, editor1, editor2, pane] = [] class TestView extends View @@ -545,23 +545,23 @@ describe "Pane", -> it "builds a row if needed, then appends a new pane after itself", -> # creates the new pane with a copy of the active item if none are given pane2 = pane1.splitRight(pane1.copyActiveItem()) - expect(container.find('.row .pane').toArray()).toEqual [pane1[0], pane2[0]] + expect(container.find('.pane-row .pane').toArray()).toEqual [pane1[0], pane2[0]] expect(pane2.items).toEqual [editor1] expect(pane2.activeItem).not.toBe editor1 # it's a copy pane3 = pane2.splitRight(view3, view4) expect(pane3.getItems()).toEqual [view3, view4] - expect(container.find('.row .pane').toArray()).toEqual [pane[0], pane2[0], pane3[0]] + expect(container.find('.pane-row .pane').toArray()).toEqual [pane[0], pane2[0], pane3[0]] it "builds a row if needed, then appends a new pane after itself ", -> # creates the new pane with a copy of the active item if none are given pane2 = pane1.splitRight() - expect(container.find('.row .pane').toArray()).toEqual [pane1[0], pane2[0]] + expect(container.find('.pane-row .pane').toArray()).toEqual [pane1[0], pane2[0]] expect(pane2.items).toEqual [] expect(pane2.activeItem).toBeUndefined() pane3 = pane2.splitRight() - expect(container.find('.row .pane').toArray()).toEqual [pane1[0], pane2[0], pane3[0]] + expect(container.find('.pane-row .pane').toArray()).toEqual [pane1[0], pane2[0], pane3[0]] expect(pane3.items).toEqual [] expect(pane3.activeItem).toBeUndefined() @@ -569,37 +569,37 @@ describe "Pane", -> it "builds a row if needed, then appends a new pane before itself", -> # creates the new pane with a copy of the active item if none are given pane2 = pane.splitLeft(pane1.copyActiveItem()) - expect(container.find('.row .pane').toArray()).toEqual [pane2[0], pane[0]] + expect(container.find('.pane-row .pane').toArray()).toEqual [pane2[0], pane[0]] expect(pane2.items).toEqual [editor1] expect(pane2.activeItem).not.toBe editor1 # it's a copy pane3 = pane2.splitLeft(view3, view4) expect(pane3.getItems()).toEqual [view3, view4] - expect(container.find('.row .pane').toArray()).toEqual [pane3[0], pane2[0], pane[0]] + expect(container.find('.pane-row .pane').toArray()).toEqual [pane3[0], pane2[0], pane[0]] describe "splitDown(items...)", -> it "builds a column if needed, then appends a new pane after itself", -> # creates the new pane with a copy of the active item if none are given pane2 = pane.splitDown(pane1.copyActiveItem()) - expect(container.find('.column .pane').toArray()).toEqual [pane[0], pane2[0]] + expect(container.find('.pane-column .pane').toArray()).toEqual [pane[0], pane2[0]] expect(pane2.items).toEqual [editor1] expect(pane2.activeItem).not.toBe editor1 # it's a copy pane3 = pane2.splitDown(view3, view4) expect(pane3.getItems()).toEqual [view3, view4] - expect(container.find('.column .pane').toArray()).toEqual [pane[0], pane2[0], pane3[0]] + expect(container.find('.pane-column .pane').toArray()).toEqual [pane[0], pane2[0], pane3[0]] describe "splitUp(items...)", -> it "builds a column if needed, then appends a new pane before itself", -> # creates the new pane with a copy of the active item if none are given pane2 = pane.splitUp(pane1.copyActiveItem()) - expect(container.find('.column .pane').toArray()).toEqual [pane2[0], pane[0]] + expect(container.find('.pane-column .pane').toArray()).toEqual [pane2[0], pane[0]] expect(pane2.items).toEqual [editor1] expect(pane2.activeItem).not.toBe editor1 # it's a copy pane3 = pane2.splitUp(view3, view4) expect(pane3.getItems()).toEqual [view3, view4] - expect(container.find('.column .pane').toArray()).toEqual [pane3[0], pane2[0], pane[0]] + expect(container.find('.pane-column .pane').toArray()).toEqual [pane3[0], pane2[0], pane[0]] it "lays out nested panes by equally dividing their containing row / column", -> container.width(520).height(240).attachToDom()