SPFx-Projekte/Organization-Chart
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat: Update version to 1.0.5, remove people count label, and enhance toggle icons in Organization Chart

Browse Source
This commit is contained in:
Torsten Brendgen
2026-08-24 19:38:20 +02:00
parent 4b7926d24a
commit 5f858fab2c
8 changed files with 16 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+1
View File
@@ -14,6 +14,7 @@ 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 SharePoint-Themefarben
- durchgehende Verbindungslinien und SharePoint-Chevrons zum Auf- und Zuklappen
## Datenquelle und Voraussetzungen
config/package-solution.json
+1 -1
View File
@@ -4,7 +4,7 @@
"name": "organization-chart-webpart",
"title": "organization-chart-webpart",
"id": "b2f88ea8-f7da-4d0e-a945-6973bf1acd1e",
"version": "1.0.4.0",
"version": "1.0.5.0",
"includeClientSideAssets": true,
"skipFeatureDeployment": true
},
package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "organization-chart-webpart",
"version": "1.0.4",
"version": "1.0.5",
"private": true,
"main": "lib/index.js",
"engines": { "node": ">=6.9.0 <9.0.0" },
src/webparts/organizationChart/OrganizationChartWebPart.ts
+1 -2
View File
@@ -64,8 +64,7 @@ export default class OrganizationChartWebPart extends BaseClientSideWebPart<IOrg
reportsLabel: strings.ReportsLabel,
collapseLabel: strings.CollapseLabel,
expandLabel: strings.ExpandLabel,
truncatedLabel: strings.TruncatedLabel,
peopleCountLabel: strings.PeopleCountLabel
truncatedLabel: strings.TruncatedLabel
});
const contentHost: HTMLDivElement = this.prepareSurface(data.root.profile.displayName);
ReactDom.render(element, contentHost);
src/webparts/organizationChart/components/IOrganizationChartProps.ts
-1
View File
@@ -9,5 +9,4 @@ export interface IOrganizationChartProps {
collapseLabel: string;
expandLabel: string;
truncatedLabel: string;
peopleCountLabel: string;
}
src/webparts/organizationChart/components/OrganizationChart.module.scss
+5 -4
View File
@@ -9,7 +9,6 @@
.pickerDescription { color: "[theme:neutralSecondary, default:#605e5c]"; font-size: 12px; line-height: 17px; margin-top: 6px; }
.header { align-items: baseline; display: flex; justify-content: space-between; margin-bottom: 12px; }
.heading { font-size: 24px; font-weight: 300; line-height: 32px; margin: 0; }
.count { color: "[theme:neutralSecondary, default:#605e5c]"; font-size: 12px; }
.notice { background: "[theme:neutralLighter, default:#f3f2f1]"; border-left: 3px solid "[theme:themePrimary, default:#0078d4]"; margin-bottom: 12px; padding: 8px 12px; }
.viewport { overflow: auto; padding: 4px 4px 24px; }
.tree { display: table; margin: 0 auto; min-width: max-content; }
@@ -20,7 +19,7 @@
.tree li::before, .tree li::after { border-top: 1px solid "[theme:neutralTertiary, default:#a19f9d]"; content: ''; height: 22px; position: absolute; right: 50%; top: 0; width: 50%; }
.tree li::after { border-left: 1px solid "[theme:neutralTertiary, default:#a19f9d]"; left: 50%; right: auto; }
.tree li:only-child::before, .tree li:only-child::after { display: none; }
.tree li:only-child { padding-top: 22px; }
.tree li:only-child { padding-top: 0; }
.tree > 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; }
@@ -49,8 +48,10 @@
.jobTitle, .department, .email, .location { color: "[theme:neutralSecondary, default:#605e5c]"; display: block; font-size: 12px; line-height: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.email { color: "[theme:themePrimary, default:#0078d4]"; }
.reportCount { bottom: 8px; color: "[theme:neutralSecondary, default:#605e5c]"; font-size: 11px; position: absolute; right: 10px; }
.toggle { background: "[theme:white, default:#ffffff]"; border: 1px solid "[theme:neutralTertiary, default:#a19f9d]"; border-radius: 50%; bottom: -11px; color: "[theme:themePrimary, default:#0078d4]"; cursor: pointer; font-size: 16px; height: 23px; left: calc(50% - 11px); line-height: 18px; padding: 0; position: absolute; width: 23px; z-index: 2; }
.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; }
.toggle:focus { box-shadow: 0 0 0 2px "[theme:focusBorder, default:#605e5c]"; }
.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; }
@@ -61,5 +62,5 @@
.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: -11px; top: 36px; }
.toggle { bottom: auto; left: -14px; top: 34px; }
}
src/webparts/organizationChart/components/OrganizationChart.tsx
+3 -4
View File
@@ -18,9 +18,6 @@ export default class OrganizationChart extends React.Component<IOrganizationChar
<section className={styles.organizationChart} aria-label={this.props.title}>
<div className={styles.header}>
{this.props.title && <h2 className={styles.heading}>{this.props.title}</h2>}
<span className={styles.count}>
{this.props.peopleCountLabel.replace('{0}', String(this.props.data.peopleCount))}
</span>
</div>
{this.props.data.truncated && <div className={styles.notice} role='status'>{this.props.truncatedLabel}</div>}
<div className={styles.viewport}>
@@ -46,7 +43,9 @@ export default class OrganizationChart extends React.Component<IOrganizationChar
title={collapsed ? this.props.expandLabel : this.props.collapseLabel}
aria-label={(collapsed ? this.props.expandLabel : this.props.collapseLabel) + ': ' + profile.displayName}
aria-expanded={!collapsed} onClick={(): void => this.toggle(key)}>
{collapsed ? '+' : '−'}
{collapsed
? <span className={styles.toggleIcon} aria-hidden='true'>&#xE70D;</span>
: <span className={styles.toggleIcon} aria-hidden='true'>&#xE70E;</span>}
</button>}
</div>
{hasChildren && !collapsed &&
tests/validate-project.js
+4
View File
@@ -43,6 +43,10 @@ assert(component.indexOf("role='tree'") >= 0 && component.indexOf("role='treeite
'Accessible tree semantics are missing.');
assert(component.indexOf('aria-expanded') >= 0 && component.indexOf('aria-selected={false}') >= 0,
'Accessible tree state is missing.');
assert(component.indexOf('peopleCountLabel') < 0 && component.indexOf('&#xE70D;') >= 0 &&
component.indexOf('&#xE70E;') >= 0, 'Header count removal or modern toggle icons are missing.');
assert(styles.indexOf('.tree li:only-child { padding-top: 0; }') >= 0,
'Single-child connector spacing must remain continuous.');
assert(component.indexOf("role='presentation'") >= 0, 'Decorative profile images must be hidden from assistive technology.');
['bodyText', 'neutralSecondary', 'neutralLighter', 'themePrimary', 'neutralTertiary', 'white', 'neutralLight', 'focusBorder', 'errorText']
.forEach(function(slot) {