wekan/client/components/cards/attachments.jade

template(name="cardAttachmentsPopup")
  if $gt uploads.length 0
    .attachment-upload {{_ 'uploading'}}
      table
        tr
          th.upload-file-name-descr {{_ 'name'}}
          th.upload-progress-descr {{_ 'progress'}}
          th.upload-remaining-descr {{_ 'remaining_time'}}
          th.upload-speed-descr {{_ 'speed'}}
        each upload in uploads
          tr
            td.upload-file-name-value {{upload.file.name}}
            td.upload-progress-value {{upload.progress.get}}%
            td.upload-remaining-value {{getEstimateTime upload}}
            td.upload-speed-value {{getEstimateSpeed upload}}
  else
    ul.pop-over-list
      li
        input.js-attach-file.hide(type="file" name="file" multiple)
        a.js-computer-upload {{_ 'computer'}}
      li
        a.js-upload-clipboard-image {{_ 'clipboard'}}

template(name="previewClipboardImagePopup")
  p <kbd>Ctrl</kbd>+<kbd>V</kbd> {{_ "paste-or-dragdrop"}}
  img.preview-clipboard-image()
  button.primary.js-upload-pasted-image {{_ 'upload'}}

template(name="attachmentDeletePopup")
  p {{_ "attachment-delete-pop"}}
  button.js-confirm.negate.full(type="submit") {{_ 'delete'}}

template(name="attachmentViewer")
  #viewer-overlay.hidden
    #viewer-top-bar
      span#attachment-name
      a#viewer-close ❌

    #viewer-container
      | ◀️
      #viewer-content
        img#image-viewer.hidden
        video#video-viewer.hidden(controls="true")
        audio#audio-viewer.hidden(controls="true")
        object#pdf-viewer.hidden(type="application/pdf")
          span.pdf-preview-error {{_ 'preview-pdf-not-supported' }}
        object#txt-viewer.hidden(type="text/plain")
      | ▶️

template(name="attachmentGallery")

  .attachment-gallery

    if canModifyCard
      a.attachment-item.add-attachment.js-add-attachment
        | ➕

    each attachments

      .attachment-item(class="{{#if isAttachmentMigrating _id}}migrating{{/if}}")
        .attachment-thumbnail-container.open-preview(data-attachment-id="{{_id}}" data-card-id="{{ meta.cardId }}")
          if link
            if(isImage)
              img.attachment-thumbnail(src="{{link}}" title="{{sanitize name}}")
            else if($eq extension 'svg')
              img.attachment-thumbnail(src="{{link}}" title="{{sanitize name}}" type="image/svg+xml")
            else if($eq extension 'mp3')
              video.attachment-thumbnail(title="{{sanitize name}}")
                source(src="{{link}}" type="audio/mpeg")
            else if($eq extension 'ogg')
              video.attachment-thumbnail(title="{{sanitize name}}")
                source(src="{{link}}" type="video/ogg")
            else if($eq extension 'webm')
              video.attachment-thumbnail(title="{{sanitize name}}")
                source(src="{{link}}" type="video/webm")
            else if($eq extension 'mp4')
              video.attachment-thumbnail(title="{{sanitize name}}")
                source(src="{{link}}" type="video/mp4")
            else
              span.attachment-thumbnail-text= extension

        .attachment-details-container
          .attachment-details
            div
              b
                = name
              span.file-size ({{fileSize size}})
            .attachment-actions
              a.js-download(href="{{link}}?download=true", download="{{name}}")
                | ⬇️(title="{{_ 'download'}}")
              if currentUser.isBoardMember
                unless currentUser.isCommentOnly
                  unless currentUser.isWorker
                    a.js-rename
                      | ✏️(title="{{_ 'rename'}}")
                    a.js-confirm-delete
                      | 🗑️(title="{{_ 'delete'}}")
                    a.js-open-attachment-menu
                      | ☰(data-attachment-link="{{link}}" title="{{_ 'attachmentActionsPopup-title'}}")

        // Migration spinner overlay
        if isAttachmentMigrating _id
          .attachment-migration-overlay
            .migration-spinner
              | ⚙️
            .migration-text {{_ 'migrating-attachment'}}

template(name="attachmentActionsPopup")
  ul.pop-over-list
    li
      if isImage
        a(class="{{#if isCover}}js-remove-cover{{else}}js-add-cover{{/if}}")
          | 📖
          | 🖼️
          if isCover
            | {{_ 'remove-cover'}}
          else
            | {{_ 'add-cover'}}
      if currentUser.isBoardAdmin
        if isImage
          a(class="{{#if isBackgroundImage}}js-remove-background-image{{else}}js-add-background-image{{/if}}")
            | 🖼️
            if isBackgroundImage
              | {{_ 'remove-background-image'}}
            else
              | {{_ 'add-background-image'}}

        if $neq versions.original.storage "fs"
          a.js-move-storage-fs
            | ▶️
            | {{_ 'attachment-move-storage-fs'}}

        if $neq versions.original.storage "gridfs"
          if versions.original.storage
            a.js-move-storage-gridfs
              | ▶️
              | {{_ 'attachment-move-storage-gridfs'}}

        if $neq versions.original.storage "s3"
          if versions.original.storage
            a.js-move-storage-s3
              | ▶️
              | {{_ 'attachment-move-storage-s3'}}

template(name="attachmentRenamePopup")
  input.js-edit-attachment-name(type='text' autofocus value="{{getNameWithoutExtension}}" dir="auto")
  .edit-controls.clearfix
    button.primary.confirm.js-submit-edit-attachment-name(type="submit") {{_ 'save'}}