Skip to content

Commit d2cf190

Browse files
nolimits4webnolimits4web
committed
feat(calendar): tweak design + time picker as popover
1 parent df514dc commit d2cf190

File tree

5 files changed

+57
-29
lines changed

5 files changed

+57
-29
lines changed

‎src/core/components/calendar/calendar-class.js‎

Lines changed: 37 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1505,6 +1505,7 @@ class Calendar extends Framework7Class {
15051505
if (value) timeString = calendar.timeSelectorFormatter(value);
15061506
return (
15071507
<div class="calendar-time-selector">
1508+
<span>{calendar.params.timePickerLabel}</span>
15081509
<a class="link">{timeString || calendar.params.timePickerPlaceholder}</a>
15091510
</div>
15101511
);
@@ -1656,7 +1657,9 @@ class Calendar extends Framework7Class {
16561657
const calendar = this;
16571658
const { $el, app, is12HoursFormat } = calendar;
16581659
if (!$el || !$el.length) return;
1659-
$el.append('<div class="calendar-time-picker"></div>');
1660+
$el.append(
1661+
'<div class="popover calendar-popover calendar-time-picker-popover"><div class="popover-inner"><div class="calendar-time-picker"></div></div></div>',
1662+
);
16601663
const hoursArr = [];
16611664
const minutesArr = [];
16621665
const hoursMin = is12HoursFormat ? 1 : 0;
@@ -1678,10 +1681,39 @@ class Calendar extends Framework7Class {
16781681
if (value[0] > 12) value[0] -= 12;
16791682
if (value[0] === 0) value[0] = 12;
16801683
}
1684+
if (calendar.isPopover()) {
1685+
calendar.modal.params.closeByOutsideClick = false;
1686+
}
1687+
1688+
calendar.timePickerPopover = app.popover.create({
1689+
el: $el.find('.calendar-time-picker-popover'),
1690+
targetEl: $el.find('.calendar-time-selector .link'),
1691+
backdrop: true,
1692+
backdropUnique: true,
1693+
on: {
1694+
close() {
1695+
calendar.closeTimePicker();
1696+
},
1697+
closed() {
1698+
if (calendar.isPopover()) {
1699+
calendar.modal.params.closeByOutsideClick = true;
1700+
}
1701+
if (calendar.timePickerPopover.$el) calendar.timePickerPopover.$el.remove();
1702+
calendar.timePickerPopover.destroy();
1703+
if (calendar.timePickerInstance) {
1704+
calendar.timePickerInstance.close();
1705+
calendar.timePickerInstance.destroy();
1706+
}
1707+
delete calendar.timePickerInstance;
1708+
delete calendar.timePickerPopover;
1709+
},
1710+
},
1711+
});
1712+
calendar.timePickerPopover.open();
16811713
calendar.timePickerInstance = app.picker.create({
1682-
containerEl: $el.find('.calendar-time-picker'),
1714+
containerEl: calendar.timePickerPopover.$el.find('.calendar-time-picker'),
16831715
value,
1684-
toolbar: true,
1716+
toolbar: false,
16851717
rotateEffect: false,
16861718
toolbarCloseText: calendar.params.toolbarCloseText,
16871719
cols: [
@@ -1705,10 +1737,6 @@ class Calendar extends Framework7Class {
17051737
: []),
17061738
],
17071739
});
1708-
calendar.timePickerInstance.$el
1709-
.find('.toolbar a')
1710-
.removeClass('sheet-close popover-close')
1711-
.addClass('calendar-time-picker-close');
17121740
}
17131741

17141742
closeTimePicker() {
@@ -1736,12 +1764,8 @@ class Calendar extends Framework7Class {
17361764
value.setHours(hours, minutes);
17371765
}
17381766
calendar.setValue([value]);
1739-
calendar.timePickerInstance.close();
1740-
calendar.timePickerInstance.destroy();
1741-
delete calendar.timePickerInstance;
1742-
}
1743-
if (calendar.$el && calendar.$el.length) {
1744-
calendar.$el.find('.calendar-time-picker').remove();
1767+
if (calendar.timePickerPopover && calendar.timePickerPopover.opened)
1768+
calendar.timePickerPopover.close();
17451769
}
17461770
}
17471771

‎src/core/components/calendar/calendar-vars.less‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -14,16 +14,14 @@
1414
--f7-calendar-footer-border-color: var(--f7-bars-border-color);
1515
--f7-calendar-footer-link-color: var(--f7-bars-link-color);
1616
--f7-calendar-footer-text-color: var(--f7-bars-text-color);
17-
--f7-calendar-week-header-bg-color: var(--f7-bars-bg-color);
18-
--f7-calendar-week-header-text-color: var(--f7-bars-text-color);
1917
*/
18+
--f7-calendar-week-header-bg-color: transparent;
2019
--f7-calendar-footer-padding: 0 8px;
2120
--f7-calendar-week-header-font-size: 11px;
2221
--f7-calendar-selected-text-color: #fff;
2322
/*
2423
--f7-calendar-selected-bg-color: var(--f7-theme-color);
2524
*/
26-
--f7-calendar-prev-next-text-color: #b8b8b8;
2725
--f7-calendar-disabled-text-color: #d4d4d4;
2826
--f7-calendar-event-dot-size: 4px;
2927
/*
@@ -34,15 +32,19 @@
3432
*/
3533
--f7-calendar-time-selector-height: 28px;
3634
.light-vars({
35+
--f7-calendar-week-header-text-color: #5e5e5e;
36+
--f7-calendar-prev-next-text-color: #c8c8c8;
3737
--f7-calendar-day-text-color: #000;
3838
--f7-calendar-sheet-bg-color: #fff;
3939
--f7-calendar-modal-bg-color: #fff;
4040
--f7-calendar-picker-bg-color: #fff;
4141
--f7-calendar-picker-pressed-bg-color: rgba(0,0,0,0.1);
4242
--f7-calendar-picker-hover-bg-color: rgba(0,0,0,0.03);
43-
--f7-calendar-time-selector-bg-color: rgba(0,0,0,0.1);
43+
--f7-calendar-time-selector-bg-color: rgba(0,0,0,0.05);
4444
});
4545
.dark-vars({
46+
--f7-calendar-week-header-text-color: #aaa;
47+
--f7-calendar-prev-next-text-color: #5e5e5e;
4648
--f7-calendar-sheet-border-color: var(--f7-bars-border-color);
4749
--f7-calendar-modal-bg-color: #121212;
4850
--f7-calendar-sheet-bg-color: #121212;
@@ -66,12 +68,10 @@
6668
--f7-calendar-picker-font-size: 17px;
6769
--f7-calendar-time-selector-font-size: 17px;
6870
.light-vars({
69-
--f7-calendar-row-border-color: rgba(0,0,0,0.25);
7071
--f7-calendar-today-text-color: #000;
7172
--f7-calendar-today-bg-color: #e3e3e3;
7273
});
7374
.dark-vars({
74-
--f7-calendar-row-border-color: var(--f7-bars-border-color);
7575
--f7-calendar-day-text-color: #fff;
7676
--f7-calendar-today-text-color: #fff;
7777
--f7-calendar-today-bg-color: #333;
@@ -86,7 +86,6 @@
8686
--f7-calendar-footer-height: 48px;
8787
--f7-calendar-footer-font-size: 14px;
8888
--f7-calendar-week-header-height: 24px;
89-
--f7-calendar-row-border-color: transparent;
9089
--f7-calendar-day-font-size: 14px;
9190
/*
9291
--f7-calendar-today-text-color: var(--f7-theme-color);
@@ -113,7 +112,6 @@
113112
--f7-calendar-day-size: 32px;
114113
--f7-calendar-picker-font-size: 16px;
115114
--f7-calendar-time-selector-font-size: 14px;
116-
--f7-calendar-row-border-color: transparent;
117115
.light-vars({
118116
--f7-calendar-today-text-color: #000;
119117
--f7-calendar-today-bg-color: #e3e3e3;

‎src/core/components/calendar/calendar.d.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -143,6 +143,8 @@ export namespace Calendar {
143143
yearPickerMax?: number;
144144
/** Enables time picker (default false) */
145145
timePicker?: boolean;
146+
/** Time picker label text (default "Time") */
147+
timePickerLabel?: string;
146148
/** Time format displayed in time selector. (default { hour: 'numeric', minute: 'numeric' }) */
147149
timePickerFormat?: Intl.DateTimeFormatOptions;
148150
/** Text to display in time selector placeholder. (default "Select time") */

‎src/core/components/calendar/calendar.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ export default {
5454
yearPickerMin: undefined,
5555
yearPickerMax: undefined,
5656
timePicker: false,
57+
timePickerLabel: 'Time',
5758
timePickerFormat: { hour: 'numeric', minute: 'numeric' },
5859
timePickerPlaceholder: 'Select time',
5960
weekHeader: true,

‎src/core/components/calendar/calendar.less‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -186,7 +186,6 @@
186186
box-sizing: border-box;
187187
padding-left: var(--f7-safe-area-left);
188188
padding-right: var(--f7-safe-area-right);
189-
.hairline(top, var(--f7-calendar-row-border-color));
190189
}
191190
.calendar-modal,
192191
.calendar-popover {
@@ -325,6 +324,7 @@
325324
background: var(--f7-calendar-picker-bg-color);
326325
z-index: 1000;
327326
user-select: none;
327+
background: transparent;
328328
}
329329
.calendar-month-picker,
330330
.calendar-year-picker {
@@ -361,8 +361,6 @@
361361
}
362362
.calendar-month-picker-item {
363363
padding: 5px;
364-
.hairline(bottom, var(--f7-calendar-row-border-color));
365-
.hairline(left, var(--f7-calendar-row-border-color));
366364
}
367365
.sheet-modal .calendar-month-picker-item {
368366
width: 25%;
@@ -397,16 +395,15 @@
397395
height: 34px;
398396
line-height: 34px;
399397
width: 100%;
400-
.hairline(bottom, var(--f7-calendar-row-border-color));
401398
}
402399

403400
.calendar-time-selector {
404401
flex-shrink: 0;
405402
font-size: var(--f7-calendar-time-selector-font-size);
406403
position: relative;
407-
.hairline(top, var(--f7-calendar-row-border-color));
408404
display: flex;
409-
justify-content: center;
405+
justify-content: space-between;
406+
align-items: center;
410407
padding: 12px 16px;
411408
a {
412409
overflow: hidden;
@@ -415,17 +412,23 @@
415412
justify-content: center;
416413
align-items: center;
417414
display: flex;
418-
min-width: 200px;
419415
box-sizing: border-box;
420416
height: var(--f7-calendar-time-selector-height);
421417
background-color: var(--f7-calendar-time-selector-bg-color);
422-
padding: 0 10px;
418+
padding: 0 16px;
423419
border-radius: 8px;
424420
}
421+
> span {
422+
font-weight: 500;
423+
}
425424
.segmented {
426425
margin-left: 8px;
427426
}
428427
}
428+
.calendar-time-picker-popover {
429+
height: 240px;
430+
width: 240px;
431+
}
429432
.calendar-time-picker {
430433
--f7-picker-popover-height: 100%;
431434
--f7-picker-inline-height: 100%;

0 commit comments

Comments
 (0)