Skip to content
This repository has been archived by the owner on Sep 5, 2024. It is now read-only.

feat(panel): allow transform to be animated on an offset panel #11390

Merged
merged 2 commits into from
Jun 17, 2020
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
113 changes: 65 additions & 48 deletions src/components/panel/panel.js
Original file line number Diff line number Diff line change
@@ -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 '' +
'<div class="md-panel-outer-wrapper">' +
' <div class="md-panel _md-panel-offscreen">' + template + '</div>' +
'<div class="md-panel-inner-wrapper" style="left: -9999px;">' +
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This inline style (style="left: -9999px;") triggers a CSP violation for unsafe-inline.

'<div class="md-panel _md-panel-offscreen">' + template + '</div>' +
'</div>' +
'</div>';
};


/**
* 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('<div class="md-panel-outer-wrapper">');
var outerWrapper = angular.element(
'<div class="md-panel-outer-wrapper">' +
'<div class="md-panel-inner-wrapper" style="left: -9999px;"></div>' +
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This inline style (style="left: -9999px;") triggers a CSP violation for unsafe-inline.

'</div>'
);

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,14 +1943,17 @@ 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.
self._setTheming();

// 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,27 +2020,27 @@ 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) {
this.panelEl.removeClass('_md-panel-offscreen');
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,38 +2897,38 @@ 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());
var top = parseInt(this.getTop());

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();

26 changes: 15 additions & 11 deletions src/components/panel/panel.scss
Original file line number Diff line number Diff line change
@@ -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;
Splaktar marked this conversation as resolved.
Show resolved Hide resolved

&._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;
}
126 changes: 77 additions & 49 deletions src/components/panel/panel.spec.js
Original file line number Diff line number Diff line change
@@ -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,17 +2589,17 @@ 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();

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',
1 change: 1 addition & 0 deletions src/components/tooltip/tooltip.scss
Original file line number Diff line number Diff line change
@@ -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;