Skip to content

Commit 95fcd4f

Browse files
madoarmadoar
committed
- removed container divs in the angular 2 component class html files
- used HostBinding decorators to set the properties of the angular 2 components directly - changed tests to work with the changed component html layout
1 parent b1d7911 commit 95fcd4f

File tree

7 files changed

+169
-169
lines changed

7 files changed

+169
-169
lines changed

‎src/components/components/wizard-navigation-bar.component.less‎

Lines changed: 146 additions & 138 deletions
Original file line numberDiff line numberDiff line change
@@ -1,173 +1,181 @@
1-
@wz-color-default: #E6E6E6;
2-
@wz-color-current: #808080;
3-
@wz-color-done: #339933;
1+
@wz-color-default: #E6E6E6;
2+
@wz-color-current: #808080;
3+
@wz-color-done: #339933;
44
@wz-color-optional: #38ef38;
5-
@wz-color-editing: #FF0000;
6-
7-
.steps-indicator {
8-
padding: 10px 0 25px 0;
9-
list-style: none;
10-
11-
&:before {
12-
background-color: @wz-color-default;
13-
content: '';
14-
position: absolute;
15-
height: 1px;
16-
}
17-
18-
&.steps-2:before {
19-
left: ~'calc(100% / 2 / 2)';
20-
right: ~'calc(100% / 2 / 2)';
21-
}
5+
@wz-color-editing: #FF0000;
6+
7+
:host {
8+
right: 0;
9+
bottom: 0;
10+
left: 0;
11+
margin: 0;
12+
width: 100%;
13+
height: auto;
14+
15+
.steps-indicator {
16+
padding: 10px 0 25px 0;
17+
list-style: none;
18+
19+
&:before {
20+
background-color: @wz-color-default;
21+
content: '';
22+
position: absolute;
23+
height: 1px;
24+
}
2225

23-
&.steps-3:before {
24-
left: ~'calc(100% / 3 / 2)';
25-
right: ~'calc(100% / 3 / 2)';
26-
}
26+
&.steps-2:before {
27+
left: ~'calc(100% / 2 / 2)';
28+
right: ~'calc(100% / 2 / 2)';
29+
}
2730

28-
&.steps-4:before {
29-
left: ~'calc(100% / 4 / 2)';
30-
right: ~'calc(100% / 4 / 2)';
31-
}
31+
&.steps-3:before {
32+
left: ~'calc(100% / 3 / 2)';
33+
right: ~'calc(100% / 3 / 2)';
34+
}
3235

33-
&.steps-5:before {
34-
left: ~'calc(100% / 5 / 2)';
35-
right: ~'calc(100% / 5 / 2)';
36-
}
36+
&.steps-4:before {
37+
left: ~'calc(100% / 4 / 2)';
38+
right: ~'calc(100% / 4 / 2)';
39+
}
3740

38-
&.steps-6:before {
39-
left: ~'calc(100% / 6 / 2)';
40-
right: ~'calc(100% / 6 / 2)';
41-
}
41+
&.steps-5:before {
42+
left: ~'calc(100% / 5 / 2)';
43+
right: ~'calc(100% / 5 / 2)';
44+
}
4245

43-
&.steps-7:before {
44-
left: ~'calc(100% / 7 / 2)';
45-
right: ~'calc(100% / 7 / 2)';
46-
}
46+
&.steps-6:before {
47+
left: ~'calc(100% / 6 / 2)';
48+
right: ~'calc(100% / 6 / 2)';
49+
}
4750

48-
&.steps-8:before {
49-
left: ~'calc(100% / 8 / 2)';
50-
right: ~'calc(100% / 8 / 2)';
51-
}
51+
&.steps-7:before {
52+
left: ~'calc(100% / 7 / 2)';
53+
right: ~'calc(100% / 7 / 2)';
54+
}
5255

53-
&.steps-9:before {
54-
left: ~'calc(100% / 9 / 2)';
55-
right: ~'calc(100% / 9 / 2)';
56-
}
56+
&.steps-8:before {
57+
left: ~'calc(100% / 8 / 2)';
58+
right: ~'calc(100% / 8 / 2)';
59+
}
5760

58-
&.steps-10:before {
59-
left: ~'calc(100% / 10 / 2)';
60-
right: ~'calc(100% / 10 / 2)';
61-
}
61+
&.steps-9:before {
62+
left: ~'calc(100% / 9 / 2)';
63+
right: ~'calc(100% / 9 / 2)';
64+
}
6265

63-
/* --- http://www.paulirish.com/2012/box-sizing-border-box-ftw/ ---- */
64-
* {
65-
-webkit-box-sizing: border-box;
66-
-moz-box-sizing: border-box;
67-
box-sizing: border-box;
68-
}
66+
&.steps-10:before {
67+
left: ~'calc(100% / 10 / 2)';
68+
right: ~'calc(100% / 10 / 2)';
69+
}
6970

71+
/* --- http://www.paulirish.com/2012/box-sizing-border-box-ftw/ ---- */
72+
* {
73+
-webkit-box-sizing: border-box;
74+
-moz-box-sizing: border-box;
75+
box-sizing: border-box;
76+
}
7077

71-
li {
72-
position: relative;
73-
float: left;
74-
margin: 0;
75-
padding: 10px 0 0 0;
76-
text-align: center;
77-
line-height: 15px;
78-
79-
a {
80-
color: @wz-color-current;
81-
text-decoration: none;
82-
text-transform: uppercase;
83-
font-weight: bold;
84-
transition: 0.25s;
85-
cursor: pointer;
86-
87-
&:before {
88-
position: absolute;
89-
top: -7px;
90-
left: ~'calc(50% - 7px)';
91-
width: 14px;
92-
height: 14px;
93-
border-radius: 100%;
94-
background-color: @wz-color-default;
95-
content: '';
78+
li {
79+
position: relative;
80+
float: left;
81+
margin: 0;
82+
padding: 10px 0 0 0;
83+
text-align: center;
84+
line-height: 15px;
85+
86+
a {
87+
color: @wz-color-current;
88+
text-decoration: none;
89+
text-transform: uppercase;
90+
font-weight: bold;
9691
transition: 0.25s;
97-
}
98-
99-
&:hover {
100-
color: darken(@wz-color-current, 20%);
92+
cursor: pointer;
93+
94+
&:before {
95+
position: absolute;
96+
top: -7px;
97+
left: ~'calc(50% - 7px)';
98+
width: 14px;
99+
height: 14px;
100+
border-radius: 100%;
101+
background-color: @wz-color-default;
102+
content: '';
103+
transition: 0.25s;
104+
}
105+
106+
&:hover {
107+
color: darken(@wz-color-current, 20%);
108+
}
101109
}
102110
}
103-
}
104111

105-
&.steps-2 li {
106-
width: ~'calc(100% / 2)';
107-
}
112+
&.steps-2 li {
113+
width: ~'calc(100% / 2)';
114+
}
108115

109-
&.steps-3 li {
110-
width: ~'calc(100% / 3)';
111-
}
116+
&.steps-3 li {
117+
width: ~'calc(100% / 3)';
118+
}
112119

113-
&.steps-4 li {
114-
width: ~'calc(100% / 4)';
115-
}
120+
&.steps-4 li {
121+
width: ~'calc(100% / 4)';
122+
}
116123

117-
&.steps-5 li {
118-
width: ~'calc(100% / 5)';
119-
}
124+
&.steps-5 li {
125+
width: ~'calc(100% / 5)';
126+
}
120127

121-
&.steps-6 li {
122-
width: ~'calc(100% / 6)';
123-
}
128+
&.steps-6 li {
129+
width: ~'calc(100% / 6)';
130+
}
124131

125-
&.steps-7 li {
126-
width: ~'calc(100% / 7)';
127-
}
132+
&.steps-7 li {
133+
width: ~'calc(100% / 7)';
134+
}
128135

129-
&.steps-8 li {
130-
width: ~'calc(100% / 8)';
131-
}
136+
&.steps-8 li {
137+
width: ~'calc(100% / 8)';
138+
}
132139

133-
&.steps-9 li {
134-
width: ~'calc(100% / 9)';
135-
}
140+
&.steps-9 li {
141+
width: ~'calc(100% / 9)';
142+
}
136143

137-
&.steps-10 li {
138-
width: ~'calc(100% / 10)';
139-
}
144+
&.steps-10 li {
145+
width: ~'calc(100% / 10)';
146+
}
140147

141-
&.steps-11 li {
142-
width: ~'calc(100% / 11)';
143-
}
148+
&.steps-11 li {
149+
width: ~'calc(100% / 11)';
150+
}
144151

145-
li.default {
146-
pointer-events: none;
152+
li.default {
153+
pointer-events: none;
147154

148-
a:hover {
149-
color: @wz-color-current;
155+
a:hover {
156+
color: @wz-color-current;
157+
}
150158
}
151-
}
152159

153-
li.current,
154-
li.editing {
155-
pointer-events: none;
156-
}
160+
li.current,
161+
li.editing {
162+
pointer-events: none;
163+
}
157164

158-
li.current a:before {
159-
background-color: @wz-color-current;
160-
}
165+
li.current a:before {
166+
background-color: @wz-color-current;
167+
}
161168

162-
li.done a:before {
163-
background-color: @wz-color-done;
164-
}
169+
li.done a:before {
170+
background-color: @wz-color-done;
171+
}
165172

166-
li.optional a:before {
167-
background-color: @wz-color-optional;
168-
}
173+
li.optional a:before {
174+
background-color: @wz-color-optional;
175+
}
169176

170-
li.editing a:before {
171-
background-color: @wz-color-editing;
177+
li.editing a:before {
178+
background-color: @wz-color-editing;
179+
}
172180
}
173181
}

‎src/components/components/wizard-step.component.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
.step {
1+
:host {
22
height: auto;
33
width: 100%;
44
}

‎src/components/components/wizard-step.component.html‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1 @@
1-
<div class="step" *ngIf="selected" [ngClass]="{current: selected, done: completed}">
2-
<ng-content></ng-content>
3-
</div>
1+
<ng-content></ng-content>

‎src/components/components/wizard-step.component.ts‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {Component, Input, Output, EventEmitter} from '@angular/core';
1+
import {Component, Input, Output, EventEmitter, HostBinding} from '@angular/core';
22
import {MovingDirection} from '../util/MovingDirection';
33

44
@Component({
@@ -34,15 +34,22 @@ export class WizardStepComponent {
3434
* All steps previous to the currently selected step must be completed.
3535
* @type {boolean}
3636
*/
37+
@HostBinding('class.done')
3738
public completed = false;
3839

3940
/**
4041
* True if this step is currently selected and therefore currently visible to the user.
4142
* Always one step is selected at any time.
4243
* @type {boolean}
4344
*/
45+
@HostBinding('class.current')
4446
public selected = false;
4547

48+
@HostBinding('hidden')
49+
public get hidden(): boolean {
50+
return !this.selected;
51+
}
52+
4653
/**
4754
* True if this step is optional.
4855
* @type {boolean}

‎src/components/components/wizard.component.html‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
1-
<div class="wizard-centered">
2-
<wizard-navigation-bar class="nav-bar" *ngIf="navBarLocation == 'top'"></wizard-navigation-bar>
1+
<wizard-navigation-bar *ngIf="navBarLocation == 'top'"></wizard-navigation-bar>
32

4-
<div class="steps">
5-
<ng-content></ng-content>
6-
</div>
3+
<ng-content></ng-content>
74

8-
<wizard-navigation-bar class="nav-bar" *ngIf="navBarLocation == 'bottom'"></wizard-navigation-bar>
9-
</div>
5+
<wizard-navigation-bar *ngIf="navBarLocation == 'bottom'"></wizard-navigation-bar>

‎src/components/components/wizard.component.less‎

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,4 @@
1-
.wizard-centered {
1+
:host {
22
text-align: center;
33
margin: 0 auto;
4-
5-
.nav-bar {
6-
right: 0;
7-
bottom: 0;
8-
left: 0;
9-
margin: 0;
10-
width: 100%;
11-
height: auto;
12-
}
134
}

0 commit comments

Comments
 (0)