From 783d4f929cc6f75c0e9dea361294b58e2ef0e761 Mon Sep 17 00:00:00 2001 From: Torsten Brendgen Date: Mon, 24 Aug 2026 23:01:03 +0200 Subject: [PATCH] =?UTF-8?q?feat:=20Entferne=20Auf-/Zuklapp-Schalter=20und?= =?UTF-8?q?=20aktualisiere=20Kartenstil=20im=20Organigramm;=20Version=20au?= =?UTF-8?q?f=201.1.1=20erh=C3=B6hen?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 6 ++-- config/package-solution.json | 2 +- package.json | 2 +- .../OrganizationChartWebPart.ts | 2 -- .../components/IOrganizationChartProps.ts | 2 -- .../components/OrganizationChart.module.scss | 10 ++----- .../components/OrganizationChart.tsx | 29 ++----------------- src/webparts/organizationChart/loc/de-de.js | 2 -- src/webparts/organizationChart/loc/en-us.js | 2 -- .../organizationChart/loc/myStrings.d.ts | 2 -- tests/validate-project.js | 6 +++- 11 files changed, 15 insertions(+), 50 deletions(-) diff --git a/README.md b/README.md index 6f5ad3f..881a568 100644 --- a/README.md +++ b/README.md @@ -8,8 +8,7 @@ SPFx-1.4.1-WebPart für SharePoint Server Subscription Edition. Es erstellt aus - Startperson über einen SharePoint-People-Picker direkt im WebPart auswählen - rekursives Laden aller darunterliegenden Ebenen über `DirectReports` - konfigurierbare maximale Tiefe und Personenzahl -- standardmäßig vollständig aufgeklappter Baum -- einzelne Zweige können auf- und zugeklappt werden +- vollständig sichtbarer Baum ohne separate Auf-/Zuklapp-Schalter - Profilbild, Anzeigename, Position, Abteilung und optional Kontaktdaten - Teams-ähnliche Personenkarten mit Text links und Profilbild rechts - aufklappbare Personendetails direkt in der Karte @@ -17,7 +16,8 @@ SPFx-1.4.1-WebPart für SharePoint Server Subscription Edition. Es erstellt aus - Verlinkung auf die SharePoint-Profilseite - kurzzeitiger In-Memory-Profilcache zur Reduzierung wiederholter REST-Aufrufe - responsive Baumdarstellung mit automatisch kompakteren Karten bei breiten Organisationsebenen -- durchgehende Verbindungslinien und SharePoint-Chevrons zum Auf- und Zuklappen +- gerade Verbindungslinien zwischen den Hierarchieebenen +- schattenlose Karten im Teams-Stil ## Datenquelle und Voraussetzungen diff --git a/config/package-solution.json b/config/package-solution.json index 0929d3a..362a6be 100644 --- a/config/package-solution.json +++ b/config/package-solution.json @@ -4,7 +4,7 @@ "name": "organization-chart-webpart", "title": "organization-chart-webpart", "id": "b2f88ea8-f7da-4d0e-a945-6973bf1acd1e", - "version": "1.1.0.0", + "version": "1.1.1.0", "includeClientSideAssets": true, "skipFeatureDeployment": true }, diff --git a/package.json b/package.json index 617b690..4fe3ae9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "organization-chart-webpart", - "version": "1.1.0", + "version": "1.1.1", "private": true, "main": "lib/index.js", "engines": { "node": ">=6.9.0 <9.0.0" }, diff --git a/src/webparts/organizationChart/OrganizationChartWebPart.ts b/src/webparts/organizationChart/OrganizationChartWebPart.ts index 9257a19..e7634dc 100644 --- a/src/webparts/organizationChart/OrganizationChartWebPart.ts +++ b/src/webparts/organizationChart/OrganizationChartWebPart.ts @@ -68,8 +68,6 @@ export default class OrganizationChartWebPart extends BaseClientSideWebPart ul > li:only-child { padding-top: 0; } .tree li:first-child::before, .tree li:last-child::after { border: 0; } -.tree li:last-child::before { border-right: 1px solid "[theme:neutralTertiary, default:#a19f9d]"; border-radius: 0 4px 0 0; } -.tree li:first-child::after { border-radius: 4px 0 0 0; } +.tree li:last-child::before { border-right: 1px solid "[theme:neutralTertiary, default:#a19f9d]"; } .tree ul ul::before { border-left: 1px solid "[theme:neutralTertiary, default:#a19f9d]"; content: ''; height: 22px; left: 50%; position: absolute; top: 0; } .nodeWrap { display: inline-block; position: relative; } .personCard { background: "[theme:white, default:#ffffff]"; border: 1px solid "[theme:neutralLight, default:#edebe9]"; - box-shadow: 0 1px 3px rgba(0, 0, 0, .12); color: "[theme:bodyText, default:#323130]"; display: block; border-bottom: 2px solid "[theme:themePrimary, default:#0078d4]"; @@ -39,7 +37,7 @@ text-decoration: none; width: 230px; } -.personCard:hover { box-shadow: 0 2px 6px rgba(0, 0, 0, .18); color: "[theme:bodyText, default:#323130]"; } +.personCard:hover { color: "[theme:bodyText, default:#323130]"; } .cardContent { align-items: center; background: transparent; border: 0; color: inherit; cursor: pointer; display: flex; font-family: inherit; min-height: 92px; padding: 12px; position: relative; text-align: left; width: 100%; } .cardContent:hover { background: rgba(0, 0, 0, .03); } .cardContent:focus { outline: 2px solid "[theme:focusBorder, default:#605e5c]"; outline-offset: -2px; } @@ -56,9 +54,6 @@ .detailLabel { color: "[theme:neutralSecondary, default:#605e5c]"; display: block; font-size: 10px; line-height: 13px; } .profileLink { color: "[theme:themePrimary, default:#0078d4]"; display: inline-block; font-size: 12px; margin-top: 3px; text-decoration: none; } .profileLink:hover { text-decoration: underline; } -.toggle { align-items: center; background: "[theme:white, default:#ffffff]"; border: 1px solid "[theme:neutralTertiary, default:#a19f9d]"; border-radius: 50%; bottom: -14px; color: "[theme:themePrimary, default:#0078d4]"; cursor: pointer; display: flex; height: 28px; justify-content: center; left: calc(50% - 14px); padding: 0; position: absolute; width: 28px; z-index: 2; } -.toggle:hover, .toggle:focus { background: "[theme:neutralLighter, default:#f3f2f1]"; outline: none; } -.toggleIcon { font-family: 'FabricMDL2Icons'; font-size: 12px; line-height: 1; } .status { color: "[theme:bodyText, default:#323130]"; padding: 16px; } .error { color: "[theme:errorText, default:#a80000]"; padding: 16px; } @@ -87,5 +82,4 @@ .tree li::before, .tree li::after, .tree ul ul::before { display: none; } .tree > ul > li, .tree li:only-child { padding-top: 0; } .personCard { max-width: 100%; width: 260px; } - .toggle { bottom: auto; left: -14px; top: 34px; } } diff --git a/src/webparts/organizationChart/components/OrganizationChart.tsx b/src/webparts/organizationChart/components/OrganizationChart.tsx index 583bb8c..6fe99af 100644 --- a/src/webparts/organizationChart/components/OrganizationChart.tsx +++ b/src/webparts/organizationChart/components/OrganizationChart.tsx @@ -4,7 +4,6 @@ import styles from './OrganizationChart.module.scss'; import { IOrganizationChartProps } from './IOrganizationChartProps'; export interface IOrganizationChartState { - collapsed: { [account: string]: boolean }; expandedDetails: { [account: string]: boolean }; cardWidth: number; } @@ -15,7 +14,7 @@ export default class OrganizationChart extends React.Component 0; return (
  • + aria-selected={false}>
    {this.renderPerson(profile)} - {hasChildren && }
    - {hasChildren && !collapsed && + {hasChildren &&
      {node.children.map((child: IOrganizationNode): JSX.Element => this.renderNode(child, level + 1))}
    } @@ -208,23 +197,11 @@ export default class OrganizationChart extends React.Component 1 ? parts[parts.length - 1].charAt(0) : '')).toUpperCase(); diff --git a/src/webparts/organizationChart/loc/de-de.js b/src/webparts/organizationChart/loc/de-de.js index 585c5a6..3c22df5 100644 --- a/src/webparts/organizationChart/loc/de-de.js +++ b/src/webparts/organizationChart/loc/de-de.js @@ -26,8 +26,6 @@ define([], function() { LoadErrorMessage: 'Das Organigramm konnte nicht aus dem User Profile Service geladen werden.', DefaultTitle: 'Organigramm', ReportsLabel: 'Mitarbeiter', - CollapseLabel: 'Untergeordnete Personen zuklappen', - ExpandLabel: 'Untergeordnete Personen aufklappen', ExpandDetailsLabel: 'Personendetails anzeigen', CollapseDetailsLabel: 'Personendetails ausblenden', DepartmentLabel: 'Abteilung', diff --git a/src/webparts/organizationChart/loc/en-us.js b/src/webparts/organizationChart/loc/en-us.js index b40363c..cac3f8f 100644 --- a/src/webparts/organizationChart/loc/en-us.js +++ b/src/webparts/organizationChart/loc/en-us.js @@ -26,8 +26,6 @@ define([], function() { LoadErrorMessage: 'The organization chart could not be loaded from the User Profile Service.', DefaultTitle: 'Organization Chart', ReportsLabel: 'reports', - CollapseLabel: 'Collapse reports', - ExpandLabel: 'Expand reports', ExpandDetailsLabel: 'Show person details', CollapseDetailsLabel: 'Hide person details', DepartmentLabel: 'Department', diff --git a/src/webparts/organizationChart/loc/myStrings.d.ts b/src/webparts/organizationChart/loc/myStrings.d.ts index 8a8c379..f3ac245 100644 --- a/src/webparts/organizationChart/loc/myStrings.d.ts +++ b/src/webparts/organizationChart/loc/myStrings.d.ts @@ -25,8 +25,6 @@ declare interface IOrganizationChartWebPartStrings { LoadErrorMessage: string; DefaultTitle: string; ReportsLabel: string; - CollapseLabel: string; - ExpandLabel: string; ExpandDetailsLabel: string; CollapseDetailsLabel: string; DepartmentLabel: string; diff --git a/tests/validate-project.js b/tests/validate-project.js index 870010e..fc5a0c8 100644 --- a/tests/validate-project.js +++ b/tests/validate-project.js @@ -44,7 +44,11 @@ assert(component.indexOf("role='tree'") >= 0 && component.indexOf("role='treeite assert(component.indexOf('aria-expanded') >= 0 && component.indexOf('aria-selected={false}') >= 0, 'Accessible tree state is missing.'); assert(component.indexOf('peopleCountLabel') < 0 && component.indexOf('') >= 0 && - component.indexOf('') >= 0, 'Header count removal or modern toggle icons are missing.'); + component.indexOf('') >= 0, 'Header count removal or detail chevrons are missing.'); +assert(component.indexOf('styles.toggle') < 0 && styles.indexOf('.toggle {') < 0 && + component.indexOf('collapsed') < 0, 'Branch toggle circles must not be rendered.'); +assert(styles.indexOf('box-shadow') < 0 && styles.indexOf('border-radius: 0 4px') < 0, + 'Cards must be shadowless and connectors must use straight corners.'); assert(styles.indexOf('.tree li:only-child { padding-top: 0; }') >= 0, 'Single-child connector spacing must remain continuous.'); assert(component.indexOf('getMaximumVisibleBreadth') >= 0 && component.indexOf('getBreadthCardWidth') >= 0 &&