feature(Addressbook): new avatar renderer

tine20 · Jun 27, 2022 · 84719d7 · 84719d7
1 parent b9b263a
commit 84719d7
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 2 deletions.
diff --git a/tine20/Addressbook/css/Addressbook.css b/tine20/Addressbook/css/Addressbook.css
@@ -67,3 +67,8 @@
     background-image:url(../../images/icon-set/icon_address_structure.svg) !important;
     background-repeat: no-repeat;
 }
+
+.adb-avatar-wrap {
+    padding: 1px 2px;
+    border-radius: 3px;
+}
diff --git a/tine20/Addressbook/js/renderers.js b/tine20/Addressbook/js/renderers.js
@@ -162,11 +162,30 @@ const urlRenderer = function (url) {
 
 Tine.widgets.grid.RendererManager.register('Addressbook', 'Addressbook_Model_Contact', 'url', Tine.Addressbook.urlRenderer, 'displayPanel');
 
+const avatarRenderer = function(n_short, metadata, record) {
+    const fullName = record ? record.get('n_fileas') : n_short;
+    let shortName = record ? record.get('n_short') : n_short;
+    if (! shortName && record) {
+        let names = _.compact([record.get('n_family'), record.get('n_middle'), record.get('n_given')]);
+        if (!names.length && fullName) {
+            names = fullName.split(' ');
+        }
+        if (names.length > 1) {
+            shortName = _.map(names, (n) => { return n.substring(0, 1).toUpperCase() }).join('');
+        } else {
+            shortName = String(names[0]).substring(0, 2);
+        }
+    }
+
+    const colorSchema = Tine.Calendar.colorMgr.getSchema(record && record.get('color') ? record.get('color') : Tine.Calendar.ColorManager.stringToColour(shortName).substring(1,6));
+    return shortName ? `<span class="adb-avatar-wrap" ext:qtip="${fullName}" style="background-color: ${colorSchema.color}; color: ${colorSchema.text}">${shortName}</span>` : '';
+}
 export {
     mailAddressRenderer,
     countryRenderer,
     addressRenderer,
     imageRenderer,
     preferredAddressRender,
-    urlRenderer
+    urlRenderer,
+    avatarRenderer
 }
diff --git a/tine20/Calendar/js/ColorManager.js b/tine20/Calendar/js/ColorManager.js
@@ -116,7 +116,12 @@ Ext.apply(Tine.Calendar.ColorManager.prototype, {
         var color = this.getStrategy().getColor(event, attendeeRecord);
 
         color = String(color).replace('#', '');
-        if (! color.match(/[0-9a-fA-F]{6}/)) {
+        return this.getSchema(color);
+
+    },
+
+    getSchema(color) {
+        if (! String(color).match(/[0-9a-fA-F]{6}/)) {
             return this.gray;
         }
 
@@ -209,6 +214,19 @@ Tine.Calendar.ColorManager.compare = function(color1, color2, abs) {
     return abs ? (Math.abs(diff[0]) + Math.abs(diff[1]) + Math.abs(diff[2])) : diff;
 };
 
+Tine.Calendar.ColorManager.stringToColour = function(str) {
+    var hash = 0;
+    for (var i = 0; i < str.length; i++) {
+        hash = str.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    var colour = '#';
+    for (var i = 0; i < 3; i++) {
+        var value = (hash >> (i * 8)) & 0xFF;
+        colour += ('00' + value.toString(16)).substr(-2);
+    }
+    return colour;
+}
+
 Tine.Calendar.ColorManager.colorStrategyBtn = Ext.extend(Ext.Button, {
     scale: 'medium',
     minWidth: 60,