interesting
/
PeerTube
mirror of https://github.com/Chocobozzz/PeerTube.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Refactor comment add css

This commit is contained in:
Chocobozzz 2021-04-15 11:38:24 +02:00
parent 2df6f943b8
commit fe88ca697d
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
8 changed files with 190 additions and 214 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
client/src/app/+videos/+video-watch/comment/video-comment-add.component.html
View File

@ -8,8 +8,8 @@
(click)="openVisitorModal($event)"
formControlName="text" [ngClass]="{ 'input-error': formErrors['text'] }"
(keyup.control.enter)="onValidKey()" (keyup.meta.enter)="onValidKey()" #textarea>
</textarea>
<my-help class="markdown-guide" helpType="custom" iconName="markdown" tooltipPlacement="left auto" autoClose="true" i18n-title title="Markdown compatible">
<ng-template ptTemplate="customHtml">
<span i18n>Markdown compatible that supports:</span>
@ -41,10 +41,11 @@
</div>
<div class="comment-buttons">
<button *ngIf="isAddButtonDisplayed()" class="cancel-button" (click)="cancelCommentReply()" type="button" i18n>
<button *ngIf="isAddButtonDisplayed()" class="peertube-button tertiary-button cancel-button" (click)="cancelCommentReply()" type="button" i18n>
Cancel
</button>
<button *ngIf="isAddButtonDisplayed()" [ngClass]="{ disabled: !form.valid || addingComment }">
<button *ngIf="isAddButtonDisplayed()" class="peertube-button orange-button" [ngClass]="{ disabled: !form.valid || addingComment }">
{{ addingCommentButtonValue }}
</button>
</div>
@ -55,6 +56,7 @@
<h4 class="modal-title" id="modal-basic-title" i18n>You are one step away from commenting</h4>
<my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hideModals()"></my-global-icon>
</div>
<div class="modal-body">
<span i18n>
You can comment using an account on any ActivityPub-compatible instance (PeerTube/Mastodon/Pleroma account for example).
@ -62,14 +64,15 @@
<my-remote-subscribe [interact]="true" [uri]="getUri()"></my-remote-subscribe>
</div>
<div class="modal-footer inputs">
<input
type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
(click)="hideModals()" (key.enter)="hideModals()"
>
<input
type="submit" i18n-value value="Login to comment" class="action-button-submit"
type="submit" i18n-value value="Login to comment" class="peertube-button orange-button"
(click)="gotoLogin()"
>
</div>

108
client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss
View File

@ -1,6 +1,10 @@
@import '_variables';
@import '_mixins';
$markdown-icon-height: 18px;
$markdown-icon-width: 30px;
$peertube-textarea-height: 60px;
form {
margin-bottom: 30px;
}
@ -18,51 +22,47 @@ form {
flex-grow: 1;
margin: 0;
position: relative;
}
$peertube-textarea-height: 60px;
$markdown-icon-height: 18px;
$markdown-icon-width: 30px;
textarea {
@include peertube-textarea(100%, $peertube-textarea-height);
@include button-focus(pvar(--mainColorLightest));
.markdown-guide {
position: absolute;
top: 5px;
right: 9px;
min-height: calc(#{$peertube-textarea-height} - 15px * 2);
padding-right: $markdown-icon-width + 15px !important;
::ng-deep .help-tooltip-button {
my-global-icon {
height: $markdown-icon-height;
width: $markdown-icon-width;
@media screen and (max-width: 600px) {
padding-right: $markdown-icon-width + 19px !important;
}
svg {
color: #C6C6C6;
fill: #C6C6C6;
border-radius: 3px;
}
}
&:focus::placeholder {
opacity: 0;
}
}
}
&:focus, &:active, &:hover {
my-global-icon svg {
background-color: #C6C6C6;
color: pvar(--mainBackgroundColor);
fill: pvar(--mainBackgroundColor);
}
}
.markdown-guide {
position: absolute;
top: 5px;
right: 9px;
::ng-deep .help-tooltip-button {
my-global-icon {
height: $markdown-icon-height;
width: $markdown-icon-width;
svg {
color: #C6C6C6;
fill: #C6C6C6;
border-radius: 3px;
}
}
textarea {
@include peertube-textarea(100%, $peertube-textarea-height);
@include button-focus(pvar(--mainColorLightest));
min-height: calc(#{$peertube-textarea-height} - 15px * 2);
padding-right: $markdown-icon-width + 15px !important;
@media screen and (max-width: 600px) {
padding-right: $markdown-icon-width + 19px !important;
}
&:focus::placeholder {
opacity: 0;
&:focus, &:active, &:hover {
my-global-icon svg {
background-color: #C6C6C6;
color: pvar(--mainBackgroundColor);
fill: pvar(--mainBackgroundColor);
}
}
}
@ -71,30 +71,6 @@ form {
.comment-buttons {
display: flex;
justify-content: flex-end;
button {
@include peertube-button;
@include disable-outline;
@include disable-default-a-behaviour;
&:not(:last-child) {
margin-right: .5rem;
}
&:last-child {
@include orange-button;
}
}
.cancel-button {
@include tertiary-button;
font-weight: $font-semibold;
display: inline-block;
padding: 0 10px 0 10px;
white-space: nowrap;
background: transparent;
}
}
.emoji-flex {
@ -117,7 +93,8 @@ form {
}
@media screen and (max-width: 600px) {
textarea, .comment-buttons button {
textarea,
.comment-buttons button {
font-size: 14px !important;
}
@ -127,12 +104,7 @@ form {
}
.modal-body {
.btn {
@include peertube-button;
@include orange-button;
}
span {
> span {
float: left;
margin-bottom: 20px;
}

2
client/src/app/+videos/+video-watch/comment/video-comment-add.component.ts
View File

@ -4,7 +4,7 @@ import { Router } from '@angular/router'
import { Notifier, User } from '@app/core'
import { VIDEO_COMMENT_TEXT_VALIDATOR } from '@app/shared/form-validators/video-comment-validators'
import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
import { Video, Account } from '@app/shared/shared-main'
import { Video } from '@app/shared/shared-main'
import { VideoComment, VideoCommentService } from '@app/shared/shared-video-comment'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
import { VideoCommentCreate } from '@shared/models'

2
client/src/app/+videos/+video-watch/comment/video-comment.component.html
View File

@ -38,7 +38,7 @@
<div *ngIf="isUserLoggedIn()" tabindex=0 (click)="onWantToReply()" class="comment-action-reply" i18n>Reply</div>
<my-user-moderation-dropdown
[prependActions]="prependModerationActions" tabindex=0
[prependActions]="prependModerationActions" tabindex=0 [buttonStyled]="false"
buttonSize="small" [account]="commentAccount" [user]="commentUser" i18n-label label="Options" placement="bottom-left auto"
></my-user-moderation-dropdown>
</div>

272
client/src/app/+videos/+video-watch/comment/video-comment.component.scss
View File

@ -22,141 +22,141 @@
.right {
width: 100%;
}
}
.comment {
flex-grow: 1;
// Fix word-wrap with flex
min-width: 1px;
.comment {
flex-grow: 1;
// Fix word-wrap with flex
min-width: 1px;
}
.highlighted-comment {
display: inline-block;
background-color: #F5F5F5;
color: #3d3d3d;
padding: 0 5px;
font-size: 13px;
margin-bottom: 5px;
font-weight: $font-semibold;
border-radius: 3px;
}
.highlighted-comment {
display: inline-block;
background-color: #F5F5F5;
color: #3d3d3d;
padding: 0 5px;
font-size: 13px;
margin-bottom: 5px;
font-weight: $font-semibold;
border-radius: 3px;
}
.comment-account-date {
display: flex;
margin-bottom: 4px;
.comment-account-date {
display: flex;
margin-bottom: 4px;
}
.video-author {
height: 20px;
background-color: #888888;
border-radius: 12px;
margin-bottom: 2px;
max-width: 100%;
box-sizing: border-box;
flex-direction: row;
align-items: center;
display: inline-flex;
padding-right: 6px;
padding-left: 6px;
color: white !important;
}
.video-author {
height: 20px;
background-color: #888888;
border-radius: 12px;
margin-bottom: 2px;
max-width: 100%;
box-sizing: border-box;
flex-direction: row;
align-items: center;
display: inline-flex;
padding-right: 6px;
padding-left: 6px;
color: white !important;
}
.comment-account {
word-break: break-all;
font-weight: 600;
font-size: 90%;
.comment-account {
word-break: break-all;
font-weight: 600;
font-size: 90%;
a {
@include disable-default-a-behaviour;
a {
@include disable-default-a-behaviour;
color: pvar(--mainForegroundColor);
color: pvar(--mainForegroundColor);
&:hover {
text-decoration: underline;
}
}
.comment-account-fid {
opacity: .6;
}
}
.comment-date {
font-size: 90%;
color: pvar(--greyForegroundColor);
margin-left: 5px;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
.comment-html {
@include peertube-word-wrap;
// Mentions
::ng-deep a {
&:not(.linkified-url) {
@include disable-default-a-behaviour;
color: pvar(--mainForegroundColor);
font-weight: $font-semibold;
}
}
// Paragraphs
::ng-deep p {
margin-bottom: .3rem;
}
&.comment-html-deleted {
color: pvar(--greyForegroundColor);
margin-bottom: 1rem;
}
}
.comment-actions {
margin-bottom: 10px;
display: flex;
::ng-deep .dropdown-toggle,
.comment-action-reply {
color: pvar(--greyForegroundColor);
cursor: pointer;
margin-right: 10px;
&:hover, &:active, &:focus, &:focus-visible {
color: pvar(--mainForegroundColor);
}
}
::ng-deep .action-button {
background-color: transparent;
padding: 0;
font-weight: unset;
}
}
my-video-comment-add {
::ng-deep form {
margin-top: 1rem;
margin-bottom: 0;
}
&:hover {
text-decoration: underline;
}
}
.children {
// Reduce avatars size for replies
.comment-avatar {
@include avatar(25px);
.comment-account-fid {
opacity: .6;
}
}
.comment-date {
font-size: 90%;
color: pvar(--greyForegroundColor);
margin-left: 5px;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
.comment-html {
@include peertube-word-wrap;
// Mentions
::ng-deep a {
&:not(.linkified-url) {
@include disable-default-a-behaviour;
color: pvar(--mainForegroundColor);
font-weight: $font-semibold;
}
.left {
margin-right: 6px;
}
// Paragraphs
::ng-deep p {
margin-bottom: .3rem;
}
&.comment-html-deleted {
color: pvar(--greyForegroundColor);
margin-bottom: 1rem;
}
}
.comment-actions {
margin-bottom: 10px;
display: flex;
::ng-deep .dropdown-toggle,
.comment-action-reply {
color: pvar(--greyForegroundColor);
cursor: pointer;
margin-right: 10px;
&:hover, &:active, &:focus, &:focus-visible {
color: pvar(--mainForegroundColor);
}
}
::ng-deep .action-button {
background-color: transparent;
padding: 0;
font-weight: unset;
}
}
my-video-comment-add {
::ng-deep form {
margin-top: 1rem;
margin-bottom: 0;
}
}
.children {
// Reduce avatars size for replies
.comment-avatar {
@include avatar(25px);
}
.left {
margin-right: 6px;
}
}
@media screen and (max-width: 1200px) {
@ -166,27 +166,23 @@
}
@media screen and (max-width: 600px) {
.root-comment {
.children {
margin-left: -20px;
.children {
margin-left: -20px;
.left {
align-items: flex-start;
.left {
align-items: flex-start;
.vertical-border {
margin-left: 2px;
}
}
}
.comment {
.comment-account-date {
flex-direction: column;
.comment-date {
margin-left: 0;
}
.vertical-border {
margin-left: 2px;
}
}
}
.comment-account-date {
flex-direction: column;
.comment-date {
margin-left: 0;
}
}
}

2
client/src/app/shared/shared-moderation/user-moderation-dropdown.component.html
View File

@ -4,6 +4,6 @@
<my-action-dropdown
[actions]="userActions" [entry]="{ user: user, account: account }"
[buttonSize]="buttonSize" [placement]="placement" [label]="label"
[container]="container"
[container]="container" [buttonStyled]="buttonStyled"
></my-action-dropdown>
</ng-container>

1
client/src/app/shared/shared-moderation/user-moderation-dropdown.component.ts
View File

@ -18,6 +18,7 @@ export class UserModerationDropdownComponent implements OnInit, OnChanges {
@Input() prependActions: DropdownAction<{ user: User, account: Account }>[]
@Input() buttonSize: 'normal' | 'small' = 'normal'
@Input() buttonStyled = true
@Input() placement = 'right-top right-bottom auto'
@Input() label: string
@Input() container: 'body' | undefined = undefined

4
client/src/sass/classes.scss
View File

@ -20,3 +20,7 @@
.grey-button {
@include grey-button;
}
.tertiary-button {
@include tertiary-button;
}