fix(SDW): Styling of various controls and buttons. See description

- Message reply dropdown uses new images. Fixes T2355
- New hover actions which are darker. Fixes T2358
- New reply icon in the message footer. Fixes T2359
- Toolbar buttons are the correct height. Fixes T2360
- Thread list selection state changes mail label style
- Removed dead assets
This commit is contained in:
Ben Gotow 2015-07-21 13:52:59 -07:00
parent a84722d38d
commit ffcb609194
26 changed files with 98 additions and 79 deletions

View file

@ -1,7 +1,7 @@
remote = require 'remote'
React = require 'react'
{Actions, NylasAPI, NamespaceStore} = require 'nylas-exports'
{RetinaImg, ButtonDropdown} = require 'nylas-component-kit'
{RetinaImg, ButtonDropdown, Menu} = require 'nylas-component-kit'
class MessageControls extends React.Component
@displayName: "MessageControls"
@ -12,44 +12,38 @@ class MessageControls extends React.Component
constructor: (@props) ->
render: =>
button = []
if @_replyType() is "reply"
button = <ButtonDropdown
primaryItem={<RetinaImg name="reply-footer.png" mode={RetinaImg.Mode.ContentIsMask}/>}
primaryClick={@_onReply}
secondaryItems={@_secondaryMessageActions()}/>
else
button = <ButtonDropdown
primaryItem={<RetinaImg name="reply-all-footer.png" mode={RetinaImg.Mode.ContentIsMask}/>}
primaryClick={@_onReplyAll}
secondaryItems={@_secondaryMessageActions()}/>
<div className="message-actions-wrap">
<div className="message-actions-ellipsis" onClick={@_onShowActionsMenu}>
<RetinaImg name={"message-actions-ellipsis.png"} mode={RetinaImg.Mode.ContentIsMask}/>
</div>
{button}
<ButtonDropdown
primaryItem={<RetinaImg name="ic-message-button-reply.png" mode={RetinaImg.Mode.ContentIsMask}/>}
primaryClick={@_onReply}
menu={@_dropdownMenu()}/>
</div>
_secondaryMessageActions: ->
if @_replyType() is "reply"
return [@_replyAllAction(), @_forwardAction()]
else #if "reply-all"
return [@_replyAction(), @_forwardAction()]
_dropdownMenu: ->
items = [{
name: 'Reply All',
image: 'ic-dropdown-replyall.png'
select: @_onReplyAll
},{
name: 'Forward',
image: 'ic-dropdown-forward.png'
select: @_onForward
}]
_forwardAction: ->
<span onClick={@_onForward}>
<RetinaImg name="icon-dropdown-forward.png" mode={RetinaImg.Mode.ContentIsMask}/>&nbsp;&nbsp;Forward
</span>
_replyAction: ->
<span onClick={@_onReply}>
<RetinaImg name="icon-dropdown-reply.png" mode={RetinaImg.Mode.ContentIsMask}/>&nbsp;&nbsp;Reply
</span>
_replyAllAction: ->
<span onClick={@_onReplyAll}>
<RetinaImg name="icon-dropdown-replyall.png" mode={RetinaImg.Mode.ContentIsMask}/>&nbsp;&nbsp;Reply All
</span>
itemContent = (item) ->
<span>
<RetinaImg name={item.image} mode={RetinaImg.Mode.ContentIsMask}/>
&nbsp;&nbsp;{item.name}
</span>
<Menu items={items}
itemKey={ (item) -> item.name }
itemContent={itemContent}
onSelect={ (item) => item.select() }
/>
_onReply: =>
Actions.composeReply(thread: @props.thread, message: @props.message)
@ -124,18 +118,3 @@ class MessageControls extends React.Component
module.exports = MessageControls
# <InjectedComponentSet className="message-actions"
# inline={true}
# matching={role:"MessageAction"}
# exposedProps={thread:@props.thread, message: @props.message}>
# <button className="btn btn-icon" onClick={@_onReply}>
# <RetinaImg name={"message-reply.png"} mode={RetinaImg.Mode.ContentIsMask}/>
# </button>
# <button className="btn btn-icon" onClick={@_onReplyAll}>
# <RetinaImg name={"message-reply-all.png"} mode={RetinaImg.Mode.ContentIsMask}/>
# </button>
# <button className="btn btn-icon" onClick={@_onForward}>
# <RetinaImg name={"message-forward.png"} mode={RetinaImg.Mode.ContentIsMask}/>
# </button>
# </InjectedComponentSet>

View file

@ -3,7 +3,7 @@
.mode-toggle {
z-index: 1000;
position: relative;
padding-top:5px;
padding-top:4px;
.content-mask {
background-color: @text-color-subtle;
}

View file

@ -25,6 +25,15 @@
.thread-icon, .draft-icon {
-webkit-filter: brightness(600%) grayscale(100%);
}
.mail-label {
// Note - these !important styles override values set by a style tag
// since the color of the label is detemined programatically.
background: none !important;
box-shadow: 0 0.5px 0 @text-color-inverse, 0 -0.5px 0 @text-color-inverse, 0.5px 0 0 @text-color-inverse, -0.5px 0 0 @text-color-inverse !important;
-webkit-filter: brightness(600%) grayscale(100%);
}
}
// STYLES
@ -193,21 +202,21 @@
display:inline-block;
background-size: 100%;
zoom:0.5;
width:48px;
height:48px;
width:42px;
height:42px;
margin:16px;
}
.action:last-child {
margin-right:40px;
}
.action.action-reply {
background: url(../static/images/toolbar/toolbar-reply@2x.png) top left no-repeat;
background: url(../static/images/thread-list-quick-actions/ic-quick-button-reply@2x.png) top left no-repeat;
}
.action.action-forward {
background: url(../static/images/toolbar/toolbar-forward@2x.png) top left no-repeat;
background: url(../static/images/thread-list-quick-actions/ic-quick-button-forward@2x.png) top left no-repeat;
}
.action.action-archive {
background: url(../static/images/toolbar/toolbar-archive@2x.png) top left no-repeat;
background: url(../static/images/thread-list-quick-actions/ic-quick-button-archive@2x.png) top left no-repeat;
}
}
.thread-list .list-item:hover .list-column-HoverActions {

View file

@ -7,23 +7,24 @@ class ButtonDropdown extends React.Component
@propTypes:
primaryItem: React.PropTypes.element
primaryClick: React.PropTypes.func
secondaryItems: React.PropTypes.arrayOf(React.PropTypes.element)
menu: React.PropTypes.element
constructor: (@props) ->
@state = showing: false
render: =>
<div ref="button" onBlur={@_onBlur} tabIndex={999} className="#{@props.className ? ''} button-dropdown" >
classnames = "button-dropdown #{@props.className ? ''}"
classnames += "open" if @state.showing
<div ref="button" onBlur={@_onBlur} tabIndex={999} className={classnames}>
<div className="primary-item" onClick={@props.primaryClick}>
{@props.primaryItem}
</div>
<div className="secondary-picker" onClick={@_toggleDropdown}>
<RetinaImg name={"icon-thread-disclosure.png"} mode={RetinaImg.Mode.ContentIsMask}/>
</div>
<div className="secondary-items" style={display: if @state.showing then "block" else "none"}>
{@props.secondaryItems.map (item) ->
<div key={Utils.generateTempId()} className="secondary-item">{item}</div>
}
<div className="secondary-items">
{@props.menu}
</div>
</div>

View file

@ -3,11 +3,22 @@
.button-dropdown {
position: relative;
display: inline-block;
&.open {
.secondary-picker {
border-bottom-right-radius: 0;
}
.secondary-items {
display:block;
}
}
.primary-item {
.btn();
height: 32px;
border-radius: 4px 0 0 4px;
padding-top: 7px;
vertical-align:top;
}
.secondary-picker {
.btn();
@ -15,6 +26,8 @@
border-radius: 0 4px 4px 0;
border-left: 0;
padding: 7px 8px 3px 8px;
vertical-align:top;
img { vertical-align: baseline; }
}
.secondary-items {
&:hover {
@ -28,26 +41,43 @@
line-height: 14px;
position: absolute;
width: 110px;
right: 0;
right: -1px; // -1, because of the border above
.secondary-item {
padding: 6px 15px;
img {
margin-right:4px;
vertical-align: text-bottom;
display:none;
.menu {
.footer-container,
.header-container {
display:none;
}
.content-container {
background: transparent;
margin-top:0;
}
.item {
padding: 6px 15px;
img {
margin-right:4px;
vertical-align: text-bottom;
}
&.selected {
background-color: inherit;
color:@text-color;
}
}
.item:first-child {
padding-top: 9px;
border-top-left-radius: 4px;
}
.item:last-child {
padding-bottom: 9px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
.item:hover {
background-color: darken(@background-primary, 3%);
color:inherit;
}
}
.secondary-item:first-child {
padding-top: 9px;
border-top-left-radius: 4px;
}
.secondary-item:last-child {
padding-bottom: 9px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
.secondary-item:hover {
background-color: darken(@background-primary, 3%);
}
}
img {

Binary file not shown.

Before

Width:  |  Height:  |  Size: 348 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 894 B

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 921 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 537 B

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 547 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 244 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

View file

@ -202,11 +202,11 @@ body.is-blurred {
}
.btn-toolbar {
margin-top: @spacing-half;
margin-top: @spacing-three-quarters;
margin-left: @spacing-three-quarters;
margin-right: @spacing-three-quarters;
flex-shrink: 0;
height:32px;
height:28px;
}
.btn-toolbar:last-child {
margin-left: 0;