Skip to content

Commit

Permalink
added mdExpansionPanelIcon directive
Browse files Browse the repository at this point in the history 
Added ability to pass options object to expand, collapse, and remove function. currently only animation(boolean) is available
Minor changes to animations
  • Loading branch information
Ben Rubin authored and Ben Rubin committed Jul 20, 2016
1 parent 16650c0 commit 6618815
Show file tree
Hide file tree
Showing 16 changed files with 191 additions and 126 deletions.
2 changes: 1 addition & 1 deletion app/pages/group/group.controller.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ function GroupController($mdExpansionPanelGroup) {

setTimeout(function () {
change();
}, 10000)
}, 10000);
});

function addTemplated() {
Expand Down
4 changes: 4 additions & 0 deletions app/pages/home/home.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,13 +16,15 @@ <h2>Panels</h2>
<md-expansion-panel-collapsed>
<div class="md-title">Title</div>
<div class="md-summary">Summary</div>
<md-expansion-panel-icon></md-expansion-panel-icon>
</md-expansion-panel-collapsed>

<md-expansion-panel-expanded>

<md-expansion-panel-header>
<div class="md-title">Expanded Title</div>
<div class="md-summary">Expanded Summary</div>
<md-expansion-panel-icon></md-expansion-panel-icon>
</md-expansion-panel-header>

<md-expansion-panel-content>
Expand All @@ -43,13 +45,15 @@ <h4>Content</h4>
<md-expansion-panel>

<md-expansion-panel-collapsed>
<md-expansion-panel-icon></md-expansion-panel-icon>
<div class="md-title">Sticky</div>
<div class="md-summary">header and footer will stick</div>
</md-expansion-panel-collapsed>

<md-expansion-panel-expanded>

<md-expansion-panel-header>
<md-expansion-panel-icon></md-expansion-panel-icon>
<div class="md-title">Sticky</div>
<div class="md-summary">header and footer will stick</div>
</md-expansion-panel-header>
Expand Down
1 change: 1 addition & 0 deletions gulp/config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,5 +9,6 @@ exports.paths = {
appCss: ['app/style.css', 'app/**/*.css'],
injectCss: ['public/*.css', 'public/**/*.css'],
partials: ['app/**/*.html'],
icons: ['src/**/*.svg'],
bower: './bower.json'
};
2 changes: 1 addition & 1 deletion gulp/jsBuild.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ var gutil = require('gulp-util');

exports.getDevSrc = function (srcs) {
srcs = srcs || paths.scripts;

return function dev() {
return gulp.src(srcs, {base: paths.src})
.pipe(wrap('(function(){"use strict";<%= contents %>}());'))
Expand Down
21 changes: 19 additions & 2 deletions gulpfile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ var serve = require('gulp-serve');
var gulpSequence = require('gulp-sequence');
var del = require('del');
var bump = require('gulp-bump');
var templateCache = require('gulp-angular-templatecache');
var KarmaServer = require('karma').Server;


Expand Down Expand Up @@ -32,12 +33,13 @@ gulp.task('buildLocal', gulpSequence(
'jsSrcBuild',
'jsAppBuild',
'cssBuild',
'copyPartials'
'copyPartials',
'copyIcons'
],
'indexBuild'
));

gulp.task('build', ['jsReleaseBuild', 'cssReleaseBuild']);
gulp.task('build', gulpSequence('buildIconCache', ['jsReleaseBuild', 'cssReleaseBuild'], 'cleanIconCache'));



Expand All @@ -51,6 +53,21 @@ gulp.task('copyPartials', function () {
.pipe(gulp.dest(paths.dest));
});

gulp.task('copyIcons', function () {
return gulp.src(paths.icons, {base: paths.src})
.pipe(gulp.dest(paths.dest));
});

gulp.task('buildIconCache', function () {
return gulp.src(paths.icons)
.pipe(templateCache({module: 'material.components.expansionPanels'}))
.pipe(gulp.dest(paths.src));
});

gulp.task('cleanIconCache', function () {
return del('src/templates.js');
});

gulp.task('serve', serve({
root: ['public', 'bower_components'],
port: 8080
Expand Down
4 changes: 2 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"name": "angular-material-expansion-panel",
"version": "0.4.8",
"author": "Ben Rubin",
"description": "Material Design Expansion Panels.",
"description": "Material Design Expansion Panels for angular material",
"keywords": "material, material-design, design, angular, component, expansion, panel, panels",
"license": "MIT",
"repository": {
Expand All @@ -13,7 +13,7 @@
"bump": "^0.2.5",
"del": "^2.2.0",
"gulp": "^3.9.1",
"gulp-angular-templatecache": "^1.8.0",
"gulp-angular-templatecache": "^1.9.1",
"gulp-autoprefixer": "^3.1.0",
"gulp-bump": "^1.0.0",
"gulp-concat": "^2.6.0",
Expand Down
7 changes: 2 additions & 5 deletions src/expansionPanels-theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,8 @@ md-expansion-panel {
border-color: #DDD;
}


.md-expansion-panel-icon-container {
.md-expansion-panel-icon {
color: #999;
}
.md-expansion-panel-icon svg {
fill: #999;
}


Expand Down
146 changes: 72 additions & 74 deletions src/expansionPanels.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,14 +29,16 @@ md-expansion-panel {
overflow: hidden;
}

&.md-open {
transition: margin-top 0.12s cubic-bezier(0.25, 0.8, 0.25, 1),
margin-bottom 0.12s cubic-bezier(0.25, 0.8, 0.25, 1);
}
&:not(.md-no-animation) {
&.md-open {
transition: margin-top 0.12s cubic-bezier(0.25, 0.8, 0.25, 1),
margin-bottom 0.12s cubic-bezier(0.25, 0.8, 0.25, 1);
}

&.md-close {
transition: margin-top 0.08s cubic-bezier(0.25, 0.8, 0.25, 1),
margin-bottom 0.08s cubic-bezier(0.25, 0.8, 0.25, 1);
&.md-close {
transition: margin-top 0.08s cubic-bezier(0.25, 0.8, 0.25, 1),
margin-bottom 0.08s cubic-bezier(0.25, 0.8, 0.25, 1);
}
}
}

Expand Down Expand Up @@ -71,28 +73,36 @@ md-expansion-panel-header .md-summary {

/* --- Expansion Panel Collapsed ---- */

md-expansion-panel-collapsed {
display: flex;
min-height: 48px;
line-height: 48px;
padding: 0 24px;
opacity: 1;
z-index: 2;
box-sizing: border-box;
md-expansion-panel {
md-expansion-panel-collapsed {
display: flex;
min-height: 48px;
line-height: 48px;
padding: 0 24px;
opacity: 1;
z-index: 2;
box-sizing: border-box;


&.md-absolute {
position: absolute;
}
&.md-absolute {
position: absolute;
}

&.md-show {
transition: opacity 0.03s linear;
transition-delay: 0.03s;
&.md-hide {
opacity: 0;
}
}

&.md-hide {
transition: opacity 0.1s cubic-bezier(0.25, 0.8, 0.25, 1);
opacity: 0;
&:not(.md-no-animation) {
md-expansion-panel-collapsed {
&.md-show {
transition: opacity 0.03s linear;
}

&.md-hide {
transition: opacity 0.1s cubic-bezier(0.25, 0.8, 0.25, 1);
}
}
}
}

Expand All @@ -101,38 +111,44 @@ md-expansion-panel-collapsed {

/* --- Expansion Panel Expanded --- */

md-expansion-panel-expanded {
display: none;
min-height: 48px;
md-expansion-panel {
md-expansion-panel-expanded {
display: none;
min-height: 48px;


&.md-show {
transition: max-height 0.12s cubic-bezier(0.25, 0.8, 0.25, 1),
opacity 0.12s cubic-bezier(0.25, 0.8, 0.25, 1);
}
&.md-show,
&.md-hide {
display: block;
}

&.md-hide {
transition: max-height 0.08s cubic-bezier(0.25, 0.8, 0.25, 1),
opacity 0.08s cubic-bezier(0.25, 0.8, 0.25, 1);
}
&.md-scroll-y {
overflow-y: auto;
}

&.md-show,
&.md-hide {
display: block;
}
&.md-overflow {
overflow: hidden
}

&.md-scroll-y {
overflow-y: auto;
}

&.md-overflow {
overflow: hidden
md-expansion-panel-content {
display: block;
padding: 16px 24px;
}
}

&:not(.md-no-animation) {
md-expansion-panel-expanded {
&.md-show {
transition: max-height 0.12s cubic-bezier(0.25, 0.8, 0.25, 1),
opacity 0.12s cubic-bezier(0.25, 0.8, 0.25, 1);
}

md-expansion-panel-content {
display: block;
padding: 16px 24px;
&.md-hide {
transition: max-height 0.06s cubic-bezier(0.25, 0.8, 0.25, 1),
opacity 0.06s cubic-bezier(0.25, 0.8, 0.25, 1);
}
}
}
}

Expand Down Expand Up @@ -211,40 +227,22 @@ md-expansion-panel-footer {
/* --- expand icon --- */

md-expansion-panel {
.md-expansion-panel-icon-container {
&:first-child {
padding-right: 12px;
&:not(.md-no-animation) {
.md-expansion-panel-icon {
transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}
}


.md-expansion-panel-icon {
&:after {
font-family: 'mdMaterialIcons';
font-size: 18px;
font-weight: 600;
display: block;
content: '\e315';
position: relative;
speak: none;
transform: rotate(0deg);
transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.md-expansion-panel-icon {
&:first-child {
margin-right: 18px;
}
}


&.md-open {
> {
md-expansion-panel-collasped,
md-expansion-panel-header {
.md-expansion-panel-icon-container {
.md-expansion-panel-icon {
&:after {
transform: rotate(90deg);
}
}
}
}
.md-expansion-panel-icon {
transform: rotate(90deg);
}
}
}
Expand Down
4 changes: 4 additions & 0 deletions src/icons/ic_keyboard_arrow_right_black_24px.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 6618815

Please sign in to comment.