@recaptime-dev's working patches + fork for Phorge, a community fork of Phabricator. (Upstream dev and stable branches are at upstream/main and upstream/stable respectively.)
hq.recaptime.dev/wiki/Phorge
phorge
phabricator
Add ProjectCardView, use on Hovercards
Summary: Builds a new ProjectCardView, starts basic Project Hovercard redesign (needs milestone, subproject support). Ref T10055
Test Plan:
View all the colors.
{F1092622}
Reviewers: epriestley
Reviewed By: epriestley
Subscribers: Korvin
Maniphest Tasks: T10055
Differential Revision: https://secure.phabricator.com/D15186
+320
-16
+4
-2
resources/celerity/map.php
+4
-2
resources/celerity/map.php
···
93
93
'rsrc/css/application/policy/policy-transaction-detail.css' => '82100a43',
94
94
'rsrc/css/application/policy/policy.css' => '957ea14c',
95
95
'rsrc/css/application/ponder/ponder-view.css' => '7b0df4da',
96
+
'rsrc/css/application/project/project-card-view.css' => 'ee1ce91d',
96
97
'rsrc/css/application/project/project-view.css' => '99a5023b',
97
98
'rsrc/css/application/releeph/releeph-core.css' => '9b3c5733',
98
99
'rsrc/css/application/releeph/releeph-preview-branch.css' => 'b7a6f4a5',
···
134
135
'rsrc/css/phui/phui-form-view.css' => '4a1a0f5e',
135
136
'rsrc/css/phui/phui-form.css' => '0b98e572',
136
137
'rsrc/css/phui/phui-header-view.css' => 'd53cc835',
137
-
'rsrc/css/phui/phui-hovercard.css' => '5684c081',
138
+
'rsrc/css/phui/phui-hovercard.css' => 'de1a2119',
138
139
'rsrc/css/phui/phui-icon-set-selector.css' => '1ab67aad',
139
140
'rsrc/css/phui/phui-icon.css' => '3f33ab57',
140
141
'rsrc/css/phui/phui-image-mask.css' => '5a8b09c8',
···
809
810
'phui-form-view-css' => '4a1a0f5e',
810
811
'phui-header-view-css' => 'd53cc835',
811
812
'phui-hovercard' => '1bd28176',
812
-
'phui-hovercard-view-css' => '5684c081',
813
+
'phui-hovercard-view-css' => 'de1a2119',
813
814
'phui-icon-set-selector-css' => '1ab67aad',
814
815
'phui-icon-view-css' => '3f33ab57',
815
816
'phui-image-mask-css' => '5a8b09c8',
···
843
844
'policy-edit-css' => '815c66f7',
844
845
'policy-transaction-detail-css' => '82100a43',
845
846
'ponder-view-css' => '7b0df4da',
847
+
'project-card-view-css' => 'ee1ce91d',
846
848
'project-view-css' => '99a5023b',
847
849
'releeph-core' => '9b3c5733',
848
850
'releeph-preview-branch' => 'b7a6f4a5',
+5
-1
src/__phutil_library_map__.php
+5
-1
src/__phutil_library_map__.php
···
2862
2862
'PhabricatorProjectBoardImportController' => 'applications/project/controller/PhabricatorProjectBoardImportController.php',
2863
2863
'PhabricatorProjectBoardReorderController' => 'applications/project/controller/PhabricatorProjectBoardReorderController.php',
2864
2864
'PhabricatorProjectBoardViewController' => 'applications/project/controller/PhabricatorProjectBoardViewController.php',
2865
+
'PhabricatorProjectCardView' => 'applications/project/view/PhabricatorProjectCardView.php',
2865
2866
'PhabricatorProjectColorsConfigOptionType' => 'applications/project/config/PhabricatorProjectColorsConfigOptionType.php',
2866
2867
'PhabricatorProjectColumn' => 'applications/project/storage/PhabricatorProjectColumn.php',
2867
2868
'PhabricatorProjectColumnDetailController' => 'applications/project/controller/PhabricatorProjectColumnDetailController.php',
···
3816
3817
'ProjectDefaultJoinCapability' => 'applications/project/capability/ProjectDefaultJoinCapability.php',
3817
3818
'ProjectDefaultViewCapability' => 'applications/project/capability/ProjectDefaultViewCapability.php',
3818
3819
'ProjectEditConduitAPIMethod' => 'applications/project/conduit/ProjectEditConduitAPIMethod.php',
3820
+
'ProjectHovercardEngineExtension' => 'applications/project/events/ProjectHovercardEngineExtension.php',
3819
3821
'ProjectQueryConduitAPIMethod' => 'applications/project/conduit/ProjectQueryConduitAPIMethod.php',
3820
3822
'ProjectRemarkupRule' => 'applications/project/remarkup/ProjectRemarkupRule.php',
3821
3823
'ProjectRemarkupRuleTestCase' => 'applications/project/remarkup/__tests__/ProjectRemarkupRuleTestCase.php',
···
5672
5674
'PHUIHandleView' => 'AphrontView',
5673
5675
'PHUIHeaderView' => 'AphrontTagView',
5674
5676
'PHUIHovercardUIExample' => 'PhabricatorUIExample',
5675
-
'PHUIHovercardView' => 'AphrontView',
5677
+
'PHUIHovercardView' => 'AphrontTagView',
5676
5678
'PHUIIconCircleView' => 'AphrontTagView',
5677
5679
'PHUIIconExample' => 'PhabricatorUIExample',
5678
5680
'PHUIIconView' => 'AphrontTagView',
···
7272
7274
'PhabricatorProjectBoardImportController' => 'PhabricatorProjectBoardController',
7273
7275
'PhabricatorProjectBoardReorderController' => 'PhabricatorProjectBoardController',
7274
7276
'PhabricatorProjectBoardViewController' => 'PhabricatorProjectBoardController',
7277
+
'PhabricatorProjectCardView' => 'AphrontTagView',
7275
7278
'PhabricatorProjectColorsConfigOptionType' => 'PhabricatorConfigJSONOptionType',
7276
7279
'PhabricatorProjectColumn' => array(
7277
7280
'PhabricatorProjectDAO',
···
8449
8452
'ProjectDefaultJoinCapability' => 'PhabricatorPolicyCapability',
8450
8453
'ProjectDefaultViewCapability' => 'PhabricatorPolicyCapability',
8451
8454
'ProjectEditConduitAPIMethod' => 'PhabricatorEditEngineAPIMethod',
8455
+
'ProjectHovercardEngineExtension' => 'PhabricatorHovercardEngineExtension',
8452
8456
'ProjectQueryConduitAPIMethod' => 'ProjectConduitAPIMethod',
8453
8457
'ProjectRemarkupRule' => 'PhabricatorObjectRemarkupRule',
8454
8458
'ProjectRemarkupRuleTestCase' => 'PhabricatorTestCase',
+55
src/applications/project/events/ProjectHovercardEngineExtension.php
+55
src/applications/project/events/ProjectHovercardEngineExtension.php
···
1
+
<?php
2
+
3
+
final class ProjectHovercardEngineExtension
4
+
extends PhabricatorHovercardEngineExtension {
5
+
6
+
const EXTENSIONKEY = 'project.card';
7
+
8
+
public function isExtensionEnabled() {
9
+
return true;
10
+
}
11
+
12
+
public function getExtensionName() {
13
+
return pht('Project Card');
14
+
}
15
+
16
+
public function canRenderObjectHovercard($object) {
17
+
return ($object instanceof PhabricatorProject);
18
+
}
19
+
20
+
public function willRenderHovercards(array $objects) {
21
+
$viewer = $this->getViewer();
22
+
$phids = mpull($objects, 'getPHID');
23
+
24
+
$projects = id(new PhabricatorProjectQuery())
25
+
->setViewer($viewer)
26
+
->withPHIDs($phids)
27
+
->needImages(true)
28
+
->execute();
29
+
$projects = mpull($projects, null, 'getPHID');
30
+
31
+
return array(
32
+
'projects' => $projects,
33
+
);
34
+
}
35
+
36
+
public function renderHovercard(
37
+
PHUIHovercardView $hovercard,
38
+
PhabricatorObjectHandle $handle,
39
+
$object,
40
+
$data) {
41
+
$viewer = $this->getViewer();
42
+
43
+
$project = idx($data['projects'], $object->getPHID());
44
+
if (!$project) {
45
+
return;
46
+
}
47
+
48
+
$project_card = id(new PhabricatorProjectCardView())
49
+
->setProject($project)
50
+
->setViewer($viewer);
51
+
52
+
$hovercard->appendChild($project_card);
53
+
}
54
+
55
+
}
+84
src/applications/project/view/PhabricatorProjectCardView.php
+84
src/applications/project/view/PhabricatorProjectCardView.php
···
1
+
<?php
2
+
3
+
final class PhabricatorProjectCardView extends AphrontTagView {
4
+
5
+
private $project;
6
+
private $viewer;
7
+
private $tag;
8
+
9
+
public function setProject(PhabricatorProject $project) {
10
+
$this->project = $project;
11
+
return $this;
12
+
}
13
+
14
+
public function setViewer(PhabricatorUser $viewer) {
15
+
$this->viewer = $viewer;
16
+
return $this;
17
+
}
18
+
19
+
public function setTag($tag) {
20
+
$this->tag = $tag;
21
+
return $this;
22
+
}
23
+
24
+
protected function getTagName() {
25
+
if ($this->tag) {
26
+
return $this->tag;
27
+
}
28
+
return 'div';
29
+
}
30
+
31
+
protected function getTagAttributes() {
32
+
$classes = array();
33
+
$classes[] = 'project-card-view';
34
+
35
+
$color = $this->project->getColor();
36
+
$classes[] = 'project-card-'.$color;
37
+
38
+
return array(
39
+
'class' => implode($classes, ' '),
40
+
);
41
+
}
42
+
43
+
protected function getTagContent() {
44
+
45
+
$project = $this->project;
46
+
$viewer = $this->viewer;
47
+
require_celerity_resource('project-card-view-css');
48
+
49
+
$icon = $project->getDisplayIconIcon();
50
+
$icon_name = $project->getDisplayIconName();
51
+
$tag = id(new PHUITagView())
52
+
->setIcon($icon)
53
+
->setName($icon_name)
54
+
->addClass('project-view-header-tag')
55
+
->setType(PHUITagView::TYPE_SHADE);
56
+
57
+
$header = id(new PHUIHeaderView())
58
+
->setHeader(array($project->getName(), $tag))
59
+
->setUser($viewer)
60
+
->setPolicyObject($project)
61
+
->setImage($project->getProfileImageURI());
62
+
63
+
if ($project->getStatus() == PhabricatorProjectStatus::STATUS_ACTIVE) {
64
+
$header->setStatus('fa-check', 'bluegrey', pht('Active'));
65
+
} else {
66
+
$header->setStatus('fa-ban', 'red', pht('Archived'));
67
+
}
68
+
69
+
$description = null;
70
+
71
+
$card = phutil_tag(
72
+
'div',
73
+
array(
74
+
'class' => 'project-card-inner',
75
+
),
76
+
array(
77
+
$header,
78
+
$description,
79
+
));
80
+
81
+
return $card;
82
+
}
83
+
84
+
}
+20
-8
src/view/phui/PHUIHovercardView.php
+20
-8
src/view/phui/PHUIHovercardView.php
···
4
4
* The default one-for-all hovercard. We may derive from this one to create
5
5
* more specialized ones.
6
6
*/
7
-
final class PHUIHovercardView extends AphrontView {
7
+
final class PHUIHovercardView extends AphrontTagView {
8
8
9
9
/**
10
10
* @var PhabricatorObjectHandle
···
70
70
return $this;
71
71
}
72
72
73
-
public function render() {
73
+
protected function getTagAttributes() {
74
+
$classes = array();
75
+
$classes[] = 'phui-hovercard-wrapper';
76
+
77
+
return array(
78
+
'class' => implode(' ', $classes),
79
+
);
80
+
}
81
+
82
+
protected function getTagContent() {
74
83
if (!$this->handle) {
75
84
throw new PhutilInvalidStateException('setObjectHandle');
76
85
}
···
80
89
81
90
require_celerity_resource('phui-hovercard-view-css');
82
91
92
+
// If we're a fully custom Hovercard, skip the common UI
93
+
$children = $this->renderChildren();
94
+
if ($children) {
95
+
return $children;
96
+
}
97
+
83
98
$title = array(
84
99
id(new PHUISpacesNamespaceContextView())
85
100
->setUser($viewer)
86
101
->setObject($this->getObject()),
87
-
pht(
88
-
'%s: %s',
89
-
$handle->getTypeName(),
90
-
$this->title ? $this->title : $handle->getName()),
102
+
$this->title ? $this->title : $handle->getName(),
91
103
);
92
104
93
105
$header = new PHUIHeaderView();
···
182
194
}
183
195
184
196
$hovercard = phutil_tag_div(
185
-
'phui-hovercard-container',
197
+
'phui-hovercard-container grouped',
186
198
array(
187
199
phutil_tag_div('phui-hovercard-head', $header),
188
200
phutil_tag_div('phui-hovercard-body grouped', $body),
189
201
$tail,
190
202
));
191
203
192
-
return phutil_tag_div('phui-hovercard-wrapper', $hovercard);
204
+
return $hovercard;
193
205
}
194
206
195
207
}
+150
webroot/rsrc/css/application/project/project-card-view.css
+150
webroot/rsrc/css/application/project/project-card-view.css
···
1
+
/**
2
+
* @provides project-card-view-css
3
+
*/
4
+
5
+
.project-card-view {
6
+
margin: 0 12px 16px 0;
7
+
text-align: left;
8
+
background: #fff;
9
+
border: 1px solid {$lightblueborder};
10
+
border-radius: 3px;
11
+
box-shadow: {$dropshadow};
12
+
width: 380px;
13
+
}
14
+
15
+
.project-card-view .phui-header-shell {
16
+
margin: 0;
17
+
padding: 12px 12px 16px 12px;
18
+
border: none;
19
+
border-radius: 3px;
20
+
}
21
+
22
+
.project-card-view .phui-header-shell .phui-header-image {
23
+
border: 3px solid #fff;
24
+
border-radius: 3px;
25
+
}
26
+
27
+
.project-card-view .phui-header-shell .phui-header-header {
28
+
font-size: 18px;
29
+
font-family: 'Aleo', {$fontfamily};
30
+
width: 290px;
31
+
overflow: hidden;
32
+
white-space: nowrap;
33
+
text-overflow: ellipsis;
34
+
display: block;
35
+
}
36
+
37
+
.project-card-view .phui-header-shell .phui-header-col1 {
38
+
vertical-align: top;
39
+
width: 64px;
40
+
}
41
+
42
+
.project-card-view .phui-header-subheader {
43
+
font-size: {$normalfontsize};
44
+
margin-top: 12px;
45
+
}
46
+
47
+
.project-card-view .phui-header-header .phui-tag-view {
48
+
display: block;
49
+
font-weight: normal;
50
+
color: {$bluetext};
51
+
font-size: {$normalfontsize};
52
+
font-family: {$fontfamily};
53
+
margin-top: 8px;
54
+
}
55
+
56
+
.project-card-view .phui-header-header .phui-tag-view .phui-tag-core {
57
+
padding: 0;
58
+
}
59
+
60
+
.project-card-view .phui-header-header .phui-tag-view .phui-icon-view {
61
+
margin-left: 0;
62
+
color: {$bluetext};
63
+
}
64
+
65
+
66
+
/* Colors */
67
+
68
+
.project-card-view.project-card-red {
69
+
border-color: {$sh-redborder};
70
+
}
71
+
72
+
.project-card-view.project-card-red .phui-header-shell {
73
+
background: linear-gradient(to bottom, {$sh-redbackground} 44px, #fff 44px);
74
+
}
75
+
76
+
.project-card-view.project-card-orange {
77
+
border-color: {$sh-orangeborder};
78
+
}
79
+
80
+
.project-card-view.project-card-orange .phui-header-shell {
81
+
background: linear-gradient(to bottom, {$sh-orangebackground} 44px, #fff 44px);
82
+
}
83
+
84
+
.project-card-view.project-card-yellow {
85
+
border-color: {$sh-yellowborder};
86
+
}
87
+
88
+
.project-card-view.project-card-yellow .phui-header-shell {
89
+
background: linear-gradient(to bottom, {$sh-yellowbackground} 44px, #fff 44px);
90
+
}
91
+
92
+
.project-card-view.project-card-green {
93
+
border-color: {$sh-greenborder};
94
+
}
95
+
96
+
.project-card-view.project-card-green .phui-header-shell {
97
+
background: linear-gradient(to bottom, {$sh-greenbackground} 44px, #fff 44px);
98
+
}
99
+
100
+
.project-card-view.project-card-blue {
101
+
border-color: {$sh-blueborder};
102
+
}
103
+
104
+
.project-card-view.project-card-blue .phui-header-shell {
105
+
background: linear-gradient(to bottom, {$sh-bluebackground} 44px, #fff 44px);
106
+
}
107
+
108
+
.project-card-view.project-card-indigo {
109
+
border-color: {$sh-indigoborder};
110
+
}
111
+
112
+
.project-card-view.project-card-indigo .phui-header-shell {
113
+
background: linear-gradient(to bottom, {$sh-indigobackground} 44px, #fff 44px);
114
+
}
115
+
116
+
.project-card-view.project-card-violet {
117
+
border-color: {$sh-violetborder};
118
+
}
119
+
120
+
.project-card-view.project-card-violet .phui-header-shell {
121
+
background: linear-gradient(to bottom, {$sh-violetbackground} 44px, #fff 44px);
122
+
}
123
+
124
+
.project-card-view.project-card-pink {
125
+
border-color: {$sh-pinkborder};
126
+
}
127
+
128
+
.project-card-view.project-card-pink .phui-header-shell {
129
+
background: linear-gradient(to bottom, {$sh-pinkbackground} 44px, #fff 44px);
130
+
}
131
+
132
+
.project-card-view.project-card-grey {
133
+
border-color: {$sh-greyborder};
134
+
}
135
+
136
+
.project-card-view.project-card-grey .phui-header-shell {
137
+
background: linear-gradient(to bottom, {$sh-greybackground} 44px, #fff 44px);
138
+
}
139
+
140
+
.project-card-view.project-card-checkered {
141
+
border-color: {$sh-greyborder};
142
+
}
143
+
144
+
.project-card-view.project-card-checkered .phui-header-shell {
145
+
background-color: #fff;
146
+
background-image: linear-gradient(45deg, {$sh-greybackground} 25%, transparent 25%, transparent 75%, {$sh-greybackground} 75%, {$sh-greybackground}),
147
+
linear-gradient(45deg, {$sh-greybackground} 25%, transparent 25%, transparent 75%, {$sh-greybackground} 75%, {$sh-greybackground});
148
+
background-size: 16px 16px;
149
+
background-position:0 0, 8px 8px;
150
+
}
+2
-5
webroot/rsrc/css/phui/phui-hovercard.css
+2
-5
webroot/rsrc/css/phui/phui-hovercard.css
···
7
7
}
8
8
9
9
.phui-hovercard-wrapper {
10
-
float: left;
11
10
width: 400px;
12
11
}
13
12
14
13
.device-phone .phui-hovercard-wrapper {
15
-
float: left;
16
14
width: 300px;
17
15
}
18
16
19
17
.phui-hovercard-container {
20
-
float: left;
21
18
width: 100%;
22
19
box-shadow: {$dropshadow};
23
-
border: 1px solid {$blueborder};
20
+
border: 1px solid {$lightblueborder};
24
21
border-radius: 3px;
25
22
background-color: #fff;
26
23
}
···
33
30
}
34
31
35
32
.phui-hovercard-head .phui-header-header {
36
-
font-size: 14px;
33
+
font-size: {$biggerfontsize};
37
34
}
38
35
39
36
.phui-hovercard-head .phui-tag-type-state {