To-do list
+-
+
-
+
+
+
+ + ++
+
-
+
+
+
+ + ++
+
Trending
+-
+
- + UX + + arrow_drop_up + + 1 % + +
- + PHP + + arrow_drop_down + + 2 % + +
- + Big Data + + arrow_drop_up + + 5 % + +
- + Material Design + + arrow_drop_up + + 18 % + +
- + JavaScript + + arrow_drop_up + + 17 % + +
-
+
+
diff --git a/src/app/pages/dashboard/weatherWidget/weatherWidget.scss b/src/app/dashboard/weather/weather.component.scss
similarity index 81%
rename from src/app/pages/dashboard/weatherWidget/weatherWidget.scss
rename to src/app/dashboard/weather/weather.component.scss
index a1c3acc..dfeb28f 100644
--- a/src/app/pages/dashboard/weatherWidget/weatherWidget.scss
+++ b/src/app/dashboard/weather/weather.component.scss
@@ -1,10 +1,9 @@
-@import "../dashboard";
+@import '~theme/helpers';
.weather {
- height: 329px;
.mdl-card__supporting-text {
color: $card-text-color;
- background: url($images-root + 'weather_bck.png') center center no-repeat;
+ background: url('assets/images/weather_bck.png') center center no-repeat;
background-size: cover;
text-align: right;
padding-top: 38px;
@@ -20,11 +19,12 @@
.weather-description {
@include typo-weather-description;
position: relative;
+ color: white;
&:before {
width: 35px;
position: absolute;
right: 150px;
- content: url($images-root + 'cloudy_and_snow.svg');
+ content: url(assets/images/cloudy_and_snow.svg);
}
}
diff --git a/src/app/dashboard/weather/weather.component.ts b/src/app/dashboard/weather/weather.component.ts
new file mode 100644
index 0000000..2d4c2a6
--- /dev/null
+++ b/src/app/dashboard/weather/weather.component.ts
@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'weather',
+ styleUrls: ['./weather.component.scss'],
+ templateUrl: './weather.component.html',
+})
+export class WeatherComponent {}
diff --git a/src/app/error/error.component.html b/src/app/error/error.component.html
new file mode 100644
index 0000000..6621d16
--- /dev/null
+++ b/src/app/error/error.component.html
@@ -0,0 +1,22 @@
+
+
+
-
-Now
-
room
Minsk, Belarus
-
+
diff --git a/src/app/error/error.component.ts b/src/app/error/error.component.ts
new file mode 100644
index 0000000..16abd85
--- /dev/null
+++ b/src/app/error/error.component.ts
@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'error',
+ templateUrl: './error.component.html',
+})
+export class ErrorComponent {}
diff --git a/src/app/forms/employer-form/employer-form.component.html b/src/app/forms/employer-form/employer-form.component.html
new file mode 100644
index 0000000..e415a00
--- /dev/null
+++ b/src/app/forms/employer-form/employer-form.component.html
@@ -0,0 +1,212 @@
+
+
+
+
+
+
+
diff --git a/src/app/pages/widgets/employer-form/employer-form.scss b/src/app/forms/employer-form/employer-form.component.scss
similarity index 95%
rename from src/app/pages/widgets/employer-form/employer-form.scss
rename to src/app/forms/employer-form/employer-form.component.scss
index a486da9..8fda314 100644
--- a/src/app/pages/widgets/employer-form/employer-form.scss
+++ b/src/app/forms/employer-form/employer-form.component.scss
@@ -1,3 +1,5 @@
+@import '~theme/helpers';
+
.employer-form {
padding: 0;
width: $employer-form-width;
@@ -75,11 +77,6 @@
width: 100%;
}
- h3 {
- margin-bottom: 0;
- margin-top: 0;
- }
-
.mdl-textfield label {
color: $employer-form-color-darker;
}
@@ -94,10 +91,6 @@
}
.employer-form__contacts {
- h3 {
- margin-bottom: 40px;
- }
-
div {
.mdl-textfield.getmdl-select .mdl-textfield__input {
color: $employer-form-color-darker;
@@ -116,4 +109,4 @@
color: $employer-form-color-brighter;
}
}
-}
\ No newline at end of file
+}
diff --git a/src/app/forms/employer-form/employer-form.component.ts b/src/app/forms/employer-form/employer-form.component.ts
new file mode 100644
index 0000000..307f7ab
--- /dev/null
+++ b/src/app/forms/employer-form/employer-form.component.ts
@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'employer-form',
+ styleUrls: ['./employer-form.component.scss'],
+ templateUrl: 'employer-form.component.html',
+})
+export class EmployerFormComponent {}
diff --git a/src/app/forms/forms.component.ts b/src/app/forms/forms.component.ts
new file mode 100644
index 0000000..a2185ef
--- /dev/null
+++ b/src/app/forms/forms.component.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+import { UpgradeDomAfterViewInit } from 'helpers';
+
+@Component({
+ selector: 'forms',
+ template: `
+
+
+ Form
+Please complete the form
+
+
+
+
+
diff --git a/src/app/login/login.component.scss b/src/app/login/login.component.scss
new file mode 100644
index 0000000..d0d712f
--- /dev/null
+++ b/src/app/login/login.component.scss
@@ -0,0 +1,68 @@
+.login, .not-found {
+ .mdl-button {
+ font-weight: 500;
+ }
+ font-family: Roboto, Helvetica, sans-serif;
+ font-size: 14px;
+ .mdl-card__login.mdl-card, .mdl-card__not-found.mdl-card {
+ width: 450px;
+ min-height: 500px;
+ margin: auto;
+ .mdl-card__supporting-text {
+ min-height: inherit;
+ width: 100%;
+ padding: 32px 24px;
+ box-sizing: border-box;
+ .mdl-card__title-text {
+ font-size: 17px;
+ font-weight: bold;
+ }
+ .login-name {
+ font-size: 24px;
+ display: block;
+ padding: 0 0 8px 0;
+ }
+
+ .login-link {
+ padding: 12px 0;
+ }
+
+ .login-link, .login-link * {
+ display: inline-block;
+ font-size: 14px;
+ font-weight: inherit;
+ color: #dddddd;
+ }
+ .underlined {
+ display: inline-block;
+ border-bottom: 1px solid $color-light-blue;
+ }
+ .checkbox--inline {
+ display: inline;
+ padding-top: 4px;
+ padding-left: 35px;
+ }
+ .submit-cell {
+ display: flex;
+ }
+
+ .text--huge {
+ font-size: 120px;
+ font-weight: bold;
+ display: inline-block;
+ padding: 100px 0 40px 0;
+ }
+
+ .text--sorry {
+ font-size: 28px;
+ font-weight: 300;
+ }
+
+ .alignment--bottom-right {
+ position: absolute;
+ bottom: 39px;
+ right: 46px;
+ }
+ }
+ }
+}
diff --git a/src/app/login/login.component.ts b/src/app/login/login.component.ts
new file mode 100644
index 0000000..eff54b2
--- /dev/null
+++ b/src/app/login/login.component.ts
@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'login',
+ templateUrl: './login.component.html',
+})
+export class LoginComponent {}
diff --git a/src/app/pages/dashboard/cotoneasterCard/cotoneasterCard.component.ts b/src/app/pages/dashboard/cotoneasterCard/cotoneasterCard.component.ts
deleted file mode 100644
index 4386408..0000000
--- a/src/app/pages/dashboard/cotoneasterCard/cotoneasterCard.component.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Component, ViewEncapsulation } from '@angular/core';
-
-@Component({
- selector: 'cotoneaster-card',
- // styleUrls: ['./cotoneasterCard.scss'],
- templateUrl: './cotoneasterCard.html',
- // encapsulation: ViewEncapsulation.None
-})
-export class CotoneasterCardComponent {
-
- constructor() {
- console.log('CotoneasterCardComponent component');
- }
-}
diff --git a/src/app/pages/dashboard/cotoneasterCard/index.ts b/src/app/pages/dashboard/cotoneasterCard/index.ts
deleted file mode 100644
index ecbdab0..0000000
--- a/src/app/pages/dashboard/cotoneasterCard/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './cotoneasterCard.component';
diff --git a/src/app/pages/dashboard/dashboard.component.ts b/src/app/pages/dashboard/dashboard.component.ts
deleted file mode 100644
index 2384a40..0000000
--- a/src/app/pages/dashboard/dashboard.component.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'dashboard',
- styleUrls: ['./dashboard.scss'],
- templateUrl: './dashboard.html'
-})
-export class DashboardComponent {
-
- constructor() {
- console.log('dashboard component');
- }
-}
diff --git a/src/app/pages/dashboard/dashboard.routing.ts b/src/app/pages/dashboard/dashboard.routing.ts
deleted file mode 100644
index 7a461eb..0000000
--- a/src/app/pages/dashboard/dashboard.routing.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Routes, RouterModule } from '@angular/router';
-
-import { DashboardComponent } from './dashboard.component';
-import { ModuleWithProviders } from '@angular/core';
-
-export const routes: Routes = [
- {
- path: '', component: DashboardComponent
- }
-];
-
-export const routing: ModuleWithProviders = RouterModule.forChild(routes);
diff --git a/src/app/pages/dashboard/dashboard.scss b/src/app/pages/dashboard/dashboard.scss
deleted file mode 100644
index fa56781..0000000
--- a/src/app/pages/dashboard/dashboard.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import "../../theme/theme";
-
diff --git a/src/app/pages/dashboard/index.ts b/src/app/pages/dashboard/index.ts
deleted file mode 100644
index bbaa54e..0000000
--- a/src/app/pages/dashboard/index.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export * from './dashboard.component';
-export * from './cotoneasterCard';
-export * from './weatherWidget';
-export * from './lineChart';
-export * from './tableCard';
-export * from './robotCard';
-export * from './todoList';
-export * from './trendingWidget';
-export * from './pieChart';
diff --git a/src/app/pages/dashboard/lineChart/index.ts b/src/app/pages/dashboard/lineChart/index.ts
deleted file mode 100644
index ca8ca45..0000000
--- a/src/app/pages/dashboard/lineChart/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './lineChart.component';
diff --git a/src/app/pages/dashboard/lineChart/lineChart.component.ts b/src/app/pages/dashboard/lineChart/lineChart.component.ts
deleted file mode 100644
index 623ad27..0000000
--- a/src/app/pages/dashboard/lineChart/lineChart.component.ts
+++ /dev/null
@@ -1,285 +0,0 @@
-import { Component, ViewEncapsulation } from '@angular/core';
-
-@Component({
- selector: 'line-chart',
- styleUrls: ['./lineChart.scss'],
- templateUrl: './lineChart.html',
- encapsulation: ViewEncapsulation.None
-})
-export class LineChartComponent {
-
-/*
- constructor(columns, color, margin, data, nv) {
- this.columns = columns;
- this.color = color;
- this.margin = margin;
- this.data = data;
- this.nv = nv;
- this.maxX = 130;
- this.drawStep = 6; // It shows how many points will be drawn in one step
- this.durationResizeAnimation = 500;
- }
-
- _addSvgContainer() {
- this.svg = d3.select('.line-chart__container')
- .append('div')
- .append('svg');
- }
-
- _getSvgSizes() {
- let svgWidth = getComputedStyle(this.svg[0][0]).width,
- svgHeight = getComputedStyle(this.svg[0][0]).height;
- this.svgWidth = svgWidth.slice(0, svgWidth.length - 2);
- this.svgHeight = svgHeight.slice(0, svgHeight.length - 2) - this.margin;
- }
-
- _addAxisLabels() {
- d3.selectAll('.line-chart__container svg .y-axis-label')
- .remove();
- d3.select('.line-chart__container svg')
- .append('text')
- .attr('class', 'y-axis-label')
- .attr('x', '-72')
- .attr('y', '12')
- .attr('transform', 'rotate(-90)')
- .text('REVENUE');
- d3.select('.line-chart__container svg')
- .append('text')
- .attr('class', 'x-axis-label')
- .text('TIME');
- }
-
- _buildBackground() {
- this._addSvgContainer();
- this._getSvgSizes();
-
- let bars = [];
- for (let i = 0; i < this.columns; i++) {
- bars.push(this.svgHeight);
- }
-
- this.barsLayout = this.svg.append('g')
- .attr('class', 'bars')
- .attr('transform', 'translate(' + this.margin + ', 0)')
- .selectAll('rect')
- .data(bars)
- .enter()
- .append('rect');
-
- this._addAxisLabels();
-
- this._setBackgroundSizes();
- }
-
- _setBackgroundSizes() {
- let availableBarWidth = (this.svgWidth - 2 * this.margin) / this.columns,
- barWidth = availableBarWidth / 2;
- this.barsLayout
- .attr('fill', this.color)
- .attr('y', this.margin)
- .attr('height', function (d, i) {
- return d;
- })
- .transition().duration(this.durationResizeAnimation)
- .attr('width', barWidth)
- .attr('x', function (d, i) {
- return i * availableBarWidth;
- });
- d3.select('.line-chart__container svg .x-axis-label')
- .transition().duration(this.durationResizeAnimation)
- .attr('x', this.svgWidth - this.margin - 30)
- .attr('y', this.svgHeight - (this.svgHeight) / 4 + this.margin + 14);
- }
-
- drawChart() {
- this._buildBackground();
- this._buildLegend();
- this._buildNvGraph();
- this._animateGraphs();
- }
-
- _buildNvGraph() {
- this._tuneNvGraph();
-
- nv.addGraph(() => {
- this.svg.datum(this.data)
- .transition().duration(0)
- .call(this.lineChart);
- nv.utils.windowResize(this.resizeBackground.bind(this));
- nv.utils.windowResize(this.lineChart.update);
- return this.lineChart;
- });
- }
-
- _tuneNvGraph() {
- this.lineChart = nv.models.lineChart()
- .margin({top: this.margin, right: this.margin, bottom: 0, left: this.margin})
- .useInteractiveGuideline(true)
- .xDomain([0, 13.6])
- .yDomain([-1.01, 3])
- .showLegend(false)
- .showYAxis(true)
- .showXAxis(true)
- .pointSize(5);
-
- this.lineChart.tooltip.enabled(false);
- this.lineChart.interactiveLayer.tooltip.enabled(false);
-
- this.lineChart.xAxis
- .showMaxMin(false)
- .tickValues([0])
- .tickFormat(d3.format('c'));
-
- this.lineChart.yAxis
- .showMaxMin(false)
- .ticks(10)
- .tickFormat(d3.format('c'));
- }
-
- _buildLegend() {
- let legend = d3.select('.line-chart__container')
- .append('div')
- .attr('class', 'legend')
- .selectAll('.legend__item')
- .data(this.data)
- .enter()
- .append('div')
- .attr('class', 'legend__item');
-
- legend.append('div')
- .attr('class', 'legend__mark pull-left')
- .style('background-color', d => {
- return d.color;
- });
-
- legend.append('div')
- .attr('class', 'legend__text')
- .text(d => {
- return d.key;
- });
- }
-
- resizeBackground() {
- this._getSvgSizes();
- this._setBackgroundSizes();
- }
-
- _animateGraphs() {
- let i = 1;
- this.timer = setInterval(() => {
- this._calcAllGraphs(i);
- this._drawNextStep(i);
- i++;
- this._checkEndOfAnimation(i);
- }, 15);
- }
-
- _drawNextStep(i) {
- if (i % this.drawStep == 0 || i == this.maxX) {
- this.lineChart.update();
- }
- }
-
- _checkEndOfAnimation(i) {
- if (i == this.maxX + 1) {
- this.lineChart.duration(this.durationResizeAnimation);
- this.data[1].fillOpacity = 0.11;
- this.lineChart.update();
- clearInterval(this.timer);
- }
- }
-
- _calcAllGraphs(i) {
- this._calcFirstGraph(i);
- this._calcSecondGraph(i);
- this._calcThirdGraph(i);
- }
-
- _calcFirstGraph(i) {
- const INTERVAL_1 = 28,
- INTERVAL_2 = 71,
- INTERVAL_3 = 110;
- let graphAwesome = this.data[0].values;
-
- if (i < INTERVAL_1) {
- graphAwesome.push({x: i / 10, y: (.0343 * i * i - .67 * i) / 14});
- }
- else {
- if (i < INTERVAL_2) {
- graphAwesome.push({x: i / 10, y: -(i - 71) * (i - 71) / 1026 + 2.378});
- }
- else {
- if (i < INTERVAL_3) {
- graphAwesome.push({x: i / 10, y: -4 / (i - 43) + 2.53});
- }
- else {
- graphAwesome.push({x: i / 10, y: ((i - 114) * (i - 114) * (i - 114)) / 13000 + 2.476});
- }
- }
- }
- }
-
- _calcSecondGraph(i) {
- const INTERVAL_1 = 30,
- INTERVAL_2 = 82;
- let graphGood = this.data[1].values;
-
- if (i < INTERVAL_1) {
- graphGood.push({x: i / 10, y: (.03255 * i * i - .96 * i) / 16});
- }
- else {
- if (i < INTERVAL_2) {
- graphGood.push({x: i / 10, y: (-.01055 * (i - 80.3) * (i - 80.3) + 27) / 15});
- }
- else {
- graphGood.push({x: i / 10, y: (((i / 2) - 45) * ((i / 2) - 45) * ((i / 2) - 45)) / 15000 + 1.805});
- }
- }
- }
-
- _calcThirdGraph(i) {
- const INTERVAL_1 = 31,
- INTERVAL_2 = 103;
- let graphFail = this.data[2].values;
-
- if (i < INTERVAL_1) {
- graphFail.push({x: i / 10, y: (.02255 * i * i - .91 * i) / 13});
- }
- else {
- if (i < INTERVAL_2) {
- graphFail.push({x: i / 10, y: .82 * Math.sin((i - 45) / 21)});
- }
- else {
- graphFail.push({x: i / 10, y: -(i - 130) * (i - 130) * (i - 130) / 64000});
- }
- }
- }
-}
-
-let data = [
- {
- values: [{x: 0, y: 0}],
- key: 'Awesome',
- color: 'rgb(80, 150, 215)'
- },
- {
- values: [{x: 0, y: 0}],
- key: 'Good',
- color: 'rgb(0, 188, 212)',
- fillOpacity: 0.00001,
- area: true
- },
- {
- values: [{x: 0, y: 0}],
- key: 'Fail',
- color: 'rgb(255, 82, 82)'
- }
-];
-let lineChartContainer = document.querySelector('.line-chart__container');
-if (lineChartContainer) {
- let lineChart = new LineChart(7, '#4a4a4a', 20, data, nv);
- lineChart.drawChart();
-}
-*/
-
-}
diff --git a/src/app/pages/dashboard/lineChart/lineChart.html b/src/app/pages/dashboard/lineChart/lineChart.html
deleted file mode 100644
index 040bd6f..0000000
--- a/src/app/pages/dashboard/lineChart/lineChart.html
+++ /dev/null
@@ -1,10 +0,0 @@
-
+
+
+
+
+
+
+ DARKBOARD
+
+
+ Sign in
+ Enter fields to sign in to DARKBOARD
+
+
+
+ Don't have account?
+
+
+
+
+
+
-
diff --git a/src/app/pages/dashboard/pieChart/index.ts b/src/app/pages/dashboard/pieChart/index.ts
deleted file mode 100644
index 70e269e..0000000
--- a/src/app/pages/dashboard/pieChart/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './pieChart.component'
diff --git a/src/app/pages/dashboard/pieChart/pieChart.component.ts b/src/app/pages/dashboard/pieChart/pieChart.component.ts
deleted file mode 100644
index 600de15..0000000
--- a/src/app/pages/dashboard/pieChart/pieChart.component.ts
+++ /dev/null
@@ -1,164 +0,0 @@
-import { Component, OnInit, ViewEncapsulation } from '@angular/core';
-
-@Component({
- selector: 'pie-chart',
- styleUrls: ['./pieChart.scss'],
- templateUrl: './pieChart.html',
- encapsulation: ViewEncapsulation.None
-})
-export class PieChartComponent implements OnInit{
-
- constructor() {
- console.log('PieChartComponent component');
- }
-
- ngOnInit() {
- {
- var colors = [
- 'rgba(96, 196, 150, 1)',
- 'rgba(80, 150, 215, 1)',
- 'rgba(0, 188, 212, 1)',
- 'rgba(116, 199, 209, 1)',
- 'rgba(255, 82, 82, 1)',
- 'rgba(0, 0, 0, 0)'
- ];
-
- var data = [
- {
- 'key': 'Coding',
- 'y': 0,
- 'end': 9
- },
- {
- 'key': 'Eating',
- 'y': 0,
- 'end': 3
- },
- {
- 'key': 'Sleeping',
- 'y': 0,
- 'end': 3
- },
- {
- 'key': 'Meditation',
- 'y': 0,
- 'end': 3
- },
- {
- 'key': 'The fight against evil',
- 'y': 0,
- 'end': 6
- }
- ,
- {
- 'key': 'Pending',
- 'y': 23.9
- }
- ];
-
- /* nv.addGraph(() => {
- var innerRadius = 0.86,
- outerRadius = 1.02;
-
- var pieChart = nv.models.pieChart()
- .x(d => {return d.key;})
- .y(d => {return d.y;})
- .showLabels(false)
- .donut(true)
- .growOnHover(true)
- .padAngle(.04)
- .cornerRadius(0)
- .margin({'left': -10, 'right': -10, 'top': -10, 'bottom': -10})
- .color(colors)
- .arcsRadius([{'inner': innerRadius, 'outer': outerRadius},
- {'inner': innerRadius, 'outer': outerRadius},
- {'inner': innerRadius, 'outer': outerRadius},
- {'inner': innerRadius, 'outer': outerRadius},
- {'inner': innerRadius, 'outer': outerRadius}
- ])
- .showLegend(false)
- .title('0 hours')
- .titleOffset(10);
-
- pieChart.tooltip.enabled(true)
- .hideDelay(0)
- .headerEnabled(false)
- .contentGenerator(d => {
- if (d === null) {
- return '';
- }
- d3.selectAll('.nvtooltip').classed('mdl-tooltip', true);
- return d.data.y + ' hours';
- });
-
- var container = d3.select('.pie-chart__container')
- .append('div')
- .append('svg')
- .datum(data)
- .transition().duration(1200)
- .call(pieChart);
-
- var h = 0, i = 0;
- var timer = setInterval(animatePie, 70, data);
-
- function animatePie(data) {
- if (i < data.length - 1) {
- if (data[i].y < data[i].end) {
- data[i].y++;
- data[data.length - 1].y--;
- pieChart.title((h + 1) + ' hours');
- h++;
- }
- else {
- i++;
- }
- }
- else {
- data.splice(data.length - 1, 1);
- clearInterval(timer);
- return;
- }
- if (container[0][0]) {
- pieChart.update();
- }
- else {
- clearInterval(timer);
- }
- }
-
- d3.select('.pie-chart__container .nv-pie .nv-pie')
- .append('image')
- .attr('width', '30')
- .attr('height', '30')
- .attr('xlink:href', 'images/watch_white.svg')
- .attr('transform', 'translate(-15,-35)');
-
- var color = d3.scale.ordinal().range(colors);
-
- var legend = d3.select('.pie-chart__container')
- .append('div')
- .attr('class', 'legend')
- .selectAll('.legend__item')
- .data(data.slice(0, data.length - 1))
- .enter()
- .append('div')
- .attr('class', 'legend__item');
-
- legend.append('div')
- .attr('class', 'legend__mark pull-left')
- .style('background-color', d => {
- return color(d.key);
- });
-
- legend.append('div')
- .attr('class', 'legend__text')
- .text(d => {
- return d.key;
- });
-
- return pieChart;
- });*/
- }
-
- }
-}
diff --git a/src/app/pages/dashboard/pieChart/pieChart.html b/src/app/pages/dashboard/pieChart/pieChart.html
deleted file mode 100644
index fabdd17..0000000
--- a/src/app/pages/dashboard/pieChart/pieChart.html
+++ /dev/null
@@ -1,10 +0,0 @@
-
-
- Startup Financing Cycle
-
-
-
-
-
-
-
diff --git a/src/app/pages/dashboard/robotCard/index.ts b/src/app/pages/dashboard/robotCard/index.ts
deleted file mode 100644
index af88b6a..0000000
--- a/src/app/pages/dashboard/robotCard/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './robotCard.component';
diff --git a/src/app/pages/dashboard/robotCard/robotCard.component.ts b/src/app/pages/dashboard/robotCard/robotCard.component.ts
deleted file mode 100644
index 829da75..0000000
--- a/src/app/pages/dashboard/robotCard/robotCard.component.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Component, ViewEncapsulation } from '@angular/core';
-
-@Component({
- selector: 'robot-card',
- styleUrls: ['./robotCard.scss'],
- templateUrl: './robotCard.html',
- encapsulation: ViewEncapsulation.None
-})
-export class RobotCardComponent {
-
-}
diff --git a/src/app/pages/dashboard/tableCard/index.ts b/src/app/pages/dashboard/tableCard/index.ts
deleted file mode 100644
index 30c727c..0000000
--- a/src/app/pages/dashboard/tableCard/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './tableCard.component';
diff --git a/src/app/pages/dashboard/tableCard/tableCard.component.ts b/src/app/pages/dashboard/tableCard/tableCard.component.ts
deleted file mode 100644
index d378290..0000000
--- a/src/app/pages/dashboard/tableCard/tableCard.component.ts
+++ /dev/null
@@ -1,104 +0,0 @@
-import { Component, ViewEncapsulation } from '@angular/core';
-
-@Component({
- selector: 'table-card',
- styleUrls: ['./tableCard.scss'],
- templateUrl: './tableCard.html',
- encapsulation: ViewEncapsulation.None
-})
-export class TableCardComponent {
-
- tableHeader: string[];
- data: Object[];
-
- constructor() {
- let task1 = document.querySelector('#task1'),
- task2 = document.querySelector('#task2'),
- task4 = document.querySelector('#task4');
-
- /* if (task1 && task2 && task4) {
- task1.addEventListener('mdl-componentupgraded', () => {
- task1.MaterialProgress.setProgress(44);
- });
- task2.addEventListener('mdl-componentupgraded', () => {
- task2.MaterialProgress.setProgress(14);
- });
- task4.addEventListener('mdl-componentupgraded', () => {
- task4.MaterialProgress.setProgress(31);
- });
-
- setTimeout(() => {
- document.querySelector('.projects-table .is-selected td > label').classList.add('is-checked');
- componentHandler.upgradeDom();
- }, 100);
- }*/
-
- this.tableHeader = ['Project', 'Responsible', 'Client contact', 'Deadline', 'Progress'];
- this.data = [
- {
- project: 'Darkboard',
- responsible: [
- {
- color: 'mint',
- name: 'Alex'
- },
- {
- color: 'primary',
- name: 'Dina'
- },
- {
- color: 'cerulean',
- name: 'Misha'
- }
- ],
- email: 'Luke@skywalker.com',
- deadline: 'Jun 15',
- progress: 44,
- isSelected: false
- },
- {
- project: 'Big financial app',
- responsible: [
- {
- color: 'baby-blue',
- name: 'Vlada'
- }
- ],
- email: 'Boss@financial.com',
- deadline: 'Mar 1',
- progress: 14,
- isSelected: true
- },
- {
- project: 'New Year office decoration',
- responsible: [
- {
- color: 'primary',
- name: 'Dina'
- },
- {
- color: 'baby-blue',
- name: 'Vlada'
- }
- ],
- email: 'info@creativeit.io',
- deadline: 'Dec 25',
- progress: 100,
- isSelected: false
- },
- {
- project: "Don't worry, be happy!!!",
- responsible: [
- {
- color: 'secondary',
- name: 'Everybody'
- }
- ],
- email: 'Contact@happyness.com',
- deadline: 'Yesterday',
- progress: 31,
- isSelected: false
- }
- ]
- }
-}
diff --git a/src/app/pages/dashboard/tableCard/tableCard.scss b/src/app/pages/dashboard/tableCard/tableCard.scss
deleted file mode 100644
index e720d89..0000000
--- a/src/app/pages/dashboard/tableCard/tableCard.scss
+++ /dev/null
@@ -1,45 +0,0 @@
-@import "../dashboard";
-
-.projects-table {
- width: 100%;
- tbody {
- td:nth-child(1) {
- width: 1px;
- }
- td:nth-child(2) {
- width: 300px;
- }
- td:nth-child(3) {
- width: 240px;
- }
- td:nth-child(4) {
- width: 300px;
- }
- td:nth-child(5) {
- width: 200px;
- }
- td:nth-child(6) {
- width: 300px;
- .mdl-progress {
- cursor: pointer;
- min-width: 80px;
- max-width: 200px;
- }
- }
- .task-done {
- padding-top: 6px !important;
- padding-bottom: 0 !important;
- color: $progress-main-color;
- .material-icons {
- cursor: pointer;
- }
- }
- }
-}
-
-@media screen and (max-width: 848px) {
- .projects-table {
- display: none;
- }
-}
-
diff --git a/src/app/pages/dashboard/todoList/index.ts b/src/app/pages/dashboard/todoList/index.ts
deleted file mode 100644
index 8a23c1c..0000000
--- a/src/app/pages/dashboard/todoList/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './todoList.component';
diff --git a/src/app/pages/dashboard/todoList/todoList.component.ts b/src/app/pages/dashboard/todoList/todoList.component.ts
deleted file mode 100644
index 49a1add..0000000
--- a/src/app/pages/dashboard/todoList/todoList.component.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Component, ViewEncapsulation } from '@angular/core';
-
-@Component({
- selector: 'todo-list',
- styleUrls: ['./todoList.scss'],
- templateUrl: './todoList.html',
- encapsulation: ViewEncapsulation.None
-})
-export class TodoListComponent {
-}
diff --git a/src/app/pages/dashboard/todoList/todoList.html b/src/app/pages/dashboard/todoList/todoList.html
deleted file mode 100644
index b6e0a70..0000000
--- a/src/app/pages/dashboard/todoList/todoList.html
+++ /dev/null
@@ -1,17 +0,0 @@
-
-
- My Day
-
-
-
-
-
-
-
diff --git a/src/app/pages/dashboard/trendingWidget/index.ts b/src/app/pages/dashboard/trendingWidget/index.ts
deleted file mode 100644
index 566db77..0000000
--- a/src/app/pages/dashboard/trendingWidget/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './trendingWidget.component';
diff --git a/src/app/pages/dashboard/trendingWidget/trendingWidget.component.ts b/src/app/pages/dashboard/trendingWidget/trendingWidget.component.ts
deleted file mode 100644
index d8092e5..0000000
--- a/src/app/pages/dashboard/trendingWidget/trendingWidget.component.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Component, ViewEncapsulation } from '@angular/core';
-
-@Component({
- selector: 'trending-widget',
- styleUrls: ['./trendingWidget.scss'],
- templateUrl: './trendingWidget.html',
- encapsulation: ViewEncapsulation.None
-})
-export class TrendingWidgetComponent {
-}
diff --git a/src/app/pages/dashboard/trendingWidget/trendingWidget.html b/src/app/pages/dashboard/trendingWidget/trendingWidget.html
deleted file mode 100644
index c6303fc..0000000
--- a/src/app/pages/dashboard/trendingWidget/trendingWidget.html
+++ /dev/null
@@ -1,44 +0,0 @@
-
-
- To-do list
-
-
- -
-
-
-
-
-
-
-
diff --git a/src/app/pages/dashboard/weatherWidget/index.ts b/src/app/pages/dashboard/weatherWidget/index.ts
deleted file mode 100644
index 1e41a64..0000000
--- a/src/app/pages/dashboard/weatherWidget/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './weatherWidget.component';
diff --git a/src/app/pages/dashboard/weatherWidget/weatherWidget.component.ts b/src/app/pages/dashboard/weatherWidget/weatherWidget.component.ts
deleted file mode 100644
index 952e543..0000000
--- a/src/app/pages/dashboard/weatherWidget/weatherWidget.component.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Component, ViewEncapsulation } from '@angular/core';
-
-@Component({
- selector: 'weather-widget',
- styleUrls: ['./weatherWidget.scss'],
- templateUrl: './weatherWidget.html',
- encapsulation: ViewEncapsulation.None
-})
-export class WeatherWidgetComponent {
-
- constructor() {
- console.log('WeatherWidgetComponent component');
- }
-}
diff --git a/src/app/pages/index.ts b/src/app/pages/index.ts
deleted file mode 100644
index b58b6c9..0000000
--- a/src/app/pages/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './dashboard';
diff --git a/src/app/pages/pages-routing.module.ts b/src/app/pages/pages-routing.module.ts
new file mode 100644
index 0000000..e96cec6
--- /dev/null
+++ b/src/app/pages/pages-routing.module.ts
@@ -0,0 +1,21 @@
+import { Routes, RouterModule } from '@angular/router';
+import { NgModule, ModuleWithProviders } from '@angular/core';
+
+import { PagesComponent } from './pages.component';
+import { ErrorComponent } from 'error/error.component';
+import { LoginComponent } from 'login/login.component';
+
+@NgModule({
+ imports: [RouterModule.forChild([
+ {
+ path: '',
+ component: PagesComponent,
+ children: [
+ { path: '404', component: ErrorComponent },
+ { path: 'login', component: LoginComponent },
+ ],
+ },
+ ])],
+ exports: [RouterModule],
+})
+export class PagesRoutingModule {}
diff --git a/src/app/pages/pages.component.ts b/src/app/pages/pages.component.ts
index a08d65b..de567bd 100644
--- a/src/app/pages/pages.component.ts
+++ b/src/app/pages/pages.component.ts
@@ -2,12 +2,6 @@ import { Component } from '@angular/core';
@Component({
selector: 'pages',
- templateUrl: './pages.html'
+ template: `
-
- Trending
-
-
--
-
- - UX - - arrow_drop_up - - 1 % - -
- - PHP - - arrow_drop_down - - 2 % - -
- - Big Data - - arrow_drop_up - - 5 % - -
- - Material Design - - arrow_drop_up - - 18 % - -
- - JavaScript - - arrow_drop_up - - 17 % - -
-
-
-
`;
- }
-
- insertInput() {
- let newLi = document.createElement('li');
- newLi.classList.add('mdl-list__item');
- newLi.innerHTML = this._prepareTemplate({
- id: "input"
- });
- this.$todoList.appendChild(newLi);
- View.upgradeNewMdlComponents();
- let inputSpan = document.querySelector('.todo .mdl-list li:last-child .mdl-checkbox__label');
- inputSpan.innerHTML = this.inputTemplate;
- View.upgradeNewMdlComponents();
- document.querySelector('.todo .mdl-list__item:last-child .mdl-textfield__input').focus();
- }
-
- _prepareTemplate(data) {
- return `
-
-
-
-
-
`;
- }
-
- showAll(database) {
- this.$todoList.innerHTML = '';
- database.forEach(data => {
- let newLi = document.createElement('li');
- newLi.classList.add('mdl-list__item');
- newLi.innerHTML = this._prepareTemplate(data);
- this.$todoList.appendChild(newLi);
- });
- View.upgradeNewMdlComponents();
- }
-
- show(data) {
- let newLi = document.createElement('li');
- newLi.classList.add('mdl-list__item');
- newLi.innerHTML = this._prepareTemplate(data);
- this.$todoList.appendChild(newLi);
- View.upgradeNewMdlComponents();
- }
-
- static upgradeNewMdlComponents() {
- componentHandler.upgradeDom();
- }
- }
-
- /*==========CONTROLLER==========*/
-
- class Controller {
- constructor(model, view) {
- this.$addItemButton = document.querySelector('.todo .mdl-button--fab');
- this.$removeCompletedButton = document.querySelector('.todo .mdl-card__actions .mdl-button');
- this.model = model;
- this.view = view;
-
- this.view.$todoList.addEventListener('mouseup', event => {
- let clickTarget = event.path ? event.path[1] : event.target;
- if (clickTarget.hasAttribute('deleteItem')) {
- let id = clickTarget.getAttribute('for');
- this.model.deleteItem(id);
- this.removeItem(id);
- } else {
- clickTarget = event.target;
- if (clickTarget.hasAttribute('checkboxitem')) {
- this.check(clickTarget);
- } else {
- clickTarget = clickTarget.parentNode;
- this.check(clickTarget);
- }
- }
- });
-
- this.$addItemButton.addEventListener('click', () => {
- this.$addItemButton.setAttribute('disabled', 'true');
- this.$removeCompletedButton.setAttribute('disabled', 'true');
- this.view.insertInput();
-
- let inputTextArea = document.querySelector('.todo .mdl-list__item:last-child .mdl-textfield__input');
- inputTextArea.addEventListener('keydown', event => {
- if (event.keyCode === 27) {
- this.removeItem('input');
-
- } else {
- if (event.keyCode === 13) {
- this.addItem(inputTextArea.value);
- this.removeItem('input');
- }
- }
- });
- });
-
- this.$removeCompletedButton.addEventListener('click', () => {
- this.removeCompletedItems();
- });
-
- if (this.model.database != []) {
- this.view.showAll(this.model.database);
- }
- };
-
- addItem(title) {
- if (title.trim() === '') {
- return;
- }
- this.view.show(this.model.createItem(title));
- };
-
- removeItem(id) {
- document.querySelector(`[for="${id}"]`).parentNode.parentNode.remove();
- this.$addItemButton.removeAttribute('disabled');
- this.$removeCompletedButton.removeAttribute('disabled');
- };
-
- removeCompletedItems() {
- this.model.deleteCompletedItems();
- this.view.showAll(this.model.database);
- };
-
- check(checkbox) {
- let id = checkbox.getAttribute('for');
- if (!isNaN(id)) {
- this.model.checkItem(id);
- }
-
- };
- }
-
- /*==========INITIALIZE==========*/
-
- class Todo {
- constructor() {
- this.model = new Model();
- this.view = new View();
- this.controller = new Controller(this.model, this.view);
- }
- }
- let todoContainer = document.querySelector('.todo')
- if (todoContainer) {
- let todo = new Todo();
- }
-
-}
diff --git a/src/app/pages/widgets/todo/todo.scss b/src/app/pages/widgets/todo/todo.scss
deleted file mode 100644
index e7db855..0000000
--- a/src/app/pages/widgets/todo/todo.scss
+++ /dev/null
@@ -1,44 +0,0 @@
-.todo {
- .mdl-card__supporting-text {
- width: 100%;
- padding: 0;
- min-height: 70px;
- .mdl-list__item {
- align-items: flex-start;
- padding-bottom: 0;
- .mdl-list__item-primary-content {
- max-width: 100%;
- word-wrap: break-word;
- }
- .material-icons {
- visibility: hidden;
- }
- &:hover .material-icons {
- visibility: visible;
- }
- }
- .mdl-checkbox {
- height: auto;
- padding-left: $checkbox-button-size*2;
- }
- .mdl-textfield {
- width: 100%;
- padding: 0;
- }
- .mdl-textfield__input {
- padding: 2px 0;
- }
- .mdl-textfield__label {
- color: $todo-input-text-label-color;
- top: 0;
- &:after {
- background-color: $todo-input-text-highlight-color;
- bottom: 0;
- }
- }
- }
- .mdl-card__actions {
- margin-top: 20px;
- background: $card-actions-background-color;
- }
-}
\ No newline at end of file
diff --git a/src/app/pages/widgets/ui-typography/ui-typography.scss b/src/app/pages/widgets/ui-typography/ui-typography.scss
deleted file mode 100644
index e5d1c75..0000000
--- a/src/app/pages/widgets/ui-typography/ui-typography.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-.ui-typography {
- font-family: "Roboto", sans-serif;
- .mdl-card:not(:last-child) {
- margin-bottom: $card-vertical-padding;
- }
- p {
- font-weight: 300;
- }
- h5 {
- font-size: 30px;
- &:nth-of-type(1) {
- font-weight: 200;
- }
- &:nth-of-type(2) {
- font-weight: 300;
- }
- &:nth-of-type(3) {
- font-weight: 400;
- }
- &:nth-of-type(5) {
- font-weight: 600;
- }
- }
-}
\ No newline at end of file
diff --git a/src/app/styles/_variables.scss b/src/app/styles/_variables.scss
deleted file mode 100644
index 0644143..0000000
--- a/src/app/styles/_variables.scss
+++ /dev/null
@@ -1 +0,0 @@
-$nav-button-color: #00838F;
\ No newline at end of file
diff --git a/src/app/styles/headings.css b/src/app/styles/headings.css
deleted file mode 100644
index 6fe295c..0000000
--- a/src/app/styles/headings.css
+++ /dev/null
@@ -1,3 +0,0 @@
-h1 {
- color: #00BCD4;
-}
\ No newline at end of file
diff --git a/src/app/styles/styles.scss b/src/app/styles/styles.scss
deleted file mode 100644
index 346b7b9..0000000
--- a/src/app/styles/styles.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-/* this file will be extracted to main dist folder and is imported in index.html */
-/* This file is for setting global styles */
-//@import 'variables';
-
-nav {
- margin-top: 16px;
-}
-
-nav a {
- background-color: $nav-button-color;
- color: white;
- padding: 8px 16px;
- margin: 8px;
- vertical-align: middle;
- line-height: 1.25;
- text-align: center;
- text-decoration: none;
- border-radius: 4px;
-}
diff --git a/src/app/theme/components/ba-card/ba-card.component.html b/src/app/theme/components/ba-card/ba-card.component.html
new file mode 100644
index 0000000..42ec1da
--- /dev/null
+++ b/src/app/theme/components/ba-card/ba-card.component.html
@@ -0,0 +1,11 @@
+
+
diff --git a/src/app/theme/components/ba-card/ba-card.component.scss b/src/app/theme/components/ba-card/ba-card.component.scss
new file mode 100644
index 0000000..5d72158
--- /dev/null
+++ b/src/app/theme/components/ba-card/ba-card.component.scss
@@ -0,0 +1,13 @@
+@import '~theme/helpers';
+
+.mdl-card__title {
+ background-color: $card-title-background-color;
+}
+
+.mdl-card__supporting-text {
+ width: calc(100% - #{$card-horizontal-padding*2});
+}
+
+.mdl-card__actions {
+ padding: 8px 16px;
+}
diff --git a/src/app/theme/components/ba-card/ba-card.component.ts b/src/app/theme/components/ba-card/ba-card.component.ts
new file mode 100644
index 0000000..5e06216
--- /dev/null
+++ b/src/app/theme/components/ba-card/ba-card.component.ts
@@ -0,0 +1,24 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+ selector: 'ba-card',
+ styleUrls: ['./ba-card.component.scss'],
+ templateUrl: './ba-card.component.html',
+})
+export class BaCardComponent {
+ public withActions: boolean = false;
+ public titleExpand: boolean = false;
+ public bodyExpand: boolean = false;
+
+ @Input('with-actions') public set setWithActions(value) {
+ this.withActions = true;
+ }
+
+ @Input('title-expand') public set setTitleExpand(value) {
+ this.titleExpand = true;
+ }
+
+ @Input('body-expand') public set setBodyExpand(value) {
+ this.bodyExpand = true;
+ }
+}
diff --git a/src/app/theme/components/baMsgMenu/baMsgMenu.html b/src/app/theme/components/ba-msg-menu/ba-msg-menu.component.html
similarity index 79%
rename from src/app/theme/components/baMsgMenu/baMsgMenu.html
rename to src/app/theme/components/ba-msg-menu/ba-msg-menu.component.html
index f541d04..7cada68 100644
--- a/src/app/theme/components/baMsgMenu/baMsgMenu.html
+++ b/src/app/theme/components/ba-msg-menu/ba-msg-menu.component.html
@@ -1,15 +1,13 @@
-
+
+
+
+
+
+
+
-
-
+
- - You have 4 new messages! + You have {{messages.length}} new messages! -
-
diff --git a/src/app/theme/components/baMsgMenu/baMsgMenu.scss b/src/app/theme/components/ba-msg-menu/ba-msg-menu.component.scss
similarity index 95%
rename from src/app/theme/components/baMsgMenu/baMsgMenu.scss
rename to src/app/theme/components/ba-msg-menu/ba-msg-menu.component.scss
index feb622c..9bae31a 100644
--- a/src/app/theme/components/baMsgMenu/baMsgMenu.scss
+++ b/src/app/theme/components/ba-msg-menu/ba-msg-menu.component.scss
@@ -1,4 +1,4 @@
-@import "../../theme";
+@import '~theme/helpers';
ba-msg-menu {
position: relative;
@@ -17,7 +17,7 @@ ba-msg-menu {
.material-icons {
vertical-align: top;
}
- span.text {
+ .text {
font-size: 19px;
vertical-align: middle;
}
diff --git a/src/app/theme/components/ba-msg-menu/ba-msg-menu.component.ts b/src/app/theme/components/ba-msg-menu/ba-msg-menu.component.ts
new file mode 100644
index 0000000..86e8103
--- /dev/null
+++ b/src/app/theme/components/ba-msg-menu/ba-msg-menu.component.ts
@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+import { BaMsgMenuService } from './ba-msg-menu.service';
+
+@Component({
+ selector: 'ba-msg-menu',
+ styleUrls: ['./ba-msg-menu.component.scss'],
+ templateUrl: './ba-msg-menu.component.html',
+ providers: [BaMsgMenuService],
+})
+export class BaMsgMenuComponent {
+ public messages: Object[];
+
+ constructor(baMsgMenuService: BaMsgMenuService) {
+ this.messages = baMsgMenuService.getMessages();
+ }
+}
diff --git a/src/app/theme/components/baMsgMenu/baMsgMenu.ts b/src/app/theme/components/ba-msg-menu/ba-msg-menu.service.ts
similarity index 63%
rename from src/app/theme/components/baMsgMenu/baMsgMenu.ts
rename to src/app/theme/components/ba-msg-menu/ba-msg-menu.service.ts
index 04db6b9..1fe0b86 100644
--- a/src/app/theme/components/baMsgMenu/baMsgMenu.ts
+++ b/src/app/theme/components/ba-msg-menu/ba-msg-menu.service.ts
@@ -1,18 +1,9 @@
-import { Component, ViewEncapsulation } from '@angular/core';
+import { Injectable } from '@angular/core';
-@Component({
- selector: 'ba-msg-menu',
- encapsulation: ViewEncapsulation.None,
- styleUrls: ['./baMsgMenu.scss'],
- templateUrl: './baMsgMenu.html'
-})
-export class BaMsgMenuComponent {
-
- private message: Object[];
-
- constructor() {
-
- this.message = [
+@Injectable()
+export class BaMsgMenuService {
+ public getMessages(): Object[] {
+ return [
{
name: 'Alice',
type: 'Birthday Party',
@@ -20,6 +11,13 @@ export class BaMsgMenuComponent {
icon: 'A',
color: 'primary'
},
+ {
+ name: 'Vladimir',
+ type: 'Deployment',
+ time: 'just now',
+ icon: 'V',
+ color: 'primary'
+ },
{
name: 'Mike',
type: 'No theme',
diff --git a/src/app/theme/components/ba-msg-menu/index.ts b/src/app/theme/components/ba-msg-menu/index.ts
new file mode 100644
index 0000000..157cfbc
--- /dev/null
+++ b/src/app/theme/components/ba-msg-menu/index.ts
@@ -0,0 +1,2 @@
+export { BaMsgMenuComponent } from './ba-msg-menu.component';
+export { BaMsgMenuService } from './ba-msg-menu.service';
diff --git a/src/app/theme/components/baNotificationMenu/baNotificationMenu.html b/src/app/theme/components/ba-notification-menu/ba-notification-menu.component.html
similarity index 90%
rename from src/app/theme/components/baNotificationMenu/baNotificationMenu.html
rename to src/app/theme/components/ba-notification-menu/ba-notification-menu.component.html
index 60fff90..df3ec27 100644
--- a/src/app/theme/components/baNotificationMenu/baNotificationMenu.html
+++ b/src/app/theme/components/ba-notification-menu/ba-notification-menu.component.html
@@ -1,16 +1,13 @@
-
-
- - You have 23 new notifications! + You have {{notifications.length}} new notifications! -
-
diff --git a/src/app/theme/components/baNotificationMenu/baNotificationMenu.scss b/src/app/theme/components/ba-notification-menu/ba-notification-menu.component.scss
similarity index 94%
rename from src/app/theme/components/baNotificationMenu/baNotificationMenu.scss
rename to src/app/theme/components/ba-notification-menu/ba-notification-menu.component.scss
index e83d572..41d2ff6 100644
--- a/src/app/theme/components/baNotificationMenu/baNotificationMenu.scss
+++ b/src/app/theme/components/ba-notification-menu/ba-notification-menu.component.scss
@@ -1,4 +1,4 @@
-@import "../../theme";
+@import '~theme/helpers';
ba-notification-menu {
position: relative;
diff --git a/src/app/theme/components/ba-notification-menu/ba-notification-menu.component.ts b/src/app/theme/components/ba-notification-menu/ba-notification-menu.component.ts
new file mode 100644
index 0000000..28cd35e
--- /dev/null
+++ b/src/app/theme/components/ba-notification-menu/ba-notification-menu.component.ts
@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+import { BaNotificationMenuService } from './ba-notification-menu.service';
+
+@Component({
+ selector: 'ba-notification-menu',
+ styleUrls: ['./ba-notification-menu.component.scss'],
+ templateUrl: './ba-notification-menu.component.html',
+ providers: [BaNotificationMenuService],
+})
+export class BaNotificationMenuComponent {
+ public notifications: Object[];
+
+ constructor(BaNotificationMenuService: BaNotificationMenuService) {
+ this.notifications = BaNotificationMenuService.getNotifications();
+ }
+}
diff --git a/src/app/theme/components/baNotificationMenu/baNotificationMenu.ts b/src/app/theme/components/ba-notification-menu/ba-notification-menu.service.ts
similarity index 59%
rename from src/app/theme/components/baNotificationMenu/baNotificationMenu.ts
rename to src/app/theme/components/ba-notification-menu/ba-notification-menu.service.ts
index 9d74e32..a7d75f8 100644
--- a/src/app/theme/components/baNotificationMenu/baNotificationMenu.ts
+++ b/src/app/theme/components/ba-notification-menu/ba-notification-menu.service.ts
@@ -1,18 +1,9 @@
-import { Component, ViewEncapsulation } from '@angular/core';
+import { Injectable } from '@angular/core';
-@Component({
- selector: 'ba-notification-menu',
- encapsulation: ViewEncapsulation.None,
- styleUrls: ['./baNotificationMenu.scss'],
- templateUrl: './baNotificationMenu.html'
-})
-export class BaNotificationMenuComponent {
-
- private notifications: Object[];
-
- constructor() {
-
- this.notifications = [
+@Injectable()
+export class BaNotificationMenuService {
+ public getNotifications(): Object[] {
+ return [
{
text: 'You have 3 new orders.',
time: 'just now',
@@ -34,7 +25,6 @@ export class BaNotificationMenuComponent {
icon: 'mail_outline',
color: 'primary'
}
-
];
}
}
diff --git a/src/app/theme/components/baPageTop/baPageTop.html b/src/app/theme/components/ba-page-top/ba-page-top.component.html
similarity index 99%
rename from src/app/theme/components/baPageTop/baPageTop.html
rename to src/app/theme/components/ba-page-top/ba-page-top.component.html
index 4f8cee2..5e29656 100644
--- a/src/app/theme/components/baPageTop/baPageTop.html
+++ b/src/app/theme/components/ba-page-top/ba-page-top.component.html
@@ -21,7 +21,7 @@
Luke
