aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/+videos
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2021-04-15 11:38:24 +0200
committerChocobozzz <me@florianbigard.com>2021-04-15 11:41:57 +0200
commitfe88ca697d4c43b24cdc2462f5e4e83548776a51 (patch)
tree5117904a1bc328d3ba1dcd12785508af2825fb3b /client/src/app/+videos
parent2df6f943b81e04f2f77c4f6e9d25b581647f64ae (diff)
downloadPeerTube-fe88ca697d4c43b24cdc2462f5e4e83548776a51.tar.gz
PeerTube-fe88ca697d4c43b24cdc2462f5e4e83548776a51.tar.zst
PeerTube-fe88ca697d4c43b24cdc2462f5e4e83548776a51.zip
Refactor comment add css
Diffstat (limited to 'client/src/app/+videos')
-rw-r--r--client/src/app/+videos/+video-watch/comment/video-comment-add.component.html13
-rw-r--r--client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss110
-rw-r--r--client/src/app/+videos/+video-watch/comment/video-comment-add.component.ts2
-rw-r--r--client/src/app/+videos/+video-watch/comment/video-comment.component.html2
-rw-r--r--client/src/app/+videos/+video-watch/comment/video-comment.component.scss240
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
4form { 8form {
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'
4import { Notifier, User } from '@app/core' 4import { Notifier, User } from '@app/core'
5import { VIDEO_COMMENT_TEXT_VALIDATOR } from '@app/shared/form-validators/video-comment-validators' 5import { VIDEO_COMMENT_TEXT_VALIDATOR } from '@app/shared/form-validators/video-comment-validators'
6import { FormReactive, FormValidatorService } from '@app/shared/shared-forms' 6import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
7import { Video, Account } from '@app/shared/shared-main' 7import { Video } from '@app/shared/shared-main'
8import { VideoComment, VideoCommentService } from '@app/shared/shared-video-comment' 8import { VideoComment, VideoCommentService } from '@app/shared/shared-video-comment'
9import { NgbModal } from '@ng-bootstrap/ng-bootstrap' 9import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
10import { VideoCommentCreate } from '@shared/models' 10import { 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 { 144my-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}