Page MenuHomestyx hydra
Files F206683

No OneTemporary
Actions

View Options

diff --git a/src/applications/uiexample/examples/PhabricatorUITooltipExample.php b/src/applications/uiexample/examples/PhabricatorUITooltipExample.php
index 114124d1fb..77a346510b 100644
--- a/src/applications/uiexample/examples/PhabricatorUITooltipExample.php
+++ b/src/applications/uiexample/examples/PhabricatorUITooltipExample.php
@@ -1,78 +1,104 @@
<?php
final class PhabricatorUITooltipExample extends PhabricatorUIExample {
public function getName() {
return 'Tooltips';
}
public function getDescription() {
return 'Use <tt>JX.Tooltip</tt> to create tooltips.';
}
public function renderExample() {
Javelin::initBehavior('phabricator-tooltips');
require_celerity_resource('aphront-tooltip-css');
$style = 'width: 200px; '.
'height: 200px '.
'text-align: center; '.
'margin: 20px; '.
'background: #dfdfdf; '.
'padding: 30px 10px; '.
'border: 1px solid black; ';
$lorem = <<<EOTEXT
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget urna
sed ante ultricies consequat id a odio. Mauris interdum volutpat sapien eu
accumsan. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
EOTEXT;
$overflow = str_repeat('M', 1024);
$metas = array(
'hi' => array(
'tip' => 'Hi',
),
- 'lorem' => array(
+ 'lorem (north)' => array(
'tip' => $lorem,
),
'lorem (east)' => array(
'tip' => $lorem,
'align' => 'E',
),
- 'lorem (large)' => array(
+ 'lorem (south)' => array(
+ 'tip' => $lorem,
+ 'align' => 'S',
+ ),
+ 'lorem (west)' => array(
+ 'tip' => $lorem,
+ 'align' => 'W',
+ ),
+ 'lorem (large, north)' => array(
'tip' => $lorem,
'size' => 300,
),
'lorem (large, east)' => array(
'tip' => $lorem,
'size' => 300,
'align' => 'E',
),
+ 'lorem (large, west)' => array(
+ 'tip' => $lorem,
+ 'size' => 300,
+ 'align' => 'W',
+ ),
+ 'lorem (large, south)' => array(
+ 'tip' => $lorem,
+ 'size' => 300,
+ 'align' => 'S',
+ ),
'overflow (north)' => array(
'tip' => $overflow,
),
'overflow (east)' => array(
'tip' => $overflow,
'align' => 'E',
),
+ 'overflow (south)' => array(
+ 'tip' => $overflow,
+ 'align' => 'S',
+ ),
+ 'overflow (west)' => array(
+ 'tip' => $overflow,
+ 'align' => 'W',
+ ),
);
$content = array();
foreach ($metas as $key => $meta) {
$content[] = javelin_render_tag(
'div',
array(
'sigil' => 'has-tooltip',
'meta' => $meta,
'style' => $style,
),
phutil_escape_html($key));
}
return $content;
}
}
diff --git a/webroot/rsrc/css/aphront/tooltip.css b/webroot/rsrc/css/aphront/tooltip.css
index bd92d73fde..fe7b98cea8 100644
--- a/webroot/rsrc/css/aphront/tooltip.css
+++ b/webroot/rsrc/css/aphront/tooltip.css
@@ -1,76 +1,68 @@
/**
* @provides aphront-tooltip-css
*/
.jx-tooltip-container {
position: absolute;
z-index: 18;
}
.jx-tooltip {
background: #000;
color: #f9f9f9;
font-size: 12px;
padding: 4px 8px;
overflow: hidden;
white-space: pre-wrap;
border-radius: 3px;
opacity: 0.9;
box-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
}
.jx-tooltip:after {
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(0, 0, 0, 0);
border-width: 5px;
}
.jx-tooltip-align-E {
margin-left: 5px;
}
.jx-tooltip-align-E .jx-tooltip:after {
margin-top: -5px;
border-right-color: #000;
right: 100%;
top: 50%;
}
-.jx-tooltip-align-W {
- margin-right: 5px;
-}
-
.jx-tooltip-align-W .jx-tooltip:after {
margin-top: -5px;
border-left-color: #000;
left: 100%;
top: 50%;
}
.jx-tooltip-align-N {
margin-top: -5px;
}
.jx-tooltip-align-N .jx-tooltip:after {
margin-left: -5px;
border-top-color: #000;
top: 100%;
left: 50%;
}
-.jx-tooltip-align-S {
- margin-bottom: -5px;
-}
-
.jx-tooltip-align-S .jx-tooltip:after {
margin-left: -5px;
border-bottom-color: #000;
bottom: 100%;
left: 50%;
}
diff --git a/webroot/rsrc/js/application/core/ToolTip.js b/webroot/rsrc/js/application/core/ToolTip.js
index 9a809b445e..b7db7b0f7d 100644
--- a/webroot/rsrc/js/application/core/ToolTip.js
+++ b/webroot/rsrc/js/application/core/ToolTip.js
@@ -1,64 +1,82 @@
/**
* @requires javelin-install
* javelin-util
* javelin-dom
* javelin-vector
* @provides phabricator-tooltip
* @javelin
*/
JX.install('Tooltip', {
statics : {
_node : null,
show : function(root, scale, align, content) {
if (__DEV__) {
- if (align != 'N' && align != 'E') {
- JX.$E("Only alignments 'N' (north) and 'E' (east) are supported.");
+ switch (align) {
+ case 'N':
+ case 'E':
+ case 'S':
+ case 'W':
+ break;
+ default:
+ JX.$E(
+ "Only alignments 'N' (north), 'E' (east), 'S' (south), " +
+ "and 'W' (west) are supported."
+ );
+ break;
}
}
var node = JX.$N(
'div',
{ className: 'jx-tooltip-container jx-tooltip-align-' + align },
[
JX.$N('div', { className: 'jx-tooltip' }, content),
JX.$N('div', { className: 'jx-tooltip-anchor' })
]);
node.style.maxWidth = scale + 'px';
JX.Tooltip.hide();
this._node = node;
// Append the tip to the document, but offscreen, so we can measure it.
node.style.left = '-10000px';
document.body.appendChild(node);
var p = JX.$V(root);
var d = JX.Vector.getDim(root);
var n = JX.Vector.getDim(node);
// Move the tip so it's nicely aligned.
switch (align) {
case 'N':
node.style.left = parseInt(p.x - ((n.x - d.x) / 2)) + 'px';
node.style.top = parseInt(p.y - n.y) + 'px';
break;
case 'E':
node.style.left = parseInt(p.x + d.x) + 'px';
node.style.top = parseInt(p.y - ((n.y - d.y) / 2)) + 'px';
break;
+ case 'S':
+ node.style.left = parseInt(p.x - ((n.x - d.x) / 2)) + 'px';
+ node.style.top = parseInt(p.y + d.y + 5) + 'px';
+ break;
+ case 'W':
+ node.style.left = parseInt(p.x - n.x - 5) + 'px';
+ node.style.top = parseInt(p.y - ((n.y - d.y) / 2)) + 'px';
+ break;
}
},
hide : function() {
if (this._node) {
JX.DOM.remove(this._node);
this._node = null;
}
}
}
});
diff --git a/webroot/rsrc/js/application/differential/behavior-populate.js b/webroot/rsrc/js/application/differential/behavior-populate.js
index 67286118fa..44b5786058 100644
--- a/webroot/rsrc/js/application/differential/behavior-populate.js
+++ b/webroot/rsrc/js/application/differential/behavior-populate.js
@@ -1,126 +1,125 @@
/**
* @provides javelin-behavior-differential-populate
* @requires javelin-behavior
* javelin-workflow
* javelin-util
* javelin-dom
* javelin-stratcom
* phabricator-tooltip
*/
JX.behavior('differential-populate', function(config) {
function onresponse(target, response) {
JX.DOM.replace(JX.$(target), JX.$H(response.changeset));
if (response.coverage) {
for (var k in response.coverage) {
try {
JX.DOM.replace(JX.$(k), JX.$H(response.coverage[k]));
} catch (ignored) {
// Not terribly important.
}
}
}
}
for (var k in config.registry) {
var data = {
ref : config.registry[k],
whitespace: config.whitespace
};
new JX.Workflow(config.uri, data)
.setHandler(JX.bind(null, onresponse, k))
.start();
}
var highlighted = null;
var highlight_class = null;
JX.Stratcom.listen(
'click',
'differential-load',
function(e) {
var meta = e.getNodeData('differential-load');
var diff;
try {
diff = JX.$(meta.id);
} catch (e) {
// Already loaded.
}
if (diff) {
JX.DOM.setContent(
diff,
JX.$H('<div class="differential-loading">Loading...</div>'));
var data = {
ref : meta.ref,
whitespace : config.whitespace
};
new JX.Workflow(config.uri, data)
.setHandler(JX.bind(null, onresponse, meta.id))
.start();
}
if (meta.kill) {
e.kill();
}
});
JX.Stratcom.listen(
['mouseover', 'mouseout'],
['differential-changeset', 'tag:td'],
function(e) {
var t = e.getTarget();
// NOTE: Using className is not best practice, but the diff UI is perf
// sensitive.
if (!t.className.match(/cov|copy/)) {
return;
}
if (e.getType() == 'mouseout') {
JX.Tooltip.hide();
if (highlighted) {
JX.DOM.alterClass(highlighted, highlight_class, false);
highlighted = null;
}
} else {
highlight_class = null;
var msg;
- var align = 'E';
+ var align = 'W';
var sibling = 'previousSibling';
var width = 120;
if (t.className.match(/cov-C/)) {
msg = 'Covered';
highlight_class = 'source-cov-C';
} else if (t.className.match(/cov-U/)) {
msg = 'Not Covered';
highlight_class = 'source-cov-U';
} else if (t.className.match(/cov-N/)) {
msg = 'Not Executable';
highlight_class = 'source-cov-N';
} else {
var match = /new-copy|new-move/.exec(t.className);
if (match) {
- align = 'N'; // TODO: 'W'
sibling = 'nextSibling';
width = 500;
msg = JX.Stratcom.getData(t).msg;
highlight_class = match[0];
}
}
if (msg) {
JX.Tooltip.show(t, width, align, msg);
}
if (highlight_class) {
highlighted = t[sibling];
JX.DOM.alterClass(highlighted, highlight_class, true);
}
}
});
});

File Metadata

Mime Type
text/x-diff
Expires
Tue, Jul 1, 11:35 AM (9 m, 5 s)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
164300
Default Alt Text
(10 KB)

Event Timeline

styx copyright 2020 sirocyl / ellie (kymkdd) / ncommander / styx contributors
Use of other names and brands is not intended to reflect a claim of, or right to, use the name or brand.
styx is an operating system using the Linux kernel and components, and "styx Linux" as a phrase does not reflect the inclusion of the Linux brand or trademark in the styx project.
Linux® is the registered trademark of Linus Torvalds in the U.S. and other countries.
Terms and Conditions (TODO: fix this!)