Verified Commit 9bc36223 authored by Chocobozzz's avatar Chocobozzz
Browse files

Handle input error in markdown textarea

parent 3031971e
......@@ -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>
......
......@@ -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);
......
......@@ -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>
......
......@@ -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>
......
......@@ -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>
......
......@@ -42,6 +42,11 @@ textarea {
display: block;
}
my-markdown-textarea {
display: block;
max-width: 500px;
}
.peertube-select-container {
@include peertube-select-container(340px);
}
......
......@@ -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>
......
......@@ -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>
......
......@@ -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>
......
......@@ -26,3 +26,8 @@ textarea {
my-peertube-checkbox + .label-small-info {
margin-top: 5px;
}
my-markdown-textarea {
display: block;
max-width: 500px;
}
<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>
......
......@@ -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
......
......@@ -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 {
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment