Notification: improve handling of empty message

Use a zero-width pseudo-element to prevent the div from collapsing instead of using a   character. This way, $messageText.text() will return an empty string instead of a non-breaking white-space. This can be useful for subclasses that want to hide the div entirely when it contains no text.
eclipse-scout · Aug 23, 2023 · 8240f02 · 8240f02
1 parent 25793db
commit 8240f02
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 3 deletions.
diff --git a/eclipse-scout-core/src/desktop/notification/DesktopNotification.less b/eclipse-scout-core/src/desktop/notification/DesktopNotification.less
@@ -198,6 +198,11 @@
     #scout.font-text-normal();
     color: @text-color;
   }
+
+  // Prevent empty div from collapsing (without &nbsp;)
+  &::after {
+    content: '\200b'; // U+200B ZERO WIDTH SPACE
+  }
 }
 
 .desktop-notification-loader {

diff --git a/eclipse-scout-core/src/notification/Notification.less b/eclipse-scout-core/src/notification/Notification.less
@@ -177,7 +177,11 @@
 
 .notification-message {
   padding-right: 12px;
-
   #scout.user-select(text);
   #scout.overflow-ellipsis();
+
+  // Prevent empty div from collapsing (without &nbsp;)
+  &::after {
+    content: '\200b'; // U+200B ZERO WIDTH SPACE
+  }
 }
diff --git a/eclipse-scout-core/src/notification/Notification.ts b/eclipse-scout-core/src/notification/Notification.ts
@@ -97,12 +97,12 @@ export class Notification extends Widget implements NotificationModel {
   protected _renderMessage() {
     let message = this.status.message || '';
     if (this.htmlEnabled) {
-      this.$messageText.htmlOrNbsp(message);
+      this.$messageText.html(message);
       // Add action to app-links
       this.$messageText.find('.app-link')
         .on('click', this._onAppLinkAction.bind(this));
     } else {
-      this.$messageText.htmlOrNbsp(strings.nl2br(message));
+      this.$messageText.html(strings.nl2br(message));
     }
     this.invalidateLayoutTree();
   }