Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
Framasoft
PeerTube
PeerTube
Commits
9bc36223
Verified
Commit
9bc36223
authored
Jun 20, 2022
by
Chocobozzz
Browse files
Handle input error in markdown textarea
parent
3031971e
Changes
13
Hide whitespace changes
Inline
Side-by-side
client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html
View file @
9bc36223
...
...
@@ -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-e
rror
':
formErrors['broadcastMessage.message']
}
"
name=
"broadcastMessageMessage"
formControlName=
"message"
[
formE
rror
]=
"
formErrors['broadcastMessage.message']"
></my-markdown-textarea>
<div
*ngIf=
"formErrors.broadcastMessage.message"
class=
"form-error"
>
{{ formErrors.broadcastMessage.message }}
</div>
...
...
client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
View file @
9bc36223
...
...
@@ -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
);
...
...
client/src/app/+admin/config/edit-custom-config/edit-homepage.component.html
View file @
9bc36223
...
...
@@ -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-e
rror
':
formErrors['instanceCustomHomepage.content']
}
"
[
formE
rror
]=
"
formErrors['instanceCustomHomepage.content']"
></my-markdown-textarea>
<div
*ngIf=
"formErrors.instanceCustomHomepage.content"
class=
"form-error"
>
{{ formErrors.instanceCustomHomepage.content }}
</div>
...
...
client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.html
View file @
9bc36223
...
...
@@ -37,12 +37,10 @@
</div>
<my-markdown-textarea
name=
"instanceDescription"
formControlName=
"description"
textareaMaxWidth=
"500px"
name=
"instanceDescription"
formControlName=
"description"
[customMarkdownRenderer]=
"getCustomMarkdownRenderer()"
[
classes]=
"{ 'input-e
rror
':
formErrors['instance.description']
}
"
[
formE
rror
]=
"
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-e
rror
':
formErrors['instance.terms']
}
"
name=
"instanceTerms"
formControlName=
"terms"
[
formE
rror
]=
"
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-e
rror
':
formErrors['instance.codeOfConduct']
}
"
name=
"instanceCodeOfConduct"
formControlName=
"codeOfConduct"
[
formE
rror
]=
"
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-e
rror
':
formErrors['instance.moderationInformation']
}
"
name=
"instanceModerationInformation"
formControlName=
"moderationInformation"
[
formE
rror
]=
"
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-e
rror
':
formErrors['instance.administrator']
}
"
name=
"instanceAdministrator"
formControlName=
"administrator"
[
formE
rror
]=
"
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-e
rror
':
formErrors['instance.creationReason']
}
"
name=
"instanceCreationReason"
formControlName=
"creationReason"
[
formE
rror
]=
"
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-e
rror
':
formErrors['instance.maintenanceLifetime']
}
"
name=
"instanceMaintenanceLifetime"
formControlName=
"maintenanceLifetime"
[
formE
rror
]=
"
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-e
rror
':
formErrors['instance.businessModel']
}
"
name=
"instanceBusinessModel"
formControlName=
"businessModel"
[
formE
rror
]=
"
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-e
rror
':
formErrors['instance.hardwareInformation']
}
"
name=
"instanceHardwareInformation"
formControlName=
"hardwareInformation"
[
formE
rror
]=
"
formErrors['instance.hardwareInformation']"
></my-markdown-textarea>
<div
*ngIf=
"formErrors.instance.hardwareInformation"
class=
"form-error"
>
{{ formErrors.instance.hardwareInformation }}
</div>
</div>
</div>
...
...
client/src/app/+manage/video-channel-edit/video-channel-edit.component.html
View file @
9bc36223
...
...
@@ -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>
...
...
client/src/app/+manage/video-channel-edit/video-channel-edit.component.scss
View file @
9bc36223
...
...
@@ -42,6 +42,11 @@ textarea {
display
:
block
;
}
my-markdown-textarea
{
display
:
block
;
max-width
:
500px
;
}
.peertube-select-container
{
@include
peertube-select-container
(
340px
);
}
...
...
client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.html
View file @
9bc36223
...
...
@@ -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>
...
...
client/src/app/+videos/+video-edit/shared/video-edit.component.html
View file @
9bc36223
...
...
@@ -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-e
rror
':
formErrors['support']
}
"
[
formE
rror
]=
"
formErrors['support']"
></my-markdown-textarea>
<div
*ngIf=
"formErrors.support"
class=
"form-error"
>
{{ formErrors.support }}
</div>
</div>
</div>
...
...
client/src/app/shared/shared-forms/dynamic-form-field.component.html
View file @
9bc36223
...
...
@@ -28,19 +28,19 @@
<my-markdown-textarea
*ngIf=
"setting.type === 'markdown-text'"
markdownType=
"text"
[id]=
"setting.name"
[formControlName]=
"setting.name"
textareaWidth=
"500px"
[
classes]=
"{ 'input-e
rror
':
formErrors['settings.name']
}
"
markdownType=
"text"
[id]=
"setting.name"
[formControlName]=
"setting.name"
[
formE
rror
]=
"
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-e
rror
':
formErrors['settings.name']
}
"
markdownType=
"enhanced"
[id]=
"setting.name"
[formControlName]=
"setting.name"
[
formE
rror
]=
"
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>
...
...
client/src/app/shared/shared-forms/dynamic-form-field.component.scss
View file @
9bc36223
...
...
@@ -26,3 +26,8 @@ textarea {
my-peertube-checkbox
+
.label-small-info
{
margin-top
:
5px
;
}
my-markdown-textarea
{
display
:
block
;
max-width
:
500px
;
}
client/src/app/shared/shared-forms/markdown-textarea.component.html
View file @
9bc36223
<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>
...
...
client/src/app/shared/shared-forms/markdown-textarea.component.ts
View file @
9bc36223
...
...
@@ -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
...
...
client/src/sass/class-helpers.scss
View file @
9bc36223
...
...
@@ -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
{
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment