Skip to content

Commit 43ff24b

Browse files
chadlittlechadlittle
committed
Update form styles, implement in many places
Summary: This creates a common form look and feel across the site. I spent a bit of time working out a number of kinks in our various renderings. Some things: - Font Styles are correctly applied for form elements now. - Everything lines up! - Selects are larger, easier to read, interact. - Inputs have been squared. - Consistant CSS applied glow (try it!) - Improved Mobile Responsiveness - CSS applied to all form elements, not just Aphront - Many other minor tweaks. I tried to hit as many high profile forms as possible in an effort to increase consistency. Stopped for now and will follow up after this lands. I know Evan is not a super fan of the glow, but after working with it for a week, it's way cleaner and responsive than the OS controls. Give it a try. Test Plan: Tested many applications, forms, mobile and tablet. Reviewers: epriestley, btrahan Reviewed By: epriestley CC: aran, Korvin Differential Revision: https://secure.phabricator.com/D5860
1 parent 7533d49 commit 43ff24b

32 files changed

+414
-287
lines changed

‎src/__celerity_resource_map__.php

Lines changed: 72 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -786,7 +786,7 @@
786786
),
787787
'aphront-form-view-css' =>
788788
array(
789-
'uri' => '/res/ed8c70fa/rsrc/css/aphront/form-view.css',
789+
'uri' => '/res/d82ea207/rsrc/css/aphront/form-view.css',
790790
'type' => 'css',
791791
'requires' =>
792792
array(
@@ -858,7 +858,7 @@
858858
),
859859
'aphront-tokenizer-control-css' =>
860860
array(
861-
'uri' => '/res/6e14867e/rsrc/css/aphront/tokenizer.css',
861+
'uri' => '/res/db2c0f0e/rsrc/css/aphront/tokenizer.css',
862862
'type' => 'css',
863863
'requires' =>
864864
array(
@@ -895,7 +895,7 @@
895895
),
896896
'config-options-css' =>
897897
array(
898-
'uri' => '/res/01892229/rsrc/css/application/config/config-options.css',
898+
'uri' => '/res/be77d5a6/rsrc/css/application/config/config-options.css',
899899
'type' => 'css',
900900
'requires' =>
901901
array(
@@ -1099,7 +1099,7 @@
10991099
),
11001100
'herald-rule-editor' =>
11011101
array(
1102-
'uri' => '/res/f35d7e23/rsrc/js/application/herald/HeraldRuleEditor.js',
1102+
'uri' => '/res/f8ee0e9c/rsrc/js/application/herald/HeraldRuleEditor.js',
11031103
'type' => 'js',
11041104
'requires' =>
11051105
array(
@@ -2846,7 +2846,7 @@
28462846
),
28472847
'owners-path-editor-css' =>
28482848
array(
2849-
'uri' => '/res/4fcaabf6/rsrc/css/application/owners/owners-path-editor.css',
2849+
'uri' => '/res/1b9b5456/rsrc/css/application/owners/owners-path-editor.css',
28502850
'type' => 'css',
28512851
'requires' =>
28522852
array(
@@ -3058,7 +3058,7 @@
30583058
),
30593059
'phabricator-form-view-css' =>
30603060
array(
3061-
'uri' => '/res/676b1ad2/rsrc/css/layout/phabricator-form-view.css',
3061+
'uri' => '/res/ba05f8ba/rsrc/css/layout/phabricator-form-view.css',
30623062
'type' => 'css',
30633063
'requires' =>
30643064
array(
@@ -3099,7 +3099,7 @@
30993099
),
31003100
'phabricator-jump-nav' =>
31013101
array(
3102-
'uri' => '/res/745c0e89/rsrc/css/application/directory/phabricator-jump-nav.css',
3102+
'uri' => '/res/37ab43b8/rsrc/css/application/directory/phabricator-jump-nav.css',
31033103
'type' => 'css',
31043104
'requires' =>
31053105
array(
@@ -3134,7 +3134,7 @@
31343134
),
31353135
'phabricator-main-menu-view' =>
31363136
array(
3137-
'uri' => '/res/63316e1a/rsrc/css/application/base/main-menu-view.css',
3137+
'uri' => '/res/f4cfb781/rsrc/css/application/base/main-menu-view.css',
31383138
'type' => 'css',
31393139
'requires' =>
31403140
array(
@@ -3213,7 +3213,7 @@
32133213
),
32143214
'phabricator-object-selector-css' =>
32153215
array(
3216-
'uri' => '/res/7eb4c705/rsrc/css/application/objectselector/object-selector.css',
3216+
'uri' => '/res/502f1bb9/rsrc/css/application/objectselector/object-selector.css',
32173217
'type' => 'css',
32183218
'requires' =>
32193219
array(
@@ -3297,7 +3297,7 @@
32973297
),
32983298
'phabricator-remarkup-css' =>
32993299
array(
3300-
'uri' => '/res/f9bbca2f/rsrc/css/core/remarkup.css',
3300+
'uri' => '/res/07cab525/rsrc/css/core/remarkup.css',
33013301
'type' => 'css',
33023302
'requires' =>
33033303
array(
@@ -3684,6 +3684,15 @@
36843684
),
36853685
'disk' => '/rsrc/css/phui/phui-feed-story.css',
36863686
),
3687+
'phui-form-css' =>
3688+
array(
3689+
'uri' => '/res/e29e84fb/rsrc/css/phui/phui-form.css',
3690+
'type' => 'css',
3691+
'requires' =>
3692+
array(
3693+
),
3694+
'disk' => '/rsrc/css/phui/phui-form.css',
3695+
),
36873696
'phui-icon-view-css' =>
36883697
array(
36893698
'uri' => '/res/2aa71cc6/rsrc/css/phui/phui-icon.css',
@@ -4002,7 +4011,7 @@
40024011
), array(
40034012
'packages' =>
40044013
array(
4005-
'25d66007' =>
4014+
'56e0b740' =>
40064015
array(
40074016
'name' => 'core.pkg.css',
40084017
'symbols' =>
@@ -4044,7 +4053,7 @@
40444053
34 => 'phabricator-object-item-list-view-css',
40454054
35 => 'global-drag-and-drop-css',
40464055
),
4047-
'uri' => '/res/pkg/25d66007/core.pkg.css',
4056+
'uri' => '/res/pkg/56e0b740/core.pkg.css',
40484057
'type' => 'css',
40494058
),
40504059
'26980a1c' =>
@@ -4102,7 +4111,7 @@
41024111
'uri' => '/res/pkg/4ccfeb47/darkconsole.pkg.js',
41034112
'type' => 'js',
41044113
),
4105-
'8aaacd1b' =>
4114+
'19d2a41f' =>
41064115
array(
41074116
'name' => 'differential.pkg.css',
41084117
'symbols' =>
@@ -4121,7 +4130,7 @@
41214130
11 => 'differential-local-commits-view-css',
41224131
12 => 'inline-comment-summary-css',
41234132
),
4124-
'uri' => '/res/pkg/8aaacd1b/differential.pkg.css',
4133+
'uri' => '/res/pkg/19d2a41f/differential.pkg.css',
41254134
'type' => 'css',
41264135
),
41274136
'27c55b30' =>
@@ -4235,31 +4244,31 @@
42354244
'reverse' =>
42364245
array(
42374246
'aphront-attached-file-view-css' => '6b1fccc6',
4238-
'aphront-dialog-view-css' => '25d66007',
4239-
'aphront-error-view-css' => '25d66007',
4240-
'aphront-form-view-css' => '25d66007',
4241-
'aphront-list-filter-view-css' => '25d66007',
4242-
'aphront-pager-view-css' => '25d66007',
4243-
'aphront-panel-view-css' => '25d66007',
4244-
'aphront-table-view-css' => '25d66007',
4245-
'aphront-tokenizer-control-css' => '25d66007',
4246-
'aphront-tooltip-css' => '25d66007',
4247-
'aphront-typeahead-control-css' => '25d66007',
4248-
'differential-changeset-view-css' => '8aaacd1b',
4249-
'differential-core-view-css' => '8aaacd1b',
4247+
'aphront-dialog-view-css' => '56e0b740',
4248+
'aphront-error-view-css' => '56e0b740',
4249+
'aphront-form-view-css' => '56e0b740',
4250+
'aphront-list-filter-view-css' => '56e0b740',
4251+
'aphront-pager-view-css' => '56e0b740',
4252+
'aphront-panel-view-css' => '56e0b740',
4253+
'aphront-table-view-css' => '56e0b740',
4254+
'aphront-tokenizer-control-css' => '56e0b740',
4255+
'aphront-tooltip-css' => '56e0b740',
4256+
'aphront-typeahead-control-css' => '56e0b740',
4257+
'differential-changeset-view-css' => '19d2a41f',
4258+
'differential-core-view-css' => '19d2a41f',
42504259
'differential-inline-comment-editor' => '27c55b30',
4251-
'differential-local-commits-view-css' => '8aaacd1b',
4252-
'differential-results-table-css' => '8aaacd1b',
4253-
'differential-revision-add-comment-css' => '8aaacd1b',
4254-
'differential-revision-comment-css' => '8aaacd1b',
4255-
'differential-revision-comment-list-css' => '8aaacd1b',
4256-
'differential-revision-history-css' => '8aaacd1b',
4257-
'differential-revision-list-css' => '8aaacd1b',
4258-
'differential-table-of-contents-css' => '8aaacd1b',
4260+
'differential-local-commits-view-css' => '19d2a41f',
4261+
'differential-results-table-css' => '19d2a41f',
4262+
'differential-revision-add-comment-css' => '19d2a41f',
4263+
'differential-revision-comment-css' => '19d2a41f',
4264+
'differential-revision-comment-list-css' => '19d2a41f',
4265+
'differential-revision-history-css' => '19d2a41f',
4266+
'differential-revision-list-css' => '19d2a41f',
4267+
'differential-table-of-contents-css' => '19d2a41f',
42594268
'diffusion-commit-view-css' => 'c8ce2d88',
42604269
'diffusion-icons-css' => 'c8ce2d88',
4261-
'global-drag-and-drop-css' => '25d66007',
4262-
'inline-comment-summary-css' => '8aaacd1b',
4270+
'global-drag-and-drop-css' => '56e0b740',
4271+
'inline-comment-summary-css' => '19d2a41f',
42634272
'javelin-aphlict' => '26980a1c',
42644273
'javelin-behavior' => '7d174323',
42654274
'javelin-behavior-aphlict-dropdown' => '26980a1c',
@@ -4330,48 +4339,48 @@
43304339
'javelin-util' => '7d174323',
43314340
'javelin-vector' => '7d174323',
43324341
'javelin-workflow' => '7d174323',
4333-
'lightbox-attachment-css' => '25d66007',
4342+
'lightbox-attachment-css' => '56e0b740',
43344343
'maniphest-task-summary-css' => '6b1fccc6',
43354344
'maniphest-transaction-detail-css' => '6b1fccc6',
43364345
'phabricator-busy' => '26980a1c',
4337-
'phabricator-content-source-view-css' => '8aaacd1b',
4338-
'phabricator-core-buttons-css' => '25d66007',
4339-
'phabricator-core-css' => '25d66007',
4340-
'phabricator-crumbs-view-css' => '25d66007',
4341-
'phabricator-directory-css' => '25d66007',
4346+
'phabricator-content-source-view-css' => '19d2a41f',
4347+
'phabricator-core-buttons-css' => '56e0b740',
4348+
'phabricator-core-css' => '56e0b740',
4349+
'phabricator-crumbs-view-css' => '56e0b740',
4350+
'phabricator-directory-css' => '56e0b740',
43424351
'phabricator-drag-and-drop-file-upload' => '27c55b30',
43434352
'phabricator-dropdown-menu' => '26980a1c',
43444353
'phabricator-file-upload' => '26980a1c',
4345-
'phabricator-filetree-view-css' => '25d66007',
4346-
'phabricator-flag-css' => '25d66007',
4347-
'phabricator-form-view-css' => '25d66007',
4348-
'phabricator-header-view-css' => '25d66007',
4349-
'phabricator-jump-nav' => '25d66007',
4354+
'phabricator-filetree-view-css' => '56e0b740',
4355+
'phabricator-flag-css' => '56e0b740',
4356+
'phabricator-form-view-css' => '56e0b740',
4357+
'phabricator-header-view-css' => '56e0b740',
4358+
'phabricator-jump-nav' => '56e0b740',
43504359
'phabricator-keyboard-shortcut' => '26980a1c',
43514360
'phabricator-keyboard-shortcut-manager' => '26980a1c',
4352-
'phabricator-main-menu-view' => '25d66007',
4361+
'phabricator-main-menu-view' => '56e0b740',
43534362
'phabricator-menu-item' => '26980a1c',
4354-
'phabricator-nav-view-css' => '25d66007',
4363+
'phabricator-nav-view-css' => '56e0b740',
43554364
'phabricator-notification' => '26980a1c',
4356-
'phabricator-notification-css' => '25d66007',
4357-
'phabricator-notification-menu-css' => '25d66007',
4358-
'phabricator-object-item-list-view-css' => '25d66007',
4359-
'phabricator-object-selector-css' => '8aaacd1b',
4365+
'phabricator-notification-css' => '56e0b740',
4366+
'phabricator-notification-menu-css' => '56e0b740',
4367+
'phabricator-object-item-list-view-css' => '56e0b740',
4368+
'phabricator-object-selector-css' => '19d2a41f',
43604369
'phabricator-phtize' => '26980a1c',
43614370
'phabricator-prefab' => '26980a1c',
43624371
'phabricator-project-tag-css' => '6b1fccc6',
4363-
'phabricator-remarkup-css' => '25d66007',
4372+
'phabricator-remarkup-css' => '56e0b740',
43644373
'phabricator-shaped-request' => '27c55b30',
4365-
'phabricator-side-menu-view-css' => '25d66007',
4366-
'phabricator-standard-page-view' => '25d66007',
4374+
'phabricator-side-menu-view-css' => '56e0b740',
4375+
'phabricator-standard-page-view' => '56e0b740',
43674376
'phabricator-textareautils' => '26980a1c',
43684377
'phabricator-tooltip' => '26980a1c',
4369-
'phabricator-transaction-view-css' => '25d66007',
4370-
'phabricator-zindex-css' => '25d66007',
4371-
'sprite-apps-large-css' => '25d66007',
4372-
'sprite-gradient-css' => '25d66007',
4373-
'sprite-icon-css' => '25d66007',
4374-
'sprite-menu-css' => '25d66007',
4375-
'syntax-highlighting-css' => '25d66007',
4378+
'phabricator-transaction-view-css' => '56e0b740',
4379+
'phabricator-zindex-css' => '56e0b740',
4380+
'sprite-apps-large-css' => '56e0b740',
4381+
'sprite-gradient-css' => '56e0b740',
4382+
'sprite-icon-css' => '56e0b740',
4383+
'sprite-menu-css' => '56e0b740',
4384+
'syntax-highlighting-css' => '56e0b740',
43764385
),
43774386
));

‎src/applications/differential/controller/DifferentialDiffCreateController.php

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ public function processRequest() {
2828
}
2929

3030
$form = new AphrontFormView();
31+
$form->setFlexible(true);
3132
$arcanist_href = PhabricatorEnv::getDoclink(
3233
'article/Arcanist_User_Guide.html');
3334
$arcanist_link = phutil_tag(
@@ -63,12 +64,6 @@ public function processRequest() {
6364
id(new AphrontFormSubmitControl())
6465
->setValue(pht("Create Diff \xC2\xBB")));
6566

66-
$panel = new AphrontPanelView();
67-
$panel->setHeader(pht('Create New Diff'));
68-
$panel->setNoBackground();
69-
$panel->appendChild($form);
70-
$panel->setWidth(AphrontPanelView::WIDTH_FORM);
71-
7267
$crumbs = $this->buildApplicationCrumbs();
7368
$crumbs->addCrumb(
7469
id(new PhabricatorCrumbView())
@@ -78,11 +73,12 @@ public function processRequest() {
7873
return $this->buildApplicationPage(
7974
array(
8075
$crumbs,
81-
$panel
76+
$form
8277
),
8378
array(
8479
'title' => pht('Create Diff'),
8580
'device' => true,
81+
'dust' => true,
8682
));
8783
}
8884

‎src/applications/differential/controller/DifferentialRevisionEditController.php

Lines changed: 25 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,7 @@ public function processRequest() {
8282

8383
$form = new AphrontFormView();
8484
$form->setUser($request->getUser());
85+
$form->setFlexible(true);
8586
if ($diff) {
8687
$form->addHiddenInput('diffID', $diff->getID());
8788
}
@@ -131,25 +132,39 @@ public function processRequest() {
131132

132133
$form->appendChild($submit);
133134

134-
$panel = new AphrontPanelView();
135+
$crumbs = $this->buildApplicationCrumbs();
135136
if ($revision->getID()) {
136137
if ($diff) {
137-
$panel->setHeader(pht('Update Differential Revision'));
138+
$title = pht('Update Differential Revision');
139+
$crumbs->addCrumb(
140+
id(new PhabricatorCrumbView())
141+
->setName('D'.$revision->getID())
142+
->setHref('/differential/diff/'.$diff->getID().'/'));
138143
} else {
139-
$panel->setHeader(pht('Edit Differential Revision'));
144+
$title = pht('Edit Differential Revision');
145+
$crumbs->addCrumb(
146+
id(new PhabricatorCrumbView())
147+
->setName('D'.$revision->getID())
148+
->setHref('/D'.$revision->getID()));
140149
}
141150
} else {
142-
$panel->setHeader(pht('Create New Differential Revision'));
151+
$title = pht('Create New Differential Revision');
143152
}
144153

145-
$panel->appendChild($form);
146-
$panel->setWidth(AphrontPanelView::WIDTH_FORM);
147-
$panel->setNoBackground();
154+
$crumbs->addCrumb(
155+
id(new PhabricatorCrumbView())
156+
->setName($title)
157+
->setHref(''));
148158

149-
return $this->buildStandardPageResponse(
150-
array($error_view, $panel),
159+
return $this->buildApplicationPage(
151160
array(
152-
'title' => pht('Edit Differential Revision'),
161+
$crumbs,
162+
$error_view,
163+
$form),
164+
array(
165+
'title' => $title,
166+
'device' => true,
167+
'dust' => true,
153168
));
154169
}
155170

‎src/applications/directory/controller/PhabricatorDirectoryMainController.php

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -353,12 +353,10 @@ private function buildJumpPanel($query=null) {
353353
));
354354

355355
$panel = new AphrontPanelView();
356-
$panel->setHeader('Jump Nav');
357356
$panel->setNoBackground();
358357
// $panel->appendChild();
359358

360359
$list_filter = new AphrontListFilterView();
361-
$list_filter->appendChild(phutil_tag('h1', array(), 'Jump Nav'));
362360
$list_filter->appendChild($form);
363361

364362
$container = phutil_tag('div',

0 commit comments

Comments
 (0)