Mailspring/internal_packages/attachments/lib/image-attachment-component.cjsx
Ben Gotow abcf2b7dad feat(attachments): Tons of tiny fixes to attachments, drag-and-drop attachments to other apps
Summary:
consolidate all the "untitled" stuff into a convenience method on the File itself. Previously it'd show "Unnamed Attachment", download as "Untitled" and open as "<file.id>". Now it's consistent everywhere and chooses names based on the contenttype (Event.ics).

Rewrite CSS rules for uploads and attachments to be simpler

- remove container divs and classnames from things that have no CSS
- switch to using Flexbox so it's not necesary to have so many containers
- remove zIndex hacks, apply overflow rules to name div only, so long filenames don't make action button unclickable
- consolidate CSS classnames for uploads/attachments
-

Other style fixes

- cursor "default" instead of text insertion on image attachments
- cursor "default" on action buttons
- image uplaods / attachments with long filenames truncate with ellpsis
- attachments are not indented by an extra 15px in message bodies

Prevent progress bar overflow (was ending above 100%, 100.12315%...)

Update FileDownloadStore so it never creates Download objects when file is downloaded already

- Previously, the download itself decided if it would be a no-op, but this meant the download was around for a split second and you'd see progress indicators flash for a moment when opening/saving an attachment.

Upgrade FileDownloadStore use of promises

Restore Image attachment drag and drop - was broken because the name gradient thing was covering the entire drag region.

Allow file attachments to be drag and dropped to the finder and other applications 😍😍😍

Test Plan: Tests still pass

Reviewers: evan

Reviewed By: evan

Differential Revision: https://phab.nylas.com/D1745
2015-07-15 13:15:05 -07:00

46 lines
1.3 KiB
CoffeeScript

path = require 'path'
React = require 'react'
AttachmentComponent = require './attachment-component'
{RetinaImg, Spinner, DraggableImg} = require 'nylas-component-kit'
class ImageAttachmentComponent extends AttachmentComponent
@displayName: 'ImageAttachmentComponent'
render: =>
<div>
<span className={"progress-bar-wrap state-#{@props.download?.state ? ""}"}>
<span className="progress-background"></span>
<span className="progress-foreground" style={@_downloadProgressStyle()}></span>
</span>
{@_renderFileActions()}
<div className="file-preview" onClick={@_onClickView}>
<div className="file-name-container">
<div className="file-name">{@props.file.displayName()}</div>
</div>
{@_imgOrLoader()}
</div>
</div>
_canAbortDownload: -> false
_renderRemoveIcon: ->
<RetinaImg name="image-cancel-button.png"/>
_renderDownloadButton: ->
<RetinaImg name="image-download-button.png"/>
_imgOrLoader: ->
if @props.download
if @props.download.percent <= 5
<div style={width: "100%", height: "100px"}>
<Spinner visible={true} />
</div>
else
<DraggableImg src={"#{@props.targetPath}?percent=#{@props.download.percent}"} />
else
<DraggableImg src={@props.targetPath} />
module.exports = ImageAttachmentComponent