support multiple teamleads in each team (#2702)

* fix jumping avatars
* fix line-break after color dot for long names

assets/js/KimaiLoader.js

@@ -54,7 +54,7 @@ export default class KimaiLoader {
         kimai.registerPlugin(new KimaiDateUtils());
         kimai.registerPlugin(new KimaiFormSelect('.selectpicker'));
         kimai.registerPlugin(new KimaiConfirmationLink('confirmation-link'));
-        kimai.registerPlugin(new KimaiActiveRecordsDuration('[data-since]'));
+        kimai.registerPlugin(new KimaiActiveRecordsDuration());
         kimai.registerPlugin(new KimaiDatatableColumnView('data-column-visibility'));
         kimai.registerPlugin(new KimaiDateRangePicker('input[data-daterangepickerenable="on"]'));
         kimai.registerPlugin(new KimaiDateTimePicker('input[data-datetimepicker="on"]'));

assets/js/plugins/KimaiActiveRecords.js

@@ -48,6 +48,13 @@ export default class KimaiActiveRecords extends KimaiPlugin {
 
     _toggleMenu(hasEntries) {
         this.menu.style.display = hasEntries ? 'inline-block' : 'none';
+        if (!hasEntries) {
+            // make sure that template entries in the menu are removed, otherwise they
+            // might still be shown in the browsers title
+            for (let record of this.menu.querySelectorAll('[data-since]')) {
+                record.dataset['since'] = '';
+            }
+        }
 
         const menuEmpty = document.querySelector(this.selectorEmpty);
         if (menuEmpty !== null) {

assets/js/plugins/KimaiActiveRecordsDuration.js

@@ -9,16 +9,10 @@
  * [KIMAI] KimaiActiveRecordsDuration: activate the updates for all active timesheet records on this page
  */
 
-import moment from 'moment';
 import KimaiPlugin from '../KimaiPlugin';
 
 export default class KimaiActiveRecordsDuration extends KimaiPlugin {
 
-    constructor(selector) {
-        super();
-        this.selector = selector;
-    }
-
     getId() {
         return 'timesheet-duration';
     }
@@ -39,7 +33,7 @@ export default class KimaiActiveRecordsDuration extends KimaiPlugin {
 
     updateRecords() {
         let durations = [];
-        const activeRecords = document.querySelectorAll(this.selector);
+        const activeRecords = document.querySelectorAll('[data-since]:not([data-since=""])');
 
         if (activeRecords.length === 0) {
             if (this.updateBrowserTitle) {
@@ -48,12 +42,16 @@ export default class KimaiActiveRecordsDuration extends KimaiPlugin {
             return;
         }
 
-        for(let record of activeRecords) {
-            const since = record.getAttribute('data-since');
-            const duration = this.formatDuration(since);
-            if (record.getAttribute('data-title') !== null && duration !== '?') {
+        const DATE = this.getPlugin('date');
+
+        for (let record of activeRecords) {
+            const since = record.dataset['since'];
+            const duration = DATE.formatDuration(since);
+            // only use the ones from the menu for the title
+            if (record.dataset['replacer'] !== undefined && record.dataset['title'] !== null && duration !== '?') {
                 durations.push(duration);
             }
+            // but update all on the page (running entries in list pages)
             record.textContent = duration;
         }
 
@@ -73,8 +71,4 @@ export default class KimaiActiveRecordsDuration extends KimaiPlugin {
         }
         document.title = title;
     }
-
-    formatDuration(since) {
-        return this.getPlugin('date').formatDuration(since);
-    }
 }

assets/sass/avatar.scss

@@ -16,7 +16,7 @@ $avatar-base-size: 30;
     position: relative;
     font-weight: bold;
     font-size: ceil($avatar-base-size / 2 - 2)+px;
-    top: ceil($avatar-base-size / 4 - 1)+px;
+    top: floor($avatar-base-size / 4 - 1)+px;
 }
 
 $avatarSizes: "xs" .75, "sm" 1.25, "md" 1.5, "lg" 2;
@@ -54,3 +54,7 @@ table.dataTable.table > tbody > tr > td {
         }
     }
 }
+
+.avatar.teamlead {
+    box-shadow: 0px 0px 5px 1px rgba(0,0,0,.4),0 0px 3px 0 rgba(0,0,0,0.3);
+}

assets/sass/datatable-extensions.scss

@@ -30,6 +30,12 @@ span.label-activity,
 span.label-project,
 span.label-customer {
     display: inline-block;
+    .name {
+        white-space: nowrap;
+        .name-inner {
+            white-space: normal;
+        }
+    }
     .dot {
         font-size: 9px;
         margin-right: 3px;