@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
Update people hovercard UI
Summary: Removes Badges, they felt awkward. Updates UI, larger image, better layout, more icons.
Test Plan: Review numerous layouts with fancy new search tool.
Reviewers: epriestley
Reviewed By: epriestley
Subscribers: Korvin
Differential Revision: https://secure.phabricator.com/D17391
+130
-81
+9
-9
resources/celerity/map.php
+9
-9
resources/celerity/map.php
···
9
9
'names' => array(
10
10
'conpherence.pkg.css' => 'a520d619',
11
11
'conpherence.pkg.js' => '6249a1cf',
12
-
'core.pkg.css' => '0d7ecd3b',
12
+
'core.pkg.css' => 'cc0250e8',
13
13
'core.pkg.js' => '1fa7c0c5',
14
14
'darkconsole.pkg.js' => 'e7393ebb',
15
15
'differential.pkg.css' => '4815647b',
···
96
96
'rsrc/css/application/policy/policy-transaction-detail.css' => '82100a43',
97
97
'rsrc/css/application/policy/policy.css' => '957ea14c',
98
98
'rsrc/css/application/ponder/ponder-view.css' => 'fbd45f96',
99
-
'rsrc/css/application/project/project-card-view.css' => 'f25746f5',
99
+
'rsrc/css/application/project/project-card-view.css' => '77219296',
100
100
'rsrc/css/application/project/project-view.css' => '9f6ce0e1',
101
101
'rsrc/css/application/releeph/releeph-core.css' => '9b3c5733',
102
102
'rsrc/css/application/releeph/releeph-preview-branch.css' => 'b7a6f4a5',
···
130
130
'rsrc/css/phui/object-item/phui-oi-simple-ui.css' => 'a8beebea',
131
131
'rsrc/css/phui/phui-action-list.css' => 'f980c059',
132
132
'rsrc/css/phui/phui-action-panel.css' => '91c7b835',
133
-
'rsrc/css/phui/phui-badge.css' => '3baef8db',
133
+
'rsrc/css/phui/phui-badge.css' => '22fe77f8',
134
134
'rsrc/css/phui/phui-basic-nav-view.css' => 'a0705f53',
135
135
'rsrc/css/phui/phui-big-info-view.css' => 'bd903741',
136
136
'rsrc/css/phui/phui-box.css' => '269cbc99',
···
150
150
'rsrc/css/phui/phui-form.css' => '5815af7b',
151
151
'rsrc/css/phui/phui-head-thing.css' => 'fd311e5f',
152
152
'rsrc/css/phui/phui-header-view.css' => 'fef6a54e',
153
-
'rsrc/css/phui/phui-hovercard.css' => 'e904f5dc',
153
+
'rsrc/css/phui/phui-hovercard.css' => 'ae091fc5',
154
154
'rsrc/css/phui/phui-icon-set-selector.css' => '87db8fee',
155
-
'rsrc/css/phui/phui-icon.css' => '09f46dd9',
155
+
'rsrc/css/phui/phui-icon.css' => '12b387a1',
156
156
'rsrc/css/phui/phui-image-mask.css' => 'a8498f9c',
157
157
'rsrc/css/phui/phui-info-panel.css' => '27ea50a1',
158
158
'rsrc/css/phui/phui-info-view.css' => 'ec92802a',
···
837
837
'phrequent-css' => 'ffc185ad',
838
838
'phriction-document-css' => '4282e4ad',
839
839
'phui-action-panel-css' => '91c7b835',
840
-
'phui-badge-view-css' => '3baef8db',
840
+
'phui-badge-view-css' => '22fe77f8',
841
841
'phui-basic-nav-view-css' => 'a0705f53',
842
842
'phui-big-info-view-css' => 'bd903741',
843
843
'phui-box-css' => '269cbc99',
···
863
863
'phui-head-thing-view-css' => 'fd311e5f',
864
864
'phui-header-view-css' => 'fef6a54e',
865
865
'phui-hovercard' => '1bd28176',
866
-
'phui-hovercard-view-css' => 'e904f5dc',
866
+
'phui-hovercard-view-css' => 'ae091fc5',
867
867
'phui-icon-set-selector-css' => '87db8fee',
868
-
'phui-icon-view-css' => '09f46dd9',
868
+
'phui-icon-view-css' => '12b387a1',
869
869
'phui-image-mask-css' => 'a8498f9c',
870
870
'phui-info-panel-css' => '27ea50a1',
871
871
'phui-info-view-css' => 'ec92802a',
···
905
905
'policy-edit-css' => '815c66f7',
906
906
'policy-transaction-detail-css' => '82100a43',
907
907
'ponder-view-css' => 'fbd45f96',
908
-
'project-card-view-css' => 'f25746f5',
908
+
'project-card-view-css' => '77219296',
909
909
'project-view-css' => '9f6ce0e1',
910
910
'releeph-core' => '9b3c5733',
911
911
'releeph-preview-branch' => 'b7a6f4a5',
-1
src/applications/people/engineextension/PeopleHovercardEngineExtension.php
-1
src/applications/people/engineextension/PeopleHovercardEngineExtension.php
+51
-61
src/applications/people/view/PhabricatorUserCardView.php
+51
-61
src/applications/people/view/PhabricatorUserCardView.php
···
33
33
$classes[] = 'project-card-view';
34
34
35
35
if ($this->profile->getIsDisabled()) {
36
-
$classes[] = 'project-card-grey';
37
-
} else {
38
-
$classes[] = 'project-card-blue';
36
+
$classes[] = 'project-card-disabled';
39
37
}
40
38
41
39
return array(
···
56
54
// the most important tag. Users can click through to the profile to get
57
55
// more details.
58
56
57
+
$classes = array();
59
58
if ($user->getIsDisabled()) {
60
59
$tag_icon = 'fa-ban';
61
60
$tag_title = pht('Disabled');
62
61
$tag_shade = PHUITagView::COLOR_RED;
62
+
$classes[] = 'phui-image-disabled';
63
63
} else if (!$user->getIsApproved()) {
64
64
$tag_icon = 'fa-ban';
65
65
$tag_title = pht('Unapproved Account');
···
87
87
$tag->setShade($tag_shade);
88
88
}
89
89
90
-
$header = id(new PHUIHeaderView())
91
-
->setHeader($user->getFullName())
92
-
->addTag($tag)
93
-
->setUser($viewer)
94
-
->setImage($picture);
95
-
96
90
$body = array();
97
91
92
+
/* TODO: Replace with Conpherence Availability if we ship it */
98
93
$body[] = $this->addItem(
99
-
pht('User Since'),
94
+
'fa-user-plus',
100
95
phabricator_date($user->getDateCreated(), $viewer));
101
96
102
97
if (PhabricatorApplication::isClassInstalledForViewer(
103
98
'PhabricatorCalendarApplication',
104
99
$viewer)) {
105
100
$body[] = $this->addItem(
106
-
pht('Availability'),
101
+
'fa-calendar-o',
107
102
id(new PHUIUserAvailabilityView())
108
103
->setViewer($viewer)
109
104
->setAvailableUser($user));
110
105
}
111
106
112
-
$badges = $this->buildBadges($user, $viewer);
113
-
if ($badges) {
114
-
$badges = id(new PHUIBadgeBoxView())
115
-
->addItems($badges)
116
-
->setCollapsed(true);
117
-
$body[] = phutil_tag(
118
-
'div',
119
-
array(
120
-
'class' => 'phui-hovercard-body-item hovercard-badges',
121
-
),
122
-
$badges);
123
-
}
107
+
$classes[] = 'project-card-image';
108
+
$image = phutil_tag(
109
+
'img',
110
+
array(
111
+
'src' => $picture,
112
+
'class' => implode(' ', $classes),
113
+
));
124
114
125
-
$body = phutil_tag(
115
+
$href = urisprintf(
116
+
'/p/%s/',
117
+
$user->getUsername());
118
+
119
+
$image = phutil_tag(
120
+
'a',
121
+
array(
122
+
'href' => $href,
123
+
),
124
+
$image);
125
+
126
+
$name = phutil_tag_div('project-card-name',
127
+
$user->getRealname());
128
+
$username = phutil_tag_div('project-card-username',
129
+
'@'.$user->getUsername());
130
+
$tag = phutil_tag_div('phui-header-subheader',
131
+
$tag);
132
+
133
+
$header = phutil_tag(
126
134
'div',
127
135
array(
128
-
'class' => 'project-card-body',
136
+
'class' => 'project-card-header',
129
137
),
130
-
$body);
138
+
array(
139
+
$name,
140
+
$username,
141
+
$tag,
142
+
$body,
143
+
));
131
144
132
145
$card = phutil_tag(
133
146
'div',
···
135
148
'class' => 'project-card-inner',
136
149
),
137
150
array(
151
+
$image,
138
152
$header,
139
-
$body,
140
153
));
141
154
142
155
return $card;
143
156
}
144
157
145
-
private function addItem($label, $value) {
146
-
$item = array(
147
-
phutil_tag('strong', array(), $label),
148
-
': ',
149
-
phutil_tag('span', array(), $value),
150
-
);
151
-
return phutil_tag_div('project-card-item', $item);
152
-
}
153
-
154
-
private function buildBadges(
155
-
PhabricatorUser $user,
156
-
$viewer) {
157
-
158
-
$class = 'PhabricatorBadgesApplication';
159
-
$items = array();
160
-
161
-
if (PhabricatorApplication::isClassInstalledForViewer($class, $viewer)) {
162
-
$badge_phids = $user->getBadgePHIDs();
163
-
if ($badge_phids) {
164
-
$badges = id(new PhabricatorBadgesQuery())
165
-
->setViewer($viewer)
166
-
->withPHIDs($badge_phids)
167
-
->withStatuses(array(PhabricatorBadgesBadge::STATUS_ACTIVE))
168
-
->execute();
169
-
170
-
foreach ($badges as $badge) {
171
-
$items[] = id(new PHUIBadgeMiniView())
172
-
->setIcon($badge->getIcon())
173
-
->setHeader($badge->getName())
174
-
->setQuality($badge->getQuality());
175
-
}
176
-
}
177
-
}
178
-
return $items;
158
+
private function addItem($icon, $value) {
159
+
$icon = id(new PHUIIconView())
160
+
->addClass('project-card-item-icon')
161
+
->setIcon($icon);
162
+
$text = phutil_tag(
163
+
'span',
164
+
array(
165
+
'class' => 'project-card-item-text',
166
+
),
167
+
$value);
168
+
return phutil_tag_div('project-card-item', array($icon, $text));
179
169
}
180
170
181
171
}
+50
-2
webroot/rsrc/css/application/project/project-card-view.css
+50
-2
webroot/rsrc/css/application/project/project-card-view.css
···
9
9
border: 1px solid {$lightblueborder};
10
10
border-radius: 3px;
11
11
box-shadow: {$dropshadow};
12
-
width: 380px;
12
+
width: 420px;
13
+
position: relative;
13
14
}
14
15
15
16
.project-card-view .phui-header-shell {
···
35
36
display: block;
36
37
}
37
38
39
+
.project-card-view .project-card-image {
40
+
height: 140px;
41
+
width: 140px;
42
+
margin: 6px;
43
+
border-radius: 3px;
44
+
}
45
+
46
+
.project-card-view .project-card-item div {
47
+
display: inline;
48
+
}
49
+
50
+
.project-card-view .project-card-item {
51
+
margin-bottom: 2px;
52
+
}
53
+
54
+
.project-card-view .project-card-item-text {
55
+
color: {$greytext};
56
+
}
57
+
58
+
.project-card-view .project-card-item-icon {
59
+
width: 20px;
60
+
}
61
+
62
+
.project-card-view .project-card-header {
63
+
position: absolute;
64
+
top: 12px;
65
+
left: 158px;
66
+
}
67
+
68
+
.project-card-header .project-card-name {
69
+
font-size: 20px;
70
+
font-family: 'Aleo', {$fontfamily};
71
+
font-weight: bold;
72
+
color: #000;
73
+
margin-bottom: 2px;
74
+
text-overflow: ellipsis;
75
+
white-space: nowrap;
76
+
width: 250px;
77
+
overflow: hidden;
78
+
}
79
+
80
+
.project-card-header .project-card-username {
81
+
font-size: 14px;
82
+
color: {$bluetext};
83
+
margin-bottom: 12px;
84
+
}
85
+
38
86
.project-card-view .phui-header-shell .phui-header-col1 {
39
87
vertical-align: top;
40
88
width: 64px;
···
65
113
}
66
114
67
115
.project-card-view .project-card-body {
68
-
padding: 0 12px 12px 76px;
116
+
padding: 0 12px 12px 12px;
69
117
color: {$darkbluetext};
70
118
}
71
119
-5
webroot/rsrc/css/phui/phui-badge.css
-5
webroot/rsrc/css/phui/phui-badge.css
+5
-1
webroot/rsrc/css/phui/phui-hovercard.css
+5
-1
webroot/rsrc/css/phui/phui-hovercard.css
+7
-1
webroot/rsrc/css/phui/phui-icon.css
+7
-1
webroot/rsrc/css/phui/phui-icon.css
···
31
31
}
32
32
33
33
.phui-icon-has-text:before {
34
-
margin-right: 4px;
34
+
margin-right: 6px;
35
35
}
36
36
37
37
a.phui-icon-view:hover {
38
38
text-decoration: none;
39
39
color: {$sky};
40
+
}
41
+
42
+
img.phui-image-disabled {
43
+
opacity: .8;
44
+
-webkit-filter: grayscale(100%);
45
+
filter: grayscale(100%);
40
46
}
41
47
42
48
/* - Icon in a Circle ------------------------------------------------------- */