Modernize DatePicker

Summary: Fixes T5893. Uses more standard colors / spacing / shadows / icons.

Test Plan:
pick dates

{F191310}

Reviewers: btrahan, epriestley

Reviewed By: epriestley

Subscribers: epriestley, Korvin

Maniphest Tasks: T5893

Differential Revision: https://secure.phabricator.com/D10285

resources/celerity/map.php

@@ -7,7 +7,7 @@
  */
 return array(
   'names' => array(
-    'core.pkg.css' => '1733ae8f',
+    'core.pkg.css' => '5e4bb6d1',
     'core.pkg.js' => '7c8455ef',
     'darkconsole.pkg.js' => 'df001cab',
     'differential.pkg.css' => '4a93db37',
@@ -127,7 +127,7 @@ return array(
     'rsrc/css/phui/phui-document.css' => 'a5615198',
     'rsrc/css/phui/phui-feed-story.css' => 'e2c9bc83',
     'rsrc/css/phui/phui-fontkit.css' => 'fff25cfa',
-    'rsrc/css/phui/phui-form-view.css' => 'ebac1b1d',
+    'rsrc/css/phui/phui-form-view.css' => 'a2d72756',
     'rsrc/css/phui/phui-form.css' => 'b78ec020',
     'rsrc/css/phui/phui-header-view.css' => '39594ac0',
     'rsrc/css/phui/phui-icon.css' => 'b4963a4f',
@@ -458,7 +458,7 @@ return array(
     'rsrc/js/core/behavior-device.js' => '03d6ed07',
     'rsrc/js/core/behavior-drag-and-drop-textarea.js' => '92eb531d',
     'rsrc/js/core/behavior-error-log.js' => 'a5d7cf86',
-    'rsrc/js/core/behavior-fancy-datepicker.js' => 'a5573bcd',
+    'rsrc/js/core/behavior-fancy-datepicker.js' => 'c51ae228',
     'rsrc/js/core/behavior-file-tree.js' => '88236f00',
     'rsrc/js/core/behavior-form.js' => '5c54cbf3',
     'rsrc/js/core/behavior-gesture.js' => '3ab51e2c',
@@ -585,7 +585,7 @@ return array(
     'javelin-behavior-diffusion-pull-lastmodified' => '2b228192',
     'javelin-behavior-doorkeeper-tag' => 'e5822781',
     'javelin-behavior-error-log' => 'a5d7cf86',
-    'javelin-behavior-fancy-datepicker' => 'a5573bcd',
+    'javelin-behavior-fancy-datepicker' => 'c51ae228',
     'javelin-behavior-global-drag-and-drop' => '07f199d8',
     'javelin-behavior-herald-rule-editor' => '7ebaeed3',
     'javelin-behavior-high-security-warning' => '8fc1c918',
@@ -775,7 +775,7 @@ return array(
     'phui-font-icon-base-css' => 'eb84f033',
     'phui-fontkit-css' => 'fff25cfa',
     'phui-form-css' => 'b78ec020',
-    'phui-form-view-css' => 'ebac1b1d',
+    'phui-form-view-css' => 'a2d72756',
     'phui-header-view-css' => '39594ac0',
     'phui-icon-view-css' => 'b4963a4f',
     'phui-image-mask-css' => '5a8b09c8',
@@ -1455,13 +1455,6 @@ return array(
       'javelin-dom',
       'phabricator-notification',
     ),
-    'a5573bcd' => array(
-      'javelin-behavior',
-      'javelin-util',
-      'javelin-dom',
-      'javelin-stratcom',
-      'javelin-vector',
-    ),
     'a5b67173' => array(
       'javelin-dom',
       'javelin-util',
@@ -1645,6 +1638,13 @@ return array(
       'javelin-vector',
       'javelin-stratcom',
     ),
+    'c51ae228' => array(
+      'javelin-behavior',
+      'javelin-util',
+      'javelin-dom',
+      'javelin-stratcom',
+      'javelin-vector',
+    ),
     'c60f4327' => array(
       'javelin-stratcom',
       'javelin-install',

src/view/form/control/AphrontFormDateControl.php

@@ -237,6 +237,9 @@ final class AphrontFormDateControl extends AphrontFormControl {
         'disabled' => $disabled,
       ));
 
+    $cicon = id(new PHUIIconView())
+      ->setIconFont('fa-calendar');
+
     $cal_icon = javelin_tag(
       'a',
       array(
@@ -244,7 +247,7 @@ final class AphrontFormDateControl extends AphrontFormControl {
         'class' => 'calendar-button',
         'sigil' => 'calendar-button',
       ),
-      '');
+      $cicon);
 
     $time_sel = javelin_tag(
       'input',

webroot/rsrc/css/phui/phui-form-view.css

@@ -296,15 +296,11 @@ table.aphront-form-control-checkbox-layout th {
   left: 0px;
 }
 
-
 .calendar-button {
   display: inline;
-  background: url(/rsrc/image/icon/fatcow/calendar_edit.png)
+  padding: 8px 4px;
-    no-repeat center center;
-  padding: 8px 12px;
   margin: 2px 8px 2px 2px;
   position: relative;
-  border: 1px solid transparent;
 }
 
 .aphront-form-date-container {
@@ -335,8 +331,7 @@ table.aphront-form-control-checkbox-layout th {
 
 .fancy-datepicker-core {
   padding: 1px;
-  font-size: 11px;
+  font-size: 12px;
-  font-family: Verdana;
   text-align: center;
 }
 
@@ -350,41 +345,50 @@ table.aphront-form-control-checkbox-layout th {
 
 .fancy-datepicker-core .month-table {
   margin-bottom: 6px;
+  font-size: 13px;
+  background-color: {$hoverblue};
+  border-radius: 2px;
 }
 
 .fancy-datepicker-core .month-table td.lrbutton {
-  width: 20%;
+  width: 18%;
+  color: {$lightbluetext};
 }
 
 .fancy-datepicker-core .month-table td {
   padding: 4px;
   font-weight: bold;
-  color: {$darkgreytext};
+  color: {$bluetext};
 }
 
-.fancy-datepicker-core .month-table td.lrbutton {
+.fancy-datepicker-core .month-table td.lrbutton:hover {
-  background: #e6e6e6;
+  border-radius: 2px;
-  border: 1px solid;
+  background: {$hoverselectedblue};
-  border-color: #a6a6a6 #969696 #868686 #a6a6a6;
+  color: {$darkbluetext};
 }
 
 .fancy-datepicker-core .day-table td {
   overflow: hidden;
-  background: #f6f6f6;
   vertical-align: center;
   text-align: center;
-  border: 1px solid #d6d6d6;
+  border: 1px solid {$thinblueborder};
   padding: 4px 0;
 }
 
+.fancy-datepicker .fancy-datepicker-core .day-table td.day:hover {
+  background-color: {$hoverblue};
+  border-color: {$lightblueborder};
+}
+
 .fancy-datepicker-core .day-table td.day-placeholder {
   border-color: transparent;
   background: transparent;
 }
 
 .fancy-datepicker-core .day-table td.weekend {
-  color: {$greytext};
+  color: {$lightgreytext};
-  border-color: #e6e6e6;
+  border-color: {$lightgreyborder};
+  background: {$lightgreybackground};
 }
 
 .fancy-datepicker-core .day-table td.day-name {
@@ -395,13 +399,16 @@ table.aphront-form-control-checkbox-layout th {
 }
 
 .fancy-datepicker-core .day-table td.today {
-  background: #eeee99;
+  background: {$greybackground};
-  border-color: #aaaa66;
+  border-color: {$greyborder};
+  color: {$darkgreytext};
+  font-weight: bold;
 }
 
 .fancy-datepicker-core .day-table td.datepicker-selected {
-  background: #0099ff;
+  background: {$lightgreen};
-  border-color: #0066cc;
+  border-color: {$green};
+  color: {$green};
 }
 
 .fancy-datepicker-core td {
@@ -412,16 +419,16 @@ table.aphront-form-control-checkbox-layout th {
   cursor: inherit;
 }
 
-.picker-open .calendar-button,
+.picker-open .calendar-button .phui-icon-view {
-.fancy-datepicker-core {
+  color: {$sky};
-  background-color: white;
-  border: 1px solid {$greytext};
-
-  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
 }
 
-.picker-open .calendar-button {
+.fancy-datepicker-core {
-  border-left: 1px solid white;
+  background-color: white;
+  border: 1px solid {$lightblueborder};
+  border-bottom: 1px solid {$blueborder};
+  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
+  border-radius: 3px;
 }
 
 .login-to-comment {

webroot/rsrc/js/core/behavior-fancy-datepicker.js

@@ -47,8 +47,8 @@ JX.behavior('fancy-datepicker', function() {
     var p = JX.$V(button);
     var d = JX.Vector.getDim(picker);
 
-    picker.style.left = (p.x - d.x + 2) + 'px';
+    picker.style.left = (p.x - d.x - 2) + 'px';
-    picker.style.top = (p.y - 10) + 'px';
+    picker.style.top = (p.y) + 'px';
 
     JX.DOM.alterClass(root, 'picker-open', true);
 
@@ -205,6 +205,7 @@ JX.behavior('fancy-datepicker', function() {
                       today.getDate() == date.getDate());
 
       var classes = [];
+      classes.push('day');
       if (is_today) {
         classes.push('today');
       }