From ca388d95fd166eb950f86183ee667012c65f340e Mon Sep 17 00:00:00 2001 From: Chad Little Date: Sat, 18 Apr 2015 10:58:50 -0700 Subject: [PATCH] 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 --- resources/celerity/map.php | 30 +++++++-------- .../control/AphrontTokenizerTemplateView.php | 34 ++++------------- webroot/rsrc/css/aphront/tokenizer.css | 38 ++++++++++++------- .../lib/control/tokenizer/Tokenizer.js | 2 +- 4 files changed, 49 insertions(+), 55 deletions(-) diff --git a/resources/celerity/map.php b/resources/celerity/map.php index 66965de36f..c1d6d5b04b 100644 --- a/resources/celerity/map.php +++ b/resources/celerity/map.php @@ -7,8 +7,8 @@ */ return array( 'names' => array( - 'core.pkg.css' => 'f46ba5fa', - 'core.pkg.js' => 'b00140fe', + 'core.pkg.css' => 'd3651813', + 'core.pkg.js' => '347cd64a', 'darkconsole.pkg.js' => '8ab24e01', 'differential.pkg.css' => '3500921f', 'differential.pkg.js' => 'c0506961', @@ -27,7 +27,7 @@ return array( 'rsrc/css/aphront/panel-view.css' => '8427b78d', 'rsrc/css/aphront/phabricator-nav-view.css' => '7aeaf435', '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/two-column.css' => '16ab3ad2', '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__/behavior.js' => '1ea62783', '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/normalizer/TypeaheadNormalizer.js' => 'e6e25838', 'rsrc/externals/javelin/lib/control/typeahead/source/TypeaheadCompositeSource.js' => '503e17fd', @@ -510,7 +510,7 @@ return array( 'aphront-pager-view-css' => '2e3539af', 'aphront-panel-view-css' => '8427b78d', 'aphront-table-view-css' => '59e2c0f8', - 'aphront-tokenizer-control-css' => '6fd738ea', + 'aphront-tokenizer-control-css' => 'c10c061e', 'aphront-tooltip-css' => '7672b60f', 'aphront-two-column-view-css' => '16ab3ad2', 'aphront-typeahead-control-css' => '0e403212', @@ -689,7 +689,7 @@ return array( 'javelin-scrollbar' => 'eaa5b321', 'javelin-sound' => '949c0fe5', 'javelin-stratcom' => '6c53634d', - 'javelin-tokenizer' => 'dc708b7e', + 'javelin-tokenizer' => '3ff74d77', 'javelin-typeahead' => '70baed2f', 'javelin-typeahead-composite-source' => '503e17fd', 'javelin-typeahead-normalizer' => 'e6e25838', @@ -1093,6 +1093,12 @@ return array( 'javelin-dom', 'phortune-credit-card-form', ), + '3ff74d77' => array( + 'javelin-dom', + 'javelin-util', + 'javelin-stratcom', + 'javelin-install', + ), '40a6a403' => array( 'javelin-install', 'javelin-dom', @@ -1345,9 +1351,6 @@ return array( 'javelin-vector', 'javelin-stratcom', ), - '6fd738ea' => array( - 'aphront-typeahead-control-css', - ), '70baed2f' => array( 'javelin-install', 'javelin-dom', @@ -1761,6 +1764,9 @@ return array( 'javelin-util', 'phabricator-shaped-request', ), + 'c10c061e' => array( + 'aphront-typeahead-control-css', + ), 'c1700f6f' => array( 'javelin-install', 'javelin-util', @@ -1834,12 +1840,6 @@ return array( 'javelin-dom', 'phabricator-busy', ), - 'dc708b7e' => array( - 'javelin-dom', - 'javelin-util', - 'javelin-stratcom', - 'javelin-install', - ), 'de2e896f' => array( 'javelin-behavior', 'javelin-dom', diff --git a/src/view/control/AphrontTokenizerTemplateView.php b/src/view/control/AphrontTokenizerTemplateView.php index 3a4d3dc307..fd4893dd4d 100644 --- a/src/view/control/AphrontTokenizerTemplateView.php +++ b/src/view/control/AphrontTokenizerTemplateView.php @@ -69,18 +69,14 @@ final class AphrontTokenizerTemplateView extends AphrontView { $content); $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()) ->setTag('a') ->setIcon($icon) - ->addSigil('tokenizer-browse') + ->addClass('tokenizer-browse-button') ->setColor(PHUIButtonView::GREY) - ->setSize(PHUIButtonView::SMALL) - ->setText(pht('Browse...')); + ->addSigil('tokenizer-browse'); $classes = array(); $classes[] = 'jx-tokenizer-frame'; @@ -90,29 +86,15 @@ final class AphrontTokenizerTemplateView extends AphrontView { } $frame = javelin_tag( - 'table', + 'div', array( 'class' => implode(' ', $classes), 'sigil' => 'tokenizer-frame', ), - phutil_tag( - 'tr', - array( - ), - array( - phutil_tag( - 'td', - array( - 'class' => 'jx-tokenizer-frame-input', - ), - $container), - phutil_tag( - 'td', - array( - 'class' => 'jx-tokenizer-frame-browse', - ), - $browse), - ))); + array( + $container, + $browse, + )); return $frame; } diff --git a/webroot/rsrc/css/aphront/tokenizer.css b/webroot/rsrc/css/aphront/tokenizer.css index 81ba64bb6c..5aa38f8eca 100644 --- a/webroot/rsrc/css/aphront/tokenizer.css +++ b/webroot/rsrc/css/aphront/tokenizer.css @@ -150,24 +150,36 @@ a.jx-tokenizer-token-invalid:hover { margin-top: 2px; } -.jx-tokenizer-frame { - width: 100%; -} - -.jx-tokenizer-frame .jx-tokenizer-frame-browse { +.jx-tokenizer-frame .button.tokenizer-browse-button { display: none; } -.has-browse .jx-tokenizer-frame-browse { - display: table-cell; +.jx-tokenizer-frame.has-browse .button.tokenizer-browse-button { + display: block; } -.jx-tokenizer-frame td.jx-tokenizer-frame-input { - width: 100%; +.jx-tokenizer-frame.has-browse { + position: relative; } -.jx-tokenizer-frame-browse { - width: 100px; - vertical-align: middle; - padding: 0 0 0 4px; +.jx-tokenizer-frame.has-browse div.jx-tokenizer-container { + padding-right: 32px; +} + +.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; } diff --git a/webroot/rsrc/externals/javelin/lib/control/tokenizer/Tokenizer.js b/webroot/rsrc/externals/javelin/lib/control/tokenizer/Tokenizer.js index 8de7913368..60f7df8063 100644 --- a/webroot/rsrc/externals/javelin/lib/control/tokenizer/Tokenizer.js +++ b/webroot/rsrc/externals/javelin/lib/control/tokenizer/Tokenizer.js @@ -79,7 +79,7 @@ JX.install('Tokenizer', { this._tokenMap = {}; try { - this._frame = JX.DOM.findAbove(this._orig, 'table', 'tokenizer-frame'); + this._frame = JX.DOM.findAbove(this._orig, 'div', 'tokenizer-frame'); } catch (e) { // Ignore, this tokenizer doesn't have a frame. }