Name: angular-patternfly
Owner: patternfly
Description: A set of common AngularJS components for use with the PatternFly reference implementation.
Created: 2014-03-12 15:43:51.0
Updated: 2017-12-17 16:58:11.0
Pushed: 2018-01-18 16:34:54.0
Homepage: http://www.patternfly.org/angular-patternfly/
Size: 20123
Language: JavaScript
GitHub Committers
User | Most Recent Commit | # Commits |
---|
Other Committers
User | Most Recent Commit | # Commits |
---|
This project will provide a set of common AngularJS components for use with the PatternFly reference implementation.
You have to install required software before you're able to use grunt:
Install Node.js - Find more information on Node.js
Angular Patternfly stays up to date with the Node LTS Release Schedule. If you're using Angular Patternfly downstream, we suggest the use of an actively supported version of Node/NPM, although prior versions of Node may work.
Install npm - If npm is not already installed with Node.js, you have to install it manually. Find more information on NPM
Install Grunt globally - Find more information on Grunt
m install -g grunt-cli
Install npm dependencies with:
m install
You should have your environment ready now.
Angular-PatternFly can now be built with:
m run build
To see all the grunt tasks that are available:
m run help
Note:
Add Angular-PatternFly as dependencies for your project and you'll receive all the libraries you'll need:
m install angular-patternfly --save
Add the core Patternfly CSS and script includes to your HTML file(s):
Please see: https://github.com/patternfly/patternfly/blob/master/QUICKSTART.md
Alternatively, the minimum you will need:
Add the following CSS include to your HTML file(s):
Angular-PatternFly Styles -->
k rel="stylesheet" href="node_modules/angular-patternfly/dist/styles/angular-patternfly.min.css" />
Add the following script includes to your HTML file(s), adjusting where necessary to pull in only what you need:
Angular -->
ipt src="node_modules/angular-patternfly/node_modules/angular/angular.min.js"></script>
Bootstrap-Select (Optional): The following lines are only required if you use the pfBootstrapSelect directive -->
ipt src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
ipt src="node_modules/bootstrap-select/js/bootstrap-select.js"></script>
Angular-Bootstrap -->
ipt src="node_modules/angular-patternfly/node_modules/angular-ui-bootstrap/dist/ui-bootstrap.js"></script>
ipt src="node_modules/angular-patternfly/node_modules/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js"></script>
Angular-Sanitize -->
ipt src="node_modules/angular-patternfly/node_modules/angular-sanitize/angular-sanitize.min.js"></script>
Angular-PatternFly -->
ipt src="node_modules/angular-patternfly/dist/angular-patternfly.min.js"></script>
Lodash -->
ipt src="node_modules/angular-patternfly/node_modules/lodash/lodash.min.js"></script>
(optional) The 'patternfly.charts' module is not a dependency in the default angular 'patternfly' module. In order to use patternfly charts you must add it as a dependency in your application:
pp.module.js:
lar.module('myApp', [
tternfly',
tternfly.charts'
And script includes to your HTML file:
C3, D3 - Charting Libraries. -->
ipt src="node_modules/angular-patternfly/node_modules/patternfly/node_modules/c3/c3.min.js"></script>
ipt src="node_modules/angular-patternfly/node_modules/patternfly/node_modules/d3/d3.min.js"></script>
(optional) The 'patternfly.table' module is not a dependency in the default angular 'patternfly' module. In order to use pfTableView, you must add 'patternfly.table' as a dependency in your application:
pp.module.js:
lar.module('myApp', [
tternfly',
tternfly.table'
Add the npm dependency:
m install angularjs-datatables --save
Add the following CSS includes to your HTML file(s):
Place before any patternfly css -->
k rel="stylesheet" href="node_modules/angular-patternfly/node_modules/datatables.net-dt/css/jquery.dataTables.css" />
Add the following Javascript includes to your HTML file(s):
ipt src="node_modules/angular-patternfly/node_modules/patternfly/node_modules/jquery/dist/jquery.js"></script>
ipt src="node_modules/angular-patternfly/node_modules/patternfly/node_modules/datatables.net/js/jquery.dataTables.js"></script>
ipt src="node_modules/angular-patternfly/node_modules/patternfly/node_modules/datatables.net-select/js/dataTables.select.js"></script>
ipt src="node_modules/angularjs-datatables/dist/angular-datatables.min.js"></script>
ipt src="node_modules/angularjs-datatables/dist/plugins/select/angular-datatables.select.min.js"></script>
(optional) The 'patternfly.canvas' module is not a dependency in the default angular 'patternfly' module. In order to use pfCanvasEditor or pfCanvas, you must add 'patternfly.canvas' as a dependency in your application:
pp.module.js:
lar.module('myApp', [
tternfly',
tternfly.canvas'
Add the npm dependencies:
m install jquery-ui-dist --save
m install angular-dragdrop --save
m install angular-svg-base-fix --save
Add the following Javascript includes to your HTML file(s):
jquery before angular.js -->
ipt src="node_modules/angular-patternfly/node_modules/patternfly/node_modules/jquery/dist/jquery.js"></script>
ipt src="node_modules/jquery-ui-dist/jquery-ui.js"></script>
angular-dragdrop and angular-svg-base-fix after angular.js -->
ipt src="node_modules/angular-dragdrop/src/angular-dragdrop.js"></script>
ipt src="node_modules/angular-svg-base-fix/src/svgBaseFix.js"></script>
Also, the canvas background grid image is located in 'node_modules/angular-patternfly/dist/imgs/canvas-dot-grid.png' please copy this image to your application's main images directory and reference it by overridding the '.canvas' css class:
le>
nvas {
ackground-image: url('/myapp/imgs/canvas-dot-grid.png');
ackground-repeat: repeat;
yle>
During the build process Less files are converted to Sass files in /dist/sass
. Then the Sass files are compiled into /dist/sass/angular-patternfly.css
. If you would like to copy the Sass generated css into the main /dist/styles
directory, execute:
t build --sass
This task will copy /dist/sass/angular-patternfly.css
to /dist/styles/angular-patternfly.css
. Then the build process will minimize the css in /dist/styles
.
The Less to Sass Conversion step will be accomplished and managed as a part of any Pull Request which includes Less file changes. Although contributors may want to build and test their style changes with Sass before submitting a Pull Request, this step should always be tested and validated by reviewers before a style change is merged and released. If a contributor is having issues with Sass conversion that they cannot resolve, Pull Request reviewers will need to ensure that the Sass conversion step is successfully accomplished, tested, and included in the Pull Request before it is approved and merged.
For more detailed information, please read PatternFly Less to Sass Conversion
Note: When a Less file is added/deleted/renamed it needs to be updated in the main Less import file /styles/angular-patternfly.less
and the main Sass import file styles/_angular-patternfly.scss
.
In order to use Angular-Patternfly in a Webpack-bundled application there are some things you need to keep in mind:
In order to let Webpack find the correct jQuery module when assembling all the dependencies you need to create an alias for it in the webpack.conf.js file:
lve: {
ias: {
"jquery": "patternfly/node_modules/jquery"
Additionally, you have to use the webpack.ProvidePlugin
so the $ and the jQuery variables are added to the window
object, making them available to the other modules (Patternfly included):
ins: [
w webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
"window.jquery": "jquery"
The API documentation can be built with:
m run ngdocs
If you're interested in reading the docs right away, you can use special target, which will start a web server:
m run ngdocs:view
After executing this tasks you'll be able to access the documentation at http://localhost:8000/. If a different port is desired, it may be specified on as an option:
m run ngdocs:view -- --port=8002
PatternFly uses a semantic release process to automate npm and bower package publishing, based on the following commit message format.
Each commit message consists of a header, a body and a footer. The header has a special format that includes a type, a scope and a subject (full explanation):
e>(<scope>): <subject>
NK LINE>
y>
NK LINE>
ter>
pencil): stop graphite breaking when too much pressure applied
pecific example using the component name as the scope
pfEmptyState): add missing closing <span> tag
(pencil): add 'graphiteWidth' option
pecific example using the component name as the scope
(pfNotificationDrawer): add empty state message to group without notifications
(pencil): remove graphiteWidth option
pecific example using the component name as the scope
(pfFakeComponent): remove pfFakeComponent
chore(pencil): rename internal graphiteDensity variable chore(pfNotificationDrawer): rename internal drawer expanded variable
We're always interested in contributions from the community.
Please ensure that your PR provides the following:
Applying a unit test, or an update to a unit test, is a contribution requirement.
If you're unfamiliar with Angular unit testing, or just need a refresher, here are the overall Angular 1x guidelines.
You can access the Angular PatternFly unit test `spec
files under the ``
test``` directory.
To get started, some basic guidelines:
Since PatternFly is based on Bootstrap, PatternFly generally supports the same browsers, see also Bootstrap browser support.