forks/peertube
1
0
Fork 0
Code Releases Activity

Handle input error in markdown textarea

Browse source
This commit is contained in:
Chocobozzz 2022-06-20 15:56:16 +02:00
parent 3031971ec2
commit 9bc3622320
No known key found for this signature in database
GPG key ID: 583A612D890159BE
13 changed files with 70 additions and 75 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html
View file

@ -132,8 +132,8 @@
<label i18n for="broadcastMessageMessage">Message</label><my-help helpType="markdownText"></my-help>
<my-markdown-textarea
name="broadcastMessageMessage" formControlName="message" textareaMaxWidth="500px"
[classes]="{ 'input-error': formErrors['broadcastMessage.message'] }"
name="broadcastMessageMessage" formControlName="message"
[formError]="formErrors['broadcastMessage.message']"
></my-markdown-textarea>
<div *ngIf="formErrors.broadcastMessage.message" class="form-error">{{ formErrors.broadcastMessage.message }}</div>

15
client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
View file

@ -7,12 +7,21 @@ form {
padding-bottom: 1.5rem;
}
input[type=text] {
@include peertube-input-text($form-base-input-width);
my-markdown-textarea {
display: block;
max-width: 500px;
}
.homepage my-markdown-textarea {
display: block;
max-width: 90%;
::ng-deep textarea {
height: 300px !important;
}
}
input[type=text],
input[type=number] {
@include peertube-input-text($form-base-input-width);

6
client/src/app/+admin/config/edit-custom-config/edit-homepage.component.html
View file

@ -2,7 +2,7 @@
<ng-container formGroupName="instanceCustomHomepage">
<div class="row mt-5"> <!-- homepage grid -->
<div class="homepage row mt-5"> <!-- homepage grid -->
<div class="col-12 col-lg-4 col-xl-3">
<div i18n class="inner-form-title">INSTANCE HOMEPAGE</div>
</div>
@ -16,9 +16,9 @@
</div>
<my-markdown-textarea
name="instanceCustomHomepageContent" formControlName="content" textareaMaxWidth="90%" textareaHeight="300px"
name="instanceCustomHomepageContent" formControlName="content"
[customMarkdownRenderer]="getCustomMarkdownRenderer()"
[classes]="{ 'input-error': formErrors['instanceCustomHomepage.content'] }"
[formError]="formErrors['instanceCustomHomepage.content']"
></my-markdown-textarea>
<div *ngIf="formErrors.instanceCustomHomepage.content" class="form-error">{{ formErrors.instanceCustomHomepage.content }}</div>

54
client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.html
View file

@ -37,12 +37,10 @@
</div>
<my-markdown-textarea
name="instanceDescription" formControlName="description" textareaMaxWidth="500px"
name="instanceDescription" formControlName="description"
[customMarkdownRenderer]="getCustomMarkdownRenderer()"
[classes]="{ 'input-error': formErrors['instance.description'] }"
[formError]="formErrors['instance.description']"
></my-markdown-textarea>
<div *ngIf="formErrors.instance.description" class="form-error">{{ formErrors.instance.description }}</div>
</div>
<div class="form-group">
@ -127,22 +125,18 @@
<label i18n for="instanceTerms">Terms</label><my-help helpType="markdownText"></my-help>
<my-markdown-textarea
name="instanceTerms" formControlName="terms" textareaMaxWidth="500px"
[ngClass]="{ 'input-error': formErrors['instance.terms'] }"
name="instanceTerms" formControlName="terms"
[formError]="formErrors['instance.terms']"
></my-markdown-textarea>
<div *ngIf="formErrors.instance.terms" class="form-error">{{ formErrors.instance.terms }}</div>
</div>
<div class="form-group">
<label i18n for="instanceCodeOfConduct">Code of conduct</label><my-help helpType="markdownText"></my-help>
<my-markdown-textarea
name="instanceCodeOfConduct" formControlName="codeOfConduct" textareaMaxWidth="500px"
[ngClass]="{ 'input-error': formErrors['instance.codeOfConduct'] }"
name="instanceCodeOfConduct" formControlName="codeOfConduct"
[formError]="formErrors['instance.codeOfConduct']"
></my-markdown-textarea>
<div *ngIf="formErrors.instance.codeOfConduct" class="form-error">{{ formErrors.instance.codeOfConduct }}</div>
</div>
<div class="form-group">
@ -150,11 +144,9 @@
<div i18n class="label-small-info">Who moderates the instance? What is the policy regarding NSFW videos? Political videos? etc</div>
<my-markdown-textarea
name="instanceModerationInformation" formControlName="moderationInformation" textareaMaxWidth="500px"
[ngClass]="{ 'input-error': formErrors['instance.moderationInformation'] }"
name="instanceModerationInformation" formControlName="moderationInformation"
[formError]="formErrors['instance.moderationInformation']"
></my-markdown-textarea>
<div *ngIf="formErrors.instance.moderationInformation" class="form-error">{{ formErrors.instance.moderationInformation }}</div>
</div>
</div>
@ -172,11 +164,9 @@
<div i18n class="label-small-info">A single person? A non-profit? A company?</div>
<my-markdown-textarea
name="instanceAdministrator" formControlName="administrator" textareaMaxWidth="500px"
[classes]="{ 'input-error': formErrors['instance.administrator'] }"
name="instanceAdministrator" formControlName="administrator"
[formError]="formErrors['instance.administrator']"
></my-markdown-textarea>
<div *ngIf="formErrors.instance.administrator" class="form-error">{{ formErrors.instance.administrator }}</div>
</div>
<div class="form-group">
@ -184,11 +174,9 @@
<div i18n class="label-small-info">To share your personal videos? To open registrations and allow people to upload what they want?</div>
<my-markdown-textarea
name="instanceCreationReason" formControlName="creationReason" textareaMaxWidth="500px"
[ngClass]="{ 'input-error': formErrors['instance.creationReason'] }"
name="instanceCreationReason" formControlName="creationReason"
[formError]="formErrors['instance.creationReason']"
></my-markdown-textarea>
<div *ngIf="formErrors.instance.creationReason" class="form-error">{{ formErrors.instance.creationReason }}</div>
</div>
<div class="form-group">
@ -196,11 +184,9 @@
<div i18n class="label-small-info">It's important to know for users who want to register on your instance</div>
<my-markdown-textarea
name="instanceMaintenanceLifetime" formControlName="maintenanceLifetime" textareaMaxWidth="500px"
[ngClass]="{ 'input-error': formErrors['instance.maintenanceLifetime'] }"
name="instanceMaintenanceLifetime" formControlName="maintenanceLifetime"
[formError]="formErrors['instance.maintenanceLifetime']"
></my-markdown-textarea>
<div *ngIf="formErrors.instance.maintenanceLifetime" class="form-error">{{ formErrors.instance.maintenanceLifetime }}</div>
</div>
<div class="form-group">
@ -208,11 +194,9 @@
<div i18n class="label-small-info">With your own funds? With user donations? Advertising?</div>
<my-markdown-textarea
name="instanceBusinessModel" formControlName="businessModel" textareaMaxWidth="500px"
[ngClass]="{ 'input-error': formErrors['instance.businessModel'] }"
name="instanceBusinessModel" formControlName="businessModel"
[formError]="formErrors['instance.businessModel']"
></my-markdown-textarea>
<div *ngIf="formErrors.instance.businessModel" class="form-error">{{ formErrors.instance.businessModel }}</div>
</div>
</div>
@ -230,11 +214,9 @@
<div i18n class="label-small-info">i.e. 2vCore 2GB RAM, a direct the link to the server you rent, etc.</div>
<my-markdown-textarea
name="instanceHardwareInformation" formControlName="hardwareInformation" textareaMaxWidth="500px"
[classes]="{ 'input-error': formErrors['instance.hardwareInformation'] }"
name="instanceHardwareInformation" formControlName="hardwareInformation"
[formError]="formErrors['instance.hardwareInformation']"
></my-markdown-textarea>
<div *ngIf="formErrors.instance.hardwareInformation" class="form-error">{{ formErrors.instance.hardwareInformation }}</div>
</div>
</div>

2
client/src/app/+manage/video-channel-edit/video-channel-edit.component.html
View file

@ -68,7 +68,7 @@
></my-help>
<my-markdown-textarea
id="support" formControlName="support" textareaMaxWidth="500px" markdownType="enhanced"
id="support" formControlName="support" markdownType="enhanced"
[formError]="formErrors['support']"
></my-markdown-textarea>
</div>

5
client/src/app/+manage/video-channel-edit/video-channel-edit.component.scss
View file

@ -42,6 +42,11 @@ textarea {
display: block;
}
my-markdown-textarea {
display: block;
max-width: 500px;
}
.peertube-select-container {
@include peertube-select-container(340px);
}

8
client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.html
View file

@ -42,13 +42,7 @@
<div class="form-group">
<label i18n for="description">Description</label><my-help helpType="markdownText"></my-help>
<my-markdown-textarea
id="description" formControlName="description"
[ngClass]="{ 'input-error': formErrors['description'] }"
></my-markdown-textarea>
<div *ngIf="formErrors.description" class="form-error">
{{ formErrors.description }}
</div>
<my-markdown-textarea id="description" formControlName="description" [formError]="formErrors['description']"></my-markdown-textarea>
</div>
</div>

15
client/src/app/+videos/+video-edit/shared/video-edit.component.html
View file

@ -51,11 +51,10 @@
</ng-template>
</my-help>
<my-markdown-textarea [truncate]="250" formControlName="description" [markdownVideo]="videoToUpdate"></my-markdown-textarea>
<div *ngIf="formErrors.description" class="form-error">
{{ formErrors.description }}
</div>
<my-markdown-textarea
formControlName="description" [markdownVideo]="videoToUpdate"
[formError]="formErrors.description" [truncate]="250"
></my-markdown-textarea>
</div>
</div>
@ -332,13 +331,11 @@
</ng-container>
</ng-template>
</my-help>
<my-markdown-textarea
id="support" formControlName="support" markdownType="enhanced"
[classes]="{ 'input-error': formErrors['support'] }"
[formError]="formErrors['support']"
></my-markdown-textarea>
<div *ngIf="formErrors.support" class="form-error">
{{ formErrors.support }}
</div>
</div>
</div>

10
client/src/app/shared/shared-forms/dynamic-form-field.component.html
View file

@ -28,19 +28,19 @@
<my-markdown-textarea
*ngIf="setting.type === 'markdown-text'"
markdownType="text" [id]="setting.name" [formControlName]="setting.name" textareaWidth="500px"
[classes]="{ 'input-error': formErrors['settings.name'] }"
markdownType="text" [id]="setting.name" [formControlName]="setting.name"
[formError]="formErrors['settings.name']"
></my-markdown-textarea>
<my-markdown-textarea
*ngIf="setting.type === 'markdown-enhanced'"
markdownType="enhanced" [id]="setting.name" [formControlName]="setting.name" textareaWidth="500px"
[classes]="{ 'input-error': formErrors['settings.name'] }"
markdownType="enhanced" [id]="setting.name" [formControlName]="setting.name"
[formError]="formErrors['settings.name']"
></my-markdown-textarea>
<div *ngIf="setting.type === 'html'" [innerHTML]="setting.html"></div>
<div *ngIf="formErrors[setting.name]" class="form-error">
<div *ngIf="setting.type !== 'markdown-text' && setting.type !== 'markdown-enhanced' && formErrors[setting.name]" class="form-error">
{{ formErrors[setting.name] }}
</div>

5
client/src/app/shared/shared-forms/dynamic-form-field.component.scss
View file

@ -26,3 +26,8 @@ textarea {
my-peertube-checkbox + .label-small-info {
margin-top: 5px;
}
my-markdown-textarea {
display: block;
max-width: 500px;
}

3
client/src/app/shared/shared-forms/markdown-textarea.component.html
View file

@ -1,10 +1,9 @@
<div class="root" [ngClass]="{ 'maximized': isMaximized }" [ngStyle]="{ 'max-width': textareaMaxWidth }">
<div class="root" [ngClass]="{ 'maximized': isMaximized }">
<textarea #textarea
[(ngModel)]="content" (ngModelChange)="onModelChange()"
class="form-control" [ngClass]="{ 'input-error': formError }"
[attr.disabled]="disabled || null"
[ngStyle]="{ height: textareaHeight }"
[id]="name" [name]="name">
</textarea>

4
client/src/app/shared/shared-forms/markdown-textarea.component.ts
View file

@ -25,10 +25,6 @@ export class MarkdownTextareaComponent implements ControlValueAccessor, OnInit {
@Input() content = ''
@Input() formError: string
@Input() classes: string[] | { [klass: string]: any[] | any } = []
@Input() textareaMaxWidth = '100%'
@Input() textareaHeight = '150px'
@Input() truncate: number

14
client/src/sass/class-helpers.scss
View file

@ -70,7 +70,11 @@
}
.input-error:not(:focus) {
border-color: $red !important;
&,
& + .nav-preview, // Markdown textarea
& + * + .tab-content {
border-color: $red !important;
}
}
.form-error,
@ -83,8 +87,12 @@
color: $red;
}
.input-error:focus + .form-error {
color: pvar(--mainForegroundColor);
.input-error:focus {
& + .form-error,
& + * + .form-error, // Markdown textarea
& + * + * + .form-error {
color: pvar(--mainForegroundColor);
}
}
.form-group-description {