From 6871960e5e2d20d7fc5d01ad7c71b5bebbb65178 Mon Sep 17 00:00:00 2001
From: Sebastian <sebastian@squidex.io>
Date: Sun, 7 Jun 2020 10:36:39 +0200
Subject: [PATCH] Small UI improvements.

---
 .../rules/pages/rules/actions/generic-action.component.html  | 4 ++--
 .../rules/pages/rules/actions/generic-action.component.scss  | 4 ++++
 frontend/app/framework/angular/external-link.directive.ts    | 1 +
 frontend/app/theme/_common.scss                              | 5 +++++
 4 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/frontend/app/features/rules/pages/rules/actions/generic-action.component.html b/frontend/app/features/rules/pages/rules/actions/generic-action.component.html
index c946e9e66..0e57104cf 100644
--- a/frontend/app/features/rules/pages/rules/actions/generic-action.component.html
+++ b/frontend/app/features/rules/pages/rules/actions/generic-action.component.html
@@ -27,9 +27,9 @@
             <sqx-form-hint>
                 {{property.description}}
 
-                <ng-container *ngIf="property.isFormattable">
+                <div *ngIf="property.isFormattable">
                     You can use advanced formatting: <a href="https://docs.squidex.io/concepts/rules#3-formatting" sqxExternalLink>Documentation</a>
-                </ng-container>
+                </div>
             </sqx-form-hint>
         </div>
     </div>
diff --git a/frontend/app/features/rules/pages/rules/actions/generic-action.component.scss b/frontend/app/features/rules/pages/rules/actions/generic-action.component.scss
index 57ca22613..c42242b38 100644
--- a/frontend/app/features/rules/pages/rules/actions/generic-action.component.scss
+++ b/frontend/app/features/rules/pages/rules/actions/generic-action.component.scss
@@ -2,6 +2,10 @@
     margin-bottom: -.25rem;
 }
 
+.form-group {
+    margin-bottom: 1.25rem;
+}
+
 textarea {
     height: 15rem;
 }
\ No newline at end of file
diff --git a/frontend/app/framework/angular/external-link.directive.ts b/frontend/app/framework/angular/external-link.directive.ts
index 5c9533789..873b8990c 100644
--- a/frontend/app/framework/angular/external-link.directive.ts
+++ b/frontend/app/framework/angular/external-link.directive.ts
@@ -25,6 +25,7 @@ export class ExternalLinkDirective implements AfterViewInit {
 
         this.renderer.setProperty(element, 'target', '_blank');
         this.renderer.setProperty(element, 'rel', 'noopener');
+        this.renderer.addClass(element, 'external');
 
         if (this.type !== 'noicon') {
             const icon = this.renderer.createElement('i');
diff --git a/frontend/app/theme/_common.scss b/frontend/app/theme/_common.scss
index 9cd733bea..42927f4d6 100644
--- a/frontend/app/theme/_common.scss
+++ b/frontend/app/theme/_common.scss
@@ -182,6 +182,11 @@ body {
     visibility: hidden;
 }
 
+//External link with icon
+.external {
+    white-space: nowrap;
+}
+
 //
 // Drop area for drag and drop features.
 //