From 43ff24b0f3a63c2d2e74ff7123c50c6d3d5935aa Mon Sep 17 00:00:00 2001 From: Chad Little Date: Tue, 7 May 2013 14:07:06 -0700 Subject: [PATCH] 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 --- src/__celerity_resource_map__.php | 135 ++++++++++-------- .../DifferentialDiffCreateController.php | 10 +- .../DifferentialRevisionEditController.php | 35 +++-- .../PhabricatorDirectoryMainController.php | 2 - .../herald/controller/HeraldNewController.php | 17 +-- .../controller/HeraldRuleController.php | 13 +- .../HeraldTestConsoleController.php | 14 +- .../PhabricatorMailingListsEditController.php | 10 +- .../ManiphestTaskEditController.php | 8 +- .../PhabricatorOwnersEditController.php | 21 +-- .../blog/PhameBlogEditController.php | 4 - .../post/PhamePostEditController.php | 3 - .../post/PhamePostNewController.php | 3 - .../controller/PhrictionEditController.php | 9 +- .../PhabricatorProjectCreateController.php | 12 +- ...habricatorProjectMembersEditController.php | 19 ++- ...habricatorProjectProfileEditController.php | 9 +- .../PhabricatorRepositoryCreateController.php | 17 +-- .../PhabricatorRepositoryEditController.php | 35 +++-- .../PhabricatorObjectSelectorDialog.php | 11 +- src/view/page/PhabricatorStandardPageView.php | 1 + webroot/rsrc/css/aphront/form-view.css | 68 ++++----- webroot/rsrc/css/aphront/tokenizer.css | 67 ++++----- .../css/application/base/main-menu-view.css | 15 +- .../css/application/config/config-options.css | 1 + .../directory/phabricator-jump-nav.css | 6 +- .../objectselector/object-selector.css | 1 + .../application/owners/owners-path-editor.css | 4 +- webroot/rsrc/css/core/remarkup.css | 15 +- .../rsrc/css/layout/phabricator-form-view.css | 10 +- webroot/rsrc/css/phui/phui-form.css | 126 ++++++++++++++++ .../js/application/herald/HeraldRuleEditor.js | 2 +- 32 files changed, 415 insertions(+), 288 deletions(-) create mode 100644 webroot/rsrc/css/phui/phui-form.css diff --git a/src/__celerity_resource_map__.php b/src/__celerity_resource_map__.php index a321cc021d..08f25f4af9 100644 --- a/src/__celerity_resource_map__.php +++ b/src/__celerity_resource_map__.php @@ -786,7 +786,7 @@ celerity_register_resource_map(array( ), 'aphront-form-view-css' => array( - 'uri' => '/res/ed8c70fa/rsrc/css/aphront/form-view.css', + 'uri' => '/res/d82ea207/rsrc/css/aphront/form-view.css', 'type' => 'css', 'requires' => array( @@ -858,7 +858,7 @@ celerity_register_resource_map(array( ), 'aphront-tokenizer-control-css' => array( - 'uri' => '/res/6e14867e/rsrc/css/aphront/tokenizer.css', + 'uri' => '/res/db2c0f0e/rsrc/css/aphront/tokenizer.css', 'type' => 'css', 'requires' => array( @@ -895,7 +895,7 @@ celerity_register_resource_map(array( ), 'config-options-css' => array( - 'uri' => '/res/01892229/rsrc/css/application/config/config-options.css', + 'uri' => '/res/be77d5a6/rsrc/css/application/config/config-options.css', 'type' => 'css', 'requires' => array( @@ -1099,7 +1099,7 @@ celerity_register_resource_map(array( ), 'herald-rule-editor' => array( - 'uri' => '/res/f35d7e23/rsrc/js/application/herald/HeraldRuleEditor.js', + 'uri' => '/res/f8ee0e9c/rsrc/js/application/herald/HeraldRuleEditor.js', 'type' => 'js', 'requires' => array( @@ -2846,7 +2846,7 @@ celerity_register_resource_map(array( ), 'owners-path-editor-css' => array( - 'uri' => '/res/4fcaabf6/rsrc/css/application/owners/owners-path-editor.css', + 'uri' => '/res/1b9b5456/rsrc/css/application/owners/owners-path-editor.css', 'type' => 'css', 'requires' => array( @@ -3058,7 +3058,7 @@ celerity_register_resource_map(array( ), 'phabricator-form-view-css' => array( - 'uri' => '/res/676b1ad2/rsrc/css/layout/phabricator-form-view.css', + 'uri' => '/res/ba05f8ba/rsrc/css/layout/phabricator-form-view.css', 'type' => 'css', 'requires' => array( @@ -3099,7 +3099,7 @@ celerity_register_resource_map(array( ), 'phabricator-jump-nav' => array( - 'uri' => '/res/745c0e89/rsrc/css/application/directory/phabricator-jump-nav.css', + 'uri' => '/res/37ab43b8/rsrc/css/application/directory/phabricator-jump-nav.css', 'type' => 'css', 'requires' => array( @@ -3134,7 +3134,7 @@ celerity_register_resource_map(array( ), 'phabricator-main-menu-view' => array( - 'uri' => '/res/63316e1a/rsrc/css/application/base/main-menu-view.css', + 'uri' => '/res/f4cfb781/rsrc/css/application/base/main-menu-view.css', 'type' => 'css', 'requires' => array( @@ -3213,7 +3213,7 @@ celerity_register_resource_map(array( ), 'phabricator-object-selector-css' => array( - 'uri' => '/res/7eb4c705/rsrc/css/application/objectselector/object-selector.css', + 'uri' => '/res/502f1bb9/rsrc/css/application/objectselector/object-selector.css', 'type' => 'css', 'requires' => array( @@ -3297,7 +3297,7 @@ celerity_register_resource_map(array( ), 'phabricator-remarkup-css' => array( - 'uri' => '/res/f9bbca2f/rsrc/css/core/remarkup.css', + 'uri' => '/res/07cab525/rsrc/css/core/remarkup.css', 'type' => 'css', 'requires' => array( @@ -3684,6 +3684,15 @@ celerity_register_resource_map(array( ), 'disk' => '/rsrc/css/phui/phui-feed-story.css', ), + 'phui-form-css' => + array( + 'uri' => '/res/e29e84fb/rsrc/css/phui/phui-form.css', + 'type' => 'css', + 'requires' => + array( + ), + 'disk' => '/rsrc/css/phui/phui-form.css', + ), 'phui-icon-view-css' => array( 'uri' => '/res/2aa71cc6/rsrc/css/phui/phui-icon.css', @@ -4002,7 +4011,7 @@ celerity_register_resource_map(array( ), array( 'packages' => array( - '25d66007' => + '56e0b740' => array( 'name' => 'core.pkg.css', 'symbols' => @@ -4044,7 +4053,7 @@ celerity_register_resource_map(array( 34 => 'phabricator-object-item-list-view-css', 35 => 'global-drag-and-drop-css', ), - 'uri' => '/res/pkg/25d66007/core.pkg.css', + 'uri' => '/res/pkg/56e0b740/core.pkg.css', 'type' => 'css', ), '26980a1c' => @@ -4102,7 +4111,7 @@ celerity_register_resource_map(array( 'uri' => '/res/pkg/4ccfeb47/darkconsole.pkg.js', 'type' => 'js', ), - '8aaacd1b' => + '19d2a41f' => array( 'name' => 'differential.pkg.css', 'symbols' => @@ -4121,7 +4130,7 @@ celerity_register_resource_map(array( 11 => 'differential-local-commits-view-css', 12 => 'inline-comment-summary-css', ), - 'uri' => '/res/pkg/8aaacd1b/differential.pkg.css', + 'uri' => '/res/pkg/19d2a41f/differential.pkg.css', 'type' => 'css', ), '27c55b30' => @@ -4235,31 +4244,31 @@ celerity_register_resource_map(array( 'reverse' => array( 'aphront-attached-file-view-css' => '6b1fccc6', - 'aphront-dialog-view-css' => '25d66007', - 'aphront-error-view-css' => '25d66007', - 'aphront-form-view-css' => '25d66007', - 'aphront-list-filter-view-css' => '25d66007', - 'aphront-pager-view-css' => '25d66007', - 'aphront-panel-view-css' => '25d66007', - 'aphront-table-view-css' => '25d66007', - 'aphront-tokenizer-control-css' => '25d66007', - 'aphront-tooltip-css' => '25d66007', - 'aphront-typeahead-control-css' => '25d66007', - 'differential-changeset-view-css' => '8aaacd1b', - 'differential-core-view-css' => '8aaacd1b', + 'aphront-dialog-view-css' => '56e0b740', + 'aphront-error-view-css' => '56e0b740', + 'aphront-form-view-css' => '56e0b740', + 'aphront-list-filter-view-css' => '56e0b740', + 'aphront-pager-view-css' => '56e0b740', + 'aphront-panel-view-css' => '56e0b740', + 'aphront-table-view-css' => '56e0b740', + 'aphront-tokenizer-control-css' => '56e0b740', + 'aphront-tooltip-css' => '56e0b740', + 'aphront-typeahead-control-css' => '56e0b740', + 'differential-changeset-view-css' => '19d2a41f', + 'differential-core-view-css' => '19d2a41f', 'differential-inline-comment-editor' => '27c55b30', - 'differential-local-commits-view-css' => '8aaacd1b', - 'differential-results-table-css' => '8aaacd1b', - 'differential-revision-add-comment-css' => '8aaacd1b', - 'differential-revision-comment-css' => '8aaacd1b', - 'differential-revision-comment-list-css' => '8aaacd1b', - 'differential-revision-history-css' => '8aaacd1b', - 'differential-revision-list-css' => '8aaacd1b', - 'differential-table-of-contents-css' => '8aaacd1b', + 'differential-local-commits-view-css' => '19d2a41f', + 'differential-results-table-css' => '19d2a41f', + 'differential-revision-add-comment-css' => '19d2a41f', + 'differential-revision-comment-css' => '19d2a41f', + 'differential-revision-comment-list-css' => '19d2a41f', + 'differential-revision-history-css' => '19d2a41f', + 'differential-revision-list-css' => '19d2a41f', + 'differential-table-of-contents-css' => '19d2a41f', 'diffusion-commit-view-css' => 'c8ce2d88', 'diffusion-icons-css' => 'c8ce2d88', - 'global-drag-and-drop-css' => '25d66007', - 'inline-comment-summary-css' => '8aaacd1b', + 'global-drag-and-drop-css' => '56e0b740', + 'inline-comment-summary-css' => '19d2a41f', 'javelin-aphlict' => '26980a1c', 'javelin-behavior' => '7d174323', 'javelin-behavior-aphlict-dropdown' => '26980a1c', @@ -4330,48 +4339,48 @@ celerity_register_resource_map(array( 'javelin-util' => '7d174323', 'javelin-vector' => '7d174323', 'javelin-workflow' => '7d174323', - 'lightbox-attachment-css' => '25d66007', + 'lightbox-attachment-css' => '56e0b740', 'maniphest-task-summary-css' => '6b1fccc6', 'maniphest-transaction-detail-css' => '6b1fccc6', 'phabricator-busy' => '26980a1c', - 'phabricator-content-source-view-css' => '8aaacd1b', - 'phabricator-core-buttons-css' => '25d66007', - 'phabricator-core-css' => '25d66007', - 'phabricator-crumbs-view-css' => '25d66007', - 'phabricator-directory-css' => '25d66007', + 'phabricator-content-source-view-css' => '19d2a41f', + 'phabricator-core-buttons-css' => '56e0b740', + 'phabricator-core-css' => '56e0b740', + 'phabricator-crumbs-view-css' => '56e0b740', + 'phabricator-directory-css' => '56e0b740', 'phabricator-drag-and-drop-file-upload' => '27c55b30', 'phabricator-dropdown-menu' => '26980a1c', 'phabricator-file-upload' => '26980a1c', - 'phabricator-filetree-view-css' => '25d66007', - 'phabricator-flag-css' => '25d66007', - 'phabricator-form-view-css' => '25d66007', - 'phabricator-header-view-css' => '25d66007', - 'phabricator-jump-nav' => '25d66007', + 'phabricator-filetree-view-css' => '56e0b740', + 'phabricator-flag-css' => '56e0b740', + 'phabricator-form-view-css' => '56e0b740', + 'phabricator-header-view-css' => '56e0b740', + 'phabricator-jump-nav' => '56e0b740', 'phabricator-keyboard-shortcut' => '26980a1c', 'phabricator-keyboard-shortcut-manager' => '26980a1c', - 'phabricator-main-menu-view' => '25d66007', + 'phabricator-main-menu-view' => '56e0b740', 'phabricator-menu-item' => '26980a1c', - 'phabricator-nav-view-css' => '25d66007', + 'phabricator-nav-view-css' => '56e0b740', 'phabricator-notification' => '26980a1c', - 'phabricator-notification-css' => '25d66007', - 'phabricator-notification-menu-css' => '25d66007', - 'phabricator-object-item-list-view-css' => '25d66007', - 'phabricator-object-selector-css' => '8aaacd1b', + 'phabricator-notification-css' => '56e0b740', + 'phabricator-notification-menu-css' => '56e0b740', + 'phabricator-object-item-list-view-css' => '56e0b740', + 'phabricator-object-selector-css' => '19d2a41f', 'phabricator-phtize' => '26980a1c', 'phabricator-prefab' => '26980a1c', 'phabricator-project-tag-css' => '6b1fccc6', - 'phabricator-remarkup-css' => '25d66007', + 'phabricator-remarkup-css' => '56e0b740', 'phabricator-shaped-request' => '27c55b30', - 'phabricator-side-menu-view-css' => '25d66007', - 'phabricator-standard-page-view' => '25d66007', + 'phabricator-side-menu-view-css' => '56e0b740', + 'phabricator-standard-page-view' => '56e0b740', 'phabricator-textareautils' => '26980a1c', 'phabricator-tooltip' => '26980a1c', - 'phabricator-transaction-view-css' => '25d66007', - 'phabricator-zindex-css' => '25d66007', - 'sprite-apps-large-css' => '25d66007', - 'sprite-gradient-css' => '25d66007', - 'sprite-icon-css' => '25d66007', - 'sprite-menu-css' => '25d66007', - 'syntax-highlighting-css' => '25d66007', + 'phabricator-transaction-view-css' => '56e0b740', + 'phabricator-zindex-css' => '56e0b740', + 'sprite-apps-large-css' => '56e0b740', + 'sprite-gradient-css' => '56e0b740', + 'sprite-icon-css' => '56e0b740', + 'sprite-menu-css' => '56e0b740', + 'syntax-highlighting-css' => '56e0b740', ), )); diff --git a/src/applications/differential/controller/DifferentialDiffCreateController.php b/src/applications/differential/controller/DifferentialDiffCreateController.php index a335727d17..121e67ab63 100644 --- a/src/applications/differential/controller/DifferentialDiffCreateController.php +++ b/src/applications/differential/controller/DifferentialDiffCreateController.php @@ -28,6 +28,7 @@ final class DifferentialDiffCreateController extends DifferentialController { } $form = new AphrontFormView(); + $form->setFlexible(true); $arcanist_href = PhabricatorEnv::getDoclink( 'article/Arcanist_User_Guide.html'); $arcanist_link = phutil_tag( @@ -63,12 +64,6 @@ final class DifferentialDiffCreateController extends DifferentialController { id(new AphrontFormSubmitControl()) ->setValue(pht("Create Diff \xC2\xBB"))); - $panel = new AphrontPanelView(); - $panel->setHeader(pht('Create New Diff')); - $panel->setNoBackground(); - $panel->appendChild($form); - $panel->setWidth(AphrontPanelView::WIDTH_FORM); - $crumbs = $this->buildApplicationCrumbs(); $crumbs->addCrumb( id(new PhabricatorCrumbView()) @@ -78,11 +73,12 @@ final class DifferentialDiffCreateController extends DifferentialController { return $this->buildApplicationPage( array( $crumbs, - $panel + $form ), array( 'title' => pht('Create Diff'), 'device' => true, + 'dust' => true, )); } diff --git a/src/applications/differential/controller/DifferentialRevisionEditController.php b/src/applications/differential/controller/DifferentialRevisionEditController.php index 3dcc0f4542..c715879cf9 100644 --- a/src/applications/differential/controller/DifferentialRevisionEditController.php +++ b/src/applications/differential/controller/DifferentialRevisionEditController.php @@ -82,6 +82,7 @@ final class DifferentialRevisionEditController extends DifferentialController { $form = new AphrontFormView(); $form->setUser($request->getUser()); + $form->setFlexible(true); if ($diff) { $form->addHiddenInput('diffID', $diff->getID()); } @@ -131,25 +132,39 @@ final class DifferentialRevisionEditController extends DifferentialController { $form->appendChild($submit); - $panel = new AphrontPanelView(); + $crumbs = $this->buildApplicationCrumbs(); if ($revision->getID()) { if ($diff) { - $panel->setHeader(pht('Update Differential Revision')); + $title = pht('Update Differential Revision'); + $crumbs->addCrumb( + id(new PhabricatorCrumbView()) + ->setName('D'.$revision->getID()) + ->setHref('/differential/diff/'.$diff->getID().'/')); } else { - $panel->setHeader(pht('Edit Differential Revision')); + $title = pht('Edit Differential Revision'); + $crumbs->addCrumb( + id(new PhabricatorCrumbView()) + ->setName('D'.$revision->getID()) + ->setHref('/D'.$revision->getID())); } } else { - $panel->setHeader(pht('Create New Differential Revision')); + $title = pht('Create New Differential Revision'); } - $panel->appendChild($form); - $panel->setWidth(AphrontPanelView::WIDTH_FORM); - $panel->setNoBackground(); + $crumbs->addCrumb( + id(new PhabricatorCrumbView()) + ->setName($title) + ->setHref('')); - return $this->buildStandardPageResponse( - array($error_view, $panel), + return $this->buildApplicationPage( array( - 'title' => pht('Edit Differential Revision'), + $crumbs, + $error_view, + $form), + array( + 'title' => $title, + 'device' => true, + 'dust' => true, )); } diff --git a/src/applications/directory/controller/PhabricatorDirectoryMainController.php b/src/applications/directory/controller/PhabricatorDirectoryMainController.php index 0fa89e9052..a19188763f 100644 --- a/src/applications/directory/controller/PhabricatorDirectoryMainController.php +++ b/src/applications/directory/controller/PhabricatorDirectoryMainController.php @@ -353,12 +353,10 @@ final class PhabricatorDirectoryMainController )); $panel = new AphrontPanelView(); - $panel->setHeader('Jump Nav'); $panel->setNoBackground(); // $panel->appendChild(); $list_filter = new AphrontListFilterView(); - $list_filter->appendChild(phutil_tag('h1', array(), 'Jump Nav')); $list_filter->appendChild($form); $container = phutil_tag('div', diff --git a/src/applications/herald/controller/HeraldNewController.php b/src/applications/herald/controller/HeraldNewController.php index fdedda66e2..327379b517 100644 --- a/src/applications/herald/controller/HeraldNewController.php +++ b/src/applications/herald/controller/HeraldNewController.php @@ -57,6 +57,7 @@ final class HeraldNewController extends HeraldController { $form = id(new AphrontFormView()) ->setUser($user) ->setAction('/herald/rule/') + ->setFlexible(true) ->appendChild( id(new AphrontFormSelectControl()) ->setLabel(pht('New rule for')) @@ -69,20 +70,20 @@ final class HeraldNewController extends HeraldController { ->setValue(pht('Create Rule')) ->addCancelButton('/herald/view/'.$this->contentType.'/')); - $panel = new AphrontPanelView(); - $panel->setHeader(pht('Create New Herald Rule')); - $panel->setWidth(AphrontPanelView::WIDTH_FULL); - $panel->appendChild($form); - $panel->setNoBackground(); + $header = new PhabricatorHeaderView(); + $header->setHeader(pht('Create New Herald Rule')); $nav = $this->renderNav(); $nav->selectFilter('new'); - $nav->appendChild($panel); + $nav->appendChild($header); + $nav->appendChild($form); - return $this->buildStandardPageResponse( + return $this->buildApplicationPage( $nav, array( - 'title' => 'Create Herald Rule', + 'title' => pht('Create Herald Rule'), + 'device' => true, + 'dust' => true, )); } diff --git a/src/applications/herald/controller/HeraldRuleController.php b/src/applications/herald/controller/HeraldRuleController.php index 79c4731499..fa61e4f946 100644 --- a/src/applications/herald/controller/HeraldRuleController.php +++ b/src/applications/herald/controller/HeraldRuleController.php @@ -171,13 +171,11 @@ final class HeraldRuleController extends HeraldController { $this->setupEditorBehavior($rule, $handles); - $panel = new AphrontPanelView(); - $panel->setHeader( + $header = new PhabricatorHeaderView(); + $header->setHeader( $rule->getID() ? pht('Edit Herald Rule') : pht('Create Herald Rule')); - $panel->appendChild($form); - $panel->setNoBackground(); $nav = $this->renderNav(); $nav->selectFilter( @@ -185,13 +183,14 @@ final class HeraldRuleController extends HeraldController { $nav->appendChild( array( $error_view, - $panel, + $header, + $form, )); - return $this->buildStandardPageResponse( + return $this->buildApplicationPage( $nav, array( - 'title' => 'Edit Rule', + 'title' => pht('Edit Rule'), )); } diff --git a/src/applications/herald/controller/HeraldTestConsoleController.php b/src/applications/herald/controller/HeraldTestConsoleController.php index f0225d7081..7d4836c508 100644 --- a/src/applications/herald/controller/HeraldTestConsoleController.php +++ b/src/applications/herald/controller/HeraldTestConsoleController.php @@ -111,18 +111,12 @@ final class HeraldTestConsoleController extends HeraldController { id(new AphrontFormSubmitControl()) ->setValue(pht('Test Rules'))); - $panel = new AphrontPanelView(); - $panel->setHeader(pht('Test Herald Rules')); - $panel->setWidth(AphrontPanelView::WIDTH_FULL); - $panel->appendChild($form); - $panel->setNoBackground(); - $nav = $this->renderNav(); $nav->selectFilter('test'); $nav->appendChild( array( $error_view, - $panel, + $form, )); $crumbs = id($this->buildApplicationCrumbs()) @@ -135,10 +129,12 @@ final class HeraldTestConsoleController extends HeraldController { ->setName(pht('Test Console'))); $nav->setCrumbs($crumbs); - return $this->buildStandardPageResponse( + return $this->buildApplicationPage( $nav, array( - 'title' => 'Test Console', + 'title' => pht('Test Console'), + 'dust' => true, + 'device' => true, )); } diff --git a/src/applications/mailinglists/controller/PhabricatorMailingListsEditController.php b/src/applications/mailinglists/controller/PhabricatorMailingListsEditController.php index 26146827df..be5f9dac65 100644 --- a/src/applications/mailinglists/controller/PhabricatorMailingListsEditController.php +++ b/src/applications/mailinglists/controller/PhabricatorMailingListsEditController.php @@ -114,34 +114,28 @@ final class PhabricatorMailingListsEditController ->setValue(pht('Save')) ->addCancelButton($this->getApplicationURI())); - $panel = new AphrontPanelView(); if ($list->getID()) { - $panel->setHeader(pht('Edit Mailing List')); $crumbs->addCrumb( id(new PhabricatorCrumbView()) ->setName(pht('Edit Mailing List')) ->setHref($this->getApplicationURI('/edit/'.$list->getID().'/'))); } else { - $panel->setHeader(pht('Create Mailing List')); $crumbs->addCrumb( id(new PhabricatorCrumbView()) ->setName(pht('Create Mailing List')) ->setHref($this->getApplicationURI('/edit/'))); } - $panel->appendChild($form); - $panel->setWidth(AphrontPanelView::WIDTH_FORM); - $panel->setNoBackground(); - return $this->buildApplicationPage( array( $crumbs, $error_view, - $panel, + $form, ), array( 'title' => pht('Edit Mailing List'), 'device' => true, + 'dust' => true, )); } diff --git a/src/applications/maniphest/controller/ManiphestTaskEditController.php b/src/applications/maniphest/controller/ManiphestTaskEditController.php index 4f3fce1a77..afde05d34a 100644 --- a/src/applications/maniphest/controller/ManiphestTaskEditController.php +++ b/src/applications/maniphest/controller/ManiphestTaskEditController.php @@ -355,6 +355,7 @@ final class ManiphestTaskEditController extends ManiphestController { $project_tokenizer_id = celerity_generate_unique_node_id(); $form = new AphrontFormView(); + $form->setFlexible(true); $form ->setUser($user) ->setAction($request->getRequestURI()->getPath()) @@ -499,11 +500,6 @@ final class ManiphestTaskEditController extends ManiphestController { ->addCancelButton($cancel_uri) ->setValue($button_name)); - $panel = new AphrontPanelView(); - $panel->setWidth(AphrontPanelView::WIDTH_FULL); - $panel->setHeader($header_name); - $panel->appendChild($form); - $panel->setNoBackground(); $inst1 = pht('Description Preview'); $inst2 = pht('Loading preview...'); @@ -550,7 +546,7 @@ final class ManiphestTaskEditController extends ManiphestController { array( $crumbs, $error_view, - $panel, + $form, $description_preview_panel, ), array( diff --git a/src/applications/owners/controller/PhabricatorOwnersEditController.php b/src/applications/owners/controller/PhabricatorOwnersEditController.php index 1be18ddd8c..99249c8376 100644 --- a/src/applications/owners/controller/PhabricatorOwnersEditController.php +++ b/src/applications/owners/controller/PhabricatorOwnersEditController.php @@ -134,10 +134,10 @@ final class PhabricatorOwnersEditController $token_all_owners = mpull($token_all_owners, 'getFullName'); if ($package->getID()) { - $title = 'Edit Package'; + $title = pht('Edit Package'); $side_nav_filter = 'edit/'.$this->id; } else { - $title = 'New Package'; + $title = pht('New Package'); $side_nav_filter = 'new'; } $this->setSideNavFilter($side_nav_filter); @@ -181,6 +181,7 @@ final class PhabricatorOwnersEditController $form = id(new AphrontFormView()) ->setUser($user) + ->setFlexible(true) ->appendChild( id(new AphrontFormTextControl()) ->setLabel('Name') @@ -249,16 +250,18 @@ final class PhabricatorOwnersEditController ->addCancelButton($cancel_uri) ->setValue('Save Package')); - $panel = new AphrontPanelView(); - $panel->setHeader($title); - $panel->setWidth(AphrontPanelView::WIDTH_WIDE); - $panel->appendChild($error_view); - $panel->appendChild($form); + $header = id(new PhabricatorHeaderView()) + ->setHeader($title); - return $this->buildStandardPageResponse( - $panel, + return $this->buildApplicationPage( + array( + $error_view, + $header, + $form, + ), array( 'title' => $title, + 'dust' => true, )); } diff --git a/src/applications/phame/controller/blog/PhameBlogEditController.php b/src/applications/phame/controller/blog/PhameBlogEditController.php index 987ffe63e0..fa23ff1c42 100644 --- a/src/applications/phame/controller/blog/PhameBlogEditController.php +++ b/src/applications/phame/controller/blog/PhameBlogEditController.php @@ -171,9 +171,6 @@ final class PhameBlogEditController $error_view = null; } - $header = id(new PhabricatorHeaderView()) - ->setHeader($page_title); - $crumbs = $this->buildApplicationCrumbs(); $crumbs->addCrumb( id(new PhabricatorCrumbView()) @@ -185,7 +182,6 @@ final class PhameBlogEditController $nav->appendChild( array( $crumbs, - $header, $error_view, $form, )); diff --git a/src/applications/phame/controller/post/PhamePostEditController.php b/src/applications/phame/controller/post/PhamePostEditController.php index eddc903604..e72a949834 100644 --- a/src/applications/phame/controller/post/PhamePostEditController.php +++ b/src/applications/phame/controller/post/PhamePostEditController.php @@ -166,8 +166,6 @@ final class PhamePostEditController 'uri' => '/phame/post/preview/', )); - $header = id(new PhabricatorHeaderView())->setHeader($page_title); - if ($errors) { $error_view = id(new AphrontErrorView()) ->setTitle(pht('Errors saving post.')) @@ -186,7 +184,6 @@ final class PhamePostEditController $nav->appendChild( array( $crumbs, - $header, $error_view, $form, $preview_panel, diff --git a/src/applications/phame/controller/post/PhamePostNewController.php b/src/applications/phame/controller/post/PhamePostNewController.php index 1d43448748..407d52a8a2 100644 --- a/src/applications/phame/controller/post/PhamePostNewController.php +++ b/src/applications/phame/controller/post/PhamePostNewController.php @@ -75,9 +75,6 @@ final class PhamePostNewController extends PhameController { ->setHref($view_uri)); $nav->appendChild($crumbs); - $nav->appendChild( - id(new PhabricatorHeaderView())->setHeader($title)); - if (!$blogs) { $notification = id(new AphrontErrorView()) ->setSeverity(AphrontErrorView::SEVERITY_NODATA) diff --git a/src/applications/phriction/controller/PhrictionEditController.php b/src/applications/phriction/controller/PhrictionEditController.php index fdd6c721d7..afa5fee566 100644 --- a/src/applications/phriction/controller/PhrictionEditController.php +++ b/src/applications/phriction/controller/PhrictionEditController.php @@ -226,10 +226,8 @@ final class PhrictionEditController ->addCancelButton($cancel_uri) ->setValue($submit_button)); - $panel = id(new AphrontPanelView()) - ->setNoBackground() - ->setHeader($panel_header) - ->appendChild($form); + $header = id(new PhabricatorHeaderView()) + ->setHeader($panel_header); $preview_panel = hsprintf( '
@@ -255,7 +253,8 @@ final class PhrictionEditController array( $draft_note, $error_view, - $panel, + $header, + $form, $preview_panel, ), array( diff --git a/src/applications/project/controller/PhabricatorProjectCreateController.php b/src/applications/project/controller/PhabricatorProjectCreateController.php index b9e1620a2d..2cfc972faa 100644 --- a/src/applications/project/controller/PhabricatorProjectCreateController.php +++ b/src/applications/project/controller/PhabricatorProjectCreateController.php @@ -107,13 +107,6 @@ final class PhabricatorProjectCreateController ->setValue(pht('Create')) ->addCancelButton('/project/')); - $panel = new AphrontPanelView(); - $panel - ->setWidth(AphrontPanelView::WIDTH_FORM) - ->setHeader(pht('Create a New Project')) - ->setNoBackground() - ->appendChild($form); - $crumbs = $this->buildApplicationCrumbs($this->buildSideNavView()); $crumbs->addCrumb( id(new PhabricatorCrumbView()) @@ -124,11 +117,12 @@ final class PhabricatorProjectCreateController array( $crumbs, $error_view, - $panel, + $form, ), array( 'title' => pht('Create New Project'), - 'device' => true + 'device' => true, + 'dust' => true, )); } } diff --git a/src/applications/project/controller/PhabricatorProjectMembersEditController.php b/src/applications/project/controller/PhabricatorProjectMembersEditController.php index 45935ca5a9..e604900645 100644 --- a/src/applications/project/controller/PhabricatorProjectMembersEditController.php +++ b/src/applications/project/controller/PhabricatorProjectMembersEditController.php @@ -91,6 +91,7 @@ final class PhabricatorProjectMembersEditController $form = new AphrontFormView(); $form ->setUser($user) + ->setFlexible(true) ->appendChild( id(new AphrontFormTokenizerControl()) ->setName('phids') @@ -101,24 +102,21 @@ final class PhabricatorProjectMembersEditController ->addCancelButton('/project/view/'.$project->getID().'/') ->setValue(pht('Add Members'))); $faux_form = id(new AphrontFormLayoutView()) - ->setBackgroundShading(true) - ->setPadded(true) ->appendChild( id(new AphrontFormInsetView()) ->setTitle(pht('Current Members (%d)', count($handles))) ->appendChild($list)); - $panel = new AphrontPanelView(); - $panel->setHeader($header_name); - $panel->setWidth(AphrontPanelView::WIDTH_FORM); - $panel->setNoBackground(); - $panel->appendChild($form); - $panel->appendChild(phutil_tag('br')); - $panel->appendChild($faux_form); + $box = new PHUIBoxView(); + $box->appendChild($faux_form); + $box->setShadow(true); + $box->addPadding(PHUI::PADDING_LARGE); + $box->addMargin(PHUI::MARGIN_LARGE); $nav = $this->buildLocalNavigation($project); $nav->selectFilter('members'); - $nav->appendChild($panel); + $nav->appendChild($form); + $nav->appendChild($box); $crumbs = $this->buildApplicationCrumbs($this->buildSideNavView()); $crumbs->addCrumb( @@ -136,6 +134,7 @@ final class PhabricatorProjectMembersEditController array( 'title' => $title, 'device' => true, + 'dust' => true, )); } diff --git a/src/applications/project/controller/PhabricatorProjectProfileEditController.php b/src/applications/project/controller/PhabricatorProjectProfileEditController.php index b96cba95ce..c2bab3206e 100644 --- a/src/applications/project/controller/PhabricatorProjectProfileEditController.php +++ b/src/applications/project/controller/PhabricatorProjectProfileEditController.php @@ -151,6 +151,7 @@ final class PhabricatorProjectProfileEditController ->setUser($user) ->setAction($action) ->setEncType('multipart/form-data') + ->setFlexible(true) ->appendChild( id(new AphrontFormTextControl()) ->setLabel(pht('Name')) @@ -219,18 +220,12 @@ final class PhabricatorProjectProfileEditController ->addCancelButton('/project/view/'.$project->getID().'/') ->setValue(pht('Save'))); - $panel = new AphrontPanelView(); - $panel->setHeader($header_name); - $panel->setWidth(AphrontPanelView::WIDTH_FORM); - $panel->setNoBackground(); - $panel->appendChild($form); - $nav = $this->buildLocalNavigation($project); $nav->selectFilter('edit'); $nav->appendChild( array( $error_view, - $panel, + $form, )); $crumbs = $this->buildApplicationCrumbs($this->buildSideNavView()); diff --git a/src/applications/repository/controller/PhabricatorRepositoryCreateController.php b/src/applications/repository/controller/PhabricatorRepositoryCreateController.php index 179ad55f41..3f39341e46 100644 --- a/src/applications/repository/controller/PhabricatorRepositoryCreateController.php +++ b/src/applications/repository/controller/PhabricatorRepositoryCreateController.php @@ -71,6 +71,7 @@ final class PhabricatorRepositoryCreateController $form ->setUser($user) ->setAction('/repository/create/') + ->setFlexible(true) ->appendChild( id(new AphrontFormTextControl()) ->setLabel('Name') @@ -102,19 +103,19 @@ final class PhabricatorRepositoryCreateController ->setValue('Create Repository') ->addCancelButton('/repository/')); - $panel = new AphrontPanelView(); - $panel->setHeader('Create Repository'); - $panel->appendChild($form); - $panel->setWidth(AphrontPanelView::WIDTH_FORM); - $panel->setNoBackground(); + $header = id(new PhabricatorHeaderView()) + ->setHeader(pht('Create Repository')); - return $this->buildStandardPageResponse( + return $this->buildApplicationPage( array( $error_view, - $panel, + $header, + $form, ), array( - 'title' => 'Create Repository', + 'title' => pht('Create Repository'), + 'device' => true, + 'dust' => true, )); } diff --git a/src/applications/repository/controller/PhabricatorRepositoryEditController.php b/src/applications/repository/controller/PhabricatorRepositoryEditController.php index b4824bd4bc..c3c3447a3d 100644 --- a/src/applications/repository/controller/PhabricatorRepositoryEditController.php +++ b/src/applications/repository/controller/PhabricatorRepositoryEditController.php @@ -153,21 +153,21 @@ final class PhabricatorRepositoryEditController id(new AphrontFormSubmitControl()) ->setValue('Save')); - $panel = new AphrontPanelView(); - $panel->setHeader('Edit Repository'); - $panel->appendChild($form); - $panel->setWidth(AphrontPanelView::WIDTH_FORM); - $panel->setNoBackground(); - $nav = $this->sideNav; - $nav->appendChild($error_view); - $nav->appendChild($panel); + $header = id(new PhabricatorHeaderView()) + ->setHeader(pht('Edit Repository')); - return $this->buildStandardPageResponse( + $nav->appendChild($error_view); + $nav->appendChild($header); + $nav->appendChild($form); + + return $this->buildApplicationPage( $nav, array( - 'title' => 'Edit Repository', + 'title' => pht('Edit Repository'), + 'device' => true, + 'dust' => true, )); } @@ -359,6 +359,7 @@ final class PhabricatorRepositoryEditController $form ->setUser($user) ->setAction('/repository/edit/'.$repository->getID().'/tracking/') + ->setFlexible(true) ->appendChild(hsprintf( '

Phabricator can track '. 'repositories, importing commits as they happen and notifying '. @@ -675,20 +676,18 @@ final class PhabricatorRepositoryEditController id(new AphrontFormSubmitControl()) ->setValue('Save Configuration')); - $panel = new AphrontPanelView(); - $panel->setHeader('Repository Tracking'); - $panel->appendChild($form); - $panel->setWidth(AphrontPanelView::WIDTH_WIDE); - $panel->setNoBackground(); + $header = id(new PhabricatorHeaderView()) + ->setHeader(pht('Edit Repository Tracking')); $nav = $this->sideNav; $nav->appendChild($error_view); - $nav->appendChild($panel); + $nav->appendChild($header); + $nav->appendChild($form); - return $this->buildStandardPageResponse( + return $this->buildApplicationPage( $nav, array( - 'title' => 'Edit Repository Tracking', + 'title' => pht('Edit Repository Tracking'), )); } diff --git a/src/view/control/PhabricatorObjectSelectorDialog.php b/src/view/control/PhabricatorObjectSelectorDialog.php index 1456c26c52..0d98861dff 100644 --- a/src/view/control/PhabricatorObjectSelectorDialog.php +++ b/src/view/control/PhabricatorObjectSelectorDialog.php @@ -124,8 +124,15 @@ final class PhabricatorObjectSelectorDialog { %s ', - phutil_tag('select', array('id' => $filter_id), $options), - phutil_tag('input', array('id' => $query_id)))); + phutil_tag( + 'select', + array('id' => $filter_id), + $options), + phutil_tag( + 'input', + array( + 'id' => $query_id, + 'type' => 'text')))); $result_box = phutil_tag( 'div', diff --git a/src/view/page/PhabricatorStandardPageView.php b/src/view/page/PhabricatorStandardPageView.php index 0be4662c5c..b0d2fe1e6b 100644 --- a/src/view/page/PhabricatorStandardPageView.php +++ b/src/view/page/PhabricatorStandardPageView.php @@ -115,6 +115,7 @@ final class PhabricatorStandardPageView extends PhabricatorBarePageView { require_celerity_resource('phabricator-zindex-css'); require_celerity_resource('phabricator-core-buttons-css'); require_celerity_resource('spacing-css'); + require_celerity_resource('phui-form-css'); // Evan will hate this require_celerity_resource('sprite-gradient-css'); require_celerity_resource('phabricator-standard-page-view'); diff --git a/webroot/rsrc/css/aphront/form-view.css b/webroot/rsrc/css/aphront/form-view.css index 36b6a89cc6..ac92201115 100644 --- a/webroot/rsrc/css/aphront/form-view.css +++ b/webroot/rsrc/css/aphront/form-view.css @@ -15,13 +15,14 @@ } .aphront-form-view label.aphront-form-label { - padding-top: 4px; + padding-top: 5px; width: 19%; float: left; text-align: right; font-weight: bold; font-size: 13px; - color: #666; + color: #757c88; + text-shadow: 0 1px rgba(255,255,255,1); } .device-phone .aphront-form-view label.aphront-form-label { @@ -29,14 +30,13 @@ float: none; text-align: left; width: 100%; - color: #777; margin-bottom: 3px; } .aphront-form-input { margin-left: 20%; - margin-right: 25%; - width: 55%; + margin-right: 20%; + width: 60%; } .device-phone .aphront-form-input { @@ -45,20 +45,8 @@ width: 100%; } -.aphront-form-control-text .aphront-form-input input, -.aphront-form-control-password .aphront-form-input input { - font-size: 13px; - padding: 4px 4px; - color: #333; - vertical-align: middle; - background-color: #ffffff; - border: 1px solid #96A6C5; - border-radius: 3px; - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -} - .aphront-form-error { - width: 23%; + width: 18%; float: right; color: #aa0000; font-weight: bold; @@ -80,16 +68,14 @@ font-size: 11px; } -.aphront-form-input input, +.aphront-form-input input { + width: 100%; +} + .aphront-form-input textarea { - font-size: 13px; display: block; width: 100%; box-sizing: border-box; -} - - -.aphront-form-input textarea { height: 12em; } @@ -104,10 +90,7 @@ } .aphront-form-control-textarea textarea.aphront-textarea-very-short { - height: 3em; - border: 1px solid #96A6C5; - border-radius: 3px; - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + height: 44px; } .aphront-form-control-textarea textarea.aphront-textarea-very-tall { @@ -118,13 +101,12 @@ padding-top: 2px; } - .aphront-form-view .aphront-form-caption { font-size: 12px; color: #888; padding: 2px; text-align: right; - margin-right: 25%; + margin-right: 20%; margin-left: 20%; } @@ -138,7 +120,14 @@ } .aphront-form-instructions { - margin: 0.75em 3% 1.25em; + width: 60%; + margin-left: 20%; + padding: 10px 4px; +} + +.device .aphront-form-instructions { + width: 100%; + margin: 0; } .aphront-form-important { @@ -152,10 +141,9 @@ margin: .5em 2em; } - .aphront-form-control-static .aphront-form-input, .aphront-form-control-markup .aphront-form-input { - padding-top: 4px; + padding-top: 6px; font-size: 13px; } @@ -205,10 +193,16 @@ table.aphront-form-control-checkbox-layout th { } .aphront-form-inset { - margin: 0 0 1em; - padding: .75em; - background: #f3f3f3; - border: 1px solid #afafaf; + margin: 0 0 10px; + padding: 10px; + background: #fff; + border: 1px solid #d4dae0; +} + +.aphront-form-inset h1 { + color: #777; + font-weight: normal; + padding-bottom: 10px; } .aphront-form-drag-and-drop-file-list { diff --git a/webroot/rsrc/css/aphront/tokenizer.css b/webroot/rsrc/css/aphront/tokenizer.css index 09199d9e80..c07aea399f 100644 --- a/webroot/rsrc/css/aphront/tokenizer.css +++ b/webroot/rsrc/css/aphront/tokenizer.css @@ -3,25 +3,17 @@ * @requires aphront-typeahead-control-css */ -div.jx-tokenizer { +body div.jx-tokenizer { background: transparent; position: relative; - display: block; width: 100%; } -div.jx-tokenizer-container { - background: #fff; - border: 1px solid #96A6C5; +body div.jx-tokenizer-container { position: relative; - width: 100%; - padding: 0 2px; - border-radius: 3px; - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -} - -div.jx-tokenizer-container-focused { - border-color: #0099ff; + display: block; + padding: 0; + height: 30px; } var.jx-tokenizer-metrics { @@ -30,44 +22,53 @@ var.jx-tokenizer-metrics { top: 20px; } -input.jx-tokenizer-input { +body input.jx-tokenizer-input { border: 1px solid transparent; border-width: 1px 0px; padding: 3px; outline: none; float: left; + width: 100%; + border-shadow: none; + box-shadow: none; + -webkit-box-shadow: none; + font-size: 13px; + color: #777; + height: 26px; } -span.jx-tokenizer-x-placeholder { - padding: 0 2px; +body input.jx-tokenizer-input:focus { + box-shadow: none; + -webkit-box-shadow: none; + border-color: transparent; +} + +.jx-typeahead-placeholder { + margin-left: 4px; +} + +a.jx-tokenizer-x { + padding-left: 4px; +} + +a.jx-tokenizer-x:hover { + color: #000; + text-decoration: none; } a.jx-tokenizer-token { - padding: 2px 0 2px 5px; + padding: 2px 6px 3px; border: 1px solid #a4bdec; margin: 3px 2px 0 4px; background: #dee7f8; float: left; - cursor: text; - font-size: 12px; + cursor: pointer; border-radius: 3px; + color: #333; + } a.jx-tokenizer-token:hover { text-decoration: none; background: #bbcef1; - cursor: text; } - -a.jx-tokenizer-token a.jx-tokenizer-x { - color: #627aad; - font-family: Arial, sans-serif; - font-weight: normal; - cursor: pointer; - padding: 0 4px; -} - -a.jx-tokenizer-token a.jx-tokenizer-x:hover { - text-decoration: none; -} - diff --git a/webroot/rsrc/css/application/base/main-menu-view.css b/webroot/rsrc/css/application/base/main-menu-view.css index 9622af0a9d..b7ea4bce92 100644 --- a/webroot/rsrc/css/application/base/main-menu-view.css +++ b/webroot/rsrc/css/application/base/main-menu-view.css @@ -134,18 +134,20 @@ margin: 0 8px 0 52px; } -.phabricator-main-menu-search input { +.phabricator-main-menu .phabricator-main-menu-search input { outline: 0; margin: 0; + box-shadow: none; + transition: none; width: 100%; right: 0; position: absolute; - - border: 1px solid #333333; + font-size: 13px; + border: 1px solid #333; border-radius: 12px; - background: #555555; - height: 12px; + background-color: #555; + height: 26px; line-height: 12px; box-shadow: 0px 1px 1px rgba(128, 128, 128, 0.25); padding: 6px 32px 6px 10px; @@ -157,8 +159,9 @@ border-radius: 15px; } -.phabricator-main-menu-search input:focus { +.phabricator-main-menu .phabricator-main-menu-search input:focus { background: #c9c9c9; + border: none; } .phabricator-main-menu-search input.jx-typeahead-placeholder { diff --git a/webroot/rsrc/css/application/config/config-options.css b/webroot/rsrc/css/application/config/config-options.css index 06ac52d832..89cd61a910 100644 --- a/webroot/rsrc/css/application/config/config-options.css +++ b/webroot/rsrc/css/application/config/config-options.css @@ -6,6 +6,7 @@ width: 100%; border-collapse: collapse; border: 1px solid #cccccc; + background: #fff; } .config-option-table th, diff --git a/webroot/rsrc/css/application/directory/phabricator-jump-nav.css b/webroot/rsrc/css/application/directory/phabricator-jump-nav.css index 2b7faedd7d..dbf7abe640 100644 --- a/webroot/rsrc/css/application/directory/phabricator-jump-nav.css +++ b/webroot/rsrc/css/application/directory/phabricator-jump-nav.css @@ -8,13 +8,9 @@ margin: 0; } -.phabricator-jump-nav { +input.phabricator-jump-nav[type='text'] { font-size: 16px; width: 100%; - padding: 4px; - border-radius: 3px; - border: 1px solid #96A6C5; - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); } .phabricator-jump-nav-caption { diff --git a/webroot/rsrc/css/application/objectselector/object-selector.css b/webroot/rsrc/css/application/objectselector/object-selector.css index c47c564dce..fdb14aea75 100644 --- a/webroot/rsrc/css/application/objectselector/object-selector.css +++ b/webroot/rsrc/css/application/objectselector/object-selector.css @@ -18,6 +18,7 @@ .phabricator-object-selector-search td { padding: 4px 8px; + vertical-align: middle; } td.phabricator-object-selector-search-text { diff --git a/webroot/rsrc/css/application/owners/owners-path-editor.css b/webroot/rsrc/css/application/owners/owners-path-editor.css index 31e5f6915b..3cf3d21991 100644 --- a/webroot/rsrc/css/application/owners/owners-path-editor.css +++ b/webroot/rsrc/css/application/owners/owners-path-editor.css @@ -8,6 +8,7 @@ .owners-path-editor-table td { padding: 2px 4px; + vertical-align: middle; } .owners-path-editor-table select.owners-repo { @@ -15,11 +16,10 @@ } .owners-path-editor-table input { - width: 450px; + width: 400px; } .owners-path-editor-table div.error-display { - width: 200px; padding: 4px 12px 0; } diff --git a/webroot/rsrc/css/core/remarkup.css b/webroot/rsrc/css/core/remarkup.css index dcc5b277d0..56da414ca8 100644 --- a/webroot/rsrc/css/core/remarkup.css +++ b/webroot/rsrc/css/core/remarkup.css @@ -256,21 +256,30 @@ .remarkup-assist-textarea { - border-width: 1px; - border-color: #e5e5e5 #999999 #999999; + border-left-color: #96A6C5; + border-right-color: #96A6C5; + border-bottom-color: #96A6C5; + border-top-color: #c9d4e9; + border-radius: 0; /* Prevent Safari and Chrome users from dragging the textarea any wider, because the top bar won't resize along with it. */ resize: vertical; } +.remarkup-assist-textarea:focus { + border: 1px solid rgba(82, 168, 236, 0.8); +} + .remarkup-assist-bar { height: 27px; padding: 0 2px; border-width: 1px 1px 0; border-style: solid; - border-color: #737373 #999999; + border-top-color: #96A6C5; + border-left-color: #96A6C5; + border-right-color: #96A6C5; background: #f5f5f5; overflow: hidden; diff --git a/webroot/rsrc/css/layout/phabricator-form-view.css b/webroot/rsrc/css/layout/phabricator-form-view.css index 67dd275724..4a87d5a85c 100644 --- a/webroot/rsrc/css/layout/phabricator-form-view.css +++ b/webroot/rsrc/css/layout/phabricator-form-view.css @@ -3,11 +3,15 @@ */ .phabricator-form-view { - padding: .75em; - background: #f9f9f9; + padding: 20px; + background: #f4f5f8; border-width: 1px 0; border-style: solid; - border-color: #dbdbdb; + border-color: rgb(199, 201, 214); +} + +.device-phone .phabricator-form-view { + padding: 10px 5px 10px 10px; } .device .phabricator-form-view .aphront-form-control .aphront-form-label { diff --git a/webroot/rsrc/css/phui/phui-form.css b/webroot/rsrc/css/phui/phui-form.css new file mode 100644 index 0000000000..4c9a3124ed --- /dev/null +++ b/webroot/rsrc/css/phui/phui-form.css @@ -0,0 +1,126 @@ +/** + * @provides phui-form-css + */ + +select, +textarea, +input[type="text"], +input[type="password"], +input[type="datetime"], +input[type="datetime-local"], +input[type="date"], +input[type="month"], +input[type="time"], +input[type="week"], +input[type="number"], +input[type="email"], +input[type="url"], +input[type="search"], +input[type="tel"], +input[type="color"], +div.jx-tokenizer-container { + display: inline-block; + height: 28px; + line-height: 18px; + color: #555555; + vertical-align: middle; + font: 13px 'Helvetica Neue', Arial, sans-serif; +} + +textarea, +input[type="text"], +input[type="password"], +input[type="datetime"], +input[type="datetime-local"], +input[type="date"], +input[type="month"], +input[type="time"], +input[type="week"], +input[type="number"], +input[type="email"], +input[type="url"], +input[type="search"], +input[type="tel"], +input[type="color"], +div.jx-tokenizer-container { + padding: 4px 6px; + background-color: #ffffff; + border: 1px solid #96A6C5; + + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + + -webkit-transition: border linear .05s, box-shadow linear .05s; + -moz-transition: border linear .05s, box-shadow linear .05s; + -o-transition: border linear .05s, box-shadow linear .05s; + transition: border linear .05s, box-shadow linear .05s; + + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +textarea:focus, +input[type="text"]:focus, +input[type="password"]:focus, +input[type="datetime"]:focus, +input[type="datetime-local"]:focus, +input[type="date"]:focus, +input[type="month"]:focus, +input[type="time"]:focus, +input[type="week"]:focus, +input[type="number"]:focus, +input[type="email"]:focus, +input[type="url"]:focus, +input[type="search"]:focus, +input[type="tel"]:focus, +input[type="color"]:focus, +div.jx-tokenizer-container-focused { + border-color: rgba(82, 168, 236, 0.8); + outline: 0; + outline: thin dotted \9; + /* IE6-9 */ + + -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6); + -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6); + box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6); +} +input[type="radio"], +input[type="checkbox"] { + margin: 4px 0 0; + margin-top: 1px \9; + /* IE8-9 */ + line-height: normal; +} + +select { + height: 24px; + line-height: 24px; + border: 1px solid #a1a5a9; + background-color: #ffffff; +} +select[multiple], +select[size] { + height: auto; +} +select:focus, +input[type="file"]:focus, +input[type="radio"]:focus, +input[type="checkbox"]:focus { + outline: thin dotted #333; + outline: 5px auto -webkit-focus-ring-color; + outline-offset: -2px; +} +input:-moz-placeholder, +textarea:-moz-placeholder { + color: #999999; +} +input:-ms-input-placeholder, +textarea:-ms-input-placeholder { + color: #999999; +} +input::-webkit-input-placeholder, +textarea::-webkit-input-placeholder { + color: #999999; +} diff --git a/webroot/rsrc/js/application/herald/HeraldRuleEditor.js b/webroot/rsrc/js/application/herald/HeraldRuleEditor.js index 1cf534e2f1..f036e330c7 100644 --- a/webroot/rsrc/js/application/herald/HeraldRuleEditor.js +++ b/webroot/rsrc/js/application/herald/HeraldRuleEditor.js @@ -232,7 +232,7 @@ JX.install('HeraldRuleEditor', { set_fn(this._config.template.defaultColor); break; default: - input = JX.$N('input'); + input = JX.$N('input', {type: 'text'}); get_fn = function() { return input.value; }; set_fn = function(v) { input.value = v; }; break;