diff options
Diffstat (limited to 'client/src/app/shared')
| -rw-r--r-- | client/src/app/shared/forms/peertube-checkbox.component.html | 55 | ||||
| -rw-r--r-- | client/src/app/shared/forms/peertube-checkbox.component.scss | 10 |
2 files changed, 49 insertions, 16 deletions
diff --git a/client/src/app/shared/forms/peertube-checkbox.component.html b/client/src/app/shared/forms/peertube-checkbox.component.html index 1c0114d97..c740d852c 100644 --- a/client/src/app/shared/forms/peertube-checkbox.component.html +++ b/client/src/app/shared/forms/peertube-checkbox.component.html | |||
| @@ -1,18 +1,43 @@ | |||
| 1 | <div class="root"> | 1 | <div class="root flex-column"> |
| 2 | <label class="form-group-checkbox"> | 2 | <div class="d-flex"> |
| 3 | <input type="checkbox" [(ngModel)]="checked" (ngModelChange)="onModelChange()" [id]="inputName" [disabled]="disabled" /> | 3 | <label class="form-group-checkbox"> |
| 4 | <span role="checkbox" [attr.aria-checked]="checked"></span> | 4 | <input |
| 5 | <span *ngIf="labelText">{{ labelText }}</span> | 5 | type="checkbox" |
| 6 | <span *ngIf="!labelText && labelInnerHTML" [innerHTML]="labelInnerHTML"></span> | 6 | [(ngModel)]="checked" |
| 7 | (ngModelChange)="onModelChange()" | ||
| 8 | [id]="inputName" | ||
| 9 | [disabled]="disabled" | ||
| 10 | /> | ||
| 11 | <span role="checkbox" [attr.aria-checked]="checked"></span> | ||
| 12 | <span *ngIf="labelText">{{ labelText }}</span> | ||
| 13 | <span | ||
| 14 | *ngIf="!labelText && labelInnerHTML" | ||
| 15 | [innerHTML]="labelInnerHTML" | ||
| 16 | ></span> | ||
| 7 | 17 | ||
| 8 | <span *ngIf="labelTemplate"> | 18 | <span *ngIf="labelTemplate"> |
| 9 | <ng-container *ngTemplateOutlet="labelTemplate"></ng-container> | 19 | <ng-container *ngTemplateOutlet="labelTemplate"></ng-container> |
| 10 | </span> | 20 | </span> |
| 11 | </label> | 21 | </label> |
| 22 | |||
| 23 | <my-help | ||
| 24 | *ngIf="helpTemplate" | ||
| 25 | [tooltipPlacement]="helpPlacement" | ||
| 26 | helpType="custom" | ||
| 27 | > | ||
| 28 | <ng-template ptTemplate="customHtml"> | ||
| 29 | <ng-template *ngTemplateOutlet="helpTemplate"></ng-template> | ||
| 30 | </ng-template> | ||
| 31 | </my-help> | ||
| 32 | </div> | ||
| 12 | 33 | ||
| 13 | <my-help *ngIf="helpTemplate" [tooltipPlacement]="helpPlacement" helpType="custom"> | 34 | <div class="ml-4 d-flex flex-column"> |
| 14 | <ng-template ptTemplate="customHtml"> | 35 | <small class="wrapper mt-2 text-muted"> |
| 15 | <ng-template *ngTemplateOutlet="helpTemplate"></ng-template> | 36 | <ng-content select="description"></ng-content> |
| 16 | </ng-template> | 37 | </small> |
| 17 | </my-help> | 38 | |
| 39 | <span class="wrapper mt-3"> | ||
| 40 | <ng-content select="extra"></ng-content> | ||
| 41 | </span> | ||
| 42 | </div> | ||
| 18 | </div> | 43 | </div> |
diff --git a/client/src/app/shared/forms/peertube-checkbox.component.scss b/client/src/app/shared/forms/peertube-checkbox.component.scss index 3b467d49d..3120509b3 100644 --- a/client/src/app/shared/forms/peertube-checkbox.component.scss +++ b/client/src/app/shared/forms/peertube-checkbox.component.scss | |||
| @@ -26,4 +26,12 @@ | |||
| 26 | position: relative; | 26 | position: relative; |
| 27 | top: 2px; | 27 | top: 2px; |
| 28 | } | 28 | } |
| 29 | } | 29 | |
| 30 | small { | ||
| 31 | font-size: 90%; | ||
| 32 | } | ||
| 33 | |||
| 34 | .wrapper:empty { | ||
| 35 | display: none; | ||
| 36 | } | ||
| 37 | } \ No newline at end of file | ||