diff --git a/internal_packages/tooltip/lib/main.cjsx b/internal_packages/tooltip/lib/main.cjsx deleted file mode 100644 index 78656842b..000000000 --- a/internal_packages/tooltip/lib/main.cjsx +++ /dev/null @@ -1,32 +0,0 @@ -_ = require 'underscore' -React = require "react" -Tooltip = require "./tooltip" -{ComponentRegistry} = require("nylas-exports") - -module.exports = - item: null # The DOM item the main React component renders into - - activate: (@state={}) -> - @item = document.createElement("div") - @item.setAttribute("id", "tooltip-container") - @item.setAttribute("class", "tooltip-container") - @tooltip = React.render(React.createElement(Tooltip), @item) - document.querySelector(NylasEnv.workspaceViewParentSelector).appendChild(@item) - - @mouseDownListener = _.bind(@tooltip.onMouseDown, @tooltip) - @mouseOverListener = _.bind(@tooltip.onMouseOver, @tooltip) - @mouseOutListener = _.bind(@tooltip.onMouseOut, @tooltip) - - window.addEventListener("mousedown", @mouseDownListener) - window.addEventListener("mouseover", @mouseOverListener) - window.addEventListener("mouseout", @mouseOutListener) - - deactivate: -> - React.unmountComponentAtNode(@item) - document.querySelector(NylasEnv.workspaceViewParentSelector).removeChild(@item) - - window.removeEventListener("mousedown", @mouseDownListener) - window.removeEventListener("mouseover", @mouseOverListener) - window.removeEventListener("mouseout", @mouseOutListener) - - serialize: -> @state diff --git a/internal_packages/tooltip/lib/tooltip.cjsx b/internal_packages/tooltip/lib/tooltip.cjsx deleted file mode 100644 index 80f2c57bf..000000000 --- a/internal_packages/tooltip/lib/tooltip.cjsx +++ /dev/null @@ -1,179 +0,0 @@ -_ = require 'underscore' -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. - -Activate by adding a `data-tooltip="Label"` to any element - -It's a global-level singleton -### - -class Tooltip extends React.Component - @displayName: "Tooltip" - - constructor: (@props) -> - @state = - top: 0 - pos: "below" - left: 0 - width: 0 - pointerLeft: 0 - display: false - content: "" - - componentWillMount: => - @CONTENT_PADDING = 15 - @DEFAULT_DELAY = 2000 - @KEEP_DELAY = 300 - @_showDelay = @DEFAULT_DELAY - @_showTimeout = null - @_showDelayTimeout = null - - componentWillUnmount: => - clearTimeout @_showTimeout - clearTimeout @_showDelayTimeout - @_mutationObserver?.disconnect() - @_enteredTooltip = false - - render: => -
-
{@state.content}
-
-
- - _positionStyles: => - top: @state.top - left: @state.left - width: @state.width - display: if @state.display then "block" else "none" - - # This are public methods so they can be bound to the window event - # listeners. - onMouseOver: (e) => - elWithTooltip = @_elementWithTooltip(e.target) - if elWithTooltip and DOMUtils.nodeIsVisible(elWithTooltip) - if elWithTooltip isnt @_lastTarget - @_onTooltipEnter(elWithTooltip) - else if @state.display - @_hideTooltip() - - onMouseOut: (e) => - if @_elementWithTooltip(e.fromElement) and not @_elementWithTooltip(e.toElement) - @_onTooltipLeave() - - onMouseDown: (e) => - if @state.display - @_hideTooltip() - - _elementWithTooltip: (target) => - while target - break if target?.dataset?.tooltip? - target = target.parentNode - return target - - _onTooltipEnter: (target) => - # https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver - @_mutationObserver?.disconnect() - @_mutationObserver = new MutationObserver(@_onTooltipLeave) - @_mutationObserver.observe(target.parentNode, attributes: true, subtree: true, childList: true) - - @_lastTarget = target - @_enteredTooltip = true - clearTimeout(@_showTimeout) - clearTimeout(@_showDelayTimeout) - @_showTimeout = setTimeout => - @_showTooltip(target) - , @_showDelay - - _onTooltipLeave: => - return unless @_enteredTooltip - @_enteredTooltip = false - clearTimeout(@_showTimeout) - @_hideTooltip() - - @_showDelay = 10 - clearTimeout(@_showDelayTimeout) - @_showDelayTimeout = setTimeout => - @_showDelay = @DEFAULT_DELAY - , @KEEP_DELAY - - _showTooltip: (target) => - return unless DOMUtils.nodeIsVisible(target) - content = target.dataset.tooltip - return if (content ? "").trim().toLowerCase().length is 0 - - guessedWidth = @_guessWidth(content) - dim = target.getBoundingClientRect() - left = dim.left + dim.width / 2 - - TOOLTIP_HEIGHT = 50 - FLIP_THRESHOLD = TOOLTIP_HEIGHT + 30 - top = dim.top + dim.height + 14 - tooltipPos = "below" - if top + FLIP_THRESHOLD > @_windowHeight() - tooltipPos = "above" - top = dim.top - TOOLTIP_HEIGHT - - # If for some reason the element was removed from underneath us, we - # won't know until we get here. The element's dimensions will return - # (0, 14), which we can use to filter out bad displays. This can - # happen if our mutation observer misses the event. In some cases - # (like the multi-select toolbar), the button's great-grandparent is - # removed from the DOM and no mutation observer event is fired. - if left < 20 and top < 20 - @_hideTooltip() - return - - @setState - top: top - pos: tooltipPos - left: @_tooltipLeft(left, guessedWidth) - width: guessedWidth - pointerLeft: @_tooltipPointerLeft(left, guessedWidth) - display: true - content: target.dataset.tooltip - - _guessWidth: (content) => - # roughly 11px per character - guessWidth = content.length * 11 - return Math.max(Math.min(guessWidth, 250), 50) - - _tooltipLeft: (targetLeft, guessedWidth) => - max = @_windowWidth() - guessedWidth - @CONTENT_PADDING - left = Math.min(Math.max(targetLeft - guessedWidth/2, @CONTENT_PADDING), max) - return left - - _tooltipPointerLeft: (targetLeft, guessedWidth) => - POINTER_WIDTH = 6 + 2 #2px of border-radius - max = @_windowWidth() - @CONTENT_PADDING - min = @CONTENT_PADDING - absoluteLeft = Math.max(Math.min(targetLeft, max), min) - relativeLeft = absoluteLeft - @_tooltipLeft(targetLeft, guessedWidth) - - left = Math.max(Math.min(relativeLeft, guessedWidth-POINTER_WIDTH), POINTER_WIDTH) - return left - - _windowWidth: => - document.body.offsetWidth - - _windowHeight: => - document.body.offsetHeight - - _hideTooltip: => - @_mutationObserver?.disconnect() - @_lastTarget = null - @setState - top: 0 - left: 0 - width: 0 - pointerLeft: 0 - display: false - content: "" - - -module.exports = Tooltip diff --git a/internal_packages/tooltip/package.json b/internal_packages/tooltip/package.json deleted file mode 100755 index 2f52a9e78..000000000 --- a/internal_packages/tooltip/package.json +++ /dev/null @@ -1,13 +0,0 @@ -{ - "name": "tooltip", - "version": "0.1.0", - "main": "./lib/main", - "description": "Tooltip", - "license": "GPL-3.0", - "private": true, - "engines": { - "nylas": "*" - }, - "dependencies": { - } -} diff --git a/internal_packages/tooltip/spec/tooltip-spec.cjsx b/internal_packages/tooltip/spec/tooltip-spec.cjsx deleted file mode 100644 index 014e83b94..000000000 --- a/internal_packages/tooltip/spec/tooltip-spec.cjsx +++ /dev/null @@ -1,15 +0,0 @@ -# Testing the Tooltip component -_ = require 'underscore' -React = require 'react/addons' -ReactTestUtils = React.addons.TestUtils - -Tooltip = require '../lib/tooltip' - -describe "Tooltip", -> - beforeEach -> - @tooltip = ReactTestUtils.renderIntoDocument( - - ) - - it "renders to the document", -> - expect(ReactTestUtils.isCompositeComponentWithType @tooltip, Tooltip).toBe true diff --git a/internal_packages/tooltip/stylesheets/tooltip.less b/internal_packages/tooltip/stylesheets/tooltip.less deleted file mode 100644 index cea85fda5..000000000 --- a/internal_packages/tooltip/stylesheets/tooltip.less +++ /dev/null @@ -1,52 +0,0 @@ -@import "ui-variables"; - -#tooltip-container { - position: absolute; - z-index: 999; - top: 0; - left: 0; -} - -@tooltipHeight: 156px / 2; -@wingWidth: 42px / 2; - -.tooltip-wrap { - position: absolute; - display: none; - // Position and display are set by React - - background: #fff; - 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; - color: #313435; - - font-weight: @font-weight-normal; - text-align: center; - text-transform: capitalize; - - .tooltip-content { - padding: 0.5em; - } - - .tooltip-pointer { - position: absolute; - width: 22.5px; - height: 10px; - background: transparent url('images/tooltip/tooltip-bg-pointer@2x.png') no-repeat; - background-size: 22.5px 10.5px; - margin-left: -11.2px; - } - - &.above { - .tooltip-pointer { - transform: rotate(0deg); - bottom: -9px; - } - } - &.below { - .tooltip-pointer { - transform: rotate(180deg); - top: -9px; - } - } -}