2013-04-02 20:23:24 +02:00
|
|
|
<?php
|
|
|
|
|
|
|
|
final class AphrontMultiColumnView extends AphrontView {
|
|
|
|
|
|
|
|
const GUTTER_SMALL = 'msr';
|
|
|
|
const GUTTER_MEDIUM = 'mmr';
|
|
|
|
const GUTTER_LARGE = 'mlr';
|
|
|
|
|
2014-05-16 04:12:40 +02:00
|
|
|
private $id;
|
Add a secret board view to Projects
Summary:
Ref T1344. This is //very// rough. Some UI issues:
- Empty states for the board and columns are junky.
- Column widths are crazy. I think we need to set them to fixed-width, since we may have an arbitrarily large number of columns?
- I don't think we have the header UI elements in M10 yet and that mock is pretty old, so I sort of very roughly approximated it.
- What should we do when you click a task title? Popping the whole task in a dialog is possible but needs a bunch of work to actually work. Might need to build "sheets" or something.
- Icons are slightly clipped for some reason.
- All the backend stuff is totally faked.
Generally, my plan is just to use these to implement all of T390. Specifically:
- "Kanban" projects will have "Backlog" on the left. You'll drag them toward the right as you make progress.
- "Milestone" projects will have "No Milestone" on the left, then "Milestone 9", "Milestone 8", etc.
- "Sprint" projects will have "Backlog" on the left, then "Sprint 31", "Sprint 30", etc.
So all of these things end up being pretty much exactly the same, with some minor text changes and new columns showing up on the left vs the right or whatever.
Test Plan: See screenshot.
Reviewers: chad, btrahan
Reviewed By: btrahan
CC: chad, aran, sascha-egerer
Maniphest Tasks: T1344
Differential Revision: https://secure.phabricator.com/D7374
2013-10-22 06:11:36 +02:00
|
|
|
private $columns = array();
|
2013-04-02 20:23:24 +02:00
|
|
|
private $fluidLayout = false;
|
2013-11-06 03:55:42 +01:00
|
|
|
private $fluidishLayout = false;
|
2013-04-02 20:23:24 +02:00
|
|
|
private $gutter;
|
2014-02-11 01:04:42 +01:00
|
|
|
private $border;
|
2013-04-02 20:23:24 +02:00
|
|
|
|
2014-05-16 04:12:40 +02:00
|
|
|
public function setID($id) {
|
|
|
|
$this->id = $id;
|
|
|
|
return $this;
|
|
|
|
}
|
|
|
|
|
|
|
|
public function getID() {
|
|
|
|
return $this->id;
|
|
|
|
}
|
|
|
|
|
|
|
|
public function addColumn(
|
|
|
|
$column,
|
|
|
|
$class = null,
|
|
|
|
$sigil = null,
|
|
|
|
$metadata = null) {
|
|
|
|
$this->columns[] = array(
|
|
|
|
'column' => $column,
|
|
|
|
'class' => $class,
|
|
|
|
'sigil' => $sigil,
|
|
|
|
'metadata' => $metadata);
|
2013-04-02 20:23:24 +02:00
|
|
|
return $this;
|
|
|
|
}
|
|
|
|
|
|
|
|
public function setFluidlayout($layout) {
|
|
|
|
$this->fluidLayout = $layout;
|
|
|
|
return $this;
|
|
|
|
}
|
|
|
|
|
2013-11-06 03:55:42 +01:00
|
|
|
public function setFluidishLayout($layout) {
|
|
|
|
$this->fluidLayout = true;
|
|
|
|
$this->fluidishLayout = $layout;
|
|
|
|
return $this;
|
|
|
|
}
|
|
|
|
|
2013-04-02 20:23:24 +02:00
|
|
|
public function setGutter($gutter) {
|
|
|
|
$this->gutter = $gutter;
|
|
|
|
return $this;
|
|
|
|
}
|
|
|
|
|
2014-02-11 01:04:42 +01:00
|
|
|
public function setBorder($border) {
|
|
|
|
$this->border = $border;
|
2013-05-22 00:28:43 +02:00
|
|
|
return $this;
|
|
|
|
}
|
|
|
|
|
2013-04-02 20:23:24 +02:00
|
|
|
public function render() {
|
|
|
|
require_celerity_resource('aphront-multi-column-view-css');
|
|
|
|
|
|
|
|
$classes = array();
|
|
|
|
$classes[] = 'aphront-multi-column-inner';
|
|
|
|
$classes[] = 'grouped';
|
|
|
|
|
2014-05-07 18:38:29 +02:00
|
|
|
if ($this->fluidishLayout || $this->fluidLayout) {
|
|
|
|
// we only support seven columns for now for fluid views; see T4054
|
|
|
|
if (count($this->columns) > 7) {
|
2014-06-09 20:36:49 +02:00
|
|
|
throw new Exception('No more than 7 columns per view.');
|
2014-05-07 18:38:29 +02:00
|
|
|
}
|
2013-04-02 20:23:24 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
$classes[] = 'aphront-multi-column-'.count($this->columns).'-up';
|
|
|
|
|
|
|
|
$columns = array();
|
|
|
|
$i = 0;
|
2014-05-16 04:12:40 +02:00
|
|
|
foreach ($this->columns as $column_data) {
|
|
|
|
$column_class = array('aphront-multi-column-column');
|
|
|
|
if ($this->gutter) {
|
|
|
|
$column_class[] = $this->gutter;
|
|
|
|
}
|
|
|
|
$outer_class = array('aphront-multi-column-column-outer');
|
2013-04-02 20:23:24 +02:00
|
|
|
if (++$i === count($this->columns)) {
|
|
|
|
$column_class[] = 'aphront-multi-column-column-last';
|
2013-05-22 00:28:43 +02:00
|
|
|
$outer_class[] = 'aphront-multi-colum-column-outer-last';
|
2013-04-02 20:23:24 +02:00
|
|
|
}
|
2014-05-16 04:12:40 +02:00
|
|
|
$column = $column_data['column'];
|
|
|
|
if ($column_data['class']) {
|
|
|
|
$outer_class[] = $column_data['class'];
|
|
|
|
}
|
|
|
|
$column_sigil = idx($column_data, 'sigil');
|
|
|
|
$column_metadata = idx($column_data, 'metadata');
|
|
|
|
$column_inner = javelin_tag(
|
2013-04-02 20:23:24 +02:00
|
|
|
'div',
|
2014-05-16 04:12:40 +02:00
|
|
|
array(
|
|
|
|
'class' => implode(' ', $column_class),
|
|
|
|
'sigil' => $column_sigil,
|
|
|
|
'meta' => $column_metadata),
|
2013-04-02 20:23:24 +02:00
|
|
|
$column);
|
|
|
|
$columns[] = phutil_tag(
|
|
|
|
'div',
|
2014-05-16 04:12:40 +02:00
|
|
|
array(
|
|
|
|
'class' => implode(' ', $outer_class)),
|
2013-04-02 20:23:24 +02:00
|
|
|
$column_inner);
|
|
|
|
}
|
|
|
|
|
|
|
|
$view = phutil_tag(
|
|
|
|
'div',
|
|
|
|
array(
|
|
|
|
'class' => implode(' ', $classes),
|
|
|
|
),
|
|
|
|
array(
|
|
|
|
$columns,
|
|
|
|
));
|
|
|
|
|
|
|
|
$classes = array();
|
|
|
|
$classes[] = 'aphront-multi-column-outer';
|
|
|
|
if ($this->fluidLayout) {
|
|
|
|
$classes[] = 'aphront-multi-column-fluid';
|
2013-11-06 03:55:42 +01:00
|
|
|
if ($this->fluidishLayout) {
|
|
|
|
$classes[] = 'aphront-multi-column-fluidish';
|
|
|
|
}
|
2013-04-02 20:23:24 +02:00
|
|
|
} else {
|
|
|
|
$classes[] = 'aphront-multi-column-fixed';
|
|
|
|
}
|
|
|
|
|
|
|
|
$board = phutil_tag(
|
|
|
|
'div',
|
|
|
|
array(
|
|
|
|
'class' => implode(' ', $classes)
|
|
|
|
),
|
|
|
|
$view);
|
|
|
|
|
2014-02-11 01:04:42 +01:00
|
|
|
if ($this->border) {
|
2013-05-22 00:28:43 +02:00
|
|
|
$board = id(new PHUIBoxView())
|
2014-02-11 01:04:42 +01:00
|
|
|
->setBorder(true)
|
2013-05-22 00:28:43 +02:00
|
|
|
->appendChild($board)
|
|
|
|
->addPadding(PHUI::PADDING_MEDIUM_TOP)
|
|
|
|
->addPadding(PHUI::PADDING_MEDIUM_BOTTOM);
|
|
|
|
}
|
|
|
|
|
2013-04-02 20:23:24 +02:00
|
|
|
return phutil_tag(
|
|
|
|
'div',
|
|
|
|
array(
|
2014-05-16 04:12:40 +02:00
|
|
|
'class' => 'aphront-multi-column-view',
|
|
|
|
'id' => $this->getID(),
|
2013-04-02 20:23:24 +02:00
|
|
|
),
|
|
|
|
$board);
|
|
|
|
}
|
|
|
|
}
|