From dbda07144586c57c6cf8c4ef3515a681bdfc6c40 Mon Sep 17 00:00:00 2001
From: Sohan Deshar <sdeshar@metaways.de>
Date: Mon, 17 Feb 2025 11:12:03 +0100
Subject: [PATCH] tweak(Calender/js && css): separation between events

---
 tine20/Calendar/css/daysviewpanel.css | 7 +++++--
 tine20/Calendar/js/DaysView.js        | 3 ++-
 tine20/Calendar/js/DaysViewEventUI.js | 4 ++--
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/tine20/Calendar/css/daysviewpanel.css b/tine20/Calendar/css/daysviewpanel.css
index a2eb74df5ae..f2c5c872b80 100644
--- a/tine20/Calendar/css/daysviewpanel.css
+++ b/tine20/Calendar/css/daysviewpanel.css
@@ -225,7 +225,7 @@
     /*background: #EDEDED url(../../images/white-gradiend.png) repeat-y right;*/
     /*border-radius: 8px;*/
     position: absolute;
-    border: 4px solid #808080;
+    /*border: 4px solid #808080;*/
     overflow: hidden;
 
     text-align: left;
@@ -245,7 +245,7 @@
 
 .cal-daysviewpanel-scroller .cal-daysviewpanel-event {
     box-sizing: border-box;
-    border-top: 1px solid white !important;
+    border-top: 1px solid #EDEDED !important;
 }
 .cal-daysviewpanel-scroller .cal-daysviewpanel-body-daycolumn-today .cal-daysviewpanel-event {
     border-top: 1px solid #EBF3FD !important;
@@ -336,6 +336,7 @@
     width: 100%;
     position: absolute;
     top: -1px;
+    left: 4px;
     height: 14px;
     background-color: #808080;
     /*border-top-left-radius: 8px;*/
@@ -416,6 +417,7 @@
 }
 
 .cal-daysviewpanel-event-body {
+    left: 4px;
     position: absolute;
     top: 13px;
     padding: 2px 2px 0px 2px;
@@ -423,6 +425,7 @@
 }
 
 .cal-daysviewpanel-event-tags {
+    left: 4px;
     position: absolute;
     right: 1px;
     bottom: 4px;
diff --git a/tine20/Calendar/js/DaysView.js b/tine20/Calendar/js/DaysView.js
index 7775a4b599b..85075cf9c77 100644
--- a/tine20/Calendar/js/DaysView.js
+++ b/tine20/Calendar/js/DaysView.js
@@ -1553,7 +1553,8 @@ Ext.extend(Tine.Calendar.DaysView, Tine.Calendar.AbstractView, {
         );
         
         ts.event = new Ext.XTemplate(
-            '<div id="{id}" class="cal-daysviewpanel-event {extraCls}" style="width: {width}; height: {height}; left: {left}; top: {top}; z-index: {zIndex}; background-color: {bgColor}; border-image: {infoColors};">',
+            '<div id="{id}" class="cal-daysviewpanel-event {extraCls}" style="width: {width}; height: {height}; left: {left}; top: {top}; z-index: {zIndex}; background-color: {bgColor};">',
+                '<div style="position: absolute; height: 100%; width: 4px; left: 0; top: 0; background: {infoColors}"></div>',
                 '<div class="cal-daysviewpanel-event-header" style="background-color: {bgColor};">',
                     '<div class="cal-daysviewpanel-event-header-inner" style="background-color: {bgColor}; z-index: {zIndex};">{startTime}</div>',
                     '<div class="cal-daysviewpanel-event-header-icons">',
diff --git a/tine20/Calendar/js/DaysViewEventUI.js b/tine20/Calendar/js/DaysViewEventUI.js
index 072dbb076c8..ef7c7c0843b 100644
--- a/tine20/Calendar/js/DaysViewEventUI.js
+++ b/tine20/Calendar/js/DaysViewEventUI.js
@@ -238,7 +238,7 @@ Tine.Calendar.DaysViewEventUI = Ext.extend(Tine.Calendar.EventUI, {
 
     createBorderColors: function (colors) {
         if(colors.length === 0) {
-            return 'linear-gradient(to bottom, rgb(210, 210, 210) 0%, rgb(210, 210, 210) 100%) 0 0 0 3';
+            return 'linear-gradient(to bottom, rgb(210, 210, 210) 0%, rgb(210, 210, 210) 100%)';
         }
         let out = 'linear-gradient(to bottom';
         let pct = 100 / colors.length;
@@ -253,7 +253,7 @@ Tine.Calendar.DaysViewEventUI = Ext.extend(Tine.Calendar.EventUI, {
             c++;
             out += ', '+rgb+' '+(c*pct)+'%';
         });
-        return out + ') 0 0 0 3 stretch';
+        return out + ')';
     },
 
     onSelectedChange: function(state){