(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>
</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>
<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).
<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>
@import '_variables';
@import '_mixins';
+$markdown-icon-height: 18px;
+$markdown-icon-width: 30px;
+$peertube-textarea-height: 60px;
+
form {
margin-bottom: 30px;
}
flex-grow: 1;
margin: 0;
position: relative;
+ }
- $peertube-textarea-height: 60px;
- $markdown-icon-height: 18px;
- $markdown-icon-width: 30px;
-
- .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;
- }
- }
-
- &:focus, &:active, &:hover {
- my-global-icon svg {
- background-color: #C6C6C6;
- color: pvar(--mainBackgroundColor);
- fill: pvar(--mainBackgroundColor);
- }
- }
- }
- }
-
- textarea {
- @include peertube-textarea(100%, $peertube-textarea-height);
- @include button-focus(pvar(--mainColorLightest));
+ 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;
+ 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;
- }
+ @media screen and (max-width: 600px) {
+ padding-right: $markdown-icon-width + 19px !important;
+ }
- &:focus::placeholder {
- opacity: 0;
- }
+ &:focus::placeholder {
+ opacity: 0;
}
}
}
-.comment-buttons {
- display: flex;
- justify-content: flex-end;
+.markdown-guide {
+ position: absolute;
+ top: 5px;
+ right: 9px;
- button {
- @include peertube-button;
- @include disable-outline;
- @include disable-default-a-behaviour;
+ ::ng-deep .help-tooltip-button {
+ my-global-icon {
+ height: $markdown-icon-height;
+ width: $markdown-icon-width;
- &:not(:last-child) {
- margin-right: .5rem;
+ svg {
+ color: #C6C6C6;
+ fill: #C6C6C6;
+ border-radius: 3px;
+ }
}
- &:last-child {
- @include orange-button;
+ &:focus, &:active, &:hover {
+ my-global-icon svg {
+ background-color: #C6C6C6;
+ color: pvar(--mainBackgroundColor);
+ fill: pvar(--mainBackgroundColor);
+ }
}
}
+}
- .cancel-button {
- @include tertiary-button;
-
- font-weight: $font-semibold;
- display: inline-block;
- padding: 0 10px 0 10px;
- white-space: nowrap;
- background: transparent;
- }
+.comment-buttons {
+ display: flex;
+ justify-content: flex-end;
}
.emoji-flex {
}
@media screen and (max-width: 600px) {
- textarea, .comment-buttons button {
+ textarea,
+ .comment-buttons button {
font-size: 14px !important;
}
}
.modal-body {
- .btn {
- @include peertube-button;
- @include orange-button;
- }
-
- span {
+ > span {
float: left;
margin-bottom: 20px;
}
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'
<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>
.right {
width: 100%;
}
+}
- .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;
- }
-
- .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;
- }
+.comment {
+ flex-grow: 1;
+ // Fix word-wrap with flex
+ min-width: 1px;
+}
- .comment-account {
- word-break: break-all;
- font-weight: 600;
- font-size: 90%;
+.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;
+}
- a {
- @include disable-default-a-behaviour;
+.comment-account-date {
+ display: flex;
+ margin-bottom: 4px;
+}
- color: pvar(--mainForegroundColor);
+.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;
+}
- &:hover {
- text-decoration: underline;
- }
- }
+.comment-account {
+ word-break: break-all;
+ font-weight: 600;
+ font-size: 90%;
- .comment-account-fid {
- opacity: .6;
- }
- }
+ a {
+ @include disable-default-a-behaviour;
- .comment-date {
- font-size: 90%;
- color: pvar(--greyForegroundColor);
- margin-left: 5px;
- text-decoration: none;
+ color: pvar(--mainForegroundColor);
- &:hover {
- text-decoration: underline;
- }
- }
+ &:hover {
+ text-decoration: underline;
}
+ }
- .comment-html {
- @include peertube-word-wrap;
+ .comment-account-fid {
+ opacity: .6;
+ }
+}
- // Mentions
- ::ng-deep a {
+.comment-date {
+ font-size: 90%;
+ color: pvar(--greyForegroundColor);
+ margin-left: 5px;
+ text-decoration: none;
- &:not(.linkified-url) {
- @include disable-default-a-behaviour;
+ &:hover {
+ text-decoration: underline;
+ }
+}
- color: pvar(--mainForegroundColor);
+.comment-html {
+ @include peertube-word-wrap;
- font-weight: $font-semibold;
- }
+ // Mentions
+ ::ng-deep a {
- }
+ &:not(.linkified-url) {
+ @include disable-default-a-behaviour;
- // Paragraphs
- ::ng-deep p {
- margin-bottom: .3rem;
- }
+ color: pvar(--mainForegroundColor);
- &.comment-html-deleted {
- color: pvar(--greyForegroundColor);
- margin-bottom: 1rem;
- }
+ font-weight: $font-semibold;
}
- .comment-actions {
- margin-bottom: 10px;
- display: flex;
+ }
- ::ng-deep .dropdown-toggle,
- .comment-action-reply {
- color: pvar(--greyForegroundColor);
- cursor: pointer;
- margin-right: 10px;
+ // Paragraphs
+ ::ng-deep p {
+ margin-bottom: .3rem;
+ }
- &:hover, &:active, &:focus, &:focus-visible {
- color: pvar(--mainForegroundColor);
- }
- }
+ &.comment-html-deleted {
+ color: pvar(--greyForegroundColor);
+ margin-bottom: 1rem;
+ }
+}
- ::ng-deep .action-button {
- background-color: transparent;
- padding: 0;
- font-weight: unset;
- }
- }
+.comment-actions {
+ margin-bottom: 10px;
+ display: flex;
- my-video-comment-add {
- ::ng-deep form {
- margin-top: 1rem;
- margin-bottom: 0;
- }
+ ::ng-deep .dropdown-toggle,
+ .comment-action-reply {
+ color: pvar(--greyForegroundColor);
+ cursor: pointer;
+ margin-right: 10px;
+
+ &:hover, &:active, &:focus, &:focus-visible {
+ color: pvar(--mainForegroundColor);
}
}
- .children {
- // Reduce avatars size for replies
- .comment-avatar {
- @include avatar(25px);
- }
+ ::ng-deep .action-button {
+ background-color: transparent;
+ padding: 0;
+ font-weight: unset;
+ }
+}
- .left {
- margin-right: 6px;
- }
+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: 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;
- }
+ .vertical-border {
+ margin-left: 2px;
}
}
+ }
- .comment {
- .comment-account-date {
- flex-direction: column;
+ .comment-account-date {
+ flex-direction: column;
- .comment-date {
- margin-left: 0;
- }
- }
+ .comment-date {
+ margin-left: 0;
}
}
}
<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>
@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
.grey-button {
@include grey-button;
}
+
+.tertiary-button {
+ @include tertiary-button;
+}
projects / github / Chocobozzz / PeerTube.git / commitdiff
