- Covalent Components & Addons
-
-
-
-
-
+
+ Components & Addons
+
-
+
-
+
{{item.icon}}
@@ -28,7 +28,7 @@
-
+
{{item.icon}}
@@ -50,7 +50,7 @@
-
+
-
+
{{item.icon}}
diff --git a/src/app/components/components/overview/overview.component.ts b/src/app/components/components/overview/overview.component.ts
index 03548e424d..ff796eec12 100644
--- a/src/app/components/components/overview/overview.component.ts
+++ b/src/app/components/components/overview/overview.component.ts
@@ -14,116 +14,116 @@ export class ComponentsOverviewComponent {
@HostBinding('class.td-route-animation') classAnimation: boolean = true;
items: Object[] = [{
- color: 'deep-purple-700',
+ color: 'deep-purple-A700',
icon: 'view_list',
route: 'steps',
title: 'Stepper',
}, {
- color: 'blue-700',
+ color: 'blue-A700',
icon: 'open_with',
route: 'expansion-panel',
title: 'Expansion Panel',
}, {
- color: 'light-blue-700',
+ color: 'pink-A700',
icon: 'space_bar',
route: 'file-input',
title: 'File Input',
}, {
- color: 'cyan-700',
+ color: 'cyan-A700',
icon: 'attach_file',
route: 'file-upload',
title: 'File Upload',
}, {
- color: 'grey-700',
+ color: 'deep-orange-A700',
icon: 'label',
route: 'chips',
title: 'Chips',
}, {
- color: 'light-green-700',
+ color: 'lime-A700',
icon: 'hourglass_empty',
route: 'loading',
title: 'Loading',
}, {
- color: 'amber-700',
+ color: 'amber-A700',
icon: 'open_in_browser',
route: 'dialogs',
title: 'Simple Dialogs',
}, {
- color: 'green-700',
+ color: 'green-A700',
icon: 'grid_on',
route: 'data-table',
title: 'Data Table',
}, {
- color: 'teal-700',
+ color: 'teal-A700',
icon: 'format_indent_increase',
route: 'json-formatter',
title: 'JSON Formatter',
}, {
- color: 'blue-grey-700',
+ color: 'indigo-A700',
icon: 'swap_horiz',
route: 'paging',
title: 'Paging',
}, {
- color: 'purple-700',
+ color: 'purple-A700',
icon: 'notifications',
route: 'notifications',
title: 'Notifications',
}, {
- color: 'light-blue-A400',
+ color: 'light-blue-A700',
icon: 'info_outline',
route: 'message',
title: 'Messages',
}, {
- color: 'lime-700',
+ color: 'indigo-A700',
icon: 'search',
route: 'search',
title: 'Search',
}, {
- color: 'red-700',
+ color: 'red-A700',
icon: 'devices',
route: 'media',
title: 'Media Queries',
}, {
- color: 'light-blue-700',
+ color: 'light-blue-A700',
icon: 'wb_iridescent',
route: 'directives',
title: 'Directives',
}, {
- color: 'deep-orange-700',
+ color: 'deep-orange-A700',
icon: 'filter_list',
route: 'pipes',
title: 'Pipes',
},
];
optional: Object[] = [{
- color: 'pink-700',
+ color: 'pink-A700',
icon: 'code',
route: 'syntax-highlighting',
title: 'Highlighting',
}, {
- color: 'orange-700',
+ color: 'orange-A700',
icon: 'chrome_reader_mode',
route: 'markdown',
title: 'Markdown',
}, {
- color: 'green-700',
+ color: 'green-A700',
icon: 'format_align_center',
route: 'dynamic-forms',
title: 'Dynamic Forms',
}, {
- color: 'indigo-700',
+ color: 'indigo-A700',
icon: 'http',
route: 'http',
title: 'HTTP Service',
},
];
external: Object[] = [{
- color: 'purple-600',
+ color: 'purple-A700',
icon: 'insert_chart',
route: 'ngx-charts',
title: 'NGX-Charts',
}, {
- color: 'blue-600',
+ color: 'blue-A700',
icon: 'language',
route: 'ngx-translate',
title: 'NGX-Translate',
diff --git a/src/app/components/docs/docs.component.html b/src/app/components/docs/docs.component.html
index a554b53906..3e099197bb 100644
--- a/src/app/components/docs/docs.component.html
+++ b/src/app/components/docs/docs.component.html
@@ -1,4 +1,5 @@
{{item.title}}
- Documentation
-
+
-
+ Documentation
+
+
+
-
-
-
-
-
-
-
-
- {{item.icon}}
-
-
- change_history
-
+
Updates
- {{item.description}}
-{{item.title}}
- -Angular v4.1 and material@beta.5 support
-Dependencies updated
+
+
+
+
-
-
-
- {{item.icon}}
-
-
-
+ star {{starCount}}
-
-
- View Full Changelog
-
-
-
- flash_on
-
-
+
+ Covalent UI Platform for building enterprise desktop web apps
+An open-source UI Platform from Teradata that combines a comprehensive design language with a powerful web framework, built on Angular & Angular Material (Design).
+ + + +
-
+
- Teradata Covalent UI Platform
- a UI platform built on Angular + Material Design
+
+
+
- {{item.title}}
-{{item.description}}
- -
-
-
-
-
- {{item.icon}}
-
-
-
+
+
+
-
+
+ {{item.title}}
- {{item.description}}
+
+
-
-
-
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
FAQs
-
- Covalent is a UI Platform that combines proven design language with a comprehensive web framework, built on Angular & Angular-Material (Design).
- Covalent gives you a quickstart to build a modern web application UI and ensure consistency across your enterprise products.
- Some of Covalent's most important features include:
-
- -
-
- Angular-Material -
- Angular Command-line interface (CLI) for builds, deploys, testing & more. -
- Drastically simplified interface layouts (for dashboards, lists, etc). -
- Custom web components (stepper, file upload, expansion panels & more). -
- 750+ Material Design icons. -
- Style Guide with brand standards, color palettes & tips. -
- Design Patterns for consistent, reusable web components such as cards, forms, etc. -
- Testing Tools for both unit tests and end-to-end tests. -
- Quickstart app to get started right away! -
- We follow Atomic Design principles and apply them to Angular-Material web components. In Atomic Design, several atoms (such as buttons and inputs) form molecules (such as a search box).
- Our covalent bonds are the molecules that we're building on top of Angular-Material. Also, covalent bonds are liquid and conform to their container, just like our responsive layouts!
-
-
- By using Covalent as a unified UI Platform there are a ton of benefits. Here are some highlights:
-
- -
-
- Angular-Material doesn't have a full app quickstart. Covalent does. -
- Covalent provides the Angular-Material (AngularJS) flexbox layout that was removed in Angular-Material (angular). -
- Covalent provides several custom components such as steppers & expansion panels. -
- Custom layouts & components in Covalent are developed specifically for enterprise solutions. -
- Covalent provides a selection of UI layouts out of the box. -
- Our team is continuously adding tools like Syntax Highlighting & Markdown. -
- Our team will always maintain native compatibility with Angular & Material -
- Our team will always follow the principles of the official Material Design spec. -
- By adopting Material Design along with Angular, we get a style guide spec that is perfectly matched with an incredbly powerful and modern web framework, all for free.
- Along with that, there are lots of other great benefits such as:
-
- -
-
- A design spec that is married to code implementation. -
- Official implementations from the the designer/developer (Google). -
- Free code implementation and updates from a continuously evolving design spec. -
- Compatability with many devices & breakpoints, from watch and mobile all the way up to fullscreen desktop. -
- Usage familiarity for users, designers & developers. -
- Focus on out-of the box accessibility. -
- Open sourced design & code. -
- Modularity that gives a natural bridge to agile development principles. -
- Inspiration, community & resources from around the world. -
- With any new framework, people's intial reaction is that they'll lose their company brand or identity.
- Consider when 960 grids came out, or Bootstrap from Twitter. Many said "all sites will look the same!".
- They weren't completely wrong, for a time, when adoption of these new frameworks began. However, with time, usage, and innovation, your special brand identity and uniqueness will always shine through!
- Also consider:
-
- -
-
- Material Design is being embraced across the web, and is not specific to Google anymore -
- Material Design can be thought of as a native Web SDK, similar to developing a MacOS or iOS app. -
- Onboarding users is a simpler process if design patterns are familiar. -
- Think of your favorite iOS, Android or Windows app that adheres to the OS's design. Aren’t the features more important? What woud you really consider “brand”? -
-
- The short answer: we had to pick something & we believe Angular has won the adoption war.
- The longer answer: - Before passing judgement if you have Angular 1.x experience, remember that Angular is a complete rewrite from the ground up. - Angular moved from an opinionated framework to a sophistated platform. - Angular utilizes ES2015 (previously ES6) and the power of Typescript, which results in a much more native JavaScript platform with coding paradigms & power previously reserved for backend languages. - This means many more back end engineers can jump into the front end and ramp up quickly to productivity. - Also there are many other benefits, such as: --
-
- New & exciting software to learn & advocate -
- More easily attract new hires -
- An incredibly powerful standardized CLI that is provided to us -
- More powerful IDEs for development -
- Integrated testing tools -
- Native mobile & desktop app support -
- We give you everything you need to quickly get started on your UI, but you have the domain knowledge and are the expert in your product.
- You'll need to build all the custom views, controllers & services for your product, and hook them up to your RESTful APIs.
- Don't worry though, we have detailed docs & tips, and there's a wealth of help on the internet (it's why we chose such a popular platform).
-
-
- We'd LOVE any type of contribution and collaboration! There's all kinds of ways you can join in:
-
+
+ -
-
- Submit a bug (cool) -
- Open a pull request to fix a bug (cooler) -
- Suggest a new feature (which we'll prioritize by demand) -
- Open a pull request with new feature (make sure it follows the guidelines) -
- Give us feedback on any aspect of this site or the platform -
- Join the Teradata UX team! -
+
+
+
-
+
+ Built with
+
-
- Built with favorite on Angular
+ Teradata is one of the largest enterprise consumers of Angular. Currently the entire product suite is being built or revamped on Angular v4.
+As Angular unites Teradata developers across the organization, they are able to contribute back to the open-source community with the powerful new tools being developed internally.
-
-
-
+
+
- To build an atomic, standardized, reusable UI component platform based on Material Design, for Teradata to use for all user interfaces, while collaborating in an open source model.
+
+
+
+
+
+
+
+
+
-
+
+
+
+ {{item.icon}}
+
+
+
-
- launch
- launch
- launch
-
-
-
-
-
-
+
+ {{item.title}}
+{{item.description}}
+ +
+
+
-
-
-
-
- Teradata's UX team is extremely lean & agile (notice agile is lower case). We have a simple list of milestones and issues prioritized by demand across products.
- Some big ticket items are underway such as TD Charts, an extensive & standardized component built on Google Charts (continuing w/ the Google web stack).
- We're also building Dynamic Forms which will allow products to build complex forms with a simple key:value pair JSON structure.
- Remember, we're agile so our roadmap is iterative & bite sized for frequent, rapid releases.
+
Releases
-Our latest version you can use today!
- -Milestones
-Rough time estimates
- -Feature Requests & Bugs
-Priotized by demand
- -
- Covalent is a UI Platform that combines proven design language with a comprehensive web framework, built on Angular & Angular-Material (Design).
- Electron is a framework for creating native desktop applications with web technologies like JavaScript, HTML, and CSS.
- Covalent Electron is the Electron Platform to build desktop apps using Covalent and Electron
- View Repo
-
-
- Covalent Data is a Mock API server for rapid prototyping and API standards
- Built on Golang
- Allows for quick prototyping for your Covalent Applications with an easy to mock http backend server
- View Repo
+
+
+
+
-
-
+
+
+
+
-
+
+ Following the Material Design spec
+Covalent follows the Material Design specification as closely as possible through the construction of all components.
+Adopting Material Design as our own spec allows our UI/UX staff to adopt and share powerful open-source resources, while Covalent end users enjoy the immediate familiarity and affordance of this global deign spec.
+
- Copyright © 2016 - 2017 Teradata. All rights reserved
+
+
+
+
+
-
\ No newline at end of file
+
diff --git a/src/app/components/home/home.component.scss b/src/app/components/home/home.component.scss
index 5b11e4278c..35ad04d7f1 100644
--- a/src/app/components/home/home.component.scss
+++ b/src/app/components/home/home.component.scss
@@ -9,9 +9,26 @@
width: 60px;
margin-left: 16px;
}
+.mat-icon-svg-xxl {
+ width: 90%;
+ height: auto;
+}
.md-icon-ux {
width: 165px;
}
-[td-after-card] {
- margin: 64px 8px 8px 8px;
+@media (max-width: 799px) {
+ .mat-icon-md {
+ font-size: 50px;
+ }
+ .mat-icon-xl {
+ font-size: 120px;
+ }
+}
+@media (min-width: 800px) {
+ .mat-icon-md {
+ font-size: 70px;
+ }
+ .mat-icon-xl {
+ font-size: 160px;
+ }
}
\ No newline at end of file
diff --git a/src/app/components/home/home.component.ts b/src/app/components/home/home.component.ts
index c65630815a..9bf61853be 100644
--- a/src/app/components/home/home.component.ts
+++ b/src/app/components/home/home.component.ts
@@ -1,5 +1,5 @@
-import { Component, HostBinding, OnInit } from '@angular/core';
-
+import { Component, HostBinding, AfterViewInit } from '@angular/core';
+import { TdMediaService } from '@covalent/core';
import { GitHubService } from '../../services';
import { fadeAnimation } from '../../app.animations';
@@ -11,102 +11,73 @@ import { fadeAnimation } from '../../app.animations';
animations: [fadeAnimation],
})
-export class HomeComponent implements OnInit {
+export class HomeComponent implements AfterViewInit {
@HostBinding('@routeAnimation') routeAnimation: boolean = true;
@HostBinding('class.td-route-animation') classAnimation: boolean = true;
starCount: number = 0;
- items: Object[] = [{
- color: 'purple-700',
+ sections: Object[] = [{
+ color: 'deep-purple-A400',
description: 'Your guide to start using the UI platform in your app!',
icon: 'library_books',
route: 'docs',
title: 'Documentation',
}, {
- color: 'blue-700',
- description: 'Teradata brand logo usage, color palettes and more',
- icon: 'color_lens',
- route: 'style-guide',
- title: 'Style Guide',
+ color: 'teal-A700',
+ description: 'Covalent Components, Directives, Pipes & Services',
+ icon: 'picture_in_picture',
+ route: 'components',
+ title: 'Components',
}, {
- color: 'teal-700',
+ color: 'cyan-A700',
description: 'Several different material design layout options for your apps',
icon: 'view_quilt',
route: 'layouts',
title: 'Layouts',
}, {
- color: 'green-700',
- description: 'Covalent Components, Directives, Pipes & Services',
- icon: 'picture_in_picture',
- route: 'components',
- title: 'Components & Addons',
+ color: 'indigo-A400',
+ description: 'Teradata brand logo usage, color palettes and more',
+ icon: 'color_lens',
+ route: 'style-guide',
+ title: 'Style Guide',
+ }, {
+ color: 'green-A700',
+ description: 'Gallery of example applications and usages',
+ icon: 'view_carousel',
+ route: 'templates',
+ title: 'Templates',
},
];
- updates: Object[] = [{
- description: 'Keyboard support for selection',
- icon: 'grid_on',
- route: 'components/data-table',
- title: 'Data Table feature',
- }, {
- description: 'Row click events',
- icon: 'grid_on',
- route: 'components/data-table',
- title: 'Data Table feature',
- }, {
- description: 'Hide columns & exclude from filtering',
- icon: 'grid_on',
- route: 'components/data-table',
- title: 'Data Table feature',
- }, {
- description: 'Async & boolean loading',
- icon: 'hourglass_empty',
- route: 'components/loading',
- title: 'Loading features',
+ repos: Object[] = [{
+ color: 'amber-A400',
+ description: 'A pre-built Angular 4 app using Covalent ready to go!',
+ icon: 'flash_on',
+ link: 'https://github.com/Teradata/covalent-quickstart',
+ title: 'Covalent Quickstart',
}, {
- description: 'Component for alerts/info/warning/error/success',
- icon: 'info_outline',
- route: 'components/message',
- title: 'New Messages component',
+ color: 'orange-A400',
+ description: 'A native desktop hybrid starter app built on Electron.',
+ icon: 'laptop_mac',
+ link: 'https://github.com/Teradata/covalent-electron',
+ title: 'Covalent Electron',
}, {
- description: 'Numbered page links to jump ahead',
- icon: 'swap_horiz',
- route: 'components/paging',
- title: 'Pagination feature',
- }, {
- description: 'Disable adding of chips',
- icon: 'label',
- route: 'components/chips',
- title: 'Chips feature',
- }, {
- description: 'New formData property',
- icon: 'attach_file',
- route: 'components/file-upload',
- title: 'File service feature',
- }, {
- description: 'New contentReady event binding',
- icon: 'chrome_reader_mode',
- route: 'components/markdown',
- title: 'Markdown feature',
- }, {
- description: 'New contentReady event binding',
- icon: 'code',
- route: 'components/highlight',
- title: 'Highlight feature',
- }, {
- description: 'Make navigationRoute optional',
- icon: 'view_quilt',
- route: 'components/layouts',
- title: 'Layouts feature',
+ color: 'deep-orange-A400',
+ description: 'Mock API server for rapid prototyping and API standards.',
+ icon: 'aspect_ratio',
+ link: 'https://github.com/Teradata/covalent-data',
+ title: 'Covalent Data',
},
];
- constructor(private _gitHubService: GitHubService) {
+ constructor(private _gitHubService: GitHubService,
+ public media: TdMediaService) {
}
- ngOnInit(): void {
+ ngAfterViewInit(): void {
+ this.media.broadcast();
this._gitHubService.queryStartCount().subscribe((starsCount: number) => {
this.starCount = starsCount;
});
diff --git a/src/app/components/layouts/card-over/card-over.component.html b/src/app/components/layouts/card-over/card-over.component.html
index 87f14599a2..59f50e6ba9 100644
--- a/src/app/components/layouts/card-over/card-over.component.html
+++ b/src/app/components/layouts/card-over/card-over.component.html
@@ -1,4 +1,5 @@
+
Card Over Layout
A card overlaying a toolbar (this page is using card over)
diff --git a/src/app/components/layouts/layouts.module.ts b/src/app/components/layouts/layouts.module.ts
index af4b83f962..29cb47ce20 100644
--- a/src/app/components/layouts/layouts.module.ts
+++ b/src/app/components/layouts/layouts.module.ts
@@ -17,6 +17,8 @@ import { CovalentHighlightModule } from '../../../platform/highlight';
import { DocumentationToolsModule } from '../../documentation-tools';
+import { ToolbarModule } from '../../components/toolbar/toolbar.module';
+
@NgModule({
declarations: [
LayoutsComponent,
@@ -44,6 +46,7 @@ import { DocumentationToolsModule } from '../../documentation-tools';
CovalentHighlightModule,
DocumentationToolsModule,
layoutsRoutes,
+ ToolbarModule,
],
})
export class LayoutsModule {}
diff --git a/src/app/components/layouts/manage-list/manage-list.component.html b/src/app/components/layouts/manage-list/manage-list.component.html
index 14b8787b9d..ff1f08217a 100644
--- a/src/app/components/layouts/manage-list/manage-list.component.html
+++ b/src/app/components/layouts/manage-list/manage-list.component.html
@@ -1,5 +1,6 @@
-
-
+
diff --git a/src/app/components/layouts/nav-list/nav-list.component.html b/src/app/components/layouts/nav-list/nav-list.component.html
index 5bb057dcc3..514cac9b07 100644
--- a/src/app/components/layouts/nav-list/nav-list.component.html
+++ b/src/app/components/layouts/nav-list/nav-list.component.html
@@ -1,4 +1,5 @@
Item Name
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ launch
+ launch
+ launch
+
+
+
+
+
+
+
+
+ FAQs
+
+ Covalent is a UI Platform that combines proven design language with a comprehensive web framework, built on Angular & Angular-Material (Design).
+ Covalent gives you a quickstart to build a modern web application UI and ensure consistency across your enterprise products.
+ Some of Covalent's most important features include:
+
+ -
+
- Angular-Material +
- Angular Command-line interface (CLI) for builds, deploys, testing & more. +
- Drastically simplified interface layouts (for dashboards, lists, etc). +
- Custom web components (stepper, file upload, expansion panels & more). +
- 750+ Material Design icons. +
- Style Guide with brand standards, color palettes & tips. +
- Design Patterns for consistent, reusable web components such as cards, forms, etc. +
- Testing Tools for both unit tests and end-to-end tests. +
- Quickstart app to get started right away! +
+ We follow Atomic Design principles and apply them to Angular-Material web components. In Atomic Design, several atoms (such as buttons and inputs) form molecules (such as a search box).
+ Our covalent bonds are the molecules that we're building on top of Angular-Material. Also, covalent bonds are liquid and conform to their container, just like our responsive layouts!
+
+
+ By using Covalent as a unified UI Platform there are a ton of benefits. Here are some highlights:
+
+ -
+
- Angular-Material doesn't have a full app quickstart. Covalent does. +
- Covalent provides the Angular-Material (AngularJS) flexbox layout that was removed in Angular-Material (angular). +
- Covalent provides several custom components such as steppers & expansion panels. +
- Custom layouts & components in Covalent are developed specifically for enterprise solutions. +
- Covalent provides a selection of UI layouts out of the box. +
- Our team is continuously adding tools like Syntax Highlighting & Markdown. +
- Our team will always maintain native compatibility with Angular & Material +
- Our team will always follow the principles of the official Material Design spec. +
+ By adopting Material Design along with Angular, we get a style guide spec that is perfectly matched with an incredbly powerful and modern web framework, all for free.
+ Along with that, there are lots of other great benefits such as:
+
+ -
+
- A design spec that is married to code implementation. +
- Official implementations from the the designer/developer (Google). +
- Free code implementation and updates from a continuously evolving design spec. +
- Compatability with many devices & breakpoints, from watch and mobile all the way up to fullscreen desktop. +
- Usage familiarity for users, designers & developers. +
- Focus on out-of the box accessibility. +
- Open sourced design & code. +
- Modularity that gives a natural bridge to agile development principles. +
- Inspiration, community & resources from around the world. +
+ With any new framework, people's intial reaction is that they'll lose their company brand or identity.
+ Consider when 960 grids came out, or Bootstrap from Twitter. Many said "all sites will look the same!".
+ They weren't completely wrong, for a time, when adoption of these new frameworks began. However, with time, usage, and innovation, your special brand identity and uniqueness will always shine through!
+ Also consider:
+
+ -
+
- Material Design is being embraced across the web, and is not specific to Google anymore +
- Material Design can be thought of as a native Web SDK, similar to developing a MacOS or iOS app. +
- Onboarding users is a simpler process if design patterns are familiar. +
- Think of your favorite iOS, Android or Windows app that adheres to the OS's design. Aren’t the features more important? What woud you really consider “brand”? +
+
+ The short answer: we had to pick something & we believe Angular has won the adoption war.
+ The longer answer: + Before passing judgement if you have Angular 1.x experience, remember that Angular v2+ is a complete rewrite from the ground up. + Angular moved from an opinionated framework to a sophistated platform. + Angular utilizes ES2015 (previously ES6) and the power of Typescript, which results in a much more native JavaScript platform with coding paradigms & power previously reserved for backend languages. + This means many more back end engineers can jump into the front end and ramp up quickly to productivity. + Also there are many other benefits, such as: +-
+
- New & exciting software to learn & advocate +
- More easily attract new hires +
- An incredibly powerful standardized CLI that is provided to us +
- More powerful IDEs for development +
- Integrated testing tools +
- Native mobile & desktop app support +
+ We give you everything you need to quickly get started on your UI, but you have the domain knowledge and are the expert in your product.
+ You'll need to build all the custom views, controllers & services for your product, and hook them up to your RESTful APIs.
+ Don't worry though, we have detailed docs & tips, and there's a wealth of help on the internet (it's why we chose such a popular platform).
+
+
+ We'd LOVE any type of contribution and collaboration! There's all kinds of ways you can join in:
+
+ -
+
- Submit a bug (cool) +
- Open a pull request to fix a bug (cooler) +
- Suggest a new feature (which we'll prioritize by demand) +
- Open a pull request with new feature (make sure it follows the guidelines) +
- Give us feedback on any aspect of this site or the platform +
- Join the Teradata UX team! +
+
+
+
+
+
+
+ To build an atomic, standardized, reusable UI component platform based on Material Design, for Teradata to use for all user interfaces, while collaborating in an open source model.
+
+
+ Teradata's UX team is extremely lean & agile (notice agile is lower case). We have a simple list of milestones and issues prioritized by demand across products.
+ Some big ticket items are underway such as TD Charts, an extensive & standardized component built on Google Charts (continuing w/ the Google web stack).
+ We're also building Dynamic Forms which will allow products to build complex forms with a simple key:value pair JSON structure.
+ Remember, we're agile so our roadmap is iterative & bite sized for frequent, rapid releases.
+
+ Releases
+Our latest version you can use today!
+ +Milestones
+Rough time estimates
+ +Feature Requests & Bugs
+Priotized by demand
+ +
+ Covalent is a UI Platform that combines proven design language with a comprehensive web framework, built on Angular & Angular-Material (Design).
+ Electron is a framework for creating native desktop applications with web technologies like JavaScript, HTML, and CSS.
+ Covalent Electron is the Electron Platform to build desktop apps using Covalent and Electron
+ View Repo
+
+
+ Covalent Data is a Mock API server for rapid prototyping and API standards
+ Built on Golang
+ Allows for quick prototyping for your Covalent Applications with an easy to mock http backend server
+ View Repo
+
+ item description
-
- Page Title
-
+
Nav List Layout
diff --git a/src/app/components/layouts/nav-view/nav-view.component.html b/src/app/components/layouts/nav-view/nav-view.component.html
index 5bf2418deb..cdee9ddbb4 100644
--- a/src/app/components/layouts/nav-view/nav-view.component.html
+++ b/src/app/components/layouts/nav-view/nav-view.component.html
@@ -1,4 +1,5 @@
+
Nav View
diff --git a/src/app/components/layouts/overview/overview.component.html b/src/app/components/layouts/overview/overview.component.html
index 9262571359..615fecc7c1 100644
--- a/src/app/components/layouts/overview/overview.component.html
+++ b/src/app/components/layouts/overview/overview.component.html
@@ -1,4 +1,5 @@
+
{{item.title}}
diff --git a/src/app/components/style-guide/style-guide.module.ts b/src/app/components/style-guide/style-guide.module.ts
index 4507708f9f..c5eaf54c7a 100644
--- a/src/app/components/style-guide/style-guide.module.ts
+++ b/src/app/components/style-guide/style-guide.module.ts
@@ -24,6 +24,8 @@ import { CovalentLayoutModule, CovalentMediaModule, CovalentSearchModule, Covale
CovalentExpansionPanelModule, CovalentDialogsModule } from '../../../platform/core';
import { CovalentHighlightModule } from '../../../platform/highlight';
+import { ToolbarModule } from '../../components/toolbar/toolbar.module';
+
@NgModule({
declarations: [
StyleGuideComponent,
@@ -66,6 +68,7 @@ import { CovalentHighlightModule } from '../../../platform/highlight';
CovalentHighlightModule,
CovalentDialogsModule,
styleGuideRoutes,
+ ToolbarModule,
],
})
export class StyleGuideModule {}
diff --git a/src/app/components/templates/templates.component.html b/src/app/components/templates/templates.component.html
new file mode 100644
index 0000000000..298ebc0cc4
--- /dev/null
+++ b/src/app/components/templates/templates.component.html
@@ -0,0 +1,29 @@
+
+
+
+
+
+
diff --git a/src/app/components/templates/templates.component.scss b/src/app/components/templates/templates.component.scss
new file mode 100644
index 0000000000..7c397a7636
--- /dev/null
+++ b/src/app/components/templates/templates.component.scss
@@ -0,0 +1,10 @@
+:host /deep/ {
+ md-grid-tile img {
+ width: 100%;
+ height: auto;
+ }
+ .mat-grid-tile .mat-figure {
+ align-items: flex-start;
+ justify-content: flex-start;
+ }
+}
\ No newline at end of file
diff --git a/src/app/components/templates/templates.component.ts b/src/app/components/templates/templates.component.ts
new file mode 100644
index 0000000000..b19130125e
--- /dev/null
+++ b/src/app/components/templates/templates.component.ts
@@ -0,0 +1,32 @@
+import { Component, HostBinding, AfterViewInit, ChangeDetectorRef } from '@angular/core';
+import { TdMediaService } from '@covalent/core';
+import { fadeAnimation } from '../../app.animations';
+
+import { Observable } from 'rxjs/Observable';
+
+import { InternalDocsService, ITemplate } from '../../services';
+
+@Component({
+ selector: 'app-templates',
+ styleUrls: ['./templates.component.scss'],
+ templateUrl: './templates.component.html',
+ animations: [fadeAnimation],
+})
+export class TemplatesComponent implements AfterViewInit {
+
+ @HostBinding('@routeAnimation') routeAnimation: boolean = true;
+ @HostBinding('class.td-route-animation') classAnimation: boolean = true;
+
+ templatesObs: Observable;
+
+ constructor(public media: TdMediaService,
+ private _changeDetectorRef: ChangeDetectorRef,
+ private _internalDocsService: InternalDocsService) {
+ this.templatesObs = this._internalDocsService.queryTemplates();
+ }
+
+ ngAfterViewInit(): void {
+ this.media.broadcast();
+ this._changeDetectorRef.detectChanges();
+ }
+}
diff --git a/src/app/components/toolbar/toolbar.component.html b/src/app/components/toolbar/toolbar.component.html
new file mode 100644
index 0000000000..0574cb00cf
--- /dev/null
+++ b/src/app/components/toolbar/toolbar.component.html
@@ -0,0 +1,51 @@
+
+ = new EventEmitter();
+ constructor(private _renderer: Renderer2,
+ @Inject(DOCUMENT) private _document: any) {}
+ changeDir(dir: string): void {
+ this._renderer.setAttribute(this._document.querySelector('html'), 'dir', dir);
+ this.onChangeDir.emit(this.dir);
+ }
+}
diff --git a/src/app/components/toolbar/toolbar.module.ts b/src/app/components/toolbar/toolbar.module.ts
new file mode 100644
index 0000000000..9fbcd2cd7b
--- /dev/null
+++ b/src/app/components/toolbar/toolbar.module.ts
@@ -0,0 +1,31 @@
+import { NgModule, ModuleWithProviders } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+
+import { ToolbarComponent } from './toolbar.component';
+
+import { MdButtonModule, MdListModule, MdIconModule, MdMenuModule } from '@angular/material';
+
+import { CovalentMenuModule, CovalentNotificationsModule } from '../../../platform/core';
+
+@NgModule({
+ imports: [
+ CommonModule,
+ MdButtonModule,
+ MdListModule,
+ MdIconModule,
+ MdMenuModule,
+ CovalentMenuModule,
+ CovalentNotificationsModule,
+ RouterModule,
+ ],
+ declarations: [
+ ToolbarComponent,
+ ],
+ exports: [
+ ToolbarComponent,
+ ],
+})
+export class ToolbarModule {
+
+}
diff --git a/src/app/services/index.ts b/src/app/services/index.ts
index 2c23c67f7d..fc0f68139e 100644
--- a/src/app/services/index.ts
+++ b/src/app/services/index.ts
@@ -1 +1,2 @@
export { GitHubService } from './github.service';
+export { InternalDocsService, ITemplate } from './internal-docs.service';
diff --git a/src/app/services/internal-docs.service.ts b/src/app/services/internal-docs.service.ts
new file mode 100644
index 0000000000..3fe4c1c0a5
--- /dev/null
+++ b/src/app/services/internal-docs.service.ts
@@ -0,0 +1,44 @@
+import { Injectable } from '@angular/core';
+import { Response } from '@angular/http';
+import { Observable } from 'rxjs/Observable';
+import { Subscriber } from 'rxjs/Subscriber';
+
+import { HttpInterceptorService } from '@covalent/http';
+
+export interface ITemplate {
+ name: string;
+ description: string;
+ plnkr: string;
+ img: string;
+ color: string;
+ icon: string;
+}
+
+const INTERNAL_DOCS_URL: string = 'https://covalent-docs.firebaseio.com/';
+
+@Injectable()
+export class InternalDocsService {
+
+ constructor(private _http: HttpInterceptorService) {
+
+ }
+
+ queryTemplates(): Observable {
+ return new Observable((subscriber: Subscriber) => {
+ this._http.get(INTERNAL_DOCS_URL + '/templates.json').subscribe((response: Response) => {
+ let data: ITemplate[];
+ try {
+ data = response.json();
+ } catch (e) {
+ data = [];
+ subscriber.error();
+ }
+ subscriber.next(data);
+ subscriber.complete();
+ }, (error: any) => {
+ subscriber.error();
+ });
+ });
+ }
+
+}
diff --git a/src/favicon.ico b/src/favicon.ico
index f3699612c3..fe7278dc3f 100644
Binary files a/src/favicon.ico and b/src/favicon.ico differ
diff --git a/src/index.html b/src/index.html
index f5e9c60746..7af51097e4 100644
--- a/src/index.html
+++ b/src/index.html
@@ -10,7 +10,7 @@
-
+ Nav List
+
For your entire app or for different sections of your app, select one of these Material Design layout options:
diff --git a/src/app/components/style-guide/style-guide.component.html b/src/app/components/style-guide/style-guide.component.html index 6eefac4055..685afc6b0e 100644 --- a/src/app/components/style-guide/style-guide.component.html +++ b/src/app/components/style-guide/style-guide.component.html @@ -1,4 +1,5 @@
- Teradata Style Guide
-
+ Style Guide
+
+
+
-
+
+
+
+ Covalent Templates
+Example starter templates for your application
+
+
+
+
+
+
+
+
+
+
+
+
+ {{item.icon}}
+
+
+ change_history
+
+
+ View Full Changelog
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/app/components/toolbar/toolbar.component.scss b/src/app/components/toolbar/toolbar.component.scss
new file mode 100644
index 0000000000..7bfcb81600
--- /dev/null
+++ b/src/app/components/toolbar/toolbar.component.scss
@@ -0,0 +1,8 @@
+/*
+ * Copyright (C) 2016-2017 by Teradata Corporation. All rights reserved.
+ * TERADATA CORPORATION CONFIDENTIAL AND TRADE SECRET
+ */
+
+:host {
+ display: block;
+}
diff --git a/src/app/components/toolbar/toolbar.component.ts b/src/app/components/toolbar/toolbar.component.ts
new file mode 100644
index 0000000000..19c90a3fe0
--- /dev/null
+++ b/src/app/components/toolbar/toolbar.component.ts
@@ -0,0 +1,80 @@
+/*
+ * Copyright (C) 2016-2017 by Teradata Corporation. All rights reserved.
+ * TERADATA CORPORATION CONFIDENTIAL AND TRADE SECRET
+ */
+
+import { Component, ElementRef, Inject, Renderer2, Output, EventEmitter } from '@angular/core';
+import { DOCUMENT } from '@angular/platform-browser';
+
+@Component({
+ selector: 'td-toolbar',
+ templateUrl: '././toolbar.component.html',
+ styleUrls: ['././toolbar.component.scss'],
+})
+export class ToolbarComponent {
+ updates: Object[] = [{
+ description: 'Keyboard support for selection',
+ icon: 'grid_on',
+ route: 'components/data-table',
+ title: 'Data Table feature',
+ }, {
+ description: 'Row click events',
+ icon: 'grid_on',
+ route: 'components/data-table',
+ title: 'Data Table feature',
+ }, {
+ description: 'Hide columns & exclude from filtering',
+ icon: 'grid_on',
+ route: 'components/data-table',
+ title: 'Data Table feature',
+ }, {
+ description: 'Async & boolean loading',
+ icon: 'hourglass_empty',
+ route: 'components/loading',
+ title: 'Loading features',
+ }, {
+ description: 'Component for alerts/info/warning/error/success',
+ icon: 'info_outline',
+ route: 'components/message',
+ title: 'New Messages component',
+ }, {
+ description: 'Numbered page links to jump ahead',
+ icon: 'swap_horiz',
+ route: 'components/paging',
+ title: 'Pagination feature',
+ }, {
+ description: 'Disable adding of chips',
+ icon: 'label',
+ route: 'components/chips',
+ title: 'Chips feature',
+ }, {
+ description: 'New formData property',
+ icon: 'attach_file',
+ route: 'components/file-upload',
+ title: 'File service feature',
+ }, {
+ description: 'New contentReady event binding',
+ icon: 'chrome_reader_mode',
+ route: 'components/markdown',
+ title: 'Markdown feature',
+ }, {
+ description: 'New contentReady event binding',
+ icon: 'code',
+ route: 'components/highlight',
+ title: 'Highlight feature',
+ }, {
+ description: 'Make navigationRoute optional',
+ icon: 'view_quilt',
+ route: 'components/layouts',
+ title: 'Layouts feature',
+ },
+ ];
+ dir: string = 'ltr';
+ @Output('changeDir') onChangeDir: EventEmitterUpdates
+ {{item.description}}
+{{item.title}}
+ +Angular v4.1 and material@beta.5 support
+Dependencies updated
+ +
+
diff --git a/src/theme.scss b/src/theme.scss
index a04235302b..dc2e20d613 100644
--- a/src/theme.scss
+++ b/src/theme.scss
@@ -8,11 +8,44 @@
// have to load a single css file for Angular Material in your app.
@include mat-core();
+// Custom orange contrast
+$mat-orange-custom: ( 50: #FFF3E0,
+ 100: #FFE0B2,
+ 200: #FFCC80,
+ 300: #FFB74D,
+ 400: #FFA726,
+ 500: #FF9800,
+ 600: #FB8C00,
+ 700: #F57C00,
+ 800: #EF6C00,
+ 900: #E65100,
+ A100: #FFD180,
+ A200: #FFAB40,
+ A400: #FF9100,
+ A700: #FF6D00,
+ contrast: (
+ 50: $black-87-opacity,
+ 100: $black-87-opacity,
+ 200: $black-87-opacity,
+ 300: $black-87-opacity,
+ 400: $black-87-opacity,
+ 500: white,
+ 600: white,
+ 700: white,
+ 800: $white-87-opacity,
+ 900: $white-87-opacity,
+ A100: $black-87-opacity,
+ A200: $black-87-opacity,
+ A400: $black-87-opacity,
+ A700: $white-87-opacity,
+ )
+ );
+
// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue.
-$primary: mat-palette($mat-orange, 800);
-$accent: mat-palette($mat-light-blue, 600, A100, A400);
+$primary: mat-palette($mat-blue-grey, 900);
+$accent: mat-palette($mat-orange-custom, A700, A100, A400);
// The warn palette is optional (defaults to red).
$warn: mat-palette($mat-red, 600);
@@ -28,6 +61,36 @@ $theme: mat-light-theme($primary, $accent, $warn);
@include covalent-markdown-theme($theme);
@include covalent-highlight-theme(); // OR @import '~highlight.js/styles/vs.css';
+// Alt theme
+.theme-alt {
+ $primary-alt: mat-palette($mat-orange, 800);
+ $accent-alt: mat-palette($mat-light-blue, 700);
+ $warn-alt: mat-palette($mat-red, 600);
+ $theme-alt: mat-light-theme($primary-alt, $accent-alt, $warn-alt);
+ @include angular-material-theme($theme-alt);
+ @include covalent-theme($theme-alt);
+}
+
+// Dark theme
+.theme-dark {
+ $primary-dark: mat-palette($mat-blue-grey, 900);
+ $accent-dark: mat-palette($mat-deep-orange, A400);
+ $warn-dark: mat-palette($mat-red, 600);
+ $theme-dark: mat-dark-theme($primary-dark, $accent-dark, $warn-dark);
+ @include angular-material-theme($theme-dark);
+ @include covalent-theme($theme-dark);
+}
+
+// Subpage themes
+.theme-docs {
+ $primary-docs: mat-palette($mat-deep-purple, 700);
+ $accent-docs: mat-palette($mat-cyan, A400);
+ $warn-docs: mat-palette($mat-red, 600);
+ $theme-docs: mat-light-theme($primary-docs, $accent-docs, $warn-docs);
+ @include angular-material-theme($theme-docs);
+ @include covalent-theme($theme-docs);
+}
+
// Custom theme examples
.blue-orange {
$primary2: mat-palette($mat-blue, 700);
@@ -86,3 +149,23 @@ md-nav-list {
.legend-title-text {
color: mat-color($foreground, secondary-text);
}
+
+// Expansion panels
+.theme-dark td-expansion-panel {
+ background-color: mat-color($mat-blue-grey, 800);
+}
+
+// Active top nav
+nav {
+ a {
+ line-height: 4;
+ display: block;
+ &:not(.active) {
+ color: rgba(255, 255, 255, 0.56);
+ }
+ &.active {
+ color: mat-color($accent);
+ border-bottom: 1px solid mat-color($accent);
+ }
+ }
+}
\ No newline at end of file