chore(): introducing covalent-code-editor in documentation

* Covalent Code Editor Documentation * chore(): remove CovalentCodeEditorModule from app.module * fixing demo with switching to javascript language on code editor component * chore(): update docs to be inline with other docs * chore(): change code editor icon
Teradata · Jun 30, 2017 · 5a20fa9 · 5a20fa9
1 parent f5d9f33
commit 5a20fa9
Show file tree

Hide file tree

Showing 10 changed files with 120 additions and 1 deletion.
diff --git a/.angular-cli.json b/.angular-cli.json
@@ -9,6 +9,7 @@
       "outDir": "dist",
       "assets": [
         { "glob": "**/*", "input": "../docs", "output": "./docs/" },
+        { "glob": "**/*", "input": "../node_modules/@covalent/code-editor/assets/monaco", "output": "./assets/monaco/" },
         "app/assets",
         "platform",
         "favicon.ico"

diff --git a/package.json b/package.json
@@ -66,6 +66,7 @@
     "@angular/platform-browser-dynamic": "^4.2.0",
     "@angular/platform-server": "^4.2.0",
     "@angular/router": "^4.2.0",
+    "@covalent/code-editor": "^1.0.0-alpha.5",
     "@ngx-translate/core": "7.0.0",
     "@ngx-translate/http-loader": "0.1.0",
     "@swimlane/ngx-charts": "5.3.1",

diff --git a/src/app/components/components/code-editor/code-editor.component.html b/src/app/components/components/code-editor/code-editor.component.html
@@ -0,0 +1,53 @@
+<md-card>
+  <md-card-title>Code Editor</md-card-title>
+  <md-card-subtitle>Multi-language code editor for Browser and Electron</md-card-subtitle>
+  <md-divider></md-divider>
+  <md-card-content>
+    <p>With this component you can utilize the Monaco Editor as an Angular Component in a Browser or Electron.</p>
+  </md-card-content>
+  <md-divider></md-divider>
+  <md-card-actions>
+    <a md-button color="accent" href="https://github.com/Teradata/covalent-code-editor" target="_blank" class="text-upper">Github Repo</a>
+    <a md-button color="accent" href="https://www.npmjs.com/package/@covalent/code-editor" target="_blank" class="text-upper">npm Module</a>
+  </md-card-actions>
+</md-card>
+<md-card>
+  <md-card-title>Basic example</md-card-title>
+  <md-card-subtitle>Editor running in browser <br>(change language, theme, right click context menu, syntax highlighting, and more)</md-card-subtitle>
+  <md-divider></md-divider>
+  <md-card-content>
+    <div layout="row" layout-align="start center">
+      <td-code-editor #editor class="editor" [theme]="editorTheme" flex [language]="editorLanguage" [value]="editorVal"></td-code-editor>
+    </div>
+  </md-card-content>
+  <md-divider></md-divider>
+  <md-card-actions>
+    <div class="pad-sm">
+      <span hide-xs class="md-body-1">Editor Language</span>
+      <md-select floatPlaceholder="never" [(ngModel)]="editorLanguage" (change)="changeLanguage()" placeholder="Editor Language">
+        <md-option value="sql">SQL</md-option>
+        <md-option value="javascript">JavaScript</md-option>
+        <md-option value="html">HTML</md-option>
+      </md-select>
+    </div>
+    <md-divider></md-divider>
+    <div class="pad-sm">
+      <span hide-xs class="md-body-1">Editor Theme</span>
+      <md-select floatPlaceholder="never" [(ngModel)]="editorTheme" (change)="changeTheme()" placeholder="Editor Theme">
+        <md-option value="vs">Light</md-option>
+        <md-option value="vs-dark">Dark</md-option>
+        <md-option value="hc-black">High Contrast</md-option>
+      </md-select>
+    </div>
+    <md-divider></md-divider>
+  </md-card-actions>
+</md-card>
+
+<td-readme-loader resourceUrl="https://raw.githubusercontent.com/Teradata/covalent-code-editor/master/docs/API.md">
+</td-readme-loader>
+
+<td-readme-loader resourceUrl="https://raw.githubusercontent.com/Teradata/covalent-code-editor/master/docs/SETUP.md">
+</td-readme-loader>
+
+<td-readme-loader resourceUrl="https://raw.githubusercontent.com/Teradata/covalent-code-editor/master/docs/ELECTRON.md">
+</td-readme-loader>
diff --git a/src/app/components/components/code-editor/code-editor.component.scss b/src/app/components/components/code-editor/code-editor.component.scss
@@ -0,0 +1,3 @@
+.editor {
+    height: 200px;
+}
diff --git a/src/app/components/components/code-editor/code-editor.component.ts b/src/app/components/components/code-editor/code-editor.component.ts
@@ -0,0 +1,39 @@
+import { Component, HostBinding, ViewChild } from '@angular/core';
+import { slideInDownAnimation } from '../../../app.animations';
+import { TdCodeEditorComponent } from '@covalent/code-editor';
+
+@Component({
+  selector: 'code-editor-demo',
+  styleUrls: [ './code-editor.component.scss' ],
+  templateUrl: './code-editor.component.html',
+  animations: [slideInDownAnimation],
+})
+export class CodeEditorDemoComponent {
+
+  @ViewChild('editor') private _tdEditor: TdCodeEditorComponent;
+  @HostBinding('@routeAnimation') routeAnimation: boolean = true;
+  @HostBinding('class.td-route-animation') classAnimation: boolean = true;
+
+  editorTheme: string = 'hc-black';
+  editorLanguage: string = 'sql';
+  editorVal: string = `SELECT department_number, sampleid 
+FROM department
+SAMPLE .25, .25, .50
+ORDER BY sampleid;
+
+SELECT department_number, sampleid 
+FROM department
+SAMPLE  3, 5, 8
+ORDER BY sampleid;
+`;
+
+  // Theme
+  changeTheme(): void {
+    this._tdEditor.theme = this.editorTheme;
+  }
+
+  // Language
+  changeLanguage(): void {
+    this._tdEditor.language = this.editorLanguage;
+  }
+}
diff --git a/src/app/components/components/components.component.ts b/src/app/components/components/components.component.ts
@@ -117,6 +117,11 @@ export class ComponentsComponent implements AfterViewInit {
     icon: 'format_align_center',
     route: 'dynamic-forms',
     title: 'Dynamic Forms',
+  }, {
+    description: 'Multi-languge code editor for Browser and Electron',
+    icon: 'featured_play_list',
+    route: 'code-editor',
+    title: 'Code Editor',
   }, {
     description: 'Http wrappers and helpers',
     icon: 'http',

diff --git a/src/app/components/components/components.module.ts b/src/app/components/components/components.module.ts
@@ -25,6 +25,7 @@ import { DataTableDemoComponent } from './data-table/data-table.component';
 import { PagingDemoComponent } from './paging/paging.component';
 import { SearchDemoComponent } from './search/search.component';
 import { DynamicFormsDemoComponent } from './dynamic-forms/dynamic-forms.component';
+import { CodeEditorDemoComponent } from './code-editor/code-editor.component';
 import { NotificationsDemoComponent } from './notifications/notifications.component';
 import { NgxChartsDemoComponent } from './ngx-charts/ngx-charts.component';
 import { NgxTranslateDemoComponent } from './ngx-translate/ngx-translate.component';
@@ -44,6 +45,7 @@ import { CovalentCommonModule, CovalentLayoutModule, CovalentMediaModule, Covale
 import { CovalentHighlightModule } from '../../../platform/highlight';
 import { CovalentMarkdownModule } from '../../../platform/markdown';
 import { CovalentDynamicFormsModule } from '../../../platform/dynamic-forms';
+import { CovalentCodeEditorModule } from '../../../../node_modules/@covalent/code-editor';
 
 import { DocumentationToolsModule } from '../../documentation-tools';
 
@@ -72,6 +74,7 @@ import { ToolbarModule } from '../../components/toolbar/toolbar.module';
     PagingDemoComponent,
     SearchDemoComponent,
     DynamicFormsDemoComponent,
+    CodeEditorDemoComponent,
     NotificationsDemoComponent,
     // External Dependencies
     NgxChartsDemoComponent,
@@ -117,6 +120,7 @@ import { ToolbarModule } from '../../components/toolbar/toolbar.module';
     CovalentMarkdownModule,
     CovalentDynamicFormsModule,
     CovalentMessageModule,
+    CovalentCodeEditorModule,
     DocumentationToolsModule,
     NgxChartsModule,
     TranslateModule,

diff --git a/src/app/components/components/components.routes.ts b/src/app/components/components/components.routes.ts
@@ -21,6 +21,7 @@ import { DataTableDemoComponent } from './data-table/data-table.component';
 import { PagingDemoComponent } from './paging/paging.component';
 import { SearchDemoComponent } from './search/search.component';
 import { DynamicFormsDemoComponent } from './dynamic-forms/dynamic-forms.component';
+import { CodeEditorDemoComponent } from './code-editor/code-editor.component';
 import { NotificationsDemoComponent } from './notifications/notifications.component';
 import { NgxChartsDemoComponent } from './ngx-charts/ngx-charts.component';
 import { NgxTranslateDemoComponent } from './ngx-translate/ngx-translate.component';
@@ -89,6 +90,9 @@ const routes: Routes = [{
     }, {
       component: DynamicFormsDemoComponent,
       path: 'dynamic-forms',
+    }, {
+      component: CodeEditorDemoComponent,
+      path: 'code-editor',
     }, {
       component: NgxChartsDemoComponent,
       path: 'ngx-charts',

diff --git a/src/app/components/components/overview/overview.component.ts b/src/app/components/components/overview/overview.component.ts
@@ -110,6 +110,11 @@ export class ComponentsOverviewComponent {
       icon: 'format_align_center',
       route: 'dynamic-forms',
       title: 'Dynamic Forms',
+    }, {
+      color: 'purple-A700',
+      icon: 'featured_play_list',
+      route: 'code-editor',
+      title: 'Code Editor',
     }, {
       color: 'indigo-A700',
       icon: 'http',

diff --git a/tsconfig.json b/tsconfig.json
@@ -16,7 +16,11 @@
       "./node_modules/@types"
     ],
     "paths": {
-      "@covalent/*": ["./platform/*"]
+      "@covalent/core": ["./platform/core"],
+      "@covalent/dynamic-forms": ["./platform/dynamic-forms"],
+      "@covalent/highlight": ["./platform/highlight"],
+      "@covalent/http": ["./platform/http"],
+      "@covalent/markdown": ["./platform/markdown"]
     },
     "noUnusedParameters": false,
     "noUnusedLocals": false,