All files / app/component/kanban/kanban-card kanban-card.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
101
2x
2x
 
 
1x
 
 
1x
 
 
2x
 
 
1x
 
2x
 
 
 
 
 
 
 
2x
 
 
1x
 
2x
 
 
1x
 
2x
 
 
 
 
 
1x
 
2x
 
 
 
1x
 
1x
1x
2x
 
 
 
 
 
2x
 
2x
 
 
 
2x
 
 
2x
 
 
 
 
 
1x
 
1x
 
 
 
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
 
 
 
1x
 
 
 
 
 
1x
 
@if (!ref.modified) {
  @if (progress !== undefined) {
    <progress class="upload-progress" max="100" [value]="progress"></progress>
  } @else {
    <app-loading></app-loading>
  }
}
<div class="kanban-card-container">
  <div class="badges">
    <!-- TODO: Check if local version is mostly identical -->
    @if (remote) {
      <a class="badge"
         (click)="copy()"
         i18n-title title="Copy remote ref">📥️</a>
    }
    @if (badgeExts$ | async; as xs) {
      @for (x of xs; track x.tag) {
        <a class="badge filter-toggle"
           [class.filtering]="bookmarks.filters.includes($any('query/' + x.tag))"
           (click)="bookmarks.toggleQuery(store.hotkey ? '!(' + x.tag + ')' : x.tag)"
           [title]="x.name && x.tag">{{ firstWord(x.name) || '#' + x.tag }}</a>
      }
    }
    @if (dependents) {
      <a class="badge"
         (click)="bookmarks.toggleSources(ref.url)"
         i18n-title title="{{ dependents }} Dependents">⤴️</a>
    }
    @if (dependencies) {
      <a class="badge"
         (click)="bookmarks.toggleResponses(ref.url)"
         i18n-title title="{{ dependencies }} Dependencies">⤵️</a>
    }
    @if (threads) {
      <a class="badge"
         (focus)="store.view.setLastSelected(ref)"
         (pointerdown)="store.view.setLastSelected(ref)"
         [routerLink]="['/ref', thread, 'thread']"
         (click)="saveRef()"
         i18n-title title="Thread ({{ threads }} replies)">🧵️</a>
    }
    @if (comments) {
      <a class="badge"
         [routerLink]="['/ref', ref.url, 'comments']"
         (click)="saveRef()"
         i18n-title title="{{ comments }} Comments">💬️</a>
    }
  </div>
  <div class="row">
    @if (thumbnail) {
      <div class="thumbnail"
           [style.background-image]="[repostRef, ref] | thumbnail | async | cssUrl"
           [style.background-color]="thumbnailColor"
           [style.border-radius]="thumbnailRadius">{{ thumbnailEmoji }}</div>
    }
    <a class="card-title grow" [routerLink]="['/ref', ref.url]" (click)="saveRef()">{{ title }}</a>
  </div>
  @if (chess) {
    <app-chess [white]="chessWhite"
               [ref]="ref"></app-chess>
  }
  @if (todo) {
    <app-todo [ref]="ref"></app-todo>
  }
  @if (currentText) {
    <app-md [origin]="ref.origin || ''"
            [plugins]="ref.tags || []"
            [text]="currentText"></app-md>
  }
 
  <ng-template #cardMenu>
    <div class="context-menu" (click)="$event.stopPropagation()">
      <span i18n>Toggle Badges</span>
      @if (allBadges$ | async; as xs) {
        @for (x of xs; track x.tag) {
          <div (contextmenu)="$event.preventDefault()"
               (pointerdown)="autoClose = false"
               (pointerup)="toggleBadge(x.tag, $event)">
            <input [id]="x.tag"
                   type="checkbox"
                   [checked]="ref.tags?.includes(x.tag)">
            <label [for]="x.tag"
                   [title]="x.name && x.tag" i18n>{{ x.name || '#' + x.tag }}</label>
          </div>
        }
      } @else {
        @for (b of ext?.config?.badges || []; track b) {
          <div (contextmenu)="$event.preventDefault()"
               (pointerdown)="autoClose = false"
               (pointerup)="toggleBadge(b, $event)">
            <input [id]="b"
                   type="checkbox"
                   [checked]="ref.tags?.includes(b)">
            <label [for]="b" i18n>{{ b }}</label>
          </div>
        }
      }
    </div>
  </ng-template>
</div>