add explicit numbers in configuration number inputs

fixes #1346
This commit is contained in:
Rigel Kent 2020-11-21 12:43:53 +01:00
parent 47e363bbe9
commit c5dcdab330
No known key found for this signature in database
GPG Key ID: 5E53E96A494E452F
3 changed files with 50 additions and 23 deletions

View File

@ -362,10 +362,13 @@
<div [ngClass]="{ 'disabled-checkbox-extra': !isSignupEnabled() }" class="mt-3"> <div [ngClass]="{ 'disabled-checkbox-extra': !isSignupEnabled() }" class="mt-3">
<label i18n for="signupLimit">Signup limit</label> <label i18n for="signupLimit">Signup limit</label>
<input <div class="number-with-unit">
type="number" min="-1" id="signupLimit" class="form-control" <input
formControlName="limit" [ngClass]="{ 'input-error': formErrors['signup.limit'] }" type="number" min="-1" id="signupLimit" class="form-control"
> formControlName="limit" [ngClass]="{ 'input-error': formErrors['signup.limit'] }"
>
<span i18n>{form.value['signup']['limit'], plural, =1 {user} other {users}}</span>
</div>
<div *ngIf="formErrors.signup.limit" class="form-error">{{ formErrors.signup.limit }}</div> <div *ngIf="formErrors.signup.limit" class="form-error">{{ formErrors.signup.limit }}</div>
<small *ngIf="form.value['signup']['limit'] === -1" class="text-muted">Signup won't be limited to a fixed number of users.</small> <small *ngIf="form.value['signup']['limit'] === -1" class="text-muted">Signup won't be limited to a fixed number of users.</small>
</div> </div>
@ -743,22 +746,29 @@
<div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isLiveEnabled() }"> <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isLiveEnabled() }">
<label i18n for="liveMaxInstanceLives">Max lives created on your instance (-1 for "unlimited")</label> <label i18n for="liveMaxInstanceLives">Max lives created on your instance (-1 for "unlimited")</label>
<input type="number" name="liveMaxInstanceLives" formControlName="maxInstanceLives" /> <div class="number-with-unit">
<input type="number" name="liveMaxInstanceLives" formControlName="maxInstanceLives" />
<span i18n>{form.value['live']['maxInstanceLives'], plural, =1 {live} other {lives}}</span>
</div>
</div> </div>
<div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isLiveEnabled() }"> <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isLiveEnabled() }">
<label i18n for="liveMaxUserLives">Max lives created per user (-1 for "unlimited")</label> <label i18n for="liveMaxUserLives">Max lives created per user (-1 for "unlimited")</label>
<input type="number" name="liveMaxUserLives" formControlName="maxUserLives" /> <div class="number-with-unit">
<input type="number" name="liveMaxUserLives" formControlName="maxUserLives" />
<span i18n>{form.value['live']['maxUserLives'], plural, =1 {live} other {lives}}</span>
</div>
</div> </div>
<div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isLiveEnabled() }"> <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isLiveEnabled() }">
<label i18n for="liveMaxDuration">Max live duration</label> <label i18n for="liveMaxDuration">Max live duration</label>
<div class="peertube-select-container"> <div class="peertube-select-container">
<select id="liveMaxDuration" formControlName="maxDuration" class="form-control"> <ng-select
<option *ngFor="let liveMaxDurationOption of liveMaxDurationOptions" [value]="liveMaxDurationOption.value"> labelForId="liveMaxDuration" [items]="liveMaxDurationOptions" formControlName="maxDuration"
{{ liveMaxDurationOption.label }} bindLabel="label" bindValue="value"
</option> [clearable]="false"
</select> [searchable]="false"
></ng-select>
</div> </div>
</div> </div>
@ -780,7 +790,7 @@
<div class="peertube-select-container"> <div class="peertube-select-container">
<select id="liveTranscodingThreads" formControlName="threads" class="form-control"> <select id="liveTranscodingThreads" formControlName="threads" class="form-control">
<option *ngFor="let transcodingThreadOption of transcodingThreadOptions" [value]="transcodingThreadOption.value"> <option *ngFor="let transcodingThreadOption of transcodingThreadOptions" [value]="transcodingThreadOption.value">
{{ transcodingThreadOption.label }} {{ transcodingThreadOption.label }} {transcodingThreadOption.value, plural, =0 {} =1 {thread} other {threads}}
</option> </option>
</select> </select>
</div> </div>
@ -922,7 +932,7 @@
<div class="peertube-select-container"> <div class="peertube-select-container">
<select id="transcodingThreads" formControlName="threads" class="form-control"> <select id="transcodingThreads" formControlName="threads" class="form-control">
<option *ngFor="let transcodingThreadOption of transcodingThreadOptions" [value]="transcodingThreadOption.value"> <option *ngFor="let transcodingThreadOption of transcodingThreadOptions" [value]="transcodingThreadOption.value">
{{ transcodingThreadOption.label }} {{ transcodingThreadOption.label }} {transcodingThreadOption.value, plural, =0 {} =1 {thread} other {threads}}
</option> </option>
</select> </select>
</div> </div>
@ -968,19 +978,25 @@
<ng-container formGroupName="cache"> <ng-container formGroupName="cache">
<div class="form-group" formGroupName="previews"> <div class="form-group" formGroupName="previews">
<label i18n for="cachePreviewsSize">Number of previews to keep in cache</label> <label i18n for="cachePreviewsSize">Number of previews to keep in cache</label>
<input <div class="number-with-unit">
type="number" min="0" id="cachePreviewsSize" class="form-control" <input
formControlName="size" [ngClass]="{ 'input-error': formErrors['cache.previews.size'] }" type="number" min="0" id="cachePreviewsSize" class="form-control"
> formControlName="size" [ngClass]="{ 'input-error': formErrors['cache.previews.size'] }"
>
<span i18n>{form.value['cache']['previews']['size'], plural, =1 {cached image} other {cached images}}</span>
</div>
<div *ngIf="formErrors.cache.previews.size" class="form-error">{{ formErrors.cache.previews.size }}</div> <div *ngIf="formErrors.cache.previews.size" class="form-error">{{ formErrors.cache.previews.size }}</div>
</div> </div>
<div class="form-group" formGroupName="captions"> <div class="form-group" formGroupName="captions">
<label i18n for="cacheCaptionsSize">Number of video captions to keep in cache</label> <label i18n for="cacheCaptionsSize">Number of video captions to keep in cache</label>
<input <div class="number-with-unit">
type="number" min="0" id="cacheCaptionsSize" class="form-control" <input
formControlName="size" [ngClass]="{ 'input-error': formErrors['cache.captions.size'] }" type="number" min="0" id="cacheCaptionsSize" class="form-control"
> formControlName="size" [ngClass]="{ 'input-error': formErrors['cache.captions.size'] }"
>
<span i18n>{form.value['cache']['captions']['size'], plural, =1 {cached image} other {cached images}}</span>
</div>
<div *ngIf="formErrors.cache.captions.size" class="form-error">{{ formErrors.cache.captions.size }}</div> <div *ngIf="formErrors.cache.captions.size" class="form-error">{{ formErrors.cache.captions.size }}</div>
</div> </div>
</ng-container> </ng-container>

View File

@ -22,6 +22,17 @@ input[type=number] {
display: block; display: block;
} }
.number-with-unit {
position: relative;
width: min-content;
input[type=number] + span {
position: absolute;
top: 5px;
right: 2.5rem;
}
}
input[type=checkbox] { input[type=checkbox] {
@include peertube-checkbox(1px); @include peertube-checkbox(1px);
} }

View File

@ -105,11 +105,11 @@
<a [href]="videoComment.localUrl" target="_blank" rel="noopener noreferrer">{{ videoComment.video.name }}</a> <a [href]="videoComment.localUrl" target="_blank" rel="noopener noreferrer">{{ videoComment.video.name }}</a>
</td> </td>
<td class="comment-html"> <td class="comment-html c-hand" [pRowToggler]="videoComment">
<div [innerHTML]="videoComment.textHtml"></div> <div [innerHTML]="videoComment.textHtml"></div>
</td> </td>
<td>{{ videoComment.createdAt | date: 'short' }}</td> <td class="c-hand" [pRowToggler]="videoComment">{{ videoComment.createdAt | date: 'short' }}</td>
</tr> </tr>
</ng-template> </ng-template>