diff options
Diffstat (limited to 'client/src/app/+videos/+video-watch')
5 files changed, 169 insertions, 198 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 930464024..7bd9b7c90 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 | |||
@@ -8,8 +8,8 @@ | |||
8 | (click)="openVisitorModal($event)" | 8 | (click)="openVisitorModal($event)" |
9 | formControlName="text" [ngClass]="{ 'input-error': formErrors['text'] }" | 9 | formControlName="text" [ngClass]="{ 'input-error': formErrors['text'] }" |
10 | (keyup.control.enter)="onValidKey()" (keyup.meta.enter)="onValidKey()" #textarea> | 10 | (keyup.control.enter)="onValidKey()" (keyup.meta.enter)="onValidKey()" #textarea> |
11 | |||
12 | </textarea> | 11 | </textarea> |
12 | |||
13 | <my-help class="markdown-guide" helpType="custom" iconName="markdown" tooltipPlacement="left auto" autoClose="true" i18n-title title="Markdown compatible"> | 13 | <my-help class="markdown-guide" helpType="custom" iconName="markdown" tooltipPlacement="left auto" autoClose="true" i18n-title title="Markdown compatible"> |
14 | <ng-template ptTemplate="customHtml"> | 14 | <ng-template ptTemplate="customHtml"> |
15 | <span i18n>Markdown compatible that supports:</span> | 15 | <span i18n>Markdown compatible that supports:</span> |
@@ -41,10 +41,11 @@ | |||
41 | </div> | 41 | </div> |
42 | 42 | ||
43 | <div class="comment-buttons"> | 43 | <div class="comment-buttons"> |
44 | <button *ngIf="isAddButtonDisplayed()" class="cancel-button" (click)="cancelCommentReply()" type="button" i18n> | 44 | <button *ngIf="isAddButtonDisplayed()" class="peertube-button tertiary-button cancel-button" (click)="cancelCommentReply()" type="button" i18n> |
45 | Cancel | 45 | Cancel |
46 | </button> | 46 | </button> |
47 | <button *ngIf="isAddButtonDisplayed()" [ngClass]="{ disabled: !form.valid || addingComment }"> | 47 | |
48 | <button *ngIf="isAddButtonDisplayed()" class="peertube-button orange-button" [ngClass]="{ disabled: !form.valid || addingComment }"> | ||
48 | {{ addingCommentButtonValue }} | 49 | {{ addingCommentButtonValue }} |
49 | </button> | 50 | </button> |
50 | </div> | 51 | </div> |
@@ -55,6 +56,7 @@ | |||
55 | <h4 class="modal-title" id="modal-basic-title" i18n>You are one step away from commenting</h4> | 56 | <h4 class="modal-title" id="modal-basic-title" i18n>You are one step away from commenting</h4> |
56 | <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hideModals()"></my-global-icon> | 57 | <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hideModals()"></my-global-icon> |
57 | </div> | 58 | </div> |
59 | |||
58 | <div class="modal-body"> | 60 | <div class="modal-body"> |
59 | <span i18n> | 61 | <span i18n> |
60 | You can comment using an account on any ActivityPub-compatible instance (PeerTube/Mastodon/Pleroma account for example). | 62 | You can comment using an account on any ActivityPub-compatible instance (PeerTube/Mastodon/Pleroma account for example). |
@@ -62,14 +64,15 @@ | |||
62 | 64 | ||
63 | <my-remote-subscribe [interact]="true" [uri]="getUri()"></my-remote-subscribe> | 65 | <my-remote-subscribe [interact]="true" [uri]="getUri()"></my-remote-subscribe> |
64 | </div> | 66 | </div> |
67 | |||
65 | <div class="modal-footer inputs"> | 68 | <div class="modal-footer inputs"> |
66 | <input | 69 | <input |
67 | type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel" | 70 | type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button" |
68 | (click)="hideModals()" (key.enter)="hideModals()" | 71 | (click)="hideModals()" (key.enter)="hideModals()" |
69 | > | 72 | > |
70 | 73 | ||
71 | <input | 74 | <input |
72 | type="submit" i18n-value value="Login to comment" class="action-button-submit" | 75 | type="submit" i18n-value value="Login to comment" class="peertube-button orange-button" |
73 | (click)="gotoLogin()" | 76 | (click)="gotoLogin()" |
74 | > | 77 | > |
75 | </div> | 78 | </div> |
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 e11b9be5a..1aa9255c2 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 | |||
@@ -1,6 +1,10 @@ | |||
1 | @import '_variables'; | 1 | @import '_variables'; |
2 | @import '_mixins'; | 2 | @import '_mixins'; |
3 | 3 | ||
4 | $markdown-icon-height: 18px; | ||
5 | $markdown-icon-width: 30px; | ||
6 | $peertube-textarea-height: 60px; | ||
7 | |||
4 | form { | 8 | form { |
5 | margin-bottom: 30px; | 9 | margin-bottom: 30px; |
6 | } | 10 | } |
@@ -18,83 +22,55 @@ form { | |||
18 | flex-grow: 1; | 22 | flex-grow: 1; |
19 | margin: 0; | 23 | margin: 0; |
20 | position: relative; | 24 | position: relative; |
25 | } | ||
21 | 26 | ||
22 | $peertube-textarea-height: 60px; | 27 | textarea { |
23 | $markdown-icon-height: 18px; | 28 | @include peertube-textarea(100%, $peertube-textarea-height); |
24 | $markdown-icon-width: 30px; | 29 | @include button-focus(pvar(--mainColorLightest)); |
25 | |||
26 | .markdown-guide { | ||
27 | position: absolute; | ||
28 | top: 5px; | ||
29 | right: 9px; | ||
30 | |||
31 | ::ng-deep .help-tooltip-button { | ||
32 | my-global-icon { | ||
33 | height: $markdown-icon-height; | ||
34 | width: $markdown-icon-width; | ||
35 | |||
36 | svg { | ||
37 | color: #C6C6C6; | ||
38 | fill: #C6C6C6; | ||
39 | border-radius: 3px; | ||
40 | } | ||
41 | } | ||
42 | |||
43 | &:focus, &:active, &:hover { | ||
44 | my-global-icon svg { | ||
45 | background-color: #C6C6C6; | ||
46 | color: pvar(--mainBackgroundColor); | ||
47 | fill: pvar(--mainBackgroundColor); | ||
48 | } | ||
49 | } | ||
50 | } | ||
51 | } | ||
52 | |||
53 | textarea { | ||
54 | @include peertube-textarea(100%, $peertube-textarea-height); | ||
55 | @include button-focus(pvar(--mainColorLightest)); | ||
56 | 30 | ||
57 | min-height: calc(#{$peertube-textarea-height} - 15px * 2); | 31 | min-height: calc(#{$peertube-textarea-height} - 15px * 2); |
58 | padding-right: $markdown-icon-width + 15px !important; | 32 | padding-right: $markdown-icon-width + 15px !important; |
59 | 33 | ||
60 | @media screen and (max-width: 600px) { | 34 | @media screen and (max-width: 600px) { |
61 | padding-right: $markdown-icon-width + 19px !important; | 35 | padding-right: $markdown-icon-width + 19px !important; |
62 | } | 36 | } |
63 | 37 | ||
64 | &:focus::placeholder { | 38 | &:focus::placeholder { |
65 | opacity: 0; | 39 | opacity: 0; |
66 | } | ||
67 | } | 40 | } |
68 | } | 41 | } |
69 | } | 42 | } |
70 | 43 | ||
71 | .comment-buttons { | 44 | .markdown-guide { |
72 | display: flex; | 45 | position: absolute; |
73 | justify-content: flex-end; | 46 | top: 5px; |
47 | right: 9px; | ||
74 | 48 | ||
75 | button { | 49 | ::ng-deep .help-tooltip-button { |
76 | @include peertube-button; | 50 | my-global-icon { |
77 | @include disable-outline; | 51 | height: $markdown-icon-height; |
78 | @include disable-default-a-behaviour; | 52 | width: $markdown-icon-width; |
79 | 53 | ||
80 | &:not(:last-child) { | 54 | svg { |
81 | margin-right: .5rem; | 55 | color: #C6C6C6; |
56 | fill: #C6C6C6; | ||
57 | border-radius: 3px; | ||
58 | } | ||
82 | } | 59 | } |
83 | 60 | ||
84 | &:last-child { | 61 | &:focus, &:active, &:hover { |
85 | @include orange-button; | 62 | my-global-icon svg { |
63 | background-color: #C6C6C6; | ||
64 | color: pvar(--mainBackgroundColor); | ||
65 | fill: pvar(--mainBackgroundColor); | ||
66 | } | ||
86 | } | 67 | } |
87 | } | 68 | } |
69 | } | ||
88 | 70 | ||
89 | .cancel-button { | 71 | .comment-buttons { |
90 | @include tertiary-button; | 72 | display: flex; |
91 | 73 | justify-content: flex-end; | |
92 | font-weight: $font-semibold; | ||
93 | display: inline-block; | ||
94 | padding: 0 10px 0 10px; | ||
95 | white-space: nowrap; | ||
96 | background: transparent; | ||
97 | } | ||
98 | } | 74 | } |
99 | 75 | ||
100 | .emoji-flex { | 76 | .emoji-flex { |
@@ -117,7 +93,8 @@ form { | |||
117 | } | 93 | } |
118 | 94 | ||
119 | @media screen and (max-width: 600px) { | 95 | @media screen and (max-width: 600px) { |
120 | textarea, .comment-buttons button { | 96 | textarea, |
97 | .comment-buttons button { | ||
121 | font-size: 14px !important; | 98 | font-size: 14px !important; |
122 | } | 99 | } |
123 | 100 | ||
@@ -127,12 +104,7 @@ form { | |||
127 | } | 104 | } |
128 | 105 | ||
129 | .modal-body { | 106 | .modal-body { |
130 | .btn { | 107 | > span { |
131 | @include peertube-button; | ||
132 | @include orange-button; | ||
133 | } | ||
134 | |||
135 | span { | ||
136 | float: left; | 108 | float: left; |
137 | margin-bottom: 20px; | 109 | margin-bottom: 20px; |
138 | } | 110 | } |
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 fce7e5edc..0e1362ad3 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 | |||
@@ -4,7 +4,7 @@ import { Router } from '@angular/router' | |||
4 | import { Notifier, User } from '@app/core' | 4 | import { Notifier, User } from '@app/core' |
5 | import { VIDEO_COMMENT_TEXT_VALIDATOR } from '@app/shared/form-validators/video-comment-validators' | 5 | import { VIDEO_COMMENT_TEXT_VALIDATOR } from '@app/shared/form-validators/video-comment-validators' |
6 | import { FormReactive, FormValidatorService } from '@app/shared/shared-forms' | 6 | import { FormReactive, FormValidatorService } from '@app/shared/shared-forms' |
7 | import { Video, Account } from '@app/shared/shared-main' | 7 | import { Video } from '@app/shared/shared-main' |
8 | import { VideoComment, VideoCommentService } from '@app/shared/shared-video-comment' | 8 | import { VideoComment, VideoCommentService } from '@app/shared/shared-video-comment' |
9 | import { NgbModal } from '@ng-bootstrap/ng-bootstrap' | 9 | import { NgbModal } from '@ng-bootstrap/ng-bootstrap' |
10 | import { VideoCommentCreate } from '@shared/models' | 10 | import { VideoCommentCreate } from '@shared/models' |
diff --git a/client/src/app/+videos/+video-watch/comment/video-comment.component.html b/client/src/app/+videos/+video-watch/comment/video-comment.component.html index eeae55d9b..4592c9c69 100644 --- a/client/src/app/+videos/+video-watch/comment/video-comment.component.html +++ b/client/src/app/+videos/+video-watch/comment/video-comment.component.html | |||
@@ -38,7 +38,7 @@ | |||
38 | <div *ngIf="isUserLoggedIn()" tabindex=0 (click)="onWantToReply()" class="comment-action-reply" i18n>Reply</div> | 38 | <div *ngIf="isUserLoggedIn()" tabindex=0 (click)="onWantToReply()" class="comment-action-reply" i18n>Reply</div> |
39 | 39 | ||
40 | <my-user-moderation-dropdown | 40 | <my-user-moderation-dropdown |
41 | [prependActions]="prependModerationActions" tabindex=0 | 41 | [prependActions]="prependModerationActions" tabindex=0 [buttonStyled]="false" |
42 | buttonSize="small" [account]="commentAccount" [user]="commentUser" i18n-label label="Options" placement="bottom-left auto" | 42 | buttonSize="small" [account]="commentAccount" [user]="commentUser" i18n-label label="Options" placement="bottom-left auto" |
43 | ></my-user-moderation-dropdown> | 43 | ></my-user-moderation-dropdown> |
44 | </div> | 44 | </div> |
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 866293eea..cf33a5b0e 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 | |||
@@ -22,140 +22,140 @@ | |||
22 | .right { | 22 | .right { |
23 | width: 100%; | 23 | width: 100%; |
24 | } | 24 | } |
25 | } | ||
25 | 26 | ||
26 | .comment { | 27 | .comment { |
27 | flex-grow: 1; | 28 | flex-grow: 1; |
28 | // Fix word-wrap with flex | 29 | // Fix word-wrap with flex |
29 | min-width: 1px; | 30 | min-width: 1px; |
30 | 31 | } | |
31 | .highlighted-comment { | ||
32 | display: inline-block; | ||
33 | background-color: #F5F5F5; | ||
34 | color: #3d3d3d; | ||
35 | padding: 0 5px; | ||
36 | font-size: 13px; | ||
37 | margin-bottom: 5px; | ||
38 | font-weight: $font-semibold; | ||
39 | border-radius: 3px; | ||
40 | } | ||
41 | |||
42 | .comment-account-date { | ||
43 | display: flex; | ||
44 | margin-bottom: 4px; | ||
45 | |||
46 | .video-author { | ||
47 | height: 20px; | ||
48 | background-color: #888888; | ||
49 | border-radius: 12px; | ||
50 | margin-bottom: 2px; | ||
51 | max-width: 100%; | ||
52 | box-sizing: border-box; | ||
53 | flex-direction: row; | ||
54 | align-items: center; | ||
55 | display: inline-flex; | ||
56 | padding-right: 6px; | ||
57 | padding-left: 6px; | ||
58 | color: white !important; | ||
59 | } | ||
60 | 32 | ||
61 | .comment-account { | 33 | .highlighted-comment { |
62 | word-break: break-all; | 34 | display: inline-block; |
63 | font-weight: 600; | 35 | background-color: #F5F5F5; |
64 | font-size: 90%; | 36 | color: #3d3d3d; |
37 | padding: 0 5px; | ||
38 | font-size: 13px; | ||
39 | margin-bottom: 5px; | ||
40 | font-weight: $font-semibold; | ||
41 | border-radius: 3px; | ||
42 | } | ||
65 | 43 | ||
66 | a { | 44 | .comment-account-date { |
67 | @include disable-default-a-behaviour; | 45 | display: flex; |
46 | margin-bottom: 4px; | ||
47 | } | ||
68 | 48 | ||
69 | color: pvar(--mainForegroundColor); | 49 | .video-author { |
50 | height: 20px; | ||
51 | background-color: #888888; | ||
52 | border-radius: 12px; | ||
53 | margin-bottom: 2px; | ||
54 | max-width: 100%; | ||
55 | box-sizing: border-box; | ||
56 | flex-direction: row; | ||
57 | align-items: center; | ||
58 | display: inline-flex; | ||
59 | padding-right: 6px; | ||
60 | padding-left: 6px; | ||
61 | color: white !important; | ||
62 | } | ||
70 | 63 | ||
71 | &:hover { | 64 | .comment-account { |
72 | text-decoration: underline; | 65 | word-break: break-all; |
73 | } | 66 | font-weight: 600; |
74 | } | 67 | font-size: 90%; |
75 | 68 | ||
76 | .comment-account-fid { | 69 | a { |
77 | opacity: .6; | 70 | @include disable-default-a-behaviour; |
78 | } | ||
79 | } | ||
80 | 71 | ||
81 | .comment-date { | 72 | color: pvar(--mainForegroundColor); |
82 | font-size: 90%; | ||
83 | color: pvar(--greyForegroundColor); | ||
84 | margin-left: 5px; | ||
85 | text-decoration: none; | ||
86 | 73 | ||
87 | &:hover { | 74 | &:hover { |
88 | text-decoration: underline; | 75 | text-decoration: underline; |
89 | } | ||
90 | } | ||
91 | } | 76 | } |
77 | } | ||
92 | 78 | ||
93 | .comment-html { | 79 | .comment-account-fid { |
94 | @include peertube-word-wrap; | 80 | opacity: .6; |
81 | } | ||
82 | } | ||
95 | 83 | ||
96 | // Mentions | 84 | .comment-date { |
97 | ::ng-deep a { | 85 | font-size: 90%; |
86 | color: pvar(--greyForegroundColor); | ||
87 | margin-left: 5px; | ||
88 | text-decoration: none; | ||
98 | 89 | ||
99 | &:not(.linkified-url) { | 90 | &:hover { |
100 | @include disable-default-a-behaviour; | 91 | text-decoration: underline; |
92 | } | ||
93 | } | ||
101 | 94 | ||
102 | color: pvar(--mainForegroundColor); | 95 | .comment-html { |
96 | @include peertube-word-wrap; | ||
103 | 97 | ||
104 | font-weight: $font-semibold; | 98 | // Mentions |
105 | } | 99 | ::ng-deep a { |
106 | 100 | ||
107 | } | 101 | &:not(.linkified-url) { |
102 | @include disable-default-a-behaviour; | ||
108 | 103 | ||
109 | // Paragraphs | 104 | color: pvar(--mainForegroundColor); |
110 | ::ng-deep p { | ||
111 | margin-bottom: .3rem; | ||
112 | } | ||
113 | 105 | ||
114 | &.comment-html-deleted { | 106 | font-weight: $font-semibold; |
115 | color: pvar(--greyForegroundColor); | ||
116 | margin-bottom: 1rem; | ||
117 | } | ||
118 | } | 107 | } |
119 | 108 | ||
120 | .comment-actions { | 109 | } |
121 | margin-bottom: 10px; | ||
122 | display: flex; | ||
123 | 110 | ||
124 | ::ng-deep .dropdown-toggle, | 111 | // Paragraphs |
125 | .comment-action-reply { | 112 | ::ng-deep p { |
126 | color: pvar(--greyForegroundColor); | 113 | margin-bottom: .3rem; |
127 | cursor: pointer; | 114 | } |
128 | margin-right: 10px; | ||
129 | 115 | ||
130 | &:hover, &:active, &:focus, &:focus-visible { | 116 | &.comment-html-deleted { |
131 | color: pvar(--mainForegroundColor); | 117 | color: pvar(--greyForegroundColor); |
132 | } | 118 | margin-bottom: 1rem; |
133 | } | 119 | } |
120 | } | ||
134 | 121 | ||
135 | ::ng-deep .action-button { | 122 | .comment-actions { |
136 | background-color: transparent; | 123 | margin-bottom: 10px; |
137 | padding: 0; | 124 | display: flex; |
138 | font-weight: unset; | ||
139 | } | ||
140 | } | ||
141 | 125 | ||
142 | my-video-comment-add { | 126 | ::ng-deep .dropdown-toggle, |
143 | ::ng-deep form { | 127 | .comment-action-reply { |
144 | margin-top: 1rem; | 128 | color: pvar(--greyForegroundColor); |
145 | margin-bottom: 0; | 129 | cursor: pointer; |
146 | } | 130 | margin-right: 10px; |
131 | |||
132 | &:hover, &:active, &:focus, &:focus-visible { | ||
133 | color: pvar(--mainForegroundColor); | ||
147 | } | 134 | } |
148 | } | 135 | } |
149 | 136 | ||
150 | .children { | 137 | ::ng-deep .action-button { |
151 | // Reduce avatars size for replies | 138 | background-color: transparent; |
152 | .comment-avatar { | 139 | padding: 0; |
153 | @include avatar(25px); | 140 | font-weight: unset; |
154 | } | 141 | } |
142 | } | ||
155 | 143 | ||
156 | .left { | 144 | my-video-comment-add { |
157 | margin-right: 6px; | 145 | ::ng-deep form { |
158 | } | 146 | margin-top: 1rem; |
147 | margin-bottom: 0; | ||
148 | } | ||
149 | } | ||
150 | |||
151 | .children { | ||
152 | // Reduce avatars size for replies | ||
153 | .comment-avatar { | ||
154 | @include avatar(25px); | ||
155 | } | ||
156 | |||
157 | .left { | ||
158 | margin-right: 6px; | ||
159 | } | 159 | } |
160 | } | 160 | } |
161 | 161 | ||
@@ -166,27 +166,23 @@ | |||
166 | } | 166 | } |
167 | 167 | ||
168 | @media screen and (max-width: 600px) { | 168 | @media screen and (max-width: 600px) { |
169 | .root-comment { | 169 | .children { |
170 | .children { | 170 | margin-left: -20px; |
171 | margin-left: -20px; | ||
172 | 171 | ||
173 | .left { | 172 | .left { |
174 | align-items: flex-start; | 173 | align-items: flex-start; |
175 | 174 | ||
176 | .vertical-border { | 175 | .vertical-border { |
177 | margin-left: 2px; | 176 | margin-left: 2px; |
178 | } | ||
179 | } | 177 | } |
180 | } | 178 | } |
179 | } | ||
181 | 180 | ||
182 | .comment { | 181 | .comment-account-date { |
183 | .comment-account-date { | 182 | flex-direction: column; |
184 | flex-direction: column; | ||
185 | 183 | ||
186 | .comment-date { | 184 | .comment-date { |
187 | margin-left: 0; | 185 | margin-left: 0; |
188 | } | ||
189 | } | ||
190 | } | 186 | } |
191 | } | 187 | } |
192 | } | 188 | } |