1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-12-23 05:50:55 +01:00

Add a basic tooltip UI element

Summary: There are a few things we can improve with tooltips.

Test Plan: Moused over all the stuff on the test page.

Reviewers: btrahan

Reviewed By: btrahan

CC: aran, epriestley

Maniphest Tasks: T965

Differential Revision: https://secure.phabricator.com/D1870
This commit is contained in:
epriestley 2012-03-12 18:21:02 -07:00
parent 392d12f1fc
commit ac09345083
7 changed files with 344 additions and 80 deletions

View file

@ -152,6 +152,15 @@ celerity_register_resource_map(array(
),
'disk' => '/rsrc/css/aphront/tokenizer.css',
),
'aphront-tooltip-css' =>
array(
'uri' => '/res/6bbfd9dd/rsrc/css/aphront/tooltip.css',
'type' => 'css',
'requires' =>
array(
),
'disk' => '/rsrc/css/aphront/tooltip.css',
),
'aphront-typeahead-control-css' =>
array(
'uri' => '/res/311e8830/rsrc/css/aphront/typeahead.css',
@ -250,7 +259,7 @@ celerity_register_resource_map(array(
),
'differential-table-of-contents-css' =>
array(
'uri' => '/res/a633259f/rsrc/css/application/differential/table-of-contents.css',
'uri' => '/res/2a4137ef/rsrc/css/application/differential/table-of-contents.css',
'type' => 'css',
'requires' =>
array(
@ -828,6 +837,18 @@ celerity_register_resource_map(array(
),
'disk' => '/rsrc/js/application/core/behavior-object-selector.js',
),
'javelin-behavior-phabricator-tooltips' =>
array(
'uri' => '/res/49f92a92/rsrc/js/application/core/behavior-tooltip.js',
'type' => 'js',
'requires' =>
array(
0 => 'javelin-behavior',
1 => 'javelin-stratcom',
2 => 'phabricator-tooltip',
),
'disk' => '/rsrc/js/application/core/behavior-tooltip.js',
),
'javelin-behavior-phabricator-watch-anchor' =>
array(
'uri' => '/res/880e3de4/rsrc/js/application/core/behavior-watch-anchor.js',
@ -1604,6 +1625,17 @@ celerity_register_resource_map(array(
),
'disk' => '/rsrc/js/application/core/PasteFileUpload.js',
),
0 =>
array(
'uri' => '/res/b6096fdd/rsrc/js/javelin/lib/__tests__/URI.js',
'type' => 'js',
'requires' =>
array(
0 => 'javelin-uri',
1 => 'javelin-php-serializer',
),
'disk' => '/rsrc/js/javelin/lib/__tests__/URI.js',
),
'phabricator-prefab' =>
array(
'uri' => '/res/956c8474/rsrc/js/application/core/Prefab.js',
@ -1689,6 +1721,19 @@ celerity_register_resource_map(array(
),
'disk' => '/rsrc/css/application/base/standard-page-view.css',
),
'phabricator-tooltip' =>
array(
'uri' => '/res/bcddf5de/rsrc/js/application/core/ToolTip.js',
'type' => 'js',
'requires' =>
array(
0 => 'javelin-install',
1 => 'javelin-util',
2 => 'javelin-dom',
3 => 'javelin-vector',
),
'disk' => '/rsrc/js/application/core/ToolTip.js',
),
'phabricator-transaction-view-css' =>
array(
'uri' => '/res/731959fb/rsrc/css/aphront/transaction.css',
@ -1903,17 +1948,6 @@ celerity_register_resource_map(array(
),
'disk' => '/rsrc/css/core/syntax.css',
),
0 =>
array(
'uri' => '/res/b6096fdd/rsrc/js/javelin/lib/__tests__/URI.js',
'type' => 'js',
'requires' =>
array(
0 => 'javelin-uri',
1 => 'javelin-php-serializer',
),
'disk' => '/rsrc/js/javelin/lib/__tests__/URI.js',
),
), array(
'packages' =>
array(
@ -1933,6 +1967,62 @@ celerity_register_resource_map(array(
'uri' => '/res/pkg/2af849fb/typeahead.pkg.js',
'type' => 'js',
),
31583232 =>
array(
'name' => 'maniphest.pkg.css',
'symbols' =>
array(
0 => 'maniphest-task-summary-css',
1 => 'maniphest-transaction-detail-css',
2 => 'maniphest-task-detail-css',
3 => 'aphront-attached-file-view-css',
),
'uri' => '/res/pkg/31583232/maniphest.pkg.css',
'type' => 'css',
),
95944588 =>
array(
'name' => 'core.pkg.js',
'symbols' =>
array(
0 => 'javelin-mask',
1 => 'javelin-workflow',
2 => 'javelin-behavior-workflow',
3 => 'javelin-behavior-aphront-form-disable-on-submit',
4 => 'phabricator-keyboard-shortcut-manager',
5 => 'phabricator-keyboard-shortcut',
6 => 'javelin-behavior-phabricator-keyboard-shortcuts',
7 => 'javelin-behavior-refresh-csrf',
8 => 'javelin-behavior-phabricator-watch-anchor',
9 => 'javelin-behavior-phabricator-autofocus',
10 => 'phabricator-paste-file-upload',
11 => 'phabricator-menu-item',
12 => 'phabricator-dropdown-menu',
),
'uri' => '/res/pkg/95944588/core.pkg.js',
'type' => 'js',
),
'400e80d0' =>
array(
'name' => 'differential.pkg.css',
'symbols' =>
array(
0 => 'differential-core-view-css',
1 => 'differential-changeset-view-css',
2 => 'differential-revision-detail-css',
3 => 'differential-revision-history-css',
4 => 'differential-table-of-contents-css',
5 => 'differential-revision-comment-css',
6 => 'differential-revision-add-comment-css',
7 => 'differential-revision-comment-list-css',
8 => 'phabricator-object-selector-css',
9 => 'aphront-headsup-action-list-view-css',
10 => 'phabricator-content-source-view-css',
11 => 'differential-local-commits-view-css',
),
'uri' => '/res/pkg/400e80d0/differential.pkg.css',
'type' => 'css',
),
'4fbae2af' =>
array(
'name' => 'javelin.pkg.js',
@ -2003,27 +2093,6 @@ celerity_register_resource_map(array(
'uri' => '/res/pkg/86fc0b0c/maniphest.pkg.js',
'type' => 'js',
),
'9d02b654' =>
array(
'name' => 'differential.pkg.css',
'symbols' =>
array(
0 => 'differential-core-view-css',
1 => 'differential-changeset-view-css',
2 => 'differential-revision-detail-css',
3 => 'differential-revision-history-css',
4 => 'differential-table-of-contents-css',
5 => 'differential-revision-comment-css',
6 => 'differential-revision-add-comment-css',
7 => 'differential-revision-comment-list-css',
8 => 'phabricator-object-selector-css',
9 => 'aphront-headsup-action-list-view-css',
10 => 'phabricator-content-source-view-css',
11 => 'differential-local-commits-view-css',
),
'uri' => '/res/pkg/9d02b654/differential.pkg.css',
'type' => 'css',
),
'ffca9dae' =>
array(
'name' => 'differential.pkg.js',
@ -2050,41 +2119,6 @@ celerity_register_resource_map(array(
'uri' => '/res/pkg/ffca9dae/differential.pkg.js',
'type' => 'js',
),
31583232 =>
array(
'name' => 'maniphest.pkg.css',
'symbols' =>
array(
0 => 'maniphest-task-summary-css',
1 => 'maniphest-transaction-detail-css',
2 => 'maniphest-task-detail-css',
3 => 'aphront-attached-file-view-css',
),
'uri' => '/res/pkg/31583232/maniphest.pkg.css',
'type' => 'css',
),
95944588 =>
array(
'name' => 'core.pkg.js',
'symbols' =>
array(
0 => 'javelin-mask',
1 => 'javelin-workflow',
2 => 'javelin-behavior-workflow',
3 => 'javelin-behavior-aphront-form-disable-on-submit',
4 => 'phabricator-keyboard-shortcut-manager',
5 => 'phabricator-keyboard-shortcut',
6 => 'javelin-behavior-phabricator-keyboard-shortcuts',
7 => 'javelin-behavior-refresh-csrf',
8 => 'javelin-behavior-phabricator-watch-anchor',
9 => 'javelin-behavior-phabricator-autofocus',
10 => 'phabricator-paste-file-upload',
11 => 'phabricator-menu-item',
12 => 'phabricator-dropdown-menu',
),
'uri' => '/res/pkg/95944588/core.pkg.js',
'type' => 'js',
),
),
'reverse' =>
array(
@ -2092,7 +2126,7 @@ celerity_register_resource_map(array(
'aphront-crumbs-view-css' => '78e8854e',
'aphront-dialog-view-css' => '78e8854e',
'aphront-form-view-css' => '78e8854e',
'aphront-headsup-action-list-view-css' => '9d02b654',
'aphront-headsup-action-list-view-css' => '400e80d0',
'aphront-list-filter-view-css' => '78e8854e',
'aphront-pager-view-css' => '78e8854e',
'aphront-panel-view-css' => '78e8854e',
@ -2100,16 +2134,16 @@ celerity_register_resource_map(array(
'aphront-table-view-css' => '78e8854e',
'aphront-tokenizer-control-css' => '78e8854e',
'aphront-typeahead-control-css' => '78e8854e',
'differential-changeset-view-css' => '9d02b654',
'differential-core-view-css' => '9d02b654',
'differential-changeset-view-css' => '400e80d0',
'differential-core-view-css' => '400e80d0',
'differential-inline-comment-editor' => 'ffca9dae',
'differential-local-commits-view-css' => '9d02b654',
'differential-revision-add-comment-css' => '9d02b654',
'differential-revision-comment-css' => '9d02b654',
'differential-revision-comment-list-css' => '9d02b654',
'differential-revision-detail-css' => '9d02b654',
'differential-revision-history-css' => '9d02b654',
'differential-table-of-contents-css' => '9d02b654',
'differential-local-commits-view-css' => '400e80d0',
'differential-revision-add-comment-css' => '400e80d0',
'differential-revision-comment-css' => '400e80d0',
'differential-revision-comment-list-css' => '400e80d0',
'differential-revision-detail-css' => '400e80d0',
'differential-revision-history-css' => '400e80d0',
'differential-table-of-contents-css' => '400e80d0',
'diffusion-commit-view-css' => '61f9d480',
'javelin-behavior' => '4fbae2af',
'javelin-behavior-aphront-basic-tokenizer' => '2af849fb',
@ -2158,7 +2192,7 @@ celerity_register_resource_map(array(
'maniphest-task-summary-css' => '31583232',
'maniphest-transaction-detail-css' => '31583232',
'phabricator-app-buttons-css' => '78e8854e',
'phabricator-content-source-view-css' => '9d02b654',
'phabricator-content-source-view-css' => '400e80d0',
'phabricator-core-buttons-css' => '78e8854e',
'phabricator-core-css' => '78e8854e',
'phabricator-directory-css' => '78e8854e',
@ -2168,7 +2202,7 @@ celerity_register_resource_map(array(
'phabricator-keyboard-shortcut' => '95944588',
'phabricator-keyboard-shortcut-manager' => '95944588',
'phabricator-menu-item' => '95944588',
'phabricator-object-selector-css' => '9d02b654',
'phabricator-object-selector-css' => '400e80d0',
'phabricator-paste-file-upload' => '95944588',
'phabricator-remarkup-css' => '78e8854e',
'phabricator-shaped-request' => 'ffca9dae',

View file

@ -822,6 +822,7 @@ phutil_register_library_map(array(
'PhabricatorUIExampleRenderController' => 'applications/uiexample/controller/render',
'PhabricatorUIListFilterExample' => 'applications/uiexample/examples/listfilter',
'PhabricatorUIPagerExample' => 'applications/uiexample/examples/pager',
'PhabricatorUITooltipExample' => 'applications/uiexample/examples/tooltip',
'PhabricatorUser' => 'applications/people/storage/user',
'PhabricatorUserAccountSettingsPanelController' => 'applications/people/controller/settings/panels/account',
'PhabricatorUserConduitSettingsPanelController' => 'applications/people/controller/settings/panels/conduit',
@ -1565,6 +1566,7 @@ phutil_register_library_map(array(
'PhabricatorUIExampleRenderController' => 'PhabricatorUIExampleController',
'PhabricatorUIListFilterExample' => 'PhabricatorUIExample',
'PhabricatorUIPagerExample' => 'PhabricatorUIExample',
'PhabricatorUITooltipExample' => 'PhabricatorUIExample',
'PhabricatorUser' => 'PhabricatorUserDAO',
'PhabricatorUserAccountSettingsPanelController' => 'PhabricatorUserSettingsPanelController',
'PhabricatorUserConduitSettingsPanelController' => 'PhabricatorUserSettingsPanelController',

View file

@ -0,0 +1,94 @@
<?php
/*
* Copyright 2012 Facebook, Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
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(
'tip' => $lorem,
),
'lorem (east)' => array(
'tip' => $lorem,
'align' => 'E',
),
'lorem (large)' => array(
'tip' => $lorem,
'size' => 300,
),
'lorem (large, east)' => array(
'tip' => $lorem,
'size' => 300,
'align' => 'E',
),
'overflow (north)' => array(
'tip' => $overflow,
),
'overflow (east)' => array(
'tip' => $overflow,
'align' => 'E',
),
);
$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;
}
}

View file

@ -0,0 +1,17 @@
<?php
/**
* This file is automatically generated. Lint this module to rebuild it.
* @generated
*/
phutil_require_module('phabricator', 'applications/uiexample/examples/base');
phutil_require_module('phabricator', 'infrastructure/celerity/api');
phutil_require_module('phabricator', 'infrastructure/javelin/api');
phutil_require_module('phabricator', 'infrastructure/javelin/markup');
phutil_require_module('phutil', 'markup');
phutil_require_source('PhabricatorUITooltipExample.php');

View file

@ -0,0 +1,24 @@
/**
* @provides aphront-tooltip-css
*/
.jx-tooltip-container {
position: absolute;
z-index: 18;
}
.jx-tooltip {
background: #222222;
color: #e8e8e8;
font-size: 11px;
padding: 4px;
overflow: hidden;
}
.jx-tooltip-align-E {
padding-left: 3px;
}
.jx-tooltip-align-N {
padding-bottom: 3px;
}

View file

@ -0,0 +1,64 @@
/**
* @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.");
}
}
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;
}
},
hide : function() {
if (this._node) {
JX.DOM.remove(this._node);
this._node = null;
}
}
}
});

View file

@ -0,0 +1,29 @@
/**
* @provides javelin-behavior-phabricator-tooltips
* @requires javelin-behavior
* javelin-stratcom
* phabricator-tooltip
* @javelin
*/
JX.behavior('phabricator-tooltips', function(config) {
JX.Stratcom.listen(
['mouseover', 'mouseout'],
'has-tooltip',
function (e) {
if (e.getType() == 'mouseout') {
JX.Tooltip.hide();
return;
}
var data = e.getNodeData('has-tooltip');
JX.Tooltip.show(
e.getTarget(),
data.size || 120,
data.align || 'N',
data.tip);
});
});