Skip to content
This repository has been archived by the owner on May 30, 2022. It is now read-only.

Commit

Permalink
refactor(macModal): Full refactor of modal provider and fix $animate …
Browse files Browse the repository at this point in the history
…problems with AngularJS 1.3.

- Removed modalView provider which has no specific use
- Switched to modal provider and service
- Cleaned up css classes and animation
- Updated $animate code to use promise and work with Angular v1.3
- Fixed animation looks different after opening modal once

BREAKING CHANGE: modalView provider has been removed and should be switched to use modalProvider instead

Related to #4
  • Loading branch information
adrianlee44 committed Dec 3, 2014
1 parent 5820749 commit c5fb981
Show file tree
Hide file tree
Showing 5 changed files with 360 additions and 353 deletions.
99 changes: 47 additions & 52 deletions src/css/modal.styl
Original file line number Diff line number Diff line change
Expand Up @@ -10,69 +10,64 @@
overflow-y auto
z-index 3

.ng-animate
&.ng-animate
display block
transition 0.2s ease-out all

&.visible, &.visible-add-active
&.visible
opacity 1.0
display block

.mac-modal
top 50%

&.visible-add, &.visible-remove
transition 0.2s ease-out all

// &.visible-remove-active
// opacity 0

.mac-modal
position absolute
top 0
left 50%
width 500px
margin-left -251px
background #FFF
border 1px solid #d1d3d8
box-shadow 0 4px 10px rgba(0,0,0,0.15)
transition all 0.2s ease-out
border-radius 3px
transform rotateX(0) rotateY(0)
.mac-modal
position absolute
top 0
left 50%
width 500px
margin-left -251px
background #FFF
border 1px solid #d1d3d8
box-shadow 0 4px 10px rgba(0,0,0,0.15)
transition top 0.2s ease-out
border-radius 3px
transform rotateX(0) rotateY(0)

&:after
content ""
display block
position absolute
bottom -20px
height 20px
width 1px
&:after
content ""
display block
position absolute
bottom -20px
height 20px
width 1px

.mac-close-modal
position absolute
top -5px
right -5px
width 18px
height 18px
border-radius 9px
display block
background #bdc0c7
cursor pointer
.mac-close-modal
position absolute
top -5px
right -5px
width 18px
height 18px
border-radius 9px
display block
background #bdc0c7
cursor pointer

&:before, &:after
content ''
display block
width 2px
height 10px
background #fff
position absolute
top 4px
left 8px
&:before, &:after
content ''
display block
width 2px
height 10px
background #fff
position absolute
top 4px
left 8px

&:before
transform rotate(-45deg)
&:before
transform rotate(-45deg)

&:after
transform rotate(45deg)
&:after
transform rotate(45deg)

.mac-modal-content
padding 20px
.mac-modal-content
padding 20px
5 changes: 2 additions & 3 deletions src/directives/modal.coffee
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,8 @@ modal template
angular.module("Mac").directive("macModal", [
"$parse"
"modal"
"modalViews"
"util"
($parse, modal, modalViews, util) ->
($parse, modal, util) ->
restrict: "E"
template: modal.modalTemplate
replace: true
Expand All @@ -35,7 +34,7 @@ angular.module("Mac").directive("macModal", [
element[0].getElementsByClassName "mac-modal-content-wrapper"
).replaceWith clone

opts = util.extendAttributes "macModal", modalViews.defaults, attrs
opts = util.extendAttributes "macModal", modal.defaults, attrs
regId = null

if opts.overlayClose
Expand Down
Loading

0 comments on commit c5fb981

Please sign in to comment.