All files / app/page/submit/dm dm.component.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
1x
3x
 
3x
1x
1x
1x
 
3x
 
3x
 
1x
3x
 
 
1x
1x
 
1x
3x
 
 
 
 
 
3x
 
1x
1x
1x
 
 
 
3x
 
 
1x
 
 
 
 
1x
3x
 
1x
 
3x
1x
1x
3x
 
3x
 
 
 
 
 
 
 
 
 
 
 
 
3x
1x
 
 
3x
 
1x
 
 
 
 
1x
 
 
 
3x
 
3x
 
 
 
 
1x
1x
3x
 
 
3x
1x
 
3x
 
 
 
 
<ng-container *mobxAutorun>
  <form class="form" [formGroup]="dmForm" (ngSubmit)="submit()"
        [appLimitWidth]="limitWidth" [limitSibling]="true">
    @if (!store.submit.dmPlugin) {
      <label for="to" i18n>To:</label>
      <div class="form-array skip-margin">
        <input class="preview grow"
               type="text"
               [value]="preview"
               [title]="toInput.value"
               [style.display]="preview ? 'block' : 'none'"
               (focus)="clickPreview(toInput)">
        <datalist id="to-list">
          @for (o of autocomplete; track o.value) {
            <option [value]="o.value">{{ o.label }}</option>
          }
        </datalist>
        <input #toInput
               id="to"
               i18n-placeholder placeholder="Myself"
               [formControl]="to"
               type="text"
               inputmode="email"
               autocorrect="off"
               autocapitalize="none"
               list="to-list"
               [class.hidden-without-removing]="preview"
               [appAutofocus]="!store.submit.to.length"
               (input)="search(toInput)"
               (blur)="blur(toInput)"
               (focusin)="edit(toInput)"
               (focus)="edit(toInput)"
               (focusout)="getPreview(toInput.value)">
      </div>
      @if (to.touched && !to.value) {
        <div><!-- Warning --></div>
        <div>
            <div class="warning" i18n> Message to myself</div>
        </div>
      }
    }
 
    <label for="title" i18n>Title:</label>
    <input id="title" type="text" [formControl]="title">
 
    <app-select-plugin #pluginSelect
                       class="shrink"
                       [text]="true"
                       i18n-title title="Add Plugin"
                       (pluginChange)="bookmarks.toggleTag($event); pluginSelect.plugin = ''"></app-select-plugin>
    <app-form-plugins id="plugins"[group]="dmForm"></app-form-plugins>
 
    @if (customEditor) {
      <span><!-- Editor --></span>
      <div #fill class="fill-editor">
        <ngx-monaco-editor #ed
                           [formControl]="comment"
                           [options]="codeOptions"
                           [style.width]="'min(900px, 50vw)'"
                           [style.height]="'min(200px, 90vh)'"
                           [appFillWidth]="fill"
                           appResizeHandle
                           [hitArea]="config.mobile ? 48 : 20"></ngx-monaco-editor>
      </div>
    } @else {
      <label [for]="ed.id" i18n>Message:</label>
      <div #fill class="fill-editor">
        <app-editor #ed
                    class="bubble"
                    [control]="comment"
                    [fillWidth]="fill"
                    (syncEditor)="syncEditor()"
                    [tags]="tags"
                    (syncTags)="setTags($event)"
                    (addSource)="addSource($event)"
                    (uploadCompleted)="completedUploads.push($event)"
                    [autoFocus]="!!store.submit.dmPlugin || !!store.submit.to.length"></app-editor>
      </div>
    }
 
    <app-tags #tagsFormComponent [group]="dmForm"></app-tags>
 
    @for (e of serverError; track e) {
      <span><!-- Unexpected Error --></span>
      <div class="error">{{ e }}</div>
    }
 
    <span><!-- Buttons --></span>
    <span class="buttons right">
      @if (submitting || saving) {
        <app-loading [inline]="true"></app-loading>
      }
      @if (admin.getPlugin('plugin/editing')) {
        <button type="button" [disabled]="submitting || saving || submitted || dmForm.pristine" (click)="saveForLater(true)" i18n>Save for later</button>
      }
      <button type="submit" [disabled]="submitting || (submitted && !dmForm.valid)" i18n>Send</button>
    </span>
  </form>
</ng-container>