Page MenuHomePhabricator
Files F17664714

D8942.id21213.diff
No OneTemporary
Actions

D8942.id21213.diff
View Options

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';
+
+});

File Metadata

Mime Type
text/plain
Expires
Sun, Jul 13, 7:37 PM (1 w, 4 d ago)
Storage Engine
blob
Storage Format
Encrypted (AES-256-CBC)
Storage Handle
8409384
Default Alt Text
D8942.id21213.diff (6 KB)

Event Timeline

Phabricator · Built by Phacility