Drive/roundcubemail-plugins-kolab
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Elastic: Various Calendar improvements, mostly for mobile

Browse source
This commit is contained in:
Aleksander Machniak 2018-04-12 13:10:47 +00:00
parent 3027b61ec2
commit 3188831475
6 changed files with 193 additions and 110 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
plugins/calendar/calendar_ui.js
View file

@ -770,7 +770,7 @@ function rcube_calendar_ui(settings)
// basic input validatetion
if (start.getTime() > end.getTime()) {
alert(rcmail.gettext('invalideventdates', 'calendar'));
rcmail.alert_dialog(rcmail.gettext('invalideventdates', 'calendar'));
return false;
}
@ -1757,7 +1757,7 @@ function rcube_calendar_ui(settings)
break;
}
}
// update event date/time display
if (success) {
update_freebusy_dates(event.start, event.end);
@ -1779,7 +1779,7 @@ function rcube_calendar_ui(settings)
rcmail.display_message(rcmail.gettext('suggestedslot', 'calendar') + ': ' + me.event_date_text(event, true), 'voice');
}
else {
alert(rcmail.gettext('noslotfound','calendar'));
rcmail.alert_dialog(rcmail.gettext('noslotfound','calendar'));
}
};
@ -1826,7 +1826,7 @@ function rcube_calendar_ui(settings)
success = true;
}
else {
alert(rcmail.gettext('noemailwarning'));
rcmail.alert_dialog(rcmail.gettext('noemailwarning'));
}
}

12
plugins/calendar/skins/elastic/templates/calendar.html
View file

@ -237,18 +237,18 @@
<div id="eventfreebusy" class="popupmenu calendar-scheduler formcontent">
<roundcube:object name="plugin.attendees_freebusy_table" id="attendees-freebusy-table"
class="schedule-table" data-h-margin="-1" data-v-margin="1" />
<div class="schedule-nav">
<button id="schedule-freebusy-prev" title="<roundcube:label name='previouspage' />">&#9668;</button>
<button id="schedule-freebusy-next" title="<roundcube:label name='nextpage' />">&#9658;</button>
</div>
<div class="slot-nav">
<div class="schedule-find-buttons">
<div class="nav">
<div class="schedule-buttons">
<button id="schedule-find-prev" class="btn btn-secondary prev-slot"><roundcube:label name="calendar.prevslot" /></button>
<button id="schedule-find-next" class="btn btn-secondary next-slot"><roundcube:label name="calendar.nextslot" /></button>
</div>
<div class="schedule-options">
<label><input type="checkbox" id="schedule-freebusy-workinghours" value="1" class="pretty-checkbox" /><roundcube:label name="calendar.onlyworkinghours" /></label>
</div>
<div class="schedule-nav">
<button id="schedule-freebusy-prev" title="<roundcube:label name='previouspage' />">&#9668;</button>
<button id="schedule-freebusy-next" title="<roundcube:label name='nextpage' />">&#9658;</button>
</div>
</div>
<div class="schedule-range">
<div class="form-group row">

6
plugins/calendar/skins/elastic/templates/eventedit.html
View file

@ -117,7 +117,7 @@
</div>
</fieldset>
<!-- attendees list -->
<fieldset id="event-panel-attendees">
<fieldset id="event-panel-attendees" data-navlink-class="nav-icon attendees">
<legend><roundcube:label name="calendar.tabattendees" /></legend>
<h3 id="aria-label-attendeestable" class="voice"><roundcube:label name="calendar.arialabeleventattendees" /></h3>
<roundcube:object name="plugin.attendees_list" id="edit-attendees-table" class="edit-attendees-table no-img table table-sm"
@ -126,7 +126,7 @@
<roundcube:include file="/templates/freebusylegend.html" />
</fieldset>
<!-- resources list -->
<fieldset id="event-panel-resources">
<fieldset id="event-panel-resources" data-navlink-class="nav-icon resources">
<legend><roundcube:label name="calendar.tabresources" /></legend>
<h3 id="aria-label-resourcestable" class="voice"><roundcube:label name="calendar.arialabeleventresources" /></h3>
<roundcube:object name="plugin.attendees_list" id="edit-resources-table" class="edit-attendees-table no-img table table-sm"
@ -135,7 +135,7 @@
<roundcube:include file="/templates/freebusylegend.html" />
</fieldset>
<!-- attachments list (with upload form) -->
<fieldset id="event-panel-attachments">
<fieldset id="event-panel-attachments" data-navlink-class="nav-icon attachments">
<legend><roundcube:label name="calendar.tabattachments" /></legend>
<div id="edit-attachments-droparea" class="file-upload">
<h3 id="aria-label-attachmentuploadform" class="voice"><roundcube:label name="arialabelattachmentuploadform" /></h3>

245
plugins/libkolab/skins/elastic/include/calendar.less
View file

@ -287,7 +287,6 @@ body.quickview-active .fc-content {
cursor: pointer;
}
// Button states
// borrowed from twitter bootstrap (http://twitter.github.com/bootstrap/)
@ -884,6 +883,32 @@ body.quickview-active .fc-content {
}
}
// Add scrollbar on iOS
html:matches(.ipad,.iphone) {
.ui-dialog-content:not(.iframe),
#fish-eye-view,
.fc-list-content,
.fc-view > div > div {
&::-webkit-scrollbar {
-webkit-appearance: none;
}
&::-webkit-scrollbar:vertical {
width: .6rem;
}
&::-webkit-scrollbar:horizontal {
height: .6rem;
}
&::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, .4);
border-radius: .3rem;
border: 2px solid #fff;
}
}
}
// fullcalendar style overrides for printing
.print-content {
.fc-header {
@ -917,6 +942,7 @@ body.quickview-active .fc-content {
color: black !important;
}
.fc-state-highlight,
.fc-event:not(.fc-event-row) .fc-event-skin {
background-color: #fff !important;
}
@ -944,7 +970,7 @@ body.quickview-active .fc-content {
padding-right: 0.3em;
}
.fc-event-cateories {
.fc-event-categories {
font-style: italic;
}
@ -981,30 +1007,40 @@ body.quickview-active .fc-content {
}
.fc-view-table {
tr.fc-event td,
tr.fc-event td.fc-event-handle {
border-color: @color-calendar-border;
padding-top: 0.5em;
padding-bottom: 0.5em;
tr.fc-event {
td,
td.fc-event-handle {
border-color: @color-calendar-border;
padding-top: .5em;
padding-bottom: .5em;
}
td.fc-event-handle {
padding-top: .8em;
}
.fc-event-description {
padding-left: 1.5em;
padding-top: 0;
}
}
tr.fc-last td {
border: 0;
}
tr.fc-event .fc-event-description {
padding-left: 2em;
padding-top: 0em;
}
col.fc-event-location {
width: 20%;
}
}
.fc-event-vert .fc-event-description {
font-size: 90%;
font-style: italic;
.fc-event-description {
white-space: pre-wrap;
.fc-event-vert & {
font-size: 90%;
font-style: italic;
}
}
.fc-day {
@ -1231,6 +1267,10 @@ body.task-calendar {
.faded {
color: @color-black-shade-text;
}
.attachmentslist {
margin-top: .25rem;
}
}
#eventedit {
@ -1246,7 +1286,10 @@ body.task-calendar {
#fish-eye-view {
padding: 0;
border-bottom: 1px solid @color-calendar-border;
@media screen and (min-width: (@screen-width-small + 1px)) {
border-bottom: 1px solid @color-calendar-border;
}
.fc-header {
display: none;
@ -1339,20 +1382,79 @@ body.task-calendar {
input[type=checkbox] {
width: auto !important;
}
@media screen and (max-width: 420px) {
input {
width: 8em !important;
& + input {
width: 6em !important;
}
}
}
}
.calendar-scheduler {
.schedule-nav {
position: absolute;
right: 1rem;
top: 1rem;
.nav {
align-items: center;
html.layout-phone & {
top: 1.5rem;
button:first-child {
margin-right: .25rem;
}
& > div {
white-space: nowrap;
}
@media screen and (max-width: 420px) {
button {
padding-left: .5rem;
padding-right: .5rem;
}
}
}
.schedule-buttons {
.prev-slot:before {
content: @fa-var-chevron-left;
}
.next-slot:after {
&:extend(.font-icon-class);
content: @fa-var-chevron-right;
display: inline-block;
float: none;
margin-right: 0;
}
}
.schedule-options {
flex: 1;
margin-left: 1rem;
html.layout-phone & {
order: 100;
margin-left: 0;
}
label {
vertical-align: middle;
}
input.icon-checkbox + label:before {
margin-right:.25rem;
display: inline;
float: none;
}
}
.schedule-nav {
flex: 1;
margin-left: .3rem;
text-align: right;
button {
padding: 0 1rem;
line-height: 1.8;
}
}
@ -1371,48 +1473,6 @@ body.task-calendar {
}
}
.slot-nav {
display: flex;
align-items: center;
html.layout-phone & {
flex-wrap: wrap;
}
}
.schedule-find-buttons {
margin-right: 1rem;
float: left;
button:first-child {
margin-right: .5rem;
}
.prev-slot:before {
content: @fa-var-chevron-left;
}
.next-slot:after {
&:extend(.font-icon-class);
content: @fa-var-chevron-right;
display: inline-block;
float: none;
margin-right: 0;
}
}
.schedule-options {
label {
vertical-align: middle;
}
input.icon-checkbox + label:before {
margin-right:.25rem;
display: inline;
float: none;
}
}
.attendees-list {
position: relative;
@ -1527,14 +1587,23 @@ body.task-calendar {
height: 10px;
}
tr.dates th[colspan="1"] {
min-width: 48px;
max-width: 48px;
text-align: center;
font-size: .7rem;
line-height: 2.9;
}
tr.times td {
cursor: pointer;
min-width: 30px;
min-width: 48px;
max-width: 48px;
font-size: .7rem;
text-align: center;
color: @color-link;
height: 1.4rem;
padding: 0 .25rem;
padding: 0 .1rem;
vertical-align: middle;
border-top: 1px solid @color-table-border;
border-left: 1px solid @color-list-border;
@ -1578,11 +1647,11 @@ body.task-calendar {
// This span imitates a slanting line across the parent element
span {
display: block;
width: 200%;
height: 200%;
width: 300%;
height: 300%;
border: 1px solid #fff;
background: darken(@color-availability-busy, 10%);
transform: rotate(33deg) translate(10%);
transform: rotate(42deg) translate(2%);
}
&.w10 span {
@ -1591,32 +1660,36 @@ body.task-calendar {
&.w20 span,
&.w25 span {
transform: rotate(10deg) translate(10%);
transform: rotate(17deg) translate(-9%);
}
&.w30 span {
transform: rotate(15deg) translate(10%);
transform: rotate(28deg) translate(-7%);
}
&.w40 span {
transform: rotate(20deg) translate(10%);
transform: rotate(36deg) translate(-3%);
}
&.w60 span {
transform: rotate(48deg) translate(6%);
}
&.w70 span,
&.w75 span {
transform: rotate(42deg) translate(13%);
transform: rotate(55deg) translate(12%, 30%);
}
&.w80 span {
transform: rotate(48deg) translate(15%);
transform: rotate(56deg) translate(13%, 30%);
}
&.w90 span {
transform: rotate(52deg) translate(18%);
transform: rotate(59deg) translate(16%, 30%);
}
&.w100 span {
transform: rotate(55deg) translate(20%, 15%);
transform: rotate(62deg) translate(19%, 30%);
}
}
@ -1864,24 +1937,6 @@ body.task-calendar {
}
}
@media screen and (max-width: 420px) {
#eventedit {
.nav-link {
padding: .5rem;
}
}
.datetime {
input {
width: 8em !important;
& + input {
width: 6em !important;
}
}
}
}
@media screen and (min-width: (@screen-width-small + 1px)) and (max-width: 920px) {
.fc {
.fc-header {

28
plugins/libkolab/skins/elastic/include/libcalendaring.less
View file

@ -695,3 +695,31 @@ html.touch {
}
}
}
@media screen and (max-width: 420px) {
.nav-link.nav-icon {
width: 3em;
margin-right: 5px;
padding: .5rem .5rem .5rem .65rem;
&:before {
.font-icon-class;
margin: 0 1rem 0 0;
width: 1em;
line-height: 1.2;
}
&.resources:before {
content: @fa-var-cube;
margin-left: .1rem;
}
&.attachments:before {
content: @fa-var-paperclip;
}
&.attendees:before {
content: @fa-var-users;
}
}
}

4
plugins/tasklist/skins/elastic/templates/taskedit.html
View file

@ -95,7 +95,7 @@
</div>
</fieldset>
<!-- attendees list (assignments) -->
<fieldset id="taskedit-panel-attendees">
<fieldset id="taskedit-panel-attendees" data-navlink-class="nav-icon attendees">
<legend><roundcube:label name="tasklist.tabassignments" /></legend>
<div class="form-group row" id="taskedit-organizer">
<label for="edit-identities-list" class="col-form-label col-sm-2"><roundcube:label name="tasklist.roleorganizer" /></label>
@ -107,7 +107,7 @@
<roundcube:object name="plugin.attendees_form" id="edit-attendees-form" />
</fieldset>
<!-- attachments list (with upload form) -->
<fieldset id="taskedit-panel-attachments">
<fieldset id="taskedit-panel-attachments" data-navlink-class="nav-icon attachments">
<legend><roundcube:label name="tasklist.tabattachments" /></legend>
<div id="taskedit-attachments-droparea" class="file-upload">
<h3 id="aria-label-attachmentuploadform" class="voice"><roundcube:label name="arialabelattachmentuploadform" /></h3>