]>
Commit | Line | Data |
---|---|---|
4635f59d | 1 | <form novalidate [formGroup]="form" (ngSubmit)="formValidated()"> |
cf117aaa | 2 | <div class="avatar-and-textarea"> |
fbdcd4ec | 3 | <my-account-avatar [account]="user?.account" size="25"></my-account-avatar> |
cf117aaa C |
4 | |
5 | <div class="form-group"> | |
ee3bd9db | 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> | |
fd9c3c8d | 11 | </textarea> |
fe88ca69 | 12 | |
c537763a | 13 | <my-help class="markdown-guide" helpType="custom" iconName="markdown" tooltipPlacement="left auto" autoClose="true" i18n-title title="Markdown compatible"> |
3c176894 | 14 | <ng-template ptTemplate="customHtml"> |
fd9c3c8d | 15 | <span i18n>Markdown compatible that supports:</span> |
3c176894 | 16 | |
fd9c3c8d | 17 | <ul> |
18 | <li><span i18n>Auto generated links</span></li> | |
19 | <li><span i18n>Break lines</span></li> | |
20 | <li><span i18n>Lists</span></li> | |
21 | <li> | |
22 | <span i18n>Emphasis</span> | |
23 | <code>**<strong i18n>bold</strong>** _<i i18n>italic</i>_</code> | |
24 | </li> | |
25 | <li> | |
26 | <span i18n>Emoji shortcuts</span> | |
27 | <code>:) <3</code> | |
28 | </li> | |
29 | <li> | |
30 | <span i18n>Emoji markup</span> | |
31 | <code>:smile:</code> | |
ee3bd9db | 32 | <div><a href="" (click)="openEmojiModal($event)" i18n>See complete list</a></div> |
fd9c3c8d | 33 | </li> |
34 | </ul> | |
3c176894 | 35 | </ng-template> |
36 | </my-help> | |
cf117aaa C |
37 | <div *ngIf="formErrors.text" class="form-error"> |
38 | {{ formErrors.text }} | |
39 | </div> | |
4635f59d C |
40 | </div> |
41 | </div> | |
42 | ||
88adad2d | 43 | <div class="comment-buttons"> |
fe88ca69 | 44 | <button *ngIf="isAddButtonDisplayed()" class="peertube-button tertiary-button cancel-button" (click)="cancelCommentReply()" type="button" i18n> |
88adad2d RK |
45 | Cancel |
46 | </button> | |
fe88ca69 C |
47 | |
48 | <button *ngIf="isAddButtonDisplayed()" class="peertube-button orange-button" [ngClass]="{ disabled: !form.valid || addingComment }"> | |
cb54210c | 49 | {{ addingCommentButtonValue }} |
4635f59d C |
50 | </button> |
51 | </div> | |
52 | </form> | |
660d11e9 RK |
53 | |
54 | <ng-template #visitorModal let-modal> | |
55 | <div class="modal-header"> | |
56 | <h4 class="modal-title" id="modal-basic-title" i18n>You are one step away from commenting</h4> | |
ee3bd9db | 57 | <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hideModals()"></my-global-icon> |
660d11e9 | 58 | </div> |
fe88ca69 | 59 | |
28da43cf | 60 | <div class="modal-body"> |
660d11e9 | 61 | <span i18n> |
d43c6b1f | 62 | You can comment using an account on any ActivityPub-compatible instance (PeerTube/Mastodon/Pleroma account for example). |
660d11e9 | 63 | </span> |
d43c6b1f | 64 | |
3ddb1ec5 | 65 | <my-remote-subscribe [interact]="true" [uri]="getUri()"></my-remote-subscribe> |
660d11e9 | 66 | </div> |
fe88ca69 | 67 | |
660d11e9 | 68 | <div class="modal-footer inputs"> |
a6d5ff76 | 69 | <input |
fe88ca69 | 70 | type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button" |
ee3bd9db | 71 | (click)="hideModals()" (key.enter)="hideModals()" |
a6d5ff76 | 72 | > |
54e78847 RK |
73 | |
74 | <input | |
fe88ca69 | 75 | type="submit" i18n-value value="Login to comment" class="peertube-button orange-button" |
54e78847 RK |
76 | (click)="gotoLogin()" |
77 | > | |
660d11e9 RK |
78 | </div> |
79 | </ng-template> | |
ee3bd9db | 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"> | |
f34cc2a4 K |
87 | <div class="emoji-flex"> |
88 | <div class="emoji-flex-item" *ngFor="let emojiMarkup of emojiMarkupList"> | |
89 | {{ emojiMarkup[0] }} <code>:{{ emojiMarkup[1] }}:</code> | |
90 | </div> | |
91 | </div> | |
ee3bd9db | 92 | </div> |
93 | </ng-template> |