From f45c7cc770963670b3f2f1ac11d3ee3afc84a7ec Mon Sep 17 00:00:00 2001
From: Florian CUNY <poslovitch@bentobox.world>
Date: Mon, 30 Nov 2020 15:05:57 +0100
Subject: Added Markdown formatting in all the fields of the "About" page
(#3371)
* Added Markdown formatting in all the fields of the "About" page
Fixes https://github.com/Chocobozzz/PeerTube/issues/3368
* Fixed compilation error in AboutInstanceComponent
Moved creationReason, maintenanceLifetime and businessModel into the html dict
* Removed textareaHeight for all md textareas in EditCustomConfig HTML
* Fixed failing bundlewatch
---
.../about-instance/about-instance.component.html | 14 +++++-----
.../about-instance/about-instance.component.ts | 11 +++-----
.../edit-custom-config.component.html | 30 +++++++++++-----------
.../app/shared/shared-instance/instance.service.ts | 3 +++
4 files changed, 28 insertions(+), 30 deletions(-)
(limited to 'client/src/app')
diff --git a/client/src/app/+about/about-instance/about-instance.component.html b/client/src/app/+about/about-instance/about-instance.component.html
index 045bb3fbc..bb337fdf3 100644
--- a/client/src/app/+about/about-instance/about-instance.component.html
+++ b/client/src/app/+about/about-instance/about-instance.component.html
@@ -21,7 +21,7 @@
<div class="anchor" id="administrators-and-sustainability"></div>
<a
- *ngIf="html.administrator || maintenanceLifetime || businessModel"
+ *ngIf="html.administrator || html.maintenanceLifetime || html.businessModel"
class="anchor-link"
routerLink="/about/instance"
fragment="administrators-and-sustainability"
@@ -47,7 +47,7 @@
<div [innerHTML]="html.administrator"></div>
</div>
- <div class="block creation-reason" *ngIf="creationReason">
+ <div class="block creation-reason" *ngIf="html.creationReason">
<div class="anchor" id="creation-reason"></div>
<a
class="anchor-link"
@@ -58,10 +58,10 @@
<h3 i18n class="section-title">Why we created this instance</h3>
</a>
- <p>{{ creationReason }}</p>
+ <div [innerHTML]="html.creationReason"></div>
</div>
- <div class="block maintenance-lifetime" *ngIf="maintenanceLifetime">
+ <div class="block maintenance-lifetime" *ngIf="html.maintenanceLifetime">
<div class="anchor" id="maintenance-lifetime"></div>
<a
class="anchor-link"
@@ -72,10 +72,10 @@
<h3 i18n class="section-title">How long we plan to maintain this instance</h3>
</a>
- <p>{{ maintenanceLifetime }}</p>
+ <div [innerHTML]="html.maintenanceLifetime"></div>
</div>
- <div class="block business-model" *ngIf="businessModel">
+ <div class="block business-model" *ngIf="html.businessModel">
<div class="anchor" id="business-model"></div>
<a
class="anchor-link"
@@ -86,7 +86,7 @@
<h3 i18n class="section-title">How we will pay for this instance</h3>
</a>
- <p>{{ businessModel }}</p>
+ <div [innerHTML]="html.businessModel"></div>
</div>
<div class="anchor" id="information"></div>
diff --git a/client/src/app/+about/about-instance/about-instance.component.ts b/client/src/app/+about/about-instance/about-instance.component.ts
index 92ecd5263..7eb382a46 100644
--- a/client/src/app/+about/about-instance/about-instance.component.ts
+++ b/client/src/app/+about/about-instance/about-instance.component.ts
@@ -24,13 +24,12 @@ export class AboutInstanceComponent implements OnInit, AfterViewChecked {
codeOfConduct: '',
moderationInformation: '',
administrator: '',
+ creationReason: '',
+ maintenanceLifetime: '',
+ businessModel: '',
hardwareInformation: ''
}
- creationReason = ''
- maintenanceLifetime = ''
- businessModel = ''
-
languages: string[] = []
categories: string[] = []
@@ -69,10 +68,6 @@ export class AboutInstanceComponent implements OnInit, AfterViewChecked {
this.shortDescription = about.instance.shortDescription
- this.creationReason = about.instance.creationReason
- this.maintenanceLifetime = about.instance.maintenanceLifetime
- this.businessModel = about.instance.businessModel
-
this.html = await this.instanceService.buildHtml(about)
this.initialized = true
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
index 0927523f1..70533475a 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
@@ -162,11 +162,11 @@
<div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
<div class="form-group">
- <label i18n for="instanceAdministrator">Who is behind the instance?</label>
+ <label i18n for="instanceAdministrator">Who is behind the instance?</label><my-help helpType="markdownText"></my-help>
<div i18n class="label-small-info">A single person? A non-profit? A company?</div>
<my-markdown-textarea
- name="instanceAdministrator" formControlName="administrator" textareaMaxWidth="500px" textareaHeight="75px"
+ name="instanceAdministrator" formControlName="administrator" textareaMaxWidth="500px"
[classes]="{ 'input-error': formErrors['instance.administrator'] }"
></my-markdown-textarea>
@@ -174,35 +174,35 @@
</div>
<div class="form-group">
- <label i18n for="instanceCreationReason">Why did you create this instance?</label>
+ <label i18n for="instanceCreationReason">Why did you create this instance?</label><my-help helpType="markdownText"></my-help>
<div i18n class="label-small-info">To share your personal videos? To open registrations and allow people to upload what they want?</div>
- <textarea
- id="instanceCreationReason" formControlName="creationReason" class="small" class="form-control"
+ <my-markdown-textarea
+ id="instanceCreationReason" formControlName="creationReason" textareaMaxWidth="500px"
[ngClass]="{ 'input-error': formErrors['instance.creationReason'] }"
- ></textarea>
+ ></my-markdown-textarea>
<div *ngIf="formErrors.instance.creationReason" class="form-error">{{ formErrors.instance.creationReason }}</div>
</div>
<div class="form-group">
- <label i18n for="instanceMaintenanceLifetime">How long do you plan to maintain this instance?</label>
+ <label i18n for="instanceMaintenanceLifetime">How long do you plan to maintain this instance?</label><my-help helpType="markdownText"></my-help>
<div i18n class="label-small-info">It's important to know for users who want to register on your instance</div>
- <textarea
- id="instanceMaintenanceLifetime" formControlName="maintenanceLifetime" class="form-control small"
+ <my-markdown-textarea
+ id="instanceMaintenanceLifetime" formControlName="maintenanceLifetime" textareaMaxWidth="500px"
[ngClass]="{ 'input-error': formErrors['instance.maintenanceLifetime'] }"
- ></textarea>
+ ></my-markdown-textarea>
<div *ngIf="formErrors.instance.maintenanceLifetime" class="form-error">{{ formErrors.instance.maintenanceLifetime }}</div>
</div>
<div class="form-group">
- <label i18n for="instanceBusinessModel">How will you finance the PeerTube server?</label>
+ <label i18n for="instanceBusinessModel">How will you finance the PeerTube server?</label><my-help helpType="markdownText"></my-help>
<div i18n class="label-small-info">With your own funds? With user donations? Advertising?</div>
- <textarea
- id="instanceBusinessModel" formControlName="businessModel" class="form-control small"
+ <my-markdown-textarea
+ id="instanceBusinessModel" formControlName="businessModel" textareaMaxWidth="500px"
[ngClass]="{ 'input-error': formErrors['instance.businessModel'] }"
- ></textarea>
+ ></my-markdown-textarea>
<div *ngIf="formErrors.instance.businessModel" class="form-error">{{ formErrors.instance.businessModel }}</div>
</div>
@@ -221,7 +221,7 @@
<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" textareaHeight="75px"
+ name="instanceHardwareInformation" formControlName="hardwareInformation" textareaMaxWidth="500px"
[classes]="{ 'input-error': formErrors['instance.hardwareInformation'] }"
></my-markdown-textarea>
diff --git a/client/src/app/shared/shared-instance/instance.service.ts b/client/src/app/shared/shared-instance/instance.service.ts
index fcfa59f28..0a30446df 100644
--- a/client/src/app/shared/shared-instance/instance.service.ts
+++ b/client/src/app/shared/shared-instance/instance.service.ts
@@ -45,6 +45,9 @@ export class InstanceService {
codeOfConduct: '',
moderationInformation: '',
administrator: '',
+ creationReason: '',
+ maintenanceLifetime: '',
+ businessModel: '',
hardwareInformation: ''
}
--
cgit v1.2.3