Commit fabfcc9096570960641c51ac7d2ffde70cc9c1dc

Authored by Igor Kulikov
1 parent 07dca7ef

Improve help popup button to work in disabled fieldsets

... ... @@ -15,28 +15,33 @@
15 15 limitations under the License.
16 16
17 17 -->
18   -<button #toggleHelpButton
19   - *ngIf="!textMode"
20   - mat-icon-button
21   - color="primary"
22   - class="tb-help-popup-button tb-mat-32"
23   - type="button"
24   - (click)="toggleHelp()"
25   - matTooltip="{{'help.show-help' | translate}}"
26   - matTooltipPosition="above">
27   - <mat-icon class="material-icons">{{popoverVisible ? 'help' : 'help_outline'}}</mat-icon>
28   - <mat-spinner *ngIf="popoverVisible && !popoverReady" class="tb-help-popup-button-loading" mode="indeterminate" diameter="20" strokeWidth="2"></mat-spinner>
29   -</button>
30   -<button #toggleHelpTextButton
31   - *ngIf="textMode"
32   - mat-button
33   - color="primary"
34   - class="tb-help-popup-text-button"
35   - [ngClass]="{'mat-stroked-button': popoverVisible && popoverReady}"
36   - (click)="toggleHelp()">
37   - <ng-container *ngIf="triggerSafeHtml">
38   - <span [style]="triggerStyle" [innerHTML]="triggerSafeHtml"></span>
39   - </ng-container>
40   - <mat-icon *ngIf="!popoverVisible || popoverReady" class="tb-mat-16">open_in_new</mat-icon>
41   - <mat-spinner *ngIf="popoverVisible && !popoverReady" mode="indeterminate" diameter="16" strokeWidth="2"></mat-spinner>
42   -</button>
  18 +<fieldset class="tb-help-popup-button-container">
  19 + <div #toggleHelpButton
  20 + [fxShow]="!textMode"
  21 + matTooltip="{{'help.show-help' | translate}}"
  22 + matTooltipPosition="above"
  23 + style="border-radius: 50%"
  24 + (click)="toggleHelp()">
  25 + <button mat-icon-button
  26 + color="primary"
  27 + class="tb-help-popup-button tb-mat-32"
  28 + type="button">
  29 + <mat-icon class="material-icons">{{popoverVisible ? 'help' : 'help_outline'}}</mat-icon>
  30 + <mat-spinner *ngIf="popoverVisible && !popoverReady" class="tb-help-popup-button-loading" mode="indeterminate" diameter="20" strokeWidth="2"></mat-spinner>
  31 + </button>
  32 + </div>
  33 + <div #toggleHelpTextButton
  34 + [fxShow]="textMode"
  35 + (click)="toggleHelp()">
  36 + <button mat-button
  37 + color="primary"
  38 + class="tb-help-popup-text-button"
  39 + [ngClass]="{'mat-stroked-button': popoverVisible && popoverReady}">
  40 + <ng-container *ngIf="triggerSafeHtml">
  41 + <span [style]="triggerStyle" [innerHTML]="triggerSafeHtml"></span>
  42 + </ng-container>
  43 + <mat-icon *ngIf="!popoverVisible || popoverReady" class="tb-mat-16">open_in_new</mat-icon>
  44 + <mat-spinner *ngIf="popoverVisible && !popoverReady" mode="indeterminate" diameter="16" strokeWidth="2"></mat-spinner>
  45 + </button>
  46 + </div>
  47 +</fieldset>
... ...
... ... @@ -13,6 +13,13 @@
13 13 * See the License for the specific language governing permissions and
14 14 * limitations under the License.
15 15 */
  16 +
  17 +.tb-help-popup-button-container {
  18 + width: initial;
  19 + display: inline-block;
  20 + vertical-align: middle;
  21 +}
  22 +
16 23 .tb-help-popup-button {
17 24 position: relative;
18 25 .mat-progress-spinner {
... ...