@recaptime-dev's working patches + fork for Phorge, a community fork of Phabricator. (Upstream dev and stable branches are at upstream/main and upstream/stable respectively.)
hq.recaptime.dev/wiki/Phorge
phorge
phabricator
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
+55
-44
+12
-12
resources/celerity/map.php
+12
-12
resources/celerity/map.php
···
7
7
*/
8
8
return array(
9
9
'names' => array(
10
-
'core.pkg.css' => '1733ae8f',
10
+
'core.pkg.css' => '5e4bb6d1',
11
11
'core.pkg.js' => '7c8455ef',
12
12
'darkconsole.pkg.js' => 'df001cab',
13
13
'differential.pkg.css' => '4a93db37',
···
127
127
'rsrc/css/phui/phui-document.css' => 'a5615198',
128
128
'rsrc/css/phui/phui-feed-story.css' => 'e2c9bc83',
129
129
'rsrc/css/phui/phui-fontkit.css' => 'fff25cfa',
130
-
'rsrc/css/phui/phui-form-view.css' => 'ebac1b1d',
130
+
'rsrc/css/phui/phui-form-view.css' => 'a2d72756',
131
131
'rsrc/css/phui/phui-form.css' => 'b78ec020',
132
132
'rsrc/css/phui/phui-header-view.css' => '39594ac0',
133
133
'rsrc/css/phui/phui-icon.css' => 'b4963a4f',
···
458
458
'rsrc/js/core/behavior-device.js' => '03d6ed07',
459
459
'rsrc/js/core/behavior-drag-and-drop-textarea.js' => '92eb531d',
460
460
'rsrc/js/core/behavior-error-log.js' => 'a5d7cf86',
461
-
'rsrc/js/core/behavior-fancy-datepicker.js' => 'a5573bcd',
461
+
'rsrc/js/core/behavior-fancy-datepicker.js' => 'c51ae228',
462
462
'rsrc/js/core/behavior-file-tree.js' => '88236f00',
463
463
'rsrc/js/core/behavior-form.js' => '5c54cbf3',
464
464
'rsrc/js/core/behavior-gesture.js' => '3ab51e2c',
···
585
585
'javelin-behavior-diffusion-pull-lastmodified' => '2b228192',
586
586
'javelin-behavior-doorkeeper-tag' => 'e5822781',
587
587
'javelin-behavior-error-log' => 'a5d7cf86',
588
-
'javelin-behavior-fancy-datepicker' => 'a5573bcd',
588
+
'javelin-behavior-fancy-datepicker' => 'c51ae228',
589
589
'javelin-behavior-global-drag-and-drop' => '07f199d8',
590
590
'javelin-behavior-herald-rule-editor' => '7ebaeed3',
591
591
'javelin-behavior-high-security-warning' => '8fc1c918',
···
775
775
'phui-font-icon-base-css' => 'eb84f033',
776
776
'phui-fontkit-css' => 'fff25cfa',
777
777
'phui-form-css' => 'b78ec020',
778
-
'phui-form-view-css' => 'ebac1b1d',
778
+
'phui-form-view-css' => 'a2d72756',
779
779
'phui-header-view-css' => '39594ac0',
780
780
'phui-icon-view-css' => 'b4963a4f',
781
781
'phui-image-mask-css' => '5a8b09c8',
···
1455
1455
'javelin-dom',
1456
1456
'phabricator-notification',
1457
1457
),
1458
-
'a5573bcd' => array(
1459
-
'javelin-behavior',
1460
-
'javelin-util',
1461
-
'javelin-dom',
1462
-
'javelin-stratcom',
1463
-
'javelin-vector',
1464
-
),
1465
1458
'a5b67173' => array(
1466
1459
'javelin-dom',
1467
1460
'javelin-util',
···
1644
1637
'javelin-util',
1645
1638
'javelin-vector',
1646
1639
'javelin-stratcom',
1640
+
),
1641
+
'c51ae228' => array(
1642
+
'javelin-behavior',
1643
+
'javelin-util',
1644
+
'javelin-dom',
1645
+
'javelin-stratcom',
1646
+
'javelin-vector',
1647
1647
),
1648
1648
'c60f4327' => array(
1649
1649
'javelin-stratcom',
+4
-1
src/view/form/control/AphrontFormDateControl.php
+4
-1
src/view/form/control/AphrontFormDateControl.php
···
237
237
'disabled' => $disabled,
238
238
));
239
239
240
+
$cicon = id(new PHUIIconView())
241
+
->setIconFont('fa-calendar');
242
+
240
243
$cal_icon = javelin_tag(
241
244
'a',
242
245
array(
···
244
247
'class' => 'calendar-button',
245
248
'sigil' => 'calendar-button',
246
249
),
247
-
'');
250
+
$cicon);
248
251
249
252
$time_sel = javelin_tag(
250
253
'input',
+36
-29
webroot/rsrc/css/phui/phui-form-view.css
+36
-29
webroot/rsrc/css/phui/phui-form-view.css
···
296
296
left: 0px;
297
297
}
298
298
299
-
300
299
.calendar-button {
301
300
display: inline;
302
-
background: url(/rsrc/image/icon/fatcow/calendar_edit.png)
303
-
no-repeat center center;
304
-
padding: 8px 12px;
301
+
padding: 8px 4px;
305
302
margin: 2px 8px 2px 2px;
306
303
position: relative;
307
-
border: 1px solid transparent;
308
304
}
309
305
310
306
.aphront-form-date-container {
···
335
331
336
332
.fancy-datepicker-core {
337
333
padding: 1px;
338
-
font-size: 11px;
339
-
font-family: Verdana;
334
+
font-size: 12px;
340
335
text-align: center;
341
336
}
342
337
···
350
345
351
346
.fancy-datepicker-core .month-table {
352
347
margin-bottom: 6px;
348
+
font-size: 13px;
349
+
background-color: {$hoverblue};
350
+
border-radius: 2px;
353
351
}
354
352
355
353
.fancy-datepicker-core .month-table td.lrbutton {
356
-
width: 20%;
354
+
width: 18%;
355
+
color: {$lightbluetext};
357
356
}
358
357
359
358
.fancy-datepicker-core .month-table td {
360
359
padding: 4px;
361
360
font-weight: bold;
362
-
color: {$darkgreytext};
361
+
color: {$bluetext};
363
362
}
364
363
365
-
.fancy-datepicker-core .month-table td.lrbutton {
366
-
background: #e6e6e6;
367
-
border: 1px solid;
368
-
border-color: #a6a6a6 #969696 #868686 #a6a6a6;
364
+
.fancy-datepicker-core .month-table td.lrbutton:hover {
365
+
border-radius: 2px;
366
+
background: {$hoverselectedblue};
367
+
color: {$darkbluetext};
369
368
}
370
369
371
370
.fancy-datepicker-core .day-table td {
372
371
overflow: hidden;
373
-
background: #f6f6f6;
374
372
vertical-align: center;
375
373
text-align: center;
376
-
border: 1px solid #d6d6d6;
374
+
border: 1px solid {$thinblueborder};
377
375
padding: 4px 0;
376
+
}
377
+
378
+
.fancy-datepicker .fancy-datepicker-core .day-table td.day:hover {
379
+
background-color: {$hoverblue};
380
+
border-color: {$lightblueborder};
378
381
}
379
382
380
383
.fancy-datepicker-core .day-table td.day-placeholder {
···
383
386
}
384
387
385
388
.fancy-datepicker-core .day-table td.weekend {
386
-
color: {$greytext};
387
-
border-color: #e6e6e6;
389
+
color: {$lightgreytext};
390
+
border-color: {$lightgreyborder};
391
+
background: {$lightgreybackground};
388
392
}
389
393
390
394
.fancy-datepicker-core .day-table td.day-name {
···
395
399
}
396
400
397
401
.fancy-datepicker-core .day-table td.today {
398
-
background: #eeee99;
399
-
border-color: #aaaa66;
402
+
background: {$greybackground};
403
+
border-color: {$greyborder};
404
+
color: {$darkgreytext};
405
+
font-weight: bold;
400
406
}
401
407
402
408
.fancy-datepicker-core .day-table td.datepicker-selected {
403
-
background: #0099ff;
404
-
border-color: #0066cc;
409
+
background: {$lightgreen};
410
+
border-color: {$green};
411
+
color: {$green};
405
412
}
406
413
407
414
.fancy-datepicker-core td {
···
412
419
cursor: inherit;
413
420
}
414
421
415
-
.picker-open .calendar-button,
416
-
.fancy-datepicker-core {
417
-
background-color: white;
418
-
border: 1px solid {$greytext};
419
-
420
-
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
422
+
.picker-open .calendar-button .phui-icon-view {
423
+
color: {$sky};
421
424
}
422
425
423
-
.picker-open .calendar-button {
424
-
border-left: 1px solid white;
426
+
.fancy-datepicker-core {
427
+
background-color: white;
428
+
border: 1px solid {$lightblueborder};
429
+
border-bottom: 1px solid {$blueborder};
430
+
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
431
+
border-radius: 3px;
425
432
}
426
433
427
434
.login-to-comment {
+3
-2
webroot/rsrc/js/core/behavior-fancy-datepicker.js
+3
-2
webroot/rsrc/js/core/behavior-fancy-datepicker.js
···
47
47
var p = JX.$V(button);
48
48
var d = JX.Vector.getDim(picker);
49
49
50
-
picker.style.left = (p.x - d.x + 2) + 'px';
51
-
picker.style.top = (p.y - 10) + 'px';
50
+
picker.style.left = (p.x - d.x - 2) + 'px';
51
+
picker.style.top = (p.y) + 'px';
52
52
53
53
JX.DOM.alterClass(root, 'picker-open', true);
54
54
···
205
205
today.getDate() == date.getDate());
206
206
207
207
var classes = [];
208
+
classes.push('day');
208
209
if (is_today) {
209
210
classes.push('today');
210
211
}