Skip to content

Commit 1a19fc3

Browse files
PittanPittan
committed
一気にガッと作っちゃった
1 parent 349438e commit 1a19fc3

32 files changed

+500
-27
lines changed

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
"@angular/platform-browser-dynamic": "~7.2.0",
2323
"@angular/router": "~7.2.0",
2424
"core-js": "^2.5.4",
25+
"ngx-masonry": "^1.1.2",
2526
"rxjs": "~6.3.3",
2627
"tslib": "^1.9.0",
2728
"zone.js": "~0.8.26"
@@ -47,4 +48,4 @@
4748
"tslint": "~5.11.0",
4849
"typescript": "~3.2.2"
4950
}
50-
}
51+
}

‎src/app/app.component.html

Lines changed: 3 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,4 @@
1-
<!--The content below is only a placeholder and can be replaced.-->
2-
<div style="text-align:center">
3-
<h1>
4-
Welcome to {{ title }}!
5-
</h1>
6-
<img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
7-
</div>
8-
<h2>Here are some links to help you start: </h2>
9-
<ul>
10-
<li>
11-
<h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
12-
</li>
13-
<li>
14-
<h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
15-
</li>
16-
<li>
17-
<h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
18-
</li>
19-
</ul>
20-
1+
<app-profile-base></app-profile-base>
2+
<app-image-list [square]="imageListStyle === 2"></app-image-list>
3+
<div class="config" (click)="config()">CONFIG</div>
214
<router-outlet></router-outlet>

‎src/app/app.component.styl

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
@import '../defines.styl'
2+
@import '../functions.styl'
3+
4+
:host()
5+
display block
6+
min-height 100%
7+
padding 28px 16px 80px
8+
color $color-white
9+
10+
&.color-1
11+
background-color $color-primary-1
12+
13+
&.color-2
14+
background-color $color-primary-2
15+
16+
&.color-3
17+
background-color $color-primary-3
18+
19+
&.color-4
20+
background-color $color-primary-4
21+
22+
&.color-5
23+
background-color $color-primary-5
24+
25+
app-profile-base
26+
margin-bottom: 60px
27+
28+
.config
29+
position fixed
30+
bottom 0
31+
left 0
32+
width 100%
33+
height 60px
34+
background $color-white
35+
color #424242
36+
display flex
37+
align-items center
38+
justify-content center
39+
font-size 20px
40+
font-family $font-futura
41+
font-weight $font-futura-weight
42+
font-style $font-futura-style
43+
&:active
44+
opacity .8

‎src/app/app.component.ts

Lines changed: 32 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,39 @@
1-
import { Component } from '@angular/core';
1+
import { Component, HostBinding, OnInit } from '@angular/core';
2+
import { MatDialog } from '@angular/material';
3+
import { ModeSelectionDialogComponent } from './mode-selection-dialog/mode-selection-dialog.component';
24

35
@Component({
46
selector: 'app-root',
57
templateUrl: './app.component.html',
68
styleUrls: ['./app.component.styl']
79
})
8-
export class AppComponent {
9-
title = 'daily-cocoda-impl01';
10+
export class AppComponent implements OnInit {
11+
12+
imageListStyle: 1 | 2 = 1
13+
14+
@HostBinding('class') colorClass = 'color-1'
15+
16+
constructor(private dialog: MatDialog) {
17+
18+
}
19+
20+
ngOnInit() {
21+
22+
}
23+
24+
config() {
25+
const dialogRef = this.dialog.open(ModeSelectionDialogComponent, {
26+
width: '600px',
27+
});
28+
dialogRef.afterClosed().subscribe(res => {
29+
console.log(res);
30+
if (res.style) {
31+
this.imageListStyle = res.style;
32+
}
33+
if (res.color) {
34+
this.colorClass = `color-${res.color}`;
35+
}
36+
});
37+
}
38+
1039
}

‎src/app/app.module.ts

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,28 @@ import { NgModule } from '@angular/core';
44
import { AppRoutingModule } from './app-routing.module';
55
import { AppComponent } from './app.component';
66
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
7+
import { ProfileBaseComponent } from './profile-base/profile-base.component';
8+
import { ImageListComponent } from './image-list/image-list.component';
9+
import { NgxMasonryModule } from 'ngx-masonry';
10+
import { ModeSelectionDialogComponent } from './mode-selection-dialog/mode-selection-dialog.component';
11+
import { MatDialogModule } from '@angular/material';
712

813
@NgModule({
914
declarations: [
10-
AppComponent
15+
AppComponent,
16+
ProfileBaseComponent,
17+
ImageListComponent,
18+
ModeSelectionDialogComponent
1119
],
1220
imports: [
1321
BrowserModule,
1422
AppRoutingModule,
15-
BrowserAnimationsModule
23+
BrowserAnimationsModule,
24+
NgxMasonryModule,
25+
MatDialogModule
1626
],
1727
providers: [],
18-
bootstrap: [AppComponent]
28+
bootstrap: [AppComponent],
29+
entryComponents: [ModeSelectionDialogComponent]
1930
})
2031
export class AppModule { }

‎src/app/image-list/image-list.component.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<ngx-masonry
2+
[options]="myOptions"
3+
[updateLayout]="square">
4+
<ngxMasonryItem
5+
class="masonry-item"
6+
[class.square]="square"
7+
*ngFor="let item of masonryItems; let i = index">
8+
<div class="image">
9+
<div class="inner-image" [style.background-image]="'url(assets/' + (i+1) + '.jpg)'"></div>
10+
</div>
11+
</ngxMasonryItem>
12+
</ngx-masonry>

‎src/app/image-list/image-list.component.spec.ts

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { ImageListComponent } from './image-list.component';
4+
5+
describe('ImageListComponent', () => {
6+
let component: ImageListComponent;
7+
let fixture: ComponentFixture<ImageListComponent>;
8+
9+
beforeEach(async(() => {
10+
TestBed.configureTestingModule({
11+
declarations: [ ImageListComponent ]
12+
})
13+
.compileComponents();
14+
}));
15+
16+
beforeEach(() => {
17+
fixture = TestBed.createComponent(ImageListComponent);
18+
component = fixture.componentInstance;
19+
fixture.detectChanges();
20+
});
21+
22+
it('should create', () => {
23+
expect(component).toBeTruthy();
24+
});
25+
});

‎src/app/image-list/image-list.component.styl

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
@import '../../defines.styl'
2+
@import '../../functions.styl'
3+
4+
:host()
5+
display block
6+
overflow-x hidden
7+
8+
.masonry-item
9+
width: calc(50% - 8px)
10+
&:nth-child(4n+1)
11+
.image
12+
set-aspect-ratio(2, 1)
13+
&:nth-child(4n+4)
14+
.image
15+
set-aspect-ratio(2, 1)
16+
17+
&.square
18+
.image
19+
set-aspect-ratio(1,1)
20+
border-radius 0
21+
.inner-image
22+
top 0
23+
left 0
24+
height: 100%
25+
width: 100%
26+
border-radius 0
27+
28+
.image
29+
set-aspect-ratio(1, 1.2)
30+
background-color: $color-white
31+
width 100%
32+
margin-bottom: 16px
33+
border-radius 6px
34+
position relative
35+
36+
.inner-image
37+
background #aaa
38+
position absolute
39+
top 4px
40+
left 4px
41+
width: calc(100% - 8px)
42+
height: calc(100% - 8px)
43+
border-radius 4px
44+
image-cover()
45+

‎src/app/image-list/image-list.component.ts

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { Component, Input, OnInit } from '@angular/core';
2+
import { NgxMasonryOptions } from 'ngx-masonry';
3+
4+
@Component({
5+
selector: 'app-image-list',
6+
templateUrl: './image-list.component.html',
7+
styleUrls: ['./image-list.component.styl']
8+
})
9+
export class ImageListComponent implements OnInit {
10+
11+
@Input() square: boolean
12+
13+
masonryItems = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
14+
myOptions: NgxMasonryOptions = {
15+
gutter: 16,
16+
transitionDuration: '0.1s'
17+
}
18+
19+
constructor() { }
20+
21+
ngOnInit() {
22+
}
23+
24+
}

‎src/app/mode-selection-dialog/mode-selection-dialog.component.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<div class="label">Color</div>
2+
<div class="color-row">
3+
<div class="color color-1" (click)="selectColor(1)"></div>
4+
<div class="color color-2" (click)="selectColor(2)"></div>
5+
<div class="color color-3" (click)="selectColor(3)"></div>
6+
<div class="color color-4" (click)="selectColor(4)"></div>
7+
<div class="color color-5" (click)="selectColor(5)"></div>
8+
</div>
9+
10+
<div class="label">Style</div>
11+
<div class="style-row">
12+
<div class="style" (click)="selectStyle(1)">A</div>
13+
<div class="style" (click)="selectStyle(2)">B</div>
14+
</div>

‎src/app/mode-selection-dialog/mode-selection-dialog.component.spec.ts

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { ModeSelectionDialogComponent } from './mode-selection-dialog.component';
4+
5+
describe('ModeSelectionDialogComponent', () => {
6+
let component: ModeSelectionDialogComponent;
7+
let fixture: ComponentFixture<ModeSelectionDialogComponent>;
8+
9+
beforeEach(async(() => {
10+
TestBed.configureTestingModule({
11+
declarations: [ ModeSelectionDialogComponent ]
12+
})
13+
.compileComponents();
14+
}));
15+
16+
beforeEach(() => {
17+
fixture = TestBed.createComponent(ModeSelectionDialogComponent);
18+
component = fixture.componentInstance;
19+
fixture.detectChanges();
20+
});
21+
22+
it('should create', () => {
23+
expect(component).toBeTruthy();
24+
});
25+
});

‎src/app/mode-selection-dialog/mode-selection-dialog.component.styl

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
@import '../../defines.styl'
2+
@import '../../functions.styl'
3+
4+
.label
5+
font-size 20px
6+
font-family $font-futura
7+
font-weight $font-futura-weight
8+
font-style $font-futura-style
9+
margin-bottom 6px
10+
11+
.color-row
12+
display flex
13+
align-items center
14+
overflow-y scroll
15+
-webkit-overflow-scrolling touch
16+
height 100px
17+
padding 5px 10px
18+
.color
19+
flex none
20+
width 60px
21+
height 60px
22+
border-radius 45px
23+
margin-right 10px
24+
box-shadow 1.5px 1px 7px 0 rgba(152,157,166, 0.5);
25+
&.color-1
26+
background-color: $color-primary-1
27+
&.color-2
28+
background-color: $color-primary-2
29+
&.color-3
30+
background-color: $color-primary-3
31+
&.color-4
32+
background-color: $color-primary-4
33+
&.color-5
34+
background-color: $color-primary-5
35+
&.selected
36+
border 2px solid $color-white
37+
38+
&:active
39+
opacity .8
40+
&:last-child
41+
margin 0
42+
43+
44+
.style-row
45+
display flex
46+
align-items center
47+
.style
48+
display flex
49+
align-items center
50+
justify-content center
51+
font-family $font-futura
52+
font-weight $font-futura-weight
53+
font-style $font-futura-style
54+
set-aspect-ratio(1,1)
55+
flex none
56+
width calc(50% - 5px)
57+
border-radius 5px
58+
margin-right 10px
59+
box-shadow 1.5px 1px 7px 0 rgba(152,157,166, 0.5);
60+
&:active
61+
opacity .8
62+
&:last-child
63+
margin 0

0 commit comments

Comments
 (0)