Merge branch 'pu/sd/calEventSeparation' into 'main'

separation between events See merge request tine20/tine20!6591
tine-groupware · Feb 17, 2025 · 0303cc4 · 0303cc4
2 parents 9753a51 + 6c2fb80
commit 0303cc4
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 5 deletions.
diff --git 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;
@@ -243,9 +243,13 @@
     border-right: none;
 }
 
+.cal-daysviewpanel-event > * {
+    left: 4px;
+}
+
 .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;

diff --git 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}; --border-image: {infoColors};">',
+                '<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
@@ -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){