Fix calendar popup UI
This commit is contained in:
parent
8ee017f982
commit
542b5f17c2
6 changed files with 121 additions and 11 deletions
|
@ -1,5 +1,6 @@
|
||||||
@import (reference) "./colortheme-all.less";
|
@import (reference) "./colortheme-all.less";
|
||||||
@import (reference) "./variables.less";
|
@import (reference) "./variables.less";
|
||||||
|
@import (reference) "./tools.less";
|
||||||
|
|
||||||
.forms_main() {
|
.forms_main() {
|
||||||
--LessLoader_require: LessLoader_currentFile();
|
--LessLoader_require: LessLoader_currentFile();
|
||||||
|
@ -26,6 +27,7 @@
|
||||||
border-color: @cp_forms-readonly-border;
|
border-color: @cp_forms-readonly-border;
|
||||||
color: @cp_forms-fg;
|
color: @cp_forms-fg;
|
||||||
}
|
}
|
||||||
|
.tools_placeholder-color();
|
||||||
}
|
}
|
||||||
|
|
||||||
input:not(.form-control) {
|
input:not(.form-control) {
|
||||||
|
|
|
@ -4,16 +4,20 @@
|
||||||
@color: @cp_forms-placeholder;
|
@color: @cp_forms-placeholder;
|
||||||
&::-webkit-input-placeholder { /* WebKit, Blink, Edge */
|
&::-webkit-input-placeholder { /* WebKit, Blink, Edge */
|
||||||
color: @color;
|
color: @color;
|
||||||
|
font-weight: normal;
|
||||||
}
|
}
|
||||||
&::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
|
&::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
|
||||||
color: @color;
|
color: @color;
|
||||||
opacity: 1; /* Firefox */
|
opacity: 1; /* Firefox */
|
||||||
|
font-weight: normal;
|
||||||
}
|
}
|
||||||
&:-ms-input-placeholder { /* Internet Explorer 10-11 */
|
&:-ms-input-placeholder { /* Internet Explorer 10-11 */
|
||||||
color: @color;
|
color: @color;
|
||||||
|
font-weight: normal;
|
||||||
}
|
}
|
||||||
&::-ms-input-placeholder { /* Microsoft Edge */
|
&::-ms-input-placeholder { /* Microsoft Edge */
|
||||||
color: @color;
|
color: @color;
|
||||||
|
font-weight: normal;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1322,12 +1322,19 @@ define([
|
||||||
var $start = $(start);
|
var $start = $(start);
|
||||||
var $end = $(end);
|
var $end = $(end);
|
||||||
// XXX new Date().toLocaleString('fr-fr', {month: 'long'}).replace(/./, c => c.toUpperCase())
|
// 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?
|
var endPickr = Flatpickr(end, { // XXX translations?
|
||||||
enableTime: true,
|
enableTime: true,
|
||||||
|
time_24hr: is24h,
|
||||||
minDate: new Date()
|
minDate: new Date()
|
||||||
});
|
});
|
||||||
Flatpickr(start, {
|
Flatpickr(start, {
|
||||||
enableTime: true,
|
enableTime: true,
|
||||||
|
time_24hr: is24h,
|
||||||
minDate: new Date(),
|
minDate: new Date(),
|
||||||
onChange: function () {
|
onChange: function () {
|
||||||
endPickr.set('minDate', new Date($start.val()));
|
endPickr.set('minDate', new Date($start.val()));
|
||||||
|
|
|
@ -48,21 +48,40 @@
|
||||||
.tui-full-calendar-popup-container {
|
.tui-full-calendar-popup-container {
|
||||||
background: @cp_flatpickr-bg;
|
background: @cp_flatpickr-bg;
|
||||||
color: @cryptpad_text_col;
|
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 {
|
.tui-full-calendar-popup-section-item {
|
||||||
height: auto;
|
height: auto;
|
||||||
|
margin: 0;
|
||||||
|
&:not(li):not(button) {
|
||||||
|
padding: 0;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
#tui-full-calendar-schedule-calendar {
|
||||||
|
width: 179px;
|
||||||
|
}
|
||||||
&:not(button) {
|
&:not(button) {
|
||||||
border: none;
|
border: none;
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
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; }
|
input { flex: 1; }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.tui-full-calendar-popup-section {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
.tui-full-calendar-section-date-dash {
|
.tui-full-calendar-section-date-dash {
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
@ -71,11 +90,49 @@
|
||||||
}
|
}
|
||||||
.tui-full-calendar-dropdown-menu {
|
.tui-full-calendar-dropdown-menu {
|
||||||
top: 38px;
|
top: 38px;
|
||||||
|
width: 221px; // same as button
|
||||||
background-color: @cp_dropdown-bg;
|
background-color: @cp_dropdown-bg;
|
||||||
color: @cp_dropdown-fg;
|
color: @cp_dropdown-fg;
|
||||||
}
|
}
|
||||||
.tui-full-calendar-section-state, #tui-full-calendar-schedule-private {
|
.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 {
|
.cp-calendar-close {
|
||||||
|
|
|
@ -68,6 +68,8 @@ Messages.calendar_tempCalendar = "Temp calendar";
|
||||||
Messages.calendar_import = "Import to my calendars";
|
Messages.calendar_import = "Import to my calendars";
|
||||||
Messages.calendar_newEvent = "New event";
|
Messages.calendar_newEvent = "New event";
|
||||||
Messages.calendar_new = "New calendar";
|
Messages.calendar_new = "New calendar";
|
||||||
|
Messages.calendar_dateRange = "{0} - {1}";
|
||||||
|
Messages.calendar_dateTimeRange = "{0} {1} - {2}";
|
||||||
|
|
||||||
var onCalendarsUpdate = Util.mkEvent();
|
var onCalendarsUpdate = Util.mkEvent();
|
||||||
|
|
||||||
|
@ -223,6 +225,33 @@ Messages.calendar_new = "New calendar";
|
||||||
},
|
},
|
||||||
timegridDisplayTime: getTime,
|
timegridDisplayTime: getTime,
|
||||||
timegridDisplayPrimaryTime: 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.
|
// 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);
|
APP.toolbar.$bottomR.append($block);
|
||||||
|
|
||||||
// New event button
|
// New event button
|
||||||
var newEvent = h('button', [
|
var newEventBtn = h('button', [
|
||||||
h('i.fa.fa-plus'),
|
h('i.fa.fa-plus'),
|
||||||
h('span', Messages.calendar_newEvent)
|
h('span', Messages.calendar_newEvent)
|
||||||
]);
|
]);
|
||||||
$(newEvent).click(function (e) {
|
$(newEventBtn).click(function (e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
cal.openCreationPopup({isAllDay:false});
|
cal.openCreationPopup({isAllDay:false});
|
||||||
}).appendTo(APP.toolbar.$bottomL);
|
}).appendTo(APP.toolbar.$bottomL);
|
||||||
|
@ -808,7 +837,7 @@ Messages.calendar_new = "New calendar";
|
||||||
// Customize creation/update popup
|
// Customize creation/update popup
|
||||||
var onCalendarPopup = function (el) {
|
var onCalendarPopup = function (el) {
|
||||||
var $el = $(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('input').attr('autocomplete', 'off');
|
||||||
$el.find('.tui-full-calendar-dropdown-button').addClass('btn btn-secondary');
|
$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();
|
$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(); }
|
if (!isUpdate) { $el.find('.tui-full-calendar-dropdown-menu li').first().click(); }
|
||||||
};
|
};
|
||||||
var onCalendarEditPopup = function (el) {
|
var onCalendarEditPopup = function (el) {
|
||||||
el = el;
|
var $el = $(el);
|
||||||
// TODO
|
$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 onPopupRemoved = function () {
|
||||||
var start, end;
|
var start, end;
|
||||||
|
|
|
@ -8,9 +8,15 @@ define([
|
||||||
var start = cfg.startpicker;
|
var start = cfg.startpicker;
|
||||||
var end = cfg.endpicker;
|
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 e = $(end.input)[0];
|
||||||
var endPickr = Flatpickr(e, {
|
var endPickr = Flatpickr(e, {
|
||||||
enableTime: true,
|
enableTime: true,
|
||||||
|
time_24hr: is24h,
|
||||||
minDate: start.date
|
minDate: start.date
|
||||||
});
|
});
|
||||||
endPickr.setDate(end.date);
|
endPickr.setDate(end.date);
|
||||||
|
@ -18,6 +24,7 @@ define([
|
||||||
var s = $(start.input)[0];
|
var s = $(start.input)[0];
|
||||||
var startPickr = Flatpickr(s, {
|
var startPickr = Flatpickr(s, {
|
||||||
enableTime: true,
|
enableTime: true,
|
||||||
|
time_24hr: is24h,
|
||||||
onChange: function () {
|
onChange: function () {
|
||||||
endPickr.set('minDate', startPickr.parseDate(s.value));
|
endPickr.set('minDate', startPickr.parseDate(s.value));
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue