This is an automated email from the ASF dual-hosted git repository.
riemer pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/streampipes.git
The following commit(s) were added to refs/heads/dev by this push:
new faac0ed225 feat: Minor layout improvements, german translations for
pipeline editor (#3799)
faac0ed225 is described below
commit faac0ed225e43ab894aeaab4ce4090b0fdd9e931
Author: Dominik Riemer <[email protected]>
AuthorDate: Thu Oct 2 16:15:22 2025 +0200
feat: Minor layout improvements, german translations for pipeline editor
(#3799)
Co-authored-by: Philipp Zehnder <[email protected]>
---
ui/deployment/i18n/de.json | 116 ++++++++++++++++-----
ui/deployment/i18n/en.json | 116 ++++++++++++++++-----
.../basic-header-title/header-title.component.scss | 18 ++--
.../basic-nav-tabs/basic-nav-tabs.component.scss | 6 ++
.../basic-view/basic-view.component.html | 1 +
.../basic-view/basic-view.component.scss | 3 +
.../input-schema-panel.component.html | 4 +-
.../adapter-configuration-header.component.html | 33 ------
.../adapter-configuration-header.component.scss | 22 ----
.../adapter-configuration-header.component.ts | 39 -------
.../adapter-configuration.component.html | 11 +-
ui/src/app/connect/connect.module.ts | 2 -
.../grid-view/dashboard-grid-view.component.scss | 2 +-
.../data-explorer-chart-container.component.scss | 2 +-
...lorer-widget-appearance-settings.component.html | 98 +++++++++++------
...lorer-widget-appearance-settings.component.scss | 6 ++
...xplorer-widget-appearance-settings.component.ts | 44 +++++++-
.../custom-output-strategy.component.html | 8 +-
.../output-strategy/output-strategy.component.html | 2 +-
.../user-defined-output.component.html | 10 +-
...-assembly-options-pipeline-cache.component.html | 18 ++--
...-assembly-options-pipeline-cache.component.scss | 4 +
.../pipeline-assembly-options.component.html | 28 ++---
.../pipeline-element-icon-stand.component.html | 10 +-
.../pipeline-element-options.component.html | 10 +-
.../pipeline-element-preview.component.html | 4 +-
.../components/pipeline/pipeline.component.html | 2 +-
.../add-template-dialog.component.html | 4 +-
.../compatible-elements.component.html | 2 +-
.../dialog/customize/customize.component.html | 17 +--
.../matching-error/matching-error.component.html | 18 ++--
.../missing-elements-for-tutorial.component.html | 14 ++-
ui/src/app/editor/editor.component.html | 2 +-
ui/src/app/editor/editor.module.ts | 2 +
ui/src/app/home/components/status.component.scss | 7 +-
ui/src/app/home/home.component.html | 4 +-
.../app/notifications/notifications.component.html | 6 +-
ui/src/app/notifications/notifications.module.ts | 2 +
ui/src/app/profile/profile.component.html | 8 +-
ui/src/scss/sp/buttons-mat3.scss | 2 +-
40 files changed, 435 insertions(+), 272 deletions(-)
diff --git a/ui/deployment/i18n/de.json b/ui/deployment/i18n/de.json
index 40a7b24452..afd3c49ebb 100644
--- a/ui/deployment/i18n/de.json
+++ b/ui/deployment/i18n/de.json
@@ -50,6 +50,46 @@
"Stop Pipeline": "Pipeline stoppen",
"Modify Pipeline": "Pipeline bearbeiten",
"Delete Pipeline": "Pipeline löschen",
+ "Preparing pipeline editor...": "Pipeline-Editor vorbereiten...",
+ "The tutorial requires pipeline elements that are not yet installed.": "Für
das Lernprogramm werden Pipeline-Elemente benötigt, die noch nicht installiert
sind.",
+ "Install the following pipeline elements and start the tutorial again:":
"Installieren Sie die folgenden Pipeline-Elemente und starten Sie das
Lernprogramm erneut:",
+ "The input data stream does not satisfy the requirements specified by the
data processor.": "Der Eingabedatenstrom erfüllt nicht die vom Datenprozessor
festgelegten Anforderungen.",
+ "Show Details": "Details anzeigen",
+ "Hide Details": "Details ausblenden",
+ "Use template": "Vorlage verwenden",
+ "Show documentation": "Dokumentation anzeigen",
+ "Show only recommended settings": "Nur empfohlene Einstellungen anzeigen",
+ "Save": "Speichern",
+ "Create template": "Vorlage erstellen",
+ "Save template": "Vorlage speichern",
+ "Next": "Weiter",
+ "Waiting for live data": "Warten auf Live-Daten",
+ "Configure Element": "Element konfigurieren",
+ "Delete Element": "Element löschen",
+ "Compatible Elements": "Kompatible Elemente",
+ "Help": "Hilfe",
+ "Find element": "Element finden",
+ "Create new source": "Neue Quelle erstellen",
+ "Sort": "Sortieren",
+ "Group": "Gruppe",
+ "Save Pipeline": "Pipeline speichern",
+ "Save pipeline": "Pipeline speichern",
+ "Auto Layout": "Automatisches Layout",
+ "Add pipeline element": "Pipeline-Element hinzufügen",
+ "Add element": "Element hinzufügen",
+ "Add from template": "Aus Vorlage hinzufügen",
+ "Clear Assembly Area": "Pipeline-Bereich leeren",
+ "Saving pipeline modifications": "Änderungen werden gespeichert",
+ "All pipeline modifications saved.": "Alle Änderungen gespeichert.",
+ "View Topics": "Topics anzeigen",
+ "Select output fields": "Ausgabefelder auswählen",
+ "Use input schema": "Eingabeschema verwenden",
+ "Runtime name": "Laufzeitname",
+ "Runtime type": "Laufzeittyp",
+ "Semantic type": "Semantischer Typ",
+ "Add field": "Feld hinzufügen",
+ "Select all": "Alle auswählen",
+ "Select none": "Keine auswählen",
"Field": "Feld",
"Settings": "Einstellungen",
"Resolution": "Auflösung",
@@ -104,8 +144,11 @@
"Visual Map Max": "Visuelle Heatmap Minimum",
"Min": "Min",
"Max": "Max",
+ "Display Name": "Anzeigename",
"X": "X",
+ "X Label": "X-Label",
"Y": "Y",
+ "Y Label": "Y-Label",
"Warning": "Warnung",
"This chart tries to load too much data (#Events:": "Dieses Diagramm
versucht, zu viele Daten zu laden (#Events:",
"Please change the chart settings or decrease the time range": "Bitte ändern
Sie die Diagramm-Einstellungen oder ändern Sie die Zeitintervall",
@@ -117,11 +160,9 @@
"More options": "Weitere Optionen",
"Download data": "Daten herunterladen",
"Edit Chart": "Diagramm bearbeiten",
- "Options": "Optionen",
"Reset": "Zurücksetzen",
"Delete Chart": "Diagramm löschen",
"The current data selection can't be displayed by this chart.": "Die
aktuelle Auswahl kann in diesem Diagramm nicht angezeigt werden.",
- "Select all": "Alle auswählen",
"Deselect all": "Alle abwählen",
"Field settings": "Feldeinstellungen",
"Color": "Farbe",
@@ -154,15 +195,13 @@
"Show chart": "Diagramm anzeigen",
"Edit chart": "Diagramm bearbeiten",
"Manage permissions": "Berechtigungen verwalten",
- "Delete chart": "Diagramm löschen",
"Clone chart": "Diagramm kopieren",
+ "Delete chart": "Diagramm löschen",
"Chart Name": "Diagrammname",
- "Save": "Speichern",
"Discard": "Verwerfen",
"Data": "Daten",
"Visualization": "Visualisierung",
"Appearance": "Darstellung",
- "Next": "Weiter",
"Back": "Zurück",
"Create": "Erstellen",
"Chart Type": "Diagrammtyp",
@@ -207,6 +246,7 @@
"Spread": "Spanne",
"Unit": "Einheit",
"Background": "Hintergrund",
+ "Default": "Standard",
"Text": "Text",
"Dashboard title": "Dashboardtitel",
"Title must not be empty": "Titel darf nicht leer sein!",
@@ -220,6 +260,7 @@
"View mode": "Ansicht",
"Grid": "Raster",
"Slides": "Folien",
+ "Options": "Optionen",
"Edit dashboard": "Dashboard bearbeiten",
"Show time range selector": "Zeiteinstellungen anzeigen",
"Hide time range selector": "Zeiteinstellungen ausblenden",
@@ -230,6 +271,7 @@
"New dashboard": "Neues Dashboard",
"Dashboards": "Dashboards",
"Show dashboard": "Dashboard anzeigen",
+ "Kiosk mode": "Kiosk-Modus",
"Dashboard settings": "Dashboard-Einstellungen",
"ID": "ID",
"Output Topics": "Output-Topics",
@@ -248,7 +290,6 @@
"Show details": "Details anzeigen",
"Add all direct children": "Alle direkten Unterknoten hinzufügen",
"(waiting for input)": "(warten auf Input)",
- "Select none": "Keine auswählen",
"Possible placeholders:": "Mögliche Platzhalter:",
"Choose existing file": "Vorhandene Datei auswählen",
"Upload new file": "Neue Datei hochladen",
@@ -268,28 +309,34 @@
"Existing templates": "Vorhandene Vorlagen",
"(no templates available)": "(keine Vorlagen verfügbar)",
"Store as template": "Als Vorlage speichern",
- "Here is a preview of your data:": "Vorschau Ihrer Daten:",
- "Runtime Name": "Laufzeitname",
- "Field Name": "Feldname",
- "no data": "keine Daten",
- "Gathering data for live preview...": "Sammeln von Daten für die
Live-Vorschau...",
- "Preview is currently unavailable.": "Die Vorschau ist derzeit nicht
verfügbar.",
- "(no documentation available)": "(keine Dokumentation verfügbar)",
"You can perform a forced stop, which will stop and reset the pipeline
status.": "Sie können einen erzwungenen Stopp durchführen, der die Pipeline
anhält und zurücksetzt.",
- "Show Details": "Details anzeigen",
- "Hide Details": "Details ausblenden",
"Force stop": "Stopp erzwingen",
"Owner": "Eigentümer",
"Public Element": "Öffentliches Element",
+ "visible to registered users": "sichtbar für registrierte Benutzer",
"Users": "Nutzer",
"Authorized Users": "Autorisierte Nutzer",
"User selection": "Auswahl der Nutzer",
"Groups": "Gruppen",
"Authorized Groups": "Autorisierte Gruppen",
"Group selection": "Auswahl der Gruppe",
+ "Public Link": "Öffentlicher Link",
+ "Allow anonymous access through public link": "Anonymen Zugang über einen
öffentlichen Link ermöglichen",
+ "URL": "URL",
"(no log messages available)": "(keine Protokollmeldungen verfügbar)",
"Site label is required": "Standort-Label ist erforderlich",
"This site already exists": "Standort existiert bereits",
+ "Start Sync": "Sync starten",
+ "Data Retention Action": "Datenaufbewahrungsaktion",
+ "delete": "löschen",
+ "save": "speichern",
+ "save and delete": "speichern und löschen",
+ "Data Retention Intervals": "Datenaufbewahrungsintervalle",
+ "Export Settings": "Einstellungen exportieren",
+ "Download Format": "Download-Format",
+ "Delimiter": "Trennzeichen",
+ "Select Provider": "Anbieter auswählen",
+ "local": "lokal",
"success": "Erfolg",
"error": "Fehler",
"waiting": "Warten",
@@ -297,17 +344,32 @@
"Deleting pipeline...": "Löschen der Pipeline...",
"Stopping pipeline...": "Pipeline stoppen...",
"Gauge": "Gauge",
+ "The current value displayed in a gauge": "Der aktuelle Wert, der im
Gauge-Chart angezeigt wird",
"Table": "Tabelle",
+ "A table displaying the data in rows and columns": "Eine Tabelle, die Daten
in Zeilen und Spalten anzeigt",
"Traffic Light": "Ampel",
+ "A traffic light that shows if a value is above/below a threshold": "Eine
Ampel, die anzeigt, ob ein Wert über/unter einem Schwellenwert liegt",
+ "A simple red/green status light": "Eine einfache rot/grüne Statuslampe",
"Map": "Karte",
+ "A map visualization for spatial coordinates": "Eine Kartenvisualisierung
für räumliche Koordinaten",
"Time-Series Heatmap": "Zeitreihen-Heatmap",
+ "A heatmap that shows values mapped to a color range": "Eine Heatmap, die
einem Farbbereich zugeordnete Werte anzeigt",
+ "A heatmap that lets you map specific values to a color": "Eine Heatmap, mit
der Sie bestimmte Werte einer Farbe zuordnen können",
"Time Series Chart": "Zeitreihen-Diagramm",
+ "A simple chart that shows values on a value/time graph": "Ein einfaches
Diagramm, das Werte in einem Wert/Zeit-Diagramm anzeigt",
"Image": "Bild",
+ "Display an image": "Ein Bild anzeigen",
"Indicator": "Indikator",
+ "The current value displayed as a number": "Der aktuelle Wert wird als Zahl
angezeigt",
+ "Display points on an x/y plane": "Punkte in einer x/y-Ebene anzeigen",
"Histogram": "Histogramm",
+ "Shows the distribution of numerical data": "Zeigt die Verteilung der
numerischen Daten",
"Pie": "Kreisdiagramm",
+ "A pie chart that shows the frequency of specific values": "Ein
Kreisdiagramm, das die Häufigkeit bestimmter Werte anzeigt",
"Value Distribution Heatmap": "Wertverteilung-Heatmap",
+ "A chart that shows the distribution of numerical data as a heatmap": "Ein
Diagramm, das die Verteilung von numerischen Daten als Heatmap darstellt",
"2D Density Contour": "2D-Dichteverteilung",
+ "A chart that shows data points as dots on an x/y plane and highlights
similar points": "Ein Diagramm, das Datenpunkte als Punkte auf einer x/y-Ebene
darstellt und ähnliche Punkte hervorhebt",
"No Warning Range defined": "Kein Warnbereich definiert",
"Current Warning Range: ": "Aktueller Warnbereich: ",
"to": "zu",
@@ -338,19 +400,10 @@
"This is a test": "Dies ist ein Test",
"Error in line {{rowNumber}}. Value for \"{{property}}\" is not supported.":
"Fehler in Zeile {{Zeilennummer}}. Wert für \"{{Eigenschaft}}\" wird nicht
unterstützt.",
"Error in line {{rowNumber}}. Value for \"{{property}}\" is not set.":
"Fehler in Zeile {{Zeilennummer}}. Wert für \"{{Eigenschaft}}\" ist nicht
gesetzt.",
- "Timestamp": "Zeitstempel",
- "Number": "Nummer",
- "Boolean": "Boolean",
- "List": "Liste",
- "Nested": "Verschachtelt",
- "TOPICS": "TOPICS",
- "CODE": "CODE",
"Select Data": "Daten auswählen",
"Previous": "Zurück",
"Download": "Download",
"Select Format": "Format auswählen",
- "Download Format": "Download-Format",
- "Delimiter": "Trennzeichen",
"Excel template": "Excel Vorlage",
"Use uploaded file template": "Hochgeladene Vorlage verwenden",
"Choose template": "Vorlage auswählen",
@@ -378,6 +431,14 @@
"No more information": "Keine weiteren Informationen",
"Full details": "Alle Einzelheiten",
"Full stack trace": "Vollständiger Stack-Trace",
+ "Here is a preview of your data:": "Vorschau Ihrer Daten:",
+ "Runtime Name": "Laufzeitname",
+ "Field Name": "Feldname",
+ "no data": "keine Daten",
+ "Gathering data for live preview...": "Sammeln von Daten für die
Live-Vorschau...",
+ "Preview is currently unavailable.": "Die Vorschau ist derzeit nicht
verfügbar.",
+ "(no documentation available)": "(keine Dokumentation verfügbar)",
+ "Show input fields": "Eingabefelder anzeigen",
"No assets found - use assets to better organize resources!": "Keine Assets
gefunden - verwenden Sie Assets, um Ressourcen besser zu organisieren!",
"Manage assets": "Assets verwalten",
"Asset Browser": "Asset-Browser",
@@ -411,6 +472,13 @@
"1 min": "1 Minute",
"5 min": "5 Minuten",
"30 min": "30 Minuten",
+ "Timestamp": "Zeitstempel",
+ "Number": "Nummer",
+ "Boolean": "Boolean",
+ "List": "Liste",
+ "Nested": "Verschachtelt",
+ "Preview": "Vorschau",
+ "Documentation": "Dokumentation",
"Error Details": "Fehler-Details",
"Resources": "Ressourcen",
"All {{allResourcesAlias}}": "Alle {{allResourcesAlias}}",
diff --git a/ui/deployment/i18n/en.json b/ui/deployment/i18n/en.json
index 78e13a4db4..ec3ee1c10a 100644
--- a/ui/deployment/i18n/en.json
+++ b/ui/deployment/i18n/en.json
@@ -50,6 +50,46 @@
"Stop Pipeline": null,
"Modify Pipeline": null,
"Delete Pipeline": null,
+ "Preparing pipeline editor...": null,
+ "The tutorial requires pipeline elements that are not yet installed.": null,
+ "Install the following pipeline elements and start the tutorial again:":
null,
+ "The input data stream does not satisfy the requirements specified by the
data processor.": null,
+ "Show Details": null,
+ "Hide Details": null,
+ "Use template": null,
+ "Show documentation": null,
+ "Show only recommended settings": null,
+ "Save": null,
+ "Create template": null,
+ "Save template": null,
+ "Next": null,
+ "Waiting for live data": null,
+ "Configure Element": null,
+ "Delete Element": null,
+ "Compatible Elements": null,
+ "Help": null,
+ "Find element": null,
+ "Create new source": null,
+ "Sort": null,
+ "Group": null,
+ "Save Pipeline": null,
+ "Save pipeline": null,
+ "Auto Layout": null,
+ "Add pipeline element": null,
+ "Add element": null,
+ "Add from template": null,
+ "Clear Assembly Area": null,
+ "Saving pipeline modifications": null,
+ "All pipeline modifications saved.": null,
+ "View Topics": null,
+ "Select output fields": null,
+ "Use input schema": null,
+ "Runtime name": null,
+ "Runtime type": null,
+ "Semantic type": null,
+ "Add field": null,
+ "Select all": null,
+ "Select none": null,
"Field": null,
"Settings": null,
"Resolution": null,
@@ -104,8 +144,11 @@
"Visual Map Max": null,
"Min": null,
"Max": null,
+ "Display Name": null,
"X": null,
+ "X Label": null,
"Y": null,
+ "Y Label": null,
"Warning": null,
"This chart tries to load too much data (#Events:": null,
"Please change the chart settings or decrease the time range": null,
@@ -117,11 +160,9 @@
"More options": null,
"Download data": null,
"Edit Chart": null,
- "Options": null,
"Reset": null,
"Delete Chart": null,
"The current data selection can't be displayed by this chart.": null,
- "Select all": null,
"Deselect all": null,
"Field settings": null,
"Color": null,
@@ -154,15 +195,13 @@
"Show chart": null,
"Edit chart": null,
"Manage permissions": null,
- "Delete chart": null,
"Clone chart": null,
+ "Delete chart": null,
"Chart Name": null,
- "Save": null,
"Discard": null,
"Data": null,
"Visualization": null,
"Appearance": null,
- "Next": null,
"Back": null,
"Create": null,
"Chart Type": null,
@@ -207,6 +246,7 @@
"Spread": null,
"Unit": null,
"Background": null,
+ "Default": null,
"Text": null,
"Dashboard title": null,
"Title must not be empty": null,
@@ -220,6 +260,7 @@
"View mode": null,
"Grid": null,
"Slides": null,
+ "Options": null,
"Edit dashboard": null,
"Show time range selector": null,
"Hide time range selector": null,
@@ -230,6 +271,7 @@
"New dashboard": null,
"Dashboards": null,
"Show dashboard": null,
+ "Kiosk mode": null,
"Dashboard settings": null,
"ID": null,
"Output Topics": null,
@@ -248,7 +290,6 @@
"Show details": null,
"Add all direct children": null,
"(waiting for input)": null,
- "Select none": null,
"Possible placeholders:": null,
"Choose existing file": null,
"Upload new file": null,
@@ -268,28 +309,34 @@
"Existing templates": null,
"(no templates available)": null,
"Store as template": null,
- "Here is a preview of your data:": null,
- "Runtime Name": null,
- "Field Name": null,
- "no data": null,
- "Gathering data for live preview...": null,
- "Preview is currently unavailable.": null,
- "(no documentation available)": null,
"You can perform a forced stop, which will stop and reset the pipeline
status.": null,
- "Show Details": null,
- "Hide Details": null,
"Force stop": null,
"Owner": null,
"Public Element": null,
+ "visible to registered users": null,
"Users": null,
"Authorized Users": null,
"User selection": null,
"Groups": null,
"Authorized Groups": null,
"Group selection": null,
+ "Public Link": null,
+ "Allow anonymous access through public link": null,
+ "URL": null,
"(no log messages available)": null,
"Site label is required": null,
"This site already exists": null,
+ "Start Sync": null,
+ "Data Retention Action": null,
+ "delete": null,
+ "save": null,
+ "save and delete": null,
+ "Data Retention Intervals": null,
+ "Export Settings": null,
+ "Download Format": null,
+ "Delimiter": null,
+ "Select Provider": null,
+ "local": null,
"success": null,
"error": null,
"waiting": null,
@@ -297,17 +344,32 @@
"Deleting pipeline...": null,
"Stopping pipeline...": null,
"Gauge": null,
+ "The current value displayed in a gauge": null,
"Table": null,
+ "A table displaying the data in rows and columns": null,
"Traffic Light": null,
+ "A traffic light that shows if a value is above/below a threshold": null,
+ "A simple red/green status light": null,
"Map": null,
+ "A map visualization for spatial coordinates": null,
"Time-Series Heatmap": null,
+ "A heatmap that shows values mapped to a color range": null,
+ "A heatmap that lets you map specific values to a color": null,
"Time Series Chart": null,
+ "A simple chart that shows values on a value/time graph": null,
"Image": null,
+ "Display an image": null,
"Indicator": null,
+ "The current value displayed as a number": null,
+ "Display points on an x/y plane": null,
"Histogram": null,
+ "Shows the distribution of numerical data": null,
"Pie": null,
+ "A pie chart that shows the frequency of specific values": null,
"Value Distribution Heatmap": null,
+ "A chart that shows the distribution of numerical data as a heatmap": null,
"2D Density Contour": null,
+ "A chart that shows data points as dots on an x/y plane and highlights
similar points": null,
"No Warning Range defined": null,
"Current Warning Range: ": null,
"to": null,
@@ -338,19 +400,10 @@
"This is a test": null,
"Error in line {{rowNumber}}. Value for \"{{property}}\" is not supported.":
"Error in line {{rowNumber}}. Value for \"{{property}}\" is not supported.",
"Error in line {{rowNumber}}. Value for \"{{property}}\" is not set.":
"Error in line {{rowNumber}}. Value for \"{{property}}\" is not set.",
- "Timestamp": null,
- "Number": null,
- "Boolean": null,
- "List": null,
- "Nested": null,
- "TOPICS": null,
- "CODE": null,
"Select Data": null,
"Previous": null,
"Download": null,
"Select Format": null,
- "Download Format": null,
- "Delimiter": null,
"Excel template": null,
"Use uploaded file template": null,
"Choose template": null,
@@ -378,6 +431,14 @@
"No more information": null,
"Full details": null,
"Full stack trace": null,
+ "Here is a preview of your data:": null,
+ "Runtime Name": null,
+ "Field Name": null,
+ "no data": null,
+ "Gathering data for live preview...": null,
+ "Preview is currently unavailable.": null,
+ "(no documentation available)": null,
+ "Show input fields": null,
"No assets found - use assets to better organize resources!": null,
"Manage assets": null,
"Asset Browser": null,
@@ -411,6 +472,13 @@
"1 min": null,
"5 min": null,
"30 min": null,
+ "Timestamp": null,
+ "Number": null,
+ "Boolean": null,
+ "List": null,
+ "Nested": null,
+ "Preview": null,
+ "Documentation": null,
"Error Details": null,
"Resources": null,
"All {{allResourcesAlias}}": "All {{allResourcesAlias}}",
diff --git
a/ui/projects/streampipes/shared-ui/src/lib/components/basic-header-title/header-title.component.scss
b/ui/projects/streampipes/shared-ui/src/lib/components/basic-header-title/header-title.component.scss
index f79adb3a93..3146d3239c 100644
---
a/ui/projects/streampipes/shared-ui/src/lib/components/basic-header-title/header-title.component.scss
+++
b/ui/projects/streampipes/shared-ui/src/lib/components/basic-header-title/header-title.component.scss
@@ -16,12 +16,16 @@
*
*/
-.title-left-border {
- border-left: 4px solid var(--color-primary);
- padding-left: 8px;
-}
-
.header-title {
- font-size: 20pt;
- font-weight: bold;
+ font-size: 1.7rem;
+ font-weight: 700;
+ display: inline-block;
+ padding-left: 12px; /* space so text doesn't overlap border */
+ border-left: 4px solid transparent; /* thickness of the border */
+ border-image: linear-gradient(
+ to bottom,
+ var(--color-primary),
+ var(--color-primary-dark)
+ )
+ 1;
}
diff --git
a/ui/projects/streampipes/shared-ui/src/lib/components/basic-nav-tabs/basic-nav-tabs.component.scss
b/ui/projects/streampipes/shared-ui/src/lib/components/basic-nav-tabs/basic-nav-tabs.component.scss
index 33e2b0fb14..004d4e0ae0 100644
---
a/ui/projects/streampipes/shared-ui/src/lib/components/basic-nav-tabs/basic-nav-tabs.component.scss
+++
b/ui/projects/streampipes/shared-ui/src/lib/components/basic-nav-tabs/basic-nav-tabs.component.scss
@@ -28,6 +28,12 @@
margin: 10px;
border: 1px solid var(--color-bg-3);
min-height: calc(100% - 50px);
+ border-radius: 10px;
+}
+
+.page-container-nav {
+ border-top-left-radius: 10px;
+ border-top-right-radius: 10px;
}
.page-container-padding-inner {
diff --git
a/ui/projects/streampipes/shared-ui/src/lib/components/basic-view/basic-view.component.html
b/ui/projects/streampipes/shared-ui/src/lib/components/basic-view/basic-view.component.html
index 84264219ee..868bf057b7 100644
---
a/ui/projects/streampipes/shared-ui/src/lib/components/basic-view/basic-view.component.html
+++
b/ui/projects/streampipes/shared-ui/src/lib/components/basic-view/basic-view.component.html
@@ -35,6 +35,7 @@
[matTooltip]="'Back' | translate"
(click)="navigateBack()"
class="edit-menu-btn"
+ class="mr-5"
data-cy="save-data-explorer-go-back-to-overview"
>
<mat-icon>arrow_back</mat-icon>
diff --git
a/ui/projects/streampipes/shared-ui/src/lib/components/basic-view/basic-view.component.scss
b/ui/projects/streampipes/shared-ui/src/lib/components/basic-view/basic-view.component.scss
index ac8e22cd4b..1200a6529b 100644
---
a/ui/projects/streampipes/shared-ui/src/lib/components/basic-view/basic-view.component.scss
+++
b/ui/projects/streampipes/shared-ui/src/lib/components/basic-view/basic-view.component.scss
@@ -29,6 +29,8 @@
line-height: 24px;
height: 44px;
border-bottom: 1px solid var(--color-bg-3);
+ border-top-left-radius: 10px;
+ border-top-right-radius: 10px;
}
.sp-bg-lightgray {
@@ -44,6 +46,7 @@
border: 1px solid var(--color-bg-3);
min-height: calc(100vh - 90px);
background-color: var(--color-bg-main-panel-content);
+ border-radius: 10px;
}
.page-container-padding-inner {
diff --git
a/ui/projects/streampipes/shared-ui/src/lib/components/input-schema-panel/input-schema-panel.component.html
b/ui/projects/streampipes/shared-ui/src/lib/components/input-schema-panel/input-schema-panel.component.html
index e6ed4c98b3..f013606dbf 100644
---
a/ui/projects/streampipes/shared-ui/src/lib/components/input-schema-panel/input-schema-panel.component.html
+++
b/ui/projects/streampipes/shared-ui/src/lib/components/input-schema-panel/input-schema-panel.component.html
@@ -22,7 +22,9 @@
<mat-expansion-panel-header>
<mat-panel-title
><mat-icon color="accent">list</mat-icon
- ><b> Show input fields</b></mat-panel-title
+ ><b
+ > {{ 'Show input fields' | translate }}</b
+ ></mat-panel-title
>
</mat-expansion-panel-header>
@for (inputStream of inputStreams; track $index) {
diff --git
a/ui/src/app/connect/components/adapter-configuration/adapter-configuration-header/adapter-configuration-header.component.html
b/ui/src/app/connect/components/adapter-configuration/adapter-configuration-header/adapter-configuration-header.component.html
deleted file mode 100644
index 0412b5677b..0000000000
---
a/ui/src/app/connect/components/adapter-configuration/adapter-configuration-header/adapter-configuration-header.component.html
+++ /dev/null
@@ -1,33 +0,0 @@
-<!--
- ~ Licensed to the Apache Software Foundation (ASF) under one or more
- ~ contributor license agreements. See the NOTICE file distributed with
- ~ this work for additional information regarding copyright ownership.
- ~ The ASF licenses this file to You under the Apache License, Version 2.0
- ~ (the "License"); you may not use this file except in compliance with
- ~ the License. You may obtain a copy of the License at
- ~
- ~ http://www.apache.org/licenses/LICENSE-2.0
- ~
- ~ Unless required by applicable law or agreed to in writing, software
- ~ distributed under the License is distributed on an "AS IS" BASIS,
- ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- ~ See the License for the specific language governing permissions and
- ~ limitations under the License.
- ~
- -->
-
-<div fxLayout="column" fxFlex="100">
- <div fxLayout="row" fxLayoutAlign="start center">
- <mat-icon class="real-time">lens </mat-icon>
- <div fxLayoutAlign="start center">
- <p>Data Stream</p>
- </div>
- <span fxFlex></span>
- </div>
- <h1 *ngIf="!isEditMode" class="new-adapter-title">
- New Adapter: {{ displayName }}
- </h1>
- <h1 *ngIf="isEditMode" class="new-adapter-title">
- Edit Adapter: {{ displayName }}
- </h1>
-</div>
diff --git
a/ui/src/app/connect/components/adapter-configuration/adapter-configuration-header/adapter-configuration-header.component.scss
b/ui/src/app/connect/components/adapter-configuration/adapter-configuration-header/adapter-configuration-header.component.scss
deleted file mode 100644
index 7579cb8994..0000000000
---
a/ui/src/app/connect/components/adapter-configuration/adapter-configuration-header/adapter-configuration-header.component.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-/*!
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- */
-
-.real-time {
- cursor: pointer;
- color: #ffeb3b;
-}
diff --git
a/ui/src/app/connect/components/adapter-configuration/adapter-configuration-header/adapter-configuration-header.component.ts
b/ui/src/app/connect/components/adapter-configuration/adapter-configuration-header/adapter-configuration-header.component.ts
deleted file mode 100644
index 0a71ea5b66..0000000000
---
a/ui/src/app/connect/components/adapter-configuration/adapter-configuration-header/adapter-configuration-header.component.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- */
-
-import { Component, Input } from '@angular/core';
-
-@Component({
- selector: 'sp-adapter-configuration-header',
- templateUrl: './adapter-configuration-header.component.html',
- styleUrls: ['./adapter-configuration-header.component.scss'],
- standalone: false,
-})
-export class AdapterConfigurationHeaderComponent {
- /**
- * Used to display the type of the configured adapter
- */
- @Input() displayName = '';
-
- /**
- * Use different title when in edit mode
- */
- @Input() isEditMode;
-
- constructor() {}
-}
diff --git
a/ui/src/app/connect/components/adapter-configuration/adapter-configuration.component.html
b/ui/src/app/connect/components/adapter-configuration/adapter-configuration.component.html
index 1f5593d18c..5037978a73 100644
---
a/ui/src/app/connect/components/adapter-configuration/adapter-configuration.component.html
+++
b/ui/src/app/connect/components/adapter-configuration/adapter-configuration.component.html
@@ -36,10 +36,13 @@
</button>
</div>
<div fxLayout="column" fxLayoutAlign="center stretch" *ngIf="adapter">
- <sp-adapter-configuration-header
- [displayName]="displayName"
- [isEditMode]="isEditMode"
- ></sp-adapter-configuration-header>
+ <sp-basic-header-title-component
+ [title]="
+ isEditMode
+ ? 'Edit adapter: ' + displayName
+ : 'New adapter: ' + displayName
+ "
+ ></sp-basic-header-title-component>
<mat-horizontal-stepper
[linear]="true"
diff --git a/ui/src/app/connect/connect.module.ts
b/ui/src/app/connect/connect.module.ts
index 33e5fce983..e973068aeb 100644
--- a/ui/src/app/connect/connect.module.ts
+++ b/ui/src/app/connect/connect.module.ts
@@ -63,7 +63,6 @@ import { SpEpSettingsSectionComponent } from
'./dialog/edit-event-property/compo
import { SpAdapterOptionsPanelComponent } from
'./components/adapter-configuration/start-adapter-configuration/adapter-options-panel/adapter-options-panel.component';
import { SpAdapterTemplateDialogComponent } from
'./dialog/adapter-template/adapter-template-dialog.component';
import { MatSnackBarModule } from '@angular/material/snack-bar';
-import { AdapterConfigurationHeaderComponent } from
'./components/adapter-configuration/adapter-configuration-header/adapter-configuration-header.component';
import { NewAdapterComponent } from
'./components/new-adapter/new-adapter.component';
import { EditAdapterComponent } from
'./components/edit-adapter/edit-adapter.component';
import { EventSchemaErrorHintsComponent } from
'./components/adapter-configuration/schema-editor/event-schema-error-hints/event-schema-error-hints.component';
@@ -200,7 +199,6 @@ import { AdapterDetailsCodeComponent } from
'./components/adapter-details/adapte
exports: [ErrorMessageComponent],
declarations: [
AdapterCodePanelComponent,
- AdapterConfigurationHeaderComponent,
AdapterConfigurationComponent,
AdapterDescriptionComponent,
AdapterDetailsCodeComponent,
diff --git
a/ui/src/app/dashboard-shared/components/chart-view/grid-view/dashboard-grid-view.component.scss
b/ui/src/app/dashboard-shared/components/chart-view/grid-view/dashboard-grid-view.component.scss
index d2b543726c..77cf1cf14c 100644
---
a/ui/src/app/dashboard-shared/components/chart-view/grid-view/dashboard-grid-view.component.scss
+++
b/ui/src/app/dashboard-shared/components/chart-view/grid-view/dashboard-grid-view.component.scss
@@ -21,7 +21,7 @@ gridster.custom-gridster-style ::ng-deep {
}
gridster.custom-gridster-style.edit ::ng-deep {
- background: var(--mat-sys-surface);
+ background: var(--mat-color-bg-1);
}
gridster.scrollVertical ::ng-deep {
diff --git
a/ui/src/app/data-explorer-shared/components/chart-container/data-explorer-chart-container.component.scss
b/ui/src/app/data-explorer-shared/components/chart-container/data-explorer-chart-container.component.scss
index 168ce837da..5d555a60cb 100644
---
a/ui/src/app/data-explorer-shared/components/chart-container/data-explorer-chart-container.component.scss
+++
b/ui/src/app/data-explorer-shared/components/chart-container/data-explorer-chart-container.component.scss
@@ -52,7 +52,7 @@
}
.widget-header-text {
- font-size: 14pt;
+ font-size: var(--mat-sys-body-small-font);
font-weight: bold;
}
diff --git
a/ui/src/app/data-explorer/components/chart-view/designer-panel/appearance-settings/data-explorer-widget-appearance-settings.component.html
b/ui/src/app/data-explorer/components/chart-view/designer-panel/appearance-settings/data-explorer-widget-appearance-settings.component.html
index 774574963c..0c3fabe6be 100644
---
a/ui/src/app/data-explorer/components/chart-view/designer-panel/appearance-settings/data-explorer-widget-appearance-settings.component.html
+++
b/ui/src/app/data-explorer/components/chart-view/designer-panel/appearance-settings/data-explorer-widget-appearance-settings.component.html
@@ -19,41 +19,75 @@
<sp-configuration-box [title]="'Color' | translate">
<div fxLayout="column" class="mt-10">
<div fxFlex="100" fxLayout="row" class="mb-10">
- <span>{{ 'Background' | translate }}</span>
- <span fxFlex></span>
- <input
- [(colorPicker)]="
- currentlyConfiguredWidget.baseAppearanceConfig
- .backgroundColor
- "
- [cpPosition]="'left'"
- [style.background]="
- currentlyConfiguredWidget.baseAppearanceConfig
- .backgroundColor
- "
- required
- [cpPresetColors]="presetColors"
- (colorPickerSelect)="triggerViewUpdate()"
- autocomplete="off"
- />
+ <span fxFlex="30">{{ 'Background' | translate }}</span>
+ <div fxFlex="70" fxLayout="column">
+ <mat-radio-group
+ [(ngModel)]="backgroundOption"
+ (ngModelChange)="onBackgroundChange($event)"
+ fxLayout="column"
+ >
+ <mat-radio-button value="default">{{
+ 'Default' | translate
+ }}</mat-radio-button>
+ <mat-radio-button value="custom"
+ >{{ 'Custom' }}
+ @if (backgroundOption === 'custom') {
+ <input
+ class="ml-5 color-picker"
+ [(colorPicker)]="
+ currentlyConfiguredWidget
+ .baseAppearanceConfig.backgroundColor
+ "
+ [cpPosition]="'left'"
+ [style.background]="
+ currentlyConfiguredWidget
+ .baseAppearanceConfig.backgroundColor
+ "
+ required
+ [cpPresetColors]="presetColors"
+ (colorPickerSelect)="triggerViewUpdate()"
+ autocomplete="off"
+ />
+ }
+ </mat-radio-button>
+ </mat-radio-group>
+ </div>
</div>
<div fxFlex="100" fxLayout="row" class="mb-10">
- <span>{{ 'Text' | translate }}</span>
- <span fxFlex></span>
- <input
- [(colorPicker)]="
- currentlyConfiguredWidget.baseAppearanceConfig.textColor
- "
- [cpPosition]="'left'"
- [style.background]="
- currentlyConfiguredWidget.baseAppearanceConfig.textColor
- "
- required
- [cpPresetColors]="presetColors"
- (colorPickerSelect)="triggerViewUpdate()"
- autocomplete="off"
- />
+ <span fxFlex="30">{{ 'Text' | translate }}</span>
+ <div fxFlex="70" fxLayout="column">
+ <mat-radio-group
+ [(ngModel)]="textOption"
+ (ngModelChange)="onTextChange($event)"
+ fxLayout="column"
+ >
+ <mat-radio-button value="default">{{
+ 'Default' | translate
+ }}</mat-radio-button>
+ <mat-radio-button value="custom"
+ >{{ 'Custom' }}
+ @if (textOption === 'custom') {
+ <input
+ class="ml-5 color-picker"
+ [(colorPicker)]="
+ currentlyConfiguredWidget
+ .baseAppearanceConfig.textColor
+ "
+ [cpPosition]="'left'"
+ [style.background]="
+ currentlyConfiguredWidget
+ .baseAppearanceConfig.textColor
+ "
+ required
+ [cpPresetColors]="presetColors"
+ (colorPickerSelect)="triggerViewUpdate()"
+ autocomplete="off"
+ />
+ }
+ </mat-radio-button>
+ </mat-radio-group>
+ </div>
</div>
</div>
</sp-configuration-box>
diff --git
a/ui/src/app/data-explorer/components/chart-view/designer-panel/appearance-settings/data-explorer-widget-appearance-settings.component.scss
b/ui/src/app/data-explorer/components/chart-view/designer-panel/appearance-settings/data-explorer-widget-appearance-settings.component.scss
index 13cbc4aacb..80257685b2 100644
---
a/ui/src/app/data-explorer/components/chart-view/designer-panel/appearance-settings/data-explorer-widget-appearance-settings.component.scss
+++
b/ui/src/app/data-explorer/components/chart-view/designer-panel/appearance-settings/data-explorer-widget-appearance-settings.component.scss
@@ -15,3 +15,9 @@
* limitations under the License.
*
*/
+
+.color-picker {
+ width: 25px;
+ cursor: pointer;
+ border: none;
+}
diff --git
a/ui/src/app/data-explorer/components/chart-view/designer-panel/appearance-settings/data-explorer-widget-appearance-settings.component.ts
b/ui/src/app/data-explorer/components/chart-view/designer-panel/appearance-settings/data-explorer-widget-appearance-settings.component.ts
index 57f341695d..e6e70f6350 100644
---
a/ui/src/app/data-explorer/components/chart-view/designer-panel/appearance-settings/data-explorer-widget-appearance-settings.component.ts
+++
b/ui/src/app/data-explorer/components/chart-view/designer-panel/appearance-settings/data-explorer-widget-appearance-settings.component.ts
@@ -34,6 +34,12 @@ export class DataExplorerWidgetAppearanceSettingsComponent
{
@Input() currentlyConfiguredWidget: DataExplorerWidgetModel;
+ backgroundOption: 'default' | 'custom' = 'default';
+ textOption: 'default' | 'custom' = 'default';
+
+ defaultBackgroundColor = 'var(--color-bg-0)';
+ defaultTextColor = 'var(--color-default-text)';
+
presetColors: string[] = [
'#39B54A',
'#1B1464',
@@ -62,13 +68,21 @@ export class DataExplorerWidgetAppearanceSettingsComponent
if (
!this.currentlyConfiguredWidget.baseAppearanceConfig.backgroundColor
) {
-
this.currentlyConfiguredWidget.baseAppearanceConfig.backgroundColor =
- '#FFFFFF';
+ this.applyDefaultBackground();
}
if (!this.currentlyConfiguredWidget.baseAppearanceConfig.textColor) {
- this.currentlyConfiguredWidget.baseAppearanceConfig.textColor =
- '#3e3e3e';
+ this.applyDefaultText();
}
+ this.backgroundOption =
+ this.currentlyConfiguredWidget.baseAppearanceConfig
+ ?.backgroundColor === this.defaultBackgroundColor
+ ? 'default'
+ : 'custom';
+ this.textOption =
+ this.currentlyConfiguredWidget.baseAppearanceConfig?.textColor ===
+ this.defaultTextColor
+ ? 'default'
+ : 'custom';
}
findWidget(widgetType: string): void {
@@ -89,4 +103,26 @@ export class DataExplorerWidgetAppearanceSettingsComponent
ngOnDestroy() {
this.widgetTypeSubscription?.unsubscribe();
}
+
+ onBackgroundChange(option: string) {
+ if (option === 'default') {
+ this.applyDefaultBackground();
+ }
+ }
+
+ onTextChange(option: string): void {
+ if (option === 'default') {
+ this.applyDefaultText();
+ }
+ }
+
+ applyDefaultBackground(): void {
+ this.currentlyConfiguredWidget.baseAppearanceConfig.backgroundColor =
+ this.defaultBackgroundColor;
+ }
+
+ applyDefaultText(): void {
+ this.currentlyConfiguredWidget.baseAppearanceConfig.textColor =
+ this.defaultTextColor;
+ }
}
diff --git
a/ui/src/app/editor/components/output-strategy/custom-output/custom-output-strategy.component.html
b/ui/src/app/editor/components/output-strategy/custom-output/custom-output-strategy.component.html
index 4ee0c5678c..c87e3ee42c 100644
---
a/ui/src/app/editor/components/output-strategy/custom-output/custom-output-strategy.component.html
+++
b/ui/src/app/editor/components/output-strategy/custom-output/custom-output-strategy.component.html
@@ -16,7 +16,7 @@
~
-->
<div fxFlex="100" fxLayout="column">
- <div fxFlex="100" fxLayout="row" fxLayoutAlign="start center">
+ <div fxFlex="100" fxLayout="row" fxLayoutAlign="start center"
class="mb-10">
<h5 style="margin-right: 10px">
{{ selectedElement.inputStreams[0].name || '' }}
</h5>
@@ -25,10 +25,10 @@
mat-flat-button
class="small-button"
(click)="selectAll(collectedPropertiesFirstStream)"
- style="margin-right: 10px; margin-left: 10px"
+ style="margin-right: 10px"
[disabled]="restrictedEditMode"
>
- Select all
+ {{ 'Select all' | translate }}
</button>
<button
mat-flat-button
@@ -36,7 +36,7 @@
(click)="deselectAll(collectedPropertiesFirstStream)"
[disabled]="restrictedEditMode"
>
- Select none
+ {{ 'Select none' | translate }}
</button>
</div>
<div *ngFor="let property of collectedPropertiesFirstStream; let i =
index">
diff --git
a/ui/src/app/editor/components/output-strategy/output-strategy.component.html
b/ui/src/app/editor/components/output-strategy/output-strategy.component.html
index ce736ced76..515d9da71a 100644
---
a/ui/src/app/editor/components/output-strategy/output-strategy.component.html
+++
b/ui/src/app/editor/components/output-strategy/output-strategy.component.html
@@ -19,7 +19,7 @@
<div fxFlex="100" fxLayout="column" *ngIf="customizableOutputStrategy">
<div fxFlex="100" fxLayout="column" class="static-property-panel">
<div fxFlex="100" fxLayout="column">
- <b>Select output</b>
+ <b>{{ 'Select output fields' | translate }}</b>
</div>
<div fxFlex="100">
<div
diff --git
a/ui/src/app/editor/components/output-strategy/user-defined-output/user-defined-output.component.html
b/ui/src/app/editor/components/output-strategy/user-defined-output/user-defined-output.component.html
index 9ae453b2fd..5b459a3def 100644
---
a/ui/src/app/editor/components/output-strategy/user-defined-output/user-defined-output.component.html
+++
b/ui/src/app/editor/components/output-strategy/user-defined-output/user-defined-output.component.html
@@ -33,7 +33,7 @@
[disabled]="restrictedEditMode"
data-cy="use-input-schema"
>
- Use input schema
+ {{ 'Use input schema' | translate }}
</button>
</div>
@@ -45,7 +45,7 @@
>
<div fxLayout="column" fxFlex="30">
<mat-form-field fxFlex color="accent">
- <mat-label>Runtime name</mat-label>
+ <mat-label>{{ 'Runtime name' | translate }}</mat-label>
<input
[(ngModel)]="ep.runtimeName"
data-cy="runtime-name"
@@ -56,7 +56,7 @@
</div>
<div fxLayout="column" fxFlex="30">
<mat-form-field class="example-full-width" color="accent">
- <mat-label>Runtime type</mat-label>
+ <mat-label>{{ 'Runtime type' | translate }}</mat-label>
<mat-select
[(ngModel)]="ep.runtimeType"
[disabled]="restrictedEditMode"
@@ -73,7 +73,7 @@
</div>
<div fxLayout="column" fxFlex="30">
<mat-form-field fxFlex color="accent">
- <mat-label>Semantic type</mat-label>
+ <mat-label>{{ 'Semantic type' | translate }}</mat-label>
<input
[(ngModel)]="ep.semanticType"
[disabled]="restrictedEditMode"
@@ -103,7 +103,7 @@
data-cy="add-field"
>
<mat-icon class="icon">add</mat-icon>
- <span>Add field</span>
+ <span>{{ 'Add field' | translate }}</span>
</button>
</div>
</div>
diff --git
a/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly-options/pipeline-assembly-options-pipeline-cache/pipeline-assembly-options-pipeline-cache.component.html
b/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly-options/pipeline-assembly-options-pipeline-cache/pipeline-assembly-options-pipeline-cache.component.html
index 7a450fafce..f5f1ce844a 100644
---
a/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly-options/pipeline-assembly-options-pipeline-cache/pipeline-assembly-options-pipeline-cache.component.html
+++
b/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly-options/pipeline-assembly-options-pipeline-cache/pipeline-assembly-options-pipeline-cache.component.html
@@ -34,13 +34,17 @@
[diameter]="15"
*ngIf="pipelineCacheRunning"
></mat-spinner>
- <span
- > {{
- pipelineCacheRunning
- ? ' Saving pipeline modifications'
- : 'All pipeline modifications saved.'
- }}</span
- >
+ @if (pipelineCacheRunning) {
+ <span class="modification-status"
+ >' {{
+ 'Saving pipeline modifications' | translate
+ }}</span
+ >
+ } @else {
+ <span class="modification-status">{{
+ 'All pipeline modifications saved.' | translate
+ }}</span>
+ }
</div>
</div>
</div>
diff --git
a/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly-options/pipeline-assembly-options-pipeline-cache/pipeline-assembly-options-pipeline-cache.component.scss
b/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly-options/pipeline-assembly-options-pipeline-cache/pipeline-assembly-options-pipeline-cache.component.scss
index 28eafec0a9..706ee88f21 100644
---
a/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly-options/pipeline-assembly-options-pipeline-cache/pipeline-assembly-options-pipeline-cache.component.scss
+++
b/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly-options/pipeline-assembly-options-pipeline-cache/pipeline-assembly-options-pipeline-cache.component.scss
@@ -24,3 +24,7 @@
height: 100%;
margin-left: 15px;
}
+
+.modification-status {
+ font-size: var(--mat-sys-body-medium-size);
+}
diff --git
a/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly-options/pipeline-assembly-options.component.html
b/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly-options/pipeline-assembly-options.component.html
index 7e555b4488..aee6656d67 100644
---
a/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly-options/pipeline-assembly-options.component.html
+++
b/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly-options/pipeline-assembly-options.component.html
@@ -19,7 +19,7 @@
<div fxFlex="100" fxLayout="row" fxLayoutAlign="start center">
<button
mat-flat-button
- matTooltip="Save Pipeline"
+ [matTooltip]="'Save Pipeline' | translate"
[matTooltipPosition]="'above'"
[disabled]="!pipelineValidationService.pipelineValid"
(click)="savePipelineEmitter.emit()"
@@ -28,57 +28,61 @@
>
<div fxLayoutAlign="start center" fxLayout="row">
<i class="material-icons">save</i>
- <span> Save pipeline</span>
+ <span> {{ 'Save pipeline' | translate }}</span>
</div>
</button>
<span class="assembly-options-divider"></span>
<button
mat-flat-button
class="mat-basic"
- matTooltip="Data Preview"
+ [matTooltip]="'Data Preview' | translate"
matTooltipPosition="above"
(click)="togglePreviewEmitter.emit()"
[disabled]="isPipelineAssemblyEmpty()"
>
<div fxLayoutAlign="start center" fxLayout="row">
<i class="material-icons">visibility</i>
- <span *ngIf="!previewModeActive"> Enable live preview</span>
- <span *ngIf="previewModeActive"> Disable live preview</span>
+ <span *ngIf="!previewModeActive"
+ > {{ 'Enable live preview' | translate }}</span
+ >
+ <span *ngIf="previewModeActive"
+ > {{ 'Disable live preview' | translate }}</span
+ >
</div>
</button>
<span class="assembly-options-divider"></span>
<button
mat-flat-button
class="mat-basic"
- matTooltip="Auto Layout"
+ [matTooltip]="'Auto Layout' | translate"
[matTooltipPosition]="'above'"
(click)="autoLayout()"
>
<i class="material-icons">settings_overscan</i>
- <span> Auto Layout</span>
+ <span> {{ 'Auto Layout' | translate }}</span>
</button>
<span class="assembly-options-divider"></span>
<button
mat-flat-button
- matTooltip="Add pipeline element"
+ [matTooltip]="'Add pipeline element' | translate"
class="mat-basic mr-10"
[matTooltipPosition]="'above'"
(click)="openDiscoverDialog()"
data-cy="sp-editor-add-pipeline-element"
>
<i class="material-icons">add</i>
- <span> Add element</span>
+ <span> {{ 'Add element' | translate }}</span>
</button>
<button
mat-flat-button
class="mat-basic"
- matTooltip="Add template"
+ [matTooltip]="'Add from template' | translate"
[matTooltipPosition]="'above'"
(click)="openAddTemplateDialog()"
data-cy="sp-editor-add-template"
>
<i class="material-icons">add</i>
- <span> Add template</span>
+ <span> {{ 'Add from template' | translate }}</span>
</button>
<sp-pipeline-assembly-options-pipeline-cache
[rawPipelineModel]="rawPipelineModel"
@@ -89,7 +93,7 @@
<span fxFlex></span>
<button
mat-icon-button
- matTooltip="Clear Assembly Area"
+ [matTooltip]="'Clear Assembly Area' | translate"
[matTooltipPosition]="'above'"
[disabled]="editorService.pipelineAssemblyEmpty"
(click)="showClearAssemblyConfirmDialog($event)"
diff --git
a/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.html
b/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.html
index f0519002b6..8ac914d86f 100644
---
a/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.html
+++
b/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.html
@@ -40,7 +40,7 @@
matInput
type="text"
(keyup)="makeDraggable()"
- placeholder="Find element"
+ [placeholder]="'Find element' | translate"
[(ngModel)]="elementFilter"
/>
<mat-icon matPrefix color="accent">search</mat-icon>
@@ -79,7 +79,7 @@
<span fxFlex></span>
<button
mat-icon-button
- matTooltip="Create new source"
+ [matTooltip]="'Create new source' | translate"
(click)="navigateToConnect()"
*ngIf="availableType.title === availableTypes[0].title"
>
@@ -112,7 +112,7 @@
class="panel-options"
>
<small
- >Sort: <a
+ >{{ 'Sort' | translate }}: <a
(click)="changeSorting(availableType, 'group')"
class="sort-option"
[ngClass]="
@@ -120,7 +120,7 @@
? 'sort-selected'
: 'sort-unselected'
"
- >Group</a
+ >{{ 'Group' | translate }}</a
> |
<a
(click)="changeSorting(availableType, 'name')"
@@ -130,7 +130,7 @@
? 'sort-selected'
: 'sort-unselected'
"
- >Name</a
+ >{{ 'Name' | translate }}</a
></small
>
</div>
diff --git
a/ui/src/app/editor/components/pipeline-element-options/pipeline-element-options.component.html
b/ui/src/app/editor/components/pipeline-element-options/pipeline-element-options.component.html
index 5f01b2a65f..e01d71c7ba 100644
---
a/ui/src/app/editor/components/pipeline-element-options/pipeline-element-options.component.html
+++
b/ui/src/app/editor/components/pipeline-element-options/pipeline-element-options.component.html
@@ -33,7 +33,7 @@
<button
class="options-icon-button"
mat-icon-button
- matTooltip="Configure Element"
+ [matTooltip]="'Configure Element' | translate"
[matTooltipPosition]="'above'"
(click)="customizeElement(pipelineElement)"
data-cy="settings-pipeline-element-button"
@@ -49,7 +49,7 @@
<button
class="options-icon-button"
mat-icon-button
- matTooltip="Configure Element"
+ [matTooltip]="'Configure Element' | translate"
[matTooltipPosition]="'above'"
(click)="openCustomizeStreamDialog()"
>
@@ -60,7 +60,7 @@
<button
class="options-icon-button"
mat-icon-button
- matTooltip="Delete Element"
+ [matTooltip]="'Delete Element' | translate"
[matTooltipPosition]="'above'"
(click)="removeElement(pipelineElement)"
>
@@ -75,7 +75,7 @@
<button
class="options-icon-button"
mat-icon-button
- matTooltip="Compatible Elements"
+ [matTooltip]="'Compatible Elements' | translate"
[matTooltipPosition]="'below'"
[disabled]="
!possibleElements || possibleElements.length === 0
@@ -95,7 +95,7 @@
<span class="options-button help-button" style="z-index: 10">
<button
class="options-icon-button"
- matTooltip="Help"
+ [matTooltip]="'Help' | translate"
[matTooltipPosition]="'below'"
mat-icon-button
(click)="openHelpDialog()"
diff --git
a/ui/src/app/editor/components/pipeline-element-preview/pipeline-element-preview.component.html
b/ui/src/app/editor/components/pipeline-element-preview/pipeline-element-preview.component.html
index a58235feaa..edb0adc689 100644
---
a/ui/src/app/editor/components/pipeline-element-preview/pipeline-element-preview.component.html
+++
b/ui/src/app/editor/components/pipeline-element-preview/pipeline-element-preview.component.html
@@ -24,7 +24,9 @@
fxLayoutAlign="center center"
>
<mat-spinner [diameter]="20" color="accent"></mat-spinner>
- <span class="preview-table mt-10">Waiting for live data...</span>
+ <span class="preview-table mt-10"
+ >{{ 'Waiting for live data' | translate }}...</span
+ >
</div>
<table class="row-border hover preview-table" *ngIf="runtimeData">
<tbody id="preview-data-rows-id">
diff --git a/ui/src/app/editor/components/pipeline/pipeline.component.html
b/ui/src/app/editor/components/pipeline/pipeline.component.html
index 8b77b5b017..63673beb9c 100644
--- a/ui/src/app/editor/components/pipeline/pipeline.component.html
+++ b/ui/src/app/editor/components/pipeline/pipeline.component.html
@@ -46,7 +46,7 @@
<button
class="topics-icon-button"
mat-icon-button
- matTooltip="View Topics"
+ [matTooltip]="'View Topics' | translate"
[matTooltipPosition]="'above'"
(click)="openTopicsDialog(pipelineElementConfig)"
>
diff --git
a/ui/src/app/editor/dialog/add-template-dialog/add-template-dialog.component.html
b/ui/src/app/editor/dialog/add-template-dialog/add-template-dialog.component.html
index 059742c958..d816cb849b 100644
---
a/ui/src/app/editor/dialog/add-template-dialog/add-template-dialog.component.html
+++
b/ui/src/app/editor/dialog/add-template-dialog/add-template-dialog.component.html
@@ -28,9 +28,9 @@
</div>
<mat-divider></mat-divider>
<div class="sp-dialog-actions">
- <button mat-flat-button color="accent">Next</button>
+ <button mat-flat-button color="accent">{{ 'Next' | translate
}}</button>
<button mat-button mat-flat-button class="mat-basic" (click)="close()">
- Cancel
+ {{ 'Cancel' | translate }}
</button>
</div>
</div>
diff --git
a/ui/src/app/editor/dialog/compatible-elements/compatible-elements.component.html
b/ui/src/app/editor/dialog/compatible-elements/compatible-elements.component.html
index 548a071960..601414709c 100644
---
a/ui/src/app/editor/dialog/compatible-elements/compatible-elements.component.html
+++
b/ui/src/app/editor/dialog/compatible-elements/compatible-elements.component.html
@@ -61,7 +61,7 @@
<mat-divider></mat-divider>
<div class="sp-dialog-actions">
<button mat-button mat-flat-button class="mat-basic" (click)="hide()">
- Cancel
+ {{ 'Cancel' | translate }}
</button>
</div>
</div>
diff --git a/ui/src/app/editor/dialog/customize/customize.component.html
b/ui/src/app/editor/dialog/customize/customize.component.html
index 4a9e1452f1..8eef9babd3 100644
--- a/ui/src/app/editor/dialog/customize/customize.component.html
+++ b/ui/src/app/editor/dialog/customize/customize.component.html
@@ -34,7 +34,7 @@
color="accent"
appearance="outline"
>
- <mat-label>Use template</mat-label>
+ <mat-label>{{ 'Use template' | translate }}</mat-label>
<mat-select
(selectionChange)="loadTemplate($event)"
[(value)]="selectedTemplate"
@@ -56,14 +56,14 @@
color="accent"
[disabled]="!pipelineElement.payload.includesAssets"
>
- Show documentation
+ {{ 'Show documentation' | translate }}
</mat-slide-toggle>
<span> </span>
<mat-slide-toggle
[(ngModel)]="displayRecommended"
color="accent"
>
- Show only recommended settings
+ {{ 'Show only recommended settings' | translate }}
</mat-slide-toggle>
</div>
</div>
@@ -159,7 +159,8 @@
[disabled]="!formValid"
data-cy="sp-element-configuration-save"
>
- <i class="material-icons">save</i><span> Save</span>
+ <i class="material-icons">save</i
+ ><span> {{ 'Save' | translate }}</span>
</button>
<button
mat-button
@@ -168,7 +169,7 @@
(click)="close()"
data-cy="cancel-customize"
>
- Cancel
+ {{ 'Cancel' | translate }}
</button>
<div fxFlex></div>
<button
@@ -180,7 +181,7 @@
(click)="triggerTemplateMode()"
>
<i class="material-icons">add_circle_outline</i
- ><span> Create template</span>
+ ><span> {{ 'Create template' | translate }}</span>
</button>
</div>
<div fxLayout="row" *ngIf="templateMode">
@@ -194,7 +195,7 @@
data-cy="save-template"
>
<i class="material-icons">save</i
- ><span> Save template</span>
+ ><span> {{ 'Save template' | translate }}</span>
</button>
<button
mat-button
@@ -202,7 +203,7 @@
class="mat-basic"
(click)="cancelTemplateMode()"
>
- Cancel
+ {{ 'Cancel' | translate }}
</button>
</div>
</div>
diff --git
a/ui/src/app/editor/dialog/matching-error/matching-error.component.html
b/ui/src/app/editor/dialog/matching-error/matching-error.component.html
index bd64a3fff0..0d4ed3be4d 100644
--- a/ui/src/app/editor/dialog/matching-error/matching-error.component.html
+++ b/ui/src/app/editor/dialog/matching-error/matching-error.component.html
@@ -19,10 +19,12 @@
<div class="sp-dialog-container">
<div class="sp-dialog-content p-15">
<div>
- <h4>These elements can't be connected.</h4>
+ <h4>{{ 'These elements can't be connected.' | translate }}</h4>
<h4>
- The input data stream does not satisfy the requirements
- specified by the data processor.
+ {{
+ 'The input data stream does not satisfy the requirements
+ specified by the data processor.' | translate
+ }}
</h4>
<button
mat-button
@@ -30,8 +32,12 @@
type="button"
class="md-accent"
>
- <div *ngIf="!statusDetailsVisible">Show Details</div>
- <div *ngIf="statusDetailsVisible">Hide Details</div>
+ <div *ngIf="!statusDetailsVisible">
+ {{ 'Show Details' | translate }}
+ </div>
+ <div *ngIf="statusDetailsVisible">
+ {{ 'Hide Details' | translate }}
+ </div>
</button>
<div *ngIf="statusDetailsVisible">
<div *ngFor="let entry of notifications">
@@ -54,7 +60,7 @@
<mat-divider></mat-divider>
<div class="sp-dialog-actions actions-align-right">
<button mat-button mat-flat-button class="mat-basic" (click)="close()">
- Close
+ {{ 'Close' | translate }}
</button>
</div>
</div>
diff --git
a/ui/src/app/editor/dialog/missing-elements-for-tutorial/missing-elements-for-tutorial.component.html
b/ui/src/app/editor/dialog/missing-elements-for-tutorial/missing-elements-for-tutorial.component.html
index 9f5f00b5f0..a15965fc66 100644
---
a/ui/src/app/editor/dialog/missing-elements-for-tutorial/missing-elements-for-tutorial.component.html
+++
b/ui/src/app/editor/dialog/missing-elements-for-tutorial/missing-elements-for-tutorial.component.html
@@ -21,12 +21,16 @@
<div fxFlex="100" fxLayout="column">
<div fxFlex="100" fxLayout="column">
<h4>
- The tutorial requires pipeline elements that are not yet
- installed.
+ {{
+ 'The tutorial requires pipeline elements that are not
yet installed.'
+ | translate
+ }}
</h4>
<h5>
- Install the following pipeline elements and start the
- tutorial again:
+ {{
+ 'Install the following pipeline elements and start the
tutorial again:'
+ | translate
+ }}
</h5>
<div *ngFor="let missingElement of missingElementsForTutorial">
<li>
@@ -40,7 +44,7 @@
<mat-divider></mat-divider>
<div class="sp-dialog-actions actions-align-right">
<button mat-button mat-flat-button class="mat-basic" (click)="close()">
- Close
+ {{ 'Close' | translate }}
</button>
</div>
</div>
diff --git a/ui/src/app/editor/editor.component.html
b/ui/src/app/editor/editor.component.html
index b334d81895..68bdb90284 100644
--- a/ui/src/app/editor/editor.component.html
+++ b/ui/src/app/editor/editor.component.html
@@ -28,7 +28,7 @@
color="accent"
mode="indeterminate"
></mat-spinner>
- <p>Preparing pipeline editor...</p>
+ <p>{{ 'Preparing pipeline editor...' | translate }}</p>
</div>
<div
*ngIf="allElementsLoaded"
diff --git a/ui/src/app/editor/editor.module.ts
b/ui/src/app/editor/editor.module.ts
index 3e5e86eee4..f9c735cef7 100644
--- a/ui/src/app/editor/editor.module.ts
+++ b/ui/src/app/editor/editor.module.ts
@@ -83,6 +83,7 @@ import { DroppedPipelineElementComponent } from
'./components/pipeline/dropped-p
import { AddTemplateDialogComponent } from
'./dialog/add-template-dialog/add-template-dialog.component';
import { TemplateSelectionComponent } from
'./dialog/add-template-dialog/template-selection/template-selection.component';
import { SharedUiModule } from '@streampipes/shared-ui';
+import { TranslatePipe } from '@ngx-translate/core';
@NgModule({
imports: [
@@ -123,6 +124,7 @@ import { SharedUiModule } from '@streampipes/shared-ui';
ReactiveFormsModule,
PlatformServicesModule,
SharedUiModule,
+ TranslatePipe,
],
declarations: [
AddTemplateDialogComponent,
diff --git a/ui/src/app/home/components/status.component.scss
b/ui/src/app/home/components/status.component.scss
index 7778f4845d..a256d2fe56 100644
--- a/ui/src/app/home/components/status.component.scss
+++ b/ui/src/app/home/components/status.component.scss
@@ -20,11 +20,10 @@
height: 150px;
width: 100%;
color: var(--color-secondary);
- border-radius: 5px;
+ border-radius: 10px;
margin-bottom: 20px;
- border: 2px solid var(--color-bg-2);
- background: var(--color-bg-2);
- border-bottom: 5px solid var(--color-primary);
+ border: 1px solid var(--color-bg-2);
+ background: var(--color-bg-1);
}
.status-container-number {
diff --git a/ui/src/app/home/home.component.html
b/ui/src/app/home/home.component.html
index 3ef8353255..b85bc96c84 100644
--- a/ui/src/app/home/home.component.html
+++ b/ui/src/app/home/home.component.html
@@ -16,7 +16,7 @@
~
-->
-<div fxLayout="column" class="page-container page-container-padding">
+<sp-basic-view [hideNavbar]="true">
<div fxFlex fxLayout="row" fxLayoutAlign="start start">
<div fxFlex="100">
<div fxFlex="100" fxLayout="column">
@@ -81,4 +81,4 @@
</div>
</div>
</div>
-</div>
+</sp-basic-view>
diff --git a/ui/src/app/notifications/notifications.component.html
b/ui/src/app/notifications/notifications.component.html
index d834ca2cec..3128fc704a 100644
--- a/ui/src/app/notifications/notifications.component.html
+++ b/ui/src/app/notifications/notifications.component.html
@@ -16,8 +16,8 @@
~
-->
-<div fxLayout="column" class="page-container page-container-max-height">
- <div fxLayout="row" style="padding: 0px" class="sp-tab-bg">
+<sp-basic-view class="page-container-max-height">
+ <div fxLayout="row" nav>
<div fxFlex="100" class="page-container-nav">
<div fxFlex="100" fxLayout="row">
<div fxFlex fxLayoutAlign="start center">
@@ -134,4 +134,4 @@
</div>
</div>
</div>
-</div>
+</sp-basic-view>
diff --git a/ui/src/app/notifications/notifications.module.ts
b/ui/src/app/notifications/notifications.module.ts
index 1b7b07cff1..cc17600135 100644
--- a/ui/src/app/notifications/notifications.module.ts
+++ b/ui/src/app/notifications/notifications.module.ts
@@ -25,6 +25,7 @@ import { NotificationsComponent } from
'./notifications.component';
import { NotificationItemComponent } from
'./components/notification-item.component';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { PlatformServicesModule } from '@streampipes/platform-services';
+import { SharedUiModule } from '@streampipes/shared-ui';
@NgModule({
imports: [
@@ -36,6 +37,7 @@ import { PlatformServicesModule } from
'@streampipes/platform-services';
FlexLayoutModule,
FormsModule,
PlatformServicesModule,
+ SharedUiModule,
],
declarations: [NotificationsComponent, NotificationItemComponent],
providers: [],
diff --git a/ui/src/app/profile/profile.component.html
b/ui/src/app/profile/profile.component.html
index fd7196cce2..293e26fa1b 100644
--- a/ui/src/app/profile/profile.component.html
+++ b/ui/src/app/profile/profile.component.html
@@ -16,9 +16,9 @@
~
-->
-<div fxLayout="column" class="page-container">
- <div fxLayout="row" class="border sp-tab-bg">
- <div fxFlex="100" class="page-container-nav">
+<sp-basic-view>
+ <div fxLayout="row" nav>
+ <div fxFlex="100">
<div fxFlex="100" fxLayout="row">
<div fxFlex fxLayoutAlign="start center" [attr.id]="'peType'">
<mat-tab-group
@@ -60,4 +60,4 @@
></sp-token-management-settings>
</div>
</div>
-</div>
+</sp-basic-view>
diff --git a/ui/src/scss/sp/buttons-mat3.scss b/ui/src/scss/sp/buttons-mat3.scss
index 48c158b97e..4a9d09e424 100644
--- a/ui/src/scss/sp/buttons-mat3.scss
+++ b/ui/src/scss/sp/buttons-mat3.scss
@@ -24,7 +24,7 @@
}
@include mat.button-overrides(
(
- filled-container-shape: 5px,
+ filled-container-shape: 20px,
outlined-outline-color: var(--mat-sys-outline),
outlined-label-text-color: var(--mat-sys-on-surface),
filled-label-text-weight: 400,
