Skip to content

Commit

Permalink
Refactor CSS classes of wizard step indicators (#181)
Browse files Browse the repository at this point in the history 
* Replace `.editing` with `.current.done`
* Remove `.default` CSS class and use .navigable for assigning styles where needed
* Change the order of style definitions for step classes: (default) > optional > done > current > current.done
* Change the conditions of CSS classes assignment
* Handle `completed` state in addition to `done`
* Return `pointer-events: none` for non-navigable step indicators
  See also comments in the CSS code.
* Add a unit test to check the assignment of `completed` CSS class, based on the completion status of the whole wizard
* Remove a comment in CSS
  • Loading branch information
@earshinov @madoar
earshinov authored and madoar committed Mar 17, 2019
1 parent d9d7bab commit db439a9
Show file tree
Hide file tree
Showing 5 changed files with 164 additions and 239 deletions.
106 changes: 39 additions & 67 deletions src/lib/components/wizard-navigation-bar.component.horizontal.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,6 @@
border-radius: 100%;
}
.state-circle-hover(@dot-width, @dot-height, @dot-border-width) { }
.state-circle-nohover(@dot-width, @dot-height, @dot-border-width) { }

.state-circle-with-border(@color) {
border-width: @border-width;
Expand All @@ -57,9 +56,6 @@
.state-circle-with-border-hover(@color) {
border-color: darken(@color, 10%);
}
.state-circle-with-border-nohover(@color) {
border-color: @color;
}

.state-circle-with-border-and-content(@color) {
.state-circle-with-border(@color);
Expand All @@ -69,20 +65,13 @@
.state-circle-with-border-hover(@color);
color: darken(@color, 10%);
}
.state-circle-with-border-and-content-nohover(@color) {
.state-circle-with-border-nohover(@color);
color: @color;
}

.state-circle-with-background(@color) {
background-color: @color;
}
.state-circle-with-background-hover(@color) {
background-color: darken(@color, 5%);
}
.state-circle-with-background-nohover(@color) {
background-color: @color;
}

.state-circle-with-background-and-content(@color) {
.state-circle-with-background(@color);
Expand All @@ -91,9 +80,6 @@
.state-circle-with-background-and-content-hover(@color) {
.state-circle-with-background-hover(@color);
}
.state-circle-with-background-and-content-nohover(@color) {
.state-circle-with-background-nohover(@color);
}


// Helper mixin to define a step indicator stype like 'small', 'large-filled-symbols' etc.
Expand All @@ -108,7 +94,6 @@
//
// .state-default(@color) { /* default styles to apply to .step-indicator */ }
// .state-hover(@color) { /* styles to apply on hover */ }
// .state-nohover(@color) { /* styles to cancel out hover styles from the .state-hover mixin */ }
//
// Each mixin is given the base color for one of possible indicator states (default, current, done etc.).
// In addition to @color argument, in every helper mixin you can use @width, @height, @border-width variables
Expand All @@ -126,41 +111,42 @@
.state-circle(@width, @height, @border-width);
.state-default(@wz-color-default);
}
&.current .step-indicator {
.state-default(@wz-color-current);
&.optional .step-indicator {
.state-default(@wz-color-optional);
}
&.done .step-indicator {
&.done .step-indicator,
&.completed .step-indicator {
.state-default(@wz-color-done);
}
&.optional .step-indicator {
.state-default(@wz-color-optional);
&.current .step-indicator {
.state-default(@wz-color-current);
}
&.editing .step-indicator {
&.current.done .step-indicator,
&.current.completed .step-indicator {
.state-default(@wz-color-editing);
}

a:hover .step-indicator {
&.navigable a:hover .step-indicator {
.state-circle-hover(@width, @height, @border-width);
.state-hover(@wz-color-default);
}
&.current a:hover .step-indicator {
.state-hover(@wz-color-current);
&.navigable.optional a:hover .step-indicator {
.state-hover(@wz-color-optional);
}
&.done a:hover .step-indicator {
.state-hover(@wz-color-done);
&.navigable.done, &.navigable.completed {
a:hover .step-indicator {
.state-hover(@wz-color-done);
}
}
&.optional a:hover .step-indicator {
.state-hover(@wz-color-optional);
&.navigable.current a:hover .step-indicator {
.state-hover(@wz-color-current);
}
&.editing a:hover .step-indicator {
.state-hover(@wz-color-editing);
&.navigable.current.done, &.navigable.current.completed {
a:hover .step-indicator {
.state-hover(@wz-color-editing);
}
}
}

// default steps shouldn't change when hovered, because they aren't clickable
li.default a:hover .step-indicator {
.state-nohover(@wz-color-current);
}
}


Expand All @@ -169,35 +155,30 @@ aw-wizard-navigation-bar.horizontal {
&.small ul.steps-indicator {
.state-default(@color) { .state-circle-with-background(@color); }
.state-hover(@color) { .state-circle-with-background-hover(@color); }
.state-nohover(@color) { .state-circle-with-background-nohover(@color); }
.define-style(@width: @small-dot-width, @height: @small-dot-height, @border-width: 0);
}

&.large-filled ul.steps-indicator {
.state-default(@color) { .state-circle-with-background(@color); }
.state-hover(@color) { .state-circle-with-background-hover(@color); }
.state-nohover(@color) { .state-circle-with-background-nohover(@color); }
.define-style(@border-width: 0);
}

&.large-empty ul.steps-indicator {
.state-default(@color) { .state-circle-with-border(@color); }
.state-hover(@color) { .state-circle-with-border-hover(@color); }
.state-nohover(@color) { .state-circle-with-border-nohover(@color); }
.define-style();
}

&.large-filled-symbols ul.steps-indicator {
.state-default(@color) { .state-circle-with-background-and-content(@color); }
.state-hover(@color) { .state-circle-with-background-and-content-hover(@color); }
.state-nohover(@color) { .state-circle-with-background-and-content-nohover(@color); }
.define-style(@border-width: 0);
}

&.large-empty-symbols ul.steps-indicator {
.state-default(@color) { .state-circle-with-border-and-content(@color); }
.state-hover(@color) { .state-circle-with-border-and-content-hover(@color); }
.state-nohover(@color) { .state-circle-with-border-and-content-nohover(@color); }
.define-style();
}

Expand Down Expand Up @@ -271,39 +252,30 @@ aw-wizard-navigation-bar.horizontal {
pointer-events: none;
text-align: center;

a {
cursor: pointer;

.label {
display: inline-block;
padding-top: @text-padding-bottom;
color: @wz-color-current;
line-height: @text-height;
font-size: @text-height;
text-decoration: none;
text-transform: uppercase;
text-align: center;
font-weight: bold;
transition: 0.25s;
}
}
}

li a:hover .label {
color: darken(@wz-color-current, 20%);
}

// default steps shouldn't change when hovered, because they aren't clickable
li.default a {
cursor: auto;

.label {
a .label {
display: inline-block;
padding-top: @text-padding-bottom;
color: @wz-color-current;
line-height: @text-height;
font-size: @text-height;
text-decoration: none;
text-transform: uppercase;
text-align: center;
font-weight: bold;
transition: 0.25s;
}
}

li.navigable {
pointer-events: auto;

a {
cursor: pointer;
}

a:hover .label {
color: darken(@wz-color-current, 20%);
}
}
}
}
3 changes: 1 addition & 2 deletions src/lib/components/wizard-navigation-bar.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
<ul class="steps-indicator steps-{{numberOfWizardSteps}}">
<li [attr.id]="step.stepId" *ngFor="let step of wizardSteps"
[ngClass]="{
default: isDefault(step),
current: isCurrent(step),
done: isDone(step),
editing: isEditing(step),
optional: isOptional(step),
completed: isCompleted(step),
navigable: isNavigable(step)
}">
<a [awGoToStep]="step">
Expand Down
Loading

0 comments on commit db439a9

Please sign in to comment.