refactor(app): rename components, move tinymce to separate file

This commit is contained in:
KostyaDanovsky 2017-05-06 14:52:41 +03:00
parent 923e56c3d2
commit 3ac268a096
40 changed files with 199 additions and 136 deletions

View file

@ -1,7 +1,7 @@
import { Component } from '@angular/core';
@Component({
selector: 'footer',
selector: 'ngx-footer',
styleUrls: ['./footer.component.scss'],
template: `
<span class="created-by">Created with by <b><a href="https://akveo.com" target="_blank">Akveo</a></b> 2017</span>

View file

@ -4,7 +4,7 @@ import { NgaSidebarService, NgaMenuService } from '@nga/theme';
import { NgaThemeService } from '@nga/theme/services/theme.service';
@Component({
selector: 'header',
selector: 'ngx-header',
styleUrls: ['./header.component.scss'],
template: `
<div class="left">
@ -14,7 +14,7 @@ import { NgaThemeService } from '@nga/theme/services/theme.service';
</div>
<nga-actions size="medium" inverse class="right">
<nga-action><search-input></search-input></nga-action>
<nga-action><ngx-search-input></ngx-search-input></nga-action>
<nga-action icon="ion-ios-email-outline"></nga-action>
<nga-action disabled icon="ion-ios-bell-outline"></nga-action>
<nga-action>

View file

@ -1,3 +1,4 @@
export * from './header/header.component';
export * from './footer/footer.component';
export * from '../components/search-input/search-input.component';
export * from './search-input/search-input.component';
export * from './tiny-mce/time-mce.component';

View file

@ -1,7 +1,7 @@
import { Component, ElementRef, EventEmitter, Output, ViewChild } from '@angular/core';
@Component({
selector: 'search-input',
selector: 'ngx-search-input',
styleUrls: ['./search-input.component.scss'],
template: `
<i class="control-icon ion ion-ios-search"

View file

@ -0,0 +1,33 @@
import {Component, OnDestroy, AfterViewInit, Output, EventEmitter, ElementRef} from '@angular/core';
@Component({
selector: 'ngx-tiny-mce',
template: '',
})
export class TinyMCEComponent implements OnDestroy, AfterViewInit {
@Output() editorKeyup = new EventEmitter<any>();
editor: any;
constructor(private host: ElementRef) { }
ngAfterViewInit() {
tinymce.init({
target: this.host.nativeElement,
plugins: ['link', 'paste', 'table'],
skin_url: 'assets/skins/lightgray',
setup: editor => {
this.editor = editor;
editor.on('keyup', () => {
let content = editor.getContent();
this.editorKeyup.emit(content);
});
},
});
}
ngOnDestroy() {
tinymce.remove(this.editor);
}
}

View file

@ -5,7 +5,7 @@ import { Component } from '@angular/core';
template: `
<nga-layout>
<nga-layout-header fixed>
<header></header>
<ngx-header></ngx-header>
</nga-layout-header>
<nga-sidebar>
@ -17,7 +17,7 @@ import { Component } from '@angular/core';
</nga-layout-column>
<nga-layout-footer fixed>
<footer></footer>
<ngx-footer></ngx-footer>
</nga-layout-footer>
</nga-layout>
`,

View file

@ -13,7 +13,13 @@ import {
NgaActionsModule,
} from '@nga/theme';
import { SearchInputComponent, HeaderComponent, FooterComponent } from './components';
import {
HeaderComponent,
FooterComponent,
SearchInputComponent,
TinyMCEComponent
} from './components';
import { OneColumnLayoutComponent } from './layouts';
const BASE_MODULES = [
@ -36,12 +42,8 @@ const COMPONENTS = [
HeaderComponent,
FooterComponent,
SearchInputComponent,
];
const LAYOUTS = [
TinyMCEComponent,
OneColumnLayoutComponent,
HeaderComponent,
FooterComponent,
];
@NgModule({
@ -54,11 +56,9 @@ const LAYOUTS = [
...BASE_MODULES,
...NGA_MODULES,
...COMPONENTS,
...LAYOUTS,
],
declarations: [
...COMPONENTS,
...LAYOUTS,
],
})
export class ThemeModule {

View file

@ -6,5 +6,5 @@ import { Component } from '@angular/core';
<p>charts work!</p>
`,
})
export class NgxChartsComponent {
export class ChartsComponent {
}

View file

@ -20,6 +20,6 @@ import 'ckeditor';
</nga-card>
`,
})
export class NgxCKEditorComponent {
export class CKEditorComponent {
}

View file

@ -0,0 +1,17 @@
import { Component } from '@angular/core';
import './ckeditor.loader';
import 'ckeditor';
@Component({
selector: 'ngx-ckeditor',
template: `
<nga-card>
<nga-card-body>
<ckeditor [config]="{extraPlugins: 'divarea'}"></ckeditor>
</nga-card-body>
</nga-card>
`,
})
export class CKEditorComponent {
}

View file

@ -0,0 +1 @@
window['CKEDITOR_BASEPATH'] = '//cdn.ckeditor.com/4.6.2/full-all/';

View file

@ -1,19 +1,19 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { NgxEditorsComponent } from './editors.component';
import { NgxTinyMCEComponent, NgxTinyMCEEditorComponent } from './tinyMCE.component';
import { NgxCKEditorComponent } from './ckeditor.component';
import { EditorsComponent } from './editors.component';
import { TinyMCEComponent, TinyMCEEditorComponent } from './tinyMCE.component';
import { CKEditorComponent } from './ckeditor.component';
const routes: Routes = [{
path: '',
component: NgxEditorsComponent,
component: EditorsComponent,
children: [{
path: 'tinymce',
component: NgxTinyMCEComponent,
component: TinyMCEComponent,
}, {
path: 'ckeditor',
component: NgxCKEditorComponent,
component: CKEditorComponent,
}],
}];
@ -21,11 +21,11 @@ const routes: Routes = [{
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class NgxEditorsRoutingModule { }
export class EditorsRoutingModule { }
export const routedComponents = [
NgxEditorsComponent,
NgxTinyMCEComponent,
NgxTinyMCEEditorComponent,
NgxCKEditorComponent,
EditorsComponent,
TinyMCEComponent,
TinyMCEEditorComponent,
CKEditorComponent,
];

View file

@ -6,6 +6,6 @@ import { Component } from '@angular/core';
<router-outlet></router-outlet>
`,
})
export class NgxEditorsComponent {
export class EditorsComponent {
}

View file

@ -1,18 +1,20 @@
import { NgModule } from '@angular/core';
import { CKEditorModule } from 'ng2-ckeditor';
import { NgxSharedModule } from '../../@shared/shared.module';
import { SharedModule } from '../../shared.module';
import { ThemeModule } from '../../@theme/theme.module';
import { NgxEditorsRoutingModule, routedComponents } from './editors-routing.module';
import { EditorsRoutingModule, routedComponents } from './editors-routing.module';
@NgModule({
imports: [
NgxSharedModule,
NgxEditorsRoutingModule,
SharedModule,
ThemeModule,
EditorsRoutingModule,
CKEditorModule,
],
declarations: [
...routedComponents,
],
})
export class NgxEditorsModule { }
export class EditorsModule { }

View file

@ -0,0 +1,18 @@
import {Component} from '@angular/core';
@Component({
selector: 'ngx-tiny-mce-page',
template: `
<nga-card>
<nga-card-body>
<ngx-tiny-mce (editorKeyup)="editorKeyup($event)"></ngx-tiny-mce>
</nga-card-body>
</nga-card>
`,
})
export class TinyMCEComponent {
editorKeyup($event) {
console.info('keyup', $event);
}
}

View file

@ -6,7 +6,7 @@ import { Component, OnDestroy, AfterViewInit, Input, Output, EventEmitter } from
<textarea id="{{ elementId }}"></textarea>
`,
})
export class NgxTinyMCEEditorComponent implements OnDestroy, AfterViewInit {
export class TinyMCEEditorComponent implements OnDestroy, AfterViewInit {
@Input() elementId: string;
@ -47,7 +47,7 @@ export class NgxTinyMCEEditorComponent implements OnDestroy, AfterViewInit {
</nga-card>
`,
})
export class NgxTinyMCEComponent {
export class TinyMCEComponent {
editorKeyupHandler($event) {
console.info($event);

View file

@ -4,7 +4,7 @@ import { Component } from '@angular/core';
selector: 'ngx-form-inputs',
templateUrl: './form-inputs.component.html',
})
export class NgxFormInputsComponent {
export class FormInputsComponent {
rate1: number = 3;
rate2: number = 4;

View file

@ -4,6 +4,6 @@ import { Component } from '@angular/core';
selector: 'ngx-form-layouts',
templateUrl: './form-layouts.component.html',
})
export class NgxFormLayoutsComponent {
export class FormLayoutsComponent {
}

View file

@ -1,19 +1,19 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { NgxFormsComponent } from './forms.component';
import { NgxFormInputsComponent } from './form-inputs/form-inputs.component';
import { NgxFormLayoutsComponent } from './form-layouts/form-layouts.component';
import { FormsComponent } from './forms.component';
import { FormInputsComponent } from './form-inputs/form-inputs.component';
import { FormLayoutsComponent } from './form-layouts/form-layouts.component';
const routes: Routes = [{
path: '',
component: NgxFormsComponent,
component: FormsComponent,
children: [{
path: 'inputs',
component: NgxFormInputsComponent,
component: FormInputsComponent,
}, {
path: 'layouts',
component: NgxFormLayoutsComponent,
component: FormLayoutsComponent,
}],
}];
@ -25,12 +25,12 @@ const routes: Routes = [{
RouterModule,
],
})
export class NgxFormsRoutingModule {
export class FormsRoutingModule {
}
export const routedComponents = [
NgxFormsComponent,
NgxFormInputsComponent,
NgxFormLayoutsComponent,
FormsComponent,
FormInputsComponent,
FormLayoutsComponent,
];

View file

@ -6,6 +6,6 @@ import { Component } from '@angular/core';
<router-outlet></router-outlet>
`,
})
export class NgxFormsComponent {
export class FormsComponent {
}

View file

@ -1,16 +1,16 @@
import { NgModule } from '@angular/core';
import { NgxSharedModule } from '../../@shared/shared.module';
import { SharedModule } from '../../shared.module';
import { NgxFormsRoutingModule, routedComponents } from './forms-routing.module';
import { FormsRoutingModule, routedComponents } from './forms-routing.module';
@NgModule({
imports: [
NgxSharedModule,
NgxFormsRoutingModule,
SharedModule,
FormsRoutingModule,
],
declarations: [
...routedComponents,
],
})
export class NgxFormsModule { }
export class FormsModule { }

View file

@ -5,8 +5,7 @@ import { PagesComponent } from './pages.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { ComponentsComponent } from './components/components.component';
import { MapsComponent } from './maps/maps.component';
import { NgxChartsComponent } from './charts/charts.component';
import { NgxEditorsComponent } from './editors/editors.component';
import { ChartsComponent } from './charts/charts.component';
const routes: Routes = [{
path: '',
@ -16,7 +15,7 @@ const routes: Routes = [{
component: DashboardComponent,
}, {
path: 'ui-features',
loadChildren: './ui-features/ui-features.module#NgxUiFeaturesModule',
loadChildren: './ui-features/ui-features.module#UiFeaturesModule',
}, {
path: 'components',
component: ComponentsComponent,
@ -25,13 +24,13 @@ const routes: Routes = [{
component: MapsComponent,
}, {
path: 'charts',
component: NgxChartsComponent,
component: ChartsComponent,
}, {
path: 'editors',
loadChildren: './editors/editors.module#NgxEditorsModule',
loadChildren: './editors/editors.module#EditorsModule',
}, {
path: 'forms',
loadChildren: './forms/forms.module#NgxFormsModule',
loadChildren: './forms/forms.module#FormsModule',
}, {
path: '',
redirectTo: 'dashboard',

View file

@ -10,14 +10,14 @@ import { PagesRoutingModule } from './pages-routing.module';
import { ThemeModule } from '../@theme/theme.module';
import { MapsComponent } from './maps/maps.component';
import { ComponentsComponent } from './components/components.component';
import { NgxChartsComponent } from './charts/charts.component';
import { ChartsComponent } from './charts/charts.component';
const PAGES_COMPONENTS = [
PagesComponent,
DashboardComponent,
MapsComponent,
ComponentsComponent,
NgxChartsComponent,
ChartsComponent,
];
@NgModule({

View file

@ -5,6 +5,6 @@ import { Component } from '@angular/core';
styleUrls: ['./buttons.component.scss'],
templateUrl: './buttons.component.html',
})
export class NgxButtonsComponent {
export class ButtonsComponent {
}

View file

@ -4,6 +4,6 @@ import { Component } from '@angular/core';
selector: 'ngx-disabled-buttons',
templateUrl: './disabled.component.html',
})
export class NgxDisabledButtonsComponent {
export class DisabledButtonsComponent {
}

View file

@ -4,6 +4,6 @@ import { Component } from '@angular/core';
selector: 'ngx-dropdown-buttons',
templateUrl: './dropdown.component.html',
})
export class NgxDropdownButtonsComponent {
export class DropdownButtonsComponent {
}

View file

@ -4,6 +4,6 @@ import { Component } from '@angular/core';
selector: 'ngx-flat-buttons',
templateUrl: './flat.component.html',
})
export class NgxFlatButtonsComponent {
export class FlatButtonsComponent {
}

View file

@ -4,6 +4,6 @@ import { Component } from '@angular/core';
selector: 'ngx-group-buttons',
templateUrl: './group.component.html',
})
export class NgxGroupButtonsComponent {
export class GroupButtonsComponent {
}

View file

@ -4,6 +4,6 @@ import { Component } from '@angular/core';
selector: 'ngx-icon-buttons',
templateUrl: './icon.component.html',
})
export class NgxIconButtonsComponent {
export class IconButtonsComponent {
}

View file

@ -4,6 +4,6 @@ import { Component } from '@angular/core';
selector: 'ngx-large-buttons',
templateUrl: './large.component.html',
})
export class NgxLargeButtonsComponent {
export class LargeButtonsComponent {
}

View file

@ -4,6 +4,6 @@ import { Component } from '@angular/core';
selector: 'ngx-raised-buttons',
templateUrl: './raised.component.html',
})
export class NgxRaisedButtonsComponent {
export class RaisedButtonsComponent {
}

View file

@ -4,6 +4,6 @@ import { Component } from '@angular/core';
selector: 'ngx-sized-buttons',
templateUrl: './sized.component.html',
})
export class NgxSizedButtonsComponent {
export class SizedButtonsComponent {
}

View file

@ -5,6 +5,6 @@ import { Component } from '@angular/core';
styleUrls: ['./grid.component.scss'],
templateUrl: './grid.component.html',
})
export class NgxGridComponent {
export class GridComponent {
}

View file

@ -5,7 +5,7 @@ import { Component, Pipe, PipeTransform } from '@angular/core';
styleUrls: ['./icons.component.scss'],
templateUrl: './icons.component.html',
})
export class NgxIconsComponent {
export class IconsComponent {
icons = {

View file

@ -5,7 +5,7 @@ import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
selector: 'ngx-modal',
templateUrl: './modal.component.html',
})
export class NgxModalComponent {
export class ModalComponent {
modalHeader: string;
modalContent: string = `Lorem ipsum dolor sit amet,

View file

@ -1,30 +1,30 @@
import { Component } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { NgxModalComponent } from './modal/modal.component';
import { ModalComponent } from './modal/modal.component';
@Component({
selector: 'ngx-modals',
styleUrls: ['./modals.component.scss'],
templateUrl: './modals.component.html',
})
export class NgxModalsComponent {
export class ModalsComponent {
constructor(private modalService: NgbModal) { }
showLargeModal() {
const activeModal = this.modalService.open(NgxModalComponent, { size: 'lg' });
const activeModal = this.modalService.open(ModalComponent, { size: 'lg' });
activeModal.componentInstance.modalHeader = 'Large Modal';
}
showSmallModal() {
const activeModal = this.modalService.open(NgxModalComponent, { size: 'sm' });
const activeModal = this.modalService.open(ModalComponent, { size: 'sm' });
activeModal.componentInstance.modalHeader = 'Small Modal';
}
showStaticModal() {
const activeModal = this.modalService.open(NgxModalComponent, {
const activeModal = this.modalService.open(ModalComponent, {
size: 'sm',
backdrop: 'static',
});

View file

@ -1,35 +1,27 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { NgxUiFeaturesComponent } from './ui-features.component';
import { NgxButtonsComponent } from './buttons/buttons.component';
import { NgxGridComponent } from './grid/grid.component';
import { NgxIconsComponent } from './icons/icons.component';
import { NgxModalsComponent } from './modals/modals.component';
import { NgxFlatButtonsComponent } from './buttons/flat/flat.component';
import { NgxRaisedButtonsComponent } from './buttons/raised/raised.component';
import { NgxSizedButtonsComponent } from './buttons/sized/sized.component';
import { NgxDisabledButtonsComponent } from './buttons/disabled/disabled.component';
import { NgxIconButtonsComponent } from './buttons/icon/icon.component';
import { NgxDropdownButtonsComponent } from './buttons/dropdown/dropdown.component';
import { NgxLargeButtonsComponent } from './buttons/large/large.component';
import { NgxGroupButtonsComponent } from './buttons/group/group.component';
import { UiFeaturesComponent } from './ui-features.component';
import { ButtonsComponent } from './buttons/buttons.component';
import { GridComponent } from './grid/grid.component';
import { IconsComponent } from './icons/icons.component';
import { ModalsComponent } from './modals/modals.component';
const routes: Routes = [{
path: '',
component: NgxUiFeaturesComponent,
component: UiFeaturesComponent,
children: [{
path: 'buttons',
component: NgxButtonsComponent,
component: ButtonsComponent,
}, {
path: 'grid',
component: NgxGridComponent,
component: GridComponent,
}, {
path: 'icons',
component: NgxIconsComponent,
component: IconsComponent,
}, {
path: 'modals',
component: NgxModalsComponent,
component: ModalsComponent,
}],
}];
@ -37,4 +29,4 @@ const routes: Routes = [{
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class NgxUiFeaturesRoutingModule { }
export class UiFeaturesRoutingModule { }

View file

@ -6,5 +6,5 @@ import { Component } from '@angular/core';
<router-outlet></router-outlet>
`,
})
export class NgxUiFeaturesComponent {
export class UiFeaturesComponent {
}

View file

@ -1,50 +1,50 @@
import { NgModule } from '@angular/core';
import { NgxSharedModule } from '../../@shared/shared.module';
import { SharedModule } from '../../shared.module';
import { NgxUiFeaturesRoutingModule } from './ui-features-routing.module';
import { NgxUiFeaturesComponent } from './ui-features.component';
import { NgxButtonsComponent } from './buttons/buttons.component';
import { NgxGridComponent } from './grid/grid.component';
import { NgxModalsComponent } from './modals/modals.component';
import { NgxIconsComponent } from './icons/icons.component';
import { NgxFlatButtonsComponent } from './buttons/flat/flat.component';
import { NgxRaisedButtonsComponent } from './buttons/raised/raised.component';
import { NgxSizedButtonsComponent } from './buttons/sized/sized.component';
import { NgxDisabledButtonsComponent } from './buttons/disabled/disabled.component';
import { NgxIconButtonsComponent } from './buttons/icon/icon.component';
import { NgxDropdownButtonsComponent } from './buttons/dropdown/dropdown.component';
import { NgxGroupButtonsComponent } from './buttons/group/group.component';
import { NgxLargeButtonsComponent } from './buttons/large/large.component';
import { NgxModalComponent } from './modals/modal/modal.component';
import { UiFeaturesRoutingModule } from './ui-features-routing.module';
import { UiFeaturesComponent } from './ui-features.component';
import { ButtonsComponent } from './buttons/buttons.component';
import { GridComponent } from './grid/grid.component';
import { ModalsComponent } from './modals/modals.component';
import { IconsComponent } from './icons/icons.component';
import { FlatButtonsComponent } from './buttons/flat/flat.component';
import { RaisedButtonsComponent } from './buttons/raised/raised.component';
import { SizedButtonsComponent } from './buttons/sized/sized.component';
import { DisabledButtonsComponent } from './buttons/disabled/disabled.component';
import { IconButtonsComponent } from './buttons/icon/icon.component';
import { DropdownButtonsComponent } from './buttons/dropdown/dropdown.component';
import { GroupButtonsComponent } from './buttons/group/group.component';
import { LargeButtonsComponent } from './buttons/large/large.component';
import { ModalComponent } from './modals/modal/modal.component';
export const NGX_UI_FEATURES_COMPONENTS = [
NgxUiFeaturesComponent,
NgxButtonsComponent,
NgxGridComponent,
NgxIconsComponent,
NgxModalsComponent,
NgxFlatButtonsComponent,
NgxRaisedButtonsComponent,
NgxSizedButtonsComponent,
NgxDisabledButtonsComponent,
NgxIconButtonsComponent,
NgxDropdownButtonsComponent,
NgxLargeButtonsComponent,
NgxGroupButtonsComponent,
NgxModalComponent,
const COMPONENTS = [
UiFeaturesComponent,
ButtonsComponent,
GridComponent,
ModalsComponent,
IconsComponent,
FlatButtonsComponent,
RaisedButtonsComponent,
SizedButtonsComponent,
DisabledButtonsComponent,
IconButtonsComponent,
DropdownButtonsComponent,
GroupButtonsComponent,
LargeButtonsComponent,
ModalComponent,
];
@NgModule({
imports: [
NgxSharedModule,
NgxUiFeaturesRoutingModule,
SharedModule,
UiFeaturesRoutingModule,
],
declarations: [
...NGX_UI_FEATURES_COMPONENTS,
...COMPONENTS,
],
entryComponents: [
NgxModalComponent,
ModalComponent,
],
})
export class NgxUiFeaturesModule { }
export class UiFeaturesModule { }

View file

@ -14,4 +14,4 @@ import { NgaCardModule, NgaBootstrapModule } from '@nga/theme';
NgaBootstrapModule,
],
})
export class NgxSharedModule { }
export class SharedModule { }