feat(calendar): tweak design + time picker as popover

framework7io · Feb 7, 2022 · d2cf190 · d2cf190
1 parent df514dc
commit d2cf190
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 29 deletions.
diff --git a/src/core/components/calendar/calendar-class.js b/src/core/components/calendar/calendar-class.js
@@ -1505,6 +1505,7 @@ class Calendar extends Framework7Class {
     if (value) timeString = calendar.timeSelectorFormatter(value);
     return (
       <div class="calendar-time-selector">
+        <span>{calendar.params.timePickerLabel}</span>
         <a class="link">{timeString || calendar.params.timePickerPlaceholder}</a>
       </div>
     );
@@ -1656,7 +1657,9 @@ class Calendar extends Framework7Class {
     const calendar = this;
     const { $el, app, is12HoursFormat } = calendar;
     if (!$el || !$el.length) return;
-    $el.append('<div class="calendar-time-picker"></div>');
+    $el.append(
+      '<div class="popover calendar-popover calendar-time-picker-popover"><div class="popover-inner"><div class="calendar-time-picker"></div></div></div>',
+    );
     const hoursArr = [];
     const minutesArr = [];
     const hoursMin = is12HoursFormat ? 1 : 0;
@@ -1678,10 +1681,39 @@ class Calendar extends Framework7Class {
       if (value[0] > 12) value[0] -= 12;
       if (value[0] === 0) value[0] = 12;
     }
+    if (calendar.isPopover()) {
+      calendar.modal.params.closeByOutsideClick = false;
+    }
+
+    calendar.timePickerPopover = app.popover.create({
+      el: $el.find('.calendar-time-picker-popover'),
+      targetEl: $el.find('.calendar-time-selector .link'),
+      backdrop: true,
+      backdropUnique: true,
+      on: {
+        close() {
+          calendar.closeTimePicker();
+        },
+        closed() {
+          if (calendar.isPopover()) {
+            calendar.modal.params.closeByOutsideClick = true;
+          }
+          if (calendar.timePickerPopover.$el) calendar.timePickerPopover.$el.remove();
+          calendar.timePickerPopover.destroy();
+          if (calendar.timePickerInstance) {
+            calendar.timePickerInstance.close();
+            calendar.timePickerInstance.destroy();
+          }
+          delete calendar.timePickerInstance;
+          delete calendar.timePickerPopover;
+        },
+      },
+    });
+    calendar.timePickerPopover.open();
     calendar.timePickerInstance = app.picker.create({
-      containerEl: $el.find('.calendar-time-picker'),
+      containerEl: calendar.timePickerPopover.$el.find('.calendar-time-picker'),
       value,
-      toolbar: true,
+      toolbar: false,
       rotateEffect: false,
       toolbarCloseText: calendar.params.toolbarCloseText,
       cols: [
@@ -1705,10 +1737,6 @@ class Calendar extends Framework7Class {
           : []),
       ],
     });
-    calendar.timePickerInstance.$el
-      .find('.toolbar a')
-      .removeClass('sheet-close popover-close')
-      .addClass('calendar-time-picker-close');
   }
 
   closeTimePicker() {
@@ -1736,12 +1764,8 @@ class Calendar extends Framework7Class {
         value.setHours(hours, minutes);
       }
       calendar.setValue([value]);
-      calendar.timePickerInstance.close();
-      calendar.timePickerInstance.destroy();
-      delete calendar.timePickerInstance;
-    }
-    if (calendar.$el && calendar.$el.length) {
-      calendar.$el.find('.calendar-time-picker').remove();
+      if (calendar.timePickerPopover && calendar.timePickerPopover.opened)
+        calendar.timePickerPopover.close();
     }
   }
 

diff --git a/src/core/components/calendar/calendar-vars.less b/src/core/components/calendar/calendar-vars.less
@@ -14,16 +14,14 @@
   --f7-calendar-footer-border-color: var(--f7-bars-border-color);
   --f7-calendar-footer-link-color: var(--f7-bars-link-color);
   --f7-calendar-footer-text-color: var(--f7-bars-text-color);
-  --f7-calendar-week-header-bg-color: var(--f7-bars-bg-color);
-  --f7-calendar-week-header-text-color: var(--f7-bars-text-color);
   */
+  --f7-calendar-week-header-bg-color: transparent;
   --f7-calendar-footer-padding: 0 8px;
   --f7-calendar-week-header-font-size: 11px;
   --f7-calendar-selected-text-color: #fff;
   /*
   --f7-calendar-selected-bg-color:  var(--f7-theme-color);
   */
-  --f7-calendar-prev-next-text-color: #b8b8b8;
   --f7-calendar-disabled-text-color: #d4d4d4;
   --f7-calendar-event-dot-size: 4px;
   /*
@@ -34,15 +32,19 @@
   */
   --f7-calendar-time-selector-height: 28px;
   .light-vars({
+    --f7-calendar-week-header-text-color: #5e5e5e;
+    --f7-calendar-prev-next-text-color: #c8c8c8;
     --f7-calendar-day-text-color:  #000;
     --f7-calendar-sheet-bg-color: #fff;
     --f7-calendar-modal-bg-color: #fff;
     --f7-calendar-picker-bg-color: #fff;
     --f7-calendar-picker-pressed-bg-color: rgba(0,0,0,0.1);
     --f7-calendar-picker-hover-bg-color: rgba(0,0,0,0.03);
-    --f7-calendar-time-selector-bg-color: rgba(0,0,0,0.1);
+    --f7-calendar-time-selector-bg-color: rgba(0,0,0,0.05);
   });
   .dark-vars({
+    --f7-calendar-week-header-text-color: #aaa;
+    --f7-calendar-prev-next-text-color: #5e5e5e;
     --f7-calendar-sheet-border-color: var(--f7-bars-border-color);
     --f7-calendar-modal-bg-color: #121212;
     --f7-calendar-sheet-bg-color: #121212;
@@ -66,12 +68,10 @@
   --f7-calendar-picker-font-size: 17px;
   --f7-calendar-time-selector-font-size: 17px;
   .light-vars({
-    --f7-calendar-row-border-color: rgba(0,0,0,0.25);
     --f7-calendar-today-text-color: #000;
     --f7-calendar-today-bg-color: #e3e3e3;
   });
   .dark-vars({
-    --f7-calendar-row-border-color: var(--f7-bars-border-color);
     --f7-calendar-day-text-color: #fff;
     --f7-calendar-today-text-color: #fff;
     --f7-calendar-today-bg-color: #333;
@@ -86,7 +86,6 @@
   --f7-calendar-footer-height: 48px;
   --f7-calendar-footer-font-size: 14px;
   --f7-calendar-week-header-height: 24px;
-  --f7-calendar-row-border-color: transparent;
   --f7-calendar-day-font-size: 14px;
   /*
   --f7-calendar-today-text-color: var(--f7-theme-color);
@@ -113,7 +112,6 @@
   --f7-calendar-day-size: 32px;
   --f7-calendar-picker-font-size: 16px;
   --f7-calendar-time-selector-font-size: 14px;
-  --f7-calendar-row-border-color: transparent;
   .light-vars({
     --f7-calendar-today-text-color: #000;
     --f7-calendar-today-bg-color: #e3e3e3;

diff --git a/src/core/components/calendar/calendar.d.ts b/src/core/components/calendar/calendar.d.ts
@@ -143,6 +143,8 @@ export namespace Calendar {
     yearPickerMax?: number;
     /** Enables time picker (default false) */
     timePicker?: boolean;
+    /** Time picker label text (default "Time") */
+    timePickerLabel?: string;
     /** Time format displayed in time selector. (default { hour: 'numeric', minute: 'numeric' }) */
     timePickerFormat?: Intl.DateTimeFormatOptions;
     /** Text to display in time selector placeholder. (default "Select time") */

diff --git a/src/core/components/calendar/calendar.js b/src/core/components/calendar/calendar.js
@@ -54,6 +54,7 @@ export default {
       yearPickerMin: undefined,
       yearPickerMax: undefined,
       timePicker: false,
+      timePickerLabel: 'Time',
       timePickerFormat: { hour: 'numeric', minute: 'numeric' },
       timePickerPlaceholder: 'Select time',
       weekHeader: true,

diff --git a/src/core/components/calendar/calendar.less b/src/core/components/calendar/calendar.less
@@ -186,7 +186,6 @@
   box-sizing: border-box;
   padding-left: var(--f7-safe-area-left);
   padding-right: var(--f7-safe-area-right);
-  .hairline(top, var(--f7-calendar-row-border-color));
 }
 .calendar-modal,
 .calendar-popover {
@@ -325,6 +324,7 @@
   background: var(--f7-calendar-picker-bg-color);
   z-index: 1000;
   user-select: none;
+  background: transparent;
 }
 .calendar-month-picker,
 .calendar-year-picker {
@@ -361,8 +361,6 @@
 }
 .calendar-month-picker-item {
   padding: 5px;
-  .hairline(bottom, var(--f7-calendar-row-border-color));
-  .hairline(left, var(--f7-calendar-row-border-color));
 }
 .sheet-modal .calendar-month-picker-item {
   width: 25%;
@@ -397,16 +395,15 @@
   height: 34px;
   line-height: 34px;
   width: 100%;
-  .hairline(bottom, var(--f7-calendar-row-border-color));
 }
 
 .calendar-time-selector {
   flex-shrink: 0;
   font-size: var(--f7-calendar-time-selector-font-size);
   position: relative;
-  .hairline(top, var(--f7-calendar-row-border-color));
   display: flex;
-  justify-content: center;
+  justify-content: space-between;
+  align-items: center;
   padding: 12px 16px;
   a {
     overflow: hidden;
@@ -415,17 +412,23 @@
     justify-content: center;
     align-items: center;
     display: flex;
-    min-width: 200px;
     box-sizing: border-box;
     height: var(--f7-calendar-time-selector-height);
     background-color: var(--f7-calendar-time-selector-bg-color);
-    padding: 0 10px;
+    padding: 0 16px;
     border-radius: 8px;
   }
+  > span {
+    font-weight: 500;
+  }
   .segmented {
     margin-left: 8px;
   }
 }
+.calendar-time-picker-popover {
+  height: 240px;
+  width: 240px;
+}
 .calendar-time-picker {
   --f7-picker-popover-height: 100%;
   --f7-picker-inline-height: 100%;