Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-29 13:48:51 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(angular-cli): integrate angular-cli (#989)

Browse source
This commit is contained in:
hryb 2017-04-18 18:41:04 +03:00 • committed by Alexander Zhukov
parent 7b8a6f4e88
commit 523f44b746
138 changed files with 4507 additions and 7170 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/app/app.component.html Normal file
View file

@ -0,0 +1,3 @@
<h1>
{{title}}
</h1>

0
src/app/app.component.scss Normal file
View file

6
src/app/app.component.ts
View file

@ -1,13 +1,11 @@
import { Component, ViewContainerRef } from '@angular/core';
import * as $ from 'jquery';
import { GlobalState } from './global.state';
import { BaImageLoaderService, BaThemePreloader, BaThemeSpinner } from './theme/services';
import { BaThemeConfig } from './theme/theme.config';
import { layoutPaths } from './theme/theme.constants';
import 'style-loader!./app.scss';
import 'style-loader!./theme/initial.scss';
/*
* App Component
* Top Level Component
@ -49,7 +47,7 @@ export class App {
private _loadImages(): void {
// register some loaders
BaThemePreloader.registerLoader(this._imageLoader.load(layoutPaths.images.root + 'sky-bg.jpg'));
BaThemePreloader.registerLoader(this._imageLoader.load('/assets/img/sky-bg.jpg'));
}
}

40
src/app/app.module.ts
View file

@ -6,11 +6,9 @@ import { RouterModule } from '@angular/router';
import { removeNgStyles, createNewHosts, createInputTransfer } from '@angularclass/hmr';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { TranslateService } from '@ngx-translate/core';
/*
* Platform and Environment providers/directives/pipes
*/
import { ENV_PROVIDERS } from './environment';
import { routing } from './app.routing';
// App is our top level component
@ -53,48 +51,12 @@ export type StoreType = {
routing
],
providers: [ // expose our Services and Providers into Angular's dependency injection
ENV_PROVIDERS,
APP_PROVIDERS
]
})
export class AppModule {
constructor(public appRef: ApplicationRef,
public appState: AppState) {
}
hmrOnInit(store: StoreType) {
if (!store || !store.state) return;
console.log('HMR store', JSON.stringify(store, null, 2));
// set state
this.appState._state = store.state;
// set input values
if ('restoreInputValues' in store) {
let restoreInputValues = store.restoreInputValues;
setTimeout(restoreInputValues);
}
this.appRef.tick();
delete store.state;
delete store.restoreInputValues;
}
hmrOnDestroy(store: StoreType) {
const cmpLocation = this.appRef.components.map(cmp => cmp.location.nativeElement);
// save state
const state = this.appState._state;
store.state = state;
// recreate root elements
store.disposeOldHosts = createNewHosts(cmpLocation);
// save input values
store.restoreInputValues = createInputTransfer();
// remove styles
removeNgStyles();
}
hmrAfterDestroy(store: StoreType) {
// display new elements
store.disposeOldHosts();
delete store.disposeOldHosts;
constructor(public appState: AppState) {
}
}

49
src/app/environment.ts
View file

@ -1,49 +0,0 @@
// Angular 2
// rc2 workaround
import { enableDebugTools, disableDebugTools } from '@angular/platform-browser';
import { enableProdMode, ApplicationRef } from '@angular/core';
// Environment Providers
let PROVIDERS: any[] = [
// common env directives
];
// Angular debug tools in the dev console
// https://github.com/angular/angular/blob/86405345b781a9dc2438c0fbe3e9409245647019/TOOLS_JS.md
let _decorateModuleRef = function identity<T>(value: T): T { return value; };
if ('production' === ENV || 'renderer' === ENV) {
// Production
// disableDebugTools();
enableProdMode();
PROVIDERS = [
...PROVIDERS,
// custom providers in production
];
} else {
_decorateModuleRef = (modRef: any) => {
const appRef = modRef.injector.get(ApplicationRef);
const cmpRef = appRef.components[0];
let _ng = (<any>window).ng;
enableDebugTools(cmpRef);
(<any>window).ng.probe = _ng.probe;
(<any>window).ng.coreTokens = _ng.coreTokens;
return modRef;
};
// Development
PROVIDERS = [
...PROVIDERS,
// custom providers in development
];
}
export const decorateModuleRef = _decorateModuleRef;
export const ENV_PROVIDERS = [
...PROVIDERS
];

1
src/app/index.ts
View file

@ -1 +0,0 @@
export * from './app.module';

2
src/app/pages/charts/components/chartistJs/chartistJs.component.ts
View file

@ -1,11 +1,11 @@
import {Component} from '@angular/core';
import {ChartistJsService} from './chartistJs.service';
import 'style-loader!./chartistJs.scss';
@Component({
selector: 'chartist-js',
templateUrl: './chartistJs.html',
styleUrls: ['./chartistJs.scss']
})
export class ChartistJs {

128
src/app/pages/charts/components/chartistJs/chartistJs.scss
View file

@ -1,71 +1,73 @@
@import "../../../../theme/sass/conf/conf";
:host /deep/ {
.ct-area {
fill-opacity: .5;
}
.ct-label{
color: $default-text;
opacity: 0.9;
fill: $default-text;
}
.ct-chart .ct-label{
font-size: 1em;
}
.ct-chart svg{
width: 100%;
display: block;
}
.ct-series-a {
.ct-bar, .ct-line, .ct-point, .ct-slice-donut, .ct-slice-pie {
stroke: $primary;
}
.ct-slice-pie, .ct-area{
fill: $primary;
}
}
.ct-series-b {
.ct-bar, .ct-line, .ct-point, .ct-slice-donut, .ct-slice-pie {
stroke: $success;
}
.ct-slice-pie, .ct-area{
fill: $success;
}
}
.ct-series-c {
.ct-bar, .ct-line, .ct-point, .ct-slice-donut, .ct-slice-pie {
stroke: $danger;
}
.ct-slice-pie, .ct-area{
fill: $danger;
}
}
.ct-series-d {
.ct-bar, .ct-line, .ct-point, .ct-slice-donut, .ct-slice-pie {
stroke: $warning;
}
.ct-slice-pie, .ct-area{
fill: $warning;
.ct-area {
fill-opacity: .5;
}
}
.ct-series-e {
.ct-bar, .ct-line, .ct-point, .ct-slice-donut, .ct-slice-pie {
stroke: $info;
.ct-label {
color: $default-text;
opacity: 0.9;
fill: $default-text;
}
.ct-slice-pie, .ct-area{
fill: $info;
.ct-chart .ct-label {
font-size: 1em;
}
.ct-chart svg {
width: 100%;
display: block;
}
.ct-series-a {
.ct-bar, .ct-line, .ct-point, .ct-slice-donut, .ct-slice-pie {
stroke: $primary;
}
.ct-slice-pie, .ct-area {
fill: $primary;
}
}
.ct-series-b {
.ct-bar, .ct-line, .ct-point, .ct-slice-donut, .ct-slice-pie {
stroke: $success;
}
.ct-slice-pie, .ct-area {
fill: $success;
}
}
.ct-series-c {
.ct-bar, .ct-line, .ct-point, .ct-slice-donut, .ct-slice-pie {
stroke: $danger;
}
.ct-slice-pie, .ct-area {
fill: $danger;
}
}
.ct-series-d {
.ct-bar, .ct-line, .ct-point, .ct-slice-donut, .ct-slice-pie {
stroke: $warning;
}
.ct-slice-pie, .ct-area {
fill: $warning;
}
}
.ct-series-e {
.ct-bar, .ct-line, .ct-point, .ct-slice-donut, .ct-slice-pie {
stroke: $info;
}
.ct-slice-pie, .ct-area {
fill: $info;
}
}
.stacked-bar .ct-bar {
stroke-width: 30px;
}
}
.stacked-bar .ct-bar{
stroke-width: 30px;
}

5
src/app/pages/dashboard/calendar/calendar.component.ts
View file

@ -1,11 +1,12 @@
import {Component} from '@angular/core';
import * as jQuery from 'jquery';
import {CalendarService} from './calendar.service';
import 'style-loader!./calendar.scss';
@Component({
selector: 'calendar',
templateUrl: './calendar.html'
templateUrl: './calendar.html',
styleUrls: ['./calendar.scss']
})
export class Calendar {

1357
src/app/pages/dashboard/calendar/calendar.scss
View file

File diff suppressed because it is too large Load diff

5
src/app/pages/dashboard/feed/feed.component.ts
View file

@ -2,11 +2,10 @@ import {Component} from '@angular/core';
import {FeedService} from './feed.service';
import 'style-loader!./feed.scss';
@Component({
selector: 'feed',
templateUrl: './feed.html'
templateUrl: './feed.html',
styleUrls: ['./feed.scss']
})
export class Feed {

375
src/app/pages/dashboard/feed/feed.scss
View file

@ -1,226 +1,217 @@
@import '../../../theme/sass/conf/conf';
.feed-panel .card-body{
padding: 10px 0;
}
:host /deep/ .feed-messages-container {
.feed-message {
$text-message-color: $content-text;
$video-message-color: $danger;
$image-message-color: $success;
$geo-message-color: $primary;
padding: 10px 0 ;
border-bottom: 1px solid rgba(0,0,0,0.12);
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.12);
&:first-child {
padding-top: 0;
}
.hidden {
display: none!important;
}
.message-icon {
cursor: pointer;
width: 60px;
height: 60px;
float: left;
position: relative;
margin-left: 20px;
> img, .media-icon {
border-radius: 30px;
width: 100%;
height: 100%;
.feed-message {
$text-message-color: $content-text;
$video-message-color: $danger;
$image-message-color: $success;
$geo-message-color: $primary;
padding: 10px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.12);
&:first-child {
padding-top: 0;
}
.sub-photo-icon {
display: inline-block;
padding: 4px;
&:after {
content: '';
.hidden {
display: none !important;
}
.message-icon {
cursor: pointer;
width: 60px;
height: 60px;
float: left;
position: relative;
margin-left: 20px;
> img, .media-icon {
border-radius: 30px;
width: 100%;
height: 100%;
}
.sub-photo-icon {
display: inline-block;
width: 22px;
height: 22px;
background-size: contain;
}
&.video-message {
background: $video-message-color;
&:after {
@include bg-image('theme/icon/feed/feed-video.svg');
}
}
&.image-message {
background: $image-message-color;
&:after {
width: 21px;
height: 21px;
margin-top: 1px;
margin-left: 1px;
border-radius: 5px;
@include bg-image('theme/icon/feed/feed-image.svg');
}
}
&.geo-message {
background: $geo-message-color;
padding: 4px;
&:after {
content: '';
display: inline-block;
width: 22px;
height: 22px;
@include bg-image('theme/icon/feed/feed-location.svg');
background-size: contain;
}
&.video-message {
background: $video-message-color;
&:after {
@include bg-image('theme/icon/feed/feed-video.svg');
}
}
&.image-message {
background: $image-message-color;
&:after {
width: 21px;
height: 21px;
margin-top: 1px;
margin-left: 1px;
border-radius: 5px;
@include bg-image('theme/icon/feed/feed-image.svg');
}
}
&.geo-message {
background: $geo-message-color;
&:after {
width: 22px;
height: 22px;
@include bg-image('theme/icon/feed/feed-location.svg');
}
}
}
}
.sub-photo-icon {
position: absolute;
width: 30px;
height: 30px;
right: -2px;
bottom: -4px;
border-radius: 15px;
}
}
.text-block {
cursor: pointer;
position: relative;
border-radius: 5px;
margin: 0 0 0 80px;
padding: 5px 20px;
color: $text-message-color;
width: 280px;
height: 70px;
&.text-message {
font-size: 12px;
width: inherit;
max-width: calc(100% - 80px);
height: inherit;
min-height: 60px;
&:before {
display: block;
.sub-photo-icon {
position: absolute;
width: 30px;
height: 30px;
right: -2px;
bottom: -4px;
border-radius: 15px;
}
.message-content {
}
.text-block {
cursor: pointer;
position: relative;
border-radius: 5px;
margin: 0 0 0 80px;
padding: 5px 20px;
color: $text-message-color;
width: 280px;
height: 70px;
&.text-message {
font-size: 12px;
line-height: 15px;
font-weight: $font-light;
width: inherit;
max-width: calc(100% - 80px);
height: inherit;
min-height: 60px;
&:before {
display: block;
}
.message-content {
font-size: 12px;
line-height: 15px;
font-weight: $font-light;
}
}
}
&.small-message {
width: 155px;
height: 145px;
.preview {
bottom: 0;
top: initial;
height: 87px;
img {
width: 155px;
&.small-message {
width: 155px;
height: 145px;
.preview {
bottom: 0;
top: initial;
height: 87px;
border-radius: 0 0 5px 5px;
img {
width: 155px;
height: 87px;
border-radius: 0 0 5px 5px;
}
}
}
}
}
.message-header {
font-size: 12px;
padding-bottom: 5px;
.author {
font-size: 13px;
padding-right: 5px;
.message-header {
font-size: 12px;
padding-bottom: 5px;
.author {
font-size: 13px;
padding-right: 5px;
}
}
}
.message-content {
font-size: 18px;
line-height: 20px;
}
.message-content {
font-size: 18px;
line-height: 20px;
}
.preview {
transition: 0s linear all;
display: inline-block;
img {
padding-top: 10px;
.preview {
transition: 0s linear all;
display: inline-block;
img {
padding-top: 10px;
width: 100%;
height: auto;
float: none !important;
}
}
.message-time {
width: 100%;
height: auto;
float: none!important;
left: 0;
font-size: 11px;
padding-top: 10px;
color: $help-text;
margin-bottom: 5px;
.post-time {
float: left;
}
.ago-time {
float: right;
}
}
}
.message-time {
width: 100%;
left: 0;
font-size: 11px;
padding-top: 10px;
color: $help-text;
margin-bottom: 5px;
.post-time {
float: left;
}
.ago-time {
float: right;
.line-clamp {
display: block;
display: -webkit-box;
-webkit-box-orient: vertical;
position: relative;
line-height: 1.2;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 !important;
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
.line-clamp:after {
content: '...';
text-align: right;
bottom: 0;
right: 0;
width: 25%;
display: block;
position: absolute;
height: calc(1em * 1.2);
}
}
}
.line-clamp
{
display : block;
display : -webkit-box;
-webkit-box-orient : vertical;
position : relative;
line-height : 1.2;
overflow : hidden;
text-overflow : ellipsis;
padding : 0 !important;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
.line-clamp:after
{
content : '...';
text-align : right;
bottom : 0;
right : 0;
width : 25%;
display : block;
position : absolute;
height : calc(1em * 1.2);
@supports (-webkit-line-clamp: 1) {
.line-clamp:after {
display: none !important;
}
}
.line-clamp-1 {
-webkit-line-clamp: 1;
height: calc(1em * 1.2 * 1);
}
.line-clamp-2 {
-webkit-line-clamp: 2;
height: calc(1em * 1.2 * 2);
}
.line-clamp-3 {
-webkit-line-clamp: 3;
height: calc(1em * 1.2 * 3);
}
.line-clamp-4 {
-webkit-line-clamp: 4;
height: calc(1em * 1.2 * 4);
}
.line-clamp-5 {
-webkit-line-clamp: 5;
height: calc(1em * 1.2 * 5);
}
}
@supports (-webkit-line-clamp: 1)
{
.line-clamp:after
{
display : none !important;
}
}
.line-clamp-1
{
-webkit-line-clamp : 1;
height : calc(1em * 1.2 * 1);
}
.line-clamp-2
{
-webkit-line-clamp : 2;
height : calc(1em * 1.2 * 2);
}
.line-clamp-3
{
-webkit-line-clamp : 3;
height : calc(1em * 1.2 * 3);
}
.line-clamp-4
{
-webkit-line-clamp : 4;
height : calc(1em * 1.2 * 4);
}
.line-clamp-5
{
-webkit-line-clamp : 5;
height : calc(1em * 1.2 * 5);
/deep/.feed-panel .card-body {
padding: 10px 0;
}

5
src/app/pages/dashboard/lineChart/lineChart.component.ts
View file

@ -2,11 +2,10 @@ import {Component} from '@angular/core';
import {LineChartService} from './lineChart.service';
import 'style-loader!./lineChart.scss';
@Component({
selector: 'line-chart',
templateUrl: './lineChart.html'
templateUrl: './lineChart.html',
styleUrls: ['./lineChart.scss']
})
export class LineChart {

10
src/app/pages/dashboard/lineChart/lineChart.scss
View file

@ -1,5 +1,7 @@
.dashboard-line-chart {
width: 100%;
height: 340px;
margin-top: -10px;
:host {
/deep/.dashboard-line-chart {
width: 100%;
height: 340px;
margin-top: -10px;
}
}

4
src/app/pages/dashboard/pieChart/pieChart.component.ts
View file

@ -3,11 +3,11 @@ import {Component} from '@angular/core';
import {PieChartService} from './pieChart.service';
import 'easy-pie-chart/dist/jquery.easypiechart.js';
import 'style-loader!./pieChart.scss';
@Component({
selector: 'pie-chart',
templateUrl: './pieChart.html'
templateUrl: './pieChart.html',
styleUrls: ['./pieChart.scss']
})
// TODO: move easypiechart to component
export class PieChart {

2
src/app/pages/dashboard/pieChart/pieChart.scss
View file

@ -1,6 +1,6 @@
@import "../../../theme/sass/conf/conf";
.pie-charts {
:host /deep/.pie-charts {
color: $content-text;
.pie-chart-item-container {

4
src/app/pages/dashboard/popularApp/popularApp.component.ts
View file

@ -1,9 +1,9 @@
import {Component} from '@angular/core';
import 'style-loader!./popularApp.scss';
@Component({
selector: 'popular-app',
templateUrl: './popularApp.html'
templateUrl: './popularApp.html',
styleUrls: ['./popularApp.scss']
})
export class PopularApp {

4
src/app/pages/dashboard/popularApp/popularApp.scss
View file

@ -1,6 +1,6 @@
@import "../../../theme/sass/conf/conf";
.card.popular-app {
/deep/.card.popular-app {
&>.card-body {
padding: 0;
}
@ -50,6 +50,6 @@
}
}
.blur .card.popular-app .popular-app-img-container {
/deep/.blur .card.popular-app .popular-app-img-container {
background: rgba(0, 0, 0, 0.5);
}

5
src/app/pages/dashboard/todo/todo.component.ts
View file

@ -3,11 +3,10 @@ import {BaThemeConfigProvider} from '../../../theme';
import {TodoService} from './todo.service';
import 'style-loader!./todo.scss';
@Component({
selector: 'todo',
templateUrl: './todo.html'
templateUrl: './todo.html',
styleUrls: ['./todo.scss']
})
export class Todo {

173
src/app/pages/dashboard/todo/todo.scss
View file

@ -1,105 +1,108 @@
@import '../../../theme/sass/conf/conf';
input.task-todo {
margin-bottom: 8px;
}
:host /deep/.task-todo-container {
ul.todo-list {
margin: 0;
padding: 0;
.placeholder, .ui-sortable-placeholder {
input.task-todo {
margin-bottom: 8px;
}
li {
margin: 0 0 -1px 0;
padding: 12px;
list-style: none;
position: relative;
border: 1px solid $input-border;
cursor: grab;
height: 42px;
i.remove-todo {
position: absolute;
cursor: pointer;
top: 0px;
right: 12px;
font-size: 32px;
transition: color 0.2s;
color: rgba($input-border, 0.5);
visibility: hidden;
line-height: 42px;
&:hover {
color: $input-border;
}
}
&:hover {
i.remove-todo {
visibility: visible;
}
}
&.checked {
.todo-text {
color: $content-text;
}
&:before {
background: $input-border !important;
}
ul.todo-list {
margin: 0;
padding: 0;
.placeholder, .ui-sortable-placeholder {
}
i.mark {
display: block;
position: absolute;
top: -1px;
left: -1px;
li {
margin: 0 0 -1px 0;
padding: 12px;
list-style: none;
position: relative;
border: 1px solid $input-border;
cursor: grab;
height: 42px;
min-width: 4px;
background: $input-border;
cursor: pointer;
transition: min-width 0.3s ease-out;
}
&.active {
i.mark {
min-width: 40px;
}
label.todo-checkbox > span {
&:before {
color: white;
content: '\f10c';
margin-right: 20px;
transition: margin-right 0.1s ease-out;
transition-delay: 0.2s;
float: none;
i.remove-todo {
position: absolute;
cursor: pointer;
top: 0px;
right: 12px;
font-size: 32px;
transition: color 0.2s;
color: rgba($input-border, 0.5);
visibility: hidden;
line-height: 42px;
&:hover {
color: $input-border;
}
}
label.todo-checkbox > input:checked + span:before {
content: '\f00c';
&:hover {
i.remove-todo {
visibility: visible;
}
}
&.checked {
.todo-text {
color: $content-text;
}
&:before {
background: $input-border !important;
}
}
i.mark {
display: block;
position: absolute;
top: -1px;
left: -1px;
height: 42px;
min-width: 4px;
background: $input-border;
cursor: pointer;
transition: min-width 0.3s ease-out;
}
&.active {
i.mark {
min-width: 40px;
}
label.todo-checkbox > span {
&:before {
color: white;
content: '\f10c';
margin-right: 20px;
transition: margin-right 0.1s ease-out;
transition-delay: 0.2s;
float: none;
}
}
label.todo-checkbox > input:checked + span:before {
content: '\f00c';
}
}
}
}
}
label.todo-checkbox {
width: 100%;
padding-right: 25px;
min-height: 16px;
cursor: pointer;
> span {
white-space: nowrap;
height: 16px;
&:before {
border: none;
color: $help-text;
transition: all 0.15s ease-out;
label.todo-checkbox {
width: 100%;
padding-right: 25px;
min-height: 16px;
cursor: pointer;
> span {
white-space: nowrap;
height: 16px;
&:before {
border: none;
color: $help-text;
transition: all 0.15s ease-out;
}
}
}
.add-item-icon {
display: none;
}
}
.add-item-icon {
display: none;
}
.ng2, .blur {
/deep/.ng2, .blur {
.task-todo-container {
.todo-panel.panel {

5
src/app/pages/dashboard/trafficChart/trafficChart.component.ts
View file

@ -3,11 +3,10 @@ import {Component} from '@angular/core';
import {TrafficChartService} from './trafficChart.service';
import * as Chart from 'chart.js';
import 'style-loader!./trafficChart.scss';
@Component({
selector: 'traffic-chart',
templateUrl: './trafficChart.html'
templateUrl: './trafficChart.html',
styleUrls: ['./trafficChart.scss']
})
// TODO: move chart.js to it's own component

349
src/app/pages/dashboard/trafficChart/trafficChart.scss
View file

@ -1,205 +1,202 @@
@import '../../../theme/sass/conf/conf';
.channels-block {
width: 100%;
position: relative;
}
.chart-bg {
position: absolute;
width: 180px;
height: 180px;
left: 60px;
top: 60px;
background-color: transparent;
border-radius: 100px;
}
.ng2, .blur {
/deep/ .ng2, /deep/ .blur {
.traffic-chart .canvas-holder {
border: 15px solid rgba(0, 0, 0, 0.2);
border-radius: 150px;
}
.chart-bg {
background-color: rgba(0, 0, 0, 0.2);
}
}
.channels-info {
display: inline-block;
width: calc(100% - 370px);
margin-left: 70px;
margin-top: -20px;
}
.small-container {
.channels-info {
display: none;
}
}
.channels-info-item {
p {
margin-bottom: 9px;
font-size: 18px;
opacity: 0.9;
}
.channel-number {
display: inline-block;
float: right;
}
}
.traffic-chart {
width: 300px;
:host /deep/ .channels-block {
width: 100%;
position: relative;
min-height: 300px;
float: left;
}
.traffic-legend {
display: inline-block;
padding: 70px 0 0 0;
width: 160px;
}
.chart-bg {
position: absolute;
width: 180px;
height: 180px;
left: 60px;
top: 60px;
border-radius: 100px;
}
.traffic-legend ul.doughnut-legend {
li {
list-style: none;
font-size: 12px;
margin-bottom: 12px;
line-height: 16px;
position: relative;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 120px;
span {
float: left;
display: inline-block;
width: 16px;
height: 16px;
margin-right: 10px;
.channels-info {
display: inline-block;
width: calc(100% - 370px);
margin-left: 70px;
margin-top: -20px;
}
.small-container {
.channels-info {
display: none;
}
}
}
.canvas-holder {
display: inline-block;
width: 300px;
height: 300px;
position: relative;
float: left;
}
.traffic-text {
width: 100%;
height: 40px;
position: absolute;
top: 50%;
left: 0;
margin-top: -24px;
line-height: 24px;
text-align: center;
font-size: 18px;
//color: $danger;
span {
display: block;
font-size: 18px;
color: $content-text;
.channels-info-item {
p {
margin-bottom: 9px;
font-size: 18px;
opacity: 0.9;
}
.channel-number {
display: inline-block;
float: right;
}
}
}
.channel-change {
display: block;
margin-bottom: 12px;
}
.channel-progress {
height: 4px;
border-radius: 0;
width: 100%;
margin-bottom: 0;
background-color: $progress-background;
box-shadow: none;
.progress-bar {
height: 4px;
background-color: $progress-default;
box-shadow: none;
}
}
.legend-color {
width: 30px;
height: 30px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.25);
position: relative;
top: 27px;
border-radius: 15px;
left: -45px;
}
@media (max-width: $resM) {
.card.medium-card.traffic-panel {
height: auto;
}
div.channels-info {
display: block;
width: calc(100% - 88px);
margin-top: -65px;
margin-bottom: 10px;
}
.traffic-chart {
position: inherit;
float: none;
margin: 0 auto;
}
.chart-bg {
left: calc(50% - 90px);
}
}
@media (max-width: 1465px) and (min-width: 1199px) {
.channels-info {
display: none;
}
.traffic-chart {
position: inherit;
float: none;
margin: 0 auto;
}
.chart-bg {
left: calc(50% - 90px);
}
}
@media (max-width: 380px) {
.traffic-chart {
width: 240px;
width: 300px;
position: relative;
min-height: 300px;
float: left;
}
.traffic-legend {
display: inline-block;
padding: 70px 0 0 0;
width: 160px;
}
.traffic-legend ul.doughnut-legend {
li {
list-style: none;
font-size: 12px;
margin-bottom: 12px;
line-height: 16px;
position: relative;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 120px;
span {
float: left;
display: inline-block;
width: 16px;
height: 16px;
margin-right: 10px;
}
}
}
.canvas-holder {
width: 240px;
height: 240px;
display: inline-block;
width: 300px;
height: 300px;
position: relative;
float: left;
}
.chart-bg {
top: 30px;
.traffic-text {
width: 100%;
height: 40px;
position: absolute;
top: 50%;
left: 0;
margin-top: -24px;
line-height: 24px;
text-align: center;
font-size: 18px;
//color: $danger;
span {
display: block;
font-size: 18px;
color: $content-text;
}
}
}
@media (max-width: 320px) {
.chart-bg {
left: 50px;
top: 50px;
width: 142px;
height: 142px;
.channel-change {
display: block;
margin-bottom: 12px;
}
.channel-progress {
height: 4px;
border-radius: 0;
width: 100%;
margin-bottom: 0;
background-color: $progress-background;
box-shadow: none;
.progress-bar {
height: 4px;
background-color: $progress-default;
box-shadow: none;
}
}
.legend-color {
width: 30px;
height: 30px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.25);
position: relative;
top: 27px;
border-radius: 15px;
left: -45px;
}
@media (max-width: $resM) {
.card.medium-card.traffic-panel {
height: auto;
}
div.channels-info {
display: block;
width: calc(100% - 88px);
margin-top: -65px;
margin-bottom: 10px;
}
.traffic-chart {
position: inherit;
float: none;
margin: 0 auto;
}
.chart-bg {
left: calc(50% - 90px);
}
}
@media (max-width: 1465px) and (min-width: 1199px) {
.channels-info {
display: none;
}
.traffic-chart {
position: inherit;
float: none;
margin: 0 auto;
}
.chart-bg {
left: calc(50% - 90px);
}
}
@media (max-width: 380px) {
.traffic-chart {
width: 240px;
}
.canvas-holder {
width: 240px;
height: 240px;
}
.chart-bg {
top: 30px;
}
}
@media (max-width: 320px) {
.chart-bg {
left: 50px;
top: 50px;
width: 142px;
height: 142px;
}
}
}

4
src/app/pages/dashboard/usersMap/usersMap.component.ts
View file

@ -1,11 +1,11 @@
import {Component} from '@angular/core';
import {UsersMapService} from './usersMap.service';
import 'style-loader!./usersMap.scss';
@Component({
selector: 'users-map',
templateUrl: './usersMap.html'
templateUrl: './usersMap.html',
styleUrls: ['./usersMap.scss']
})
export class UsersMap {

2
src/app/pages/dashboard/usersMap/usersMap.scss
View file

@ -1,4 +1,4 @@
.dashboard-users-map {
:host /deep/.dashboard-users-map {
width: 100%;
height: 315px;
}

2
src/app/pages/editors/components/ckeditor/ckeditor.component.ts
View file

@ -2,11 +2,11 @@ import { Component } from '@angular/core';
import './ckeditor.loader';
import 'ckeditor';
import 'style-loader!./ckeditor.scss';
@Component({
selector: 'ckeditor-component',
templateUrl: './ckeditor.html',
styleUrls: ['./ckeditor.scss']
})
export class Ckeditor {

2
src/app/pages/editors/components/ckeditor/ckeditor.scss
View file

@ -1,5 +1,5 @@
@import '../../../../theme/sass/conf/conf';
.cke_source {
/deep/.cke_source {
color: $dropdown-text!important;
}

3
src/app/pages/login/login.component.ts
View file

@ -1,11 +1,10 @@
import {Component} from '@angular/core';
import {FormGroup, AbstractControl, FormBuilder, Validators} from '@angular/forms';
import 'style-loader!./login.scss';
@Component({
selector: 'login',
templateUrl: './login.html',
styleUrls: ['./login.scss']
})
export class Login {

2
src/app/pages/maps/components/bubbleMaps/bubbleMaps.component.ts
View file

@ -1,11 +1,11 @@
import {Component} from '@angular/core';
import {BubbleMapsService} from './bubbleMaps.service';
import 'style-loader!./bubbleMaps.scss';
@Component({
selector: 'bubble-maps',
templateUrl: './bubbleMaps.html',
styleUrls: ['./bubbleMaps.scss']
})
export class BubbleMaps {

2
src/app/pages/maps/components/bubbleMaps/bubbleMaps.scss
View file

@ -1,4 +1,4 @@
.bubble-maps {
:host /deep/.bubble-maps {
width: 100%;
height: calc(100vh - 283px);
font-size : 11px;

4
src/app/pages/maps/components/leafletMaps/leafletMaps.component.ts
View file

@ -1,11 +1,11 @@
import {Component, ElementRef} from '@angular/core';
import 'leaflet-map';
import 'style-loader!./leafletMaps.scss';
@Component({
selector: 'leaflet-maps',
templateUrl: './leafletMaps.html'
templateUrl: './leafletMaps.html',
styleUrls: ['./leafletMaps.scss']
})
export class LeafletMaps {

1003
src/app/pages/maps/components/leafletMaps/leafletMaps.scss
View file

File diff suppressed because it is too large Load diff

4
src/app/pages/maps/components/lineMaps/lineMaps.component.ts
View file

@ -1,11 +1,11 @@
import {Component} from '@angular/core';
import {LineMapsService} from './lineMaps.service';
import 'style-loader!./lineMaps.scss';
@Component({
selector: 'line-maps',
templateUrl: './lineMaps.html'
templateUrl: './lineMaps.html',
styleUrls: ['./lineMaps.scss']
})
export class LineMaps {

2
src/app/pages/maps/components/lineMaps/lineMaps.scss
View file

@ -1,4 +1,4 @@
.line-maps {
:host /deep/.line-maps {
width: 100%;
height: calc(100vh - 283px);
}

3
src/app/pages/register/register.component.ts
View file

@ -2,11 +2,10 @@ import {Component} from '@angular/core';
import {FormGroup, AbstractControl, FormBuilder, Validators} from '@angular/forms';
import {EmailValidator, EqualPasswordsValidator} from '../../theme/validators';
import 'style-loader!./register.scss';
@Component({
selector: 'register',
templateUrl: './register.html',
styleUrls: ['./register.scss']
})
export class Register {

6
src/app/pages/tables/components/basicTables/basicTables.component.ts
View file

@ -1,10 +1,10 @@
import {Component} from '@angular/core';
import 'style-loader!./basicTables.scss';
@Component({
selector: 'basic-tables',
templateUrl: './basicTables.html'
templateUrl: './basicTables.html',
styleUrls: ['./basicTables.scss']
})
export class BasicTables {

2
src/app/pages/tables/components/basicTables/basicTables.scss
View file

@ -1,3 +1,3 @@
.status-button {
:host /deep/.status-button {
width: 60px;
}

3
src/app/pages/tables/components/smartTables/smartTables.component.ts
View file

@ -3,11 +3,10 @@ import { Component } from '@angular/core';
import { SmartTablesService } from './smartTables.service';
import { LocalDataSource } from 'ng2-smart-table';
import 'style-loader!./smartTables.scss';
@Component({
selector: 'smart-tables',
templateUrl: './smartTables.html',
styleUrls: ['./smartTables.scss']
})
export class SmartTables {

2
src/app/pages/tables/components/smartTables/smartTables.html
View file

@ -1,7 +1,7 @@
<div class="widgets">
<div class="row">
<ba-card title="Basic Example" baCardClass="with-scroll">
<ba-card title="Basic Example" baCardClass="with-scroll" class="smart-table-container">
<ng2-smart-table [settings]="settings" [source]="source" (deleteConfirm)="onDeleteConfirm($event)"></ng2-smart-table>
</ba-card>
</div>

115
src/app/pages/tables/components/smartTables/smartTables.scss
View file

@ -1,84 +1,85 @@
@import "../../../../theme/sass/conf/conf";
.widgets {
ba-card {
:host /deep/ .widgets {
.smart-table-container {
width: 100%;
}
}
ng2-smart-table {
th, td {
border: 1px solid $border-light !important;
line-height: 35px;
vertical-align: middle;
}
:host /deep/ {
ng2-smart-table {
th, td {
border: 1px solid $border-light !important;
line-height: 35px;
vertical-align: middle;
}
table tr td {
padding: 0 8px!important;
}
padding: 0 8px;
}
color: $default-text;
input {
line-height: 1.5 !important;
}
ng2-smart-table-cell {
color: $default-text;
line-height: 35px;
}
tbody {
tr {
input {
line-height: 1.5 !important;
}
ng2-smart-table-cell {
color: $default-text;
line-height: 35px;
}
tr:hover {
background: rgba(0, 0, 0, 0.03);
}
}
a.ng2-smart-sort-link {
font-size: 14px !important;
color: $default-text;
font-weight: $font-bolder;
&.sort {
font-weight: $font-bolder !important;
&::after {
border-bottom-color: $default-text !important;
tbody {
tr {
color: $default-text;
}
tr:hover {
background: rgba(0, 0, 0, 0.03);
}
}
}
.ng2-smart-actions {
width: 70px;
text-align: center;
.actions {
float: none;
a.ng2-smart-sort-link {
font-size: 14px !important;
color: $default-text;
font-weight: $font-bolder;
&.sort {
font-weight: $font-bolder !important;
&::after {
border-bottom-color: $default-text !important;
}
}
}
.ng2-smart-actions {
width: 70px;
text-align: center;
.actions {
float: none;
text-align: center;
}
}
.ng2-smart-actions-title-add {
text-align: center;
}
}
.ng2-smart-actions-title-add {
text-align: center;
}
a.ng2-smart-action, .ng2-smart-title {
font-size: 14px !important;
color: $default-text;
padding: 0 5px;
display: inline-block;
a.ng2-smart-action, .ng2-smart-title {
font-size: 14px !important;
color: $default-text;
padding: 0 5px;
display: inline-block;
&.ng2-smart-action-add-add {
font-size: 25px !important;
&.ng2-smart-action-add-add {
font-size: 25px !important;
}
}
}
nav.ng2-smart-pagination-nav {
display: flex;
justify-content: center;
nav.ng2-smart-pagination-nav {
display: flex;
justify-content: center;
}
}
}

3
src/app/pages/ui/components/buttons/buttons.component.ts
View file

@ -1,10 +1,9 @@
import {Component} from '@angular/core';
import 'style-loader!./buttons.scss';
@Component({
selector: 'buttons',
templateUrl: './buttons.html',
styleUrls: ['./buttons.scss']
})
export class Buttons {

242
src/app/pages/ui/components/buttons/buttons.scss
View file

@ -1,134 +1,136 @@
.basic-btns {
padding-top: 8px;
margin-bottom: -8px;
h5 {
line-height: 35px;
font-size: 12px;
&.row-sm {
line-height: 30px;
:host /deep/ .widgets {
.basic-btns {
padding-top: 8px;
margin-bottom: -8px;
h5 {
line-height: 35px;
font-size: 12px;
&.row-sm {
line-height: 30px;
}
&.row-xs {
line-height: 22px;
}
}
&.row-xs {
line-height: 22px;
& > .row {
padding-bottom: 4px;
}
}
& > .row {
padding-bottom: 4px;
}
}
.btns-row {
& > div {
.btns-row {
& > div {
margin-bottom: 12px;
}
}
.btns-same-width-sm {
.btn {
width: 48px;
}
}
.btns-same-width-md {
.btn {
width: 79px;
}
}
.btns-same-width-lg {
.btn {
width: 112px;
}
}
ul.btn-list {
margin: 0 0 0 -18px;
padding: 0;
padding-top: 6px;
clear: both;
li {
margin: 0px 0 12px 18px;
padding: 0;
list-style: none;
float: left;
}
}
.btn-group-wrapper {
margin-bottom: 12px;
}
}
.btns-same-width-sm {
.btn {
width: 48px;
}
}
.btns-same-width-md {
.btn {
width: 79px;
}
}
.btns-same-width-lg {
.btn {
width: 112px;
}
}
ul.btn-list {
margin: 0 0 0 -18px;
padding: 0;
padding-top: 6px;
clear: both;
li {
margin: 0px 0 12px 18px;
$btn-icon-size: 34px;
.btn-icon {
width: $btn-icon-size;
height: $btn-icon-size;
line-height: $btn-icon-size;
padding: 0;
list-style: none;
text-align: center;
}
.btn-group-example {
float: left;
margin-right: 30px;
margin-bottom: 12px;
}
.btn-toolbar-example {
float: left;
}
}
.btn-group-wrapper {
margin-bottom: 12px;
}
$btn-icon-size: 34px;
.btn-icon {
width: $btn-icon-size;
height: $btn-icon-size;
line-height: $btn-icon-size;
padding: 0;
text-align: center;
}
.btn-group-example {
float: left;
margin-right: 30px;
margin-bottom: 12px;
}
.btn-toolbar-example {
float: left;
}
.progress-buttons-container {
text-align: center;
font-size: 16px;
span.button-title {
display: inline-block;
width: 100%;
line-height: 1;
font-size: 14px;
margin-bottom: 10px;
margin-top: 10px;
.progress-buttons-container {
text-align: center;
font-size: 16px;
span.button-title {
display: inline-block;
width: 100%;
line-height: 1;
font-size: 14px;
margin-bottom: 10px;
margin-top: 10px;
}
.row + .row {
margin-top: 30px;
}
}
.row + .row {
margin-top: 30px;
.button-panel {
height: 315px;
.btn {
width: 150px;
}
}
.large-buttons-panel {
height: 202px;
}
.button-panel.df-size-button-panel {
.btn-xs {
width: 60px;
}
.btn-sm {
width: 90px;
}
.btn-mm {
width: 120px;
}
.btn-md {
width: 150px;
}
.btn-xm {
width: 175px;
}
.btn-lg {
width: 200px;
}
}
.button-wrapper {
text-align: center;
margin: 5px 0;
}
.btn-group.flex-dropdown {
display: flex;
}
}
.button-panel {
height: 315px;
.btn {
width: 150px;
}
}
.large-buttons-panel {
height: 202px;
}
.button-panel.df-size-button-panel {
.btn-xs {
width: 60px;
}
.btn-sm {
width: 90px;
}
.btn-mm {
width: 120px;
}
.btn-md {
width: 150px;
}
.btn-xm {
width: 175px;
}
.btn-lg {
width: 200px;
}
}
.button-wrapper {
text-align: center;
margin: 5px 0;
}
.btn-group.flex-dropdown {
display: flex;
}

3
src/app/pages/ui/components/grid/grid.component.ts
View file

@ -1,10 +1,9 @@
import {Component} from '@angular/core';
import 'style-loader!./grid.scss';
@Component({
selector: 'grid',
templateUrl: './grid.html',
styleUrls: ['./grid.scss']
})
export class Grid {

4
src/app/pages/ui/components/grid/grid.scss
View file

@ -1,6 +1,6 @@
@import '../../../../theme/sass/conf/conf';
.show-grid div[class^=col-]{
:host /deep/.show-grid div[class^=col-]{
padding: 10px;
box-sizing: border-box;
div {
@ -12,7 +12,7 @@
}
}
.grid-h{
:host /deep/.grid-h{
margin-top: 40px;
margin-bottom: 0;
&:first-child{

3
src/app/pages/ui/components/icons/icons.component.ts
View file

@ -2,11 +2,10 @@ import {Component} from '@angular/core';
import {IconsService} from './icons.service';
import 'style-loader!./icons.scss';
@Component({
selector: 'icons',
templateUrl: './icons.html',
styleUrls: ['./icons.scss']
})
export class Icons {

225
src/app/pages/ui/components/icons/icons.scss
View file

@ -1,123 +1,126 @@
@import '../../../../theme/sass/conf/conf';
@mixin icon-hover($color) {
i:hover {
color: $color;
}
}
:host /deep/ .widgets {
.icons-list {
& > div {
text-align: center;
margin-bottom: 32px;
}
i {
font-weight: $font-normal;
font-size: 18px;
cursor: pointer;
@mixin icon-hover($color) {
i:hover {
color: $color;
}
}
&.primary {
@include icon-hover($primary);
}
&.success {
@include icon-hover($success);
}
&.warning {
@include icon-hover($warning);
}
&.danger {
@include icon-hover($danger);
}
}
.icons-list {
& > div {
text-align: center;
margin-bottom: 32px;
}
i {
font-weight: $font-normal;
font-size: 18px;
cursor: pointer;
}
a.see-all-icons {
float: right;
}
&.primary {
@include icon-hover($primary);
}
&.success {
@include icon-hover($success);
}
&.warning {
@include icon-hover($warning);
}
&.danger {
@include icon-hover($danger);
}
}
.awesomeIcons {
height: 308px;
}
a.see-all-icons {
float: right;
}
.kameleon-row {
display: inline-block;
min-width: 102px;
width: 20%;
.kameleon-icon {
padding: 0 10px;
.awesomeIcons {
height: 308px;
}
.kameleon-row {
display: inline-block;
min-width: 102px;
width: 20%;
.kameleon-icon {
padding: 0 10px;
img {
width: 81px;
}
}
}
@media (max-width: 750px) {
.kameleon-row {
width: 25%;
}
}
@media (max-width: 550px) {
.kameleon-row {
width: 33%;
}
}
@media (max-width: 430px) {
.kameleon-row {
width: 50%;
}
}
.kameleon-icon-tabs {
max-width: 84px;
img {
width: 81px;
width: 100%;
min-width: 81px;
min-height: 81px;
}
}
.kameleon-icon {
text-align: center;
margin: 0 auto;
img {
width: 100%;
}
span {
display: block;
text-align: center;
white-space: nowrap;
}
}
@mixin setImgBg($color) {
img {
background: $color;
}
}
.with-round-bg {
margin-bottom: 6px;
img {
border-radius: 50%;
margin-bottom: 4px;
}
@include setImgBg($default);
&.success {
@include setImgBg($success);
}
&.danger {
@include setImgBg($danger);
}
&.warning {
@include setImgBg($warning);
}
&.info {
@include setImgBg($info);
}
&.primary {
@include setImgBg($primary);
}
}
}
@media (max-width: 750px) {
.kameleon-row {
width: 25%;
}
}
@media (max-width: 550px) {
.kameleon-row {
width: 33%;
}
}
@media (max-width: 430px) {
.kameleon-row {
width: 50%;
}
}
.kameleon-icon-tabs {
max-width: 84px;
img {
width: 100%;
min-width: 81px;
min-height: 81px;
}
}
.kameleon-icon {
text-align: center;
margin: 0 auto;
img {
width: 100%;
}
span {
display: block;
text-align: center;
white-space: nowrap;
}
}
@mixin setImgBg($color) {
img {
background: $color;
}
}
.with-round-bg {
margin-bottom: 6px;
img {
border-radius: 50%;
margin-bottom: 4px;
}
@include setImgBg($default);
&.success {
@include setImgBg($success);
}
&.danger {
@include setImgBg($danger);
}
&.warning {
@include setImgBg($warning);
}
&.info {
@include setImgBg($info);
}
&.primary {
@include setImgBg($primary);
}
}

3
src/app/theme/components/baAmChart/baAmChart.component.ts
View file

@ -12,11 +12,10 @@ import 'ammap3/ammap/maps/js/worldLow';
import {BaAmChartThemeService} from './baAmChartTheme.service';
import 'style-loader!./baAmChart.scss';
@Component({
selector: 'ba-am-chart',
templateUrl: './baAmChart.html',
styleUrls: ['./baAmChart.scss'],
providers: [BaAmChartThemeService],
})
export class BaAmChart {

1
src/app/theme/components/baChartistChart/baChartistChart.component.ts
View file

@ -8,7 +8,6 @@ import {
} from '@angular/core';
import * as Chartist from 'chartist';
import 'style-loader!./baChartistChart.scss';
@Component({
selector: 'ba-chartist-chart',

1
src/app/theme/components/baChartistChart/baChartistChart.scss
View file

@ -1 +0,0 @@
@import "~chartist/dist/chartist";

6
src/app/theme/components/baFullCalendar/baFullCalendar.component.ts
View file

@ -1,12 +1,10 @@
import {Component, ViewChild, Input, Output, ElementRef, EventEmitter} from '@angular/core';
import 'fullcalendar/dist/fullcalendar.js';
import 'style-loader!./baFullCalendar.scss';
import * as jQuery from 'jquery';
@Component({
selector: 'ba-full-calendar',
templateUrl: './baFullCalendar.html',
templateUrl: './baFullCalendar.html'
})
export class BaFullCalendar {

1
src/app/theme/components/baFullCalendar/baFullCalendar.scss
View file

@ -1 +0,0 @@
@import "~fullcalendar/dist/fullcalendar";

5
src/app/theme/components/baMenu/baMenu.component.ts
View file

@ -5,11 +5,10 @@ import { Subscription } from 'rxjs/Rx';
import { BaMenuService } from '../../services';
import { GlobalState } from '../../../global.state';
import 'style-loader!./baMenu.scss';
@Component({
selector: 'ba-menu',
templateUrl: './baMenu.html'
templateUrl: './baMenu.html',
styleUrls: ['./baMenu.scss']
})
export class BaMenu {

5
src/app/theme/components/baMenu/components/baMenuItem/baMenuItem.component.ts
View file

@ -1,10 +1,9 @@
import {Component, Input, Output, EventEmitter} from '@angular/core';
import 'style-loader!./baMenuItem.scss';
@Component({
selector: 'ba-menu-item',
templateUrl: './baMenuItem.html'
templateUrl: './baMenuItem.html',
styleUrls: ['./baMenuItem.scss']
})
export class BaMenuItem {

3
src/app/theme/components/baPageTop/baPageTop.component.ts
View file

@ -2,11 +2,10 @@ import {Component} from '@angular/core';
import {GlobalState} from '../../../global.state';
import 'style-loader!./baPageTop.scss';
@Component({
selector: 'ba-page-top',
templateUrl: './baPageTop.html',
styleUrls: ['./baPageTop.scss']
})
export class BaPageTop {

352
src/app/theme/components/baPageTop/baPageTop.scss
View file

@ -1,200 +1,202 @@
@import '../../sass/conf/conf';
@import '../../components/baMsgCenter/baMsgCenter';
.page-top {
background-color: $sidebar;
position: fixed;
z-index: 904;
box-shadow: 2px 0 3px rgba(0, 0, 0, 0.5);
height: 66px;
width: 100%;
min-width: $resMin;
padding: 0 32px 0 40px;
:host /deep/ {
.dropdown-toggle::after {
display: none;
.page-top {
background-color: $sidebar;
position: fixed;
z-index: 904;
box-shadow: 2px 0 3px rgba(0, 0, 0, 0.5);
height: 66px;
width: 100%;
min-width: $resMin;
padding: 0 32px 0 40px;
.dropdown-toggle::after {
display: none;
}
}
}
.blur {
.page-top.scrolled {
background-color: rgba(black, 0.85)
.blur {
.page-top.scrolled {
background-color: rgba(black, 0.85)
}
}
}
a.al-logo {
color: $sidebar-text;
display: block;
font-size: 24px;
font-family: $font-family;
white-space: nowrap;
float: left;
outline: none !important;
line-height: 60px;
a.al-logo {
color: $sidebar-text;
display: block;
font-size: 24px;
font-family: $font-family;
white-space: nowrap;
float: left;
outline: none !important;
line-height: 60px;
span {
span {
color: $primary;
}
}
a.al-logo:hover {
color: $primary;
}
}
a.al-logo:hover {
color: $primary;
}
.user-profile {
float: right;
min-width: 230px;
margin-top: 10px;
}
.al-user-profile {
float: right;
margin-right: 12px;
transition: all .15s ease-in-out;
padding: 0;
width: 36px;
height: 36px;
border: 0;
opacity: 1;
position: relative;
ul.profile-dropdown:after {
bottom: 100%;
right: 0;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #fff;
border-width: 10px;
margin-right: 28px;
.user-profile {
float: right;
min-width: 230px;
margin-top: 10px;
}
a {
display: block;
}
img {
width: 45px;
height: 45px;
border-radius: 50%;
}
}
a.refresh-data {
color: $sidebar-text;
font-size: 13px;
text-decoration: none;
font-weight: $font-normal;
float: right;
margin-top: 13px;
margin-right: 26px;
&:hover {
color: $warning !important;
}
}
a.collapse-menu-link {
font-size: 31px;
cursor: pointer;
display: block;
text-decoration: none;
line-height: 42px;
color: $sidebar-text;
padding: 0;
float: left;
margin: 11px 0 0 25px;
&:hover {
text-decoration: none;
color: $warning;
}
}
.al-skin-dropdown {
float: right;
margin-top: 14px;
margin-right: 26px;
.tpl-skin-panel {
max-height: 300px;
overflow-y: scroll;
overflow-x: hidden;
}
}
.icon-palette {
display: inline-block;
width: 14px;
height: 13px;
@include bg('theme/palette.png');
background-size: cover;
}
.search {
text-shadow: none;
font-size: 13px;
line-height: 25px;
transition: all 0.5s ease;
white-space: nowrap;
overflow: hidden;
width: 162px;
float: left;
margin: 20px 0 0 30px;
label {
cursor: pointer;
}
i {
width: 16px;
display: inline-block;
cursor: pointer;
padding-left: 1px;
font-size: 16px;
margin-right: 13px;
}
input {
color: $sidebar-text;
background: none;
border: none;
outline: none;
width: 120px;
.al-user-profile {
float: right;
margin-right: 12px;
transition: all .15s ease-in-out;
padding: 0;
margin: 0 0 0 -3px;
height: 27px;
width: 36px;
height: 36px;
border: 0;
opacity: 1;
position: relative;
ul.profile-dropdown:after {
bottom: 100%;
right: 0;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #fff;
border-width: 10px;
margin-right: 28px;
}
a {
display: block;
}
img {
width: 45px;
height: 45px;
border-radius: 50%;
}
}
}
@media screen and (max-width: $resS) {
.search {
display: none;
}
}
@media screen and (max-width: $resXS) {
.page-top {
padding: 0 20px;
}
}
@media (max-width: $resXXS) {
.user-profile{
min-width: 136px;
}
a.refresh-data {
margin-right: 10px;
color: $sidebar-text;
font-size: 13px;
text-decoration: none;
font-weight: $font-normal;
float: right;
margin-top: 13px;
margin-right: 26px;
&:hover {
color: $warning !important;
}
}
a.collapse-menu-link {
margin-left: 10px;
font-size: 31px;
cursor: pointer;
display: block;
text-decoration: none;
line-height: 42px;
color: $sidebar-text;
padding: 0;
float: left;
margin: 11px 0 0 25px;
&:hover {
text-decoration: none;
color: $warning;
}
}
.al-skin-dropdown {
display: none;
float: right;
margin-top: 14px;
margin-right: 26px;
.tpl-skin-panel {
max-height: 300px;
overflow-y: scroll;
overflow-x: hidden;
}
}
.icon-palette {
display: inline-block;
width: 14px;
height: 13px;
@include bg('theme/palette.png');
background-size: cover;
}
.search {
text-shadow: none;
font-size: 13px;
line-height: 25px;
transition: all 0.5s ease;
white-space: nowrap;
overflow: hidden;
width: 162px;
float: left;
margin: 20px 0 0 30px;
label {
cursor: pointer;
}
i {
width: 16px;
display: inline-block;
cursor: pointer;
padding-left: 1px;
font-size: 16px;
margin-right: 13px;
}
input {
color: $sidebar-text;
background: none;
border: none;
outline: none;
width: 120px;
padding: 0;
margin: 0 0 0 -3px;
height: 27px;
}
}
@media screen and (max-width: $resS) {
.search {
display: none;
}
}
@media screen and (max-width: $resXS) {
.page-top {
padding: 0 20px;
}
}
@media (max-width: $resXXS) {
.user-profile {
min-width: 136px;
}
a.refresh-data {
margin-right: 10px;
}
a.collapse-menu-link {
margin-left: 10px;
}
.al-skin-dropdown {
display: none;
}
}
.profile-toggle-link {
cursor: pointer;
}
}
.profile-toggle-link{
cursor: pointer;
}

5
src/app/theme/components/baSidebar/baSidebar.component.ts
View file

@ -2,11 +2,10 @@ import {Component, ElementRef, HostListener} from '@angular/core';
import {GlobalState} from '../../../global.state';
import {layoutSizes} from '../../../theme';
import 'style-loader!./baSidebar.scss';
@Component({
selector: 'ba-sidebar',
templateUrl: './baSidebar.html'
templateUrl: './baSidebar.html',
styleUrls: ['./baSidebar.scss']
})
export class BaSidebar {
public menuHeight:number;

521
src/app/theme/components/baSidebar/baSidebar.scss
View file

@ -4,300 +4,303 @@ $sidebar-scroll-width: 4px;
$angle-left: "\f100";
$angle-right: "\f101";
.al-sidebar {
width: $sidebar-width;
top: $top-height;
left: 0;
z-index: 1001;
display: block;
min-height: 100%;
background-color: $sidebar;
height: 100%;
position: fixed;
}
:host /deep/{
.al-sidebar-list {
margin: 0;
overflow: hidden;
padding: 18px 0 0 0;
list-style: none;
}
.al-sidebar-sublist .subitem-submenu-list {
padding-left: 15px;
}
.subitem-submenu-link {
.fa {
top: 7px;
}
}
.al-sidebar-list-item {
display: block;
position: relative;
float: none;
padding: 0;
&.selected:not(.with-sub-menu) {
background-color: $primary;
a.al-sidebar-list-link {
color: $sidebar-text;
b {
color: $sidebar-text;
}
}
}
}
.ba-sidebar-item-expanded {
> ul.al-sidebar-sublist {
display: block!important;
}
}
.al-sidebar-list-item, .ba-sidebar-sublist-item {
&.ba-sidebar-item-expanded {
> .al-sidebar-list-link {
b {
transform: rotate(180deg);
}
}
> .al-sidebar-sublist {
display: block;
}
}
}
a.al-sidebar-list-link {
display: block;
height: 42px;
padding-left: 18px;
text-shadow: none;
font-size: 13px;
text-decoration: none;
color: $sidebar-text;
line-height: 42px;
white-space: nowrap;
overflow: hidden;
cursor: pointer;
&:hover {
color: $primary;
b {
color: $primary;
}
}
i {
margin-right: 18px;
width: 16px;
display: inline-block;
}
b {
.al-sidebar {
width: $sidebar-width;
top: $top-height;
left: 0;
z-index: 1001;
display: block;
opacity: 1;
width: 14px;
height: 14px;
line-height: 14px;
text-shadow: none;
font-size: 18px;
position: absolute;
right: 10px;
top: 12px;
padding: 0;
text-align: center;
color: $sidebar-text;
transition: transform 0.2s linear;
}
}
.slimScrollBar, .slimScrollRail {
border-radius: 0px !important;
width: $sidebar-scroll-width !important;
left: $sidebar-width - $sidebar-scroll-width;
}
@mixin layout-collapsed() {
.al-main {
margin-left: 50px;
min-height: 100%;
background-color: $sidebar;
height: 100%;
position: fixed;
}
.al-footer {
padding-left: 83px
.al-sidebar-list {
margin: 0;
overflow: hidden;
padding: 18px 0 0 0;
list-style: none;
}
}
@mixin default-sublist() {
padding: 0;
list-style: none;
position: relative;
display: none;
&.expanded {
display: block;
}
> ba-menu-item > li {
.al-sidebar-sublist .subitem-submenu-list {
padding-left: 15px;
}
.subitem-submenu-link {
.fa {
top: 7px;
}
}
.al-sidebar-list-item {
display: block;
position: relative;
float: none;
padding: 0;
border-bottom: none;
position: relative;
a {
display: block;
text-shadow: none;
font-size: 13px;
text-decoration: none;
color: $sidebar-text;
padding-left: 52px;
height: auto;
line-height: 29px;
&:hover {
&.selected:not(.with-sub-menu) {
background-color: $primary;
a.al-sidebar-list-link {
color: $sidebar-text;
b {
color: $sidebar-text;
}
}
}
}
.ba-sidebar-item-expanded {
> ul.al-sidebar-sublist {
display: block !important;
}
}
.al-sidebar-list-item, .ba-sidebar-sublist-item {
&.ba-sidebar-item-expanded {
> .al-sidebar-list-link {
b {
transform: rotate(180deg);
}
}
> .al-sidebar-sublist {
display: block;
}
}
}
a.al-sidebar-list-link {
display: block;
height: 42px;
padding-left: 18px;
text-shadow: none;
font-size: 13px;
text-decoration: none;
color: $sidebar-text;
line-height: 42px;
white-space: nowrap;
overflow: hidden;
cursor: pointer;
&:hover {
color: $primary;
b {
color: $primary;
}
}
&.selected:not(.with-sub-menu) > a {
border: none;
background-color: $primary;
&:hover {
color: $sidebar-text;
}
i {
margin-right: 18px;
width: 16px;
display: inline-block;
}
}
}
.al-sidebar-sublist {
@include default-sublist();
}
.sidebar-hover-elem{
width: $sidebar-scroll-width;
background: $primary;
position: absolute;
top: -150px;
left: $sidebar-width - $sidebar-scroll-width;
transition: all 0.5s ease;
transition-property: top, height;
height: 42px;
display: block;
}
.sidebar-select-elem {
display: block;
top: 94px;
}
@mixin sidebar-collapsed() {
.al-sidebar {
width: 52px;
.fa-angle-down, .fa-angle-up {
opacity: 0;
}
.al-sidebar-sublist {
position: absolute;
top: -1px;
left: 52px;
@include bg-translucent-dark(0.8);
width: 0;
b {
display: block;
overflow: hidden;
transition: width 0.5s ease;
&.slide-right {
width: 135px;
opacity: 1;
width: 14px;
height: 14px;
line-height: 14px;
text-shadow: none;
font-size: 18px;
position: absolute;
right: 10px;
top: 12px;
padding: 0;
text-align: center;
color: $sidebar-text;
transition: transform 0.2s linear;
}
}
.slimScrollBar, .slimScrollRail {
border-radius: 0px !important;
width: $sidebar-scroll-width !important;
left: $sidebar-width - $sidebar-scroll-width;
}
@mixin layout-collapsed() {
.al-main {
margin-left: 50px;
}
.al-footer {
padding-left: 83px
}
}
@mixin default-sublist() {
padding: 0;
list-style: none;
position: relative;
display: none;
&.expanded {
display: block;
}
> ba-menu-item > li {
display: block;
float: none;
padding: 0;
border-bottom: none;
position: relative;
a {
display: block;
text-shadow: none;
font-size: 13px;
text-decoration: none;
color: $sidebar-text;
padding-left: 52px;
height: auto;
line-height: 29px;
&:hover {
color: $primary;
}
}
&:before {
display: none;
&.selected:not(.with-sub-menu) > a {
border: none;
background-color: $primary;
&:hover {
color: $sidebar-text;
}
}
li {
}
}
.al-sidebar-sublist {
@include default-sublist();
}
.sidebar-hover-elem {
width: $sidebar-scroll-width;
background: $primary;
position: absolute;
top: -150px;
left: $sidebar-width - $sidebar-scroll-width;
transition: all 0.5s ease;
transition-property: top, height;
height: 42px;
display: block;
}
.sidebar-select-elem {
display: block;
top: 94px;
}
@mixin sidebar-collapsed() {
.al-sidebar {
width: 52px;
.fa-angle-down, .fa-angle-up {
opacity: 0;
}
.al-sidebar-sublist {
position: absolute;
top: -1px;
left: 52px;
@include bg-translucent-dark(0.8);
width: 0;
display: block;
overflow: hidden;
transition: width 0.5s ease;
&.slide-right {
width: 135px;
}
&:before {
display: none;
}
a {
padding-left: 18px;
padding-right: 18px;
min-width: 130px;
white-space: nowrap;
li {
&:before {
display: none;
}
a {
padding-left: 18px;
padding-right: 18px;
min-width: 130px;
white-space: nowrap;
}
}
}
}
.sidebar-hover-elem, .sidebar-select-elem {
left: 48px;
}
}
}
@mixin sidebar-hidden() {
.al-sidebar {
width: 0;
}
.sidebar-hover-elem, .sidebar-select-elem {
left: 48px;
display: none;
}
}
}
@mixin sidebar-hidden() {
.al-sidebar {
width: 0;
}
.sidebar-hover-elem, .sidebar-select-elem {
display: none;
}
}
@mixin sidebar-overlap() {
.al-sidebar {
width: $sidebar-width;
@include bg-translucent-dark(0.75);
transition: width 0.5s ease;
@mixin sidebar-overlap() {
.al-sidebar {
width: $sidebar-width;
@include bg-translucent-dark(0.75);
transition: width 0.5s ease;
.fa-angle-down, .fa-angle-up {
opacity: 1;
}
.fa-angle-down, .fa-angle-up {
opacity: 1;
}
.al-sidebar-sublist {
@include default-sublist();
top: auto;
left: auto;
background: none;
width: auto;
overflow: visible;
transition: none;
}
.al-sidebar-sublist {
@include default-sublist();
top: auto;
left: auto;
background: none;
width: auto;
overflow: visible;
transition: none;
}
.sidebar-hover-elem, .sidebar-select-elem {
left: $sidebar-width - 4;
transition: left 0.5s ease;
.sidebar-hover-elem, .sidebar-select-elem {
left: $sidebar-width - 4;
transition: left 0.5s ease;
}
}
}
}
.menu-collapsed {
.slimScrollBar, .slimScrollRail {
display: none!important;
}
}
@media (min-width: 1200px) {
.menu-collapsed {
.slimScrollBar, .slimScrollRail {
display: none !important;
}
}
@media (min-width: 1200px) {
.menu-collapsed {
@include layout-collapsed();
}
}
@media (min-width: $resXS + 1) {
.menu-collapsed {
@include sidebar-collapsed();
}
}
@media (max-width: 1200px) and (min-width: $resXS) {
@include layout-collapsed();
}
}
@media (min-width: $resXS + 1) {
.menu-collapsed {
@include sidebar-collapsed();
}
}
@media (max-width: 1200px) and (min-width: $resXS) {
@include layout-collapsed();
}
@media (max-width: 1200px) {
@include sidebar-overlap();
}
@media (max-width: $resXS) {
.menu-collapsed {
@include sidebar-hidden();
}
.al-main {
margin-left: 0;
}
.al-footer {
padding-left: 0;
@media (max-width: 1200px) {
@include sidebar-overlap();
}
@media (max-width: $resXS) {
.menu-collapsed {
@include sidebar-hidden();
}
.al-main {
margin-left: 0;
}
.al-footer {
padding-left: 0;
}
}
}

2
src/app/theme/sass/_icons.scss
View file

@ -13,7 +13,7 @@
@mixin svg-icon-class($iconName, $width:'', $height:'') {
.#{'i-' + $iconName} {
@include svg-icon($images-root + $iconName + '.svg', $width, $height);
@include svg-icon('/assets/img/' + $iconName + '.svg', $width, $height);
}
}

5
src/app/theme/sass/_layout.scss
View file

@ -160,11 +160,12 @@ a {
}
.icon-up {
@include bg-nr('arrow-green-up.svg');
//@include bg-nr('arrow-green-up.svg');
background: url('/assets/img/arrow-green-up.svg') no-repeat 0 0;
}
.icon-down {
@include bg-nr('arrow-red-down.svg');
background: url('/assets/img/arrow-red-down.svg') no-repeat 0 0;
}
.disable-text-selection {

14
src/app/theme/sass/_socicon.scss
View file

@ -1,11 +1,11 @@
@font-face {
font-family: 'socicon';
src: url('#{$fonts-root}socicon.eot');
src: url('#{$fonts-root}socicon.eot?#iefix') format('embedded-opentype'),
url('#{$fonts-root}socicon.woff') format('woff'),
url('#{$fonts-root}socicon.woff2') format('woff2'),
url('#{$fonts-root}socicon.ttf') format('truetype'),
url('#{$fonts-root}socicon.svg#sociconregular') format('svg');
src: url('/assets#{$fonts-root}socicon.eot');
src: url('/assets#{$fonts-root}socicon.eot?#iefix') format('embedded-opentype'),
url('/assets#{$fonts-root}socicon.woff') format('woff'),
url('/assets#{$fonts-root}socicon.woff2') format('woff2'),
url('/assets#{$fonts-root}socicon.ttf') format('truetype'),
url('/assets#{$fonts-root}socicon.svg#sociconregular') format('svg');
font-weight: $font-normal;
font-style: normal;
text-transform: initial;
@ -67,4 +67,4 @@
.socicon-behace {
@include socicon($behace-color, "H");
}
}

2
src/app/theme/sass/bootstrap-overrides/_card.scss
View file

@ -2,7 +2,7 @@ $card-title-height: 44px;
$card-header-font-size: 16px;
.card.card-blur {
$blurredBgUrl: $images-root + 'blur-bg-blurred.jpg';
$blurredBgUrl: '/img/blur-bg-blurred.jpg';
background: url($blurredBgUrl);
transition: none;
background-attachment: fixed;

2
src/app/theme/sass/conf/_mixins.scss
View file

@ -46,7 +46,7 @@
}
@mixin bg-image($relativeUrl) {
background-image: url($images-root + $relativeUrl);
background-image: url($assets-root + $images-root + $relativeUrl);
}
@mixin bg-translucent-dark($opacity) {

6
src/app/theme/sass/conf/_variables.scss
View file

@ -21,9 +21,9 @@ $large-card-height: 974px;
$default-animation-duration: 0.2s;
$default-animation-style: ease-out;
$assets-root: 'assets/';
$images-root: $assets-root + 'img/';
$fonts-root: $assets-root + 'fonts/';
$assets-root: '/assets';
$images-root: '/img/';
$fonts-root: '/fonts/';
$font-thin: 100;
$font-light: 300;
$font-normal: 400;

2
src/app/theme/sass/conf/colorSchemes/_ng2.scss
View file

@ -65,7 +65,7 @@ $hoverlink: darken($activelink, 20%);
@mixin body-bg() {
background-color: $body-bg;
$mainBgUrl: $images-root + 'sky-bg.jpg';
$mainBgUrl: $assets-root + $images-root + 'sky-bg.jpg';
&::before {
content: '';

122
src/custom-typings.d.ts vendored
View file

@ -1,122 +0,0 @@
/*
* Custom Type Definitions
* When including 3rd party modules you also need to include the type definition for the module
* if they don't provide one within the module. You can try to install it with @types
npm install @types/node
npm install @types/lodash
* If you can't find the type definition in the registry we can make an ambient/global definition in
* this file for now. For example
declare module 'my-module' {
export function doesSomething(value: string): string;
}
* If you are using a CommonJS module that is using module.exports then you will have to write your
* types using export = yourObjectOrFunction with a namespace above it
* notice how we have to create a namespace that is equal to the function we're assigning the export to
declare module 'jwt-decode' {
function jwtDecode(token: string): any;
namespace jwtDecode {}
export = jwtDecode;
}
*
* If you're prototying and you will fix the types later you can also declare it as type any
*
declare var assert: any;
declare var _: any;
declare var $: any;
*
* If you're importing a module that uses Node.js modules which are CommonJS you need to import as
* in the files such as main.browser.ts or any file within app/
*
import * as _ from 'lodash'
* You can include your type definitions in this file until you create one for the @types
*
*/
interface JQuery {
easyPieChart;
}
declare var GoogleMapsLoader:any;
declare var L:any;
declare var AmCharts:any;
declare var Chart:any;
declare var Chartist:any;
// support NodeJS modules without type definitions
declare module '*';
// Extra variables that live on Global that will be replaced by webpack DefinePlugin
declare var ENV: string;
declare var HMR: boolean;
declare var System: SystemJS;
interface SystemJS {
import: (path?: string) => Promise<any>;
}
interface GlobalEnvironment {
ENV: string;
HMR: boolean;
SystemJS: SystemJS;
System: SystemJS;
}
interface Es6PromiseLoader {
(id: string): (exportName?: string) => Promise<any>;
}
type FactoryEs6PromiseLoader = () => Es6PromiseLoader;
type FactoryPromise = () => Promise<any>;
type AsyncRoutes = {
[component: string]: Es6PromiseLoader |
Function |
FactoryEs6PromiseLoader |
FactoryPromise
};
type IdleCallbacks = Es6PromiseLoader |
Function |
FactoryEs6PromiseLoader |
FactoryPromise ;
interface WebpackModule {
hot: {
data?: any,
idle: any,
accept(dependencies?: string | string[], callback?: (updatedDependencies?: any) => void): void;
decline(deps?: any | string | string[]): void;
dispose(callback?: (data?: any) => void): void;
addDisposeHandler(callback?: (data?: any) => void): void;
removeDisposeHandler(callback?: (data?: any) => void): void;
check(autoApply?: any, callback?: (err?: Error, outdatedModules?: any[]) => void): void;
apply(options?: any, callback?: (err?: Error, outdatedModules?: any[]) => void): void;
status(callback?: (status?: string) => void): void | string;
removeStatusHandler(callback?: (status?: string) => void): void;
};
}
interface WebpackRequire {
(id: string): any;
(paths: string[], callback: (...modules: any[]) => void): void;
ensure(ids: string[], callback: (req: WebpackRequire) => void, chunkName?: string): void;
context(directory: string, useSubDirectories?: boolean, regExp?: RegExp): WebpackContext;
}
interface WebpackContext extends WebpackRequire {
keys(): string[];
}
interface ErrorStackTraceLimit {
stackTraceLimit: number;
}
// Extend typings
interface NodeRequire extends WebpackRequire {}
interface ErrorConstructor extends ErrorStackTraceLimit {}
interface NodeRequireFunction extends Es6PromiseLoader {}
interface NodeModule extends WebpackModule {}
interface Global extends GlobalEnvironment {}

47
src/desktop.ts
View file

@ -1,47 +0,0 @@
import { app, BrowserWindow } from 'electron';
let win: Electron.BrowserWindow;
function createWindow () {
// Create the browser window.
win = new BrowserWindow({width: 800, height: 600});
// and load the index.html of the app.
win.loadURL(`file://${__dirname}/index.html`);
// Open the DevTools.
// win.webContents.openDevTools();
// Emitted when the window is closed.
win.on('closed', () => {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
win = null;
});
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow);
// Quit when all windows are closed.
app.on('window-all-closed', () => {
// On macOS it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (win === null) {
createWindow();
}
});
// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

3
src/environments/environment.prod.ts Normal file
View file

@ -0,0 +1,3 @@
export const environment = {
production: true,
};

8
src/environments/environment.ts Normal file
View file

@ -0,0 +1,8 @@
// The file contents for the current environment will overwrite these during build.
// The build system defaults to the dev environment which uses `environment.ts`, but if you do
// `ng build --env=prod` then `environment.prod.ts` will be used instead.
// The list of which env maps to which file can be found in `.angular-cli.json`.
export const environment = {
production: false,
};

BIN
src/favicon.ico Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 5.3 KiB

24
src/index.html
View file

@ -5,18 +5,18 @@
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><%= htmlWebpackPlugin.options.title %></title>
<!--<title><%= htmlWebpackPlugin.options.title %></title>-->
<title>ng2-admin</title>
<meta name="description" content="<%= htmlWebpackPlugin.options.metadata.description %>">
<!--<meta name="description" content="<%= htmlWebpackPlugin.options.metadata.description %>">-->
<% if (webpackConfig.htmlElements.headTags) { %>
<!-- Configured Head Tags -->
<%= webpackConfig.htmlElements.headTags %>
<% } %>
<!--<% if (webpackConfig.htmlElements.headTags) { %>-->
<!--&lt;!&ndash; Configured Head Tags &ndash;&gt;-->
<!--<%= webpackConfig.htmlElements.headTags %>-->
<!--<% } %>-->
<!-- base url -->
<base href="<%= htmlWebpackPlugin.options.metadata.baseUrl %>">
<!--<base href="<%= htmlWebpackPlugin.options.metadata.baseUrl %>">-->
</head>
@ -28,10 +28,10 @@
<div></div>
</div>
<% if (htmlWebpackPlugin.options.metadata.isDevServer && htmlWebpackPlugin.options.metadata.HMR !== true) { %>
<!-- Webpack Dev Server reload -->
<script src="/webpack-dev-server.js"></script>
<% } %>
<!--<% if (htmlWebpackPlugin.options.metadata.isDevServer && htmlWebpackPlugin.options.metadata.HMR !== true) { %>-->
<!--&lt;!&ndash; Webpack Dev Server reload &ndash;&gt;-->
<!--<script src="/webpack-dev-server.js"></script>-->
<!--<% } %>-->
</body>
</html>

26
src/main.browser.aot.ts
View file

@ -1,26 +0,0 @@
/*
* Angular bootstraping
*/
import { platformBrowser } from '@angular/platform-browser';
import { decorateModuleRef } from './app/environment';
/*
* App Module
* our top level module that holds all of our components
*/
import { AppModuleNgFactory } from '../compiled/src/app/app.module.ngfactory';
/*
* Bootstrap our Angular app with a top level NgModule
*/
export function main(): Promise<any> {
return platformBrowser()
.bootstrapModuleFactory(AppModuleNgFactory)
.then(decorateModuleRef)
.catch(err => console.error(err));
}
export function bootstrapDomReady() {
document.addEventListener('DOMContentLoaded', main);
}
bootstrapDomReady();

25
src/main.browser.ts
View file

@ -1,25 +0,0 @@
/*
* Angular bootstraping
*/
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { decorateModuleRef } from './app/environment';
import { bootloader } from '@angularclass/hmr';
/*
* App Module
* our top level module that holds all of our components
*/
import { AppModule } from './app';
/*
* Bootstrap our Angular app with a top level NgModule
*/
export function main(): Promise<any> {
return platformBrowserDynamic()
.bootstrapModule(AppModule)
.then(decorateModuleRef)
.catch(err => console.error(err));
}
bootloader(main);

6
src/main.ts Normal file
View file

@ -0,0 +1,6 @@
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule);

5
src/package.json
View file

@ -1,5 +0,0 @@
{
"name" : "electron-app",
"version" : "0.0.1",
"main" : "main.js"
}

45
src/polyfills.browser.ts
View file

@ -1,45 +0,0 @@
// Polyfills
// import 'ie-shim'; // Internet Explorer 9 support
// import 'core-js/es6';
// Added parts of es6 which are necessary for your project or your browser support requirements.
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/set';
import 'core-js/es6/weak-map';
import 'core-js/es6/weak-set';
import 'core-js/es6/typed';
import 'core-js/es6/reflect';
// see issue https://github.com/AngularClass/angular2-webpack-starter/issues/709
// import 'core-js/es6/promise';
import 'core-js/es7/reflect';
import 'zone.js/dist/zone';
// Typescript emit helpers polyfill
import 'ts-helpers';
if ('production' === ENV) {
// Production
} else {
// Development
Error.stackTraceLimit = Infinity;
require('zone.js/dist/long-stack-trace-zone');
}

68
src/polyfills.ts Normal file
View file

@ -0,0 +1,68 @@
/**
* This file includes polyfills needed by Angular and is loaded before the app.
* You can add your own extra polyfills to this file.
*
* This file is divided into 2 sections:
* 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
* 2. Application imports. Files imported after ZoneJS that should be loaded before your main
* file.
*
* The current setup is for so-called "evergreen" browsers; the last versions of browsers that
* automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
* Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
*
* Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
*/
/***************************************************************************************************
* BROWSER POLYFILLS
*/
/** IE9, IE10 and IE11 requires all of the following polyfills. **/
// import 'core-js/es6/symbol';
// import 'core-js/es6/object';
// import 'core-js/es6/function';
// import 'core-js/es6/parse-int';
// import 'core-js/es6/parse-float';
// import 'core-js/es6/number';
// import 'core-js/es6/math';
// import 'core-js/es6/string';
// import 'core-js/es6/date';
// import 'core-js/es6/array';
// import 'core-js/es6/regexp';
// import 'core-js/es6/map';
// import 'core-js/es6/set';
/** IE10 and IE11 requires the following for NgClass support on SVG elements */
// import 'classlist.js'; // Run `npm install --save classlist.js`.
/** IE10 and IE11 requires the following to support `@angular/animation`. */
// import 'web-animations-js'; // Run `npm install --save web-animations-js`.
/** Evergreen browsers require these. **/
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';
/** ALL Firefox browsers require the following to support `@angular/animation`. **/
// import 'web-animations-js'; // Run `npm install --save web-animations-js`.
/***************************************************************************************************
* Zone JS is required by Angular itself.
*/
import 'zone.js/dist/zone'; // Included with Angular CLI.
/***************************************************************************************************
* APPLICATION IMPORTS
*/
/**
* Date, currency, decimal and percent pipes.
* Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
*/
// import 'intl'; // Run `npm install --save intl`.

1
src/styles.scss Normal file
View file

@ -0,0 +1 @@
/* You can add global styles to this file, and also import other style files */

32
src/test.ts Normal file
View file

@ -0,0 +1,32 @@
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
import 'zone.js/dist/long-stack-trace-zone';
import 'zone.js/dist/proxy.js';
import 'zone.js/dist/sync-test';
import 'zone.js/dist/jasmine-patch';
import 'zone.js/dist/async-test';
import 'zone.js/dist/fake-async-test';
import { getTestBed } from '@angular/core/testing';
import {
BrowserDynamicTestingModule,
platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing';
// Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
declare var __karma__: any;
declare var require: any;
// Prevent Karma from running prematurely.
__karma__.loaded = function () {};
// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(
BrowserDynamicTestingModule,
platformBrowserDynamicTesting()
);
// Then we find all the tests.
const context = require.context('./', true, /\.spec\.ts$/);
// And load the modules.
context.keys().map(context);
// Finally, start Karma to run the tests.
__karma__.start();

13
src/tsconfig.app.json Normal file
View file

@ -0,0 +1,13 @@
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"module": "es2015",
"baseUrl": "",
"types": []
},
"exclude": [
"test.ts",
"**/*.spec.ts"
]
}

20
src/tsconfig.spec.json Normal file
View file

@ -0,0 +1,20 @@
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/spec",
"module": "commonjs",
"target": "es5",
"baseUrl": "",
"types": [
"jasmine",
"node"
]
},
"files": [
"test.ts"
],
"include": [
"**/*.spec.ts",
"**/*.d.ts"
]
}

50
src/typings.d.ts vendored Normal file
View file

@ -0,0 +1,50 @@
/* SystemJS module definition */
declare var module: NodeModule;
interface NodeModule {
id: string;
}
/*
* Custom Type Definitions
* When including 3rd party modules you also need to include the type definition for the module
* if they don't provide one within the module. You can try to install it with @types
npm install @types/node
npm install @types/lodash
* If you can't find the type definition in the registry we can make an ambient/global definition in
* this file for now. For example
declare module 'my-module' {
export function doesSomething(value: string): string;
}
* If you are using a CommonJS module that is using module.exports then you will have to write your
* types using export = yourObjectOrFunction with a namespace above it
* notice how we have to create a namespace that is equal to the function we're assigning the export to
declare module 'jwt-decode' {
function jwtDecode(token: string): any;
namespace jwtDecode {}
export = jwtDecode;
}
*
* If you're prototying and you will fix the types later you can also declare it as type any
*
declare var assert: any;
declare var _: any;
declare var $: any;
*
* If you're importing a module that uses Node.js modules which are CommonJS you need to import as
* in the files such as main.browser.ts or any file within app/
*
import * as _ from 'lodash'
* You can include your type definitions in this file until you create one for the @types
*
*/
interface JQuery {
easyPieChart;
}
declare var GoogleMapsLoader:any;
declare var L:any;
declare var AmCharts:any;
declare var Chart:any;
declare var Chartist:any;

32
src/vendor.browser.ts
View file

@ -1,32 +0,0 @@
// For vendors for example jQuery, Lodash, angular2-jwt just import them here unless you plan on
// chunking vendors files for async loading. You would need to import the async loaded vendors
// at the entry point of the async loaded file. Also see custom-typings.d.ts as you also need to
// run `typings install x` where `x` is your module
// Angular 2
import '@angular/platform-browser';
import '@angular/platform-browser-dynamic';
import '@angular/core';
import '@angular/common';
import '@angular/forms';
import '@angular/http';
import '@angular/router';
// AngularClass
import '@angularclass/hmr';
// RxJS
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/mergeMap';
// Web dependencies
import 'jquery';
import 'bootstrap-loader';
import 'font-awesome-sass-loader';
import 'lodash';
if ('production' === ENV) {
// Production
} else {
// Development
}