@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
Touch up Pholio
Summary: Uses common CSS spacing, tweaks some colors, increases viewport size to very limits.
Test Plan:
Test large and small images, various breakpoints. Able to more easily review mocks.
{F166500}
{F166501}
Reviewers: epriestley
Reviewed By: epriestley
Subscribers: epriestley, Korvin
Differential Revision: https://secure.phabricator.com/D9534
+45
-54
+21
-21
resources/celerity/map.php
+21
-21
resources/celerity/map.php
···
80
80
'rsrc/css/application/people/people-profile.css' => 'ba7b2762',
81
81
'rsrc/css/application/phame/phame.css' => '19ecc703',
82
82
'rsrc/css/application/pholio/pholio-edit.css' => 'b9e59b6d',
83
-
'rsrc/css/application/pholio/pholio-inline-comments.css' => '52be33f0',
84
-
'rsrc/css/application/pholio/pholio.css' => '005be8e1',
83
+
'rsrc/css/application/pholio/pholio-inline-comments.css' => '28a2e394',
84
+
'rsrc/css/application/pholio/pholio.css' => 'fbe373cb',
85
85
'rsrc/css/application/phortune/phortune-credit-card-form.css' => 'b25b4beb',
86
86
'rsrc/css/application/phrequent/phrequent.css' => 'ffc185ad',
87
87
'rsrc/css/application/phriction/phriction-document-css.css' => '7d7f0071',
···
389
389
'rsrc/js/application/passphrase/phame-credential-control.js' => '1e1c8a59',
390
390
'rsrc/js/application/phame/phame-post-preview.js' => '61d927ec',
391
391
'rsrc/js/application/pholio/behavior-pholio-mock-edit.js' => '1e1e8bb0',
392
-
'rsrc/js/application/pholio/behavior-pholio-mock-view.js' => '28497740',
392
+
'rsrc/js/application/pholio/behavior-pholio-mock-view.js' => '8be2cc3d',
393
393
'rsrc/js/application/phortune/behavior-balanced-payment-form.js' => '3b3e1664',
394
394
'rsrc/js/application/phortune/behavior-stripe-payment-form.js' => '1693a296',
395
395
'rsrc/js/application/phortune/behavior-test-payment-form.js' => 'b3e5ee60',
···
613
613
'javelin-behavior-phabricator-watch-anchor' => '06e05112',
614
614
'javelin-behavior-phame-post-preview' => '61d927ec',
615
615
'javelin-behavior-pholio-mock-edit' => '1e1e8bb0',
616
-
'javelin-behavior-pholio-mock-view' => '28497740',
616
+
'javelin-behavior-pholio-mock-view' => '8be2cc3d',
617
617
'javelin-behavior-phui-object-box-tabs' => 'a3e2244e',
618
618
'javelin-behavior-phui-timeline-dropdown-menu' => '4d94d9c3',
619
619
'javelin-behavior-policy-control' => 'f3fef818',
···
739
739
'phabricator-uiexample-reactor-sendproperties' => '551add57',
740
740
'phabricator-zindex-css' => 'efb673ac',
741
741
'phame-css' => '19ecc703',
742
-
'pholio-css' => '005be8e1',
742
+
'pholio-css' => 'fbe373cb',
743
743
'pholio-edit-css' => 'b9e59b6d',
744
-
'pholio-inline-comments-css' => '52be33f0',
744
+
'pholio-inline-comments-css' => '28a2e394',
745
745
'phortune-credit-card-form' => '2290aeef',
746
746
'phortune-credit-card-form-css' => 'b25b4beb',
747
747
'phrequent-css' => 'ffc185ad',
···
1454
1454
2 => 'javelin-stratcom',
1455
1455
3 => 'javelin-uri',
1456
1456
),
1457
+
'8be2cc3d' =>
1458
+
array(
1459
+
0 => 'javelin-behavior',
1460
+
1 => 'javelin-util',
1461
+
2 => 'javelin-stratcom',
1462
+
3 => 'javelin-dom',
1463
+
4 => 'javelin-vector',
1464
+
5 => 'javelin-magical-init',
1465
+
6 => 'javelin-request',
1466
+
7 => 'javelin-history',
1467
+
8 => 'javelin-workflow',
1468
+
9 => 'javelin-mask',
1469
+
10 => 'javelin-behavior-device',
1470
+
11 => 'phabricator-keyboard-shortcut',
1471
+
),
1457
1472
'8ef9ab58' =>
1458
1473
array(
1459
1474
0 => 'javelin-behavior',
···
2075
2090
3 => 'phabricator-prefab',
2076
2091
4 => 'multirow-row-manager',
2077
2092
5 => 'javelin-json',
2078
-
),
2079
-
28497740 =>
2080
-
array(
2081
-
0 => 'javelin-behavior',
2082
-
1 => 'javelin-util',
2083
-
2 => 'javelin-stratcom',
2084
-
3 => 'javelin-dom',
2085
-
4 => 'javelin-vector',
2086
-
5 => 'javelin-magical-init',
2087
-
6 => 'javelin-request',
2088
-
7 => 'javelin-history',
2089
-
8 => 'javelin-workflow',
2090
-
9 => 'javelin-mask',
2091
-
10 => 'javelin-behavior-device',
2092
-
11 => 'phabricator-keyboard-shortcut',
2093
2093
),
2094
2094
42126667 =>
2095
2095
array(
+12
-11
webroot/rsrc/css/application/pholio/pholio-inline-comments.css
+12
-11
webroot/rsrc/css/application/pholio/pholio-inline-comments.css
···
3
3
*/
4
4
5
5
.pholio-inline-comment {
6
-
border: 1px solid #555555;
7
-
background: #353535;
8
-
margin: 0 10px 5px 10px;
9
-
padding: 8px 10px;
10
-
11
-
font-family: Verdana;
12
-
font-size: 11px;
6
+
margin: 0 0 4px 0;
7
+
padding: 8px;
8
+
font-size: 12px;
13
9
}
14
10
15
11
.pholio-mock-inline-comments {
16
12
color: #cccccc;
17
-
border-top: 1px solid #333;
18
13
background: #282828;
19
14
overflow-x: auto;
20
15
text-align: left;
21
16
}
22
17
18
+
.pholio-inline-comment-header {
19
+
color: #fff;
20
+
font-weight: bold;
21
+
margin-bottom: 4px;
22
+
}
23
+
23
24
.device-desktop .pholio-mock-inline-comments {
24
25
border-left: 1px solid #101010;
25
26
position: absolute;
26
-
width: 320px;
27
+
width: 300px;
27
28
top: 0;
28
29
bottom: 0;
29
30
right: 0;
···
43
44
}
44
45
45
46
.pholio-inline-comment-dialog {
46
-
padding: 10px;
47
+
padding: 4px;
47
48
}
48
49
49
50
.pholio-inline-comment-dialog-textarea {
···
79
80
80
81
.pholio-mock-inline-comments a {
81
82
font-weight: normal;
82
-
color: #2178db;
83
+
color: {$sky};
83
84
}
84
85
85
86
.device-desktop .pholio-mock-inline-comment-highlight.pholio-mock-select-fill {
+8
-17
webroot/rsrc/css/application/pholio/pholio.css
+8
-17
webroot/rsrc/css/application/pholio/pholio.css
···
2
2
* @provides pholio-css
3
3
*/
4
4
.pholio-mock-image-container {
5
-
margin-top: 16px;
5
+
margin-top: 8px;
6
6
background-color: #282828;
7
7
text-align: center;
8
8
vertical-align: middle;
9
9
position: relative;
10
-
background: url('/rsrc/image/texture/pholio-background.gif');
10
+
background: url('/rsrc/image/checker_light.png');
11
11
}
12
12
13
13
.pholio-mock-carousel {
···
17
17
}
18
18
19
19
.device-desktop .pholio-mock-carousel {
20
-
margin-right: 320px;
20
+
margin-right: 300px;
21
21
}
22
22
23
23
.pholio-mock-carousel-thumb-item {
···
70
70
71
71
.pholio-mock-select-fill {
72
72
position: absolute;
73
-
background: #ffffff;
74
-
opacity: 0.25;
75
73
box-sizing: border-box;
76
-
border: 1px solid #000000;
74
+
border: 2px solid {$indigo};
75
+
border-radius: 2px;
77
76
}
78
77
79
78
.pholio-mock-select-border {
···
83
82
}
84
83
85
84
.pholio-mock-image-panel {
86
-
padding: 20px;
85
+
padding: 12px;
87
86
border-top: 1px solid #333;
88
87
}
89
88
90
89
.device-desktop .pholio-mock-image-panel {
91
90
border-right: 1px solid #333;
92
-
margin-right: 319px;
91
+
margin-right: 299px;
93
92
}
94
93
95
94
.pholio-mock-image-viewport {
···
98
97
display: inline-block;
99
98
}
100
99
101
-
.pholio-inline-comment-header {
102
-
color: #fff;
103
-
border-bottom: 1px solid #555;
104
-
font-weight: bold;
105
-
padding-bottom: 6px;
106
-
margin-bottom: 4px;
107
-
}
108
-
109
100
.pholio-image-loading img {
110
101
opacity: 0.50;
111
102
}
···
116
107
}
117
108
118
109
.pholio-image-info-item {
119
-
padding: 0 10px;
110
+
padding: 0 8px;
120
111
margin: 8px 0;
121
112
}
122
113
+4
-5
webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js
+4
-5
webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js
···
169
169
function redraw_image() {
170
170
171
171
// Force the stage to scale as a function of the viewport size. Broadly,
172
-
// we make the stage 95% of the height of the viewport, then scale images
173
-
// to fit within it.
174
-
var new_y = (JX.Vector.getViewport().y * 0.90) - 150;
172
+
// we take the full viewport and subtract 12px top and bottom.
173
+
var new_y = (JX.Vector.getViewport().y - 24) ;
175
174
new_y = Math.max(320, new_y);
176
175
panel.style.height = new_y + 'px';
177
176
···
184
183
// If the image is too wide or tall for the viewport, scale it down so it
185
184
// fits.
186
185
var w = JX.Vector.getDim(panel);
187
-
w.x -= 40;
188
-
w.y -= 40;
186
+
w.x -= 24;
187
+
w.y -= 24;
189
188
var scale = 1;
190
189
if (w.x < tag.naturalWidth) {
191
190
scale = Math.min(scale, w.x / tag.naturalWidth);