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

tweak(Calender/js && css): separation between events See merge request tine20/tine20!6629
tine-groupware · Feb 25, 2025 · b82d25c · b82d25c
2 parents a5d164c + dbda071
commit b82d25c
Show file tree

Hide file tree

Showing 3 changed files with 9 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;
@@ -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,13 +417,15 @@
 }
 
 .cal-daysviewpanel-event-body {
+    left: 4px;
     position: absolute;
     top: 13px;
     padding: 2px 2px 0px 2px;
     white-space: normal;
 }
 
 .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
@@ -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
@@ -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){