revi-archive/phorge-phorge
1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2025-01-28 07:28:20 +01:00
Code Issues Releases Wiki Activity

Update tables to table-kit view.

Browse source 
Summary: Reskinning tables to table-kit mocks, which includes new textures, spacing, slightly larger fonts. Looking for early feedback before adding in new row colors and other items into the class.

Test Plan: http://phab1.pushlabs.net/uiexample/view/PhabricatorSortTableExample/

Reviewers: btrahan, epriestley

Reviewed By: epriestley

CC: aran, Korvin

Differential Revision: https://secure.phabricator.com/D4396
This commit is contained in:
Chad Little 2013-01-11 11:24:35 -08:00
parent 30345cfbdd
commit 16a0f4a88e
6 changed files with 134 additions and 109 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

110
src/__celerity_resource_map__.php
View file

@ -546,6 +546,20 @@ celerity_register_resource_map(array(
'disk' => '/rsrc/image/texture/dark-menu.png', 'disk' => '/rsrc/image/texture/dark-menu.png',
'type' => 'png', 'type' => 'png',
), ),
'/rsrc/image/texture/table_header.png' =>
array(
'hash' => '4ed3f56a30d3749e8f62052b9735a316',
'uri' => '/res/4ed3f56a/rsrc/image/texture/table_header.png',
'disk' => '/rsrc/image/texture/table_header.png',
'type' => 'png',
),
'/rsrc/image/texture/table_header_hover.png' =>
array(
'hash' => 'ea1f71a604e9b4859de1e25751540437',
'uri' => '/res/ea1f71a6/rsrc/image/texture/table_header_hover.png',
'disk' => '/rsrc/image/texture/table_header_hover.png',
'type' => 'png',
),
'/rsrc/swf/aphlict.swf' => '/rsrc/swf/aphlict.swf' =>
array( array(
'hash' => '4b9a9d83bebaf254f3790e87b45c1f92', 'hash' => '4b9a9d83bebaf254f3790e87b45c1f92',
@ -681,7 +695,7 @@ celerity_register_resource_map(array(
), ),
'aphront-table-view-css' => 'aphront-table-view-css' =>
array( array(
'uri' => '/res/94d76d56/rsrc/css/aphront/table-view.css', 'uri' => '/res/fa7af0ad/rsrc/css/aphront/table-view.css',
'type' => 'css', 'type' => 'css',
'requires' => 'requires' =>
array( array(
@ -1289,7 +1303,7 @@ celerity_register_resource_map(array(
), ),
'javelin-behavior-diffusion-commit-graph' => 'javelin-behavior-diffusion-commit-graph' =>
array( array(
'uri' => '/res/cfe336e8/rsrc/js/application/diffusion/behavior-commit-graph.js', 'uri' => '/res/62bd2035/rsrc/js/application/diffusion/behavior-commit-graph.js',
'type' => 'js', 'type' => 'js',
'requires' => 'requires' =>
array( array(
@ -3232,7 +3246,7 @@ celerity_register_resource_map(array(
), array( ), array(
'packages' => 'packages' =>
array( array(
'e4a42bf7' => '6e748adf' =>
array( array(
'name' => 'core.pkg.css', 'name' => 'core.pkg.css',
'symbols' => 'symbols' =>
@ -3277,7 +3291,7 @@ celerity_register_resource_map(array(
37 => 'phabricator-object-item-list-view-css', 37 => 'phabricator-object-item-list-view-css',
38 => 'global-drag-and-drop-css', 38 => 'global-drag-and-drop-css',
), ),
'uri' => '/res/pkg/e4a42bf7/core.pkg.css', 'uri' => '/res/pkg/6e748adf/core.pkg.css',
'type' => 'css', 'type' => 'css',
), ),
'2921e259' => '2921e259' =>
@ -3395,7 +3409,7 @@ celerity_register_resource_map(array(
'uri' => '/res/pkg/c8ce2d88/diffusion.pkg.css', 'uri' => '/res/pkg/c8ce2d88/diffusion.pkg.css',
'type' => 'css', 'type' => 'css',
), ),
'5e68be89' => 'f96657b8' =>
array( array(
'name' => 'diffusion.pkg.js', 'name' => 'diffusion.pkg.js',
'symbols' => 'symbols' =>
@ -3404,7 +3418,7 @@ celerity_register_resource_map(array(
1 => 'javelin-behavior-diffusion-commit-graph', 1 => 'javelin-behavior-diffusion-commit-graph',
2 => 'javelin-behavior-audit-preview', 2 => 'javelin-behavior-audit-preview',
), ),
'uri' => '/res/pkg/5e68be89/diffusion.pkg.js', 'uri' => '/res/pkg/f96657b8/diffusion.pkg.js',
'type' => 'js', 'type' => 'js',
), ),
'fbeded59' => 'fbeded59' =>
@ -3466,19 +3480,19 @@ celerity_register_resource_map(array(
'reverse' => 'reverse' =>
array( array(
'aphront-attached-file-view-css' => 'ac211174', 'aphront-attached-file-view-css' => 'ac211174',
'aphront-crumbs-view-css' => 'e4a42bf7', 'aphront-crumbs-view-css' => '6e748adf',
'aphront-dialog-view-css' => 'e4a42bf7', 'aphront-dialog-view-css' => '6e748adf',
'aphront-error-view-css' => 'e4a42bf7', 'aphront-error-view-css' => '6e748adf',
'aphront-form-view-css' => 'e4a42bf7', 'aphront-form-view-css' => '6e748adf',
'aphront-headsup-action-list-view-css' => '20933a11', 'aphront-headsup-action-list-view-css' => '20933a11',
'aphront-headsup-view-css' => 'e4a42bf7', 'aphront-headsup-view-css' => '6e748adf',
'aphront-list-filter-view-css' => 'e4a42bf7', 'aphront-list-filter-view-css' => '6e748adf',
'aphront-pager-view-css' => 'e4a42bf7', 'aphront-pager-view-css' => '6e748adf',
'aphront-panel-view-css' => 'e4a42bf7', 'aphront-panel-view-css' => '6e748adf',
'aphront-table-view-css' => 'e4a42bf7', 'aphront-table-view-css' => '6e748adf',
'aphront-tokenizer-control-css' => 'e4a42bf7', 'aphront-tokenizer-control-css' => '6e748adf',
'aphront-tooltip-css' => 'e4a42bf7', 'aphront-tooltip-css' => '6e748adf',
'aphront-typeahead-control-css' => 'e4a42bf7', 'aphront-typeahead-control-css' => '6e748adf',
'differential-changeset-view-css' => '20933a11', 'differential-changeset-view-css' => '20933a11',
'differential-core-view-css' => '20933a11', 'differential-core-view-css' => '20933a11',
'differential-inline-comment-editor' => '76556a8f', 'differential-inline-comment-editor' => '76556a8f',
@ -3492,7 +3506,7 @@ celerity_register_resource_map(array(
'differential-table-of-contents-css' => '20933a11', 'differential-table-of-contents-css' => '20933a11',
'diffusion-commit-view-css' => 'c8ce2d88', 'diffusion-commit-view-css' => 'c8ce2d88',
'diffusion-icons-css' => 'c8ce2d88', 'diffusion-icons-css' => 'c8ce2d88',
'global-drag-and-drop-css' => 'e4a42bf7', 'global-drag-and-drop-css' => '6e748adf',
'inline-comment-summary-css' => '20933a11', 'inline-comment-summary-css' => '20933a11',
'javelin-aphlict' => '2921e259', 'javelin-aphlict' => '2921e259',
'javelin-behavior' => 'fbeded59', 'javelin-behavior' => 'fbeded59',
@ -3502,7 +3516,7 @@ celerity_register_resource_map(array(
'javelin-behavior-aphront-drag-and-drop' => '76556a8f', 'javelin-behavior-aphront-drag-and-drop' => '76556a8f',
'javelin-behavior-aphront-drag-and-drop-textarea' => '76556a8f', 'javelin-behavior-aphront-drag-and-drop-textarea' => '76556a8f',
'javelin-behavior-aphront-form-disable-on-submit' => '2921e259', 'javelin-behavior-aphront-form-disable-on-submit' => '2921e259',
'javelin-behavior-audit-preview' => '5e68be89', 'javelin-behavior-audit-preview' => 'f96657b8',
'javelin-behavior-dark-console' => '8edbada5', 'javelin-behavior-dark-console' => '8edbada5',
'javelin-behavior-dark-console-ajax' => '8edbada5', 'javelin-behavior-dark-console-ajax' => '8edbada5',
'javelin-behavior-device' => '2921e259', 'javelin-behavior-device' => '2921e259',
@ -3518,8 +3532,8 @@ celerity_register_resource_map(array(
'javelin-behavior-differential-show-more' => '76556a8f', 'javelin-behavior-differential-show-more' => '76556a8f',
'javelin-behavior-differential-toggle-files' => '76556a8f', 'javelin-behavior-differential-toggle-files' => '76556a8f',
'javelin-behavior-differential-user-select' => '76556a8f', 'javelin-behavior-differential-user-select' => '76556a8f',
'javelin-behavior-diffusion-commit-graph' => '5e68be89', 'javelin-behavior-diffusion-commit-graph' => 'f96657b8',
'javelin-behavior-diffusion-pull-lastmodified' => '5e68be89', 'javelin-behavior-diffusion-pull-lastmodified' => 'f96657b8',
'javelin-behavior-error-log' => '8edbada5', 'javelin-behavior-error-log' => '8edbada5',
'javelin-behavior-global-drag-and-drop' => '2921e259', 'javelin-behavior-global-drag-and-drop' => '2921e259',
'javelin-behavior-konami' => '2921e259', 'javelin-behavior-konami' => '2921e259',
@ -3561,49 +3575,49 @@ celerity_register_resource_map(array(
'javelin-util' => 'fbeded59', 'javelin-util' => 'fbeded59',
'javelin-vector' => 'fbeded59', 'javelin-vector' => 'fbeded59',
'javelin-workflow' => 'fbeded59', 'javelin-workflow' => 'fbeded59',
'lightbox-attachment-css' => 'e4a42bf7', 'lightbox-attachment-css' => '6e748adf',
'maniphest-task-summary-css' => 'ac211174', 'maniphest-task-summary-css' => 'ac211174',
'maniphest-transaction-detail-css' => 'ac211174', 'maniphest-transaction-detail-css' => 'ac211174',
'phabricator-app-buttons-css' => 'e4a42bf7', 'phabricator-app-buttons-css' => '6e748adf',
'phabricator-busy' => '2921e259', 'phabricator-busy' => '2921e259',
'phabricator-content-source-view-css' => '20933a11', 'phabricator-content-source-view-css' => '20933a11',
'phabricator-core-buttons-css' => 'e4a42bf7', 'phabricator-core-buttons-css' => '6e748adf',
'phabricator-core-css' => 'e4a42bf7', 'phabricator-core-css' => '6e748adf',
'phabricator-crumbs-view-css' => 'e4a42bf7', 'phabricator-crumbs-view-css' => '6e748adf',
'phabricator-directory-css' => 'e4a42bf7', 'phabricator-directory-css' => '6e748adf',
'phabricator-drag-and-drop-file-upload' => '76556a8f', 'phabricator-drag-and-drop-file-upload' => '76556a8f',
'phabricator-dropdown-menu' => '2921e259', 'phabricator-dropdown-menu' => '2921e259',
'phabricator-file-upload' => '2921e259', 'phabricator-file-upload' => '2921e259',
'phabricator-filetree-view-css' => 'e4a42bf7', 'phabricator-filetree-view-css' => '6e748adf',
'phabricator-flag-css' => 'e4a42bf7', 'phabricator-flag-css' => '6e748adf',
'phabricator-form-view-css' => 'e4a42bf7', 'phabricator-form-view-css' => '6e748adf',
'phabricator-header-view-css' => 'e4a42bf7', 'phabricator-header-view-css' => '6e748adf',
'phabricator-jump-nav' => 'e4a42bf7', 'phabricator-jump-nav' => '6e748adf',
'phabricator-keyboard-shortcut' => '2921e259', 'phabricator-keyboard-shortcut' => '2921e259',
'phabricator-keyboard-shortcut-manager' => '2921e259', 'phabricator-keyboard-shortcut-manager' => '2921e259',
'phabricator-main-menu-view' => 'e4a42bf7', 'phabricator-main-menu-view' => '6e748adf',
'phabricator-menu-item' => '2921e259', 'phabricator-menu-item' => '2921e259',
'phabricator-nav-view-css' => 'e4a42bf7', 'phabricator-nav-view-css' => '6e748adf',
'phabricator-notification' => '2921e259', 'phabricator-notification' => '2921e259',
'phabricator-notification-css' => 'e4a42bf7', 'phabricator-notification-css' => '6e748adf',
'phabricator-notification-menu-css' => 'e4a42bf7', 'phabricator-notification-menu-css' => '6e748adf',
'phabricator-object-item-list-view-css' => 'e4a42bf7', 'phabricator-object-item-list-view-css' => '6e748adf',
'phabricator-object-selector-css' => '20933a11', 'phabricator-object-selector-css' => '20933a11',
'phabricator-paste-file-upload' => '2921e259', 'phabricator-paste-file-upload' => '2921e259',
'phabricator-prefab' => '2921e259', 'phabricator-prefab' => '2921e259',
'phabricator-project-tag-css' => 'ac211174', 'phabricator-project-tag-css' => 'ac211174',
'phabricator-remarkup-css' => 'e4a42bf7', 'phabricator-remarkup-css' => '6e748adf',
'phabricator-shaped-request' => '76556a8f', 'phabricator-shaped-request' => '76556a8f',
'phabricator-side-menu-view-css' => 'e4a42bf7', 'phabricator-side-menu-view-css' => '6e748adf',
'phabricator-standard-page-view' => 'e4a42bf7', 'phabricator-standard-page-view' => '6e748adf',
'phabricator-textareautils' => '2921e259', 'phabricator-textareautils' => '2921e259',
'phabricator-tooltip' => '2921e259', 'phabricator-tooltip' => '2921e259',
'phabricator-transaction-view-css' => 'e4a42bf7', 'phabricator-transaction-view-css' => '6e748adf',
'phabricator-zindex-css' => 'e4a42bf7', 'phabricator-zindex-css' => '6e748adf',
'sprite-apps-large-css' => 'e4a42bf7', 'sprite-apps-large-css' => '6e748adf',
'sprite-gradient-css' => 'e4a42bf7', 'sprite-gradient-css' => '6e748adf',
'sprite-icon-css' => 'e4a42bf7', 'sprite-icon-css' => '6e748adf',
'sprite-menu-css' => 'e4a42bf7', 'sprite-menu-css' => '6e748adf',
'syntax-highlighting-css' => 'e4a42bf7', 'syntax-highlighting-css' => '6e748adf',
), ),
)); ));

10
src/view/control/AphrontTableView.php
View file

@ -171,10 +171,10 @@ final class AphrontTableView extends AphrontView {
$classes[] = 'aphront-table-view-sortable'; $classes[] = 'aphront-table-view-sortable';
$sort_value = $sort_values[$col_num]; $sort_value = $sort_values[$col_num];
$sort_glyph = "\xE2\x86\x93"; $sort_glyph_class = 'aphront-table-down-sort';
if ($sort_value == $this->sortSelected) { if ($sort_value == $this->sortSelected) {
if ($this->sortReverse) { if ($this->sortReverse) {
$sort_glyph = "\xE2\x86\x91"; $sort_glyph_class = 'aphront-table-up-sort';
} else if (!$this->sortReverse) { } else if (!$this->sortReverse) {
$sort_value = '-'.$sort_value; $sort_value = '-'.$sort_value;
} }
@ -184,9 +184,9 @@ final class AphrontTableView extends AphrontView {
$sort_glyph = phutil_render_tag( $sort_glyph = phutil_render_tag(
'span', 'span',
array( array(
'class' => 'aphront-table-view-sort-glyph', 'class' => $sort_glyph_class,
), ),
$sort_glyph); '');
$header = phutil_render_tag( $header = phutil_render_tag(
'a', 'a',
@ -194,7 +194,7 @@ final class AphrontTableView extends AphrontView {
'href' => $this->sortURI->alter($this->sortParam, $sort_value), 'href' => $this->sortURI->alter($this->sortParam, $sort_value),
'class' => 'aphront-table-view-sort-link', 'class' => 'aphront-table-view-sort-link',
), ),
$sort_glyph.' '.$header); $header.' '.$sort_glyph);
} }
if ($classes) { if ($classes) {

121
webroot/rsrc/css/aphront/table-view.css
View file

@ -3,49 +3,78 @@
*/ */
.aphront-table-view { .aphront-table-view {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
background: #fdfdfd; background: #fff;
border: 1px solid #003366; border: 1px solid #d5dae0;
} }
.aphront-table-view tr.alt { .aphront-table-view tr.alt {
background: #efefef; background: #f1f3f8;
} }
.aphront-table-view th { .aphront-table-view th {
font-size: 12px;
font-weight: bold; font-weight: bold;
background: #003366;
color: white;
white-space: nowrap; white-space: nowrap;
color: #525252;
text-shadow: 0 1px 0 white;
font-weight: bold;
background-image: url(/rsrc/image/texture/table_header.png);
background-repeat: repeat-x;
}
th.aphront-table-view-sortable-selected {
background-image: url(/rsrc/image/texture/table_header_hover.png);
} }
.aphront-table-view th a, .aphront-table-view th a,
.aphront-table-view th a:hover, .aphront-table-view th a:hover,
.aphront-table-view th a:link { .aphront-table-view th a:link {
padding: 4px 8px; color: #525252;
color: white; text-shadow: 0 1px 0 white;
display: block; display: block;
text-decoration: none; text-decoration: none;
} }
.aphront-table-view th a:hover { .aphront-table-view th a:hover {
background: #3366aa; text-decoration: underline;
} }
.aphront-table-view td.header { .aphront-table-view td.header {
padding: 4px 8px; padding: 4px 8px;
background: #3b5998; white-space: nowrap;
color: white; text-align: right;
white-space: nowrap; color: #525252;
text-align: right; font-weight: bold;
} }
.aphront-table-view td { .aphront-table-view td {
font-size: 11px; white-space: nowrap;
white-space: nowrap; vertical-align: middle;
vertical-align: middle; }
.aphront-table-down-sort {
display: inline-block;
margin-top: 5px;
width: 0;
height: 0;
vertical-align: top;
border-top: 4px solid black;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
content: "";
}
.aphront-table-up-sort {
display: inline-block;
margin-top: 5px;
width: 0;
height: 0;
vertical-align: top;
border-bottom: 4px solid black;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
content: "";
} }
/* - Padding ------------------------------------------------------------------- /* - Padding -------------------------------------------------------------------
@ -58,11 +87,13 @@
*/ */
.aphront-table-view th { .aphront-table-view th {
padding: 4px 8px; padding: 8px 10px;
font-size: 12px;
} }
.aphront-table-view td { .aphront-table-view td {
padding: 4px 8px; padding: 6px 10px;
font-size: 12px;
} }
.device-tablet .aphront-table-view td, .device-tablet .aphront-table-view td,
@ -87,11 +118,11 @@
} }
.aphront-table-view td.sorted-column { .aphront-table-view td.sorted-column {
background: #f6f6fd; background: #f1f3f8;
} }
.aphront-table-view tr.alt td.sorted-column { .aphront-table-view tr.alt td.sorted-column {
background: #e0e0ef; background: #e4e6eb;
} }
.aphront-table-view td.action { .aphront-table-view td.action {
@ -100,31 +131,31 @@
} }
.aphront-table-view td.larger { .aphront-table-view td.larger {
font-size: 14px; font-size: 14px;
} }
.aphront-table-view td.pri { .aphront-table-view td.pri {
font-weight: bold; font-weight: bold;
} }
.aphront-table-view td.wide { .aphront-table-view td.wide {
white-space: normal; white-space: normal;
width: 100%; width: 100%;
} }
.aphront-table-view td.right { .aphront-table-view td.right {
text-align: right; text-align: right;
} }
.aphront-table-view td.mono { .aphront-table-view td.mono {
font-family: "Monaco", monospace; font-family: "Monaco", monospace;
font-size: 10px; font-size: 11px;
} }
.aphront-table-view td.n { .aphront-table-view td.n {
font-family: "Monaco", monospace; font-family: "Monaco", monospace;
font-size: 10px; font-size: 11px;
text-align: right; text-align: right;
} }
.aphront-table-view td.wrap { .aphront-table-view td.wrap {
@ -147,14 +178,13 @@ span.single-display-line-content {
} }
.aphront-table-view tr.highlighted { .aphront-table-view tr.highlighted {
background: #ffff99; background: #fcf8e2;
} }
.aphront-table-view tr.alt-highlighted { .aphront-table-view tr.alt-highlighted {
background: #f3f399; background: #fcf2bb;
} }
.aphront-table-view tr.no-data td { .aphront-table-view tr.no-data td {
padding: 1em; padding: 1em;
text-align: center; text-align: center;
@ -182,25 +212,6 @@ span.single-display-line-content {
padding: 2px 4px 0px; padding: 2px 4px 0px;
} }
.aphront-table-view th.aphront-table-view-sortable {
padding: 0;
}
.aphront-table-view-sort-glyph {
float: right;
padding-left: 8px;
color: #6677bb;
}
th a:hover .aphront-table-view-sort-glyph {
color: #ffffff;
}
.aphront-table-view-sortable-selected .aphront-table-view-sort-glyph {
display: block;
color: white;
}
.device-desktop .aphront-table-view-device { .device-desktop .aphront-table-view-device {
display: none; display: none;
} }
@ -221,6 +232,6 @@ th a:hover .aphront-table-view-sort-glyph {
.aphront-table-view td.link a { .aphront-table-view td.link a {
display: block; display: block;
padding: 6px; padding: 6px 8px;
font-weight: bold; font-weight: bold;
} }

BIN
webroot/rsrc/image/texture/table_header.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
webroot/rsrc/image/texture/table_header_hover.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.2 KiB

2
webroot/rsrc/js/application/diffusion/behavior-commit-graph.js
View file

@ -52,7 +52,7 @@ JX.behavior('diffusion-commit-graph', function(config) {
return (col * cell) + (cell / 2); return (col * cell) + (cell / 2);
} }
var h = 24; var h = 26;
var w = cell * config.count; var w = cell * config.count;
var canvas = JX.$N('canvas', {width: w, height: h}); var canvas = JX.$N('canvas', {width: w, height: h});