Fix calendar popup UI

2021-04-09 12:01:59 +02:00 · 2021-04-09 12:01:59 +02:00 · 542b5f17c2
parent 8ee017f982
commit 542b5f17c2
6 changed files with 121 additions and 11 deletions
--- a/customize.dist/src/less2/include/forms.less
+++ b/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) {
--- a/customize.dist/src/less2/include/tools.less
+++ b/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;
    }
 }

--- a/www/admin/inner.js
+++ b/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()));
--- a/www/calendar/app-calendar.less
+++ b/www/calendar/app-calendar.less
@ -48,21 +48,40 @@
        .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;
+                &: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,11 +90,49 @@
        }
        .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;
+            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 {
--- a/www/calendar/inner.js
+++ b/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;
--- a/www/lib/calendar/date-picker.js
+++ b/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));
            }