Merge branch 'master' of github.com:thingsboard/thingsboard

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
+<fieldset class="tb-help-popup-button-container" *ngIf="!textMode">
+  <div #toggleHelpButton
+       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"
-        (click)="toggleHelp()"
-        matTooltip="{{'help.show-help' | translate}}"
-        matTooltipPosition="above">
+            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>
-<button #toggleHelpTextButton
-        *ngIf="textMode"
-        mat-button
+    </button>
+  </div>
+</fieldset>
+<fieldset class="tb-help-popup-button-container" *ngIf="textMode">
+  <div #toggleHelpTextButton
+       (click)="toggleHelp()">
+    <button mat-button
             color="primary"
             class="tb-help-popup-text-button"
-        [ngClass]="{'mat-stroked-button': popoverVisible && popoverReady}"
-        (click)="toggleHelp()">
+            [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>
+    </button>
+  </div>
+</fieldset>

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 {