revi-archive/phorge-phorge
1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-11-22 23:02:42 +01:00
Code Issues Releases Wiki Activity

[Redesign] Convert Dashboard Panels to ObjectBox

Browse source 
Summary: Moves Dashboard Panels to use PHUIObjectBoxView and PHUIHeaderView

Test Plan:
Tested the most common dashboards, Differential, Maniphest, Projects, Feed, Audit. Some edge cases (Legalpad, Macro) still are in progress. Tested laying out a new Dashboard, removing panels, moving panels.

{F406170}

Reviewers: btrahan, epriestley

Reviewed By: epriestley

Subscribers: Korvin, epriestley

Maniphest Tasks: T8099

Differential Revision: https://secure.phabricator.com/D12873
This commit is contained in:
Chad Little 2015-05-17 07:05:14 -07:00
parent c64ee2c48a
commit 490a6fe8b1
14 changed files with 158 additions and 159 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
resources/celerity/map.php
View file

@ -7,7 +7,7 @@
*/
return array(
'names' => array(
'core.pkg.css' => '3d5bd914',
'core.pkg.css' => '6a6be483',
'core.pkg.js' => 'f3e08b38',
'darkconsole.pkg.js' => 'e7393ebb',
'differential.pkg.css' => 'bb338e4b',
@ -54,7 +54,7 @@ return array(
'rsrc/css/application/conpherence/widget-pane.css' => '2af42ebe',
'rsrc/css/application/contentsource/content-source-view.css' => '4b8b05d4',
'rsrc/css/application/countdown/timer.css' => '86b7b0a0',
'rsrc/css/application/dashboard/dashboard.css' => 'db1d30b0',
'rsrc/css/application/dashboard/dashboard.css' => 'eb458607',
'rsrc/css/application/diff/inline-comment-summary.css' => 'eb5f8e8c',
'rsrc/css/application/differential/add-comment.css' => 'c47f8c40',
'rsrc/css/application/differential/changeset-view.css' => 'e19cfd6e',
@ -68,7 +68,7 @@ return array(
'rsrc/css/application/diffusion/diffusion-icons.css' => '9c5828da',
'rsrc/css/application/diffusion/diffusion-readme.css' => '2106ea08',
'rsrc/css/application/diffusion/diffusion-source.css' => '66fdf661',
'rsrc/css/application/feed/feed.css' => 'b513b5f4',
'rsrc/css/application/feed/feed.css' => 'f1aa8c11',
'rsrc/css/application/files/global-drag-and-drop.css' => '697324ad',
'rsrc/css/application/flag/flag.css' => '5337623f',
'rsrc/css/application/harbormaster/harbormaster.css' => '49d64eb4',
@ -123,7 +123,7 @@ return array(
'rsrc/css/phui/calendar/phui-calendar-list.css' => 'c1d0ca59',
'rsrc/css/phui/calendar/phui-calendar-month.css' => '75e6a2ee',
'rsrc/css/phui/calendar/phui-calendar.css' => '8675968e',
'rsrc/css/phui/phui-action-header-view.css' => 'e4471f43',
'rsrc/css/phui/phui-action-header-view.css' => 'd1cb5f81',
'rsrc/css/phui/phui-action-list.css' => '4f4d09f2',
'rsrc/css/phui/phui-action-panel.css' => '3ee9afd5',
'rsrc/css/phui/phui-box.css' => 'a5bb366d',
@ -134,14 +134,14 @@ return array(
'rsrc/css/phui/phui-fontkit.css' => '1e71371a',
'rsrc/css/phui/phui-form-view.css' => 'e1abbe8e',
'rsrc/css/phui/phui-form.css' => 'f535f938',
'rsrc/css/phui/phui-header-view.css' => '00898f29',
'rsrc/css/phui/phui-icon.css' => 'bc766998',
'rsrc/css/phui/phui-header-view.css' => '036ca2aa',
'rsrc/css/phui/phui-icon.css' => '88ba9081',
'rsrc/css/phui/phui-image-mask.css' => '5a8b09c8',
'rsrc/css/phui/phui-info-panel.css' => '27ea50a1',
'rsrc/css/phui/phui-info-view.css' => '33595731',
'rsrc/css/phui/phui-list.css' => '2e25ebfb',
'rsrc/css/phui/phui-object-box.css' => '3a601bc5',
'rsrc/css/phui/phui-object-item-list-view.css' => 'e052f697',
'rsrc/css/phui/phui-object-box.css' => '8d9239e5',
'rsrc/css/phui/phui-object-item-list-view.css' => '80c3d6fe',
'rsrc/css/phui/phui-pinboard-view.css' => 'eaab2b1b',
'rsrc/css/phui/phui-property-list-view.css' => 'd2d143ea',
'rsrc/css/phui/phui-remarkup-preview.css' => '19ad512b',
@ -702,11 +702,11 @@ return array(
'phabricator-content-source-view-css' => '4b8b05d4',
'phabricator-core-css' => '6230ff55',
'phabricator-countdown-css' => '86b7b0a0',
'phabricator-dashboard-css' => 'db1d30b0',
'phabricator-dashboard-css' => 'eb458607',
'phabricator-drag-and-drop-file-upload' => '07de8873',
'phabricator-draggable-list' => 'a16ec1c6',
'phabricator-fatal-config-template-css' => '8e6c6fcd',
'phabricator-feed-css' => 'b513b5f4',
'phabricator-feed-css' => 'f1aa8c11',
'phabricator-file-upload' => '477359c8',
'phabricator-filetree-view-css' => 'fccf9f82',
'phabricator-flag-css' => '5337623f',
@ -754,7 +754,7 @@ return array(
'phortune-css' => '9149f103',
'phrequent-css' => 'ffc185ad',
'phriction-document-css' => '0d16bc9a',
'phui-action-header-view-css' => 'e4471f43',
'phui-action-header-view-css' => 'd1cb5f81',
'phui-action-panel-css' => '3ee9afd5',
'phui-box-css' => 'a5bb366d',
'phui-button-css' => 'b995182d',
@ -769,15 +769,15 @@ return array(
'phui-fontkit-css' => '1e71371a',
'phui-form-css' => 'f535f938',
'phui-form-view-css' => 'e1abbe8e',
'phui-header-view-css' => '00898f29',
'phui-icon-view-css' => 'bc766998',
'phui-header-view-css' => '036ca2aa',
'phui-icon-view-css' => '88ba9081',
'phui-image-mask-css' => '5a8b09c8',
'phui-info-panel-css' => '27ea50a1',
'phui-info-view-css' => '33595731',
'phui-inline-comment-view-css' => '2174771a',
'phui-list-view-css' => '2e25ebfb',
'phui-object-box-css' => '3a601bc5',
'phui-object-item-list-view-css' => 'e052f697',
'phui-object-box-css' => '8d9239e5',
'phui-object-item-list-view-css' => '80c3d6fe',
'phui-pinboard-view-css' => 'eaab2b1b',
'phui-property-list-view-css' => 'd2d143ea',
'phui-remarkup-preview-css' => '19ad512b',

1
src/applications/celerity/CelerityResourceTransformer.php
View file

@ -191,6 +191,7 @@ final class CelerityResourceTransformer {
'lightblue' => '#daeaf3',
'sky' => '#3498db',
'lightsky' => '#ddeef9',
'fire' => '#fa4b2a',
'indigo' => '#6e5cb6',
'lightindigo' => '#eae6f7',
'pink' => '#da49be',

48
src/applications/dashboard/engine/PhabricatorDashboardPanelRenderingEngine.php
View file

@ -154,16 +154,14 @@ final class PhabricatorDashboardPanelRenderingEngine extends Phobject {
$header = null;
break;
case self::HEADER_MODE_EDIT:
$header = id(new PHUIActionHeaderView())
->setHeaderTitle($title)
->setHeaderColor(PHUIActionHeaderView::HEADER_LIGHTBLUE);
$header = id(new PHUIHeaderView())
->setHeader($title);
$header = $this->addPanelHeaderActions($header);
break;
case self::HEADER_MODE_NORMAL:
default:
$header = id(new PHUIActionHeaderView())
->setHeaderTitle($title)
->setHeaderColor(PHUIActionHeaderView::HEADER_LIGHTBLUE);
$header = id(new PHUIHeaderView())
->setHeaderTitle($title);
break;
}
$icon = id(new PHUIIconView())
@ -187,20 +185,14 @@ final class PhabricatorDashboardPanelRenderingEngine extends Phobject {
if (!$id) {
$id = celerity_generate_unique_node_id();
}
return javelin_tag(
'div',
array(
'id' => $id,
'sigil' => 'dashboard-panel',
'meta' => array(
'objectPHID' => $panel->getPHID(),
),
'class' => 'dashboard-panel',
),
array(
$header,
$content,
));
$box = id(new PHUIObjectBoxView())
->setHeader($header)
->appendChild($content)
->setID($id)
->addSigil('dashboard-panel')
->setMetadata(array('objectPHID' => $panel->getPHID()));
return phutil_tag_div('dashboard-pane', $box);
}
@ -212,16 +204,14 @@ final class PhabricatorDashboardPanelRenderingEngine extends Phobject {
$header = null;
break;
case self::HEADER_MODE_EDIT:
$header = id(new PHUIActionHeaderView())
->setHeaderTitle($panel->getName())
->setHeaderColor(PHUIActionHeaderView::HEADER_WHITE);
$header = id(new PHUIHeaderView())
->setHeader($panel->getName());
$header = $this->addPanelHeaderActions($header);
break;
case self::HEADER_MODE_NORMAL:
default:
$header = id(new PHUIActionHeaderView())
->setHeaderTitle($panel->getName())
->setHeaderColor(PHUIActionHeaderView::HEADER_WHITE);
$header = id(new PHUIHeaderView())
->setHeader($panel->getName());
$panel_type = $panel->getImplementation();
$header = $panel_type->adjustPanelHeader(
$this->getViewer(),
@ -234,7 +224,7 @@ final class PhabricatorDashboardPanelRenderingEngine extends Phobject {
}
private function addPanelHeaderActions(
PHUIActionHeaderView $header) {
PHUIHeaderView $header) {
$panel = $this->getPanel();
$dashboard_id = $this->getDashboardID();
@ -247,7 +237,7 @@ final class PhabricatorDashboardPanelRenderingEngine extends Phobject {
->setIconFont('fa-pencil')
->setWorkflow(true)
->setHref((string) $edit_uri);
$header->addAction($action_edit);
$header->addActionIcon($action_edit);
if ($dashboard_id) {
$uri = id(new PhutilURI(
@ -257,7 +247,7 @@ final class PhabricatorDashboardPanelRenderingEngine extends Phobject {
->setIconFont('fa-trash-o')
->setHref((string) $uri)
->setWorkflow(true);
$header->addAction($action_remove);
$header->addActionIcon($action_remove);
}
return $header;
}

2
src/applications/dashboard/paneltype/PhabricatorDashboardPanelType.php
View file

@ -41,7 +41,7 @@ abstract class PhabricatorDashboardPanelType extends Phobject {
PhabricatorUser $viewer,
PhabricatorDashboardPanel $panel,
PhabricatorDashboardPanelRenderingEngine $engine,
PHUIActionHeaderView $header) {
PHUIHeaderView $header) {
return $header;
}

8
src/applications/dashboard/paneltype/PhabricatorDashboardQueryPanelType.php
View file

@ -111,11 +111,15 @@ final class PhabricatorDashboardQueryPanelType
PhabricatorUser $viewer,
PhabricatorDashboardPanel $panel,
PhabricatorDashboardPanelRenderingEngine $engine,
PHUIActionHeaderView $header) {
PHUIHeaderView $header) {
$search_engine = $this->getSearchEngine($panel);
$key = $panel->getProperty('key');
$header->setHeaderHref($search_engine->getQueryResultsPageURI($key));
$href = $search_engine->getQueryResultsPageURI($key);
$icon = id(new PHUIIconView())
->setIconFont('fa-search')
->setHref($href);
$header->addActionIcon($icon);
return $header;
}

25
src/view/phui/PHUIHeaderView.php
View file

@ -18,6 +18,7 @@ final class PHUIHeaderView extends AphrontTagView {
private $buttonBar = null;
private $policyObject;
private $epoch;
private $actionIcons = array();
public function setHeader($header) {
$this->header = $header;
@ -79,6 +80,11 @@ final class PHUIHeaderView extends AphrontTagView {
return $this;
}
public function addActionIcon(PHUIIconView $action) {
$this->actionIcons[] = $action;
return $this;
}
public function setButtonBar(PHUIButtonBarView $bb) {
$this->buttonBar = $bb;
return $this;
@ -198,6 +204,25 @@ final class PHUIHeaderView extends AphrontTagView {
),
$this->buttonBar);
}
if ($this->actionIcons) {
$action_list = array();
foreach ($this->actionIcons as $icon) {
$action_list[] = phutil_tag(
'li',
array(
'class' => 'phui-header-list-icon',
),
$icon);
}
$header[] = phutil_tag(
'ul',
array(
'class' => 'phui-header-icon-list',
),
$action_list);
}
$header[] = $this->header;
if ($this->objectName) {

2
src/view/phui/PHUIObjectItemView.php
View file

@ -422,7 +422,7 @@ final class PHUIObjectItemView extends AphrontTagView {
if ($this->handleIcons) {
$handle_bar = array();
foreach ($this->handleIcon as $handleicon) {
foreach ($this->handleIcons as $handleicon) {
$handle_bar[] =
$this->renderHandleIcon($handleicon['icon'], $handleicon['label']);
}

20
webroot/rsrc/css/application/dashboard/dashboard.css
View file

@ -10,8 +10,12 @@
margin: 8px;
}
.dashboard-panel + .dashboard-panel {
margin-top: 16px;
.dashboard-view .phui-object-box {
margin: 0 0 16px 0;
}
.dashboard-view .phui-object-box .phui-object-box {
margin: 0;
}
.device-desktop .aphront-multi-column-fluid .aphront-multi-column-2-up
@ -31,7 +35,7 @@
.aphront-multi-column-fluid
.aphront-multi-column-column-outer.grippable
.aphront-multi-column-column .dashboard-panel {
.aphront-multi-column-column .dashboard-pane {
cursor: move;
}
@ -69,13 +73,3 @@
.aphront-multi-column-column .phui-info-view {
margin: 0;
}
.dashboard-panel .phui-object-item-empty .phui-info-view {
margin: 0;
}
.dashboard-panel .dashboard-box {
padding: 12px;
background: #fff;
border: 1px solid {$lightblueborder};
}

30
webroot/rsrc/css/application/feed/feed.css
View file

@ -54,48 +54,44 @@
/* - Dashboards ------------------------------------------------------------ */
.dashboard-panel div.phabricator-feed-frame {
background: #fff;
.dashboard-pane div.phabricator-feed-frame {
margin: 0;
border-left: 1px solid {$lightblueborder};
border-right: 1px solid {$lightblueborder};
border-bottom: 1px solid {$blueborder};
max-width: none;
}
.dashboard-panel .phabricator-feed-frame .phui-action-header {
.dashboard-pane .phabricator-feed-frame .phui-action-header {
background: #f7f7f7;
margin-top: -1px;
border-top: 1px solid {$thinblueborder};
}
.dashboard-panel .phabricator-feed-frame .phui-action-header-title {
.dashboard-pane .phabricator-feed-frame .phui-action-header-title {
font-size: 13px;
margin-left: 12px;
padding: 8px 0;
margin-bottom: 0;
color: {$bluetext};
font-weight: bold;
}
.dashboard-panel .phabricator-feed-frame .phui-feed-story {
.dashboard-pane .phabricator-feed-frame .phui-feed-story {
border: none;
border-bottom: 1px solid {$thinblueborder};
margin: 0 8px;
}
.dashboard-panel .phabricator-feed-frame .phui-feed-story-head {
padding: 8px 0;
.dashboard-pane .phabricator-feed-frame .phui-feed-story-head {
padding: 12px 0;
}
.dashboard-panel .phabricator-feed-frame .phui-feed-story-body {
margin: 8px 0;
.dashboard-pane .phabricator-feed-frame .phui-feed-story-body {
margin: 12px 0;
}
.dashboard-panel .phabricator-feed-frame .phui-feed-story-foot {
.dashboard-pane .phabricator-feed-frame .phui-feed-story-foot {
background: #fff;
padding: 8px 0;
padding: 12px 0;
}
.dashboard-panel .phabricator-feed-frame
.dashboard-pane .phabricator-feed-frame
.phabricator-feed-story-date-separator {
margin-top: 0;
}

21
webroot/rsrc/css/phui/phui-action-header-view.css
View file

@ -83,24 +83,3 @@
font-weight: normal;
color: {$lightgreytext};
}
/* - Dashboards ------------------------------------------------------------ */
.dashboard-panel .phui-action-header.gradient-grey-header,
.dashboard-panel .phui-action-header.gradient-lightblue-header {
border: 1px solid {$lightblueborder};
border-bottom: 1px solid {$thinblueborder};
}
.dashboard-panel .phui-action-header.gradient-white-header {
border: 1px solid {$lightblueborder};
border-bottom: 1px solid {$thinblueborder};
border-top-right-radius: 3px;
border-top-left-radius: 3px;
}
.dashboard-panel .phui-action-header.gradient-white-header
.phui-action-header-icon-list {
padding-top: 6px;
padding-right: 6px;
}

9
webroot/rsrc/css/phui/phui-header-view.css
View file

@ -146,3 +146,12 @@ body.device-phone .phui-header-view {
.device .phui-header-action-links .phui-mobile-menu {
display: inline-block;
}
.phui-header-icon-list {
float: right;
}
.phui-header-icon-list .phui-header-list-icon {
margin: 0 4px;
float: right;
}

1
webroot/rsrc/css/phui/phui-icon.css
View file

@ -36,4 +36,5 @@
a.phui-icon-view:hover {
text-decoration: none;
color: {$sky};
}

30
webroot/rsrc/css/phui/phui-object-box.css
View file

@ -69,3 +69,33 @@ div.phui-object-box.phui-object-box-flush {
.phui-box-border.phui-object-box-lightviolet .phui-action-header {
border-bottom: 1px solid {$lightvioletborder};
}
/* - Double Object Box Override --------------------------------------------- */
.phui-object-box .phui-object-box {
padding: 0;
}
.phui-object-box .phui-box-border {
border-width: 0;
padding: 0;
margin: 0;
}
.phui-object-box .phui-object-box .phui-header-shell h1 {
background-color: {$lightgreybackground};
padding: 8px 12px;
font-size: 13px;
margin: 0;
color: {$bluetext};
font-weight: 500;
}
.phui-object-box .phui-object-box .phui-header-shell {
margin: 0;
padding: 0;
}
.phui-box-border + .phui-box-border {
border-top: 1px solid {$thinblueborder};
}

90
webroot/rsrc/css/phui/phui-object-item-list-view.css
View file

@ -20,8 +20,7 @@ ul.phui-object-item-list-view {
margin: 0;
}
.phui-object-box .phui-object-item-list-view .phui-object-item,
.homepage-panel .phui-object-list-flush .phui-object-item {
.phui-object-box .phui-object-item-list-view .phui-object-item {
margin: 0;
}
@ -63,6 +62,10 @@ ul.phui-object-item-list-view {
margin: 0;
}
.phui-object-box .phui-object-item-list-view {
margin: 0;
}
.phui-object-item-status-icon {
font-weight: bold;
padding: 0 8px;
@ -562,44 +565,6 @@ ul.phui-object-item-icons {
opacity: 0.5;
}
/* - Plain ---------------------------------------------------------------------
Remove all border styles, just a list of objects
*/
.phui-object-list-plain .phui-object-item {
background: transparent;
}
.phui-object-list-plain .phui-object-item,
.phui-object-list-plain .phui-object-item-frame {
border: none;
}
.phui-object-list-plain .phui-object-item-attributes,
.phui-object-list-plain .phui-object-item-name {
padding-left: 0;
padding-top: 0;
}
.phui-object-item-image {
width: 40px;
height: 40px;
background-size: 100%;
margin: 6px;
position: absolute;
background-color: {$lightbluebackground};
}
.phui-object-item-with-image .phui-object-item-frame {
min-height: 52px;
}
.phui-object-item-with-image .phui-object-item-content-box {
margin-left: 46px;
}
/* - State ---------------------------------------------------------------------
Provides a list of object status or states, success or fail, etc
@ -638,32 +603,29 @@ ul.phui-object-item-icons {
margin-bottom: -1px;
}
.dashboard-panel .phui-object-item-list-view .phui-object-item,
.phui-object-box .phui-object-item-list-view {
margin: 0;
background-image: none;
background-color: #fff;
}
.dashboard-panel .phui-object-item-frame,
.phui-object-box .phui-object-item-list-view .phui-object-item-frame {
border: none;
border-bottom: 1px solid {$thinblueborder};
}
.dashboard-panel .phui-object-item-list-header,
.dashboard-panel .maniphest-task-group-header {
.dashboard-pane .phui-object-item-list-header {
font-size: 13px;
color: {$bluetext};
background: {$lightgreybackground};
border-top: 1px solid {$thinblueborder};
border-bottom: 1px solid {$thinblueborder};
padding: 8px 12px;
-webkit-font-smoothing: antialiased;
font-weight: 500;
}
.dashboard-panel .phui-object-item-empty .phui-info-view {
.dashboard-pane .phui-header-shell + .phui-object-item-list-view
.phui-object-item-list-header {
border-top: none;
}
.dashboard-pane .phui-object-item-empty .phui-info-view {
border: none;
border-bottom: 1px solid {$thinblueborder};
margin: 0;
}
@ -672,14 +634,6 @@ ul.phui-object-item-icons {
display: none;
}
.dashboard-panel .phui-object-box .phui-header-shell {
display: none;
}
.dashboard-panel .phui-object-box {
margin: 0;
}
/* - Launcher List ---------------------------------------------------------- */
@ -741,3 +695,19 @@ ul.phui-object-item-icons {
.device-desktop .phui-object-item-launcher-list .phui-object-icon-pane {
width: auto;
}
.phui-object-item-image {
width: 40px;
height: 40px;
background-size: 100%;
margin: 6px;
position: absolute;
}
.phui-object-item-with-image .phui-object-item-frame {
min-height: 52px;
}
.phui-object-item-with-image .phui-object-item-content-box {
margin-left: 46px;
}