mirror of
https://we.phorge.it/source/phorge.git
synced 2024-11-23 07:12:41 +01:00
Modernize "revision update history" in Differential
Summary: Ref T4585. - Use modern UI kit. - Make mobile-ish. - Fix a couple minor things. Test Plan: {F127155} {F127156} Reviewers: btrahan, chad Reviewed By: chad Subscribers: aran, epriestley, chad Maniphest Tasks: T4585 Differential Revision: https://secure.phabricator.com/D8504
This commit is contained in:
epriestley
parent
a4a4322d7a
commit
c0d433727c
4 changed files with 180 additions and 115 deletions
|
|
@ -61,14 +61,15 @@ final class DifferentialRevisionUpdateHistoryView extends AphrontView {
|
|||
$disable = false;
|
||||
$radios = array();
|
||||
$last_base = null;
|
||||
$rowc = array();
|
||||
foreach ($data as $row) {
|
||||
|
||||
$diff = $row['obj'];
|
||||
$name = $row['name'];
|
||||
$id = $row['id'];
|
||||
|
||||
$old_class = null;
|
||||
$new_class = null;
|
||||
$old_class = false;
|
||||
$new_class = false;
|
||||
|
||||
if ($id) {
|
||||
$new_checked = ($this->selectedDiffID == $id);
|
||||
|
|
@ -82,9 +83,15 @@ final class DifferentialRevisionUpdateHistoryView extends AphrontView {
|
|||
'sigil' => 'differential-new-radio',
|
||||
));
|
||||
if ($new_checked) {
|
||||
$new_class = " revhistory-new-now";
|
||||
$new_class = true;
|
||||
$disable = true;
|
||||
}
|
||||
$new = phutil_tag(
|
||||
'div',
|
||||
array(
|
||||
'class' => 'differential-update-history-radio',
|
||||
),
|
||||
$new);
|
||||
} else {
|
||||
$new = null;
|
||||
}
|
||||
|
|
@ -104,8 +111,14 @@ final class DifferentialRevisionUpdateHistoryView extends AphrontView {
|
|||
));
|
||||
$radios[] = $uniq;
|
||||
if ($old_checked) {
|
||||
$old_class = " revhistory-old-now";
|
||||
$old_class = true;
|
||||
}
|
||||
$old = phutil_tag(
|
||||
'div',
|
||||
array(
|
||||
'class' => 'differential-update-history-radio',
|
||||
),
|
||||
$old);
|
||||
} else {
|
||||
$old = null;
|
||||
}
|
||||
|
|
@ -118,19 +131,25 @@ final class DifferentialRevisionUpdateHistoryView extends AphrontView {
|
|||
$age = null;
|
||||
}
|
||||
|
||||
if (++$idx % 2) {
|
||||
$class = 'alt';
|
||||
} else {
|
||||
$class = null;
|
||||
}
|
||||
|
||||
$lint_attrs = array('class' => 'revhistory-star');
|
||||
$unit_attrs = array('class' => 'revhistory-star');
|
||||
if ($diff) {
|
||||
$lint = self::renderDiffLintStar($row['obj']);
|
||||
$lint = phutil_tag(
|
||||
'div',
|
||||
array(
|
||||
'class' => 'lintunit-star',
|
||||
'title' => self::getDiffLintMessage($diff),
|
||||
),
|
||||
$lint);
|
||||
|
||||
$unit = self::renderDiffUnitStar($row['obj']);
|
||||
$lint_attrs['title'] = self::getDiffLintMessage($diff);
|
||||
$unit_attrs['title'] = self::getDiffUnitMessage($diff);
|
||||
$unit = phutil_tag(
|
||||
'div',
|
||||
array(
|
||||
'class' => 'lintunit-star',
|
||||
'title' => self::getDiffUnitMessage($diff),
|
||||
),
|
||||
$unit);
|
||||
|
||||
$base = $this->renderBaseRevision($diff);
|
||||
} else {
|
||||
$lint = null;
|
||||
|
|
@ -145,22 +164,31 @@ final class DifferentialRevisionUpdateHistoryView extends AphrontView {
|
|||
|
||||
$id_link = phutil_tag(
|
||||
'a',
|
||||
array('href' => '/differential/diff/'.$id.'/'),
|
||||
$id);
|
||||
$rows[] = phutil_tag(
|
||||
'tr',
|
||||
array('class' => $class),
|
||||
array(
|
||||
phutil_tag('td', array('class' => 'revhistory-name'), $name),
|
||||
phutil_tag('td', array('class' => 'revhistory-id'), $id_link),
|
||||
phutil_tag('td', array('class' => 'revhistory-base'), $base),
|
||||
phutil_tag('td', array('class' => 'revhistory-desc'), $desc),
|
||||
phutil_tag('td', array('class' => 'revhistory-age'), $age),
|
||||
phutil_tag('td', $lint_attrs, $lint),
|
||||
phutil_tag('td', $unit_attrs, $unit),
|
||||
phutil_tag('td', array('class' => 'revhistory-old'.$old_class), $old),
|
||||
phutil_tag('td', array('class' => 'revhistory-new'.$new_class), $new),
|
||||
));
|
||||
'href' => '/differential/diff/'.$id.'/',
|
||||
),
|
||||
$id);
|
||||
|
||||
$rows[] = array(
|
||||
$name,
|
||||
$id_link,
|
||||
$base,
|
||||
$desc,
|
||||
$age,
|
||||
$lint,
|
||||
$unit,
|
||||
$old,
|
||||
$new,
|
||||
);
|
||||
|
||||
$classes = array();
|
||||
if ($old_class) {
|
||||
$classes[] = 'differential-update-history-old-now';
|
||||
}
|
||||
if ($new_class) {
|
||||
$classes[] = 'differential-update-history-new-now';
|
||||
}
|
||||
$rowc[] = nonempty(implode(' ', $classes), null);
|
||||
}
|
||||
|
||||
Javelin::initBehavior(
|
||||
|
|
@ -190,35 +218,74 @@ final class DifferentialRevisionUpdateHistoryView extends AphrontView {
|
|||
}
|
||||
$select = phutil_tag('select', array('name' => 'whitespace'), $options);
|
||||
|
||||
array_unshift($rows, phutil_tag('tr', array(), array(
|
||||
phutil_tag('th', array(), pht('Diff')),
|
||||
phutil_tag('th', array(), pht('ID')),
|
||||
phutil_tag('th', array(), pht('Base')),
|
||||
phutil_tag('th', array(), pht('Description')),
|
||||
phutil_tag('th', array(), pht('Created')),
|
||||
phutil_tag('th', array(), pht('Lint')),
|
||||
phutil_tag('th', array(), pht('Unit')),
|
||||
)));
|
||||
|
||||
$label = pht('Whitespace Changes: %s', $select);
|
||||
|
||||
$content = phutil_tag_div(
|
||||
'differential-revision-history differential-panel',
|
||||
phutil_tag(
|
||||
'form',
|
||||
array('action' => '#toc'),
|
||||
phutil_tag(
|
||||
'table',
|
||||
array('class' => 'differential-revision-history-table'), array(
|
||||
phutil_implode_html("\n", $rows),
|
||||
phutil_tag('tr', array(), phutil_tag(
|
||||
'td',
|
||||
array('colspan' => 9, 'class' => 'diff-differ-submit'),
|
||||
$table = id(new AphrontTableView($rows));
|
||||
$table->setHeaders(
|
||||
array(
|
||||
phutil_tag('label', array(), $label),
|
||||
phutil_tag('button', array(), pht('Show Diff')),
|
||||
)))
|
||||
))));
|
||||
pht('Diff'),
|
||||
pht('ID'),
|
||||
pht('Base'),
|
||||
pht('Description'),
|
||||
pht('Created'),
|
||||
pht('Lint'),
|
||||
pht('Unit'),
|
||||
'',
|
||||
'',
|
||||
));
|
||||
$table->setColumnClasses(
|
||||
array(
|
||||
'pri',
|
||||
'',
|
||||
'',
|
||||
'wide',
|
||||
'date',
|
||||
'center',
|
||||
'center',
|
||||
'center differential-update-history-old',
|
||||
'center differential-update-history-new',
|
||||
));
|
||||
$table->setRowClasses($rowc);
|
||||
$table->setDeviceVisibility(
|
||||
array(
|
||||
true,
|
||||
true,
|
||||
false,
|
||||
true,
|
||||
false,
|
||||
false,
|
||||
false,
|
||||
true,
|
||||
true,
|
||||
));
|
||||
|
||||
$show_diff = phutil_tag(
|
||||
'div',
|
||||
array(
|
||||
'class' => 'differential-update-history-footer',
|
||||
),
|
||||
array(
|
||||
phutil_tag(
|
||||
'label',
|
||||
array(),
|
||||
array(
|
||||
pht('Whitespace Changes:'),
|
||||
$select,
|
||||
)),
|
||||
phutil_tag(
|
||||
'button',
|
||||
array(),
|
||||
pht('Show Diff')),
|
||||
));
|
||||
|
||||
$content = phabricator_form(
|
||||
$this->getUser(),
|
||||
array(
|
||||
'action' => '#toc',
|
||||
),
|
||||
array(
|
||||
$table,
|
||||
$show_diff,
|
||||
));
|
||||
|
||||
return id(new PHUIObjectBoxView())
|
||||
->setHeaderText(pht('Revision Update History'))
|
||||
|
|
|
|||
|
|
@ -153,8 +153,8 @@ final class AphrontTableView extends AphrontView {
|
|||
$classes[] = $col_classes[$col_num];
|
||||
}
|
||||
|
||||
if (empty($device_visiblity[$col_num])) {
|
||||
$classes[] = 'aphront-table-nodevice';
|
||||
if (empty($device_visibility[$col_num])) {
|
||||
$classes[] = 'aphront-table-view-nodevice';
|
||||
}
|
||||
|
||||
if ($sort_values[$col_num] !== null) {
|
||||
|
|
@ -251,6 +251,9 @@ final class AphrontTableView extends AphrontView {
|
|||
continue;
|
||||
}
|
||||
$class = $col_classes[$col_num];
|
||||
if (empty($device_visibility[$col_num])) {
|
||||
$class = trim($class.' aphront-table-view-nodevice');
|
||||
}
|
||||
if (!empty($this->cellClasses[$row_num][$col_num])) {
|
||||
$class = trim($class.' '.$this->cellClasses[$row_num][$col_num]);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -144,6 +144,7 @@ th.aphront-table-view-sortable-selected {
|
|||
|
||||
.aphront-table-view td.pri {
|
||||
font-weight: bold;
|
||||
color: {$darkbluetext};
|
||||
}
|
||||
|
||||
.aphront-table-view td.wide {
|
||||
|
|
@ -231,6 +232,17 @@ span.single-display-line-content {
|
|||
padding: 2px 4px 0px;
|
||||
}
|
||||
|
||||
.aphront-table-view th.center,
|
||||
.aphront-table-view td.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.device .aphront-table-view td + td.center,
|
||||
.device .aphront-table-view th + th.center {
|
||||
padding-left: 3px;
|
||||
padding-right: 3px;
|
||||
}
|
||||
|
||||
.device-desktop .aphront-table-view-device {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,77 +2,60 @@
|
|||
* @provides differential-revision-history-css
|
||||
*/
|
||||
|
||||
.differential-revision-history-table {
|
||||
width: 100%;
|
||||
border-collapse: separate;
|
||||
border-spacing: 1px;
|
||||
}
|
||||
|
||||
.differential-revision-history-table th,
|
||||
.differential-revision-history-table td {
|
||||
color: {$darkbluetext};
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
.differential-revision-history-table td {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.differential-revision-history-table tr.alt {
|
||||
background: {$greybackground};
|
||||
}
|
||||
|
||||
.differential-revision-history-table td.revhistory-desc {
|
||||
width: 100%;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.differential-revision-history-table td.revhistory-name {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.differential-revision-history-table td.revhistory-age {
|
||||
.differential-update-history-footer {
|
||||
text-align: right;
|
||||
vertical-align: middle;
|
||||
padding: 4px 8px;
|
||||
border-top: 1px solid {$lightblueborder};
|
||||
background: {$lightbluebackground};
|
||||
}
|
||||
|
||||
.differential-revision-history-table td.revhistory-old,
|
||||
.differential-revision-history-table td.revhistory-new {
|
||||
padding: 0 16px;
|
||||
text-align: center;
|
||||
.differential-update-history-footer label {
|
||||
margin-right: 12px;
|
||||
color: {$greytext};
|
||||
}
|
||||
|
||||
.differential-revision-history-table td.revhistory-old {
|
||||
.differential-update-history-footer select {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.device .differential-update-history-footer label {
|
||||
display: block;
|
||||
margin-right: 0;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.differential-update-history-radio {
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.aphront-table-view td.differential-update-history-old {
|
||||
background: #f9d0d0;
|
||||
}
|
||||
|
||||
.differential-revision-history-table td.revhistory-old-now {
|
||||
background: #ffaaaa;
|
||||
}
|
||||
|
||||
.differential-revision-history-table td.revhistory-new {
|
||||
.aphront-table-view td.differential-update-history-new {
|
||||
background: #d0ffd0;
|
||||
}
|
||||
|
||||
.differential-revision-history-table td.revhistory-new-now {
|
||||
.aphront-table-view
|
||||
.differential-update-history-old-now
|
||||
td.differential-update-history-old,
|
||||
.aphront-table-view
|
||||
.alt-differential-update-history-old-now
|
||||
td.differential-update-history-old {
|
||||
background: #ffaaaa;
|
||||
}
|
||||
|
||||
.aphront-table-view
|
||||
.differential-update-history-new-now
|
||||
td.differential-update-history-new,
|
||||
.aphront-table-view
|
||||
.alt-differential-update-history-new-now
|
||||
td.differential-update-history-new {
|
||||
background: #aaffaa;
|
||||
}
|
||||
|
||||
.differential-revision-history-table td.revhistory-star {
|
||||
.lintunit-star {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.differential-revision-history-table td.diff-differ-submit {
|
||||
text-align: right;
|
||||
border-bottom: none;
|
||||
padding: 8px 0 4px 0;
|
||||
}
|
||||
|
||||
.differential-revision-history-table td.diff-differ-submit button {
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.differential-revision-history-table td.diff-differ-submit label {
|
||||
font-weight: bold;
|
||||
padding-right: 4px;
|
||||
color: {$darkgreytext};
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue