Skip to content

Commit

Permalink
fix(angular): support row layout
Browse files Browse the repository at this point in the history 
switch to css grid

fix #5
  • Loading branch information
@MRoncoroni @philippone
MRoncoroni authored and philippone committed Sep 28, 2020
1 parent c5e974c commit 5ec4fa6
Show file tree
Hide file tree
Showing 2 changed files with 79 additions and 66 deletions.
142 changes: 76 additions & 66 deletions src/angular/PseudoStateWrapperComponent.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,98 +26,92 @@ import { PermutationStatsObj } from '../share/PermutationsStatesObj';
@Component({
selector: 'pseudo-state-wrapper',
// TODO wrap permutations into own component
template: `
<div class="pseudo-states-addon__container" [class.row]="rowOrientation">
template: `
<pseudo-state-wrapper-container
[template]="storyTempl"
[parameters]="storyParams"
[addonDisabled]="isDisabled"
[pseudoState]="'Normal'"
[rowOrientation]="rowOrientation"
>
</pseudo-state-wrapper-container>
<ng-container *ngIf="!isDisabled">
<ng-container *ngFor="let state of pseudoStates">
<pseudo-state-wrapper-container
[template]="storyTempl"
[selector]="selector"
[componentSelector]="componentSelector"
[parameters]="storyParams"
[pseudoState]="state"
[rowOrientation]="rowOrientation"
>
</pseudo-state-wrapper-container>
</ng-container>
<ng-container *ngFor="let attrState of attributeStates">
<pseudo-state-wrapper-container
[template]="storyTempl"
[selector]="selector"
[componentSelector]="componentSelector"
[parameters]="storyParams"
[attribute]="attrState"
[pseudoState]="attrState.attr"
[rowOrientation]="rowOrientation"
>
</pseudo-state-wrapper-container>
</ng-container>
</ng-container>
<ng-container *ngFor="let permutation of permutationStates">
<pseudo-state-wrapper-container
[template]="storyTempl"
[parameters]="storyParams"
[addonDisabled]="isDisabled"
[pseudoState]="'Normal'"
[pseudoState]="permutation.label || permutation.attr"
[componentSelector]="componentSelector"
[permutation]="permutation"
[rowOrientation]="rowOrientation"
>
</pseudo-state-wrapper-container>
<ng-container *ngIf="!isDisabled">
<ng-container *ngFor="let state of pseudoStates">
<pseudo-state-wrapper-container
[template]="storyTempl"
[selector]="selector"
[componentSelector]="componentSelector"
[parameters]="storyParams"
[pseudoState]="state"
[rowOrientation]="rowOrientation"
>
</pseudo-state-wrapper-container>
</ng-container>
<ng-container *ngFor="let attrState of attributeStates">
<pseudo-state-wrapper-container
[template]="storyTempl"
[selector]="selector"
[componentSelector]="componentSelector"
[parameters]="storyParams"
[attribute]="attrState"
[pseudoState]="attrState.attr"
[rowOrientation]="rowOrientation"
>
</pseudo-state-wrapper-container>
</ng-container>
</ng-container>
</div>
<ng-container *ngFor="let permutation of permutationStates">
<div
class="pseudo-states-addon__container pseudo-states-addon__container--permutation"
*ngIf="!isDisabled"
[class.row]="rowOrientation"
>
<ng-container *ngFor="let state of pseudoStates">
<pseudo-state-wrapper-container
[template]="storyTempl"
[selector]="selector"
[componentSelector]="componentSelector"
[parameters]="storyParams"
[addonDisabled]="isDisabled"
[pseudoState]="permutation.label || permutation.attr"
[pseudoState]="state"
[permutation]="permutation"
[rowOrientation]="rowOrientation"
>
</pseudo-state-wrapper-container>
</ng-container>
<ng-container *ngFor="let attrState of attributeStates">
<pseudo-state-wrapper-container
[template]="storyTempl"
[selector]="selector"
[componentSelector]="componentSelector"
[parameters]="storyParams"
[permutation]="permutation"
[attribute]="attrState"
[pseudoState]="attrState.attr"
[rowOrientation]="rowOrientation"
>
</pseudo-state-wrapper-container>
<ng-container *ngFor="let state of pseudoStates">
<pseudo-state-wrapper-container
[template]="storyTempl"
[selector]="selector"
[componentSelector]="componentSelector"
[parameters]="storyParams"
[pseudoState]="state"
[permutation]="permutation"
[rowOrientation]="rowOrientation"
>
</pseudo-state-wrapper-container>
</ng-container>
<ng-container *ngFor="let attrState of attributeStates">
<pseudo-state-wrapper-container
[template]="storyTempl"
[selector]="selector"
[componentSelector]="componentSelector"
[parameters]="storyParams"
[permutation]="permutation"
[attribute]="attrState"
[pseudoState]="attrState.attr"
[rowOrientation]="rowOrientation"
>
</pseudo-state-wrapper-container>
</ng-container>
</div>
</ng-container>
</ng-container>
`,
encapsulation: ViewEncapsulation.None,
styles: [
`
:host,
pseudo-state-wrapper {
display: flex;
display: grid;
grid-auto-flow: column;
grid-gap: 15px;
}
:host(.row),
pseudo-state-wrapper.row {
flex-direction: column;
grid-auto-flow: row;
}
`,
container,
Expand Down Expand Up @@ -188,6 +182,22 @@ export class PseudoStateWrapperComponent implements OnInit, OnDestroy {

@HostBinding('class') hostOrientationClass = 'column';

@HostBinding('style.grid-template')
get columnCount(): string {
if (this.rowOrientation) {
return `repeat(${
1 + this.permutationStates.length
}, min-content) / repeat(${
1 + this.pseudoStates.length + this.attributeStates.length
}, min-content)`;
}
return `repeat(${
1 + this.pseudoStates.length + this.attributeStates.length
}, min-content) / repeat(${
1 + this.permutationStates.length
}, min-content)`;
}

constructor(private ngZone: NgZone) {}

/**
Expand Down
3 changes: 3 additions & 0 deletions src/share/styles.css.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,17 +34,20 @@ export const container = `
export const story = `
.pseudo-states-addon__story {
flex: 1 1 100%;
/* todo: remove margin */
margin: 0 0 10px 0;
}
.pseudo-states-addon__story.row {
flex: 1 1 100%;
/* todo: remove margin */
margin: 0 15px 15px 0;
}
`;

export const storyHeader = `
.pseudo-states-addon__story__header {
margin-bottom: 5px;
white-space: nowrap;
}
.pseudo-states-addon__story__header::first-letter {
Expand Down

0 comments on commit 5ec4fa6

Please sign in to comment.