Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-16 23:40:14 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(aio): add a slim loading bar component page. Fix the hot table styles (#1055)

Browse source
This commit is contained in:
Daouda Diallo 2017-05-03 15:42:48 +00:00 • committed by Lex Zhukov
parent b6ffcbc167
commit 9af47feb6b
15 changed files with 200 additions and 100 deletions
Download patch file Download diff file Expand all files Collapse all files

1
.angular-cli.json
View file

@ -28,6 +28,7 @@
"../node_modules/chartist/dist/chartist.css",
"../node_modules/fullcalendar/dist/fullcalendar.css",
"../node_modules/handsontable/dist/handsontable.full.css",
"../node_modules/ng2-slim-loading-bar/style.css",
"app/theme/theme.scss",
"styles.scss"
],

1
package.json
View file

@ -76,6 +76,7 @@
"ng2-ckeditor": "1.1.6",
"ng2-completer": "1.3.1",
"ng2-handsontable": "0.48.0",
"ng2-slim-loading-bar": "4.0.0",
"ng2-smart-table": "1.0.3",
"ng2-tree": "2.0.0-alpha.5",
"ngx-uploader": "2.2.5",

8
src/app/pages/pages.menu.ts
View file

@ -124,6 +124,14 @@ export const PAGES_MENU = [
}
}
},
{
path: 'slim',
data: {
menu: {
title: 'Slim loading bar',
}
}
},
{
path: 'grid',
data: {

8
src/app/pages/tables/components/hotTables/handsontable-section.ts
View file

@ -3,6 +3,10 @@ import { Component } from '@angular/core';
@Component({
selector: 'handsontable-section',
template: `
<div class="widgets">
<div class="row">
<div class="col-md-12">
<ba-card title="Examples">
<section id="handsontable">
<div class="row">
<div class="col-md-12">
@ -24,6 +28,10 @@ import { Component } from '@angular/core';
</div>
</div>
</section>
</ba-card>
</div>
</div>
</div>
`
})
export class HandsontableSectionComponent {

2
src/app/pages/tables/components/hotTables/handsontable/advanced-demo.ts
View file

@ -24,7 +24,7 @@ export class AdvancedDemoComponent {
{data: 4, type: 'numeric', format: '0.00%',
renderer: function percentRenderer(instance, td, row, col, prop, value, cellProperties) {
Handsontable.renderers.NumericRenderer.apply(this, arguments);
td.style.color = (value < 0) ? 'red' : 'green';
td.style.color = 'white';
}},
{data: 5, type: 'numeric', format: '0,0.00[0000]'},
{data: 6, type: 'numeric', format: '0,0.00[0000]'}

26
src/app/pages/tables/components/hotTables/handsontable/science-demo.service.ts Normal file
View file

@ -0,0 +1,26 @@
let heatmap = [];
export function updateHeatmap(change, source) {
if (change && change.length) {
heatmap[change[0][1]] = generateHeatmapData(this, change[0][1]);
} else {
heatmap = [];
for (let i = 1, colCount = this.countCols(); i < colCount; i++) {
heatmap[i] = generateHeatmapData(this, i);
}
}
}
export function point(min, max, value) {
return (value - min) / (max - min);
}
export function generateHeatmapData(context:any, colId) {
let values = context.getDataAtCol(colId);
return {
min: Math.min.apply(null, values),
max: Math.max.apply(null, values)
};
}

28
src/app/pages/tables/components/hotTables/handsontable/science-demo.ts
View file

@ -1,35 +1,13 @@
import { Component } from '@angular/core';
import * as Handsontable from 'handsontable/dist/handsontable.full.js';
import { getScienceData } from './data';
import { updateHeatmap } from './science-demo.service';
import { point } from './science-demo.service';
import { generateHeatmapData } from './science-demo.service';
let heatmapScale = chroma.scale(['#17F556', '#ED6D47']);
let heatmap = [];
function updateHeatmap(change, source) {
if (change && change.length) {
heatmap[change[0][1]] = generateHeatmapData(this, change[0][1]);
} else {
heatmap = [];
for (let i = 1, colCount = this.countCols(); i < colCount; i++) {
heatmap[i] = generateHeatmapData(this, i);
}
}
}
function point(min, max, value) {
return (value - min) / (max - min);
}
function generateHeatmapData(context:any, colId) {
let values = context.getDataAtCol(colId);
return {
min: Math.min.apply(null, values),
max: Math.max.apply(null, values)
};
}
function heatmapRenderer(instance, td, row, col, prop, value, cellProperties) {
Handsontable.renderers.TextRenderer.apply(this, arguments);

17
src/app/pages/tables/components/hotTables/hotTables.scss
View file

@ -1,5 +1,18 @@
:host /deep/ {
.handsontable td {
color: #000;
.handsontable {
tr:first-child th, tr:first-child td {
border-top: 1px solid rgba(255, 255, 255, 0.3) !important;
}
th:first-child, th:nth-child(2), td:first-of-type, .htNoFrame + th, .htNoFrame + td {
border-top: 1px solid rgba(255, 255, 255, 0.3) !important;
}
td, th {
border-right: 1px solid rgba(255, 255, 255, 0.3) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
background-color: transparent !important;
color: #fff;
}
}
}

1
src/app/pages/ui/components/slim/index.ts Normal file
View file

@ -0,0 +1 @@
export * from './slim.component';

55
src/app/pages/ui/components/slim/slim.component.ts Normal file
View file

@ -0,0 +1,55 @@
import { Component } from '@angular/core';
import { SlimLoadingBarService } from 'ng2-slim-loading-bar';
@Component({
selector: 'slim',
styleUrls: ['./slim.scss'],
templateUrl: './slim.html'
})
export class SlimComponent {
constructor(private slimLoader: SlimLoadingBarService) {}
setProgres30() {
this.slimLoader.progress = 30;
}
startProgress() {
this.slimLoader.start(() => {
console.log('Loading complete');
});
}
completeProgress() {
this.slimLoader.complete();
}
stopProgress() {
this.slimLoader.stop();
}
resetProgress() {
this.slimLoader.reset();
}
incrementProgress() {
this.slimLoader.progress++;
}
changeProgressTo4px() {
this.slimLoader.height = '4px';
}
changeProgressTo2px() {
this.slimLoader.height = '2px';
}
changeProgressToWhite() {
this.slimLoader.color = 'white';
}
changeProgressToGreen() {
this.slimLoader.color = 'green';
}
}

28
src/app/pages/ui/components/slim/slim.html Normal file
View file

@ -0,0 +1,28 @@
<div class="widgets">
<div class="row">
<div class="col-md-12">
<ba-card title="Slim loading bar" class="slim-loading-bar-block">
<button class="btn btn-default" (click)="setProgres30()">Set progress equals 30</button>
<br>
<button class="btn btn-default" (click)="incrementProgress()">Increment progress</button>
<br>
<button class="btn btn-default" (click)="startProgress()">Start progress</button>
<br>
<button class="btn btn-default" (click)="completeProgress()">Complete progress</button>
<br>
<button class="btn btn-default" (click)="stopProgress()">Stop progress</button>
<br>
<button class="btn btn-default" (click)="resetProgress()">Reset progress</button>
<br>
<button class="btn btn-default" (click)="changeProgressTo4px()">Change height to 4px</button>
<br>
<button class="btn btn-default" (click)="changeProgressTo2px()">Change height to 2px</button>
<br>
<button class="btn btn-default" (click)="changeProgressToWhite()">Change color to white</button>
<br>
<button class="btn btn-default" (click)="changeProgressToGreen()">Change color to green</button>
</ba-card>
</div>
</div>
</div>
<ng2-slim-loading-bar></ng2-slim-loading-bar>

5
src/app/pages/ui/components/slim/slim.scss Normal file
View file

@ -0,0 +1,5 @@
:host /deep/ {
.slim-loading-bar-block button {
margin-bottom: 10px;
}
}

4
src/app/pages/ui/ui.module.ts
View file

@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { NgaModule } from '../../theme/nga.module';
import { SlimLoadingBarModule } from 'ng2-slim-loading-bar';
import { NgbDropdownModule, NgbModalModule } from '@ng-bootstrap/ng-bootstrap';
import { routing } from './ui.routing';
@ -10,6 +11,7 @@ import { Buttons } from './components/buttons/buttons.component';
import { Grid } from './components/grid/grid.component';
import { Icons } from './components/icons/icons.component';
import { Modals } from './components/modals/modals.component';
import { SlimComponent } from './components/slim/slim.component';
import { Typography } from './components/typography/typography.component';
import { FlatButtons } from './components/buttons/components/flatButtons';
@ -31,6 +33,7 @@ import { DefaultModal } from './components/modals/default-modal/default-modal.co
NgaModule,
NgbDropdownModule,
NgbModalModule,
SlimLoadingBarModule.forRoot(),
routing
],
declarations: [
@ -38,6 +41,7 @@ import { DefaultModal } from './components/modals/default-modal/default-modal.co
Grid,
Icons,
Modals,
SlimComponent,
Typography,
Ui,
FlatButtons,

4
src/app/pages/ui/ui.routing.ts
View file

@ -6,6 +6,7 @@ import { Grid } from './components/grid/grid.component';
import { Icons } from './components/icons/icons.component';
import { Modals } from './components/modals/modals.component';
import { Typography } from './components/typography/typography.component';
import { SlimComponent } from './components/slim/slim.component';
// noinspection TypeScriptValidateTypes
const routes: Routes = [
@ -17,7 +18,8 @@ const routes: Routes = [
{ path: 'grid', component: Grid },
{ path: 'icons', component: Icons },
{ path: 'typography', component: Typography },
{ path: 'modals', component: Modals }
{ path: 'modals', component: Modals },
{ path: 'slim', component: SlimComponent },
]
}
];

74
yarn.lock
View file

@ -316,7 +316,7 @@ ansi-html@0.0.7:
version "0.0.7"
resolved "https://registry.yarnpkg.com/ansi-html/-/ansi-html-0.0.7.tgz#813584021962a9e9e6fd039f940d12f56ca7859e"
ansi-regex@*, ansi-regex@^2.0.0:
ansi-regex@^2.0.0:
version "2.1.1"
resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
@ -512,7 +512,7 @@ async@0.2, async@~0.2.6:
version "0.2.10"
resolved "https://registry.yarnpkg.com/async/-/async-0.2.10.tgz#b6bbe0b0674b9d719708ca38de8c237cb526c3d1"
async@2.1.2:
async@2.1.2, async@^2.1.2:
version "2.1.2"
resolved "https://registry.yarnpkg.com/async/-/async-2.1.2.tgz#612a4ab45ef42a70cde806bad86ee6db047e8385"
dependencies:
@ -526,7 +526,7 @@ async@^1.4.0, async@^1.5.2:
version "1.5.2"
resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
async@^2.0.1, async@^2.1.2, async@^2.1.4, async@^2.1.5:
async@^2.0.1, async@^2.1.4, async@^2.1.5:
version "2.4.0"
resolved "https://registry.yarnpkg.com/async/-/async-2.4.0.tgz#4990200f18ea5b837c2cc4f8c031a6985c385611"
dependencies:
@ -1732,7 +1732,7 @@ debug@2.6.3:
dependencies:
ms "0.7.2"
debuglog@*, debuglog@^1.0.1:
debuglog@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/debuglog/-/debuglog-1.0.1.tgz#aa24ffb9ac3df9a2351837cfb2d279360cd78492"
@ -2800,7 +2800,7 @@ handlebars@^4.0.2, handlebars@^4.0.3:
optionalDependencies:
uglify-js "^2.6"
handsontable@^0.31.1:
handsontable@0.31.1:
version "0.31.2"
resolved "https://registry.yarnpkg.com/handsontable/-/handsontable-0.31.2.tgz#276c5208b6f679f0a0ae539a1806a85279943a0a"
dependencies:
@ -3039,7 +3039,7 @@ img-stats@^0.5.2:
dependencies:
xmldom "^0.1.19"
imurmurhash@*, imurmurhash@^0.1.4:
imurmurhash@^0.1.4:
version "0.1.4"
resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
@ -3902,7 +3902,7 @@ lodash._basefor@^3.0.0:
version "3.0.3"
resolved "https://registry.yarnpkg.com/lodash._basefor/-/lodash._basefor-3.0.3.tgz#7550b4e9218ef09fad24343b612021c79b4c20c2"
lodash._baseindexof@*, lodash._baseindexof@^3.0.0:
lodash._baseindexof@^3.0.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/lodash._baseindexof/-/lodash._baseindexof-3.1.0.tgz#fe52b53a1c6761e42618d654e4a25789ed61822c"
@ -3914,13 +3914,6 @@ lodash._baseisequal@^3.0.0:
lodash.istypedarray "^3.0.0"
lodash.keys "^3.0.0"
lodash._baseuniq@*:
version "4.6.0"
resolved "https://registry.yarnpkg.com/lodash._baseuniq/-/lodash._baseuniq-4.6.0.tgz#0ebb44e456814af7905c6212fa2c9b2d51b841e8"
dependencies:
lodash._createset "~4.0.0"
lodash._root "~3.0.0"
lodash._baseuniq@^3.0.0:
version "3.0.3"
resolved "https://registry.yarnpkg.com/lodash._baseuniq/-/lodash._baseuniq-3.0.3.tgz#2123fa0db2d69c28d5beb1c1f36d61522a740234"
@ -3929,25 +3922,21 @@ lodash._baseuniq@^3.0.0:
lodash._cacheindexof "^3.0.0"
lodash._createcache "^3.0.0"
lodash._bindcallback@*, lodash._bindcallback@^3.0.0:
lodash._bindcallback@^3.0.0:
version "3.0.1"
resolved "https://registry.yarnpkg.com/lodash._bindcallback/-/lodash._bindcallback-3.0.1.tgz#e531c27644cf8b57a99e17ed95b35c748789392e"
lodash._cacheindexof@*, lodash._cacheindexof@^3.0.0:
lodash._cacheindexof@^3.0.0:
version "3.0.2"
resolved "https://registry.yarnpkg.com/lodash._cacheindexof/-/lodash._cacheindexof-3.0.2.tgz#3dc69ac82498d2ee5e3ce56091bafd2adc7bde92"
lodash._createcache@*, lodash._createcache@^3.0.0:
lodash._createcache@^3.0.0:
version "3.1.2"
resolved "https://registry.yarnpkg.com/lodash._createcache/-/lodash._createcache-3.1.2.tgz#56d6a064017625e79ebca6b8018e17440bdcf093"
dependencies:
lodash._getnative "^3.0.0"
lodash._createset@~4.0.0:
version "4.0.3"
resolved "https://registry.yarnpkg.com/lodash._createset/-/lodash._createset-4.0.3.tgz#0f4659fbb09d75194fa9e2b88a6644d363c9fe26"
lodash._getnative@*, lodash._getnative@^3.0.0:
lodash._getnative@^3.0.0:
version "3.9.1"
resolved "https://registry.yarnpkg.com/lodash._getnative/-/lodash._getnative-3.9.1.tgz#570bc7dede46d61cdcde687d65d3eecbaa3aaff5"
@ -3959,10 +3948,6 @@ lodash._reinterpolate@~3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
lodash._root@~3.0.0:
version "3.0.1"
resolved "https://registry.yarnpkg.com/lodash._root/-/lodash._root-3.0.1.tgz#fba1c4524c19ee9a5f8136b4609f017cf4ded692"
lodash.assign@^4.2.0:
version "4.2.0"
resolved "https://registry.yarnpkg.com/lodash.assign/-/lodash.assign-4.2.0.tgz#0d99f3ccd7a6d261d19bdaeb9245005d285808e7"
@ -3989,14 +3974,10 @@ lodash.flatten@^3.0.2:
lodash._baseflatten "^3.0.0"
lodash._isiterateecall "^3.0.0"
lodash.isarguments@*, lodash.isarguments@^3.0.0:
lodash.isarguments@^3.0.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz#2f573d85c6a24289ff00663b491c1d338ff3458a"
lodash.isarray@*:
version "4.0.0"
resolved "https://registry.yarnpkg.com/lodash.isarray/-/lodash.isarray-4.0.0.tgz#2aca496b28c4ca6d726715313590c02e6ea34403"
lodash.isarray@^3.0.0:
version "3.0.4"
resolved "https://registry.yarnpkg.com/lodash.isarray/-/lodash.isarray-3.0.4.tgz#79e4eb88c36a8122af86f844aa9bcd851b5fbb55"
@ -4005,10 +3986,6 @@ lodash.istypedarray@^3.0.0:
version "3.0.6"
resolved "https://registry.yarnpkg.com/lodash.istypedarray/-/lodash.istypedarray-3.0.6.tgz#c9a477498607501d8e8494d283b87c39281cef62"
lodash.keys@*:
version "4.2.0"
resolved "https://registry.yarnpkg.com/lodash.keys/-/lodash.keys-4.2.0.tgz#a08602ac12e4fb83f91fc1fb7a360a4d9ba35205"
lodash.keys@^3.0.0:
version "3.1.2"
resolved "https://registry.yarnpkg.com/lodash.keys/-/lodash.keys-3.1.2.tgz#4dbc0472b156be50a0b286855d1bd0b0c656098a"
@ -4043,7 +4020,7 @@ lodash.pairs@^3.0.0:
dependencies:
lodash.keys "^3.0.0"
lodash.restparam@*, lodash.restparam@^3.0.0:
lodash.restparam@^3.0.0:
version "3.6.1"
resolved "https://registry.yarnpkg.com/lodash.restparam/-/lodash.restparam-3.6.1.tgz#936a4e309ef330a7645ed4145986c85ae5b20805"
@ -4143,11 +4120,7 @@ lowercase-keys@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-1.0.0.tgz#4e3366b39e7f5457e35f1324bdf6f88d0bfc7306"
lru-cache@2:
version "2.7.3"
resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-2.7.3.tgz#6d4524e8b955f95d4f5b58851ce21dd72fb4e952"
lru-cache@2.2.x:
lru-cache@2, lru-cache@2.2.x:
version "2.2.4"
resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-2.2.4.tgz#6c658619becf14031d0d0b594b16042ce4dc063d"
@ -4397,6 +4370,10 @@ ng2-handsontable@0.48.0:
dependencies:
handsontable "^0.31.1"
ng2-slim-loading-bar@4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/ng2-slim-loading-bar/-/ng2-slim-loading-bar-4.0.0.tgz#7256fdde7c058f14955a3ef2e65afafb5b664603"
ng2-smart-table@1.0.3:
version "1.0.3"
resolved "https://registry.yarnpkg.com/ng2-smart-table/-/ng2-smart-table-1.0.3.tgz#259f12564044aa87f6a86885fa16fbe6be8c2439"
@ -5722,7 +5699,7 @@ readable-stream@^2.0.2, readable-stream@~2.0.5:
string_decoder "~0.10.x"
util-deprecate "~1.0.1"
readdir-scoped-modules@*, readdir-scoped-modules@^1.0.0:
readdir-scoped-modules@^1.0.0:
version "1.0.2"
resolved "https://registry.yarnpkg.com/readdir-scoped-modules/-/readdir-scoped-modules-1.0.2.tgz#9fafa37d286be5d92cbaebdee030dc9b5f406747"
dependencies:
@ -6520,7 +6497,7 @@ stringstream@~0.0.4:
version "0.0.5"
resolved "https://registry.yarnpkg.com/stringstream/-/stringstream-0.0.5.tgz#4e484cd4de5a0bbbee18e46307710a8a81621878"
strip-ansi@*, strip-ansi@^3.0.0, strip-ansi@^3.0.1:
strip-ansi@^3.0.0, strip-ansi@^3.0.1:
version "3.0.1"
resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-3.0.1.tgz#6a385fb8853d952d5ff05d0e8aaf94278dc63dcf"
dependencies:
@ -7142,7 +7119,7 @@ v8flags@^2.0.11:
dependencies:
user-home "^1.1.1"
validate-npm-package-license@*, validate-npm-package-license@^3.0.1:
validate-npm-package-license@^3.0.1:
version "3.0.1"
resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.1.tgz#2804babe712ad3379459acfbe24746ab2c303fbc"
dependencies:
@ -7445,20 +7422,13 @@ write@^0.2.1:
dependencies:
mkdirp "^0.5.1"
ws@1.1.1:
ws@1.1.1, ws@^1.0.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/ws/-/ws-1.1.1.tgz#082ddb6c641e85d4bb451f03d52f06eabdb1f018"
dependencies:
options ">=0.0.5"
ultron "1.0.x"
ws@^1.0.1:
version "1.1.4"
resolved "https://registry.yarnpkg.com/ws/-/ws-1.1.4.tgz#57f40d036832e5f5055662a397c4de76ed66bf61"
dependencies:
options ">=0.0.5"
ultron "1.0.x"
wtf-8@1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/wtf-8/-/wtf-8-1.0.0.tgz#392d8ba2d0f1c34d1ee2d630f15d0efb68e1048a"