1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-12-24 06:20:56 +01:00

Make the browse button on the tokenizer, be on the tokenizer

Summary: Moves the Browse... button into a Search Icon on the actual tokenizer. I played with a number of icon treatments, and Search seems to convey the right attribute, other things like lists and menus didn't quite feel right to me, but feel free to push back if you hate search.

Test Plan:
Tested lots of tokens, little tokens, small screens, etc.

{F375467}

Reviewers: btrahan, epriestley

Reviewed By: epriestley

Subscribers: Korvin, epriestley

Differential Revision: https://secure.phabricator.com/D12452
This commit is contained in:
Chad Little 2015-04-18 10:58:50 -07:00
parent 50e2d5174f
commit ca388d95fd
4 changed files with 49 additions and 55 deletions

View file

@ -7,8 +7,8 @@
*/ */
return array( return array(
'names' => array( 'names' => array(
'core.pkg.css' => 'f46ba5fa', 'core.pkg.css' => 'd3651813',
'core.pkg.js' => 'b00140fe', 'core.pkg.js' => '347cd64a',
'darkconsole.pkg.js' => '8ab24e01', 'darkconsole.pkg.js' => '8ab24e01',
'differential.pkg.css' => '3500921f', 'differential.pkg.css' => '3500921f',
'differential.pkg.js' => 'c0506961', 'differential.pkg.js' => 'c0506961',
@ -27,7 +27,7 @@ return array(
'rsrc/css/aphront/panel-view.css' => '8427b78d', 'rsrc/css/aphront/panel-view.css' => '8427b78d',
'rsrc/css/aphront/phabricator-nav-view.css' => '7aeaf435', 'rsrc/css/aphront/phabricator-nav-view.css' => '7aeaf435',
'rsrc/css/aphront/table-view.css' => '59e2c0f8', 'rsrc/css/aphront/table-view.css' => '59e2c0f8',
'rsrc/css/aphront/tokenizer.css' => '6fd738ea', 'rsrc/css/aphront/tokenizer.css' => 'c10c061e',
'rsrc/css/aphront/tooltip.css' => '7672b60f', 'rsrc/css/aphront/tooltip.css' => '7672b60f',
'rsrc/css/aphront/two-column.css' => '16ab3ad2', 'rsrc/css/aphront/two-column.css' => '16ab3ad2',
'rsrc/css/aphront/typeahead-browse.css' => '343ab59f', 'rsrc/css/aphront/typeahead-browse.css' => '343ab59f',
@ -222,7 +222,7 @@ return array(
'rsrc/externals/javelin/lib/__tests__/URI.js' => '1e45fda9', 'rsrc/externals/javelin/lib/__tests__/URI.js' => '1e45fda9',
'rsrc/externals/javelin/lib/__tests__/behavior.js' => '1ea62783', 'rsrc/externals/javelin/lib/__tests__/behavior.js' => '1ea62783',
'rsrc/externals/javelin/lib/behavior.js' => '61cbc29a', 'rsrc/externals/javelin/lib/behavior.js' => '61cbc29a',
'rsrc/externals/javelin/lib/control/tokenizer/Tokenizer.js' => 'dc708b7e', 'rsrc/externals/javelin/lib/control/tokenizer/Tokenizer.js' => '3ff74d77',
'rsrc/externals/javelin/lib/control/typeahead/Typeahead.js' => '70baed2f', 'rsrc/externals/javelin/lib/control/typeahead/Typeahead.js' => '70baed2f',
'rsrc/externals/javelin/lib/control/typeahead/normalizer/TypeaheadNormalizer.js' => 'e6e25838', 'rsrc/externals/javelin/lib/control/typeahead/normalizer/TypeaheadNormalizer.js' => 'e6e25838',
'rsrc/externals/javelin/lib/control/typeahead/source/TypeaheadCompositeSource.js' => '503e17fd', 'rsrc/externals/javelin/lib/control/typeahead/source/TypeaheadCompositeSource.js' => '503e17fd',
@ -510,7 +510,7 @@ return array(
'aphront-pager-view-css' => '2e3539af', 'aphront-pager-view-css' => '2e3539af',
'aphront-panel-view-css' => '8427b78d', 'aphront-panel-view-css' => '8427b78d',
'aphront-table-view-css' => '59e2c0f8', 'aphront-table-view-css' => '59e2c0f8',
'aphront-tokenizer-control-css' => '6fd738ea', 'aphront-tokenizer-control-css' => 'c10c061e',
'aphront-tooltip-css' => '7672b60f', 'aphront-tooltip-css' => '7672b60f',
'aphront-two-column-view-css' => '16ab3ad2', 'aphront-two-column-view-css' => '16ab3ad2',
'aphront-typeahead-control-css' => '0e403212', 'aphront-typeahead-control-css' => '0e403212',
@ -689,7 +689,7 @@ return array(
'javelin-scrollbar' => 'eaa5b321', 'javelin-scrollbar' => 'eaa5b321',
'javelin-sound' => '949c0fe5', 'javelin-sound' => '949c0fe5',
'javelin-stratcom' => '6c53634d', 'javelin-stratcom' => '6c53634d',
'javelin-tokenizer' => 'dc708b7e', 'javelin-tokenizer' => '3ff74d77',
'javelin-typeahead' => '70baed2f', 'javelin-typeahead' => '70baed2f',
'javelin-typeahead-composite-source' => '503e17fd', 'javelin-typeahead-composite-source' => '503e17fd',
'javelin-typeahead-normalizer' => 'e6e25838', 'javelin-typeahead-normalizer' => 'e6e25838',
@ -1093,6 +1093,12 @@ return array(
'javelin-dom', 'javelin-dom',
'phortune-credit-card-form', 'phortune-credit-card-form',
), ),
'3ff74d77' => array(
'javelin-dom',
'javelin-util',
'javelin-stratcom',
'javelin-install',
),
'40a6a403' => array( '40a6a403' => array(
'javelin-install', 'javelin-install',
'javelin-dom', 'javelin-dom',
@ -1345,9 +1351,6 @@ return array(
'javelin-vector', 'javelin-vector',
'javelin-stratcom', 'javelin-stratcom',
), ),
'6fd738ea' => array(
'aphront-typeahead-control-css',
),
'70baed2f' => array( '70baed2f' => array(
'javelin-install', 'javelin-install',
'javelin-dom', 'javelin-dom',
@ -1761,6 +1764,9 @@ return array(
'javelin-util', 'javelin-util',
'phabricator-shaped-request', 'phabricator-shaped-request',
), ),
'c10c061e' => array(
'aphront-typeahead-control-css',
),
'c1700f6f' => array( 'c1700f6f' => array(
'javelin-install', 'javelin-install',
'javelin-util', 'javelin-util',
@ -1834,12 +1840,6 @@ return array(
'javelin-dom', 'javelin-dom',
'phabricator-busy', 'phabricator-busy',
), ),
'dc708b7e' => array(
'javelin-dom',
'javelin-util',
'javelin-stratcom',
'javelin-install',
),
'de2e896f' => array( 'de2e896f' => array(
'javelin-behavior', 'javelin-behavior',
'javelin-dom', 'javelin-dom',

View file

@ -69,18 +69,14 @@ final class AphrontTokenizerTemplateView extends AphrontView {
$content); $content);
$icon = id(new PHUIIconView()) $icon = id(new PHUIIconView())
->setIconFont('fa-list-ul'); ->setIconFont('fa-search');
// TODO: This thing is ugly and the ugliness is not intentional.
// We have to give it text or PHUIButtonView collapses. It should likely
// just be an icon and look more integrated into the input.
$browse = id(new PHUIButtonView()) $browse = id(new PHUIButtonView())
->setTag('a') ->setTag('a')
->setIcon($icon) ->setIcon($icon)
->addSigil('tokenizer-browse') ->addClass('tokenizer-browse-button')
->setColor(PHUIButtonView::GREY) ->setColor(PHUIButtonView::GREY)
->setSize(PHUIButtonView::SMALL) ->addSigil('tokenizer-browse');
->setText(pht('Browse...'));
$classes = array(); $classes = array();
$classes[] = 'jx-tokenizer-frame'; $classes[] = 'jx-tokenizer-frame';
@ -90,29 +86,15 @@ final class AphrontTokenizerTemplateView extends AphrontView {
} }
$frame = javelin_tag( $frame = javelin_tag(
'table', 'div',
array( array(
'class' => implode(' ', $classes), 'class' => implode(' ', $classes),
'sigil' => 'tokenizer-frame', 'sigil' => 'tokenizer-frame',
), ),
phutil_tag(
'tr',
array( array(
), $container,
array( $browse,
phutil_tag( ));
'td',
array(
'class' => 'jx-tokenizer-frame-input',
),
$container),
phutil_tag(
'td',
array(
'class' => 'jx-tokenizer-frame-browse',
),
$browse),
)));
return $frame; return $frame;
} }

View file

@ -150,24 +150,36 @@ a.jx-tokenizer-token-invalid:hover {
margin-top: 2px; margin-top: 2px;
} }
.jx-tokenizer-frame { .jx-tokenizer-frame .button.tokenizer-browse-button {
width: 100%;
}
.jx-tokenizer-frame .jx-tokenizer-frame-browse {
display: none; display: none;
} }
.has-browse .jx-tokenizer-frame-browse { .jx-tokenizer-frame.has-browse .button.tokenizer-browse-button {
display: table-cell; display: block;
} }
.jx-tokenizer-frame td.jx-tokenizer-frame-input { .jx-tokenizer-frame.has-browse {
width: 100%; position: relative;
} }
.jx-tokenizer-frame-browse { .jx-tokenizer-frame.has-browse div.jx-tokenizer-container {
width: 100px; padding-right: 32px;
vertical-align: middle; }
padding: 0 0 0 4px;
.button.tokenizer-browse-button {
position: absolute;
top: 1px;
right: 1px;
bottom: 1px;
border-radius: 0;
border-right: none;
border-top: none;
border-bottom: none;
padding: 0;
width: 30px;
}
.button.tokenizer-browse-button .phui-icon-view {
top: 7px;
left: 9px;
} }

View file

@ -79,7 +79,7 @@ JX.install('Tokenizer', {
this._tokenMap = {}; this._tokenMap = {};
try { try {
this._frame = JX.DOM.findAbove(this._orig, 'table', 'tokenizer-frame'); this._frame = JX.DOM.findAbove(this._orig, 'div', 'tokenizer-frame');
} catch (e) { } catch (e) {
// Ignore, this tokenizer doesn't have a frame. // Ignore, this tokenizer doesn't have a frame.
} }