From c3a30fb24c75f047c66230b93e92d2b1199746e0 Mon Sep 17 00:00:00 2001 From: crisbeto Date: Sat, 29 Oct 2016 14:36:02 +0200 Subject: [PATCH 1/2] fix(panel): allow transform to be animated on an offset panel Previously, if a panel had a position with an offset (e.g. `$mdPanel.newPanelPosition().center()`), the positioning would break any `transform` animations on the panel. This was due to the fact that `mdPanel` uses inline `transform` styles to do the offsetting. These changes introduce a wrapper around the panel (`.md-panel-inner-wrapper`), which will handle all of the positioning, allowing for any animations to be applied to the `.md-panel` itself. Relates to #9641. Fixes #9905. --- src/components/panel/panel.js | 113 +++++++++++++++----------- src/components/panel/panel.scss | 26 +++--- src/components/panel/panel.spec.js | 126 ++++++++++++++++++----------- 3 files changed, 157 insertions(+), 108 deletions(-) diff --git a/src/components/panel/panel.js b/src/components/panel/panel.js index 4b11929b293..71bd87962e4 100644 --- a/src/components/panel/panel.js +++ b/src/components/panel/panel.js @@ -1306,10 +1306,10 @@ MdPanelService.prototype._closeFirstOpenedPanel = function(groupName) { /** - * Wraps the users template in two elements, md-panel-outer-wrapper, which - * covers the entire attachTo element, and md-panel, which contains only the - * template. This allows the panel control over positioning, animations, - * and similar properties. + * Wraps the user's template in three elements: + * - md-panel-outer-wrapper - covers the entire `attachTo` element. + * - md-panel-inner-wrapper - handles the positioning. + * - md-panel - contains the user's content and deals with the animations. * @param {string} origTemplate The original template. * @returns {string} The wrapped template. * @private @@ -1321,26 +1321,32 @@ MdPanelService.prototype._wrapTemplate = function(origTemplate) { // height and width for positioning. return '' + '
' + - '
' + template + '
' + + '
' + + '
' + template + '
' + + '
' + '
'; }; /** - * Wraps a content element in a md-panel-outer wrapper and - * positions it off-screen. Allows for proper control over positoning - * and animations. + * Wraps a content element in a `md-panel-outer-wrapper`, as well as + * a `md-panel-inner-wrapper`, and positions it off-screen. Allows for + * proper control over positoning and animations. * @param {!angular.JQLite} contentElement Element to be wrapped. * @return {!angular.JQLite} Wrapper element. * @private */ MdPanelService.prototype._wrapContentElement = function(contentElement) { - var wrapper = angular.element('
'); + var outerWrapper = angular.element( + '
' + + '
' + + '
' + ); contentElement.addClass('md-panel _md-panel-offscreen'); - wrapper.append(contentElement); + outerWrapper.children().eq(0).append(contentElement); - return wrapper; + return outerWrapper; }; @@ -1407,6 +1413,9 @@ function MdPanelRef(config, $injector) { /** @type {!angular.JQLite|undefined} */ this.panelEl; + /** @type {!angular.JQLite|undefined} */ + this.innerWrapper; + /** * Whether the panel is attached. This is synchronous. When attach is called, * isAttached is set to true. When detach is called, isAttached is set to @@ -1853,6 +1862,11 @@ MdPanelRef.prototype._compile = function() { ); } + // Save a reference to the inner wrapper. + self.innerWrapper = angular.element( + self.panelContainer[0].querySelector('.md-panel-inner-wrapper') + ); + // Save a reference to the cleanup function from the compiler. self._compilerCleanup = compileData.cleanup; @@ -1929,7 +1943,7 @@ MdPanelRef.prototype._addStyles = function() { var self = this; return this._$q(function(resolve) { self.panelContainer.css('z-index', self.config['zIndex']); - self.panelEl.css('z-index', self.config['zIndex'] + 1); + self.innerWrapper.css('z-index', self.config['zIndex'] + 1); var hideAndResolve = function() { // Theme the element and container. @@ -1937,6 +1951,9 @@ MdPanelRef.prototype._addStyles = function() { // Remove offscreen class and add hidden class. self.panelEl.removeClass('_md-panel-offscreen'); + + // Remove left: -9999px and add hidden class. + self.innerWrapper.css('left', ''); self.panelContainer.addClass(MD_PANEL_HIDDEN); resolve(self); @@ -2003,7 +2020,7 @@ MdPanelRef.prototype._updatePosition = function(init) { var positionConfig = this.config['position']; if (positionConfig) { - positionConfig._setPanelPosition(this.panelEl); + positionConfig._setPanelPosition(this.innerWrapper); // Hide the panel now that position is known. if (init) { @@ -2011,19 +2028,19 @@ MdPanelRef.prototype._updatePosition = function(init) { this.panelContainer.addClass(MD_PANEL_HIDDEN); } - this.panelEl.css( + this.innerWrapper.css( MdPanelPosition.absPosition.TOP, positionConfig.getTop() ); - this.panelEl.css( + this.innerWrapper.css( MdPanelPosition.absPosition.BOTTOM, positionConfig.getBottom() ); - this.panelEl.css( + this.innerWrapper.css( MdPanelPosition.absPosition.LEFT, positionConfig.getLeft() ); - this.panelEl.css( + this.innerWrapper.css( MdPanelPosition.absPosition.RIGHT, positionConfig.getRight() ); @@ -2880,24 +2897,24 @@ MdPanelPosition.prototype.getTransform = function() { /** - * Sets the `transform` value for a panel element. - * @param {!angular.JQLite} panelEl + * Sets the `transform` value for an element. + * @param {!angular.JQLite} el * @returns {!angular.JQLite} * @private */ -MdPanelPosition.prototype._setTransform = function(panelEl) { - return panelEl.css(this._$mdConstant.CSS.TRANSFORM, this.getTransform()); +MdPanelPosition.prototype._setTransform = function(el) { + return el.css(this._$mdConstant.CSS.TRANSFORM, this.getTransform()); }; /** * True if the panel is completely on-screen with this positioning; false * otherwise. - * @param {!angular.JQLite} panelEl + * @param {!angular.JQLite} el * @return {boolean} * @private */ -MdPanelPosition.prototype._isOnscreen = function(panelEl) { +MdPanelPosition.prototype._isOnscreen = function(el) { // this works because we always use fixed positioning for the panel, // which is relative to the viewport. var left = parseInt(this.getLeft()); @@ -2905,13 +2922,13 @@ MdPanelPosition.prototype._isOnscreen = function(panelEl) { if (this._translateX.length || this._translateY.length) { var prefixedTransform = this._$mdConstant.CSS.TRANSFORM; - var offsets = getComputedTranslations(panelEl, prefixedTransform); + var offsets = getComputedTranslations(el, prefixedTransform); left += offsets.x; top += offsets.y; } - var right = left + panelEl[0].offsetWidth; - var bottom = top + panelEl[0].offsetHeight; + var right = left + el[0].offsetWidth; + var bottom = top + el[0].offsetHeight; return (left >= 0) && (top >= 0) && @@ -2950,53 +2967,53 @@ MdPanelPosition.prototype._reduceTranslateValues = /** * Sets the panel position based on the created panel element and best x/y * positioning. - * @param {!angular.JQLite} panelEl + * @param {!angular.JQLite} el * @private */ -MdPanelPosition.prototype._setPanelPosition = function(panelEl) { - // Remove the "position adjusted" class in case it has been added before. - panelEl.removeClass('_md-panel-position-adjusted'); +MdPanelPosition.prototype._setPanelPosition = function(el) { + // Remove the class in case it has been added before. + el.removeClass('_md-panel-position-adjusted'); // Only calculate the position if necessary. if (this._absolute) { - this._setTransform(panelEl); + this._setTransform(el); return; } if (this._actualPosition) { - this._calculatePanelPosition(panelEl, this._actualPosition); - this._setTransform(panelEl); - this._constrainToViewport(panelEl); + this._calculatePanelPosition(el, this._actualPosition); + this._setTransform(el); + this._constrainToViewport(el); return; } for (var i = 0; i < this._positions.length; i++) { this._actualPosition = this._positions[i]; - this._calculatePanelPosition(panelEl, this._actualPosition); - this._setTransform(panelEl); + this._calculatePanelPosition(el, this._actualPosition); + this._setTransform(el); - if (this._isOnscreen(panelEl)) { + if (this._isOnscreen(el)) { return; } } - this._constrainToViewport(panelEl); + this._constrainToViewport(el); }; /** * Constrains a panel's position to the viewport. - * @param {!angular.JQLite} panelEl + * @param {!angular.JQLite} el * @private */ -MdPanelPosition.prototype._constrainToViewport = function(panelEl) { +MdPanelPosition.prototype._constrainToViewport = function(el) { var margin = MdPanelPosition.viewportMargin; var initialTop = this._top; var initialLeft = this._left; if (this.getTop()) { var top = parseInt(this.getTop()); - var bottom = panelEl[0].offsetHeight + top; + var bottom = el[0].offsetHeight + top; var viewportHeight = this._$window.innerHeight; if (top < margin) { @@ -3008,7 +3025,7 @@ MdPanelPosition.prototype._constrainToViewport = function(panelEl) { if (this.getLeft()) { var left = parseInt(this.getLeft()); - var right = panelEl[0].offsetWidth + left; + var right = el[0].offsetWidth + left; var viewportWidth = this._$window.innerWidth; if (left < margin) { @@ -3019,7 +3036,7 @@ MdPanelPosition.prototype._constrainToViewport = function(panelEl) { } // Class that can be used to re-style the panel if it was repositioned. - panelEl.toggleClass( + el.toggleClass( '_md-panel-position-adjusted', this._top !== initialTop || this._left !== initialLeft ); @@ -3058,15 +3075,15 @@ MdPanelPosition.prototype._bidi = function(position) { /** * Calculates the panel position based on the created panel element and the * provided positioning. - * @param {!angular.JQLite} panelEl + * @param {!angular.JQLite} el * @param {!{x:string, y:string}} position * @private */ -MdPanelPosition.prototype._calculatePanelPosition = function(panelEl, position) { +MdPanelPosition.prototype._calculatePanelPosition = function(el, position) { - var panelBounds = panelEl[0].getBoundingClientRect(); - var panelWidth = Math.max(panelBounds.width, panelEl[0].clientWidth); - var panelHeight = Math.max(panelBounds.height, panelEl[0].clientHeight); + var panelBounds = el[0].getBoundingClientRect(); + var panelWidth = Math.max(panelBounds.width, el[0].clientWidth); + var panelHeight = Math.max(panelBounds.height, el[0].clientHeight); var targetBounds = this._relativeToEl[0].getBoundingClientRect(); diff --git a/src/components/panel/panel.scss b/src/components/panel/panel.scss index 1dce9f9f4b0..e9be4d91952 100644 --- a/src/components/panel/panel.scss +++ b/src/components/panel/panel.scss @@ -6,21 +6,16 @@ width: 100%; } -._md-panel-hidden { - display: none; +.md-panel-inner-wrapper { + position: fixed; } ._md-panel-offscreen { left: -9999px; } -._md-panel-fullscreen { - border-radius: 0; - left: 0; - min-height: 100%; - min-width: 100%; - position: fixed; - top: 0; +._md-panel-hidden { + display: none; } // Only used when no animations are present. @@ -31,7 +26,7 @@ .md-panel { opacity: 0; - position: fixed; + position: relative; &._md-panel-shown { // Only used when custom animations are present. @@ -57,7 +52,7 @@ &._md-panel-backdrop { height: 100%; - position: absolute; + position: fixed; width: 100%; } @@ -70,3 +65,12 @@ transition: opacity $material-leave-duration $material-leave-timing-function; } } + +._md-panel-fullscreen { + border-radius: 0; + left: 0; + min-height: 100%; + min-width: 100%; + position: fixed; + top: 0; +} diff --git a/src/components/panel/panel.spec.js b/src/components/panel/panel.spec.js index edb7ac2d0ac..0ad6bd23586 100644 --- a/src/components/panel/panel.spec.js +++ b/src/components/panel/panel.spec.js @@ -7,6 +7,8 @@ describe('$mdPanel', function() { var PANEL_WRAPPER_CLASS = 'md-panel-outer-wrapper'; var PANEL_EL = '.md-panel'; var PANEL_EL_CLASS = 'md-panel'; + var INNER_WRAPPER = '.md-panel-inner-wrapper'; + var INNER_WRAPPER_CLASS = 'md-panel-inner-wrapper'; var HIDDEN_CLASS = '_md-panel-hidden'; var FOCUS_TRAPS_CLASS = '._md-panel-focus-trap'; var FULLSCREEN_CLASS = '_md-panel-fullscreen'; @@ -2073,6 +2075,25 @@ describe('$mdPanel', function() { expect(panelRect.left).toBeApproximately(parseInt(left) + offset); }); + + it('should apply offsets to the panel inner wrapper, instead of directly ' + + 'on the panel element', function() { + var position = mdPanelPosition + .absolute() + .withOffsetX('-10px'); + + config['position'] = position; + + openPanel(config); + + var transform = $mdConstant.CSS.TRANSFORM; + var panelEl = document.querySelector(PANEL_EL); + var innerWrapper = document.querySelector(INNER_WRAPPER); + + expect(panelEl.style[transform]).toBeFalsy(); + expect(innerWrapper.style[transform]).toBeTruthy(); + expect(panelEl.parentNode).toBe(innerWrapper); + }); }); describe('should absolutely position the panel at', function() { @@ -2083,7 +2104,7 @@ describe('$mdPanel', function() { openPanel(config); - var panelCss = document.querySelector(PANEL_EL).style; + var panelCss = document.querySelector(INNER_WRAPPER).style; expect(panelCss.top).toEqual(top); }); @@ -2093,7 +2114,7 @@ describe('$mdPanel', function() { openPanel(config); - var panelCss = document.querySelector(PANEL_EL).style; + var panelCss = document.querySelector(INNER_WRAPPER).style; expect(panelCss.top).toEqual('0px'); }); @@ -2103,7 +2124,7 @@ describe('$mdPanel', function() { openPanel(config); - var panelCss = document.querySelector(PANEL_EL).style; + var panelCss = document.querySelector(INNER_WRAPPER).style; expect(panelCss.bottom).toEqual('') expect(panelCss.top).toEqual('0px'); }); @@ -2115,7 +2136,7 @@ describe('$mdPanel', function() { openPanel(config); - var panelCss = document.querySelector(PANEL_EL).style; + var panelCss = document.querySelector(INNER_WRAPPER).style; expect(panelCss.bottom).toEqual(bottom); }); @@ -2125,7 +2146,7 @@ describe('$mdPanel', function() { openPanel(config); - var panelCss = document.querySelector(PANEL_EL).style; + var panelCss = document.querySelector(INNER_WRAPPER).style; expect(panelCss.bottom).toEqual('0px'); }); @@ -2135,7 +2156,7 @@ describe('$mdPanel', function() { openPanel(config); - var panelCss = document.querySelector(PANEL_EL).style; + var panelCss = document.querySelector(INNER_WRAPPER).style; expect(panelCss.top).toEqual(''); expect(panelCss.bottom).toEqual('0px'); }); @@ -2147,7 +2168,7 @@ describe('$mdPanel', function() { openPanel(config); - var panelCss = document.querySelector(PANEL_EL).style; + var panelCss = document.querySelector(INNER_WRAPPER).style; expect(panelCss.left).toEqual(left); }); @@ -2157,7 +2178,7 @@ describe('$mdPanel', function() { openPanel(config); - var panelCss = document.querySelector(PANEL_EL).style; + var panelCss = document.querySelector(INNER_WRAPPER).style; expect(panelCss.left).toEqual('0px'); }); @@ -2167,7 +2188,7 @@ describe('$mdPanel', function() { openPanel(config); - var panelCss = document.querySelector(PANEL_EL).style; + var panelCss = document.querySelector(INNER_WRAPPER).style; expect(panelCss.right).toEqual(''); expect(panelCss.left).toEqual('0px'); }); @@ -2179,7 +2200,7 @@ describe('$mdPanel', function() { openPanel(config); - var panelCss = document.querySelector(PANEL_EL).style; + var panelCss = document.querySelector(INNER_WRAPPER).style; expect(panelCss.right).toEqual(right); }); @@ -2189,7 +2210,7 @@ describe('$mdPanel', function() { openPanel(config); - var panelCss = document.querySelector(PANEL_EL).style; + var panelCss = document.querySelector(INNER_WRAPPER).style; expect(panelCss.right).toEqual('0px'); }); @@ -2199,7 +2220,7 @@ describe('$mdPanel', function() { openPanel(config); - var panelCss = document.querySelector(PANEL_EL).style; + var panelCss = document.querySelector(INNER_WRAPPER).style; expect(panelCss.left).toEqual(''); expect(panelCss.right).toEqual('0px'); }); @@ -2210,7 +2231,7 @@ describe('$mdPanel', function() { openPanel(config); - var panelCss = document.querySelector(PANEL_EL).style; + var panelCss = document.querySelector(INNER_WRAPPER).style; expect(panelCss.left).toEqual(start); }); @@ -2222,7 +2243,7 @@ describe('$mdPanel', function() { openPanel(config); - var panelCss = document.querySelector(PANEL_EL).style; + var panelCss = document.querySelector(INNER_WRAPPER).style; expect(panelCss.right).toEqual(start); }); @@ -2232,7 +2253,7 @@ describe('$mdPanel', function() { openPanel(config); - var panelCss = document.querySelector(PANEL_EL).style; + var panelCss = document.querySelector(INNER_WRAPPER).style; expect(panelCss.right).toEqual(end); }); @@ -2244,7 +2265,7 @@ describe('$mdPanel', function() { openPanel(config); - var panelCss = document.querySelector(PANEL_EL).style; + var panelCss = document.querySelector(INNER_WRAPPER).style; expect(panelCss.left).toEqual(end); }); @@ -2256,7 +2277,7 @@ describe('$mdPanel', function() { var middleOfPage = 0.5 * window.innerWidth; - var panelRect = document.querySelector(PANEL_EL) + var panelRect = document.querySelector(INNER_WRAPPER) .getBoundingClientRect(); var middleOfPanel = panelRect.left + 0.5 * panelRect.width; @@ -2271,7 +2292,7 @@ describe('$mdPanel', function() { var middleOfPage = 0.5 * window.innerHeight; - var panelRect = document.querySelector(PANEL_EL) + var panelRect = document.querySelector(INNER_WRAPPER) .getBoundingClientRect(); var middleOfPanel = panelRect.top + 0.5 * panelRect.height; @@ -2287,7 +2308,7 @@ describe('$mdPanel', function() { var middleOfPageX = 0.5 * window.innerWidth; var middleOfPageY = 0.5 * window.innerHeight; - var panelRect = document.querySelector(PANEL_EL) + var panelRect = document.querySelector(INNER_WRAPPER) .getBoundingClientRect(); var middleOfPanelX = panelRect.left + 0.5 * panelRect.width; var middleOfPanelY = panelRect.top + 0.5 * panelRect.height; @@ -2323,7 +2344,7 @@ describe('$mdPanel', function() { openPanel(config); - var panelCss = document.querySelector(PANEL_EL).style; + var panelCss = document.querySelector(INNER_WRAPPER).style; expect(panelCss.left).toBeApproximately(myButtonRect.left); expect(panelCss.top).toBeApproximately(myButtonRect.top); }); @@ -2337,7 +2358,7 @@ describe('$mdPanel', function() { openPanel(config); - var panelCss = document.querySelector(PANEL_EL).style; + var panelCss = document.querySelector(INNER_WRAPPER).style; expect(panelCss.left).toBeApproximately(myButtonRect.left); expect(panelCss.top).toBeApproximately(myButtonRect.top); }); @@ -2351,7 +2372,7 @@ describe('$mdPanel', function() { openPanel(config); - var panelCss = document.querySelector(PANEL_EL).style; + var panelCss = document.querySelector(INNER_WRAPPER).style; expect(panelCss.left).toBeApproximately(myButtonRect.left); expect(panelCss.top).toBeApproximately(myButtonRect.top); }); @@ -2377,7 +2398,7 @@ describe('$mdPanel', function() { y: yPosition.ALIGN_TOPS, }); - var panelCss = document.querySelector(PANEL_EL).style; + var panelCss = document.querySelector(INNER_WRAPPER).style; expect(panelCss.left).toBeApproximately(myButtonRect.left); expect(panelCss.top).toBeApproximately(myButtonRect.top); }); @@ -2568,8 +2589,8 @@ describe('$mdPanel', function() { panelRef.open(); flushPanel(); - expect(panelRef.panelEl[0].offsetLeft).toBe(VIEWPORT_MARGIN); - expect(panelRef.panelEl[0]).toHaveClass(ADJUSTED_CLASS); + expect(panelRef.innerWrapper[0].offsetLeft).toBe(VIEWPORT_MARGIN); + expect(panelRef.innerWrapper).toHaveClass(ADJUSTED_CLASS); panelRef.close(); flushPanel(); @@ -2577,8 +2598,8 @@ describe('$mdPanel', function() { panelRef.open(); flushPanel(); - expect(panelRef.panelEl[0].offsetLeft).toBe(VIEWPORT_MARGIN); - expect(panelRef.panelEl[0]).toHaveClass(ADJUSTED_CLASS); + expect(panelRef.innerWrapper[0].offsetLeft).toBe(VIEWPORT_MARGIN); + expect(panelRef.innerWrapper).toHaveClass(ADJUSTED_CLASS); panelRef.destroy(); }); @@ -2593,7 +2614,7 @@ describe('$mdPanel', function() { openPanel(config); - var panelRect = document.querySelector(PANEL_EL) + var panelRect = document.querySelector(INNER_WRAPPER) .getBoundingClientRect(); expect(panelRect.bottom).toBeApproximately(myButtonRect.top); }); @@ -2607,7 +2628,7 @@ describe('$mdPanel', function() { openPanel(config); - var panelRect = document.querySelector(PANEL_EL) + var panelRect = document.querySelector(INNER_WRAPPER) .getBoundingClientRect(); expect(panelRect.top).toBeApproximately(myButtonRect.top); }); @@ -2622,7 +2643,7 @@ describe('$mdPanel', function() { openPanel(config); var middleOfButton = myButtonRect.top + 0.5 * myButtonRect.height; - var panelRect = document.querySelector(PANEL_EL) + var panelRect = document.querySelector(INNER_WRAPPER) .getBoundingClientRect(); var middleOfPanel = panelRect.top + 0.5 * panelRect.height; @@ -2638,7 +2659,7 @@ describe('$mdPanel', function() { openPanel(config); - var panelRect = document.querySelector(PANEL_EL) + var panelRect = document.querySelector(INNER_WRAPPER) .getBoundingClientRect(); expect(panelRect.bottom).toBeApproximately(myButtonRect.bottom); }); @@ -2652,7 +2673,7 @@ describe('$mdPanel', function() { openPanel(config); - var panelRect = document.querySelector(PANEL_EL) + var panelRect = document.querySelector(INNER_WRAPPER) .getBoundingClientRect(); expect(panelRect.top).toBeApproximately(myButtonRect.bottom); }); @@ -2672,7 +2693,7 @@ describe('$mdPanel', function() { openPanel(config); - var panel = document.querySelector(PANEL_EL); + var panel = document.querySelector(INNER_WRAPPER); expect(panel.offsetLeft).toBe(VIEWPORT_MARGIN); expect(panel).toHaveClass(ADJUSTED_CLASS); @@ -2693,7 +2714,7 @@ describe('$mdPanel', function() { openPanel(config); - var panel = document.querySelector(PANEL_EL); + var panel = document.querySelector(INNER_WRAPPER); var panelRect = panel.getBoundingClientRect(); expect(panelRect.left + panelRect.width).toBeLessThan(window.innerWidth); @@ -2711,7 +2732,7 @@ describe('$mdPanel', function() { openPanel(config); - var panelRect = document.querySelector(PANEL_EL) + var panelRect = document.querySelector(INNER_WRAPPER) .getBoundingClientRect(); expect(panelRect.right).toBeApproximately(myButtonRect.left); }); @@ -2725,7 +2746,7 @@ describe('$mdPanel', function() { openPanel(config); - var panelRect = document.querySelector(PANEL_EL) + var panelRect = document.querySelector(INNER_WRAPPER) .getBoundingClientRect(); expect(panelRect.right).toBeApproximately(myButtonRect.right); }); @@ -2740,7 +2761,7 @@ describe('$mdPanel', function() { openPanel(config); var middleOfButton = myButtonRect.left + 0.5 * myButtonRect.width; - var panelRect = document.querySelector(PANEL_EL) + var panelRect = document.querySelector(INNER_WRAPPER) .getBoundingClientRect(); var middleOfPanel = panelRect.left + 0.5 * panelRect.width; @@ -2756,7 +2777,7 @@ describe('$mdPanel', function() { openPanel(config); - var panelRect = document.querySelector(PANEL_EL) + var panelRect = document.querySelector(INNER_WRAPPER) .getBoundingClientRect(); expect(panelRect.left).toBeApproximately(myButtonRect.left); }); @@ -2770,7 +2791,7 @@ describe('$mdPanel', function() { openPanel(config); - var panelRect = document.querySelector(PANEL_EL) + var panelRect = document.querySelector(INNER_WRAPPER) .getBoundingClientRect(); expect(panelRect.left).toBeApproximately(myButtonRect.right); }); @@ -2790,7 +2811,7 @@ describe('$mdPanel', function() { openPanel(config); - var panel = document.querySelector(PANEL_EL); + var panel = document.querySelector(INNER_WRAPPER); expect(panel.offsetTop).toBe(VIEWPORT_MARGIN); expect(panel).toHaveClass(ADJUSTED_CLASS); @@ -2811,7 +2832,7 @@ describe('$mdPanel', function() { openPanel(config); - var panel = document.querySelector(PANEL_EL); + var panel = document.querySelector(INNER_WRAPPER); var panelRect = panel.getBoundingClientRect(); expect(panelRect.top + panelRect.height).toBeLessThan(window.innerHeight); @@ -2832,7 +2853,7 @@ describe('$mdPanel', function() { openPanel(config); - var panelRect = document.querySelector(PANEL_EL) + var panelRect = document.querySelector(INNER_WRAPPER) .getBoundingClientRect(); expect(panelRect.left).toBeApproximately(myButtonRect.right); }); @@ -2846,7 +2867,7 @@ describe('$mdPanel', function() { openPanel(config); - var panelRect = document.querySelector(PANEL_EL) + var panelRect = document.querySelector(INNER_WRAPPER) .getBoundingClientRect(); expect(panelRect.left).toBeApproximately(myButtonRect.left); }); @@ -2860,7 +2881,7 @@ describe('$mdPanel', function() { openPanel(config); - var panelRect = document.querySelector(PANEL_EL) + var panelRect = document.querySelector(INNER_WRAPPER) .getBoundingClientRect(); expect(panelRect.right).toBeApproximately(myButtonRect.right); }); @@ -2874,7 +2895,7 @@ describe('$mdPanel', function() { openPanel(config); - var panelRect = document.querySelector(PANEL_EL) + var panelRect = document.querySelector(INNER_WRAPPER) .getBoundingClientRect(); expect(panelRect.right).toBeApproximately(myButtonRect.left); }); @@ -3350,9 +3371,13 @@ describe('$mdPanel', function() { openPanel(config); expect(panelRef.panelEl.parent()) + .toHaveClass(INNER_WRAPPER_CLASS); + + expect(panelRef.panelEl.parent().parent()) .toHaveClass(PANEL_WRAPPER_CLASS); - expect(panelRef.panelContainer[0]).toBe(config.contentElement.parent()[0]); + expect(panelRef.innerWrapper[0]).toBe(config.contentElement.parent()[0]); + expect(panelRef.panelContainer[0]).toBe(config.contentElement.parent().parent()[0]); }); it('should add the proper class to the panel element and assign ' + @@ -3380,13 +3405,16 @@ describe('$mdPanel', function() { it('should clear out any panel-specific inline styles from the element', function() { - openPanel(config); - expect(config.contentElement.attr('style')).toBeTruthy(); + config.contentElement.css('color', 'red'); + + var initialStyles = config.contentElement.attr('style'); + + openPanel(config); closePanel(); - expect(config.contentElement.attr('style')).toBeFalsy(); + expect(config.contentElement.attr('style')).toBe(initialStyles); }); it('should clean up the panel via the cleanup function from the compiler', From da05a55e067ddaa23351d4dba194c839530f94a0 Mon Sep 17 00:00:00 2001 From: Michael Prentice Date: Mon, 15 Jun 2020 23:11:49 -0400 Subject: [PATCH 2/2] fix(tooltip): change from inline to inline-block to account for md-panel change - `md-panel` changed from `position: fixed` to `relative` - that resulted in the tooltip's `height` style not having any effect --- src/components/tooltip/tooltip.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/tooltip/tooltip.scss b/src/components/tooltip/tooltip.scss index bef64769cdb..d86223878db 100644 --- a/src/components/tooltip/tooltip.scss +++ b/src/components/tooltip/tooltip.scss @@ -9,6 +9,7 @@ $tooltip-lr-padding-sm: 16px !default; $tooltip-max-width: 32px !default; .md-tooltip { + display: inline-block; pointer-events: none; border-radius: 4px; overflow: hidden;