Foundry376/Mailspring
1
1
Fork 0
mirror of https://github.com/Foundry376/Mailspring.git synced 2025-09-12 07:34:52 +08:00
Code Issues Projects Releases Packages Wiki Activity

🎨(composer-emojis): Remove pointer and adjust styling

Browse source 
Summary: The floating toolbar now takes an optional boolean to decide whether it shows the pointer.

Test Plan: Tested locally.

Reviewers: evan

Reviewed By: evan

Differential Revision: https://phab.nylas.com/D2628
This commit is contained in:
Jackie Luo 2016-02-24 11:25:31 -08:00
parent ab181305b3
commit 4459fad47b
3 changed files with 18 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
internal_packages/composer-emojis/lib/emojis-composer-extension.jsx
View file

@ -58,6 +58,7 @@ class EmojisComposerExtension extends ContenteditableExtension {
locationRefNode: locationRefNode, locationRefNode: locationRefNode,
width: EmojisComposerExtension._emojiPickerWidth(emojiOptions), width: EmojisComposerExtension._emojiPickerWidth(emojiOptions),
height: EmojisComposerExtension._emojiPickerHeight(emojiOptions), height: EmojisComposerExtension._emojiPickerHeight(emojiOptions),
hidePointer: true,
} }
} }
} }
@ -171,7 +172,7 @@ class EmojisComposerExtension extends ContenteditableExtension {
} }
} }
const WIDTH_PER_CHAR = 8; const WIDTH_PER_CHAR = 8;
return (maxLength + 6) * WIDTH_PER_CHAR; return (maxLength + 8) * WIDTH_PER_CHAR;
} }
static _emojiPickerHeight(emojiOptions) { static _emojiPickerHeight(emojiOptions) {

18
src/components/contenteditable/floating-toolbar.cjsx
View file

@ -57,6 +57,7 @@ class FloatingToolbar extends React.Component
toolbarComponent: null toolbarComponent: null
toolbarLocationRef: null toolbarLocationRef: null
toolbarComponentProps: {} toolbarComponentProps: {}
hidePointer: false
@innerProps = FloatingToolbar.defaultInnerProps @innerProps = FloatingToolbar.defaultInnerProps
shouldComponentUpdate: (nextProps, nextState) -> shouldComponentUpdate: (nextProps, nextState) ->
@ -95,8 +96,8 @@ class FloatingToolbar extends React.Component
<div ref="floatingToolbar" <div ref="floatingToolbar"
className={@_toolbarClasses()} className={@_toolbarClasses()}
style={@_toolbarStyles()}> style={@_toolbarStyles()}>
<div className="toolbar-pointer"
style={@_toolbarPointerStyles()}></div> {@_renderPointer()}
<ToolbarComponent {...@state.toolbarComponentProps} /> <ToolbarComponent {...@state.toolbarComponentProps} />
</div> </div>
</div> </div>
@ -116,6 +117,7 @@ class FloatingToolbar extends React.Component
toolbarWidth = 0 toolbarWidth = 0
toolbarHeight = 0 toolbarHeight = 0
toolbarLocationRef = null toolbarLocationRef = null
hidePointer = false
toolbarComponentProps = {} toolbarComponentProps = {}
for extension in props.extensions for extension in props.extensions
@ -127,13 +129,15 @@ class FloatingToolbar extends React.Component
toolbarLocationRef = params.locationRefNode toolbarLocationRef = params.locationRefNode
toolbarWidth = params.width toolbarWidth = params.width
toolbarHeight = params.height toolbarHeight = params.height
if params.hidePointer
hidePointer = params.hidePointer
catch error catch error
NylasEnv.reportError(error) NylasEnv.reportError(error)
if toolbarComponent and not toolbarLocationRef if toolbarComponent and not toolbarLocationRef
throw new Error("You must provide a locationRefNode for #{toolbarComponent.displayName}. It must be either a DOM Element or a Range.") throw new Error("You must provide a locationRefNode for #{toolbarComponent.displayName}. It must be either a DOM Element or a Range.")
return {toolbarComponent, toolbarComponentProps, toolbarLocationRef, toolbarWidth, toolbarHeight} return {toolbarComponent, toolbarComponentProps, toolbarLocationRef, toolbarWidth, toolbarHeight, hidePointer}
@CONTENT_PADDING: 15 @CONTENT_PADDING: 15
@ -158,9 +162,13 @@ class FloatingToolbar extends React.Component
calcLeft = Math.min(Math.max(calcLeft, FloatingToolbar.CONTENT_PADDING+BORDER_RADIUS_PADDING), editArea.width - BORDER_RADIUS_PADDING) calcLeft = Math.min(Math.max(calcLeft, FloatingToolbar.CONTENT_PADDING+BORDER_RADIUS_PADDING), editArea.width - BORDER_RADIUS_PADDING)
calcTop = referenceRect.top - editArea.top - toolbarHeight - 14 calcTop = referenceRect.top - editArea.top - toolbarHeight - 14
if @state.hidePointer
calcTop += 10
toolbarPos = "above" toolbarPos = "above"
if calcTop < TOP_PADDING if calcTop < TOP_PADDING
calcTop = referenceRect.top - editArea.top + referenceRect.height + TOP_PADDING + 4 calcTop = referenceRect.top - editArea.top + referenceRect.height + TOP_PADDING + 4
if @state.hidePointer
calcTop -= 10
toolbarPos = "below" toolbarPos = "below"
maxWidth = editArea.width - FloatingToolbar.CONTENT_PADDING * 2 maxWidth = editArea.width - FloatingToolbar.CONTENT_PADDING * 2
@ -206,4 +214,8 @@ class FloatingToolbar extends React.Component
left: left left: left
return styles return styles
_renderPointer: =>
unless @state.hidePointer
return <div className="toolbar-pointer" style={@_toolbarPointerStyles()}></div>
module.exports = FloatingToolbar module.exports = FloatingToolbar

2
static/components/contenteditable.less
View file

@ -29,7 +29,7 @@
background: #fff; background: #fff;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), inset 0 0 1px rgba(0,0,0,0.5); box-shadow: 0 10px 20px rgba(0,0,0,0.19), inset 0 0 1px rgba(0,0,0,0.5);
border-radius: @border-radius-base; border-radius: @border-radius-large;
color: @text-color; color: @text-color;
transition-duration: .15s; transition-duration: .15s;