Skip to content

Commit ab887d3

Browse files
author
Null McNull
committed
markup cleanup
1 parent 78cd117 commit ab887d3

File tree

6 files changed

+62
-61
lines changed

6 files changed

+62
-61
lines changed

‎src/angular-block-ui/angular-block-ui.css‎

Lines changed: 5 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,16 @@
88
margin: 0;
99
padding: 0;
1010
width: 100%;
11-
height: 100%;
11+
height: 0;
1212
top: 0;
1313
left: 0;
1414
position: absolute;
1515
}
1616

17+
.block-ui-active .block-ui-overlay {
18+
height: 100%;
19+
}
20+
1721
body.block-ui > .block-ui-container > .block-ui-overlay,
1822
body.block-ui > .block-ui-container > .block-ui-message-container {
1923
position: fixed;
@@ -54,54 +58,3 @@ body.block-ui > .block-ui-container > .block-ui-message-container {
5458
font-size: 20px;
5559
font-weight: bold;
5660
}
57-
58-
/*.block-ui-overlay {
59-
z-index: 10001;
60-
border: none;
61-
margin: 0;
62-
padding: 0;
63-
width: 100%;
64-
height: 100%;
65-
top: 0;
66-
left: 0;
67-
position: absolute;
68-
}
69-
70-
body > .block-ui > .block-ui-overlay {
71-
position: fixed;
72-
}
73-
74-
.block-ui-overlay.block-ui-visible {
75-
background-color: #fff;
76-
opacity: 0.5;
77-
-ms-filter:"alpha(opacity=50)";
78-
cursor: wait;
79-
}
80-
81-
.block-ui-message-container {
82-
position: absolute;
83-
top: 35%;
84-
left: 0;
85-
right: 0;
86-
height: 0;
87-
text-align: center;
88-
z-index: 10002;
89-
}
90-
91-
body > .block-ui > .block-ui-message-container {
92-
position: fixed;
93-
}
94-
95-
.block-ui-message {
96-
cursor: wait;
97-
display: inline-block;
98-
text-align: left;
99-
background-color: #333;
100-
color: #f5f5f5;
101-
padding: 20px;
102-
-webkit-border-radius: 4px;
103-
-moz-border-radius: 4px;
104-
border-radius: 4px;
105-
font-size: 20px;
106-
font-weight: bold;
107-
}*/

‎src/angular-block-ui/angular-block-ui.ng.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div ng-show="state.blockCount > 0" class="block-ui-overlay"></div>
1+
<div class="block-ui-overlay"></div>
22
<div class="block-ui-message-container" aria-live="assertive" aria-atomic="true">
33
<div class="block-ui-message">{{ state.message }}</div>
44
</div>

‎src/angular-block-ui/block-ui-container-directive.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,5 +26,8 @@ blkUI.directive('blockUiContainer', function (blockUIConfig, blockUiContainerLin
2626
$element.toggleClass('block-ui-visible', !!value);
2727
});
2828

29+
$scope.$watch('state.blockCount > 0', function(value) {
30+
$element.toggleClass('block-ui-active', !!value);
31+
});
2932
};
3033
});

‎src/angular-block-ui/block-ui-container-directive.test.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,5 +105,21 @@ describe('block-ui-container-directive', function() {
105105
expect($element.hasClass('block-ui-visible')).toBe(false);
106106
});
107107

108+
it('should set the block-ui-active class when blockcount > 0', function() {
109+
110+
linkFn($scope, $element, $attrs);
111+
expect($element.hasClass('block-ui-active')).toBe(false);
112+
113+
blockInstance.start();
114+
$scope.$digest();
115+
116+
expect($element.hasClass('block-ui-active')).toBe(true);
117+
118+
blockInstance.stop();
119+
$scope.$digest();
120+
121+
expect($element.hasClass('block-ui-active')).toBe(false);
122+
});
123+
108124
});
109125
});

‎src/app/examples/animations.css‎

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,21 @@
1-
.animation-fade .block-ui-container {
2-
transition: opacity 1s;
1+
.block-ui-fade-in .block-ui-container {
2+
transition: opacity 200ms;
33
opacity: 0.0;
44
}
55

6-
.animation-fade .block-ui-container.block-ui-visible {
6+
.block-ui-fade-in .block-ui-container.block-ui-visible {
77
opacity: 1.0;
8+
}
9+
10+
.block-ui-fade-in-out .block-ui-container {
11+
transition: opacity 200ms;
12+
opacity: 0.0;
13+
}
14+
15+
.block-ui-fade-in-out .block-ui-container.block-ui-visible {
16+
opacity: 1.0;
17+
}
18+
19+
.block-ui-fade-in-out .block-ui-overlay {
20+
transition: height 1200ms;
821
}

‎src/app/examples/animations.html‎

Lines changed: 21 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,27 @@
11
<div ng-controller="AnimationController">
22

3-
<div block-ui="animatedBlock" class="animation-fade">
4-
<div class="jumbotron">
5-
<h1>Block with animations</h1>
6-
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium amet aspernatur atque commodi delectus deleniti eos error ipsa, iusto nesciunt nulla obcaecati provident quae, repellendus reprehenderit sit soluta, totam voluptate!</p>
3+
<div class="example">
4+
<div block-ui="fade-in" class="block-ui-fade-in">
5+
<div class="jumbotron">
6+
<h1>block-ui-fade-in</h1>
7+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium amet aspernatur atque commodi delectus
8+
deleniti eos error ipsa, iusto nesciunt nulla obcaecati provident quae, repellendus reprehenderit sit soluta,
9+
totam voluptate!</p>
10+
</div>
711
</div>
12+
<button type="button" class="btn btn-default" ng-click="toggleBlock('fade-in')">Toggle Block</button>
13+
</div>
14+
15+
<div class="example">
16+
<div block-ui="fade-in-out" class="block-ui-fade-in-out">
17+
<div class="jumbotron">
18+
<h1>block-ui-fade-in-out</h1>
19+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium amet aspernatur atque commodi delectus
20+
deleniti eos error ipsa, iusto nesciunt nulla obcaecati provident quae, repellendus reprehenderit sit soluta,
21+
totam voluptate!</p>
22+
</div>
23+
</div>
24+
<button type="button" class="btn btn-default" ng-click="toggleBlock('fade-in-out')">Toggle Block</button>
825
</div>
926

10-
<button type="button" class="btn btn-default" ng-click="toggleBlock('animatedBlock')">Toggle Block</button>
1127
</div>

0 commit comments

Comments
 (0)