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
3031971e
Verified
Commit
3031971e
authored
Jun 20, 2022
by
Chocobozzz
Browse files
Less complicated markdown textarea CSS
parent
0f07c289
Changes
4
Hide whitespace changes
Inline
Side-by-side
client/src/app/+manage/video-channel-edit/video-channel-edit.component.html
View file @
3031971e
...
...
@@ -66,13 +66,11 @@
helpType=
"markdownEnhanced"
i18n-preHtml
preHtml=
"Short text to tell people how they can support the channel (membership platform...).<br /><br />
When a video is uploaded in this channel, the video support field will be automatically filled by this text."
></my-help>
<my-markdown-textarea
id=
"support"
formControlName=
"support"
textareaMaxWidth=
"500px"
markdownType=
"enhanced"
[classes]=
"{ 'input-e
rror
':
formErrors['support']
}
"
id=
"support"
formControlName=
"support"
textareaMaxWidth=
"500px"
markdownType=
"enhanced"
[formE
rror
]=
"
formErrors['support']"
></my-markdown-textarea>
<div
*ngIf=
"formErrors.support"
class=
"form-error"
>
{{ formErrors.support }}
</div>
</div>
<div
class=
"form-group"
*ngIf=
"isBulkUpdateVideosDisplayed()"
>
...
...
client/src/app/shared/shared-forms/markdown-textarea.component.html
View file @
3031971e
<div
class=
"root"
[ngClass]=
"{ 'maximized': isMaximized }"
[ngStyle]=
"{ 'max-width': textareaMaxWidth }"
>
<textarea
#textarea
[(ngModel)]=
"content"
(ngModelChange)=
"onModelChange()"
class=
"form-control"
[ngClass]=
"
classes
"
class=
"form-control"
[ngClass]=
"
{ 'input-error': formError }
"
[attr.disabled]=
"disabled || null"
[ngStyle]=
"{ height: textareaHeight }"
[id]=
"name"
[name]=
"name"
>
...
...
@@ -25,14 +26,18 @@
</ng-template>
</ng-container>
<my-button
*ngIf=
"!isMaximized"
[title]=
"maximizeInText"
className=
"maximize-button"
icon=
"fullscreen"
(click)=
"onMaximizeClick()"
[disabled]=
"disabled"
></my-button>
<my-global-icon
*ngIf=
"!isMaximized"
role=
"button"
[ngbTooltip]=
"maximizeInText"
class=
"maximize-button"
iconName=
"fullscreen"
(click)=
"onMaximizeClick()"
[ngClass]=
"{ disabled: disabled }"
></my-global-icon>
<my-button
*ngIf=
"isMaximized"
[title]=
"maximizeOutText"
className=
"maximize-button"
icon=
"exit-fullscreen"
(click)=
"onMaximizeClick()"
[disabled]=
"disabled"
></my-button>
<my-global-icon
*ngIf=
"isMaximized"
role=
"button"
[ngbTooltip]=
"maximizeOutText"
class=
"maximize-button"
iconName=
"exit-fullscreen"
(click)=
"onMaximizeClick()"
[ngClass]=
"{ disabled: disabled }"
></my-global-icon>
</div>
<div
[ngbNavOutlet]=
"nav"
></div>
<div
*ngIf=
"!isMaximized && formError"
class=
"form-error"
>
{{ formError }}
</div>
</div>
client/src/app/shared/shared-forms/markdown-textarea.component.scss
View file @
3031971e
...
...
@@ -6,260 +6,169 @@ $nav-preview-tab-height: 30px;
$base-padding
:
15px
;
$input-border-radius
:
3px
;
@mixin
in-small-view
{
.root
{
display
:
flex
;
flex-direction
:
column
;
.root
{
display
:
flex
;
flex-direction
:
column
;
textarea
{
@include
peertube-textarea
(
100%
,
150px
);
textarea
{
@include
peertube-textarea
(
100%
,
150px
);
background-color
:
pvar
(
--
markdownTextareaBackgroundColor
);
background-color
:
pvar
(
--
markdownTextareaBackgroundColor
);
font-family
:
monospace
;
font-size
:
13px
;
border-bottom
:
0
;
border-bottom-left-radius
:
unset
;
border-bottom-right-radius
:
unset
;
}
font-family
:
monospace
;
font-size
:
13px
;
border-bottom
:
0
;
border-bottom-left-radius
:
0
;
border-bottom-right-radius
:
0
;
}
.nav-preview
{
@include
padding-left
(
10px
);
@include
padding-right
(
10px
);
.nav-preview
{
padding
:
10px
;
display
:
block
;
text-align
:
end
;
padding-top
:
10px
;
padding-bottom
:
10px
;
border-top
:
1px
dashed
$input-border-color
;
border-left
:
1px
solid
$input-border-color
;
border-right
:
1px
solid
$input-border-color
;
border-bottom
:
1px
solid
$input-border-color
;
border-bottom-right-radius
:
$input-border-radius
;
border-bottom-left-radius
:
$input-border-radius
;
::ng-deep
{
.nav-link
{
display
:
none
!
important
;
}
border
:
1px
solid
$input-border-color
;
border-top
:
1px
dashed
$input-border-color
;
.maximize-button
{
padding
:
0
7px
;
cursor
:
pointer
;
svg
{
stroke
:
var
(
--
mainForegroundColor
);
opacity
:
0
.7
;
}
&
:hover
,
&
:active
{
svg
{
opacity
:
1
;
}
}
}
}
}
border-bottom-right-radius
:
$input-border-radius
;
border-bottom-left-radius
:
$input-border-radius
;
::ng-deep
{
.tab-content
{
display
:
none
;
}
}
}
}
display
:
flex
;
flex-grow
:
1
;
border-bottom-left-radius
:
unset
;
border-bottom-right-radius
:
unset
;
border-bottom
:
2px
solid
pvar
(
--
mainColor
);
@mixin
nav-preview-medium
{
display
:
flex
;
flex-grow
:
1
;
border-bottom-left-radius
:
unset
;
border-bottom-right-radius
:
unset
;
border-bottom
:
2px
solid
pvar
(
--
mainColor
);
.maximize-button
{
@include
margin-left
(
15px
);
:first-child
{
@include
margin-left
(
auto
);
}
opacity
:
0
.6
;
cursor
:
default
;
::ng-deep
{
.nav-link
{
display
:
flex
!
important
;
align-items
:
center
;
height
:
$nav-preview-tab-height
!
important
;
padding
:
0
15px
!
important
;
font-size
:
85%
!
important
;
opacity
:
.7
;
}
&
:not
(
.disabled
)
{
cursor
:
pointer
;
.maximize-button
{
@include
margin-left
(
5px
);
&
:hover
,
&
:active
{
opacity
:
1
;
}
}
}
}
}
@mixin
content-preview-base
{
display
:
block
;
min-height
:
75px
;
padding
:
$base-padding
;
overflow-y
:
auto
;
word-wrap
:
break-word
;
}
.nav-pills
{
display
:
flex
;
align-items
:
center
;
justify-content
:
flex-end
;
@mixin
maximized-base
{
$nav-preview-vertical-padding
:
40px
;
>
*
{
font-size
:
0
.9em
!
important
;
}
}
flex-direction
:
row
;
z-index
:
#{
z
(
header
)
-
1
}
;
position
:
fixed
;
top
:
$header-height
;
left
:
$menu-width
;
max-height
:
none
!
important
;
max-width
:
none
!
important
;
width
:
calc
(
100%
-
#{
$menu-width
}
);
height
:
calc
(
100vh
-
#{
$header-height
}
)
!
important
;
.tab-content
{
min-height
:
75px
;
max-height
:
210px
;
padding
:
$base-padding
;
.nav-preview
{
@include
nav-preview-medium
();
@include
padding-right
(
0
);
@include
padding-left
(
0
);
overflow-y
:
auto
;
word-wrap
:
break-word
;
padding-top
:
math
.
div
(
$nav-preview-vertical-padding
,
2
);
padding-bottom
:
math
.
div
(
$nav-preview-vertical-padding
,
2
);
position
:
absolute
;
background-color
:
pvar
(
--
mainBackgroundColor
);
width
:
100%
!
important
;
border
:
1px
solid
$input-border-color
;
border-top
:
0
;
border-left
:
0
;
border-right
:
0
;
:last-child
{
@include
margin-right
(
pvar
(
--
horizontalMarginContent
));
}
border-bottom-left-radius
:
$input-border-radius
;
border-bottom-right-radius
:
$input-border-radius
;
}
::ng-deep
.tab-content
{
@include
content-preview-base
()
;
background-color
:
pvar
(
--
mainBackgroundColor
)
;
scrollbar-color
:
pvar
(
--
actionButtonColor
)
pvar
(
--
mainBackgroundColor
)
;
}
&
.maximized
{
z-index
:
#{
z
(
header
)
-
1
}
;
position
:
fixed
;
top
:
$header-height
;
left
:
$menu-width
;
textarea
,
:
:
ng-deep
.
tab-content
{
max-height
:
none
!
important
;
max-width
:
none
!
important
;
margin-top
:
#{
$nav-preview-tab-height
+
$nav-preview-vertical-padding
}
!
important
;
height
:
calc
(
100vh
-
#{
$header-height
+
$nav-preview-tab-height
+
$nav-preview-vertical-padding
}
)
!
important
;
width
:
50%
!
important
;
border
:
0
!
important
;
border-radius
:
unset
!
important
;
}
:host-context
(
.expanded
)
{
.root.maximized
{
left
:
0
;
width
:
100%
;
}
}
}
width
:
calc
(
100%
-
#{
$menu-width
}
);
height
:
calc
(
100vh
-
#{
$header-height
}
);
@mixin
maximized-in-small-view
{
.root.maximized
{
@include
maximized-base
()
;
display
:
grid
;
grid-template-rows
:
auto
1fr
;
grid-template-columns
:
1fr
1fr
;
textarea
{
display
:
none
;
}
::ng-deep
.tab-content
{
width
:
100%
!
important
;
}
}
}
background-color
:
pvar
(
--
mainBackgroundColor
);
@mixin
maximized-tabs-in-mobile-view
{
// Ellipsis on tabs for mobile view
.root.maximized
{
.nav-preview
{
::ng-deep
.nav-link
{
@include
ellipsis
();
@include
margin-right
(
10px
!
important
);
grid-row
:
1
;
grid-column
:
1
/
3
;
display
:
block
!
important
;
max-width
:
45%
!
important
;
padding
:
5px
0
!
important
;
text-align
:
center
;
border
:
0
;
border-bottom
:
2px
solid
pvar
(
--
mainColor
);
&
:not
(
.active
)
{
max-width
:
15%
!
important
;
}
padding
:
20px
0
;
width
:
100%
!
important
;
&
.active
{
padding
:
5px
15px
!
important
;
}
.maximize-button
{
@include
margin-right
(
15px
);
}
}
}
}
@mixin
in-medium-view
{
.root
{
.nav-preview
{
@include
nav-preview-medium
();
textarea
{
grid-column
:
1
;
border
:
0
;
border-right
:
1px
dashed
$input-border-color
;
resize
:
none
;
}
::ng-deep
.tab-content
{
@include
content-preview-base
();
max-height
:
210px
;
border-bottom
:
1px
solid
$input-border-color
;
border-left
:
1px
solid
$input-border-color
;
border-right
:
1px
solid
$input-border-color
;
border-bottom-left-radius
:
$input-border-radius
;
border-bottom-right-radius
:
$input-border-radius
;
}
}
}
grid-column
:
2
;
@mixin
maximized-in-medium-view
{
.root.maximized
{
@include
maximized-base
();
border
:
0
;
textarea
{
display
:
block
;
padding
:
$base-padding
;
border-right
:
1px
dashed
$input-border-color
!
important
;
resize
:
none
;
scrollbar-color
:
pvar
(
--
actionButtonColor
)
pvar
(
--
markdownTextareaBackgroundColor
);
overflow-y
:
auto
;
word-wrap
:
break-word
;
&
:focus
{
box-shadow
:
none
;
}
scrollbar-color
:
pvar
(
--
actionButtonColor
)
pvar
(
--
mainBackgroundColor
);
}
}
}
@include
in-small-view
();
@include
maximized-in-small-view
();
textarea
,
:
:
ng-deep
.
tab-content
{
grid-row
:
2
;
@media
only
screen
and
(
max-width
:
$mobile-view
)
{
@include
maximized-tabs-in-mobile-view
()
;
}
height
:
100%
!
important
;
max-height
:
none
!
important
;
border-radius
:
0
;
@media
only
screen
and
(
max-width
:
#{
$mobile-view
+
$menu-width
}
)
{
:host-context
(
.main-col
:not
(
.expanded
))
{
@include
maximized-tabs-in-mobile-view
();
}
}
padding
:
15px
;
}
@media
screen
and
(
max-width
:
$mobile-view
)
{
grid-template-rows
:
auto
45%
1fr
;
grid-template-columns
:
1fr
;
.nav-preview
{
grid-column
:
1
;
}
@media
only
screen
and
(
min-width
:
$small-view
)
{
@include
maximized-in-medium-view
();
textarea
{
grid-row
:
2
;
grid-column
:
1
;
border
:
0
;
border-bottom
:
1px
dashed
$input-border-color
;;
}
:host-context
(
.expanded
)
{
@include
in-medium-view
();
::ng-deep
.tab-content
{
grid-column
:
1
;
grid-row
:
3
;
}
}
}
}
@media
only
screen
and
(
min-width
:
#{
$small-view
+
$menu-width
}
)
{
:host-context
(
.main-col
:not
(
.expanded
))
{
@include
in-medium-view
();
:host-context
(
.main-col.expanded
)
{
.root.maximized
{
left
:
0
;
width
:
100%
;
}
}
client/src/app/shared/shared-forms/markdown-textarea.component.ts
View file @
3031971e
...
...
@@ -24,6 +24,7 @@ import { Video } from '@shared/models'
export
class
MarkdownTextareaComponent
implements
ControlValueAccessor
,
OnInit
{
@
Input
()
content
=
''
@
Input
()
formError
:
string
@
Input
()
classes
:
string
[]
|
{
[
klass
:
string
]:
any
[]
|
any
}
=
[]
@
Input
()
textareaMaxWidth
=
'
100%
'
...
...
@@ -93,6 +94,8 @@ export class MarkdownTextareaComponent implements ControlValueAccessor, OnInit {
}
onMaximizeClick
()
{
if
(
this
.
disabled
)
return
this
.
isMaximized
=
!
this
.
isMaximized
// Make sure textarea have the focus
...
...
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