feat: Add custom branding functionality with CSS and JSON configuration
- Introduced custom branding CSS styles in `custom-branding.css`. - Created example JSON configuration for custom branding in `custom-branding.example.json`. - Implemented branding configuration logic in `BrandingConfig.ts` to normalize and validate branding settings. - Developed CSS loader to manage loading and unloading of custom stylesheets in `BrandingCssLoader.ts`. - Added DOM rendering capabilities for branding elements in `BrandingDomRenderer.ts`. - Defined types and interfaces for branding elements and configurations in `BrandingTypes.ts`. - Included localization support for German in `de-de.js`. - Added unit tests for branding configuration, CSS loader, and DOM renderer. - Validated project structure and static assets with new validation scripts.
This commit is contained in:
Torsten Brendgen
@@ -9,161 +9,43 @@
|
||||
"035ba968-6488-4d42-86b3-0470ffcc95b9": {
|
||||
"location": "ClientSideExtension.ApplicationCustomizer",
|
||||
"properties": {
|
||||
"elements": [
|
||||
{
|
||||
"type": "div",
|
||||
"styles": {
|
||||
"background-color": "#0078d4",
|
||||
"color": "white",
|
||||
"padding": "15px 20px",
|
||||
"text-align": "center",
|
||||
"font-family": "Segoe UI, sans-serif",
|
||||
"font-size": "14px"
|
||||
},
|
||||
"content": "Willkommen auf unserem SharePoint Portal!"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"warning": {
|
||||
"pageUrl": "http://clshp001/",
|
||||
"customActions": {
|
||||
"035ba968-6488-4d42-86b3-0470ffcc95b9": {
|
||||
"location": "ClientSideExtension.ApplicationCustomizer",
|
||||
"properties": {
|
||||
"elements": [
|
||||
{
|
||||
"type": "div",
|
||||
"styles": {
|
||||
"background-color": "#d83b01",
|
||||
"color": "white",
|
||||
"padding": "15px",
|
||||
"text-align": "center",
|
||||
"font-weight": "bold"
|
||||
},
|
||||
"content": "⚠️ Achtung: Wartungsarbeiten am Wochenende"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"withLink": {
|
||||
"pageUrl": "http://clshp001/",
|
||||
"customActions": {
|
||||
"035ba968-6488-4d42-86b3-0470ffcc95b9": {
|
||||
"location": "ClientSideExtension.ApplicationCustomizer",
|
||||
"properties": {
|
||||
"elements": [
|
||||
{
|
||||
"type": "div",
|
||||
"styles": {
|
||||
"background-color": "#0078d4",
|
||||
"color": "white",
|
||||
"padding": "12px 20px",
|
||||
"text-align": "center"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"type": "span",
|
||||
"content": "Wichtige Mitteilung: Systemwartung geplant. ",
|
||||
"styles": {
|
||||
"font-weight": "bold"
|
||||
}
|
||||
"schemaVersion": 2,
|
||||
"enabled": true,
|
||||
"debug": true,
|
||||
"allowedCssHosts": [],
|
||||
"cssfiles": [],
|
||||
"placeholdertop": {
|
||||
"elements": [
|
||||
{
|
||||
"type": "section",
|
||||
"attributes": {
|
||||
"aria-label": "Portalhinweis"
|
||||
},
|
||||
{
|
||||
"type": "a",
|
||||
"content": "Mehr Informationen",
|
||||
"attributes": {
|
||||
"href": "/sites/it/SitePages/Wartung.aspx",
|
||||
"target": "_blank"
|
||||
"styles": {
|
||||
"background-color": "#0078d4",
|
||||
"color": "#ffffff",
|
||||
"padding": "12px 20px",
|
||||
"text-align": "center"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"type": "strong",
|
||||
"content": "Willkommen im SharePoint-Portal"
|
||||
},
|
||||
"styles": {
|
||||
"color": "white",
|
||||
"text-decoration": "underline",
|
||||
"margin-left": "5px"
|
||||
{
|
||||
"type": "span",
|
||||
"content": " – aktuelle Informationen finden Sie im Intranet."
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"gradient": {
|
||||
"pageUrl": "http://clshp001/",
|
||||
"customActions": {
|
||||
"035ba968-6488-4d42-86b3-0470ffcc95b9": {
|
||||
"location": "ClientSideExtension.ApplicationCustomizer",
|
||||
"properties": {
|
||||
"elements": [
|
||||
{
|
||||
"type": "div",
|
||||
"styles": {
|
||||
"background": "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
|
||||
"color": "white",
|
||||
"padding": "20px"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"type": "div",
|
||||
"styles": {
|
||||
"display": "flex",
|
||||
"justify-content": "space-between",
|
||||
"align-items": "center",
|
||||
"max-width": "1200px",
|
||||
"margin": "0 auto"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"type": "div",
|
||||
"children": [
|
||||
{
|
||||
"type": "p",
|
||||
"styles": {
|
||||
"margin": "0",
|
||||
"font-size": "18px",
|
||||
"font-weight": "bold"
|
||||
},
|
||||
"content": "Neue Funktionen verfügbar!"
|
||||
},
|
||||
{
|
||||
"type": "p",
|
||||
"styles": {
|
||||
"margin": "5px 0 0 0",
|
||||
"font-size": "14px"
|
||||
},
|
||||
"content": "Entdecken Sie die neuesten Updates"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "button",
|
||||
"content": "Mehr erfahren",
|
||||
"attributes": {
|
||||
"onclick": "window.location.href='/sites/news/SitePages/Updates.aspx'"
|
||||
},
|
||||
"styles": {
|
||||
"background-color": "white",
|
||||
"color": "#667eea",
|
||||
"border": "none",
|
||||
"padding": "10px 20px",
|
||||
"border-radius": "5px",
|
||||
"cursor": "pointer",
|
||||
"font-weight": "bold"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
"placeholderbottom": {
|
||||
"elements": []
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user