revi-archive/phorge-phorge
1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2025-03-20 08:10:09 +01:00
Code Issues Releases Wiki Activity

Modernize DatePicker

Browse source 
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
This commit is contained in:
Chad Little 2014-08-16 14:55:22 -07:00
parent fce43179e7
commit cd82b90c15
4 changed files with 55 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
resources/celerity/map.php
View file

@ -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',

5
src/view/form/control/AphrontFormDateControl.php
View file

@ -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',

65
webroot/rsrc/css/phui/phui-form-view.css
View file

@ -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)
no-repeat center center;
padding: 8px 12px;
padding: 8px 4px;
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-family: Verdana;
font-size: 12px;
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 {
background: #e6e6e6;
border: 1px solid;
border-color: #a6a6a6 #969696 #868686 #a6a6a6;
.fancy-datepicker-core .month-table td.lrbutton:hover {
border-radius: 2px;
background: {$hoverselectedblue};
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};
border-color: #e6e6e6;
color: {$lightgreytext};
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;
border-color: #aaaa66;
background: {$greybackground};
border-color: {$greyborder};
color: {$darkgreytext};
font-weight: bold;
}
.fancy-datepicker-core .day-table td.datepicker-selected {
background: #0099ff;
border-color: #0066cc;
background: {$lightgreen};
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,
.fancy-datepicker-core {
background-color: white;
border: 1px solid {$greytext};
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
.picker-open .calendar-button .phui-icon-view {
color: {$sky};
}
.picker-open .calendar-button {
border-left: 1px solid white;
.fancy-datepicker-core {
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 {

5
webroot/rsrc/js/core/behavior-fancy-datepicker.js
View file

@ -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.top = (p.y - 10) + 'px';
picker.style.left = (p.x - d.x - 2) + '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');
}