Skip to content

Commit 4ce0827

Browse files
esoykeesoyke
committed
add header and footer, refactor theme libary to sweet metadata approach
1 parent 15b6e5c commit 4ce0827

22 files changed

+255
-57
lines changed

‎.angular-cli.json

+1
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
"outDir": "dist",
1010
"assets": [
1111
"assets",
12+
"assets/images",
1213
"favicon.ico"
1314
],
1415
"index": "index.html",

‎src/app/app.component.html

+6-1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,7 @@
1+
<header></header>
2+
<!-- <nav class='navbar page-header header'>
3+
Header
4+
</nav> -->
15
<theme-select></theme-select>
2-
<sidebar-nav></sidebar-nav>
6+
<sidebar-nav></sidebar-nav>
7+
<footer></footer>

‎src/app/app.component.scss

+14
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,20 @@ h1 {
4040
}
4141
}
4242

43+
// default theme colors, applied until overridden
44+
.customColorHeader{
45+
color: red;
46+
}
47+
48+
body {
49+
background-color: gray;
50+
}
51+
.header {
52+
background-color: darkgray;
53+
}
54+
// end default theme colors
55+
56+
4357
// collapsible sidebar
4458
// .wrapper {
4559
// display: flex;

‎src/app/app.module.ts

+4
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,8 @@ import { ThemeSelectComponent } from './theme-control/themeselect.component';
2525
import { ThemeService } from './theme-control/theme.service';
2626

2727
// custom AP2 components
28+
import { HeaderComponent } from './header/header.component';
29+
import { FooterComponent } from './footer/footer.component';
2830
import { SidebarNavComponent } from './sidebar-nav/sidebar-nav.component';
2931
import { SidebarButtonComponent } from './sidebar-nav/sidebar-button/sidebar-button.component';
3032
import { SidebarService } from './sidebar-nav/sidebar.service';
@@ -53,6 +55,8 @@ import { SidebarService } from './sidebar-nav/sidebar.service';
5355
MessagesComponent,
5456
HeroSearchComponent,
5557
ThemeSelectComponent,
58+
HeaderComponent,
59+
FooterComponent,
5660
SidebarNavComponent,
5761
SidebarButtonComponent,
5862
],

‎src/app/footer/footer.component.html

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<!--component html goes here -->
2+
<div class='footer customColorFooter'>
3+
Copyright 2017
4+
</div>

‎src/app/footer/footer.component.scss

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
// component css goes here
2+
3+
// theme color, can be overridden
4+
.customColorFooter{
5+
background-color: darkgray;
6+
}
7+
8+
.footer {
9+
position: fixed;
10+
left: 0;
11+
bottom: 0;
12+
width: 100%;
13+
color: white;
14+
text-align: center;
15+
}

‎src/app/footer/footer.component.ts

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
moduleId: module.id,
5+
selector: 'footer',
6+
templateUrl: 'footer.component.html',
7+
styleUrls: ['footer.component.scss']
8+
})
9+
export class FooterComponent {
10+
11+
}

‎src/app/footer/footer.module.ts

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
// Angular Imports
2+
import { NgModule } from '@angular/core';
3+
4+
// This Module's Components
5+
import { FooterComponent } from './footer.component';
6+
7+
@NgModule({
8+
imports: [
9+
10+
],
11+
declarations: [
12+
FooterComponent,
13+
],
14+
exports: [
15+
FooterComponent,
16+
]
17+
})
18+
export class FooterModule {
19+
20+
}

‎src/app/header/header.component.html

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<!--component html goes here -->
2+
<div class='header customColorHeader'>
3+
<!-- TODO retrieve background from theme -->
4+
<!-- <img [src]='assets/logo-2113.png' alt='Foo'> -->
5+
<!-- works for static value -->
6+
<!-- <img src='/assets/logo-2113.png'> -->
7+
<img src={{logo()}}>
8+
<div class='navelements'></div>
9+
</div>

‎src/app/header/header.component.scss

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
// component css goes here
2+
3+
// theme color, can be overridden
4+
.customColorHeader{
5+
background-color: darkgray;
6+
}
7+
8+
.header{
9+
height: 5em;
10+
}

‎src/app/header/header.component.ts

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { Component } from '@angular/core';
2+
import { ThemeService } from '../theme-control/theme.service';
3+
4+
@Component({
5+
moduleId: module.id,
6+
selector: 'header',
7+
templateUrl: 'header.component.html',
8+
styleUrls: ['header.component.scss']
9+
})
10+
export class HeaderComponent {
11+
12+
constructor(private themeService: ThemeService) { }
13+
14+
//logo = '/assets/logo-2113.png';
15+
logo(): any {
16+
//return '/assets/logo-2113.png';
17+
return this.themeService.logo();
18+
}
19+
}

‎src/app/header/header.module.ts

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
// Angular Imports
2+
import { NgModule } from '@angular/core';
3+
4+
// This Module's Components
5+
import { HeaderComponent } from './header.component';
6+
7+
@NgModule({
8+
imports: [
9+
10+
],
11+
declarations: [
12+
HeaderComponent,
13+
],
14+
exports: [
15+
HeaderComponent,
16+
]
17+
})
18+
export class HeaderModule {
19+
20+
}

‎src/app/in-memory-data.service.ts

+33-2
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,40 @@ export class InMemoryDataService implements InMemoryDbService {
1717
];
1818

1919
// AP2 custom themes
20+
//
21+
// At the moment I am structuring the custom color elements as such:
22+
// {name: 'val', value: '#FFF', tag: 'tagName', style: 'background'}
23+
// By default the defined style.color is applied to elements with the class of <name>
24+
25+
// If you wish to instead override a style other than color (for instance background) add optional element:
26+
// {name: 'val', value: '#FFF', style: 'background'}
27+
28+
// If you wish to apply customization to ALL elements of a given tab, in this example a head 1 tag:
29+
// {name: 'val', value: '#FFF', tag: 'h1'}
30+
//
31+
//
2032
const themes = [
21-
{ id: 1, name: 'Theme-Forward One', custom_color_background: 'lightblue', custom_color_header: 'darkblue', custom_color_sidebar: 'blue' },
22-
{ id: 2, name: 'Theme-Founders', custom_color_background: 'lightgreen', custom_color_header: 'darkgreen', custom_color_sidebar: 'green' },
33+
{ id: 1,
34+
name: 'Theme-Forward One',
35+
customs:[
36+
{ name: 'custom_color_background', value: 'lightblue', tag: 'body', style:'background'},
37+
{ name: 'customColorHeader', value: 'darkblue', style:'background'},
38+
{ name: 'customColorFooter', value: 'darkblue', style:'background'},
39+
{ name: 'customColorSidebar', value: 'blue', style:'background'},
40+
{ name: 'logo', value: '/assets/logo-1.jpg', image: 'logo'},
41+
]
42+
},
43+
{ id: 2,
44+
name: 'Theme-Founders',
45+
customs:[
46+
{ name: 'custom_color_background', value: 'lightgreen', tag: 'body', style:'background'},
47+
{ name: 'customColorHeader', value: 'darkgreen', style:'background'},
48+
{ name: 'customColorFooter', value: 'darkgreen', style:'background'},
49+
{ name: 'customColorSidebar', value: 'green', style:'background'},
50+
{ name: 'customColorSidebar', value: 'lightgreen'},
51+
{ name: 'logo', value: '/assets/logo-2113.png', image: 'logo'},
52+
]
53+
},
2354
]
2455

2556
const navlinks = [

‎src/app/sidebar-nav/sidebar-nav.component.html

+6-8
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
11
<!--component html goes here -->
2-
<div class='sidebarNav customColorSidebar d-flex flex-column'>
2+
<div class='sidebarNav d-flex flex-column '>
33

4-
<ul class="heroes">
5-
<li *ngFor="let link of navlinks">
6-
<!-- <a routerLink="/detail/{{hero.id}}"> -->
7-
<span class="badge p-2">{{link.name}}</span>
8-
<!-- </a> -->
9-
</li>
10-
</ul>
4+
<div *ngFor="let link of navlinks">
5+
<!-- <a routerLink="/detail/{{hero.id}}"> -->
6+
<span class="badge p-2 customColorSidebar d-flex justify-content-center align-items-center">{{link.name}}</span>
7+
<!-- </a> -->
8+
</div>
119

1210
<!-- <sidebar-button class="p-2">{{name}}</sidebar-button>
1311
<sidebar-button class="p-2">Flex item 2</sidebar-button>

‎src/app/sidebar-nav/sidebar-nav.component.scss

+27-3
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,34 @@
11
// private CSS styles
22

3+
// theme color, can be overridden
4+
.customColorSidebar{
5+
background-color: darkgray;
6+
}
7+
38
.sidebarNav {
49
position: absolute;
510
right: 0px;
6-
width: 10em;
7-
border: .25em solid lightslategray;
11+
// width: 15em;
12+
border: .1em solid lightslategray;
13+
border-radius: .5em;
814
padding: 10px;
915
margin-right: 2em;
10-
}
16+
17+
// ul {
18+
// padding: 3em;
19+
// }
20+
}
21+
22+
.badge {
23+
display: inline-block;
24+
width: 12em;
25+
height: 6em;
26+
font-size: small;
27+
color: white;
28+
line-height: 1em;
29+
margin: .5em;
30+
border-radius: .25em;
31+
}
32+
33+
// avoid bullet points
34+
ul{ list-style-type: none; }

‎src/app/sidebar-nav/sidebar.service.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ export class SidebarService {
4343
console.error(error); // log to console instead
4444

4545
// TODO: better job of transforming error for user consumption
46-
this.log(`${operation} failed: ${error.message}`);
46+
//this.log(`${operation} failed: ${error.message}`);
4747

4848
// Let the app keep running by returning an empty result.
4949
return of(result as T);

0 commit comments

Comments
 (0)