From 542b5f17c2ed8610884fe4cb44711927a8a8a0f4 Mon Sep 17 00:00:00 2001 From: yflory Date: Fri, 9 Apr 2021 12:01:59 +0200 Subject: [PATCH] Fix calendar popup UI --- customize.dist/src/less2/include/forms.less | 2 + customize.dist/src/less2/include/tools.less | 4 ++ www/admin/inner.js | 7 +++ www/calendar/app-calendar.less | 69 +++++++++++++++++++-- www/calendar/inner.js | 43 +++++++++++-- www/lib/calendar/date-picker.js | 7 +++ 6 files changed, 121 insertions(+), 11 deletions(-) diff --git a/customize.dist/src/less2/include/forms.less b/customize.dist/src/less2/include/forms.less index e39f95b1b..969c873c7 100644 --- 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) { diff --git a/customize.dist/src/less2/include/tools.less b/customize.dist/src/less2/include/tools.less index 87650ccdd..2b385cf6a 100644 --- 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; } } diff --git a/www/admin/inner.js b/www/admin/inner.js index 1063cec9d..4bbac53ae 100644 --- 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())); diff --git a/www/calendar/app-calendar.less b/www/calendar/app-calendar.less index 55c892c37..f311456da 100644 --- 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 { diff --git a/www/calendar/inner.js b/www/calendar/inner.js index 2128307e6..16ad1866e 100644 --- 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; diff --git a/www/lib/calendar/date-picker.js b/www/lib/calendar/date-picker.js index 36cf7ce9c..bc42dbbeb 100644 --- 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)); }