interesting
/
PeerTube
mirror of https://github.com/Chocobozzz/PeerTube.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Handle input error in markdown textarea

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> <label i18n for="broadcastMessageMessage">Message</label><my-help helpType="markdownText"></my-help>
<my-markdown-textarea <my-markdown-textarea
name="broadcastMessageMessage" formControlName="message" textareaMaxWidth="500px" name="broadcastMessageMessage" formControlName="message"
[classes]="{ 'input-error': formErrors['broadcastMessage.message'] }" [formError]="formErrors['broadcastMessage.message']"
></my-markdown-textarea> ></my-markdown-textarea>
<div *ngIf="formErrors.broadcastMessage.message" class="form-error">{{ formErrors.broadcastMessage.message }}</div> <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; padding-bottom: 1.5rem;
} }
input[type=text] { my-markdown-textarea {
@include peertube-input-text($form-base-input-width);
display: block; 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] { input[type=number] {
@include peertube-input-text($form-base-input-width); @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"> <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 class="col-12 col-lg-4 col-xl-3">
<div i18n class="inner-form-title">INSTANCE HOMEPAGE</div> <div i18n class="inner-form-title">INSTANCE HOMEPAGE</div>
</div> </div>
@ -16,9 +16,9 @@
</div> </div>
<my-markdown-textarea <my-markdown-textarea
name="instanceCustomHomepageContent" formControlName="content" textareaMaxWidth="90%" textareaHeight="300px" name="instanceCustomHomepageContent" formControlName="content"
[customMarkdownRenderer]="getCustomMarkdownRenderer()" [customMarkdownRenderer]="getCustomMarkdownRenderer()"
[classes]="{ 'input-error': formErrors['instanceCustomHomepage.content'] }" [formError]="formErrors['instanceCustomHomepage.content']"
></my-markdown-textarea> ></my-markdown-textarea>
<div *ngIf="formErrors.instanceCustomHomepage.content" class="form-error">{{ formErrors.instanceCustomHomepage.content }}</div> <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> </div>
<my-markdown-textarea <my-markdown-textarea
name="instanceDescription" formControlName="description" textareaMaxWidth="500px" name="instanceDescription" formControlName="description"
[customMarkdownRenderer]="getCustomMarkdownRenderer()" [customMarkdownRenderer]="getCustomMarkdownRenderer()"
[classes]="{ 'input-error': formErrors['instance.description'] }" [formError]="formErrors['instance.description']"
></my-markdown-textarea> ></my-markdown-textarea>
<div *ngIf="formErrors.instance.description" class="form-error">{{ formErrors.instance.description }}</div>
</div> </div>
<div class="form-group"> <div class="form-group">
@ -127,22 +125,18 @@
<label i18n for="instanceTerms">Terms</label><my-help helpType="markdownText"></my-help> <label i18n for="instanceTerms">Terms</label><my-help helpType="markdownText"></my-help>
<my-markdown-textarea <my-markdown-textarea
name="instanceTerms" formControlName="terms" textareaMaxWidth="500px" name="instanceTerms" formControlName="terms"
[ngClass]="{ 'input-error': formErrors['instance.terms'] }" [formError]="formErrors['instance.terms']"
></my-markdown-textarea> ></my-markdown-textarea>
<div *ngIf="formErrors.instance.terms" class="form-error">{{ formErrors.instance.terms }}</div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label i18n for="instanceCodeOfConduct">Code of conduct</label><my-help helpType="markdownText"></my-help> <label i18n for="instanceCodeOfConduct">Code of conduct</label><my-help helpType="markdownText"></my-help>
<my-markdown-textarea <my-markdown-textarea
name="instanceCodeOfConduct" formControlName="codeOfConduct" textareaMaxWidth="500px" name="instanceCodeOfConduct" formControlName="codeOfConduct"
[ngClass]="{ 'input-error': formErrors['instance.codeOfConduct'] }" [formError]="formErrors['instance.codeOfConduct']"
></my-markdown-textarea> ></my-markdown-textarea>
<div *ngIf="formErrors.instance.codeOfConduct" class="form-error">{{ formErrors.instance.codeOfConduct }}</div>
</div> </div>
<div class="form-group"> <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> <div i18n class="label-small-info">Who moderates the instance? What is the policy regarding NSFW videos? Political videos? etc</div>
<my-markdown-textarea <my-markdown-textarea
name="instanceModerationInformation" formControlName="moderationInformation" textareaMaxWidth="500px" name="instanceModerationInformation" formControlName="moderationInformation"
[ngClass]="{ 'input-error': formErrors['instance.moderationInformation'] }" [formError]="formErrors['instance.moderationInformation']"
></my-markdown-textarea> ></my-markdown-textarea>
<div *ngIf="formErrors.instance.moderationInformation" class="form-error">{{ formErrors.instance.moderationInformation }}</div>
</div> </div>
</div> </div>
@ -172,11 +164,9 @@
<div i18n class="label-small-info">A single person? A non-profit? A company?</div> <div i18n class="label-small-info">A single person? A non-profit? A company?</div>
<my-markdown-textarea <my-markdown-textarea
name="instanceAdministrator" formControlName="administrator" textareaMaxWidth="500px" name="instanceAdministrator" formControlName="administrator"
[classes]="{ 'input-error': formErrors['instance.administrator'] }" [formError]="formErrors['instance.administrator']"
></my-markdown-textarea> ></my-markdown-textarea>
<div *ngIf="formErrors.instance.administrator" class="form-error">{{ formErrors.instance.administrator }}</div>
</div> </div>
<div class="form-group"> <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> <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 <my-markdown-textarea
name="instanceCreationReason" formControlName="creationReason" textareaMaxWidth="500px" name="instanceCreationReason" formControlName="creationReason"
[ngClass]="{ 'input-error': formErrors['instance.creationReason'] }" [formError]="formErrors['instance.creationReason']"
></my-markdown-textarea> ></my-markdown-textarea>
<div *ngIf="formErrors.instance.creationReason" class="form-error">{{ formErrors.instance.creationReason }}</div>
</div> </div>
<div class="form-group"> <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> <div i18n class="label-small-info">It's important to know for users who want to register on your instance</div>
<my-markdown-textarea <my-markdown-textarea
name="instanceMaintenanceLifetime" formControlName="maintenanceLifetime" textareaMaxWidth="500px" name="instanceMaintenanceLifetime" formControlName="maintenanceLifetime"
[ngClass]="{ 'input-error': formErrors['instance.maintenanceLifetime'] }" [formError]="formErrors['instance.maintenanceLifetime']"
></my-markdown-textarea> ></my-markdown-textarea>
<div *ngIf="formErrors.instance.maintenanceLifetime" class="form-error">{{ formErrors.instance.maintenanceLifetime }}</div>
</div> </div>
<div class="form-group"> <div class="form-group">
@ -208,11 +194,9 @@
<div i18n class="label-small-info">With your own funds? With user donations? Advertising?</div> <div i18n class="label-small-info">With your own funds? With user donations? Advertising?</div>
<my-markdown-textarea <my-markdown-textarea
name="instanceBusinessModel" formControlName="businessModel" textareaMaxWidth="500px" name="instanceBusinessModel" formControlName="businessModel"
[ngClass]="{ 'input-error': formErrors['instance.businessModel'] }" [formError]="formErrors['instance.businessModel']"
></my-markdown-textarea> ></my-markdown-textarea>
<div *ngIf="formErrors.instance.businessModel" class="form-error">{{ formErrors.instance.businessModel }}</div>
</div> </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> <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 <my-markdown-textarea
name="instanceHardwareInformation" formControlName="hardwareInformation" textareaMaxWidth="500px" name="instanceHardwareInformation" formControlName="hardwareInformation"
[classes]="{ 'input-error': formErrors['instance.hardwareInformation'] }" [formError]="formErrors['instance.hardwareInformation']"
></my-markdown-textarea> ></my-markdown-textarea>
<div *ngIf="formErrors.instance.hardwareInformation" class="form-error">{{ formErrors.instance.hardwareInformation }}</div>
</div> </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-help>
<my-markdown-textarea <my-markdown-textarea
id="support" formControlName="support" textareaMaxWidth="500px" markdownType="enhanced" id="support" formControlName="support" markdownType="enhanced"
[formError]="formErrors['support']" [formError]="formErrors['support']"
></my-markdown-textarea> ></my-markdown-textarea>
</div> </div>

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

@ -42,6 +42,11 @@ textarea {
display: block; display: block;
} }
my-markdown-textarea {
display: block;
max-width: 500px;
}
.peertube-select-container { .peertube-select-container {
@include peertube-select-container(340px); @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"> <div class="form-group">
<label i18n for="description">Description</label><my-help helpType="markdownText"></my-help> <label i18n for="description">Description</label><my-help helpType="markdownText"></my-help>
<my-markdown-textarea <my-markdown-textarea id="description" formControlName="description" [formError]="formErrors['description']"></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>
</div> </div>
</div> </div>

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

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

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

@ -28,19 +28,19 @@
<my-markdown-textarea <my-markdown-textarea
*ngIf="setting.type === 'markdown-text'" *ngIf="setting.type === 'markdown-text'"
markdownType="text" [id]="setting.name" [formControlName]="setting.name" textareaWidth="500px" markdownType="text" [id]="setting.name" [formControlName]="setting.name"
[classes]="{ 'input-error': formErrors['settings.name'] }" [formError]="formErrors['settings.name']"
></my-markdown-textarea> ></my-markdown-textarea>
<my-markdown-textarea <my-markdown-textarea
*ngIf="setting.type === 'markdown-enhanced'" *ngIf="setting.type === 'markdown-enhanced'"
markdownType="enhanced" [id]="setting.name" [formControlName]="setting.name" textareaWidth="500px" markdownType="enhanced" [id]="setting.name" [formControlName]="setting.name"
[classes]="{ 'input-error': formErrors['settings.name'] }" [formError]="formErrors['settings.name']"
></my-markdown-textarea> ></my-markdown-textarea>
<div *ngIf="setting.type === 'html'" [innerHTML]="setting.html"></div> <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] }} {{ formErrors[setting.name] }}
</div> </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 { my-peertube-checkbox + .label-small-info {
margin-top: 5px; 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 <textarea #textarea
[(ngModel)]="content" (ngModelChange)="onModelChange()" [(ngModel)]="content" (ngModelChange)="onModelChange()"
class="form-control" [ngClass]="{ 'input-error': formError }" class="form-control" [ngClass]="{ 'input-error': formError }"
[attr.disabled]="disabled || null" [attr.disabled]="disabled || null"
[ngStyle]="{ height: textareaHeight }"
[id]="name" [name]="name"> [id]="name" [name]="name">
</textarea> </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() content = ''
@Input() formError: string @Input() formError: string
@Input() classes: string[] | { [klass: string]: any[] | any } = []
@Input() textareaMaxWidth = '100%'
@Input() textareaHeight = '150px'
@Input() truncate: number @Input() truncate: number

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

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