This repository has been archived by the owner on Sep 5, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 3.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(whiteframe): support attribute directive to apply md-whiteframe …
…classes `md-whiteframe` can now be used as a class or a directive attribute. Fixes #6772, closes #6831.
- Loading branch information
1 parent
b2d5396
commit 4d5e0ed
Showing
8 changed files
with
254 additions
and
1 deletion.
There are no files selected for viewing
File renamed without changes.
File renamed without changes.
File renamed without changes.
99 changes: 99 additions & 0 deletions
99
src/components/whiteframe/demoDirectiveAttributeUsage/index.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,99 @@ | ||
<div layout="row" layout-padding layout-wrap layout-fill style="padding-bottom: 32px;" ng-cloak> | ||
|
||
<div class="padded" md-whiteframe="1" flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout layout-align="center center"> | ||
<span>md-whiteframe="1"</span> | ||
</div> | ||
|
||
<div class="padded" md-whiteframe="2" flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout layout-align="center center"> | ||
<span>md-whiteframe="2"</span> | ||
</div> | ||
|
||
<div class="padded" md-whiteframe="3" flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout layout-align="center center"> | ||
<span>md-whiteframe="3"</span> | ||
</div> | ||
|
||
<div class="padded" md-whiteframe="4" flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout layout-align="center center"> | ||
<span>md-whiteframe="4"</span> | ||
</div> | ||
|
||
<div class="padded" md-whiteframe="5" flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout layout-align="center center"> | ||
<span>md-whiteframe="5"</span> | ||
</div> | ||
|
||
<div class="padded" md-whiteframe="6" flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout layout-align="center center"> | ||
<span>md-whiteframe="6"</span> | ||
</div> | ||
|
||
<div class="padded" md-whiteframe="7" flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout layout-align="center center"> | ||
<span>md-whiteframe="7"</span> | ||
</div> | ||
|
||
<div class="padded" md-whiteframe="8" flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout layout-align="center center"> | ||
<span>md-whiteframe="8"</span> | ||
</div> | ||
|
||
<div class="padded" md-whiteframe="9" flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout layout-align="center center"> | ||
<span>md-whiteframe="9"</span> | ||
</div> | ||
|
||
<div class="padded" md-whiteframe="10" flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout layout-align="center center"> | ||
<span>md-whiteframe="10"</span> | ||
</div> | ||
|
||
<div class="padded" md-whiteframe="11" flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout layout-align="center center"> | ||
<span>md-whiteframe="11"</span> | ||
</div> | ||
|
||
<div class="padded" md-whiteframe="12" flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout layout-align="center center"> | ||
<span>md-whiteframe="12"</span> | ||
</div> | ||
|
||
<div class="padded" md-whiteframe="13" flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout layout-align="center center"> | ||
<span>md-whiteframe="13"</span> | ||
</div> | ||
|
||
<div class="padded" md-whiteframe="14" flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout layout-align="center center"> | ||
<span>md-whiteframe="14"</span> | ||
</div> | ||
|
||
<div class="padded" md-whiteframe="15" flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout layout-align="center center"> | ||
<span>md-whiteframe="15"</span> | ||
</div> | ||
|
||
<div class="padded" md-whiteframe="16" flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout layout-align="center center"> | ||
<span>md-whiteframe="16"</span> | ||
</div> | ||
|
||
<div class="padded" md-whiteframe="17" flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout layout-align="center center"> | ||
<span>md-whiteframe="17"</span> | ||
</div> | ||
|
||
<div class="padded" md-whiteframe="18" flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout layout-align="center center"> | ||
<span>md-whiteframe="18"</span> | ||
</div> | ||
|
||
<div class="padded" md-whiteframe="19" flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout layout-align="center center"> | ||
<span>md-whiteframe="19"</span> | ||
</div> | ||
|
||
<div class="padded" md-whiteframe="20" flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout layout-align="center center"> | ||
<span>md-whiteframe="20"</span> | ||
</div> | ||
|
||
<div class="padded" md-whiteframe="21" flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout layout-align="center center"> | ||
<span>md-whiteframe="21"</span> | ||
</div> | ||
|
||
<div class="padded" md-whiteframe="22" flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout layout-align="center center"> | ||
<span>md-whiteframe="22"</span> | ||
</div> | ||
|
||
<div class="padded" md-whiteframe="23" flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout layout-align="center center"> | ||
<span>md-whiteframe="23"</span> | ||
</div> | ||
|
||
<div class="padded" md-whiteframe="24" flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout layout-align="center center"> | ||
<span>md-whiteframe="24"</span> | ||
</div> | ||
|
||
</div> |
1 change: 1 addition & 0 deletions
1
src/components/whiteframe/demoDirectiveAttributeUsage/script.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
angular.module('whiteframeDirectiveUsage', ['ngMaterial']); |
52 changes: 52 additions & 0 deletions
52
src/components/whiteframe/demoDirectiveAttributeUsage/style.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,52 @@ | ||
md-whiteframe, div.padded { | ||
This comment has been minimized.
Sorry, something went wrong. |
||
background: #fff; | ||
margin: 30px; | ||
height: 100px; | ||
} | ||
|
||
/* For breakpoint `-xs` */ | ||
@media screen and (max-width: 599px) { | ||
md-whiteframe, div.padded { | ||
margin: 7px; | ||
height: 50px; | ||
background-color: #c8e4fa; | ||
} | ||
md-whiteframe > span, div.padded > span { | ||
font-size: 0.4em; | ||
} | ||
} | ||
|
||
/* For breakpoint `-sm` */ | ||
@media screen and (min-width: 600px ) and (max-width: 959px) { | ||
md-whiteframe, div.padded { | ||
margin: 20px; | ||
height: 75px; | ||
} | ||
md-whiteframe > span, div.padded > span { | ||
font-size: 0.6em; | ||
} | ||
} | ||
|
||
/* For breakpoint `-md` */ | ||
@media screen and (min-width: 960px ) and (max-width: 1279px) { | ||
md-whiteframe, div.padded { | ||
margin: 20px; | ||
height: 90px; | ||
background-color: #fcddde; | ||
} | ||
md-whiteframe > span, div.padded > span { | ||
font-size: 0.9em; | ||
} | ||
} | ||
|
||
/* For breakpoint `-gt-md` */ | ||
@media screen and (min-width: 1280px) { | ||
md-whiteframe, div.padded { | ||
margin: 25px; | ||
height: 100px; | ||
background-color: #F2FCE2; | ||
} | ||
md-whiteframe > span, div.padded > span { | ||
font-size: 1.0em; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,53 @@ | ||
describe('mdWhiteframe directive', function() { | ||
|
||
beforeEach(module('material.components.whiteframe')); | ||
|
||
function buildWhiteframe(elevation) { | ||
var element; | ||
inject(function($compile, $rootScope) { | ||
element = $compile('<div md-whiteframe="' + (elevation || '') + '">')($rootScope); | ||
}); | ||
return element; | ||
} | ||
|
||
it('should default to 4dp if no attribute value is specified', function() { | ||
var element = buildWhiteframe(); | ||
|
||
expect(element).toHaveClass('md-whiteframe-4dp'); | ||
}); | ||
|
||
it('should default to 4dp if the attribute value is invalid', inject(function($log) { | ||
spyOn($log, 'warn'); | ||
var element = buildWhiteframe('999'); | ||
|
||
expect($log.warn).toHaveBeenCalled(); | ||
expect(element).toHaveClass('md-whiteframe-4dp'); | ||
})); | ||
|
||
it('should use the default dp and warn if the attribute value is to low', inject(function($log) { | ||
spyOn($log, 'warn'); | ||
var element = buildWhiteframe('-1'); | ||
|
||
expect($log.warn).toHaveBeenCalled(); | ||
expect(element).toHaveClass('md-whiteframe-4dp'); | ||
})); | ||
|
||
it('should apply the correct whiteframe if attribute value is valid', function() { | ||
var element = buildWhiteframe('9'); | ||
|
||
expect(element).toHaveClass('md-whiteframe-9dp'); | ||
}); | ||
|
||
it('should default to 4dp if the attribute value is a text', function() { | ||
var element = buildWhiteframe('invalid text'); | ||
|
||
expect(element).toHaveClass('md-whiteframe-4dp'); | ||
}); | ||
|
||
it('should not round a decimal number', function() { | ||
var element = buildWhiteframe('1.8'); | ||
|
||
expect(element).toHaveClass('md-whiteframe-1dp'); | ||
}); | ||
|
||
}); |
@ThomasBurleson I still can't get the idea of the
md-whiteframe
selector. It isn't used in the demo, so maybe it's just for the user, allowing him to play with the codepen?