diff options
author | Chocobozzz <me@florianbigard.com> | 2021-06-07 17:38:31 +0200 |
---|---|---|
committer | Chocobozzz <me@florianbigard.com> | 2021-06-07 18:14:05 +0200 |
commit | 27bc95867442c772841fb183a625bbda61dede51 (patch) | |
tree | 6fe20951f1109c1f5388d9a681f0df0758d463e0 /client/src/app/+videos/+video-watch/comment | |
parent | 8beea2d37d90e9a12d895f4a9eebc1e532313d8c (diff) | |
download | PeerTube-27bc95867442c772841fb183a625bbda61dede51.tar.gz PeerTube-27bc95867442c772841fb183a625bbda61dede51.tar.zst PeerTube-27bc95867442c772841fb183a625bbda61dede51.zip |
Bidi support
Diffstat (limited to 'client/src/app/+videos/+video-watch/comment')
5 files changed, 55 insertions, 21 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 42adfed8d..3ee818c8b 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 | |||
@@ -10,7 +10,10 @@ | |||
10 | (keyup.control.enter)="onValidKey()" (keyup.meta.enter)="onValidKey()" #textarea> | 10 | (keyup.control.enter)="onValidKey()" (keyup.meta.enter)="onValidKey()" #textarea> |
11 | </textarea> | 11 | </textarea> |
12 | 12 | ||
13 | <my-help class="markdown-guide" helpType="custom" iconName="markdown" tooltipPlacement="left auto" autoClose="true" i18n-title title="Markdown compatible"> | 13 | <my-help |
14 | [ngClass]="{ 'is-rtl': isRTL() }" class="markdown-guide" helpType="custom" iconName="markdown" | ||
15 | tooltipPlacement="left auto" autoClose="true" i18n-title title="Markdown compatible" | ||
16 | > | ||
14 | <ng-template ptTemplate="customHtml"> | 17 | <ng-template ptTemplate="customHtml"> |
15 | <span i18n>Markdown compatible that supports:</span> | 18 | <span i18n>Markdown compatible that supports:</span> |
16 | 19 | ||
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 7743bd41d..5c97fb13c 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 | |||
@@ -14,7 +14,7 @@ form { | |||
14 | margin-bottom: 10px; | 14 | margin-bottom: 10px; |
15 | 15 | ||
16 | my-actor-avatar { | 16 | my-actor-avatar { |
17 | margin-right: 10px; | 17 | @include margin-right(10px); |
18 | } | 18 | } |
19 | 19 | ||
20 | .form-group { | 20 | .form-group { |
@@ -26,12 +26,12 @@ form { | |||
26 | textarea { | 26 | textarea { |
27 | @include peertube-textarea(100%, $peertube-textarea-height); | 27 | @include peertube-textarea(100%, $peertube-textarea-height); |
28 | @include button-focus(pvar(--mainColorLightest)); | 28 | @include button-focus(pvar(--mainColorLightest)); |
29 | @include padding-right($markdown-icon-width + 15px !important); | ||
29 | 30 | ||
30 | min-height: calc(#{$peertube-textarea-height} - 15px * 2); | 31 | min-height: calc(#{$peertube-textarea-height} - 15px * 2); |
31 | padding-right: $markdown-icon-width + 15px !important; | ||
32 | 32 | ||
33 | @media screen and (max-width: 600px) { | 33 | @media screen and (max-width: 600px) { |
34 | padding-right: $markdown-icon-width + 19px !important; | 34 | @include padding-right($markdown-icon-width + 19px !important); |
35 | } | 35 | } |
36 | 36 | ||
37 | &:focus::placeholder { | 37 | &:focus::placeholder { |
@@ -45,6 +45,12 @@ form { | |||
45 | top: 5px; | 45 | top: 5px; |
46 | right: 9px; | 46 | right: 9px; |
47 | 47 | ||
48 | // inset-inline is not well supported by web browsers | ||
49 | &.is-rtl { | ||
50 | right: unset; | ||
51 | left: 9px; | ||
52 | } | ||
53 | |||
48 | ::ng-deep .help-tooltip-button { | 54 | ::ng-deep .help-tooltip-button { |
49 | my-global-icon { | 55 | my-global-icon { |
50 | height: $markdown-icon-height; | 56 | height: $markdown-icon-height; |
@@ -86,9 +92,10 @@ form { | |||
86 | flex: 1; | 92 | flex: 1; |
87 | 93 | ||
88 | code { | 94 | code { |
95 | @include margin-left(5px); | ||
96 | |||
89 | display: inline-block; | 97 | display: inline-block; |
90 | vertical-align: middle; | 98 | vertical-align: middle; |
91 | margin-left: 5px; | ||
92 | } | 99 | } |
93 | } | 100 | } |
94 | } | 101 | } |
diff --git a/client/src/app/+videos/+video-watch/comment/video-comment-add.component.ts b/client/src/app/+videos/+video-watch/comment/video-comment-add.component.ts index 0e1362ad3..c926d8d70 100644 --- a/client/src/app/+videos/+video-watch/comment/video-comment-add.component.ts +++ b/client/src/app/+videos/+video-watch/comment/video-comment-add.component.ts | |||
@@ -1,5 +1,18 @@ | |||
1 | import { Observable } from 'rxjs' | 1 | import { Observable } from 'rxjs' |
2 | import { Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core' | 2 | import { getLocaleDirection } from '@angular/common' |
3 | import { | ||
4 | Component, | ||
5 | ElementRef, | ||
6 | EventEmitter, | ||
7 | Inject, | ||
8 | Input, | ||
9 | LOCALE_ID, | ||
10 | OnChanges, | ||
11 | OnInit, | ||
12 | Output, | ||
13 | SimpleChanges, | ||
14 | ViewChild | ||
15 | } from '@angular/core' | ||
3 | import { Router } from '@angular/router' | 16 | import { Router } from '@angular/router' |
4 | import { Notifier, User } from '@app/core' | 17 | import { Notifier, User } from '@app/core' |
5 | import { VIDEO_COMMENT_TEXT_VALIDATOR } from '@app/shared/form-validators/video-comment-validators' | 18 | import { VIDEO_COMMENT_TEXT_VALIDATOR } from '@app/shared/form-validators/video-comment-validators' |
@@ -37,7 +50,8 @@ export class VideoCommentAddComponent extends FormReactive implements OnChanges, | |||
37 | private notifier: Notifier, | 50 | private notifier: Notifier, |
38 | private videoCommentService: VideoCommentService, | 51 | private videoCommentService: VideoCommentService, |
39 | private modalService: NgbModal, | 52 | private modalService: NgbModal, |
40 | private router: Router | 53 | private router: Router, |
54 | @Inject(LOCALE_ID) private localeId: string | ||
41 | ) { | 55 | ) { |
42 | super() | 56 | super() |
43 | } | 57 | } |
@@ -153,6 +167,10 @@ export class VideoCommentAddComponent extends FormReactive implements OnChanges, | |||
153 | this.form.value['text'] = this.textareaElement.nativeElement.value = '' | 167 | this.form.value['text'] = this.textareaElement.nativeElement.value = '' |
154 | } | 168 | } |
155 | 169 | ||
170 | isRTL () { | ||
171 | return getLocaleDirection(this.localeId) === 'rtl' | ||
172 | } | ||
173 | |||
156 | private addCommentReply (commentCreate: VideoCommentCreate) { | 174 | private addCommentReply (commentCreate: VideoCommentCreate) { |
157 | return this.videoCommentService | 175 | return this.videoCommentService |
158 | .addCommentReply(this.video.id, this.parentComment.id, commentCreate) | 176 | .addCommentReply(this.video.id, this.parentComment.id, commentCreate) |
diff --git a/client/src/app/+videos/+video-watch/comment/video-comment.component.scss b/client/src/app/+videos/+video-watch/comment/video-comment.component.scss index a4d2e237c..7868991ba 100644 --- a/client/src/app/+videos/+video-watch/comment/video-comment.component.scss +++ b/client/src/app/+videos/+video-watch/comment/video-comment.component.scss | |||
@@ -6,10 +6,11 @@ | |||
6 | display: flex; | 6 | display: flex; |
7 | 7 | ||
8 | .left { | 8 | .left { |
9 | @include margin-right(10px); | ||
10 | |||
9 | display: flex; | 11 | display: flex; |
10 | flex-direction: column; | 12 | flex-direction: column; |
11 | align-items: center; | 13 | align-items: center; |
12 | margin-right: 10px; | ||
13 | 14 | ||
14 | .vertical-border { | 15 | .vertical-border { |
15 | width: 2px; | 16 | width: 2px; |
@@ -51,6 +52,9 @@ my-actor-avatar { | |||
51 | } | 52 | } |
52 | 53 | ||
53 | .video-author { | 54 | .video-author { |
55 | @include padding-right(6px); | ||
56 | @include padding-left(6px); | ||
57 | |||
54 | height: 20px; | 58 | height: 20px; |
55 | background-color: #888888; | 59 | background-color: #888888; |
56 | border-radius: 12px; | 60 | border-radius: 12px; |
@@ -60,8 +64,6 @@ my-actor-avatar { | |||
60 | flex-direction: row; | 64 | flex-direction: row; |
61 | align-items: center; | 65 | align-items: center; |
62 | display: inline-flex; | 66 | display: inline-flex; |
63 | padding-right: 6px; | ||
64 | padding-left: 6px; | ||
65 | color: #fff !important; | 67 | color: #fff !important; |
66 | } | 68 | } |
67 | 69 | ||
@@ -86,9 +88,10 @@ my-actor-avatar { | |||
86 | } | 88 | } |
87 | 89 | ||
88 | .comment-date { | 90 | .comment-date { |
91 | @include margin-left(5px); | ||
92 | |||
89 | font-size: 90%; | 93 | font-size: 90%; |
90 | color: pvar(--greyForegroundColor); | 94 | color: pvar(--greyForegroundColor); |
91 | margin-left: 5px; | ||
92 | text-decoration: none; | 95 | text-decoration: none; |
93 | 96 | ||
94 | &:hover { | 97 | &:hover { |
@@ -129,9 +132,10 @@ my-actor-avatar { | |||
129 | 132 | ||
130 | ::ng-deep .dropdown-toggle, | 133 | ::ng-deep .dropdown-toggle, |
131 | .comment-action-reply { | 134 | .comment-action-reply { |
135 | @include margin-right(10px); | ||
136 | |||
132 | color: pvar(--greyForegroundColor); | 137 | color: pvar(--greyForegroundColor); |
133 | cursor: pointer; | 138 | cursor: pointer; |
134 | margin-right: 10px; | ||
135 | 139 | ||
136 | &:hover, | 140 | &:hover, |
137 | &:active, | 141 | &:active, |
@@ -162,25 +166,25 @@ my-video-comment-add { | |||
162 | } | 166 | } |
163 | 167 | ||
164 | .left { | 168 | .left { |
165 | margin-right: 6px; | 169 | @include margin-right(6px); |
166 | } | 170 | } |
167 | } | 171 | } |
168 | 172 | ||
169 | @media screen and (max-width: 1200px) { | 173 | @media screen and (max-width: 1200px) { |
170 | .children { | 174 | .children { |
171 | margin-left: -10px; | 175 | @include margin-left(-10px); |
172 | } | 176 | } |
173 | } | 177 | } |
174 | 178 | ||
175 | @media screen and (max-width: 600px) { | 179 | @media screen and (max-width: 600px) { |
176 | .children { | 180 | .children { |
177 | margin-left: -20px; | 181 | @include margin-left(-20px); |
178 | 182 | ||
179 | .left { | 183 | .left { |
180 | align-items: flex-start; | 184 | align-items: flex-start; |
181 | 185 | ||
182 | .vertical-border { | 186 | .vertical-border { |
183 | margin-left: 2px; | 187 | @include margin-left(2px); |
184 | } | 188 | } |
185 | } | 189 | } |
186 | } | 190 | } |
@@ -189,7 +193,7 @@ my-video-comment-add { | |||
189 | flex-direction: column; | 193 | flex-direction: column; |
190 | 194 | ||
191 | .comment-date { | 195 | .comment-date { |
192 | margin-left: 0; | 196 | @include margin-left(0); |
193 | } | 197 | } |
194 | } | 198 | } |
195 | } | 199 | } |
diff --git a/client/src/app/+videos/+video-watch/comment/video-comments.component.scss b/client/src/app/+videos/+video-watch/comment/video-comments.component.scss index a7e858069..29a00ee3f 100644 --- a/client/src/app/+videos/+video-watch/comment/video-comments.component.scss +++ b/client/src/app/+videos/+video-watch/comment/video-comments.component.scss | |||
@@ -13,19 +13,21 @@ | |||
13 | 13 | ||
14 | .glyphicon, | 14 | .glyphicon, |
15 | .comment-thread-loading { | 15 | .comment-thread-loading { |
16 | margin-right: 5px; | 16 | @include margin-right(5px); |
17 | |||
17 | display: inline-block; | 18 | display: inline-block; |
18 | font-size: 13px; | 19 | font-size: 13px; |
19 | } | 20 | } |
20 | 21 | ||
21 | .title-block { | 22 | .title-block { |
22 | .title-page { | 23 | .title-page { |
23 | margin-right: 0; | 24 | @include margin-right(0); |
24 | } | 25 | } |
25 | 26 | ||
26 | my-feed { | 27 | my-feed { |
28 | @include margin-left(5px); | ||
29 | |||
27 | display: inline-block; | 30 | display: inline-block; |
28 | margin-left: 5px; | ||
29 | opacity: 0; | 31 | opacity: 0; |
30 | transition: ease-in .2s opacity; | 32 | transition: ease-in .2s opacity; |
31 | width: 12px; | 33 | width: 12px; |
@@ -47,7 +49,7 @@ | |||
47 | 49 | ||
48 | @media screen and (max-width: 600px) { | 50 | @media screen and (max-width: 600px) { |
49 | .view-replies { | 51 | .view-replies { |
50 | margin-left: 46px; | 52 | @include margin-left(46px); |
51 | } | 53 | } |
52 | } | 54 | } |
53 | 55 | ||