From f848609ea1e4ccbf29ef377698fb1fc84ee81c20 Mon Sep 17 00:00:00 2001
From: Aleksander Machniak <machniak@kolabsys.com>
Date: Tue, 14 May 2019 11:04:27 +0200
Subject: [PATCH] Elastic: Improve event/task reminders (alarms) input

---
 .../skins/elastic/templates/eventedit.html    |  8 +--
 plugins/libcalendaring/libcalendaring.php     |  2 +-
 .../skins/elastic/include/calendar.less       |  4 ++
 .../skins/elastic/include/libcalendaring.less | 54 +++++++++----------
 .../skins/elastic/templates/taskedit.html     |  8 +--
 5 files changed, 39 insertions(+), 37 deletions(-)

diff --git a/plugins/calendar/skins/elastic/templates/eventedit.html b/plugins/calendar/skins/elastic/templates/eventedit.html
index d0c97e16..68b5f901 100644
--- a/plugins/calendar/skins/elastic/templates/eventedit.html
+++ b/plugins/calendar/skins/elastic/templates/eventedit.html
@@ -33,11 +33,11 @@
 			<div class="form-group row" id="edit-alarms">
 				<label for="edit-alarm-item" class="col-sm-2 col-form-label"><roundcube:label name="calendar.alarms" /></label>
 				<div class="col-sm-10 alarms-input">
-					<div class="edit-alarm-item first">
+					<div class="edit-alarm-item input-group first">
 						<roundcube:object name="plugin.alarm_select" id="edit-alarm-item" />
-						<span class="edit-alarm-buttons">
-							<a href="#add" class="icon button btn create add-alarm"><span class="inner"><roundcube:label name="libcalendaring.addalarm" /></span></a>
-							<a href="#delete" class="icon button btn delete delete-alarm"><span class="inner"><roundcube:label name="libcalendaring.removealarm" /></span></a>
+						<span class="edit-alarm-buttons input-group-append">
+							<a href="#add" class="icon button btn add add-alarm input-group-text"><span class="inner"><roundcube:label name="libcalendaring.addalarm" /></span></a>
+							<a href="#delete" class="icon button btn delete delete-alarm input-group-text"><span class="inner"><roundcube:label name="libcalendaring.removealarm" /></span></a>
 						</span>
 					</div>
 				</div>
diff --git a/plugins/libcalendaring/libcalendaring.php b/plugins/libcalendaring/libcalendaring.php
index ff795fb3..6c33aba1 100644
--- a/plugins/libcalendaring/libcalendaring.php
+++ b/plugins/libcalendaring/libcalendaring.php
@@ -344,7 +344,7 @@ class libcalendaring extends rcube_plugin
     {
         unset($attrib['name']);
 
-        $input_value    = new html_inputfield(array('name' => 'alarmvalue[]', 'class' => 'edit-alarm-value form-control input-group-prepend', 'size' => 3));
+        $input_value    = new html_inputfield(array('name' => 'alarmvalue[]', 'class' => 'edit-alarm-value form-control', 'size' => 3));
         $input_date     = new html_inputfield(array('name' => 'alarmdate[]', 'class' => 'edit-alarm-date form-control', 'size' => 10));
         $input_time     = new html_inputfield(array('name' => 'alarmtime[]', 'class' => 'edit-alarm-time form-control', 'size' => 6));
         $select_type    = new html_select(array('name' => 'alarmtype[]', 'class' => 'edit-alarm-type form-control', 'id' => $attrib['id']));
diff --git a/plugins/libkolab/skins/elastic/include/calendar.less b/plugins/libkolab/skins/elastic/include/calendar.less
index 2171e659..fe1d61f0 100644
--- a/plugins/libkolab/skins/elastic/include/calendar.less
+++ b/plugins/libkolab/skins/elastic/include/calendar.less
@@ -1255,6 +1255,10 @@ body.task-calendar {
     }
 }
 
+#rcmfd_alarmvalue {
+    max-width: 80px;
+}
+
 @media screen and (max-width: @screen-width-small) {
     #agendaoptions {
         padding-top: .5rem;
diff --git a/plugins/libkolab/skins/elastic/include/libcalendaring.less b/plugins/libkolab/skins/elastic/include/libcalendaring.less
index 3b0ef9c4..d0fff594 100644
--- a/plugins/libkolab/skins/elastic/include/libcalendaring.less
+++ b/plugins/libkolab/skins/elastic/include/libcalendaring.less
@@ -389,18 +389,30 @@
         & + .edit-alarm-item {
             margin-top: .25rem;
         }
+
+        &.first .delete-alarm,
+        &:not(.first) .add-alarm {
+            display: none;
+        }
     }
 
     .edit-alarm-buttons {
         a {
-            line-height: 1;
-            padding: .375em .25em;
-            margin: 0 .25rem;
+            border-top-right-radius: .25rem !important;
+            border-bottom-right-radius: .25rem !important;
 
             &:before {
                 margin: 0;
                 width: 1em;
             }
+
+            &:focus {
+                box-shadow: none;
+            }
+
+            &.add:before {
+                content: @fa-var-plus;
+            }
         }
 
         .inner {
@@ -408,16 +420,14 @@
         }
     }
 
-    .edit-alarm-item.first .delete-alarm {
-        display: none;
-    }
-
-    .edit-alarm-item:not(.first) .add-alarm {
-        display: none;
-    }
-
     .edit-alarm-type {
         flex: 1;
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+
+        &:focus {
+            z-index: 2;
+        }
     }
 
     .edit-alarm-set {
@@ -426,26 +436,14 @@
     }
 
     .edit-alarm-values {
-        margin-left: .25rem;
         flex: 5;
 
-        &.offset-default {
-            select.edit-alarm-related {
-                border-radius: 0 .25rem .25rem 0;
-            }
+        .form-control {
+            border-radius: 0;
         }
-        &.offset-ontime {
-            select.edit-alarm-offset {
-                border-radius: .25rem 0 0 .25rem;
-            }
-            select.edit-alarm-related {
-                border-radius: 0 .25rem .25rem 0;
-            }
-        }
-        &.offset-ondate {
-            select.edit-alarm-offset {
-                border-radius: .25rem 0 0 .25rem;
-            }
+
+        :first-child {
+            border-left: 0;
         }
     }
 
diff --git a/plugins/tasklist/skins/elastic/templates/taskedit.html b/plugins/tasklist/skins/elastic/templates/taskedit.html
index 19699082..d36b30e5 100644
--- a/plugins/tasklist/skins/elastic/templates/taskedit.html
+++ b/plugins/tasklist/skins/elastic/templates/taskedit.html
@@ -34,11 +34,11 @@
 			<div class="form-group row" id="taskedit-alarms">
 				<label for="edit-alarm-item" class="col-sm-2 col-form-label"><roundcube:label name="tasklist.alarms" /></label>
 				<div class="col-sm-10 alarms-input">
-					<div class="edit-alarm-item first">
+					<div class="edit-alarm-item input-group first">
 						<roundcube:object name="plugin.alarm_select" id="edit-alarm-item" />
-						<span class="edit-alarm-buttons">
-							<a href="#add" class="icon btn button create add-alarm"><span class="inner"><roundcube:label name="libcalendaring.addalarm" /></span></a>
-							<a href="#delete" class="icon btn button delete delete-alarm"><span class="inner"><roundcube:label name="libcalendaring.removealarm" /></span></a>
+						<span class="edit-alarm-buttons input-group-append">
+							<a href="#add" class="icon btn button add add-alarm input-group-text"><span class="inner"><roundcube:label name="libcalendaring.addalarm" /></span></a>
+							<a href="#delete" class="icon btn button delete delete-alarm input-group-text"><span class="inner"><roundcube:label name="libcalendaring.removealarm" /></span></a>
 						</span>
 					</div>
 				</div>