mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-09-22 16:26:08 +08:00
4fe54c3d1e
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
49 lines
1.5 KiB
CoffeeScript
49 lines
1.5 KiB
CoffeeScript
path = require 'path'
|
|
React = require 'react'
|
|
{RetinaImg, Flexbox} = require 'nylas-component-kit'
|
|
{Utils,
|
|
Actions,
|
|
FileUploadStore} = require 'nylas-exports'
|
|
|
|
class FileUpload extends React.Component
|
|
@displayName: 'FileUpload'
|
|
|
|
render: =>
|
|
<div className={"file-wrap file-upload"}>
|
|
<div className="inner">
|
|
<div className={"progress-bar-wrap state-#{@props.uploadData.state}"}>
|
|
<span className="progress-background"></span>
|
|
<span className="progress-foreground" style={@_uploadProgressStyle()}></span>
|
|
</div>
|
|
|
|
<Flexbox direction="row" style={alignItems: 'center'}>
|
|
<RetinaImg className="file-icon"
|
|
fallback="file-fallback.png"
|
|
name="file-#{@_extension()}.png"/>
|
|
<span className="file-name">
|
|
<span className="uploading">Uploading:</span> {@_basename()}
|
|
</span>
|
|
<div className="file-action-icon" onClick={@_onClickRemove}>
|
|
<RetinaImg name="remove-attachment.png"/>
|
|
</div>
|
|
</Flexbox>
|
|
</div>
|
|
</div>
|
|
|
|
_uploadProgressStyle: =>
|
|
if @props.uploadData.fileSize <= 0
|
|
percent = 0
|
|
else
|
|
percent = Math.min(1, (@props.uploadData.bytesUploaded / @props.uploadData.fileSize)) * 100
|
|
width: "#{percent}%"
|
|
|
|
_onClickRemove: =>
|
|
Actions.abortUpload @props.uploadData
|
|
|
|
_basename: =>
|
|
path.basename(@props.uploadData.filePath)
|
|
|
|
_extension: -> path.extname(@_basename()).split('.').pop()
|
|
|
|
module.exports = FileUpload
|