From fabfcc9096570960641c51ac7d2ffde70cc9c1dc Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Fri, 22 Oct 2021 19:51:49 +0300
Subject: [PATCH] Improve help popup button to work in disabled fieldsets

---
 .../components/help-popup.component.html      | 55 ++++++++++---------
 .../components/help-popup.component.scss      |  7 +++
 2 files changed, 37 insertions(+), 25 deletions(-)

diff --git a/ui-ngx/src/app/shared/components/help-popup.component.html b/ui-ngx/src/app/shared/components/help-popup.component.html
index fde1fc8a87..a401459198 100644
--- a/ui-ngx/src/app/shared/components/help-popup.component.html
+++ b/ui-ngx/src/app/shared/components/help-popup.component.html
@@ -15,28 +15,33 @@
     limitations under the License.
 
 -->
-<button #toggleHelpButton
-        *ngIf="!textMode"
-        mat-icon-button
-        color="primary"
-        class="tb-help-popup-button tb-mat-32"
-        type="button"
-        (click)="toggleHelp()"
-        matTooltip="{{'help.show-help' | translate}}"
-        matTooltipPosition="above">
-  <mat-icon class="material-icons">{{popoverVisible ? 'help' : 'help_outline'}}</mat-icon>
-  <mat-spinner *ngIf="popoverVisible && !popoverReady" class="tb-help-popup-button-loading" mode="indeterminate" diameter="20" strokeWidth="2"></mat-spinner>
-</button>
-<button #toggleHelpTextButton
-        *ngIf="textMode"
-        mat-button
-        color="primary"
-        class="tb-help-popup-text-button"
-        [ngClass]="{'mat-stroked-button': popoverVisible && popoverReady}"
-        (click)="toggleHelp()">
-  <ng-container *ngIf="triggerSafeHtml">
-    <span [style]="triggerStyle" [innerHTML]="triggerSafeHtml"></span>
-  </ng-container>
-  <mat-icon *ngIf="!popoverVisible || popoverReady" class="tb-mat-16">open_in_new</mat-icon>
-  <mat-spinner *ngIf="popoverVisible && !popoverReady" mode="indeterminate" diameter="16" strokeWidth="2"></mat-spinner>
-</button>
+<fieldset class="tb-help-popup-button-container">
+  <div #toggleHelpButton
+       [fxShow]="!textMode"
+       matTooltip="{{'help.show-help' | translate}}"
+       matTooltipPosition="above"
+       style="border-radius: 50%"
+       (click)="toggleHelp()">
+    <button mat-icon-button
+            color="primary"
+            class="tb-help-popup-button tb-mat-32"
+            type="button">
+      <mat-icon class="material-icons">{{popoverVisible ? 'help' : 'help_outline'}}</mat-icon>
+      <mat-spinner *ngIf="popoverVisible && !popoverReady" class="tb-help-popup-button-loading" mode="indeterminate" diameter="20" strokeWidth="2"></mat-spinner>
+    </button>
+  </div>
+  <div #toggleHelpTextButton
+       [fxShow]="textMode"
+       (click)="toggleHelp()">
+    <button mat-button
+            color="primary"
+            class="tb-help-popup-text-button"
+            [ngClass]="{'mat-stroked-button': popoverVisible && popoverReady}">
+      <ng-container *ngIf="triggerSafeHtml">
+        <span [style]="triggerStyle" [innerHTML]="triggerSafeHtml"></span>
+      </ng-container>
+      <mat-icon *ngIf="!popoverVisible || popoverReady" class="tb-mat-16">open_in_new</mat-icon>
+      <mat-spinner *ngIf="popoverVisible && !popoverReady" mode="indeterminate" diameter="16" strokeWidth="2"></mat-spinner>
+    </button>
+  </div>
+</fieldset>
diff --git a/ui-ngx/src/app/shared/components/help-popup.component.scss b/ui-ngx/src/app/shared/components/help-popup.component.scss
index e28445de66..7b7de2f022 100644
--- a/ui-ngx/src/app/shared/components/help-popup.component.scss
+++ b/ui-ngx/src/app/shared/components/help-popup.component.scss
@@ -13,6 +13,13 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
+.tb-help-popup-button-container {
+  width: initial;
+  display: inline-block;
+  vertical-align: middle;
+}
+
 .tb-help-popup-button {
   position: relative;
   .mat-progress-spinner {