Fix calendar popup UI

customize.dist/src/less2/include/forms.less

@@ -1,5 +1,6 @@
 @import (reference) "./colortheme-all.less";
 @import (reference) "./variables.less";
+@import (reference) "./tools.less";
 
 .forms_main() {
     --LessLoader_require: LessLoader_currentFile();
@@ -26,6 +27,7 @@
             border-color: @cp_forms-readonly-border;
             color: @cp_forms-fg;
         }
+        .tools_placeholder-color();
     }
 
     input:not(.form-control) {

customize.dist/src/less2/include/tools.less

@@ -4,16 +4,20 @@
     @color: @cp_forms-placeholder;
     &::-webkit-input-placeholder { /* WebKit, Blink, Edge */
         color: @color;
+        font-weight: normal;
     }
     &::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
         color: @color;
         opacity: 1; /* Firefox */
+        font-weight: normal;
     }
     &:-ms-input-placeholder { /* Internet Explorer 10-11 */
         color: @color;
+        font-weight: normal;
     }
     &::-ms-input-placeholder { /* Microsoft Edge */
         color: @color;
+        font-weight: normal;
     }
 }
 

www/admin/inner.js

@@ -1322,12 +1322,19 @@ define([
             var $start = $(start);
             var $end = $(end);
             // XXX new Date().toLocaleString('fr-fr', {month: 'long'}).replace(/./, c => c.toUpperCase())
+            var is24h = false
+            try {
+                is24h = !new Intl.DateTimeFormat(navigator.language, { hour: 'numeric' }).format(0).match(/AM/);
+            } catch (e) {}
+
             var endPickr = Flatpickr(end, { // XXX translations?
                 enableTime: true,
+                time_24hr: is24h,
                 minDate: new Date()
             });
             Flatpickr(start, {
                 enableTime: true,
+                time_24hr: is24h,
                 minDate: new Date(),
                 onChange: function () {
                     endPickr.set('minDate', new Date($start.val()));

www/calendar/app-calendar.less

@@ -48,20 +48,39 @@
         .tui-full-calendar-popup-container {
             background: @cp_flatpickr-bg;
             color: @cryptpad_text_col;
+            .tui-full-calendar-icon:not(.tui-full-calendar-calendar-dot):not(.tui-full-calendar-dropdown-arrow):not(.tui-full-calendar-ic-checkbox) {
+                display: none;
+            }
+        }
+        li.tui-full-calendar-popup-section-item {
+            padding: 0 6px;
+            height: 32px;
         }
         .tui-full-calendar-popup-section-item {
             height: auto;
+            margin: 0;
+            &:not(li):not(button) {
+                padding: 0;
+                margin-top: 5px;
+            }
+            #tui-full-calendar-schedule-calendar {
+                width: 179px;
+            }
             &:not(button) {
                 border: none;
                 display: inline-flex;
                 align-items: center;
-                padding-left: 0;
-                input { flex: 1; }
+                &:hover {
+                    background-color: @cp_dropdown-bg-hover;
+                }
+                .tui-full-calendar-content {
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    font: @colortheme_app-font;
                 }
+                input { flex: 1; }
             }
-        .tui-full-calendar-popup-section {
-            display: flex;
-            align-items: center;
         }
         .tui-full-calendar-section-date-dash {
             height: auto;
@@ -71,12 +90,50 @@
         }
         .tui-full-calendar-dropdown-menu {
             top: 38px;
+            width: 221px; // same as button
             background-color: @cp_dropdown-bg;
             color: @cp_dropdown-fg;
         }
         .tui-full-calendar-section-state, #tui-full-calendar-schedule-private {
+            display: none !important;
+        }
+
+        .tui-full-calendar-popup:not(.tui-full-calendar-popup-detail) {
+            .tui-full-calendar-section-calendar {
+                width: 221px; // 50%
+            }
+            .tui-full-calendar-popup-section {
+                display: flex;
+                align-items: center;
+                flex-wrap: wrap;
+                .tui-full-calendar-section-start-date, .tui-full-calendar-section-end-date {
+                    flex: 1;
+                }
+                .tui-full-calendar-section-allday {
+                    width: 100%;
+                    height: 32px;
+                }
+            }
+        }
+        .tui-full-calendar-popup-detail {
+            font: @colortheme_app-font;
+            color: @cryptpad_text_col;
+            .tui-full-calendar-popup-container {
+                padding-bottom: 17px;
+            }
+            .tui-full-calendar-popup-detail-date {
+                font-size: 14px;
+            }
+            .tui-full-calendar-section-button {
+                border: 0;
+                button {
+                    margin: 0;
+                }
+            }
+            .tui-full-calendar-popup-vertical-line {
                 display: none;
             }
+        }
 
         .cp-calendar-close {
             height: auto;

www/calendar/inner.js

@@ -68,6 +68,8 @@ Messages.calendar_tempCalendar = "Temp calendar";
 Messages.calendar_import = "Import to my calendars";
 Messages.calendar_newEvent = "New event";
 Messages.calendar_new = "New calendar";
+Messages.calendar_dateRange = "{0} - {1}";
+Messages.calendar_dateTimeRange = "{0} {1} - {2}";
 
     var onCalendarsUpdate = Util.mkEvent();
 
@@ -223,6 +225,33 @@ Messages.calendar_new = "New calendar";
         },
         timegridDisplayTime: getTime,
         timegridDisplayPrimaryTime: getTime,
+        popupDetailDate: function(isAllDay, start, end) {
+            var isSameDate = +start._date === +end._date;
+
+            var startDate = start._date.toLocaleDateString();
+            var endDate = end._date.toLocaleDateString();
+            if (isAllDay) {
+                if (startDate === endDate) { return startDate; }
+                return Messages._getKey('calendar_dateRange', [startDate, endDate]);
+            }
+
+            var startTime = getTime({
+                hour: start._date.getHours(),
+                minutes: start._date.getMinutes(),
+            });
+            var endTime = getTime({
+                hour: end._date.getHours(),
+                minutes: end._date.getMinutes(),
+            });
+
+            if (startDate === endDate && startTime === endTime) {
+                return start._date.toLocaleString();
+            }
+            if (startDate === endDate) {
+                return Messages._getKey('calendar_dateTimeRange', [startDate, startTime, endTime]);
+            }
+            return Messages._getKey('calendar_dateRange', [start._date.toLocaleString(), end._date.toLocaleString()]);
+        }
     };
 
     // XXX Note: always create calendars in your own proxy. If you want a team calendar, you can share it with the team later.
@@ -715,11 +744,11 @@ Messages.calendar_new = "New calendar";
         APP.toolbar.$bottomR.append($block);
 
         // New event button
-        var newEvent = h('button', [
+        var newEventBtn = h('button', [
             h('i.fa.fa-plus'),
             h('span', Messages.calendar_newEvent)
         ]);
-        $(newEvent).click(function (e) {
+        $(newEventBtn).click(function (e) {
             e.preventDefault();
             cal.openCreationPopup({isAllDay:false});
         }).appendTo(APP.toolbar.$bottomL);
@@ -808,7 +837,7 @@ Messages.calendar_new = "New calendar";
         // Customize creation/update popup
         var onCalendarPopup = function (el) {
             var $el = $(el);
-            $el.find('.tui-full-calendar-confirm').addClass('btn btn-primary');
+            $el.find('.tui-full-calendar-confirm').addClass('btn btn-primary').prepend(h('i.fa.fa-floppy-o'));
             $el.find('input').attr('autocomplete', 'off');
             $el.find('.tui-full-calendar-dropdown-button').addClass('btn btn-secondary');
             $el.find('.tui-full-calendar-popup-close').addClass('btn btn-cancel fa fa-times cp-calendar-close').empty();
@@ -834,8 +863,12 @@ Messages.calendar_new = "New calendar";
             if (!isUpdate) { $el.find('.tui-full-calendar-dropdown-menu li').first().click(); }
         };
         var onCalendarEditPopup = function (el) {
-            el = el;
-            // TODO
+            var $el = $(el);
+            $el.find('.tui-full-calendar-popup-edit').addClass('btn btn-primary');
+            $el.find('.tui-full-calendar-popup-edit .tui-full-calendar-icon').addClass('fa fa-pencil').removeClass('tui-full-calendar-icon');
+            $el.find('.tui-full-calendar-popup-delete').addClass('btn btn-danger');
+            $el.find('.tui-full-calendar-popup-delete .tui-full-calendar-icon').addClass('fa fa-trash').removeClass('tui-full-calendar-icon');
+            $el.find('.tui-full-calendar-content').removeClass('tui-full-calendar-content');
         };
         var onPopupRemoved = function () {
             var start, end;

www/lib/calendar/date-picker.js

@@ -8,9 +8,15 @@ define([
         var start = cfg.startpicker;
         var end = cfg.endpicker;
 
+        var is24h = false
+        try {
+            is24h = !new Intl.DateTimeFormat(navigator.language, { hour: 'numeric' }).format(0).match(/AM/);
+        } catch (e) {}
+
         var e = $(end.input)[0];
         var endPickr = Flatpickr(e, {
             enableTime: true,
+            time_24hr: is24h,
             minDate: start.date
         });
         endPickr.setDate(end.date);
@@ -18,6 +24,7 @@ define([
         var s = $(start.input)[0];
         var startPickr = Flatpickr(s, {
             enableTime: true,
+            time_24hr: is24h,
             onChange: function () {
                 endPickr.set('minDate', startPickr.parseDate(s.value));
             }