]>
Commit | Line | Data |
---|---|---|
1 | <form novalidate [formGroup]="form" (ngSubmit)="formValidated()"> | |
2 | <div class="avatar-and-textarea"> | |
3 | <my-actor-avatar [actor]="user?.account" [actorType]="getAvatarActorType()" size="25"></my-actor-avatar> | |
4 | ||
5 | <div class="textarea-wrapper"> | |
6 | <textarea i18n-placeholder placeholder="Add comment..." myAutoResize | |
7 | [readonly]="(user === null) ? true : false" | |
8 | (click)="openVisitorModal($event)" | |
9 | formControlName="text" [ngClass]="{ 'input-error': formErrors['text'] }" | |
10 | (keyup.control.enter)="onValidKey()" (keyup.meta.enter)="onValidKey()" #textarea> | |
11 | </textarea> | |
12 | ||
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 | > | |
17 | <ng-template ptTemplate="customHtml"> | |
18 | <span i18n>Markdown compatible that supports:</span> | |
19 | ||
20 | <ul> | |
21 | <li><span i18n>Auto generated links</span></li> | |
22 | <li><span i18n>Break lines</span></li> | |
23 | <li><span i18n>Lists</span></li> | |
24 | <li> | |
25 | <span i18n>Emphasis</span> | |
26 | <code>**<strong i18n>bold</strong>** _<i i18n>italic</i>_</code> | |
27 | </li> | |
28 | <li> | |
29 | <span i18n>Emoji shortcuts</span> | |
30 | <code>:) <3</code> | |
31 | </li> | |
32 | <li> | |
33 | <span i18n>Emoji markup</span> | |
34 | <code>:smile:</code> | |
35 | <div><a href="" (click)="openEmojiModal($event)" i18n>See complete list</a></div> | |
36 | </li> | |
37 | </ul> | |
38 | </ng-template> | |
39 | </my-help> | |
40 | <div *ngIf="formErrors.text" class="form-error"> | |
41 | {{ formErrors.text }} | |
42 | </div> | |
43 | </div> | |
44 | </div> | |
45 | ||
46 | <div class="comment-buttons"> | |
47 | <button *ngIf="isAddButtonDisplayed()" class="peertube-button tertiary-button cancel-button" (click)="cancelCommentReply()" type="button" i18n> | |
48 | Cancel | |
49 | </button> | |
50 | ||
51 | <button *ngIf="isAddButtonDisplayed()" class="peertube-button orange-button" [ngClass]="{ disabled: !form.valid || addingComment }"> | |
52 | {{ addingCommentButtonValue }} | |
53 | </button> | |
54 | </div> | |
55 | </form> | |
56 | ||
57 | <ng-template #visitorModal let-modal> | |
58 | <div class="modal-header"> | |
59 | <h4 class="modal-title" id="modal-basic-title" i18n>You are one step away from commenting</h4> | |
60 | <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hideModals()"></my-global-icon> | |
61 | </div> | |
62 | ||
63 | <div class="modal-body"> | |
64 | <span i18n> | |
65 | You can comment using an account on any ActivityPub-compatible instance (PeerTube/Mastodon/Pleroma account for example). | |
66 | </span> | |
67 | ||
68 | <my-remote-subscribe [interact]="true" [uri]="getUri()"></my-remote-subscribe> | |
69 | </div> | |
70 | ||
71 | <div class="modal-footer inputs"> | |
72 | <input | |
73 | type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button" | |
74 | (click)="hideModals()" (key.enter)="hideModals()" | |
75 | > | |
76 | ||
77 | <my-login-link i18n-label label="Login to comment" className="peertube-button-link orange-button"></my-login-link> | |
78 | </div> | |
79 | </ng-template> | |
80 | ||
81 | <ng-template #emojiModal> | |
82 | <div class="modal-header"> | |
83 | <h4 class="modal-title" id="modal-basic-title" i18n>Markdown Emoji List</h4> | |
84 | <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hideModals()"></my-global-icon> | |
85 | </div> | |
86 | <div class="modal-body"> | |
87 | <div class="emoji-flex"> | |
88 | <div class="emoji-flex-item" *ngFor="let emojiMarkup of getEmojiMarkupList()"> | |
89 | {{ emojiMarkup.emoji }} <code>:{{ emojiMarkup.name }}:</code> | |
90 | </div> | |
91 | </div> | |
92 | </div> | |
93 | </ng-template> |