fix(calendar(css)): enlarge categories color stripes

Fixes #5301
Alinto · Apr 21, 2021 · bd80b6e · bd80b6e
1 parent 66afbd2
commit bd80b6e
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 39 deletions.
diff --git a/UI/WebServerResources/js/Scheduler/sgCalendarDayBlock.directive.js b/UI/WebServerResources/js/Scheduler/sgCalendarDayBlock.directive.js
@@ -44,14 +44,14 @@
         //   Categories color stripes
         '    <div class="sg-category" ng-repeat="category in '+p+'block.component.categories"',
         '         ng-class="'+p+'(\'bg-category\' + category)"',
-        '         ng-style="'+p+'{ right: ($index * 3) + \'px\' }"></div>',
+        '         ng-style="'+p+'{ right: ($index * 10) + \'%\' }"></div>',
         '    <div class="text">',
         //     Priority
         '      <span ng-show="'+p+'block.component.c_priority" class="sg-priority">{{'+p+'block.component.c_priority}}</span>',
         //     Summary
         '      {{ '+p+'block.component.summary }}',
         //     Icons
-        '      <span class="icons">',
+        '      <span class="sg-icons">',
         //       Component is reccurent
         '        <md-icon ng-if="'+p+'block.component.occurrenceId">repeat</md-icon>',
         //       Component has an alarm

diff --git a/UI/WebServerResources/js/Scheduler/sgCalendarListEvent.directive.js b/UI/WebServerResources/js/Scheduler/sgCalendarListEvent.directive.js
@@ -39,12 +39,13 @@
         //   Categories color stripes
         '    <div class="sg-category" ng-repeat="category in ::component.categories"',
         '         ng-class="::(\'bg-category\' + category)"',
-        '         ng-style="::{ right: ($index * 3) + \'px\' }"></div>',
+        '         ng-style="::{ right: ($index * 10) + \'%\' }"></div>',
+        '    <div class="text">',
         //     Priority
         '      <span ng-show="::component.c_priority" class="sg-priority" ng-bind="::component.c_priority"></span>',
         //     Summary
         '      {{ ::component.c_title }}',
-        '      <span class="icons">',
+        '      <span class="sg-icons">',
         //       Component is reccurent
         '        <md-icon ng-if="::component.occurrenceId">repeat</md-icon>',
         //       Component has an alarm
@@ -62,6 +63,7 @@
         '      <div class="secondary" ng-if="::component.c_location">',
         '        <md-icon>place</md-icon> <span ng-bind="::component.c_location"></span>',
         '      </div>',
+        '    </div>',
         '</div>'
       ].join('');
     }

diff --git a/UI/WebServerResources/js/Scheduler/sgCalendarMonthEvent.directive.js b/UI/WebServerResources/js/Scheduler/sgCalendarMonthEvent.directive.js
@@ -32,28 +32,31 @@
 
       return [
         '<div class="sg-event"',
-        //    Add a class while dragging
-        '     ng-class="{\'sg-event--dragging\': block.dragging}"',
-        '     ng-click="clickBlock({clickEvent: $event, clickComponent: block.component})">',
-        //   Categories color stripes
+        //  Add a class while dragging
+        '   ng-class="{\'sg-event--dragging\': block.dragging}"',
+        '   ng-click="clickBlock({clickEvent: $event, clickComponent: block.component})">',
+        // Categories color stripes
         '  <div class="sg-category" ng-repeat="category in '+p+'block.component.categories"',
-        '       ng-class="'+p+'(\'bg-category\' + category)"',
-        '       ng-style="'+p+'{ right: ($index * 3) + \'px\' }"></div>',
-        '  <span class="secondary" ng-if="'+p+'(!block.component.c_isallday && block.isFirst)">{{ '+p+'block.component.startHour }}</span>',
-        //     Priority
-        '  <span ng-show="'+p+'block.component.c_priority" class="sg-priority">{{'+p+'block.component.c_priority}}</span>',
-        // Summary
-        '  {{ '+p+'block.component.summary }}',
-        '  <span class="icons">',
-        //   Component is reccurent
-        '    <md-icon ng-if="'+p+'block.component.occurrenceId">repeat</md-icon>',
-        //   Component has an alarm
-        '    <md-icon ng-if="'+p+'block.component.c_nextalarm">alarm</md-icon>',
-        //   Component is confidential
-        '    <md-icon ng-if="'+p+'block.component.c_classification == 2">visibility_off</md-icon>',
-        //   Component is private
-        '    <md-icon ng-if="'+p+'block.component.c_classification == 1">vpn_key</md-icon>',
-        '  </span>',
+        '     ng-class="'+p+'(\'bg-category\' + category)"',
+        '     ng-style="'+p+'{ right: ($index * 10) + \'%\' }"></div>',
+        '  <div class="text">',
+        //   Start hour
+        '    <span class="secondary" ng-if="'+p+'(!block.component.c_isallday && block.isFirst)">{{ '+p+'block.component.startHour }}</span>',
+        //   Priority
+        '    <span ng-show="'+p+'block.component.c_priority" class="sg-priority">{{'+p+'block.component.c_priority}}</span>',
+        //   Summary
+        '    {{ '+p+'block.component.summary }}',
+        '    <span class="sg-icons">',
+        //     Component is reccurent
+        '      <md-icon ng-if="'+p+'block.component.occurrenceId">repeat</md-icon>',
+        //     Component has an alarm
+        '      <md-icon ng-if="'+p+'block.component.c_nextalarm">alarm</md-icon>',
+        //     Component is confidential
+        '      <md-icon ng-if="'+p+'block.component.c_classification == 2">visibility_off</md-icon>',
+        //     Component is private
+        '      <md-icon ng-if="'+p+'block.component.c_classification == 1">vpn_key</md-icon>',
+        '    </span>',
+        '  </div>',
         '</div>'
       ].join('');
     }

diff --git a/UI/WebServerResources/scss/core/structure.scss b/UI/WebServerResources/scss/core/structure.scss
@@ -37,7 +37,8 @@ html * {
   position: absolute;
   top: 0;
   bottom: 0;
-  width: 3px;
+  width: 10%;
+  z-index: $z-index-view;
 }
 
 // Group fields of a form

diff --git a/UI/WebServerResources/scss/views/SchedulerUI.scss b/UI/WebServerResources/scss/views/SchedulerUI.scss
@@ -376,6 +376,16 @@ $quarter_height: 10px;
 
     .eventInside {
       overflow: hidden;
+      .text {
+        position: absolute;
+        top: 3px;
+        left: 1%;
+        right: 1%;
+        bottom: 3px;
+        margin: 0 2px;
+        overflow: hidden;
+        line-height: $sg-font-size-2;
+      }
     }
 
     .material-icons {
@@ -384,7 +394,7 @@ $quarter_height: 10px;
       min-width: $sg-font-size-2;
     }
 
-    .icons md-icon {
+    .sg-icons md-icon {
       float: right;
     }
 
@@ -533,10 +543,6 @@ $quarter_height: 10px;
         overflow: auto;
       }
     }
-    .text {
-      position: relative;
-      overflow: auto;
-    }
   }
 
   // Multicolumn day cell that contains the calendar name
@@ -651,14 +657,8 @@ $quarter_height: 10px;
   }
 
   .text {
-    position: absolute;
-    top: 3px;
-    left: 1%;
-    right: 1%;
-    bottom: 3px;
-    margin: 0 2px;
-    overflow: hidden;
-    line-height: $sg-font-size-2;
+    position: relative;
+    z-index: $z-index-view + 1;
   }
 
   .gradient > IMG {