Aktualisiere Versionsnummern auf 1.0.5 in package.json, package-solution.json, ExpiryIndicatorFieldCustomizer.manifest.json und ExpiryIndicatorCommandSet.manifest.json; verbessere die Darstellung der Ablaufdatumsspalte in ExpiryIndicatorFieldCustomizer.ts und aktualisiere die README.md mit neuen Informationen zu Farbregeln.

README.md

@@ -128,6 +128,9 @@ In **Standard-Farbregeln** wird nur das JSON-Array für `default.columnRule` ein
 
 Die Farbregeln werden von oben nach unten ausgewertet; die erste passende Regel gewinnt. Deshalb muss
 `<= 0` vor `<= 30` und `<= 90` stehen. Ohne passende Farbregel wird das Datum ohne besondere Farbe angezeigt.
+Eine passende Regel färbt die komplette SharePoint-Zelle mit `backgroundColor` und passt ausschließlich die
+Schriftfarbe über `textColor` an. `label` bleibt aus Kompatibilitätsgründen konfigurierbar, wird in der Liste
+aber nicht zusätzlich neben dem Datum dargestellt.
 
 Unterstützte Operatoren:
 

ToDo.md

@@ -27,7 +27,7 @@ Berechnung des effektiven Ablaufdatums:
 3. Vor jeder Wertprüfung wird geprüft, ob `columnName` in der aktuellen Liste/Bibliothek existiert. Ein fehlendes Feld kann die Regel nicht erfüllen.
 4. Existiert das Feld und entspricht sein Wert `columnValue`, werden `lifeTime` und `columnRule` dieser Regel verwendet.
 5. Passt keine Regel oder existiert keines der Regelfelder, werden `default.lifeTime` und `default.columnRule` verwendet.
-6. Die erste passende `columnRule` bestimmt Hintergrundfarbe, Textfarbe und optionale Beschriftung.
+6. Die erste passende `columnRule` bestimmt die Hintergrundfarbe der kompletten Zelle und deren Textfarbe.
 
 Die Berechnung arbeitet mit Kalenderjahren/-monaten/-tagen, nicht mit pauschalen 365-Tage-Jahren.
 

config/package-solution.json

@@ -3,7 +3,7 @@
   "solution": {
     "name": "expiry-indicator-client-side-solution",
     "id": "68bb6d2d-9895-45b4-88e8-b98835faa981",
-    "version": "1.0.4.0",
+    "version": "1.0.5.0",
     "includeClientSideAssets": true,
     "skipFeatureDeployment": false,
     "features": [
@@ -11,7 +11,7 @@
         "title": "ExpiryIndicator command set registration",
         "description": "Registers ExpiryIndicator commands for modern lists and document libraries. Does not provision ExpiryDate.",
         "id": "913402af-ab9a-4974-9f86-5c2159ae41db",
-        "version": "1.0.4.0",
+        "version": "1.0.5.0",
         "assets": {
           "elementManifests": [
             "elements.xml"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "expiry-indicator",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "private": true,
   "engines": {
     "node": ">=6.9.0 <9.0.0"

src/extensions/expiryIndicator/ExpiryIndicatorFieldCustomizer.manifest.json

@@ -4,7 +4,7 @@
   "alias": "ExpiryIndicatorFieldCustomizer",
   "componentType": "Extension",
   "extensionType": "FieldCustomizer",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "manifestVersion": 2,
   "requiresCustomScript": false
 }

src/extensions/expiryIndicator/ExpiryIndicatorFieldCustomizer.ts

@@ -13,7 +13,6 @@ import {
   IItemDateValues,
   resolveBehavior
 } from '../../common/ExpiryModels';
-import styles from './ExpiryIndicatorFieldCustomizer.module.scss';
 import * as strings from 'ExpiryIndicatorStrings';
 
 export interface IExpiryIndicatorFieldCustomizerProperties {
@@ -97,27 +96,18 @@ export default class ExpiryIndicatorFieldCustomizer
 
   private _renderEvaluation(container: HTMLElement, evaluation: IExpiryEvaluation): void {
     const wrapper: HTMLSpanElement = document.createElement('span');
-    wrapper.className = styles.cell + (evaluation.wasCalculated ? ' ' + styles.calculated : '');
+    const cell: HTMLElement = this._findCellElement(container);
+    this._rememberCellStyle(cell);
 
     if (evaluation.matchedRule) {
-      wrapper.style.backgroundColor = evaluation.matchedRule.backgroundColor;
+      cell.style.backgroundColor = evaluation.matchedRule.backgroundColor;
-      wrapper.style.color = evaluation.matchedRule.textColor;
+      cell.style.color = evaluation.matchedRule.textColor;
     }
 
-    const date: HTMLSpanElement = document.createElement('span');
+    wrapper.textContent = formatDate(evaluation.effectiveExpiryDate);
-    date.className = styles.date;
-    date.textContent = formatDate(evaluation.effectiveExpiryDate);
-    wrapper.appendChild(date);
-
-    if (evaluation.matchedRule && evaluation.matchedRule.label) {
-      const label: HTMLSpanElement = document.createElement('span');
-      label.className = styles.label;
-      label.textContent = evaluation.matchedRule.label;
-      wrapper.appendChild(label);
-    }
 
     const calculationHint: string = evaluation.wasCalculated ? ' – ' + strings.CalculatedHint : '';
-    wrapper.title = strings.DaysUntilExpiry.replace('{0}', String(evaluation.daysUntilExpiry)) + calculationHint;
+    cell.title = strings.DaysUntilExpiry.replace('{0}', String(evaluation.daysUntilExpiry)) + calculationHint;
     container.appendChild(wrapper);
   }
 
@@ -144,14 +134,59 @@ export default class ExpiryIndicatorFieldCustomizer
 
   private _renderNeutral(container: HTMLElement, text: string): void {
     const wrapper: HTMLSpanElement = document.createElement('span');
-    wrapper.className = styles.cell + ' ' + styles.neutral;
     wrapper.textContent = text;
     container.appendChild(wrapper);
   }
 
   private _clear(container: HTMLElement): void {
+    this._restoreCellStyle(this._findCellElement(container));
     while (container.firstChild) {
       container.removeChild(container.firstChild);
     }
   }
+
+  private _findCellElement(container: HTMLElement): HTMLElement {
+    let current: HTMLElement | null = container;
+    let level: number = 0;
+    while (current && level < 8) {
+      const className: string = typeof current.className === 'string' ? current.className : '';
+      if (current.getAttribute('role') === 'gridcell' || className.indexOf('ms-DetailsRow-cell') >= 0) {
+        return current;
+      }
+      current = current.parentElement;
+      level++;
+    }
+    return container;
+  }
+
+  private _rememberCellStyle(cell: HTMLElement): void {
+    if (cell.getAttribute('data-expiry-indicator-styled') === 'true') {
+      return;
+    }
+    cell.setAttribute('data-expiry-indicator-styled', 'true');
+    cell.setAttribute('data-expiry-original-background', cell.style.backgroundColor || '');
+    cell.setAttribute('data-expiry-original-color', cell.style.color || '');
+    cell.setAttribute('data-expiry-original-had-title', cell.hasAttribute('title') ? 'true' : 'false');
+    cell.setAttribute('data-expiry-original-title', cell.getAttribute('title') || '');
+  }
+
+  private _restoreCellStyle(cell: HTMLElement): void {
+    if (cell.getAttribute('data-expiry-indicator-styled') !== 'true') {
+      return;
+    }
+
+    cell.style.backgroundColor = cell.getAttribute('data-expiry-original-background') || '';
+    cell.style.color = cell.getAttribute('data-expiry-original-color') || '';
+    if (cell.getAttribute('data-expiry-original-had-title') === 'true') {
+      cell.setAttribute('title', cell.getAttribute('data-expiry-original-title') || '');
+    } else {
+      cell.removeAttribute('title');
+    }
+
+    cell.removeAttribute('data-expiry-indicator-styled');
+    cell.removeAttribute('data-expiry-original-background');
+    cell.removeAttribute('data-expiry-original-color');
+    cell.removeAttribute('data-expiry-original-had-title');
+    cell.removeAttribute('data-expiry-original-title');
+  }
 }

src/extensions/expiryIndicatorCommandSet/ExpiryIndicatorCommandSet.manifest.json

@@ -4,7 +4,7 @@
   "alias": "ExpiryIndicatorCommandSet",
   "componentType": "Extension",
   "extensionType": "ListViewCommandSet",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "manifestVersion": 2,
   "requiresCustomScript": false,
   "items": {