@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
finish implementing N and W tooltips and use W in differential
Summary: 'cuz new fluid layouts require the westerlyness. Looks like D4126 started the N and W implementation but didn't finish it...? note I had to do the shifting of the 5 pixels in javascript; using the CSS didn't work for me in chrome.
Test Plan: uiexample, and hoping it goes well when deployed in prod for differential case
Reviewers: epriestley
Reviewed By: epriestley
CC: chad, aran, Korvin
Maniphest Tasks: T2211
Differential Revision: https://secure.phabricator.com/D4257
+49
-14
+28
-2
src/applications/uiexample/examples/PhabricatorUITooltipExample.php
+28
-2
src/applications/uiexample/examples/PhabricatorUITooltipExample.php
···
36
36
'hi' => array(
37
37
'tip' => 'Hi',
38
38
),
39
-
'lorem' => array(
39
+
'lorem (north)' => array(
40
40
'tip' => $lorem,
41
41
),
42
42
'lorem (east)' => array(
43
43
'tip' => $lorem,
44
44
'align' => 'E',
45
45
),
46
-
'lorem (large)' => array(
46
+
'lorem (south)' => array(
47
+
'tip' => $lorem,
48
+
'align' => 'S',
49
+
),
50
+
'lorem (west)' => array(
51
+
'tip' => $lorem,
52
+
'align' => 'W',
53
+
),
54
+
'lorem (large, north)' => array(
47
55
'tip' => $lorem,
48
56
'size' => 300,
49
57
),
···
52
60
'size' => 300,
53
61
'align' => 'E',
54
62
),
63
+
'lorem (large, west)' => array(
64
+
'tip' => $lorem,
65
+
'size' => 300,
66
+
'align' => 'W',
67
+
),
68
+
'lorem (large, south)' => array(
69
+
'tip' => $lorem,
70
+
'size' => 300,
71
+
'align' => 'S',
72
+
),
55
73
'overflow (north)' => array(
56
74
'tip' => $overflow,
57
75
),
58
76
'overflow (east)' => array(
59
77
'tip' => $overflow,
60
78
'align' => 'E',
79
+
),
80
+
'overflow (south)' => array(
81
+
'tip' => $overflow,
82
+
'align' => 'S',
83
+
),
84
+
'overflow (west)' => array(
85
+
'tip' => $overflow,
86
+
'align' => 'W',
61
87
),
62
88
);
63
89
-8
webroot/rsrc/css/aphront/tooltip.css
-8
webroot/rsrc/css/aphront/tooltip.css
···
42
42
top: 50%;
43
43
}
44
44
45
-
.jx-tooltip-align-W {
46
-
margin-right: 5px;
47
-
}
48
-
49
45
.jx-tooltip-align-W .jx-tooltip:after {
50
46
margin-top: -5px;
51
47
border-left-color: #000;
···
62
58
border-top-color: #000;
63
59
top: 100%;
64
60
left: 50%;
65
-
}
66
-
67
-
.jx-tooltip-align-S {
68
-
margin-bottom: -5px;
69
61
}
70
62
71
63
.jx-tooltip-align-S .jx-tooltip:after {
+20
-2
webroot/rsrc/js/application/core/ToolTip.js
+20
-2
webroot/rsrc/js/application/core/ToolTip.js
···
14
14
15
15
show : function(root, scale, align, content) {
16
16
if (__DEV__) {
17
-
if (align != 'N' && align != 'E') {
18
-
JX.$E("Only alignments 'N' (north) and 'E' (east) are supported.");
17
+
switch (align) {
18
+
case 'N':
19
+
case 'E':
20
+
case 'S':
21
+
case 'W':
22
+
break;
23
+
default:
24
+
JX.$E(
25
+
"Only alignments 'N' (north), 'E' (east), 'S' (south), " +
26
+
"and 'W' (west) are supported."
27
+
);
28
+
break;
19
29
}
20
30
}
21
31
···
49
59
break;
50
60
case 'E':
51
61
node.style.left = parseInt(p.x + d.x) + 'px';
62
+
node.style.top = parseInt(p.y - ((n.y - d.y) / 2)) + 'px';
63
+
break;
64
+
case 'S':
65
+
node.style.left = parseInt(p.x - ((n.x - d.x) / 2)) + 'px';
66
+
node.style.top = parseInt(p.y + d.y + 5) + 'px';
67
+
break;
68
+
case 'W':
69
+
node.style.left = parseInt(p.x - n.x - 5) + 'px';
52
70
node.style.top = parseInt(p.y - ((n.y - d.y) / 2)) + 'px';
53
71
break;
54
72
}
+1
-2
webroot/rsrc/js/application/differential/behavior-populate.js
+1
-2
webroot/rsrc/js/application/differential/behavior-populate.js
···
86
86
} else {
87
87
highlight_class = null;
88
88
var msg;
89
-
var align = 'E';
89
+
var align = 'W';
90
90
var sibling = 'previousSibling';
91
91
var width = 120;
92
92
if (t.className.match(/cov-C/)) {
···
101
101
} else {
102
102
var match = /new-copy|new-move/.exec(t.className);
103
103
if (match) {
104
-
align = 'N'; // TODO: 'W'
105
104
sibling = 'nextSibling';
106
105
width = 500;
107
106
msg = JX.Stratcom.getData(t).msg;