@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
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
+48
-54
+15
-15
resources/celerity/map.php
+15
-15
resources/celerity/map.php
···
7
7
*/
8
8
return array(
9
9
'names' => array(
10
-
'core.pkg.css' => 'f46ba5fa',
11
-
'core.pkg.js' => 'b00140fe',
10
+
'core.pkg.css' => 'd3651813',
11
+
'core.pkg.js' => '347cd64a',
12
12
'darkconsole.pkg.js' => '8ab24e01',
13
13
'differential.pkg.css' => '3500921f',
14
14
'differential.pkg.js' => 'c0506961',
···
27
27
'rsrc/css/aphront/panel-view.css' => '8427b78d',
28
28
'rsrc/css/aphront/phabricator-nav-view.css' => '7aeaf435',
29
29
'rsrc/css/aphront/table-view.css' => '59e2c0f8',
30
-
'rsrc/css/aphront/tokenizer.css' => '6fd738ea',
30
+
'rsrc/css/aphront/tokenizer.css' => 'c10c061e',
31
31
'rsrc/css/aphront/tooltip.css' => '7672b60f',
32
32
'rsrc/css/aphront/two-column.css' => '16ab3ad2',
33
33
'rsrc/css/aphront/typeahead-browse.css' => '343ab59f',
···
222
222
'rsrc/externals/javelin/lib/__tests__/URI.js' => '1e45fda9',
223
223
'rsrc/externals/javelin/lib/__tests__/behavior.js' => '1ea62783',
224
224
'rsrc/externals/javelin/lib/behavior.js' => '61cbc29a',
225
-
'rsrc/externals/javelin/lib/control/tokenizer/Tokenizer.js' => 'dc708b7e',
225
+
'rsrc/externals/javelin/lib/control/tokenizer/Tokenizer.js' => '3ff74d77',
226
226
'rsrc/externals/javelin/lib/control/typeahead/Typeahead.js' => '70baed2f',
227
227
'rsrc/externals/javelin/lib/control/typeahead/normalizer/TypeaheadNormalizer.js' => 'e6e25838',
228
228
'rsrc/externals/javelin/lib/control/typeahead/source/TypeaheadCompositeSource.js' => '503e17fd',
···
510
510
'aphront-pager-view-css' => '2e3539af',
511
511
'aphront-panel-view-css' => '8427b78d',
512
512
'aphront-table-view-css' => '59e2c0f8',
513
-
'aphront-tokenizer-control-css' => '6fd738ea',
513
+
'aphront-tokenizer-control-css' => 'c10c061e',
514
514
'aphront-tooltip-css' => '7672b60f',
515
515
'aphront-two-column-view-css' => '16ab3ad2',
516
516
'aphront-typeahead-control-css' => '0e403212',
···
689
689
'javelin-scrollbar' => 'eaa5b321',
690
690
'javelin-sound' => '949c0fe5',
691
691
'javelin-stratcom' => '6c53634d',
692
-
'javelin-tokenizer' => 'dc708b7e',
692
+
'javelin-tokenizer' => '3ff74d77',
693
693
'javelin-typeahead' => '70baed2f',
694
694
'javelin-typeahead-composite-source' => '503e17fd',
695
695
'javelin-typeahead-normalizer' => 'e6e25838',
···
1093
1093
'javelin-dom',
1094
1094
'phortune-credit-card-form',
1095
1095
),
1096
+
'3ff74d77' => array(
1097
+
'javelin-dom',
1098
+
'javelin-util',
1099
+
'javelin-stratcom',
1100
+
'javelin-install',
1101
+
),
1096
1102
'40a6a403' => array(
1097
1103
'javelin-install',
1098
1104
'javelin-dom',
···
1344
1350
'javelin-util',
1345
1351
'javelin-vector',
1346
1352
'javelin-stratcom',
1347
-
),
1348
-
'6fd738ea' => array(
1349
-
'aphront-typeahead-control-css',
1350
1353
),
1351
1354
'70baed2f' => array(
1352
1355
'javelin-install',
···
1761
1764
'javelin-util',
1762
1765
'phabricator-shaped-request',
1763
1766
),
1767
+
'c10c061e' => array(
1768
+
'aphront-typeahead-control-css',
1769
+
),
1764
1770
'c1700f6f' => array(
1765
1771
'javelin-install',
1766
1772
'javelin-util',
···
1833
1839
'javelin-stratcom',
1834
1840
'javelin-dom',
1835
1841
'phabricator-busy',
1836
-
),
1837
-
'dc708b7e' => array(
1838
-
'javelin-dom',
1839
-
'javelin-util',
1840
-
'javelin-stratcom',
1841
-
'javelin-install',
1842
1842
),
1843
1843
'de2e896f' => array(
1844
1844
'javelin-behavior',
+8
-26
src/view/control/AphrontTokenizerTemplateView.php
+8
-26
src/view/control/AphrontTokenizerTemplateView.php
···
69
69
$content);
70
70
71
71
$icon = id(new PHUIIconView())
72
-
->setIconFont('fa-list-ul');
72
+
->setIconFont('fa-search');
73
73
74
-
// TODO: This thing is ugly and the ugliness is not intentional.
75
-
// We have to give it text or PHUIButtonView collapses. It should likely
76
-
// just be an icon and look more integrated into the input.
77
74
$browse = id(new PHUIButtonView())
78
75
->setTag('a')
79
76
->setIcon($icon)
80
-
->addSigil('tokenizer-browse')
77
+
->addClass('tokenizer-browse-button')
81
78
->setColor(PHUIButtonView::GREY)
82
-
->setSize(PHUIButtonView::SMALL)
83
-
->setText(pht('Browse...'));
79
+
->addSigil('tokenizer-browse');
84
80
85
81
$classes = array();
86
82
$classes[] = 'jx-tokenizer-frame';
···
90
86
}
91
87
92
88
$frame = javelin_tag(
93
-
'table',
89
+
'div',
94
90
array(
95
91
'class' => implode(' ', $classes),
96
92
'sigil' => 'tokenizer-frame',
97
93
),
98
-
phutil_tag(
99
-
'tr',
100
-
array(
101
-
),
102
-
array(
103
-
phutil_tag(
104
-
'td',
105
-
array(
106
-
'class' => 'jx-tokenizer-frame-input',
107
-
),
108
-
$container),
109
-
phutil_tag(
110
-
'td',
111
-
array(
112
-
'class' => 'jx-tokenizer-frame-browse',
113
-
),
114
-
$browse),
115
-
)));
94
+
array(
95
+
$container,
96
+
$browse,
97
+
));
116
98
117
99
return $frame;
118
100
}
+24
-12
webroot/rsrc/css/aphront/tokenizer.css
+24
-12
webroot/rsrc/css/aphront/tokenizer.css
···
150
150
margin-top: 2px;
151
151
}
152
152
153
-
.jx-tokenizer-frame {
154
-
width: 100%;
153
+
.jx-tokenizer-frame .button.tokenizer-browse-button {
154
+
display: none;
155
155
}
156
156
157
-
.jx-tokenizer-frame .jx-tokenizer-frame-browse {
158
-
display: none;
157
+
.jx-tokenizer-frame.has-browse .button.tokenizer-browse-button {
158
+
display: block;
159
159
}
160
160
161
-
.has-browse .jx-tokenizer-frame-browse {
162
-
display: table-cell;
161
+
.jx-tokenizer-frame.has-browse {
162
+
position: relative;
163
163
}
164
164
165
-
.jx-tokenizer-frame td.jx-tokenizer-frame-input {
166
-
width: 100%;
165
+
.jx-tokenizer-frame.has-browse div.jx-tokenizer-container {
166
+
padding-right: 32px;
167
167
}
168
168
169
-
.jx-tokenizer-frame-browse {
170
-
width: 100px;
171
-
vertical-align: middle;
172
-
padding: 0 0 0 4px;
169
+
.button.tokenizer-browse-button {
170
+
position: absolute;
171
+
top: 1px;
172
+
right: 1px;
173
+
bottom: 1px;
174
+
border-radius: 0;
175
+
border-right: none;
176
+
border-top: none;
177
+
border-bottom: none;
178
+
padding: 0;
179
+
width: 30px;
180
+
}
181
+
182
+
.button.tokenizer-browse-button .phui-icon-view {
183
+
top: 7px;
184
+
left: 9px;
173
185
}
+1
-1
webroot/rsrc/externals/javelin/lib/control/tokenizer/Tokenizer.js
+1
-1
webroot/rsrc/externals/javelin/lib/control/tokenizer/Tokenizer.js