From 3188831475002ab21805f2ac911bd7684572c73c Mon Sep 17 00:00:00 2001
From: Aleksander Machniak <machniak@kolabsys.com>
Date: Thu, 12 Apr 2018 13:10:47 +0000
Subject: [PATCH] Elastic: Various Calendar improvements, mostly for mobile

---
 plugins/calendar/calendar_ui.js               |   8 +-
 .../skins/elastic/templates/calendar.html     |  12 +-
 .../skins/elastic/templates/eventedit.html    |   6 +-
 .../skins/elastic/include/calendar.less       | 245 +++++++++++-------
 .../skins/elastic/include/libcalendaring.less |  28 ++
 .../skins/elastic/templates/taskedit.html     |   4 +-
 6 files changed, 193 insertions(+), 110 deletions(-)

diff --git a/plugins/calendar/calendar_ui.js b/plugins/calendar/calendar_ui.js
index 385a6ad1..3f8583c9 100644
--- a/plugins/calendar/calendar_ui.js
+++ b/plugins/calendar/calendar_ui.js
@@ -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'));
         }
       }
       
diff --git a/plugins/calendar/skins/elastic/templates/calendar.html b/plugins/calendar/skins/elastic/templates/calendar.html
index bf1d2c5f..092c6871 100644
--- a/plugins/calendar/skins/elastic/templates/calendar.html
+++ b/plugins/calendar/skins/elastic/templates/calendar.html
@@ -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">
diff --git a/plugins/calendar/skins/elastic/templates/eventedit.html b/plugins/calendar/skins/elastic/templates/eventedit.html
index d3373cb6..47a0e09e 100644
--- a/plugins/calendar/skins/elastic/templates/eventedit.html
+++ b/plugins/calendar/skins/elastic/templates/eventedit.html
@@ -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>
diff --git a/plugins/libkolab/skins/elastic/include/calendar.less b/plugins/libkolab/skins/elastic/include/calendar.less
index 4841f23d..3c473ac2 100644
--- a/plugins/libkolab/skins/elastic/include/calendar.less
+++ b/plugins/libkolab/skins/elastic/include/calendar.less
@@ -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 {
diff --git a/plugins/libkolab/skins/elastic/include/libcalendaring.less b/plugins/libkolab/skins/elastic/include/libcalendaring.less
index c8192d1c..7281056c 100644
--- a/plugins/libkolab/skins/elastic/include/libcalendaring.less
+++ b/plugins/libkolab/skins/elastic/include/libcalendaring.less
@@ -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;
+        }
+    }
+}
diff --git a/plugins/tasklist/skins/elastic/templates/taskedit.html b/plugins/tasklist/skins/elastic/templates/taskedit.html
index 49d9e4d6..a2cc9275 100644
--- a/plugins/tasklist/skins/elastic/templates/taskedit.html
+++ b/plugins/tasklist/skins/elastic/templates/taskedit.html
@@ -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>