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

Commit

Permalink
fix(FAB): Re-add line-height to fix ui-sref issues.
Browse files Browse the repository at this point in the history 
The `line-height` property of the FAB buttons was removed to fix
an issue with the tooltip demo. This had unintended consequences
on FABs that used `ui-sref` which made them `<a>` tags instead of
`<button>` tags.

The tooltip demo issue was caused by the parent `<md-content>`
applying it's padding to all of it's children.

Revert the line-height change and fix demos by wrapping child
content in a new `<div>` which accepts the extra padding.

Fixes #7087. Closes #7145
  • Loading branch information
@topherfangio @ThomasBurleson
topherfangio authored and ThomasBurleson committed Feb 15, 2016
1 parent af40e25 commit f9f893a
Show file tree
Hide file tree
Showing 3 changed files with 59 additions and 61 deletions.
2 changes: 2 additions & 0 deletions src/components/button/button.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,6 +114,8 @@ button.md-button::-moz-focus-inner {

z-index: $z-index-fab;

line-height: $button-fab-line-height;

min-width: 0;
width: $button-fab-width;
height: $button-fab-height;
Expand Down
112 changes: 57 additions & 55 deletions src/components/tooltip/demoBasicUsage/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,71 +13,73 @@ <h2 class="md-toolbar-tools">
</h2>
</md-toolbar>
<md-content layout-padding style="margin-left: 20px; margin-right: 20px">
<div>

<p>
The tooltip is visible when the button is hovered, focused, or touched.
</p>

<md-button class="md-fab md-fab-top-left left" aria-label="Insert Drive">
<md-icon md-svg-src="img/icons/ic_insert_drive_file_24px.svg" style="width: 24px; height: 24px;"></md-icon>
<md-tooltip md-visible="demo.showTooltip" md-direction="{{demo.tipDirection}}">
Insert Drive
</md-tooltip>
</md-button>
<md-button class="md-fab md-fab-top-right right" aria-label="Photos">
<md-icon md-svg-src="img/icons/ic_photo_24px.svg" style="width: 24px; height: 24px;"></md-icon>
<md-tooltip>
Photos
</md-tooltip>
</md-button>


<div style="margin-top: 150px;">
<p>
Additionally, the Tooltip's <code>md-visible</code> attribute can use data-binding to
programmatically show/hide itself. Toggle the checkbox below...
The tooltip is visible when the button is hovered, focused, or touched.
</p>
<div style="padding-left: 37px">
<md-checkbox ng-model="demo.showTooltip" style="padding-left:30px;">
Insert Drive
</md-checkbox>
</div>
</div>

<div style="margin-top: 20px;margin-bottom: -5px">
<p>
Additionally, the Tooltip's <code>md-delay</code> attribute can use to delay the
show animation. The default values is 0 mSecs...
</p>
<div style="padding-left: 37px">
<md-input-container>
<label>Tooltip Delay (for Photos)</label>
<input ng-model="demo.delayTooltip">
</md-input-container>
<md-button class="md-fab" aria-label="Insert Drive">
<md-icon md-svg-src="img/icons/ic_insert_drive_file_24px.svg"></md-icon>
<md-tooltip md-visible="demo.showTooltip" md-direction="{{demo.tipDirection}}">
Insert Drive
</md-tooltip>
</md-button>
<md-button class="md-fab md-fab-top-right right" aria-label="Photos">
<md-tooltip>
Photos
</md-tooltip>
<md-icon md-svg-src="img/icons/ic_photo_24px.svg" style="width: 24px; height: 24px;"></md-icon>
</md-button>

<md-button class="md-fab demo-tip" aria-label="Photos with Tooltip Delay">
<md-icon md-svg-src="img/icons/ic_photo_24px.svg" style="width: 24px; height: 24px;"></md-icon>
<md-tooltip md-delay="demo.delayTooltip" c>
Photos with Tooltip Delay {{demo.delayTooltip}} msecs
</md-tooltip>
</md-button>

<div style="margin-top: 40px;margin-bottom: -5px">
<p><code>md-direction</code> attribute can used to dynamically change the direction of the tooltip.<br/>
Note: the direction default value is 'bottom'. </p>
<div style="padding-left: 30px">
<md-radio-group ng-model="demo.tipDirection" >
<md-radio-button value="left"> Left </md-radio-button>
<md-radio-button value="top">Top</md-radio-button>
<md-radio-button value="bottom" class="md-primary">Bottom</md-radio-button>
<md-radio-button value="right">Right</md-radio-button>
</md-radio-group>
</div>
</div>
</div>

<div style="margin-top: 20px;margin-bottom: -5px">
<p><code>md-direction</code> attribute can used to dynamically change the direction of the tooltip.<br/>
Note: the direction default value is 'bottom'. </p>
<div style="padding-left: 30px">
<md-radio-group ng-model="demo.tipDirection" >
<md-radio-button value="left"> Left </md-radio-button>
<md-radio-button value="top">Top</md-radio-button>
<md-radio-button value="bottom" class="md-primary">Bottom</md-radio-button>
<md-radio-button value="right">Right</md-radio-button>
</md-radio-group>

<div style="margin-top: 20px;">
<p>
Additionally, the Tooltip's <code>md-visible</code> attribute can use data-binding to
programmatically show/hide itself. Toggle the checkbox below...
</p>
<div style="padding-left: 37px">
<md-checkbox ng-model="demo.showTooltip" style="padding-left:30px;">
Insert Drive
</md-checkbox>
</div>
</div>
</div>

<div style="margin-top: 20px;margin-bottom: -5px">
<p>
Additionally, the Tooltip's <code>md-delay</code> attribute can use to delay the
show animation. The default values is 0 mSecs...
</p>
<div style="padding-left: 37px">
<md-input-container>
<label>Tooltip Delay (for Photos)</label>
<input ng-model="demo.delayTooltip">
</md-input-container>

<md-button class="md-fab" aria-label="Photos with Tooltip Delay" style="margin-top: -24px;">
<md-icon md-svg-src="img/icons/ic_photo_24px.svg" style="width: 24px; height: 24px; "></md-icon>
<md-tooltip md-delay="demo.delayTooltip">
Photos with Tooltip Delay {{demo.delayTooltip}} msecs
</md-tooltip>
</md-button>

</div>
</div>

</div>
</md-content>
</div>
6 changes: 0 additions & 6 deletions src/components/tooltip/demoBasicUsage/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,3 @@ md-toolbar .md-toolbar-tools .md-button:hover {
top:70px !important;
right:56px !important;
}


.demo-tip {
margin-top: -24px;
margin-left: 20px;
}

0 comments on commit f9f893a

Please sign in to comment.