Sengi-Windows-MacOS-Linux/src/app/components/create-status/create-status.component.html

106 lines
5.7 KiB
HTML

<form class="status-editor" (ngSubmit)="onSubmit()">
<input #mytitle [(ngModel)]="title" type="text" class="form-control form-control-sm status-editor__title"
name="title" autocomplete="off" placeholder="Title, Content Warning (optional)"
title="title, content warning (optional)" dir="auto"
(keydown.escape)="mytitle.blur()" />
<a class="status-editor__emoji" title="Insert Emoji"
#emojiButton href (click)="openEmojiPicker($event)">
<img class="status-editor__emoji--image" src="/assets/emoji/72x72/1f636.png">
</a>
<a class="status-editor__lang" title="Change language" href *ngIf="configuredLanguages && configuredLanguages.length > 1" (click)="onLangContextMenu($event)">
{{ selectedLanguage.iso639 }}
</a>
<textarea #reply [(ngModel)]="status" name="status" class="form-control form-control-sm status-editor__content" (paste)="onPaste($event)"
rows="5" required title="content" placeholder="What's on your mind?"
(keydown.control.enter)="onCtrlEnter()"
(keydown.meta.enter)="onCtrlEnter()"
(keydown.escape)="reply.blur()"
(keydown)="handleKeyDown($event)" (blur)="statusTextEditorLostFocus()" dir="auto">
</textarea>
<div class="status-editor__mention-error" *ngIf="mentionTooFarAwayError">Error: mentions must be placed closer to
the
start in order to use multiposting.</div>
<app-autosuggest class="status-editor__autosuggest" *ngIf="autosuggestData" [pattern]="autosuggestData"
[autoSuggestUserActionsStream]="autoSuggestUserActionsStream"
(suggestionSelectedEvent)="suggestionSelected($event)" (hasSuggestionsEvent)="suggestionsChanged($event)">
</app-autosuggest>
<app-poll-editor *ngIf="instanceSupportsPoll && pollIsActive" [oldPoll]="oldPoll"></app-poll-editor>
<app-status-scheduler class="scheduler" *ngIf="instanceSupportsScheduling && scheduleIsActive"></app-status-scheduler>
<div class="status-editor__footer" #footer>
<button type="submit" title="reply" class="status-editor__footer--send-button" *ngIf="statusReplyingToWrapper">
<span *ngIf="!isSending && !scheduleIsActive && !isEditing">REPLY!</span>
<span *ngIf="!isSending && scheduleIsActive && !isEditing">PLAN!</span>
<span *ngIf="!isSending && isEditing">EDIT!</span>
<app-waiting-animation class="waiting-icon" *ngIf="isSending"></app-waiting-animation>
</button>
<button type="submit" title="post" class="status-editor__footer--send-button" *ngIf="!statusReplyingToWrapper">
<span *ngIf="!isSending && !scheduleIsActive && !isEditing">POST!</span>
<span *ngIf="!isSending && scheduleIsActive && !isEditing">PLAN!</span>
<span *ngIf="!isSending && isEditing">EDIT!</span>
<app-waiting-animation class="waiting-icon" *ngIf="isSending"></app-waiting-animation>
</button>
<div class="status-editor__footer__counter">
<div class="status-editor__footer__counter--posts" title="number of statuses">
{{postCounts - 1}}/{{postCounts}}</div>
<div class="status-editor__footer__counter--count" title="chars left">{{charCountLeft}}</div>
</div>
<a href class="status-editor__footer--link" title="add media" (click)="addMedia()">
<fa-icon [icon]="faPaperclip"></fa-icon>
</a>
<input #fileInput type="file" id="file" style="display: none;" (change)="handleFileInput($event.target.files)">
<a href class="status-editor__footer--link" title="{{ selectedPrivacy }}" (click)="onContextMenu($event)">
<fa-icon [icon]="faGlobeAmericas" *ngIf="selectedPrivacy === 'Public'"></fa-icon>
<fa-icon [icon]="faLockOpen" *ngIf="selectedPrivacy === 'Unlisted'"></fa-icon>
<fa-icon [icon]="faLock" *ngIf="selectedPrivacy === 'Follows-only'"></fa-icon>
<fa-icon [icon]="faEnvelope" *ngIf="selectedPrivacy === 'DM'"></fa-icon>
</a>
<a href *ngIf="instanceSupportsPoll"
class="status-editor__footer--link status-editor__footer--add-poll" title="add poll" (click)="addPoll()">
<fa-icon [icon]="faPollH"></fa-icon>
</a>
<a href *ngIf="instanceSupportsScheduling"
class="status-editor__footer--link" title="schedule" (click)="schedule()">
<fa-icon [icon]="faClock"></fa-icon>
</a>
</div>
<div class="language-warning" *ngIf="!configuredLanguages || configuredLanguages.length === 0">
You haven't set your language(s) yet, please <a href class="language-warning__link" (click)="onNavigateToSettings()">go in the settings</a> to provide it.
</div>
<context-menu #contextMenu>
<ng-template contextMenuItem (execute)="changePrivacy('Public')">
<fa-icon [icon]="faGlobeAmericas" class="context-menu-icon"></fa-icon> Public
</ng-template>
<ng-template contextMenuItem (execute)="changePrivacy('Unlisted')">
<fa-icon [icon]="faLockOpen" class="context-menu-icon"></fa-icon> Unlisted
</ng-template>
<ng-template contextMenuItem (execute)="changePrivacy('Follows-only')">
<fa-icon [icon]="faLock" class="context-menu-icon"></fa-icon> Followers-only
</ng-template>
<ng-template contextMenuItem (execute)="changePrivacy('DM')">
<fa-icon [icon]="faEnvelope" class="context-menu-icon"></fa-icon> Direct
</ng-template>
</context-menu>
<context-menu #langContextMenu>
<ng-template contextMenuItem (execute)="setLanguage(l)" *ngFor="let l of configuredLanguages">
{{ l.name }}
</ng-template>
</context-menu>
<app-media></app-media>
</form>