X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2Fshared%2Fmisc%2Fhelp.component.html;h=9a6d3e48e74290c82babbdf76441d6c5d8ab3552;hb=41f8f6207a25b75c69120cabe9b0571ac055f2ec;hp=bacbe9cdbb5950941740e164737f01ce4f7304f6;hpb=621d99f53f47a11919ec243e05273ecf5907b444;p=github%2FChocobozzz%2FPeerTube.git

diff --git a/client/src/app/shared/misc/help.component.html b/client/src/app/shared/misc/help.component.html
index bacbe9cdb..9a6d3e48e 100644
--- a/client/src/app/shared/misc/help.component.html
+++ b/client/src/app/shared/misc/help.component.html
@@ -1,18 +1,40 @@
 <ng-template #tooltipTemplate>
-  <ng-template [ngIf]="preHtml">
-    <p [innerHTML]="preHtml"></p>
-    <br />
-  </ng-template>
+  <p *ngIf="preHtmlTemplate">
+    <ng-template *ngTemplateOutlet="preHtmlTemplate"></ng-template>
+  </p>
 
-  <p [innerHTML]="mainHtml"></p>
+  <ng-container *ngIf="preHtmlTemplate && (customHtmlTemplate || mainHtml || postHtmlTemplate)">
+    <br /><br />
+  </ng-container>
 
-  <ng-template [ngIf]="postHtml">
-    <br />
-    <p [innerHTML]="postHtml"></p>
-  </ng-template>
+  <p *ngIf="customHtmlTemplate">
+    <ng-template *ngTemplateOutlet="customHtmlTemplate"></ng-template>
+  </p>
+
+  <p *ngIf="mainHtml" [innerHTML]="mainHtml"></p>
+
+  <ng-container *ngIf="(customHtmlTemplate || mainHtml) && postHtmlTemplate">
+    <br /><br />
+  </ng-container>
+
+  <p *ngIf="postHtmlTemplate">
+    <ng-template *ngTemplateOutlet="postHtmlTemplate"></ng-template>
+  </p>
 </ng-template>
 
-<button
-  class="help-tooltip-button" containerClass="help-tooltip" title="Click to get help"
-  #tooltipDirective="bs-tooltip" [tooltip]="tooltipTemplate" triggers="click"
-></button>
+<span
+  role="button"
+  class="help-tooltip-button"
+  container="body"
+  title="Get help"
+  i18n-title
+  popoverClass="help-popover"
+  [attr.aria-pressed]="isPopoverOpened"
+  [ngbPopover]="tooltipTemplate"
+  [placement]="tooltipPlacement"
+  autoClose="outside"
+  (onHidden)="onPopoverHidden()"
+  (onShown)="onPopoverShown()"
+>
+  <my-global-icon iconName="help"></my-global-icon>
+</span>