@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
Prettier file embeds
Summary: Spruce up the file embeds a little more, hover state, icons, file size.
Test Plan:
Add a psd and pdf, see new icons. Check differential, still see icons there too. Test mobile, desktop.
{F2042539}
Reviewers: epriestley
Reviewed By: epriestley
Subscribers: Korvin
Differential Revision: https://secure.phabricator.com/D16950
+137
-71
+3
-3
resources/celerity/map.php
+3
-3
resources/celerity/map.php
···
9
9
'names' => array(
10
10
'conpherence.pkg.css' => '0b64e988',
11
11
'conpherence.pkg.js' => '6249a1cf',
12
-
'core.pkg.css' => '6ae56144',
12
+
'core.pkg.css' => 'adfb9c57',
13
13
'core.pkg.js' => '519f84e8',
14
14
'darkconsole.pkg.js' => 'e7393ebb',
15
15
'differential.pkg.css' => 'a4ba74b5',
···
108
108
'rsrc/css/application/tokens/tokens.css' => '3d0f239e',
109
109
'rsrc/css/application/uiexample/example.css' => '528b19de',
110
110
'rsrc/css/core/core.css' => 'd0801452',
111
-
'rsrc/css/core/remarkup.css' => '8e3d4635',
111
+
'rsrc/css/core/remarkup.css' => '8606d9c6',
112
112
'rsrc/css/core/syntax.css' => '769d3498',
113
113
'rsrc/css/core/z-index.css' => 'd1270942',
114
114
'rsrc/css/diviner/diviner-shared.css' => 'aa3656aa',
···
803
803
'phabricator-object-selector-css' => '85ee8ce6',
804
804
'phabricator-phtize' => 'd254d646',
805
805
'phabricator-prefab' => '8d40ae75',
806
-
'phabricator-remarkup-css' => '8e3d4635',
806
+
'phabricator-remarkup-css' => '8606d9c6',
807
807
'phabricator-search-results-css' => '7dea472c',
808
808
'phabricator-shaped-request' => '7cbe244b',
809
809
'phabricator-slowvote-css' => 'a94b7230',
+2
src/__phutil_library_map__.php
+2
src/__phutil_library_map__.php
···
1050
1050
'FileMailReceiver' => 'applications/files/mail/FileMailReceiver.php',
1051
1051
'FileQueryChunksConduitAPIMethod' => 'applications/files/conduit/FileQueryChunksConduitAPIMethod.php',
1052
1052
'FileReplyHandler' => 'applications/files/mail/FileReplyHandler.php',
1053
+
'FileTypeIcon' => 'applications/files/constants/FileTypeIcon.php',
1053
1054
'FileUploadChunkConduitAPIMethod' => 'applications/files/conduit/FileUploadChunkConduitAPIMethod.php',
1054
1055
'FileUploadConduitAPIMethod' => 'applications/files/conduit/FileUploadConduitAPIMethod.php',
1055
1056
'FileUploadHashConduitAPIMethod' => 'applications/files/conduit/FileUploadHashConduitAPIMethod.php',
···
5732
5733
'FileMailReceiver' => 'PhabricatorObjectMailReceiver',
5733
5734
'FileQueryChunksConduitAPIMethod' => 'FileConduitAPIMethod',
5734
5735
'FileReplyHandler' => 'PhabricatorApplicationTransactionReplyHandler',
5736
+
'FileTypeIcon' => 'Phobject',
5735
5737
'FileUploadChunkConduitAPIMethod' => 'FileConduitAPIMethod',
5736
5738
'FileUploadConduitAPIMethod' => 'FileConduitAPIMethod',
5737
5739
'FileUploadHashConduitAPIMethod' => 'FileConduitAPIMethod',
+1
-62
src/applications/differential/view/DifferentialChangesetDetailView.php
+1
-62
src/applications/differential/view/DifferentialChangesetDetailView.php
···
110
110
return $this->vsChangesetID;
111
111
}
112
112
113
-
public function getFileIcon($filename) {
114
-
$path_info = pathinfo($filename);
115
-
$extension = idx($path_info, 'extension');
116
-
switch ($extension) {
117
-
case 'psd':
118
-
case 'ai':
119
-
$icon = 'fa-eye';
120
-
break;
121
-
case 'conf':
122
-
$icon = 'fa-wrench';
123
-
break;
124
-
case 'wav':
125
-
case 'mp3':
126
-
case 'aiff':
127
-
$icon = 'fa-file-sound-o';
128
-
break;
129
-
case 'm4v':
130
-
case 'mov':
131
-
$icon = 'fa-file-movie-o';
132
-
break;
133
-
case 'sql':
134
-
case 'db':
135
-
$icon = 'fa-database';
136
-
break;
137
-
case 'xls':
138
-
case 'csv':
139
-
$icon = 'fa-file-excel-o';
140
-
break;
141
-
case 'ics':
142
-
$icon = 'fa-calendar';
143
-
break;
144
-
case 'zip':
145
-
case 'tar':
146
-
case 'bz':
147
-
case 'tgz':
148
-
case 'gz':
149
-
$icon = 'fa-file-archive-o';
150
-
break;
151
-
case 'png':
152
-
case 'jpg':
153
-
case 'bmp':
154
-
case 'gif':
155
-
$icon = 'fa-file-picture-o';
156
-
break;
157
-
case 'txt':
158
-
$icon = 'fa-file-text-o';
159
-
break;
160
-
case 'doc':
161
-
case 'docx':
162
-
$icon = 'fa-file-word-o';
163
-
break;
164
-
case 'pdf':
165
-
$icon = 'fa-file-pdf-o';
166
-
break;
167
-
default:
168
-
$icon = 'fa-file-code-o';
169
-
break;
170
-
}
171
-
return $icon;
172
-
}
173
-
174
113
public function render() {
175
114
$this->requireResource('differential-changeset-view-css');
176
115
$this->requireResource('syntax-highlighting-css');
···
204
143
}
205
144
206
145
$display_filename = $changeset->getDisplayFilename();
207
-
$display_icon = $this->getFileIcon($display_filename);
146
+
$display_icon = FileTypeIcon::getFileIcon($display_filename);
208
147
$icon = id(new PHUIIconView())
209
148
->setIcon($display_icon);
210
149
+66
src/applications/files/constants/FileTypeIcon.php
+66
src/applications/files/constants/FileTypeIcon.php
···
1
+
<?php
2
+
3
+
final class FileTypeIcon extends Phobject {
4
+
5
+
public static function getFileIcon($filename) {
6
+
$path_info = pathinfo($filename);
7
+
$extension = idx($path_info, 'extension');
8
+
switch ($extension) {
9
+
case 'psd':
10
+
case 'ai':
11
+
$icon = 'fa-file-image-o';
12
+
break;
13
+
case 'conf':
14
+
$icon = 'fa-wrench';
15
+
break;
16
+
case 'wav':
17
+
case 'mp3':
18
+
case 'aiff':
19
+
$icon = 'fa-file-sound-o';
20
+
break;
21
+
case 'm4v':
22
+
case 'mov':
23
+
$icon = 'fa-file-movie-o';
24
+
break;
25
+
case 'sql':
26
+
case 'db':
27
+
$icon = 'fa-database';
28
+
break;
29
+
case 'xls':
30
+
case 'csv':
31
+
$icon = 'fa-file-excel-o';
32
+
break;
33
+
case 'ics':
34
+
$icon = 'fa-calendar';
35
+
break;
36
+
case 'zip':
37
+
case 'tar':
38
+
case 'bz':
39
+
case 'tgz':
40
+
case 'gz':
41
+
$icon = 'fa-file-archive-o';
42
+
break;
43
+
case 'png':
44
+
case 'jpg':
45
+
case 'bmp':
46
+
case 'gif':
47
+
$icon = 'fa-file-picture-o';
48
+
break;
49
+
case 'txt':
50
+
$icon = 'fa-file-text-o';
51
+
break;
52
+
case 'doc':
53
+
case 'docx':
54
+
$icon = 'fa-file-word-o';
55
+
break;
56
+
case 'pdf':
57
+
$icon = 'fa-file-pdf-o';
58
+
break;
59
+
default:
60
+
$icon = 'fa-file-text-o';
61
+
break;
62
+
}
63
+
return $icon;
64
+
}
65
+
66
+
}
+1
src/applications/files/markup/PhabricatorEmbedFileRemarkupRule.php
+1
src/applications/files/markup/PhabricatorEmbedFileRemarkupRule.php
+39
-2
src/view/layout/PhabricatorFileLinkView.php
+39
-2
src/view/layout/PhabricatorFileLinkView.php
···
8
8
private $fileViewable;
9
9
private $filePHID;
10
10
private $fileMonogram;
11
+
private $fileSize;
11
12
private $customClass;
12
13
13
14
public function setCustomClass($custom_class) {
···
73
74
return $this->fileName;
74
75
}
75
76
77
+
public function setFileSize($file_size) {
78
+
$this->fileSize = $file_size;
79
+
return $this;
80
+
}
81
+
82
+
private function getFileSize() {
83
+
return $this->fileSize;
84
+
}
85
+
76
86
public function getMetadata() {
77
87
return array(
78
88
'phid' => $this->getFilePHID(),
···
97
107
$class = $this->getCustomClass();
98
108
}
99
109
110
+
$filename = $this->getFileName();
111
+
$type_icon = FileTypeIcon::getFileIcon($filename);
112
+
100
113
$icon = id(new PHUIIconView())
101
-
->setIcon('fa-file-text-o');
114
+
->setIcon($type_icon);
115
+
116
+
$info = phutil_tag(
117
+
'span',
118
+
array(
119
+
'class' => 'phabricator-remarkup-embed-layout-info',
120
+
),
121
+
$this->getFileSize());
122
+
123
+
$name = phutil_tag(
124
+
'span',
125
+
array(
126
+
'class' => 'phabricator-remarkup-embed-layout-name',
127
+
),
128
+
$filename);
129
+
130
+
$inner = phutil_tag(
131
+
'span',
132
+
array(
133
+
'class' => 'phabricator-remarkup-embed-layout-info-block',
134
+
),
135
+
array(
136
+
$name,
137
+
$info,
138
+
));
102
139
103
140
return javelin_tag(
104
141
'a',
···
111
148
),
112
149
array(
113
150
$icon,
114
-
$this->getFileName(),
151
+
$inner,
115
152
));
116
153
}
117
154
}
+25
-4
webroot/rsrc/css/core/remarkup.css
+25
-4
webroot/rsrc/css/core/remarkup.css
···
370
370
}
371
371
372
372
.phabricator-remarkup-embed-layout-link {
373
-
padding: 2px 0;
373
+
padding: 8px 8px 8px 32px;
374
374
border-radius: 3px;
375
-
margin: 0;
375
+
margin: 0 0 4px;
376
376
display: inline-block;
377
377
font-weight: bold;
378
-
color: {$anchor};
379
378
-webkit-font-smoothing: antialiased;
379
+
border: 1px solid {$lightblueborder};
380
+
border-radius: 3px;
381
+
color: #000;
382
+
min-width: 240px;
383
+
position: relative;
384
+
height: 22px;
385
+
line-height: 20px;
380
386
}
381
387
382
388
.phabricator-remarkup-embed-layout-link .phui-icon-view {
383
389
margin-right: 8px;
390
+
font-size: 20px;
391
+
position: absolute;
392
+
top: 8px;
393
+
left: 8px;
384
394
}
385
395
386
-
.phabricator-remarkup-embed-layout-link:hover,
396
+
.phabricator-remarkup-embed-layout-info {
397
+
color: {$lightgreytext};
398
+
font-size: {$smallerfontsize};
399
+
font-weight: normal;
400
+
margin-left: 8px;
401
+
}
402
+
403
+
.phabricator-remarkup-embed-layout-link:hover {
404
+
border-color: {$violet};
405
+
text-decoration: none;
406
+
}
407
+
387
408
.phabricator-remarkup-embed-layout-link:hover .phui-icon-view {
388
409
color: {$violet};
389
410
}