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

Merge pull request #1 from williamwbwse/William-SettingPageDesign

Browse source 
Skeleton Structure V1.0
This commit is contained in:
Trinity X Solution 2023-02-03 15:43:12 +08:00 • committed by GitHub
commit 164bbfb625
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 315 additions and 309 deletions
Download patch file Download diff file Expand all files Collapse all files

3
angular.json
View file

@ -1,5 +1,8 @@
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"cli": {
"analytics": false
},
"version": 1,
"newProjectRoot": "projects",
"projects": {

16
src/app/@theme/components/header/header.component.html
View file

@ -3,27 +3,13 @@
<a (click)="toggleSidebar()" href="#" class="sidebar-toggle">
<nb-icon icon="menu-2-outline"></nb-icon>
</a>
<a class="logo" href="#" (click)="navigateHome()">ngx-<span>admin</span></a>
<a class="logo" href="#" (click)="navigateHome()">Klikx-<span>admin</span></a>
</div>
<nb-select [selected]="currentTheme" (selectedChange)="changeTheme($event)" status="primary">
<nb-option *ngFor="let theme of themes" [value]="theme.value"> {{ theme.name }}</nb-option>
</nb-select>
</div>
<div class="header-container">
<nb-actions size="small">
<nb-action class="control-item">
<nb-search type="rotate-layout"></nb-search>
</nb-action>
<nb-action class="control-item" icon="email-outline"></nb-action>
<nb-action class="control-item" icon="bell-outline"></nb-action>
<nb-action class="user-action" *nbIsGranted="['view', 'user']" >
<nb-user [nbContextMenu]="userMenu"
[onlyPicture]="userPictureOnly"
[name]="user?.name"
[picture]="user?.picture">
</nb-user>
</nb-action>
</nb-actions>
</div>

2
src/app/@theme/components/header/header.component.ts
View file

@ -77,7 +77,7 @@ export class HeaderComponent implements OnInit, OnDestroy {
}
changeTheme(themeName: string) {
this.themeService.changeTheme(themeName);
this.themeService.changeTheme('Corporate');
}
toggleSidebar(): boolean {

4
src/app/@theme/layouts/one-column/one-column.layout.ts
View file

@ -16,10 +16,6 @@ import { Component } from '@angular/core';
<nb-layout-column>
<ng-content select="router-outlet"></ng-content>
</nb-layout-column>
<nb-layout-footer fixed>
<ngx-footer></ngx-footer>
</nb-layout-footer>
</nb-layout>
`,
})

4
src/app/@theme/layouts/three-columns/three-columns.layout.ts
View file

@ -22,10 +22,6 @@ import { Component } from '@angular/core';
<nb-layout-column class="small">
</nb-layout-column>
<nb-layout-footer fixed>
<ngx-footer></ngx-footer>
</nb-layout-footer>
</nb-layout>
`,
})

4
src/app/@theme/layouts/two-columns/two-columns.layout.ts
View file

@ -20,10 +20,6 @@ import { Component } from '@angular/core';
<ng-content select="router-outlet"></ng-content>
</nb-layout-column>
<nb-layout-footer fixed>
<ngx-footer></ngx-footer>
</nb-layout-footer>
</nb-layout>
`,
})

2
src/app/@theme/theme.module.ts
View file

@ -17,7 +17,6 @@ import { NbEvaIconsModule } from '@nebular/eva-icons';
import { NbSecurityModule } from '@nebular/security';
import {
FooterComponent,
HeaderComponent,
SearchInputComponent,
TinyMCEComponent,
@ -55,7 +54,6 @@ const NB_MODULES = [
];
const COMPONENTS = [
HeaderComponent,
FooterComponent,
SearchInputComponent,
TinyMCEComponent,
OneColumnLayoutComponent,

31
src/app/pages/dashboard/dashboard.component.html
View file

@ -7,36 +7,5 @@
</div>
<div class="row">
<div class="col-xxxl-3 col-xxl-4 col-lg-5 col-md-6">
<ngx-temperature></ngx-temperature>
</div>
<div class="col-xxxl-9 col-xxl-8 col-lg-7 col-md-6">
<ngx-electricity></ngx-electricity>
</div>
</div>
<div class="row">
<div class="col-xxxl-9 col-xl-12">
<ngx-rooms></ngx-rooms>
</div>
<div class="col-xxxl-3 col-xxl-4 col-lg-7 col-md-6">
<ngx-contacts></ngx-contacts>
</div>
<div class="col-xxxl-3 col-xxl-4 col-lg-5 col-md-6">
<ngx-solar [chartValue]="solarValue"></ngx-solar>
<ngx-kitten></ngx-kitten>
</div>
<div class="col-xxxl-3 col-xxl-4 col-md-5">
<ngx-traffic></ngx-traffic>
<ngx-weather></ngx-weather>
</div>
<div class="col-xxxl-6 col-xxl-12 col-md-7">
<ngx-security-cameras></ngx-security-cameras>
</div>
</div>

58
src/app/pages/dashboard/dashboard.component.ts
View file

@ -19,34 +19,34 @@ export class DashboardComponent implements OnDestroy {
private alive = true;
solarValue: number;
lightCard: CardSettings = {
title: 'Light',
iconClass: 'nb-lightbulb',
type: 'primary',
};
rollerShadesCard: CardSettings = {
title: 'Roller Shades',
iconClass: 'nb-roller-shades',
apiserip: CardSettings = {
title: 'SERP API',
iconClass: 'nb-play',
type: 'success',
};
wirelessAudioCard: CardSettings = {
title: 'Wireless Audio',
iconClass: 'nb-audio',
type: 'info',
apicrawler: CardSettings = {
title: 'Crawler API',
iconClass: 'nb-play',
type: 'success',
};
coffeeMakerCard: CardSettings = {
title: 'Coffee Maker',
iconClass: 'nb-coffee-maker',
type: 'warning',
imagescoring: CardSettings = {
title: 'Image Analysis',
iconClass: 'nb-play',
type: 'success',
};
keywordscoring: CardSettings = {
title: 'Keywords Analysis',
iconClass: 'nb-play',
type: 'success',
};
statusCards: string;
commonStatusCardsSet: CardSettings[] = [
this.lightCard,
this.rollerShadesCard,
this.wirelessAudioCard,
this.coffeeMakerCard,
this.apiserip,
this.apicrawler,
this.imagescoring,
this.keywordscoring,
];
statusCardsByThemes: {
@ -59,20 +59,20 @@ export class DashboardComponent implements OnDestroy {
cosmic: this.commonStatusCardsSet,
corporate: [
{
...this.lightCard,
type: 'warning',
},
{
...this.rollerShadesCard,
...this.apiserip,
type: 'primary',
},
{
...this.wirelessAudioCard,
type: 'danger',
...this.apicrawler,
type: 'primary',
},
{
...this.coffeeMakerCard,
type: 'info',
...this.imagescoring,
type: 'primary',
},
{
...this.keywordscoring,
type: 'primary',
},
],
dark: this.commonStatusCardsSet,

247
src/app/pages/pages-menu-Backup.ts Normal file
View file

@ -0,0 +1,247 @@
import { NbMenuItem } from '@nebular/theme';
export const MENU_ITEMS: NbMenuItem[] = [
{
title: 'E-commerce',
icon: 'shopping-cart-outline',
link: '/pages/dashboard',
home: true,
},
{
title: 'IoT Dashboard',
icon: 'home-outline',
link: '/pages/iot-dashboard',
},
{
title: 'FEATURES',
group: true,
},
{
title: 'Layout',
icon: 'layout-outline',
children: [
{
title: 'Stepper',
link: '/pages/layout/stepper',
},
{
title: 'List',
link: '/pages/layout/list',
},
{
title: 'Infinite List',
link: '/pages/layout/infinite-list',
},
{
title: 'Accordion',
link: '/pages/layout/accordion',
},
{
title: 'Tabs',
pathMatch: 'prefix',
link: '/pages/layout/tabs',
},
],
},
{
title: 'Forms',
icon: 'edit-2-outline',
children: [
{
title: 'Form Inputs',
link: '/pages/forms/inputs',
},
{
title: 'Form Layouts',
link: '/pages/forms/layouts',
},
{
title: 'Buttons',
link: '/pages/forms/buttons',
},
{
title: 'Datepicker',
link: '/pages/forms/datepicker',
},
],
},
{
title: 'UI Features',
icon: 'keypad-outline',
link: '/pages/ui-features',
children: [
{
title: 'Grid',
link: '/pages/ui-features/grid',
},
{
title: 'Icons',
link: '/pages/ui-features/icons',
},
{
title: 'Typography',
link: '/pages/ui-features/typography',
},
{
title: 'Animated Searches',
link: '/pages/ui-features/search-fields',
},
],
},
{
title: 'Modal & Overlays',
icon: 'browser-outline',
children: [
{
title: 'Dialog',
link: '/pages/modal-overlays/dialog',
},
{
title: 'Window',
link: '/pages/modal-overlays/window',
},
{
title: 'Popover',
link: '/pages/modal-overlays/popover',
},
{
title: 'Toastr',
link: '/pages/modal-overlays/toastr',
},
{
title: 'Tooltip',
link: '/pages/modal-overlays/tooltip',
},
],
},
{
title: 'Extra Components',
icon: 'message-circle-outline',
children: [
{
title: 'Calendar',
link: '/pages/extra-components/calendar',
},
{
title: 'Progress Bar',
link: '/pages/extra-components/progress-bar',
},
{
title: 'Spinner',
link: '/pages/extra-components/spinner',
},
{
title: 'Alert',
link: '/pages/extra-components/alert',
},
{
title: 'Calendar Kit',
link: '/pages/extra-components/calendar-kit',
},
{
title: 'Chat',
link: '/pages/extra-components/chat',
},
],
},
{
title: 'Maps',
icon: 'map-outline',
children: [
{
title: 'Google Maps',
link: '/pages/maps/gmaps',
},
{
title: 'Leaflet Maps',
link: '/pages/maps/leaflet',
},
{
title: 'Bubble Maps',
link: '/pages/maps/bubble',
},
{
title: 'Search Maps',
link: '/pages/maps/searchmap',
},
],
},
{
title: 'Charts',
icon: 'pie-chart-outline',
children: [
{
title: 'Echarts',
link: '/pages/charts/echarts',
},
{
title: 'Charts.js',
link: '/pages/charts/chartjs',
},
{
title: 'D3',
link: '/pages/charts/d3',
},
],
},
{
title: 'Editors',
icon: 'text-outline',
children: [
{
title: 'TinyMCE',
link: '/pages/editors/tinymce',
},
{
title: 'CKEditor',
link: '/pages/editors/ckeditor',
},
],
},
{
title: 'Tables & Data',
icon: 'grid-outline',
children: [
{
title: 'Smart Table',
link: '/pages/tables/smart-table',
},
{
title: 'Tree Grid',
link: '/pages/tables/tree-grid',
},
],
},
{
title: 'Miscellaneous',
icon: 'shuffle-2-outline',
children: [
{
title: '404',
link: '/pages/miscellaneous/404',
},
],
},
{
title: 'Auth',
icon: 'lock-outline',
children: [
{
title: 'Login',
link: '/auth/login',
},
{
title: 'Register',
link: '/auth/register',
},
{
title: 'Request Password',
link: '/auth/request-password',
},
{
title: 'Reset Password',
link: '/auth/reset-password',
},
],
},
];

251
src/app/pages/pages-menu.ts
View file

@ -2,246 +2,61 @@ import { NbMenuItem } from '@nebular/theme';
export const MENU_ITEMS: NbMenuItem[] = [
{
title: 'E-commerce',
icon: 'shopping-cart-outline',
link: '/pages/dashboard',
home: true,
},
{
title: 'IoT Dashboard',
title: 'Dashboard',
icon: 'home-outline',
link: '/pages/iot-dashboard',
},
{
title: 'FEATURES',
title: 'Detection List',
icon: 'list-outline',
link: '',
},
{
title: 'Report',
group: true,
},
{
title: 'Layout',
icon: 'layout-outline',
children: [
{
title: 'Stepper',
link: '/pages/layout/stepper',
},
{
title: 'List',
link: '/pages/layout/list',
},
{
title: 'Infinite List',
link: '/pages/layout/infinite-list',
},
{
title: 'Accordion',
link: '/pages/layout/accordion',
},
{
title: 'Tabs',
pathMatch: 'prefix',
link: '/pages/layout/tabs',
},
],
title: 'SERP & Keywords',
icon: 'file-text-outline',
link: '',
},
{
title: 'Forms',
icon: 'edit-2-outline',
children: [
{
title: 'Form Inputs',
link: '/pages/forms/inputs',
},
{
title: 'Form Layouts',
link: '/pages/forms/layouts',
},
{
title: 'Buttons',
link: '/pages/forms/buttons',
},
{
title: 'Datepicker',
link: '/pages/forms/datepicker',
},
],
title: 'Crawler Status',
icon: 'file-text-outline',
link: '',
},
{
title: 'UI Features',
icon: 'keypad-outline',
link: '/pages/ui-features',
children: [
{
title: 'Grid',
link: '/pages/ui-features/grid',
},
{
title: 'Icons',
link: '/pages/ui-features/icons',
},
{
title: 'Typography',
link: '/pages/ui-features/typography',
},
{
title: 'Animated Searches',
link: '/pages/ui-features/search-fields',
},
],
title: 'Scoring Analysis',
icon: 'file-text-outline',
link: '',
},
{
title: 'Modal & Overlays',
icon: 'browser-outline',
children: [
{
title: 'Dialog',
link: '/pages/modal-overlays/dialog',
},
{
title: 'Window',
link: '/pages/modal-overlays/window',
},
{
title: 'Popover',
link: '/pages/modal-overlays/popover',
},
{
title: 'Toastr',
link: '/pages/modal-overlays/toastr',
},
{
title: 'Tooltip',
link: '/pages/modal-overlays/tooltip',
},
],
title: 'Settings',
group: true,
},
{
title: 'Extra Components',
icon: 'message-circle-outline',
children: [
{
title: 'Calendar',
link: '/pages/extra-components/calendar',
},
{
title: 'Progress Bar',
link: '/pages/extra-components/progress-bar',
},
{
title: 'Spinner',
link: '/pages/extra-components/spinner',
},
{
title: 'Alert',
link: '/pages/extra-components/alert',
},
{
title: 'Calendar Kit',
link: '/pages/extra-components/calendar-kit',
},
{
title: 'Chat',
link: '/pages/extra-components/chat',
},
],
title: 'Keywords Dictionary',
icon: 'book-outline',
link: '',
},
{
title: 'Maps',
icon: 'map-outline',
children: [
{
title: 'Google Maps',
link: '/pages/maps/gmaps',
},
{
title: 'Leaflet Maps',
link: '/pages/maps/leaflet',
},
{
title: 'Bubble Maps',
link: '/pages/maps/bubble',
},
{
title: 'Search Maps',
link: '/pages/maps/searchmap',
},
],
title: 'Image Similarity',
icon: 'image-outline',
link: '/pages/ui-features/icons',
},
{
title: 'Charts',
icon: 'pie-chart-outline',
children: [
{
title: 'Echarts',
link: '/pages/charts/echarts',
},
{
title: 'Charts.js',
link: '/pages/charts/chartjs',
},
{
title: 'D3',
link: '/pages/charts/d3',
},
],
title: 'SERP',
icon: 'settings-2-outline',
link: '/pages/ui-features/icons',
},
{
title: 'Editors',
icon: 'text-outline',
children: [
{
title: 'TinyMCE',
link: '/pages/editors/tinymce',
},
{
title: 'CKEditor',
link: '/pages/editors/ckeditor',
},
],
title: 'Crawler',
icon: 'settings-2-outline',
link: '/pages/ui-features/icons',
},
{
title: 'Tables & Data',
icon: 'grid-outline',
children: [
{
title: 'Smart Table',
link: '/pages/tables/smart-table',
},
{
title: 'Tree Grid',
link: '/pages/tables/tree-grid',
},
],
},
{
title: 'Miscellaneous',
icon: 'shuffle-2-outline',
children: [
{
title: '404',
link: '/pages/miscellaneous/404',
},
],
},
{
title: 'Auth',
icon: 'lock-outline',
children: [
{
title: 'Login',
link: '/auth/login',
},
{
title: 'Register',
link: '/auth/register',
},
{
title: 'Request Password',
link: '/auth/request-password',
},
{
title: 'Reset Password',
link: '/auth/reset-password',
},
],
title: 'Api Account',
icon: 'people-outline',
link: '/pages/ui-features/icons',
},
];

2
src/index.html
View file

@ -2,7 +2,7 @@
<html>
<head>
<meta charset="utf-8">
<title>ngx-admin Demo Application</title>
<title>Klikx SEO Admin Portal</title>
<base href="/">