@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
CSS polish, Pholio
Summary:
Minor things
- Fades out comment icon on hover
- Adds hover to inline comment images
- moves mask position to just the image, and not the transparent border
Test Plan: Tested all of these items on various mocks
Reviewers: epriestley
Reviewed By: epriestley
Subscribers: epriestley, Korvin
Differential Revision: https://secure.phabricator.com/D9631
+55
-40
+23
-23
resources/celerity/map.php
+23
-23
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' => '3ad9d1ee',
83
-
'rsrc/css/application/pholio/pholio-inline-comments.css' => '286e6be7',
84
-
'rsrc/css/application/pholio/pholio.css' => 'd0502625',
83
+
'rsrc/css/application/pholio/pholio-inline-comments.css' => '2703fdb9',
84
+
'rsrc/css/application/pholio/pholio.css' => 'c1510ea2',
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',
···
131
131
'rsrc/css/phui/phui-form.css' => 'b78ec020',
132
132
'rsrc/css/phui/phui-header-view.css' => 'a2071a67',
133
133
'rsrc/css/phui/phui-icon.css' => 'd8526aa1',
134
-
'rsrc/css/phui/phui-image-mask.css' => '5f4a6d5d',
134
+
'rsrc/css/phui/phui-image-mask.css' => '5a8b09c8',
135
135
'rsrc/css/phui/phui-info-panel.css' => '27ea50a1',
136
136
'rsrc/css/phui/phui-list.css' => '43ed2d93',
137
137
'rsrc/css/phui/phui-object-box.css' => 'ce92d8ec',
···
401
401
'rsrc/js/application/passphrase/phame-credential-control.js' => '1e1c8a59',
402
402
'rsrc/js/application/phame/phame-post-preview.js' => '61d927ec',
403
403
'rsrc/js/application/pholio/behavior-pholio-mock-edit.js' => '1e1e8bb0',
404
-
'rsrc/js/application/pholio/behavior-pholio-mock-view.js' => '83326068',
404
+
'rsrc/js/application/pholio/behavior-pholio-mock-view.js' => '929d95eb',
405
405
'rsrc/js/application/phortune/behavior-balanced-payment-form.js' => '3b3e1664',
406
406
'rsrc/js/application/phortune/behavior-stripe-payment-form.js' => '1693a296',
407
407
'rsrc/js/application/phortune/behavior-test-payment-form.js' => 'b3e5ee60',
···
626
626
'javelin-behavior-phabricator-watch-anchor' => '06e05112',
627
627
'javelin-behavior-phame-post-preview' => '61d927ec',
628
628
'javelin-behavior-pholio-mock-edit' => '1e1e8bb0',
629
-
'javelin-behavior-pholio-mock-view' => '83326068',
629
+
'javelin-behavior-pholio-mock-view' => '929d95eb',
630
630
'javelin-behavior-phui-object-box-tabs' => 'a3e2244e',
631
631
'javelin-behavior-phui-timeline-dropdown-menu' => '4d94d9c3',
632
632
'javelin-behavior-policy-control' => 'f3fef818',
···
752
752
'phabricator-uiexample-reactor-sendproperties' => '551add57',
753
753
'phabricator-zindex-css' => 'efb673ac',
754
754
'phame-css' => '19ecc703',
755
-
'pholio-css' => 'd0502625',
755
+
'pholio-css' => 'c1510ea2',
756
756
'pholio-edit-css' => '3ad9d1ee',
757
-
'pholio-inline-comments-css' => '286e6be7',
757
+
'pholio-inline-comments-css' => '2703fdb9',
758
758
'phortune-credit-card-form' => '2290aeef',
759
759
'phortune-credit-card-form-css' => 'b25b4beb',
760
760
'phrequent-css' => 'ffc185ad',
···
773
773
'phui-form-view-css' => 'ed856191',
774
774
'phui-header-view-css' => 'a2071a67',
775
775
'phui-icon-view-css' => 'd8526aa1',
776
-
'phui-image-mask-css' => '5f4a6d5d',
776
+
'phui-image-mask-css' => '5a8b09c8',
777
777
'phui-info-panel-css' => '27ea50a1',
778
778
'phui-list-view-css' => '43ed2d93',
779
779
'phui-object-box-css' => 'ce92d8ec',
···
1508
1508
4 => 'javelin-request',
1509
1509
5 => 'phabricator-shaped-request',
1510
1510
),
1511
+
'929d95eb' =>
1512
+
array(
1513
+
0 => 'javelin-behavior',
1514
+
1 => 'javelin-util',
1515
+
2 => 'javelin-stratcom',
1516
+
3 => 'javelin-dom',
1517
+
4 => 'javelin-vector',
1518
+
5 => 'javelin-magical-init',
1519
+
6 => 'javelin-request',
1520
+
7 => 'javelin-history',
1521
+
8 => 'javelin-workflow',
1522
+
9 => 'javelin-mask',
1523
+
10 => 'javelin-behavior-device',
1524
+
11 => 'phabricator-keyboard-shortcut',
1525
+
),
1511
1526
'938aed89' =>
1512
1527
array(
1513
1528
0 => 'javelin-behavior',
···
2114
2129
0 => 'javelin-behavior',
2115
2130
1 => 'javelin-dom',
2116
2131
2 => 'javelin-workflow',
2117
-
),
2118
-
83326068 =>
2119
-
array(
2120
-
0 => 'javelin-behavior',
2121
-
1 => 'javelin-util',
2122
-
2 => 'javelin-stratcom',
2123
-
3 => 'javelin-dom',
2124
-
4 => 'javelin-vector',
2125
-
5 => 'javelin-magical-init',
2126
-
6 => 'javelin-request',
2127
-
7 => 'javelin-history',
2128
-
8 => 'javelin-workflow',
2129
-
9 => 'javelin-mask',
2130
-
10 => 'javelin-behavior-device',
2131
-
11 => 'phabricator-keyboard-shortcut',
2132
2132
),
2133
2133
),
2134
2134
'packages' =>
+2
-1
src/applications/pholio/view/PholioTransactionView.php
+2
-1
src/applications/pholio/view/PholioTransactionView.php
+1
-1
webroot/rsrc/css/application/pholio/pholio-inline-comments.css
+1
-1
webroot/rsrc/css/application/pholio/pholio-inline-comments.css
+17
-6
webroot/rsrc/css/application/pholio/pholio.css
+17
-6
webroot/rsrc/css/application/pholio/pholio.css
···
88
88
background: url(/rsrc/image/darkload.gif) no-repeat center;
89
89
}
90
90
91
+
.device-desktop .pholio-transaction-inline-image-anchor:hover .phui-image-mask {
92
+
border-color: {$indigo};
93
+
}
94
+
91
95
.pholio-transaction-inline-comment {
92
96
display: table-row;
93
97
}
···
116
120
box-shadow: 0 0 0 4px rgba(255,255,255,.5);
117
121
}
118
122
119
-
.pholio-mock-reticle-draft {
123
+
.pholio-mock-reticle-draft .pholio-mock-comment-icon {
120
124
font-size: 2.2em;
121
125
color: {$yellow};
122
126
text-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
123
127
-webkit-text-stroke: 1px white;
124
128
}
125
129
126
-
.pholio-mock-reticle-final {
130
+
.pholio-mock-reticle-final .pholio-mock-comment-icon {
127
131
font-size: 2.2em;
128
132
color: {$indigo};
129
133
text-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
···
135
139
border: 1px solid rgba(0,0,0,.5);
136
140
box-shadow: 0 0 0 4px rgba(255,255,255,.5);
137
141
cursor: pointer;
138
-
color: transparent;
139
-
text-shadow: none;
140
-
-webkit-text-stroke: 0;
142
+
}
143
+
144
+
.device-desktop .pholio-mock-reticle-draft:hover .pholio-mock-comment-icon,
145
+
.device-desktop .pholio-mock-reticle-final:hover .pholio-mock-comment-icon {
146
+
opacity: 0;
147
+
-webkit-transition: all .3s ease;
148
+
-moz-transition: all .3s ease;
149
+
-ms-transition: all .3s ease;
150
+
-o-transition: all .3s ease;
151
+
transition: all .3s ease;
141
152
}
142
153
143
154
.device-desktop .mock-has-cursor .pholio-mock-reticle {
···
215
226
color: {$darkgreybackground};
216
227
}
217
228
218
-
.pholio-image-button-active .pholio-image-button-link:hover {
229
+
.device-desktop .pholio-image-button-active .pholio-image-button-link:hover {
219
230
background: {$darkgreybackground};
220
231
}
221
232
+2
-2
webroot/rsrc/css/phui/phui-image-mask.css
+2
-2
webroot/rsrc/css/phui/phui-image-mask.css
···
8
8
display: inline-block;
9
9
border: 1px solid {$lightblueborder};
10
10
padding: 4px;
11
-
position: relative;
12
-
overflow: hidden;
13
11
}
14
12
15
13
.phui-image-mask-image {
16
14
background-repeat: no-repeat;
15
+
position: relative;
16
+
overflow: hidden;
17
17
}
18
18
19
19
.phui-image-mask-mask {
+10
-7
webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js
+10
-7
webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js
···
469
469
470
470
var classes = [];
471
471
if (!inline.transactionPHID) {
472
-
classes.push('pholio-mock-reticle-draft phui-font-fa fa-comment');
472
+
classes.push('pholio-mock-reticle-draft');
473
473
} else {
474
-
classes.push('pholio-mock-reticle-final phui-font-fa fa-comment');
474
+
classes.push('pholio-mock-reticle-final');
475
475
}
476
476
477
-
var inline_selection = render_reticle(classes);
477
+
var inline_selection = render_reticle(classes,
478
+
'pholio-mock-comment-icon phui-font-fa fa-comment');
478
479
stage.addReticle(inline_selection, inline.id);
479
480
position_inline_rectangle(inline, inline_selection);
480
481
}
···
511
512
512
513
function redraw_selection() {
513
514
var classes = ['pholio-mock-reticle-selection'];
514
-
selection_reticle = selection_reticle || render_reticle(classes);
515
+
selection_reticle = selection_reticle || render_reticle(classes, '');
515
516
516
517
var p = JX.$V(
517
518
Math.min(drag_begin.x, drag_end.x),
···
667
668
}
668
669
}
669
670
670
-
function render_reticle(classes) {
671
-
return JX.$N(
671
+
function render_reticle(classes, inner_classes) {
672
+
var inner = JX.$N('div', {className: inner_classes});
673
+
var outer = JX.$N(
672
674
'div',
673
-
{className: ['pholio-mock-reticle'].concat(classes).join(' ')});
675
+
{className: ['pholio-mock-reticle'].concat(classes).join(' ')}, inner);
676
+
return outer;
674
677
}
675
678
676
679