aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src
diff options
context:
space:
mode:
authorkimsible <kimsible@users.noreply.github.com>2020-08-07 19:00:51 +0200
committerChocobozzz <chocobozzz@cpy.re>2020-08-14 15:03:38 +0200
commit3c176894bae9de7958605fe432bff770b9232807 (patch)
treebb3d526c08ec84138a01bda75f5e24485b566c54 /client/src
parentcb54210c192bdbedab5d3333cc2602df8e23a38a (diff)
downloadPeerTube-3c176894bae9de7958605fe432bff770b9232807.tar.gz
PeerTube-3c176894bae9de7958605fe432bff770b9232807.tar.zst
PeerTube-3c176894bae9de7958605fe432bff770b9232807.zip
Add markown compatible help icon in comment textarea
Diffstat (limited to 'client/src')
-rw-r--r--client/src/app/+videos/+video-watch/comment/video-comment-add.component.html14
-rw-r--r--client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss40
-rw-r--r--client/src/app/shared/shared-icons/global-icon.component.ts1
-rw-r--r--client/src/app/shared/shared-main/misc/help.component.html6
-rw-r--r--client/src/app/shared/shared-main/misc/help.component.scss5
-rw-r--r--client/src/app/shared/shared-main/misc/help.component.ts3
-rw-r--r--client/src/assets/images/misc/markdown.svg1
7 files changed, 65 insertions, 5 deletions
diff --git a/client/src/app/+videos/+video-watch/comment/video-comment-add.component.html b/client/src/app/+videos/+video-watch/comment/video-comment-add.component.html
index c9b0a9c63..ec8da02e2 100644
--- a/client/src/app/+videos/+video-watch/comment/video-comment-add.component.html
+++ b/client/src/app/+videos/+video-watch/comment/video-comment-add.component.html
@@ -3,6 +3,20 @@
3 <img [src]="getAvatarUrl()" alt="Avatar" /> 3 <img [src]="getAvatarUrl()" alt="Avatar" />
4 4
5 <div class="form-group"> 5 <div class="form-group">
6 <my-help class="markdown-guide" helpType="custom" iconName="markdown" i18n-title title="Markdown compatible">
7 <ng-template ptTemplate="customHtml">
8 <div i18n>
9 Markdown compatible that supports:
10
11 <ul>
12 <li>Emphasis: <strong>**bold**</strong>, <i>_italic_</i></li>
13 <li>Links</li>
14 <li>Break lines</li>
15 <li>Lists</li>
16 </ul>
17 </div>
18 </ng-template>
19 </my-help>
6 <textarea i18n-placeholder placeholder="Add comment..." myAutoResize 20 <textarea i18n-placeholder placeholder="Add comment..." myAutoResize
7 [readonly]="(user === null) ? true : false" 21 [readonly]="(user === null) ? true : false"
8 (click)="openVisitorModal($event)" 22 (click)="openVisitorModal($event)"
diff --git a/client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss b/client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss
index d8f851baf..814417f04 100644
--- a/client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss
+++ b/client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss
@@ -19,11 +19,49 @@ form {
19 .form-group { 19 .form-group {
20 flex-grow: 1; 20 flex-grow: 1;
21 margin: 0; 21 margin: 0;
22 position: relative;
23
24 $peertube-textarea-height: 60px;
25 $markdown-icon-height: 18px;
26 $markdown-icon-width: 30px;
27
28 .markdown-guide {
29 position: absolute;
30 top: 5px;
31 left: 4px;
32
33 @media screen and (max-width: 600px) {
34 left: 0;
35 }
36
37 ::ng-deep .help-tooltip-button {
38 my-global-icon {
39 height: $markdown-icon-height;
40 width: $markdown-icon-width;
41
42 svg {
43 opacity: 0.5;
44 }
45 }
46
47 &:focus, &:active, &:hover {
48 my-global-icon svg {
49 opacity: 1;
50 }
51 }
52 }
53 }
22 54
23 textarea { 55 textarea {
24 @include peertube-textarea(100%, 60px); 56 @include peertube-textarea(100%, $peertube-textarea-height);
25 @include button-focus(pvar(--mainColorLightest)); 57 @include button-focus(pvar(--mainColorLightest));
26 58
59 text-indent: $markdown-icon-width;
60
61 @media screen and (max-width: 600px) {
62 text-indent: $markdown-icon-width + 5px;
63 }
64
27 &:focus::placeholder { 65 &:focus::placeholder {
28 opacity: 0; 66 opacity: 0;
29 } 67 }
diff --git a/client/src/app/shared/shared-icons/global-icon.component.ts b/client/src/app/shared/shared-icons/global-icon.component.ts
index ffd217cc7..99efcd599 100644
--- a/client/src/app/shared/shared-icons/global-icon.component.ts
+++ b/client/src/app/shared/shared-icons/global-icon.component.ts
@@ -4,6 +4,7 @@ import { HooksService } from '@app/core/plugins/hooks.service'
4const icons = { 4const icons = {
5 // misc icons 5 // misc icons
6 'npm': require('!!raw-loader?!../../../assets/images/misc/npm.svg').default, 6 'npm': require('!!raw-loader?!../../../assets/images/misc/npm.svg').default,
7 'markdown': require('!!raw-loader?!../../../assets/images/misc/markdown.svg').default,
7 'language': require('!!raw-loader?!../../../assets/images/misc/language.svg').default, 8 'language': require('!!raw-loader?!../../../assets/images/misc/language.svg').default,
8 'video-lang': require('!!raw-loader?!../../../assets/images/misc/video-lang.svg').default, 9 'video-lang': require('!!raw-loader?!../../../assets/images/misc/video-lang.svg').default,
9 'support': require('!!raw-loader?!../../../assets/images/misc/support.svg').default, 10 'support': require('!!raw-loader?!../../../assets/images/misc/support.svg').default,
diff --git a/client/src/app/shared/shared-main/misc/help.component.html b/client/src/app/shared/shared-main/misc/help.component.html
index 9a6d3e48e..b2d58a828 100644
--- a/client/src/app/shared/shared-main/misc/help.component.html
+++ b/client/src/app/shared/shared-main/misc/help.component.html
@@ -26,8 +26,8 @@
26 role="button" 26 role="button"
27 class="help-tooltip-button" 27 class="help-tooltip-button"
28 container="body" 28 container="body"
29 title="Get help" 29 [title]="title"
30 i18n-title 30 tabindex=0
31 popoverClass="help-popover" 31 popoverClass="help-popover"
32 [attr.aria-pressed]="isPopoverOpened" 32 [attr.aria-pressed]="isPopoverOpened"
33 [ngbPopover]="tooltipTemplate" 33 [ngbPopover]="tooltipTemplate"
@@ -36,5 +36,5 @@
36 (onHidden)="onPopoverHidden()" 36 (onHidden)="onPopoverHidden()"
37 (onShown)="onPopoverShown()" 37 (onShown)="onPopoverShown()"
38> 38>
39 <my-global-icon iconName="help"></my-global-icon> 39 <my-global-icon [iconName]="iconName"></my-global-icon>
40</span> 40</span>
diff --git a/client/src/app/shared/shared-main/misc/help.component.scss b/client/src/app/shared/shared-main/misc/help.component.scss
index 1e7fb4fc6..ccc91ffab 100644
--- a/client/src/app/shared/shared-main/misc/help.component.scss
+++ b/client/src/app/shared/shared-main/misc/help.component.scss
@@ -5,14 +5,17 @@
5 cursor: pointer; 5 cursor: pointer;
6 border: none; 6 border: none;
7 7
8 margin: 5px;
9
8 my-global-icon { 10 my-global-icon {
9 width: 17px; 11 width: 17px;
10 position: relative; 12 position: relative;
11 top: -1px; 13 top: -1px;
12 margin: 5px;
13 14
14 @include apply-svg-color(pvar(--greyForegroundColor)) 15 @include apply-svg-color(pvar(--greyForegroundColor))
15 } 16 }
17
18 @include disable-outline;
16} 19}
17 20
18::ng-deep { 21::ng-deep {
diff --git a/client/src/app/shared/shared-main/misc/help.component.ts b/client/src/app/shared/shared-main/misc/help.component.ts
index ebc965a88..bcbb464f3 100644
--- a/client/src/app/shared/shared-main/misc/help.component.ts
+++ b/client/src/app/shared/shared-main/misc/help.component.ts
@@ -1,5 +1,6 @@
1import { AfterContentInit, Component, ContentChildren, Input, OnChanges, OnInit, QueryList, TemplateRef } from '@angular/core' 1import { AfterContentInit, Component, ContentChildren, Input, OnChanges, OnInit, QueryList, TemplateRef } from '@angular/core'
2import { MarkdownService } from '@app/core' 2import { MarkdownService } from '@app/core'
3import { GlobalIconName } from '@app/shared/shared-icons'
3import { PeerTubeTemplateDirective } from '../angular' 4import { PeerTubeTemplateDirective } from '../angular'
4 5
5@Component({ 6@Component({
@@ -11,6 +12,8 @@ import { PeerTubeTemplateDirective } from '../angular'
11export class HelpComponent implements OnInit, OnChanges, AfterContentInit { 12export class HelpComponent implements OnInit, OnChanges, AfterContentInit {
12 @Input() helpType: 'custom' | 'markdownText' | 'markdownEnhanced' = 'custom' 13 @Input() helpType: 'custom' | 'markdownText' | 'markdownEnhanced' = 'custom'
13 @Input() tooltipPlacement = 'right auto' 14 @Input() tooltipPlacement = 'right auto'
15 @Input() iconName: GlobalIconName = 'help'
16 @Input() title = $localize`Get help`
14 17
15 @ContentChildren(PeerTubeTemplateDirective) templates: QueryList<PeerTubeTemplateDirective<'preHtml' | 'customHtml' | 'postHtml'>> 18 @ContentChildren(PeerTubeTemplateDirective) templates: QueryList<PeerTubeTemplateDirective<'preHtml' | 'customHtml' | 'postHtml'>>
16 19
diff --git a/client/src/assets/images/misc/markdown.svg b/client/src/assets/images/misc/markdown.svg
new file mode 100644
index 000000000..ee0f15303
--- /dev/null
+++ b/client/src/assets/images/misc/markdown.svg
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="24" viewBox="0 0 208 128"><rect width="198" height="118" x="5" y="5" ry="10" stroke="#000" stroke-width="10" fill="none"/><path d="M30 98V30h20l20 25 20-25h20v68H90V59L70 84 50 59v39zm125 0l-30-33h20V30h20v35h20z"/></svg>