From 554b3c3810a57e975c2e76a10634b63062fd8020 Mon Sep 17 00:00:00 2001 From: Chad Little Date: Wed, 9 Nov 2016 16:31:30 -0800 Subject: [PATCH] Normalize form inputs a little Summary: Lots of minor details, colors, spacing, padding. Test Plan: View carefully in create task, mobile create task, comment form, tokenizers. {F1913060} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D16832 --- resources/celerity/map.php | 30 ++++++++++----------- webroot/rsrc/css/aphront/tokenizer.css | 5 +++- webroot/rsrc/css/core/remarkup.css | 26 +++++++++++------- webroot/rsrc/css/phui/phui-comment-form.css | 29 -------------------- webroot/rsrc/css/phui/phui-form-view.css | 3 ++- webroot/rsrc/css/phui/phui-form.css | 21 ++++++++++----- 6 files changed, 51 insertions(+), 63 deletions(-) diff --git a/resources/celerity/map.php b/resources/celerity/map.php index e5d5786142..16c77ba644 100644 --- a/resources/celerity/map.php +++ b/resources/celerity/map.php @@ -9,7 +9,7 @@ return array( 'names' => array( 'conpherence.pkg.css' => 'cea72e09', 'conpherence.pkg.js' => '6249a1cf', - 'core.pkg.css' => 'd2126ffb', + 'core.pkg.css' => 'e7c00111', 'core.pkg.js' => '1a77dddf', 'darkconsole.pkg.js' => 'e7393ebb', 'differential.pkg.css' => 'a4ba74b5', @@ -29,7 +29,7 @@ return array( 'rsrc/css/aphront/panel-view.css' => '8427b78d', 'rsrc/css/aphront/phabricator-nav-view.css' => 'b29426e9', 'rsrc/css/aphront/table-view.css' => '3225137a', - 'rsrc/css/aphront/tokenizer.css' => '056da01b', + 'rsrc/css/aphront/tokenizer.css' => '9a8cb501', 'rsrc/css/aphront/tooltip.css' => '1a07aea8', 'rsrc/css/aphront/typeahead-browse.css' => '8904346a', 'rsrc/css/aphront/typeahead.css' => 'd4f16145', @@ -109,7 +109,7 @@ return array( 'rsrc/css/application/tokens/tokens.css' => '3d0f239e', 'rsrc/css/application/uiexample/example.css' => '528b19de', 'rsrc/css/core/core.css' => 'd0801452', - 'rsrc/css/core/remarkup.css' => '04ab9f17', + 'rsrc/css/core/remarkup.css' => 'dda84e80', 'rsrc/css/core/syntax.css' => '769d3498', 'rsrc/css/core/z-index.css' => 'd1270942', 'rsrc/css/diviner/diviner-shared.css' => 'aa3656aa', @@ -132,7 +132,7 @@ return array( 'rsrc/css/phui/phui-button.css' => '4a5fbe3d', 'rsrc/css/phui/phui-chart.css' => '6bf6f78e', 'rsrc/css/phui/phui-cms.css' => 'be43c8a8', - 'rsrc/css/phui/phui-comment-form.css' => '103cdc49', + 'rsrc/css/phui/phui-comment-form.css' => '4ecc56ef', 'rsrc/css/phui/phui-crumbs-view.css' => '195ac419', 'rsrc/css/phui/phui-curtain-view.css' => '947bf1a4', 'rsrc/css/phui/phui-document-pro.css' => 'ca1fed81', @@ -140,8 +140,8 @@ return array( 'rsrc/css/phui/phui-document.css' => 'c32e8dec', 'rsrc/css/phui/phui-feed-story.css' => '44a9c8e9', 'rsrc/css/phui/phui-fontkit.css' => '9cda225e', - 'rsrc/css/phui/phui-form-view.css' => 'b5bfd17a', - 'rsrc/css/phui/phui-form.css' => 'aac1d51d', + 'rsrc/css/phui/phui-form-view.css' => '91adabe4', + 'rsrc/css/phui/phui-form.css' => 'ca2490c6', 'rsrc/css/phui/phui-head-thing.css' => 'fd311e5f', 'rsrc/css/phui/phui-header-view.css' => '6ec8f155', 'rsrc/css/phui/phui-hovercard.css' => 'de1a2119', @@ -558,7 +558,7 @@ return array( 'aphront-multi-column-view-css' => '84cc6640', 'aphront-panel-view-css' => '8427b78d', 'aphront-table-view-css' => '3225137a', - 'aphront-tokenizer-control-css' => '056da01b', + 'aphront-tokenizer-control-css' => '9a8cb501', 'aphront-tooltip-css' => '1a07aea8', 'aphront-typeahead-control-css' => 'd4f16145', 'application-search-view-css' => '8452c849', @@ -812,7 +812,7 @@ return array( 'phabricator-object-selector-css' => '85ee8ce6', 'phabricator-phtize' => 'd254d646', 'phabricator-prefab' => '8d40ae75', - 'phabricator-remarkup-css' => '04ab9f17', + 'phabricator-remarkup-css' => 'dda84e80', 'phabricator-search-results-css' => '7dea472c', 'phabricator-shaped-request' => '7cbe244b', 'phabricator-slowvote-css' => 'a94b7230', @@ -855,7 +855,7 @@ return array( 'phui-calendar-month-css' => '8e10e92c', 'phui-chart-css' => '6bf6f78e', 'phui-cms-css' => 'be43c8a8', - 'phui-comment-form-css' => '103cdc49', + 'phui-comment-form-css' => '4ecc56ef', 'phui-crumbs-view-css' => '195ac419', 'phui-curtain-view-css' => '947bf1a4', 'phui-document-summary-view-css' => '9ca48bdf', @@ -864,8 +864,8 @@ return array( 'phui-feed-story-css' => '44a9c8e9', 'phui-font-icon-base-css' => '870a7360', 'phui-fontkit-css' => '9cda225e', - 'phui-form-css' => 'aac1d51d', - 'phui-form-view-css' => 'b5bfd17a', + 'phui-form-css' => 'ca2490c6', + 'phui-form-view-css' => '91adabe4', 'phui-head-thing-view-css' => 'fd311e5f', 'phui-header-view-css' => '6ec8f155', 'phui-hovercard' => '1bd28176', @@ -953,10 +953,6 @@ return array( 'javelin-util', 'phabricator-tooltip', ), - '056da01b' => array( - 'aphront-typeahead-control-css', - 'phui-tag-view-css', - ), '065227cc' => array( 'javelin-behavior', 'javelin-dom', @@ -1750,6 +1746,10 @@ return array( 'phabricator-phtize', 'changeset-view-manager', ), + '9a8cb501' => array( + 'aphront-typeahead-control-css', + 'phui-tag-view-css', + ), '9bbf3762' => array( 'javelin-behavior', 'javelin-dom', diff --git a/webroot/rsrc/css/aphront/tokenizer.css b/webroot/rsrc/css/aphront/tokenizer.css index 0e10c94d26..7116ce3ace 100644 --- a/webroot/rsrc/css/aphront/tokenizer.css +++ b/webroot/rsrc/css/aphront/tokenizer.css @@ -38,6 +38,7 @@ body input.jx-tokenizer-input { font-size: {$normalfontsize}; color: #333; height: 26px; + background: transparent; } body input.jx-tokenizer-input:focus { @@ -63,7 +64,7 @@ a.jx-tokenizer-x:hover { } a.jx-tokenizer-token { - padding: 2px 6px; + padding: 1px 6px; border: 1px solid {$lightblueborder}; margin: 3px 2px 0 4px; background-color: {$sh-bluebackground}; @@ -173,6 +174,8 @@ a.jx-tokenizer-token-invalid:hover { border-bottom: none; padding: 0; width: 30px; + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; } .button.tokenizer-browse-button .phui-icon-view { diff --git a/webroot/rsrc/css/core/remarkup.css b/webroot/rsrc/css/core/remarkup.css index 48d06d4d5f..7d084f9a23 100644 --- a/webroot/rsrc/css/core/remarkup.css +++ b/webroot/rsrc/css/core/remarkup.css @@ -436,11 +436,13 @@ body div.phabricator-remarkup > *:last-child { } .remarkup-assist-textarea { - border-left-color: {$blueborder}; - border-right-color: {$blueborder}; - border-bottom-color: {$blueborder}; + border-left-color: {$greyborder}; + border-right-color: {$greyborder}; + border-bottom-color: {$greyborder}; border-top-color: {$thinblueborder}; border-radius: 0; + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; box-shadow: none; -webkit-box-shadow: none; @@ -470,12 +472,15 @@ var.remarkup-assist-textarea { } .remarkup-assist-bar { - height: 26px; + height: 32px; border-width: 1px 1px 0; border-style: solid; - border-top-color: {$blueborder}; - border-left-color: {$blueborder}; - border-right-color: {$blueborder}; + border-top-color: {$greyborder}; + border-left-color: {$greyborder}; + border-right-color: {$greyborder}; + border-top-left-radius: 3px; + border-top-right-radius: 3px; + padding: 0 4px; background: {$lightbluebackground}; overflow: hidden; @@ -483,6 +488,7 @@ var.remarkup-assist-textarea { .remarkup-assist-button { display: block; + margin-top: 2px; padding: 4px 5px; float: left; } @@ -503,11 +509,11 @@ var.remarkup-assist-textarea { display: block; float: left; - margin: 7px 4px; - height: 14px; + height: 18px; + margin: 7px 6px; width: 0px; - border-right: 1px solid #cccccc; + border-right: 1px solid {$lightgreyborder}; } .remarkup-interpreter-error { diff --git a/webroot/rsrc/css/phui/phui-comment-form.css b/webroot/rsrc/css/phui/phui-comment-form.css index 1fca450d97..505ea17359 100644 --- a/webroot/rsrc/css/phui/phui-comment-form.css +++ b/webroot/rsrc/css/phui/phui-comment-form.css @@ -58,23 +58,10 @@ body.device .phui-box.phui-object-box.phui-comment-form-view { border-radius: 0; } -.phui-comment-form-view .remarkup-assist-button { - margin-top: 2px; - padding: 4px 5px; - border-radius: 3px; -} - -.phui-comment-form-view .remarkup-assist-separator { - height: 18px; - margin: 7px 6px; -} - .phui-comment-form-view .aphront-form-input .remarkup-assist-textarea { border-color: {$lightblueborder}; border-top: 1px solid {$thinblueborder}; padding: 8px; - border-bottom-left-radius: 3px; - border-bottom-right-radius: 3px; height: 10em; background-color: rgba({$alphablue},.02); } @@ -162,22 +149,6 @@ body.device .phui-box.phui-object-box.phui-comment-form-view { display: none; } -/* h8rs gonna h8 */ -.phui-comment-form-view select { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - - background: #fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC") no-repeat right 8px center; - background-size: 8px 10px; - border-radius: 3px; - color: {$darkbluetext}; - height: 28px; - position: relative; - padding: 0 8px; - width: 180px; -} - .device-phone .aphront-form-control-submit button { width: 100%; } diff --git a/webroot/rsrc/css/phui/phui-form-view.css b/webroot/rsrc/css/phui/phui-form-view.css index 91e7b64dcf..11852a87f6 100644 --- a/webroot/rsrc/css/phui/phui-form-view.css +++ b/webroot/rsrc/css/phui/phui-form-view.css @@ -15,8 +15,9 @@ } .phui-form-view label.aphront-form-label { - padding-top: 5px; width: 19%; + height: 28px; + line-height: 28px; float: left; text-align: right; font-weight: bold; diff --git a/webroot/rsrc/css/phui/phui-form.css b/webroot/rsrc/css/phui/phui-form.css index 5c2ef38446..4150ac6940 100644 --- a/webroot/rsrc/css/phui/phui-form.css +++ b/webroot/rsrc/css/phui/phui-form.css @@ -46,7 +46,8 @@ input[type="color"], div.jx-tokenizer-container { padding: 4px 6px; background-color: #ffffff; - border: 1px solid {$blueborder}; + border: 1px solid {$greyborder}; + border-radius: 3px; -webkit-box-shadow: inset 0 1px 1px rgba({$alphablack}, 0.075); -moz-box-shadow: inset 0 1px 1px rgba({$alphablack}, 0.075); @@ -63,7 +64,6 @@ div.jx-tokenizer-container { /* iOS Safari */ -webkit-appearance: none; - border-radius: 0; } textarea:focus, @@ -105,11 +105,18 @@ input[type="checkbox"] { } select { - height: 24px; - line-height: 24px; - border: 1px solid {$lightgreyborder}; - background-color: #ffffff; - min-width: 140px; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + + background: #fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC") no-repeat right 8px center; + background-size: 8px 10px; + border-radius: 3px; + color: {$darkbluetext}; + border: 1px solid {$greyborder}; + height: 28px; + padding: 0 8px; + min-width: 180px; } select[multiple],