mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-09-22 00:06:06 +08:00
feat(tooltip): use native tooltip style
This commit is contained in:
parent
4810775924
commit
1fc6dfc38a
|
@ -80,7 +80,7 @@ class ViewOnGithubButton extends React.Component
|
|||
return null unless @state.link
|
||||
<button className="btn btn-toolbar"
|
||||
onClick={@_openLink}
|
||||
data-tooltip={"Visit Thread on GitHub"}>
|
||||
title={"Visit Thread on GitHub"}>
|
||||
<RetinaImg
|
||||
mode={RetinaImg.Mode.ContentIsMask}
|
||||
url="nylas://N1-Message-View-on-Github/assets/github@2x.png" />
|
||||
|
|
|
@ -43,6 +43,7 @@ class AccountSwitcher extends React.Component
|
|||
{@_renderGravatarForAccount(@state.account)}
|
||||
<div style={float: 'right', marginTop: -2}>
|
||||
<RetinaImg className="toggle"
|
||||
title={if @state.showing then "Collapse" else "Manage accounts"}
|
||||
name="account-switcher-dropdown.png"
|
||||
mode={RetinaImg.Mode.ContentPreserve} />
|
||||
</div>
|
||||
|
|
|
@ -70,7 +70,7 @@ class CategoryPicker extends React.Component
|
|||
|
||||
if @state.isPopoverOpen then tooltip = ""
|
||||
|
||||
button = <button className="btn btn-toolbar" data-tooltip={tooltip}>
|
||||
button = <button className="btn btn-toolbar" title={tooltip}>
|
||||
<RetinaImg name={img} mode={RetinaImg.Mode.ContentIsMask}/>
|
||||
</button>
|
||||
|
||||
|
|
|
@ -7,7 +7,7 @@ class ComposeButton extends React.Component
|
|||
|
||||
render: =>
|
||||
<button className="btn btn-toolbar item-compose"
|
||||
data-tooltip="Compose new message"
|
||||
title="Compose new message"
|
||||
onClick={@_onNewCompose}>
|
||||
<RetinaImg name="toolbar-compose.png" mode={RetinaImg.Mode.ContentIsMask}/>
|
||||
</button>
|
||||
|
|
|
@ -425,11 +425,11 @@ class ComposerView extends React.Component
|
|||
exposedProps={draftClientId:@props.draftClientId, threadId: @props.threadId}>
|
||||
|
||||
<button className="btn btn-toolbar btn-trash" style={order: 100}
|
||||
data-tooltip="Delete draft"
|
||||
title="Delete draft"
|
||||
onClick={@_destroyDraft}><RetinaImg name="icon-composer-trash.png" mode={RetinaImg.Mode.ContentIsMask} /></button>
|
||||
|
||||
<button className="btn btn-toolbar btn-attach" style={order: 50}
|
||||
data-tooltip="Attach file"
|
||||
title="Attach file"
|
||||
onClick={@_attachFile}><RetinaImg name="icon-composer-attachment.png" mode={RetinaImg.Mode.ContentIsMask} /></button>
|
||||
|
||||
<div style={order: 0, flex: 1} />
|
||||
|
|
|
@ -88,7 +88,7 @@ class ExpandedParticipants extends React.Component
|
|||
|
||||
{ if @props.mode is "inline"
|
||||
<span className="header-action show-popout"
|
||||
data-tooltip="Popout composer"
|
||||
title="Popout composer"
|
||||
style={paddingLeft: "1.5em"}
|
||||
onClick={@props.onPopoutComposer}>
|
||||
<RetinaImg name="composer-popout.png"
|
||||
|
|
|
@ -99,7 +99,7 @@ class FloatingToolbar extends React.Component
|
|||
buttons.push(
|
||||
<button className="btn btn-extension"
|
||||
onClick={ => @_extensionMutateDom(toolbarItem.mutator)}
|
||||
data-tooltip="#{toolbarItem.tooltip}"><RetinaImg mode={RetinaImg.Mode.ContentIsMask} url="#{toolbarItem.iconUrl}" /></button>)
|
||||
title="#{toolbarItem.tooltip}"><RetinaImg mode={RetinaImg.Mode.ContentIsMask} url="#{toolbarItem.iconUrl}" /></button>)
|
||||
return buttons
|
||||
|
||||
_extensionMutateDom: (mutator) =>
|
||||
|
|
|
@ -21,7 +21,7 @@ class FeedbackButton extends React.Component
|
|||
unsub() for unsub in @_unsubs
|
||||
|
||||
render: =>
|
||||
<div style={position:"absolute",height:0}>
|
||||
<div style={position:"absolute",height:0} title="Help & Feedback">
|
||||
<div className={@_getClassName()} onClick={@_onSendFeedback}>?</div>
|
||||
</div>
|
||||
|
||||
|
|
|
@ -17,6 +17,7 @@ class MessageControls extends React.Component
|
|||
<div className="message-actions-wrap">
|
||||
<ButtonDropdown
|
||||
primaryItem={<RetinaImg name={items[0].image} mode={RetinaImg.Mode.ContentIsMask}/>}
|
||||
primaryTitle={items[0].name}
|
||||
primaryClick={items[0].select}
|
||||
menu={@_dropdownMenu(items[1..-1])}/>
|
||||
<div className="message-actions-ellipsis" onClick={@_onShowActionsMenu}>
|
||||
|
|
|
@ -18,7 +18,7 @@ class ThreadArchiveButton extends React.Component
|
|||
|
||||
<button className="btn btn-toolbar btn-archive"
|
||||
style={order: -107}
|
||||
data-tooltip="Archive"
|
||||
title="Archive"
|
||||
onClick={@_onArchive}>
|
||||
<RetinaImg name="toolbar-archive.png" mode={RetinaImg.Mode.ContentIsMask}/>
|
||||
</button>
|
||||
|
|
|
@ -13,7 +13,7 @@ class StarButton extends React.Component
|
|||
selected = @props.thread? and @props.thread.starred
|
||||
<button className="btn btn-toolbar"
|
||||
style={order: -104}
|
||||
data-tooltip="Star"
|
||||
title={if selected then "Remove star" else "Add star"}
|
||||
onClick={@_onStarToggle}>
|
||||
<RetinaImg name="toolbar-star.png" mode={RetinaImg.Mode.ContentIsMask} selected={selected} />
|
||||
</button>
|
||||
|
|
|
@ -11,7 +11,7 @@ class ThreadToggleUnreadButton extends React.Component
|
|||
|
||||
<button className="btn btn-toolbar"
|
||||
style={order: -105}
|
||||
data-tooltip="Mark as #{fragment}"
|
||||
title="Mark as #{fragment}"
|
||||
onClick={@_onClick}>
|
||||
<RetinaImg name="icon-toolbar-markas#{fragment}@2x.png"
|
||||
mode={RetinaImg.Mode.ContentIsMask} />
|
||||
|
|
|
@ -19,7 +19,7 @@ class ThreadTrashButton extends React.Component
|
|||
|
||||
<button className="btn btn-toolbar"
|
||||
style={order: -106}
|
||||
data-tooltip="Move to Trash"
|
||||
title="Move to Trash"
|
||||
onClick={@_onRemove}>
|
||||
<RetinaImg name="toolbar-trash.png" mode={RetinaImg.Mode.ContentIsMask}/>
|
||||
</button>
|
||||
|
|
|
@ -23,6 +23,7 @@ class ModeToggle extends React.Component
|
|||
render: =>
|
||||
<button className="btn btn-toolbar mode-toggle mode-#{@state.hidden}"
|
||||
style={order:500}
|
||||
title={if @state.hidden then "Show sidebar" else "Hide sidebar"}
|
||||
onClick={@_onToggleMode}>
|
||||
<RetinaImg
|
||||
name="toolbar-icon-toggle-pane.png"
|
||||
|
|
|
@ -13,7 +13,7 @@ class DraftDeleteButton extends React.Component
|
|||
render: ->
|
||||
<button style={order:-100}
|
||||
className="btn btn-toolbar"
|
||||
data-tooltip="Delete"
|
||||
title="Delete"
|
||||
onClick={@_destroySelected}>
|
||||
<RetinaImg name="icon-composer-trash.png" mode={RetinaImg.Mode.ContentIsMask} />
|
||||
</button>
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
_ = require 'underscore'
|
||||
React = require "react/addons"
|
||||
classNames = require 'classnames'
|
||||
ThreadListStore = require './thread-list-store'
|
||||
|
@ -20,7 +21,7 @@ class ThreadBulkArchiveButton extends React.Component
|
|||
|
||||
<button style={order:-107}
|
||||
className="btn btn-toolbar"
|
||||
data-tooltip="Archive"
|
||||
title="Archive"
|
||||
onClick={@_onArchive}>
|
||||
<RetinaImg name="toolbar-archive.png" mode={RetinaImg.Mode.ContentIsMask} />
|
||||
</button>
|
||||
|
@ -44,7 +45,7 @@ class ThreadBulkTrashButton extends React.Component
|
|||
|
||||
<button style={order:-106}
|
||||
className="btn btn-toolbar"
|
||||
data-tooltip="Move to Trash"
|
||||
title="Move to Trash"
|
||||
onClick={@_onRemove}>
|
||||
<RetinaImg name="toolbar-trash.png" mode={RetinaImg.Mode.ContentIsMask} />
|
||||
</button>
|
||||
|
@ -64,9 +65,12 @@ class ThreadBulkStarButton extends React.Component
|
|||
selection: React.PropTypes.object.isRequired
|
||||
|
||||
render: ->
|
||||
noStars = _.every @props.selection.items(), (t) -> _.isMatch(t, {starred: false})
|
||||
title = if noStars then "Star all" else "Remove stars from all"
|
||||
|
||||
<button style={order:-104}
|
||||
className="btn btn-toolbar"
|
||||
data-tooltip="Star"
|
||||
title={title}
|
||||
onClick={@_onStar}>
|
||||
<RetinaImg name="toolbar-star.png" mode={RetinaImg.Mode.ContentIsMask} />
|
||||
</button>
|
||||
|
@ -89,7 +93,7 @@ class ThreadBulkToggleUnreadButton extends React.Component
|
|||
|
||||
<button style={order:-105}
|
||||
className="btn btn-toolbar"
|
||||
data-tooltip="Mark as #{fragment}"
|
||||
title="Mark as #{fragment}"
|
||||
onClick={@_onClick}>
|
||||
<RetinaImg name="icon-toolbar-markas#{fragment}@2x.png"
|
||||
mode={RetinaImg.Mode.ContentIsMask} />
|
||||
|
@ -131,7 +135,7 @@ DownButton = React.createClass
|
|||
mixins: [ThreadNavButtonMixin]
|
||||
|
||||
render: ->
|
||||
<div className={@_classSet()} onClick={@_onClick}>
|
||||
<div className={@_classSet()} onClick={@_onClick} title="Next thread">
|
||||
<RetinaImg name="toolbar-down-arrow.png" mode={RetinaImg.Mode.ContentIsMask} />
|
||||
</div>
|
||||
|
||||
|
@ -154,7 +158,7 @@ UpButton = React.createClass
|
|||
mixins: [ThreadNavButtonMixin]
|
||||
|
||||
render: ->
|
||||
<div className={@_classSet()} onClick={@_onClick}>
|
||||
<div className={@_classSet()} onClick={@_onClick} title="Previous thread">
|
||||
<RetinaImg name="toolbar-up-arrow.png" mode={RetinaImg.Mode.ContentIsMask} />
|
||||
</div>
|
||||
|
||||
|
|
|
@ -43,7 +43,9 @@ class ThreadListIcon extends React.Component
|
|||
true
|
||||
|
||||
render: =>
|
||||
<div className="thread-icon #{@_iconType()}" onClick={@_onToggleStar}></div>
|
||||
<div className="thread-icon #{@_iconType()}"
|
||||
title="Star"
|
||||
onClick={@_onToggleStar}></div>
|
||||
|
||||
_onToggleStar: (event) =>
|
||||
task = new ChangeStarredTask(thread: @props.thread, starred: !@props.thread.starred)
|
||||
|
|
|
@ -16,11 +16,13 @@ class ThreadListQuickActions extends React.Component
|
|||
|
||||
if mailViewFilter?.canArchiveThreads()
|
||||
archive = <div key="archive"
|
||||
title="Archive"
|
||||
className="btn action action-archive"
|
||||
onClick={@_onArchive}></div>
|
||||
|
||||
if mailViewFilter?.canTrashThreads()
|
||||
trash = <div key="remove"
|
||||
title="Trash"
|
||||
className='btn action action-trash'
|
||||
onClick={@_onRemove}></div>
|
||||
|
||||
|
|
|
@ -3,6 +3,8 @@ React = require 'react/addons'
|
|||
{DOMUtils} = require 'nylas-exports'
|
||||
|
||||
###
|
||||
IMPORTANT: This has been deprecated. Use the native `title=` attribute instead.
|
||||
This will ensure native-behavior cross platform.
|
||||
The Tooltip component displays a consistent hovering tooltip for use when
|
||||
extra context information is required.
|
||||
|
||||
|
|
|
@ -20,7 +20,9 @@ class ButtonDropdown extends React.Component
|
|||
|
||||
if @props.primaryClick
|
||||
<div ref="button" onBlur={@_onBlur} tabIndex={999} className={classnames}>
|
||||
<div className="primary-item" onClick={@props.primaryClick}>
|
||||
<div className="primary-item"
|
||||
title={@props.primaryTitle ? ""}
|
||||
onClick={@props.primaryClick}>
|
||||
{@props.primaryItem}
|
||||
</div>
|
||||
<div className="secondary-picker" onClick={@toggleDropdown}>
|
||||
|
@ -32,7 +34,9 @@ class ButtonDropdown extends React.Component
|
|||
</div>
|
||||
else
|
||||
<div ref="button" onBlur={@_onBlur} tabIndex={999} className={classnames}>
|
||||
<div className="only-item" onClick={@toggleDropdown}>
|
||||
<div className="only-item"
|
||||
title={@props.primaryTitle ? ""}
|
||||
onClick={@toggleDropdown}>
|
||||
{@props.primaryItem}
|
||||
<RetinaImg name={"icon-thread-disclosure.png"} style={marginLeft:12} mode={RetinaImg.Mode.ContentIsMask}/>
|
||||
</div>
|
||||
|
|
|
@ -38,7 +38,9 @@ class MailImportantIcon extends React.Component
|
|||
isImportant = _.findWhere(@props.thread.labels, {id: importantId})?
|
||||
|
||||
activeClassname = if isImportant then "active" else ""
|
||||
<div className="mail-important-icon #{activeClassname}" onClick={@_onToggleImportant}></div>
|
||||
<div className="mail-important-icon #{activeClassname}"
|
||||
title={if isImportant then "Mark as unimportant" else "Mark as important"}
|
||||
onClick={@_onToggleImportant}></div>
|
||||
|
||||
_onToggleImportant: (event) =>
|
||||
importantLabel = CategoryStore.getStandardCategory('important')
|
||||
|
|
|
@ -61,7 +61,7 @@ class ToolbarBack extends React.Component
|
|||
else
|
||||
title = "Back"
|
||||
|
||||
<div className="item-back" onClick={@_onClick}>
|
||||
<div className="item-back" onClick={@_onClick} title="Return to #{title}">
|
||||
<RetinaImg name="sheet-back.png" mode={RetinaImg.Mode.ContentIsMask} />
|
||||
<div className="item-back-title">{title}</div>
|
||||
</div>
|
||||
|
|
Loading…
Reference in a new issue