diff --git a/resources/celerity/map.php b/resources/celerity/map.php --- a/resources/celerity/map.php +++ b/resources/celerity/map.php @@ -24,7 +24,7 @@ 'rsrc/css/aphront/error-view.css' => '9f1d5518', 'rsrc/css/aphront/lightbox-attachment.css' => '7acac05d', 'rsrc/css/aphront/list-filter-view.css' => 'ef989c67', - 'rsrc/css/aphront/multi-column.css' => '12f65921', + 'rsrc/css/aphront/multi-column.css' => 'eaa1c4fe', 'rsrc/css/aphront/notification.css' => 'ef2c9b34', 'rsrc/css/aphront/pager-view.css' => '2e3539af', 'rsrc/css/aphront/panel-view.css' => '5846dfa2', @@ -465,6 +465,7 @@ 'rsrc/js/core/behavior-lightbox-attachments.js' => '3aa45ad9', 'rsrc/js/core/behavior-line-linker.js' => 'bc778103', 'rsrc/js/core/behavior-more.js' => '9b9197be', + 'rsrc/js/core/behavior-multi-column.js' => '3f442631', 'rsrc/js/core/behavior-object-selector.js' => 'b4eef37b', 'rsrc/js/core/behavior-oncopy.js' => 'c3e218fe', 'rsrc/js/core/behavior-phabricator-nav.js' => 'b5842a5e', @@ -491,7 +492,7 @@ 'aphront-dialog-view-css' => 'c01d24b4', 'aphront-error-view-css' => '9f1d5518', 'aphront-list-filter-view-css' => 'ef989c67', - 'aphront-multi-column-view-css' => '12f65921', + 'aphront-multi-column-view-css' => 'eaa1c4fe', 'aphront-pager-view-css' => '2e3539af', 'aphront-panel-view-css' => '5846dfa2', 'aphront-request-failure-view-css' => 'da14df31', @@ -538,6 +539,7 @@ 'javelin-behavior-aphront-drag-and-drop-textarea' => '4a11ea9c', 'javelin-behavior-aphront-form-disable-on-submit' => 'a9aaba0c', 'javelin-behavior-aphront-more' => '9b9197be', + 'javelin-behavior-aphront-multi-column' => '3f442631', 'javelin-behavior-audio-source' => '59b251eb', 'javelin-behavior-audit-preview' => 'be81801d', 'javelin-behavior-balanced-payment-form' => '3b3e1664', @@ -1075,6 +1077,11 @@ 1 => 'javelin-dom', 2 => 'phortune-credit-card-form', ), + '3f442631' => + array( + 0 => 'javelin-behavior', + 1 => 'javelin-dom', + ), '4398eabb' => array( 0 => 'javelin-behavior', @@ -1208,6 +1215,13 @@ 2 => 'javelin-util', 3 => 'phabricator-shaped-request', ), + '62e18640' => + array( + 0 => 'javelin-install', + 1 => 'javelin-util', + 2 => 'javelin-dom', + 3 => 'javelin-typeahead-normalizer', + ), '6453c869' => array( 0 => 'javelin-install', @@ -1241,13 +1255,6 @@ 0 => 'javelin-behavior', 1 => 'javelin-dom', ), - '62e18640' => - array( - 0 => 'javelin-install', - 1 => 'javelin-util', - 2 => 'javelin-dom', - 3 => 'javelin-typeahead-normalizer', - ), '75903ee1' => array( 0 => 'javelin-behavior', diff --git a/src/view/layout/AphrontMultiColumnView.php b/src/view/layout/AphrontMultiColumnView.php --- a/src/view/layout/AphrontMultiColumnView.php +++ b/src/view/layout/AphrontMultiColumnView.php @@ -6,6 +6,8 @@ const GUTTER_MEDIUM = 'mmr'; const GUTTER_LARGE = 'mlr'; + const MAGIC_LENGTH = 7; + private $columns = array(); private $fluidLayout = false; private $fluidishLayout = false; @@ -41,15 +43,24 @@ public function render() { require_celerity_resource('aphront-multi-column-view-css'); + $id = celerity_generate_unique_node_id(); $classes = array(); $classes[] = 'aphront-multi-column-inner'; $classes[] = 'grouped'; - if (count($this->columns) > 7) { - throw new Exception("No more than 7 columns per view."); + if (count($this->columns) > self::MAGIC_LENGTH) { + $class_count = 'N'; + Javelin::initBehavior( + 'aphront-multi-column', + array( + 'target' => $id, + 'magicLength' => self::MAGIC_LENGTH + )); + } else { + $class_count = count($this->columns); } - $classes[] = 'aphront-multi-column-'.count($this->columns).'-up'; + $classes[] = 'aphront-multi-column-'.$class_count.'-up'; $columns = array(); $column_class = array(); @@ -67,21 +78,23 @@ } $column_inner = phutil_tag( 'div', - array( + array( 'class' => implode(' ', $column_class) - ), + ), $column); - $columns[] = phutil_tag( + $columns[] = javelin_tag( 'div', - array( + array( + 'sigil' => 'aphront-multi-column-column', 'class' => implode(' ', $outer_class) - ), + ), $column_inner); } - $view = phutil_tag( + $view = javelin_tag( 'div', array( + 'sigil' => 'aphront-multi-column-inner', 'class' => implode(' ', $classes), ), array( @@ -116,7 +129,8 @@ return phutil_tag( 'div', - array( + array( + 'id' => $id, 'class' => 'aphront-multi-column-view' ), $board); diff --git a/webroot/rsrc/css/aphront/multi-column.css b/webroot/rsrc/css/aphront/multi-column.css --- a/webroot/rsrc/css/aphront/multi-column.css +++ b/webroot/rsrc/css/aphront/multi-column.css @@ -60,6 +60,16 @@ min-width: 1400px; } +/** + * This will get set to something more accurate in javascript on the actual + * element. We start with what would be an "8-up", as well as with what + * should be rather wide given current display resolutions, so if it needs + * to be wider the view should still work okay on initial load. + */ +.device-desktop .aphront-multi-column-fluidish .aphront-multi-column-N-up { + min-width: 1600px; +} + /* table division */ .aphront-multi-column-fluid .aphront-multi-column-1-up .aphront-multi-column-column-outer { diff --git a/webroot/rsrc/js/core/behavior-multi-column.js b/webroot/rsrc/js/core/behavior-multi-column.js new file mode 100644 --- /dev/null +++ b/webroot/rsrc/js/core/behavior-multi-column.js @@ -0,0 +1,20 @@ +/** + * @provides javelin-behavior-aphront-multi-column + * @requires javelin-behavior + * javelin-dom + */ + +JX.behavior('aphront-multi-column', function(config) { + + var target = JX.$(config.target); + + var column_view = JX.DOM.find(target, 'div', 'aphront-multi-column-inner'); + var columns = JX.DOM.scry(column_view, 'div', 'aphront-multi-column-column'); + + if (columns.length < config.magicLength) { + return; + } + + column_view.style.minWidth = (200 * columns.length) + 'px'; + +});