From e2fa53f45de3ec4c38e143c7129d2d83fa99226a Mon Sep 17 00:00:00 2001 From: Evan Morikawa Date: Wed, 17 Jun 2015 16:03:50 -0700 Subject: [PATCH] feat(composer): new composer and button styles Summary: initial styling of image attachments more styles for composer overflow style composer toolbar toolbar styling Fixes to inline composer Test Plan: edgehill --test Reviewers: bengotow Reviewed By: bengotow Differential Revision: https://phab.nylas.com/D1647 --- .../attachments/lib/attachment-component.cjsx | 16 ++++-- .../lib/image-attachment-component.cjsx | 14 ++++- .../attachments/stylesheets/attachments.less | 53 +++++++++++++++--- .../composer/lib/composer-view.cjsx | 18 ++++-- .../composer/lib/image-file-upload.cjsx | 8 ++- internal_packages/composer/lib/main.cjsx | 5 +- .../composer/stylesheets/composer.less | 52 ++++++++--------- .../lib/template-picker.cjsx | 7 ++- src/components/retina-img.cjsx | 1 + src/flux/stores/draft-store.coffee | 9 ++- src/sheet-container.cjsx | 3 +- src/sheet-toolbar.cjsx | 18 ++++++ static/buttons.less | 37 ++++++++++-- .../icon-attachment-download-@1x.png | Bin 0 -> 21798 bytes .../icon-attachment-download-@2x.png | Bin 0 -> 22063 bytes .../attachments/image-cancel-button@2x.png | Bin 0 -> 3260 bytes .../attachments/image-download-button@2x.png | Bin 0 -> 3140 bytes .../composer/icon-composer-attachment@2x.png | Bin 0 -> 660 bytes .../composer/icon-composer-dropdown@2x.png | Bin 0 -> 192 bytes .../images/composer/icon-composer-send@2x.png | Bin 0 -> 15137 bytes .../composer/icon-composer-templates@2x.png | Bin 0 -> 14771 bytes .../composer/icon-composer-trash@2x.png | Bin 0 -> 14851 bytes static/workspace.less | 31 ++++++++++ 23 files changed, 205 insertions(+), 67 deletions(-) create mode 100644 static/images/attachments/icon-attachment-download-@1x.png create mode 100644 static/images/attachments/icon-attachment-download-@2x.png create mode 100644 static/images/attachments/image-cancel-button@2x.png create mode 100644 static/images/attachments/image-download-button@2x.png create mode 100644 static/images/composer/icon-composer-attachment@2x.png create mode 100644 static/images/composer/icon-composer-dropdown@2x.png create mode 100644 static/images/composer/icon-composer-send@2x.png create mode 100644 static/images/composer/icon-composer-templates@2x.png create mode 100644 static/images/composer/icon-composer-trash@2x.png diff --git a/internal_packages/attachments/lib/attachment-component.cjsx b/internal_packages/attachments/lib/attachment-component.cjsx index 9cd4b8b07..3aa8ae747 100644 --- a/internal_packages/attachments/lib/attachment-component.cjsx +++ b/internal_packages/attachments/lib/attachment-component.cjsx @@ -30,7 +30,7 @@ class AttachmentComponent extends React.Component - {@_fileActions()} + {@_renderFileActions()} @@ -44,18 +44,18 @@ class AttachmentComponent extends React.Component - _fileActions: => + _renderFileActions: => if @props.removable
- + {@_renderRemoveIcon()}
else if @_isDownloading() and @_canAbortDownload()
- + {@_renderRemoveIcon()}
else
- + {@_renderDownloadButton()}
_downloadProgressStyle: => @@ -68,6 +68,12 @@ class AttachmentComponent extends React.Component _canAbortDownload: -> true + _renderRemoveIcon: -> + + + _renderDownloadButton: -> + + _onClickView: => Actions.fetchAndOpenFile(@props.file) if @_canClickToView() _onClickDownload: => Actions.fetchAndSaveFile(@props.file) diff --git a/internal_packages/attachments/lib/image-attachment-component.cjsx b/internal_packages/attachments/lib/image-attachment-component.cjsx index 45eb503fa..aaca8b951 100644 --- a/internal_packages/attachments/lib/image-attachment-component.cjsx +++ b/internal_packages/attachments/lib/image-attachment-component.cjsx @@ -1,7 +1,7 @@ path = require 'path' React = require 'react' AttachmentComponent = require './attachment-component' -{Spinner, DraggableImg} = require 'nylas-component-kit' +{RetinaImg, Spinner, DraggableImg} = require 'nylas-component-kit' class ImageAttachmentComponent extends AttachmentComponent @displayName: 'ImageAttachmentComponent' @@ -13,11 +13,13 @@ class ImageAttachmentComponent extends AttachmentComponent - +
{@_fileActions()} - +
+
+
{@props.file.filename}
{@_imgOrLoader()}
@@ -25,6 +27,12 @@ class ImageAttachmentComponent extends AttachmentComponent _canAbortDownload: -> false + _renderRemoveIcon: -> + + + _renderDownloadButton: -> + + _imgOrLoader: -> if @props.download if @props.download.percent <= 5 diff --git a/internal_packages/attachments/stylesheets/attachments.less b/internal_packages/attachments/stylesheets/attachments.less index 0a60cfa9c..102c8e685 100644 --- a/internal_packages/attachments/stylesheets/attachments.less +++ b/internal_packages/attachments/stylesheets/attachments.less @@ -16,6 +16,14 @@ width: calc(~"50% - 7.5px"); border-radius: 4px; + &.non-image-attachment { + width: calc(~"50% - 23px"); + margin-left: 15px; + &:nth-child(even) { + margin-left: 0; + } + } + &.file-upload { border-radius: 4px; padding: 13px @spacing-standard 13px @spacing-standard; @@ -53,6 +61,7 @@ .attachment-file-name { font-weight: @font-weight-medium; } + margin-left: 15px; .attachment-file-and-name { position: relative; z-index: 2; @@ -121,7 +130,7 @@ .image-attachment-file-wrap, .image-file-upload { position: relative; - margin: @spacing-standard 0; + margin: 0 0 8px 0; text-align: center; .attachment-download-progress, @@ -132,30 +141,56 @@ bottom: -2px; } + .attachment-file-actions { + position: relative; + z-index: 2; + } + &:hover { - .attachment-file-actions { + .attachment-file-actions, .attachment-name-bg, .attachment-name { display: block; } } - .attachment-file-actions { + .attachment-file-actions, .attachment-name-bg, .attachment-name { display: none; } .attachment-icon { position: absolute; z-index: 2; - right: 0; - top: 0; - background: @white; + right: -8px; + top: -8px; width: 26px; border-radius: 0 0 0 3px; } - .attachment-preview img { + .attachment-preview { position: relative; z-index: 1; - max-width: 100%; - background: @background-secondary; + + .attachment-name-bg { + position: absolute; + bottom: 0; + top: 0; + z-index: 2; + width: 100%; + background: linear-gradient(to top, rgba(0,0,0,0.75) 0%,rgba(0,0,0,0) 23%) + } + .attachment-name { + color: @white; + left: 15px; + bottom: 13px; + position: absolute; + z-index: 3; + } + + img { + position: relative; + z-index: 1; + max-width: 100%; + background: @background-secondary; + } } + } diff --git a/internal_packages/composer/lib/composer-view.cjsx b/internal_packages/composer/lib/composer-view.cjsx index a89e588b6..567754061 100644 --- a/internal_packages/composer/lib/composer-view.cjsx +++ b/internal_packages/composer/lib/composer-view.cjsx @@ -184,7 +184,9 @@ class ComposerView extends React.Component {@_renderFields()} -
+
+ onClick={@_destroyDraft}> + onClick={@_attachFile}>
- + onClick={@_sendDraft}>Send @@ -386,6 +388,12 @@ class ComposerView extends React.Component draft = @_proxy.draft() Utils.isForwardedMessage(draft) + # This lets us click outside of the `contenteditable`'s `contentBody` + # and still focus on the contenteditable + _onClickComposeBody: (event) => + if event.target is React.findDOMNode(@refs.composeBody) + @focus("contentBody") + _onDraftChanged: => return unless @_proxy draft = @_proxy.draft() diff --git a/internal_packages/composer/lib/image-file-upload.cjsx b/internal_packages/composer/lib/image-file-upload.cjsx index 27209eab8..0a957f926 100644 --- a/internal_packages/composer/lib/image-file-upload.cjsx +++ b/internal_packages/composer/lib/image-file-upload.cjsx @@ -11,13 +11,15 @@ class ImageFileUpload extends FileUpload render: =>
- +
- +
- +
+
+
{@props.uploadData.fileName}
diff --git a/internal_packages/composer/lib/main.cjsx b/internal_packages/composer/lib/main.cjsx index 4a51467ca..d3d787423 100644 --- a/internal_packages/composer/lib/main.cjsx +++ b/internal_packages/composer/lib/main.cjsx @@ -55,9 +55,10 @@ module.exports = ComponentRegistry.register ComposeButton, location: WorkspaceStore.Location.RootSidebar.Toolbar else - atom.getCurrentWindow().setMinimumSize(600, 400) + atom.getCurrentWindow().setMinimumSize(480, 400) WorkspaceStore.defineSheet 'Main', {root: true}, - list: ['Center'] + popout: ['Center'] + ComponentRegistry.register ComposerWithWindowProps, location: WorkspaceStore.Location.Center diff --git a/internal_packages/composer/stylesheets/composer.less b/internal_packages/composer/stylesheets/composer.less index d6cb3b27c..ce4d6beae 100644 --- a/internal_packages/composer/stylesheets/composer.less +++ b/internal_packages/composer/stylesheets/composer.less @@ -34,7 +34,7 @@ margin: 0 auto; flex-direction:row; max-width: @compose-width; - padding: @spacing-standard (@spacing-standard + @spacing-standard / 2) @spacing-standard*1.1; + padding: @spacing-standard; > * { margin-left: @spacing-standard / 2; @@ -51,7 +51,7 @@ max-width: @compose-width; margin: 0 auto; margin-top: @spacing-standard; - padding: 0 @spacing-standard; + padding: 0; flex: 1; display: flex; @@ -79,7 +79,7 @@ .composer-participant-actions { position: absolute; z-index: 900; - right: @spacing-double; + right: 23px; .header-action { position: relative; top: 1em; @@ -104,8 +104,8 @@ .compose-subject-wrap { position: relative; z-index: 2; - padding: 5px @spacing-standard 0 0; - margin: 0 @spacing-standard; + padding: 11px @spacing-standard 11px 0; + margin: 0 23px; border-bottom: 1px solid @border-color-divider; flex-shrink:0; @@ -119,8 +119,8 @@ input.compose-field { display: inline-block; width: calc(~"100% - 61px"); - padding: 6px 0 2px 0; - margin: 0 0 5px 5px; + padding: 0; + margin: 0 0 0 5px; min-width: 5em; background-color: transparent; border: none; @@ -139,10 +139,11 @@ cursor: text; overflow: auto; position: relative; + padding: 0 8px; .quoted-text-control { position: absolute; - bottom: -25px; + bottom: 10px; left: 15px; margin: 0; } @@ -152,11 +153,12 @@ line-height: 1.4; min-height: @compose-min-height; padding: @spacing-standard; - padding-top: @spacing-standard; + padding-top: 20px; padding-bottom: 0; margin-bottom: 30px; } .contenteditable-container { + display: flex; width: 100%; position: relative; } @@ -171,7 +173,7 @@ // TODO FIXME DRY From stylesheets/message-list.less .attachments-area { - padding: 0 15px 0 15px; + padding: 0; } .token { @@ -182,25 +184,7 @@ color: @text-color-inverse-very-subtle; } } - // &:hover { - // background: transparent; - // } - // &.selected, - // &.dragging { - // background: transparent; - // color: @text-color; - // - // .action { color: @text-color-subtle; } - // } } - - // .btn.btn-send { - // font-weight: @font-weight-semi-bold; - // color: @accent-primary-dark; - // border-top: 1px solid fade(@accent-primary, 39%); - // border-right: 1px solid fade(@accent-primary, 39%); - // border-left: 1px solid fade(@accent-primary, 39%); - // } } body.is-blurred .composer-inner-wrap .tokenizing-field .token { background: transparent; @@ -223,12 +207,15 @@ body.is-blurred .composer-inner-wrap .tokenizing-field .token { border-top:1px solid @border-color-divider; } + .composer-action-bar-content { + padding: 8px 0.5px; + } + .compose-body { margin-bottom: 0; position: relative; .contenteditable-container { - display: flex; flex: 1; width: 100%; position: relative; @@ -241,6 +228,12 @@ body.is-blurred .composer-inner-wrap .tokenizing-field .token { } } + + .compose-body { + div[contenteditable] { + min-height: @line-height-computed; + } + } } // Overrides for the composer in a message-list @@ -262,6 +255,7 @@ body.is-blurred .composer-inner-wrap .tokenizing-field .token { position: relative; z-index: 2; padding: 5px @spacing-standard 0 @spacing-standard; + margin: 0 8px; flex-shrink: 0; .participant { diff --git a/internal_packages/message-templates/lib/template-picker.cjsx b/internal_packages/message-templates/lib/template-picker.cjsx index 365ac4842..0b1700132 100644 --- a/internal_packages/message-templates/lib/template-picker.cjsx +++ b/internal_packages/message-templates/lib/template-picker.cjsx @@ -22,9 +22,10 @@ class TemplatePicker extends React.Component @unsubscribe() if @unsubscribe render: => - button = headerComponents = [ diff --git a/src/components/retina-img.cjsx b/src/components/retina-img.cjsx index 183c13f14..8edd0d5df 100644 --- a/src/components/retina-img.cjsx +++ b/src/components/retina-img.cjsx @@ -109,6 +109,7 @@ class RetinaImg extends React.Component if @props.mode is Mode.ContentIsMask style.WebkitMaskImage = "url('#{path}')" + style.WebkitMaskRepeat = "no-repeat" style.objectPosition = "10000px" className += " content-mask" else if @props.mode is Mode.ContentDark diff --git a/src/flux/stores/draft-store.coffee b/src/flux/stores/draft-store.coffee index 28e3c8575..34924cbf0 100644 --- a/src/flux/stores/draft-store.coffee +++ b/src/flux/stores/draft-store.coffee @@ -327,8 +327,11 @@ class DraftStore draft: true pristine: true namespaceId: namespace.id + DatabaseStore.persistModel(draft).then => - DatabaseStore.localIdForModel(draft).then(@_onPopoutDraftLocalId) + DatabaseStore.localIdForModel(draft).then (draftLocalId, options={}) => + options.newDraft = true + @_onPopoutDraftLocalId(draftLocalId, options) _onPopoutDraftLocalId: (draftLocalId, options = {}) => return unless NamespaceStore.current() @@ -337,9 +340,11 @@ class DraftStore if @_draftSessions[draftLocalId] save = @_draftSessions[draftLocalId].changes.commit() + title = if options.newDraft then "New Message" else "Message" + save.then => atom.newWindow - title: "Message" + title: title windowType: "composer" windowProps: _.extend(options, {draftLocalId}) diff --git a/src/sheet-container.cjsx b/src/sheet-container.cjsx index 1b200a25c..911ff8d55 100644 --- a/src/sheet-container.cjsx +++ b/src/sheet-container.cjsx @@ -34,7 +34,7 @@ class SheetContainer extends React.Component sheetElements = @_sheetElements() - + {@_toolbarContainerElement()}
@@ -96,6 +96,7 @@ class SheetContainer extends React.Component _getStateFromStores: => stack: WorkspaceStore.sheetStack() + mode: WorkspaceStore.layoutMode() module.exports = SheetContainer diff --git a/src/sheet-toolbar.cjsx b/src/sheet-toolbar.cjsx index f385f8450..2ba647f21 100644 --- a/src/sheet-toolbar.cjsx +++ b/src/sheet-toolbar.cjsx @@ -17,6 +17,21 @@ class ToolbarSpacer extends React.Component render: =>
+class WindowTitle extends React.Component + @displayName: "WindowTitle" + + constructor: (@props) -> + @state = atom.getLoadSettings() + + componentDidMount: -> + @unlisten = atom.onWindowPropsReceived (windowProps) => + @setState atom.getLoadSettings() + + componentWillUnmount: -> @unlisten() + + render: -> +
{@state.title}
+ class ToolbarBack extends React.Component @displayName: 'ToolbarBack' render: => @@ -154,6 +169,9 @@ class Toolbar extends React.Component entries = ComponentRegistry.findComponentsMatching({location: loc.Toolbar.Right, mode: state.mode}) state.columns[state.columns.length - 1]?.push(entries...) + if state.mode is "popout" + state.columns[0]?.push(WindowTitle) + state module.exports = Toolbar diff --git a/static/buttons.less b/static/buttons.less index 683e49d4f..4216482b3 100644 --- a/static/buttons.less +++ b/static/buttons.less @@ -10,11 +10,12 @@ button, html input[type="button"] { .btn { padding: 0.33em 1em; - border:1px solid rgba(0,0,0,0.18); + border:1px solid rgba(0,0,0,0.15); border-radius: @border-radius-base; - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.10); + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); cursor: default; display:inline-block; + background: linear-gradient(to top, rgba(241,241,241,0.75) 0%, rgba(253,253,253,0.75) 100%); height: auto; line-height: 1; @@ -55,12 +56,27 @@ button, html input[type="button"] { } &.btn-emphasis { - background-image: -webkit-gradient(linear, left top, left bottom, from(lighten(@btn-emphasis-bg-color,10%)), to(@btn-emphasis-bg-color)); - border:1px solid darken(@btn-emphasis-bg-color, 5%); + position: relative; color: @btn-emphasis-text-color; font-weight: @font-weight-medium; img.content-mask { background-color:@btn-emphasis-text-color; } + + background: linear-gradient(to bottom, #6bb1f9 0%, #0a80ff 100%); + + border: 0; + &:before { + content: ' '; + width: calc(~"100% + 2px"); + height: calc(~"100% + 2px"); + border-radius: 5px; + padding: 0; + top: -1px; + left: -1px; + position: absolute; + z-index: -1; + background: linear-gradient(to bottom, #4ca2f9 0%, #015cff 100%); + } } &.btn-emphasis:active { @@ -68,6 +84,16 @@ button, html input[type="button"] { box-shadow: 0 1px 1px rgba(0, 0, 0, 0.21); } + &.btn-text { + font-size: 13px; + padding: 2px 14px 2px 7px; + .text { + position: relative; + top: 1px; + margin-left: 6px; + } + } + &.btn-danger, .btn-destructive { color: @btn-danger-text-color; background: @btn-danger-bg-color; @@ -76,7 +102,8 @@ button, html input[type="button"] { } .btn-toolbar { - min-height:34px; + min-height: 24px; + padding: 2px 13px; } .btn-gradient { diff --git a/static/images/attachments/icon-attachment-download-@1x.png b/static/images/attachments/icon-attachment-download-@1x.png new file mode 100644 index 0000000000000000000000000000000000000000..e93c4793f9fefc5ab1484b2db1cfad66c5d27cc6 GIT binary patch literal 21798 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 F|3B`)gOLCL literal 0 HcmV?d00001 diff --git a/static/images/attachments/image-cancel-button@2x.png b/static/images/attachments/image-cancel-button@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..1945de8a48e08b86e470aee785b59a6209203177 GIT binary patch literal 3260 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 literal 0 HcmV?d00001 diff --git a/static/images/composer/icon-composer-send@2x.png b/static/images/composer/icon-composer-send@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..e89f9c897c42aa528f820fe092261eeb470a392c GIT binary patch literal 15137 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 literal 0 HcmV?d00001 diff --git a/static/workspace.less b/static/workspace.less index cc8df69f3..b0a021bd7 100644 --- a/static/workspace.less +++ b/static/workspace.less @@ -124,6 +124,22 @@ body.is-blurred { .sheet-toolbar-container { background: @toolbar-background-color; + + &.mode-popout { + background: transparent; + } +} + +.layout-mode-popout { + .sheet-toolbar { + background: @background-primary; + height: 35px; + min-height: 35px; + max-height: 35px; + } + .toolbar-window-controls { + margin-top: 7px; + } } .sheet-toolbar { @@ -149,6 +165,20 @@ body.is-blurred { .item-spacer { -webkit-app-region: drag; } + + .item-container { + .window-title { + flex: 2; + text-align: center; + margin-top: 6px; + margin-left: -80px; /* width of ToolbarWindowControls */ + -webkit-app-region: drag; + &:hover { + cursor: default; + } + } + } + .item-back { order:-999; padding-top: 5px; @@ -265,3 +295,4 @@ body.platform-win32 { cursor:ew-resize; } } +