mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-16 15:40:11 +01:00
refactor(aio): add the docs, remove the unneeded dependencies, remove a config folder, fix a travis config
This commit is contained in:
Alexander Zhukov
parent
523f44b746
commit
b205a6d570
39 changed files with 2516 additions and 1791 deletions
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
|
||||
"project": {
|
||||
"name": "ng2-admin-cli"
|
||||
"name": "ng2-admin"
|
||||
},
|
||||
"apps": [
|
||||
{
|
||||
|
|
@ -19,9 +19,9 @@
|
|||
"testTsconfig": "tsconfig.spec.json",
|
||||
"prefix": "app",
|
||||
"styles": [
|
||||
"../node_modules/normalize.css/normalize.css",
|
||||
"../node_modules/bootstrap/scss/bootstrap.scss",
|
||||
"../node_modules/roboto-fontface/css/roboto/sass/roboto-fontface.scss",
|
||||
"../node_modules/normalize.css/normalize.css",
|
||||
"../node_modules/font-awesome/scss/font-awesome.scss",
|
||||
"../node_modules/ionicons/scss/ionicons.scss",
|
||||
"../node_modules/leaflet/dist/leaflet.css",
|
||||
|
|
|
|||
2
.github/CONTRIBUTING.md
vendored
2
.github/CONTRIBUTING.md
vendored
|
|
@ -3,4 +3,4 @@ If you're changing the structure of the repository please create an issue first
|
|||
|
||||
## Submitting bug reports
|
||||
|
||||
Make sure you are on latest changes and that you ran this command `npm run clean:install` after updating your local repository. If you can, please provide more infomation about your environment such as browser, operating system, node version, and npm version
|
||||
Make sure you are on latest changes and that you ran this command `npm run clean:install` after updating your local repository. If you can, please provide more information about your environment such as browser, operating system, node version, and npm version
|
||||
|
|
|
|||
10
.travis.yml
10
.travis.yml
|
|
@ -5,6 +5,10 @@ language: node_js
|
|||
node_js:
|
||||
- "6"
|
||||
|
||||
cache:
|
||||
directories:
|
||||
- $HOME/.cache/yarn
|
||||
|
||||
addons:
|
||||
apt:
|
||||
sources:
|
||||
|
|
@ -15,16 +19,12 @@ addons:
|
|||
before_install:
|
||||
- curl -o- -L https://yarnpkg.com/install.sh | bash
|
||||
- export PATH=$HOME/.yarn/bin:$PATH
|
||||
- npm config set spin false
|
||||
|
||||
before_script:
|
||||
- npm i -g npm@4
|
||||
|
||||
install:
|
||||
- yarn
|
||||
|
||||
script:
|
||||
- yarn run build:ci
|
||||
- npm run build:ci
|
||||
|
||||
notifications:
|
||||
slack: akveo:q559HckfZMSyZRb803aiLcjH
|
||||
|
|
|
|||
228
CONTRIBUTING.md
228
CONTRIBUTING.md
|
|
@ -1,228 +0,0 @@
|
|||
# Contributing to ng2-admin
|
||||
|
||||
We would love for you to contribute to ng2-admin and help make it even better than it is
|
||||
today! As a contributor, here are the guidelines we would like you to follow:
|
||||
|
||||
- [Question or Problem?](#question)
|
||||
- [Issues and Bugs](#issue)
|
||||
- [Feature Requests](#feature)
|
||||
- [Submission Guidelines](#submit)
|
||||
- [Commit Message Guidelines](#commit)
|
||||
|
||||
## <a name="question"></a> Got a Question or Problem?
|
||||
|
||||
Please, do not open issues for the general support questions as we want to keep GitHub issues for bug reports and feature requests.
|
||||
|
||||
StackOverflow is a much better place to ask questions since:
|
||||
|
||||
- there are thousands of people willing to help on StackOverflow
|
||||
- questions and answers stay available for public viewing so your question / answer might help someone else
|
||||
- StackOverflow's voting system assures that the best answers are prominently visible.
|
||||
|
||||
To save your and our time we will be systematically closing all the issues that are requests for general support and redirecting people to StackOverflow.
|
||||
|
||||
If you would like to chat about the question in real-time, you can reach out via [our gitter channel][gitter].
|
||||
|
||||
## <a name="issue"></a> Found a Bug?
|
||||
If you find a bug in the source code, you can help us by
|
||||
[submitting an issue](#submit-issue) to our [GitHub Repository][github]. Even better, you can
|
||||
[submit a Pull Request](#submit-pr) with a fix.
|
||||
|
||||
## <a name="feature"></a> Missing a Feature?
|
||||
You can *request* a new feature by [submitting an issue](#submit-issue) to our GitHub
|
||||
Repository. If you would like to *implement* a new feature, please submit an issue with
|
||||
a proposal for your work first, to be sure that we can use it.
|
||||
Please consider what kind of change it is:
|
||||
|
||||
* For a **Major Feature**, first open an issue and outline your proposal so that it can be
|
||||
discussed. This will also allow us to better coordinate our efforts, prevent duplication of work,
|
||||
and help you to craft the change so that it is successfully accepted into the project.
|
||||
* **Small Features** can be crafted and directly [submitted as a Pull Request](#submit-pr).
|
||||
|
||||
## <a name="submit"></a> Submission Guidelines
|
||||
|
||||
### <a name="submit-issue"></a> Submitting an Issue
|
||||
|
||||
Before you submit an issue, please search the issue tracker, maybe an issue for your problem already exists and the discussion might inform you of workarounds readily available.
|
||||
|
||||
We want to fix all the issues as soon as possible, but before fixing a bug we need to reproduce and confirm it. In order to reproduce bugs we will systematically ask you to provide a minimal reproduction scenario using http://plnkr.co. Having a live, reproducible scenario gives us wealth of important information without going back & forth to you with additional questions like:
|
||||
|
||||
- version of ng2-admin used
|
||||
- 3rd-party libraries and their versions
|
||||
- and most importantly - a use-case that fails
|
||||
|
||||
A minimal reproduce scenario using http://plnkr.co/ allows us to quickly confirm a bug (or point out coding problem) as well as confirm that we are fixing the right problem. If plunker is not a suitable way to demonstrate the problem (for example for issues related to our npm packaging), please create a standalone git repository demonstrating the problem.
|
||||
|
||||
We will be insisting on a minimal reproduce scenario in order to save maintainers time and ultimately be able to fix more bugs. Interestingly, from our experience users often find coding problems themselves while preparing a minimal plunk. We understand that sometimes it might be hard to extract essentials bits of code from a larger code-base but we really need to isolate the problem before we can fix it.
|
||||
|
||||
Unfortunately we are not able to investigate / fix bugs without a minimal reproduction, so if we don't hear back from you we are going to close an issue that don't have enough info to be reproduced.
|
||||
|
||||
You can file new issues by filling out our [new issue form](https://github.com/akveo/ng2-admin/issues/new).
|
||||
|
||||
|
||||
### <a name="submit-pr"></a> Submitting a Pull Request (PR)
|
||||
Before you submit your Pull Request (PR) consider the following guidelines:
|
||||
|
||||
* Search [GitHub](https://github.com/akveo/ng2-admin/pulls) for an open or closed PR
|
||||
that relates to your submission. You don't want to duplicate effort.
|
||||
* Make your changes in a new git branch:
|
||||
|
||||
```shell
|
||||
git checkout -b my-fix-branch master
|
||||
```
|
||||
|
||||
* Commit your changes using a descriptive commit message that follows our
|
||||
[commit message conventions](#commit). Adherence to these conventions
|
||||
is necessary because release notes are automatically generated from these messages.
|
||||
|
||||
```shell
|
||||
git commit -a
|
||||
```
|
||||
Note: the optional commit `-a` command line option will automatically "add" and "rm" edited files.
|
||||
|
||||
* Push your branch to GitHub:
|
||||
|
||||
```shell
|
||||
git push origin my-fix-branch
|
||||
```
|
||||
|
||||
* In GitHub, send a pull request to `ng2-admin:master`.
|
||||
* If we suggest changes then:
|
||||
* Make the required updates.
|
||||
* Rebase your branch and force push to your GitHub repository (this will update your Pull Request):
|
||||
|
||||
```shell
|
||||
git rebase master -i
|
||||
git push -f
|
||||
```
|
||||
|
||||
That's it! Thank you for your contribution!
|
||||
|
||||
#### After your pull request is merged
|
||||
|
||||
After your pull request is merged, you can safely delete your branch and pull the changes
|
||||
from the main (upstream) repository:
|
||||
|
||||
* Delete the remote branch on GitHub either through the GitHub web UI or your local shell as follows:
|
||||
|
||||
```shell
|
||||
git push origin --delete my-fix-branch
|
||||
```
|
||||
|
||||
* Check out the master branch:
|
||||
|
||||
```shell
|
||||
git checkout master -f
|
||||
```
|
||||
|
||||
* Delete the local branch:
|
||||
|
||||
```shell
|
||||
git branch -D my-fix-branch
|
||||
```
|
||||
|
||||
* Update your master with the latest upstream version:
|
||||
|
||||
```shell
|
||||
git pull --ff upstream master
|
||||
```
|
||||
|
||||
## <a name="commit"></a> Commit Message Guidelines
|
||||
|
||||
We have very precise rules over how our git commit messages can be formatted. This leads to **more
|
||||
readable messages** that are easy to follow when looking through the **project history**. But also,
|
||||
we use the git commit messages to **generate the ng2-admin change log**.
|
||||
|
||||
### 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**:
|
||||
|
||||
```
|
||||
<type>(<scope>): <subject>
|
||||
<BLANK LINE>
|
||||
<body>
|
||||
<BLANK LINE>
|
||||
<footer>
|
||||
```
|
||||
|
||||
The **header** is mandatory and the **scope** of the header is optional.
|
||||
|
||||
Any line of the commit message cannot be longer 100 characters! This allows the message to be easier
|
||||
to read on GitHub as well as in various git tools.
|
||||
|
||||
Footer should contain a [closing reference to an issue](https://help.github.com/articles/closing-issues-via-commit-messages/) if any.
|
||||
|
||||
Samples: (even more [samples](https://github.com/akveo/ng2-admin/commits/master))
|
||||
|
||||
```
|
||||
docs(changelog): update change log to beta.5
|
||||
```
|
||||
```
|
||||
fix(release): need to depend on latest rxjs and zone.js
|
||||
|
||||
The version in our package.json gets copied to the one we publish, and users need the latest of these.
|
||||
```
|
||||
|
||||
### Revert
|
||||
If the commit reverts a previous commit, it should begin with `revert: `, followed by the header of the reverted commit. In the body it should say: `This reverts commit <hash>.`, where the hash is the SHA of the commit being reverted.
|
||||
|
||||
### Type
|
||||
Must be one of the following:
|
||||
|
||||
* **build**: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)
|
||||
* **ci**: Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)
|
||||
* **docs**: Documentation only changes
|
||||
* **feat**: A new feature
|
||||
* **fix**: A bug fix
|
||||
* **perf**: A code change that improves performance
|
||||
* **refactor**: A code change that neither fixes a bug nor adds a feature
|
||||
* **style**: Changes that do not affect the meaning of the code (white-space, formatting, missing
|
||||
semi-colons, etc)
|
||||
* **test**: Adding missing tests or correcting existing tests
|
||||
|
||||
### Scope
|
||||
The scope should be the name of the npm package affected (as perceived by person reading changelog generated from commit messages.
|
||||
|
||||
The following is the list of supported scopes:
|
||||
|
||||
* **dashboard**
|
||||
* **editors**
|
||||
* **components**
|
||||
* **charts**
|
||||
* **ui-features**
|
||||
* **form-elements**
|
||||
* **tables**
|
||||
* **maps**
|
||||
* **pages**
|
||||
* **menu-level**
|
||||
* **external-link**
|
||||
* **sidebar**
|
||||
* **profile**
|
||||
* **settings**
|
||||
* **validator**
|
||||
|
||||
### Subject
|
||||
The subject contains succinct description of the change:
|
||||
|
||||
* use the imperative, present tense: "change" not "changed" nor "changes"
|
||||
* don't capitalize first letter
|
||||
* no dot (.) at the end
|
||||
|
||||
### Body
|
||||
Just as in the **subject**, use the imperative, present tense: "change" not "changed" nor "changes".
|
||||
The body should include the motivation for the change and contrast this with previous behavior.
|
||||
|
||||
### Footer
|
||||
The footer should contain any information about **Breaking Changes** and is also the place to
|
||||
reference GitHub issues that this commit **Closes**.
|
||||
|
||||
**Breaking Changes** should start with the word `BREAKING CHANGE:` with a space or two newlines. The rest of the commit message is then used for this.
|
||||
|
||||
A detailed explanation can be found in this [document][commit-message-format].
|
||||
|
||||
|
||||
[commit-message-format]: https://docs.google.com/document/d/1QrDFcIiPjSLDn3EL15IJygNPiHORgU1_OOAqWjiDU5Y/edit#
|
||||
[github]: https://github.com/akveo/ng2-admin
|
||||
[gitter]: https://gitter.im/ng2-admin
|
||||
[jsfiddle]: http://jsfiddle.net
|
||||
[plunker]: http://plnkr.co/edit
|
||||
2
LICENSE
2
LICENSE
|
|
@ -1,6 +1,6 @@
|
|||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2016 akveo.com
|
||||
Copyright (c) 2017 akveo.com
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
|
|
|
|||
|
|
@ -1,123 +0,0 @@
|
|||
module.exports = function (config) {
|
||||
var testWebpackConfig = require('./webpack.test.js')({ env: 'test' });
|
||||
|
||||
var configuration = {
|
||||
|
||||
// base path that will be used to resolve all patterns (e.g. files, exclude)
|
||||
basePath: '',
|
||||
|
||||
/*
|
||||
* Frameworks to use
|
||||
*
|
||||
* available frameworks: https://npmjs.org/browse/keyword/karma-adapter
|
||||
*/
|
||||
frameworks: ['jasmine'],
|
||||
|
||||
// list of files to exclude
|
||||
exclude: [],
|
||||
|
||||
client: {
|
||||
captureConsole: false
|
||||
},
|
||||
|
||||
/*
|
||||
* list of files / patterns to load in the browser
|
||||
*
|
||||
* we are building the test environment in ./spec-bundle.js
|
||||
*/
|
||||
files: [
|
||||
{ pattern: './config/spec-bundle.js', watched: false },
|
||||
{ pattern: './src/assets/**/*', watched: false, included: false, served: true, nocache: false }
|
||||
],
|
||||
|
||||
/*
|
||||
* By default all assets are served at http://localhost:[PORT]/base/
|
||||
*/
|
||||
proxies: {
|
||||
"/assets/": "/base/src/assets/"
|
||||
},
|
||||
|
||||
/*
|
||||
* preprocess matching files before serving them to the browser
|
||||
* available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
|
||||
*/
|
||||
preprocessors: { './config/spec-bundle.js': ['coverage', 'webpack', 'sourcemap'] },
|
||||
|
||||
// Webpack Config at ./webpack.test.js
|
||||
webpack: testWebpackConfig,
|
||||
|
||||
coverageReporter: {
|
||||
type: 'in-memory'
|
||||
},
|
||||
|
||||
remapCoverageReporter: {
|
||||
'text-summary': null,
|
||||
json: './coverage/coverage.json',
|
||||
html: './coverage/html'
|
||||
},
|
||||
|
||||
// Webpack please don't spam the console when running in karma!
|
||||
webpackMiddleware: {
|
||||
// webpack-dev-middleware configuration
|
||||
// i.e.
|
||||
noInfo: true,
|
||||
// and use stats to turn off verbose output
|
||||
stats: {
|
||||
// options i.e.
|
||||
chunks: false
|
||||
}
|
||||
},
|
||||
|
||||
/*
|
||||
* test results reporter to use
|
||||
*
|
||||
* possible values: 'dots', 'progress'
|
||||
* available reporters: https://npmjs.org/browse/keyword/karma-reporter
|
||||
*/
|
||||
reporters: ['mocha', 'coverage', 'remap-coverage'],
|
||||
|
||||
// web server port
|
||||
port: 9876,
|
||||
|
||||
// enable / disable colors in the output (reporters and logs)
|
||||
colors: true,
|
||||
|
||||
/*
|
||||
* level of logging
|
||||
* possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
|
||||
*/
|
||||
logLevel: config.LOG_WARN,
|
||||
|
||||
// enable / disable watching file and executing tests whenever any file changes
|
||||
autoWatch: false,
|
||||
|
||||
/*
|
||||
* start these browsers
|
||||
* available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
|
||||
*/
|
||||
browsers: [
|
||||
'Chrome'
|
||||
],
|
||||
|
||||
customLaunchers: {
|
||||
ChromeTravisCi: {
|
||||
base: 'Chrome',
|
||||
flags: ['--no-sandbox']
|
||||
}
|
||||
},
|
||||
|
||||
/*
|
||||
* Continuous Integration mode
|
||||
* if true, Karma captures browsers, runs the tests and exits
|
||||
*/
|
||||
singleRun: true
|
||||
};
|
||||
|
||||
if (process.env.TRAVIS) {
|
||||
configuration.browsers = [
|
||||
'ChromeTravisCi'
|
||||
];
|
||||
}
|
||||
|
||||
config.set(configuration);
|
||||
};
|
||||
|
|
@ -1,55 +0,0 @@
|
|||
/*
|
||||
* When testing with webpack and ES6, we have to do some extra
|
||||
* things to get testing to work right. Because we are gonna write tests
|
||||
* in ES6 too, we have to compile those as well. That's handled in
|
||||
* karma.conf.js with the karma-webpack plugin. This is the entry
|
||||
* file for webpack test. Just like webpack will create a bundle.js
|
||||
* file for our client, when we run test, it will compile and bundle them
|
||||
* all here! Crazy huh. So we need to do some setup
|
||||
*/
|
||||
Error.stackTraceLimit = Infinity;
|
||||
|
||||
require('core-js/es6');
|
||||
require('core-js/es7/reflect');
|
||||
|
||||
require('zone.js/dist/zone');
|
||||
require('zone.js/dist/long-stack-trace-zone');
|
||||
require('zone.js/dist/proxy'); // since zone.js 0.6.15
|
||||
require('zone.js/dist/sync-test');
|
||||
require('zone.js/dist/jasmine-patch'); // put here since zone.js 0.6.14
|
||||
require('zone.js/dist/async-test');
|
||||
require('zone.js/dist/fake-async-test');
|
||||
|
||||
// RxJS
|
||||
require('rxjs/Rx');
|
||||
|
||||
var testing = require('@angular/core/testing');
|
||||
var browser = require('@angular/platform-browser-dynamic/testing');
|
||||
|
||||
testing.TestBed.initTestEnvironment(
|
||||
browser.BrowserDynamicTestingModule,
|
||||
browser.platformBrowserDynamicTesting()
|
||||
);
|
||||
|
||||
/*
|
||||
* Ok, this is kinda crazy. We can use the context method on
|
||||
* require that webpack created in order to tell webpack
|
||||
* what files we actually want to require or import.
|
||||
* Below, context will be a function/object with file names as keys.
|
||||
* Using that regex we are saying look in ../src then find
|
||||
* any file that ends with spec.ts and get its path. By passing in true
|
||||
* we say do this recursively
|
||||
*/
|
||||
var testContext = require.context('../src', true, /\.spec\.ts/);
|
||||
|
||||
/*
|
||||
* get all the files, for each file, call the context function
|
||||
* that will require the file and load it up here. Context will
|
||||
* loop and require those spec files here
|
||||
*/
|
||||
function requireAll(requireContext) {
|
||||
return requireContext.keys().map(requireContext);
|
||||
}
|
||||
|
||||
// requires and returns all modules that match
|
||||
var modules = requireAll(testContext);
|
||||
|
|
@ -1,258 +0,0 @@
|
|||
const helpers = require('./helpers');
|
||||
|
||||
/**
|
||||
* Webpack Plugins
|
||||
*/
|
||||
const ProvidePlugin = require('webpack/lib/ProvidePlugin');
|
||||
const DefinePlugin = require('webpack/lib/DefinePlugin');
|
||||
const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin');
|
||||
const ContextReplacementPlugin = require('webpack/lib/ContextReplacementPlugin');
|
||||
|
||||
/**
|
||||
* Webpack Constants
|
||||
*/
|
||||
const ENV = process.env.ENV = process.env.NODE_ENV = 'test';
|
||||
|
||||
/**
|
||||
* Webpack configuration
|
||||
*
|
||||
* See: http://webpack.github.io/docs/configuration.html#cli
|
||||
*/
|
||||
module.exports = function (options) {
|
||||
return {
|
||||
|
||||
/**
|
||||
* Source map for Karma from the help of karma-sourcemap-loader & karma-webpack
|
||||
*
|
||||
* Do not change, leave as is or it wont work.
|
||||
* See: https://github.com/webpack/karma-webpack#source-maps
|
||||
*/
|
||||
devtool: 'inline-source-map',
|
||||
|
||||
/**
|
||||
* Options affecting the resolving of modules.
|
||||
*
|
||||
* See: http://webpack.github.io/docs/configuration.html#resolve
|
||||
*/
|
||||
resolve: {
|
||||
|
||||
/**
|
||||
* An array of extensions that should be used to resolve modules.
|
||||
*
|
||||
* See: http://webpack.github.io/docs/configuration.html#resolve-extensions
|
||||
*/
|
||||
extensions: ['.ts', '.js'],
|
||||
|
||||
/**
|
||||
* Make sure root is src
|
||||
*/
|
||||
modules: [helpers.root('src'), 'node_modules']
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* Options affecting the normal modules.
|
||||
*
|
||||
* See: http://webpack.github.io/docs/configuration.html#module
|
||||
*
|
||||
* 'use:' revered back to 'loader:' as a temp. workaround for #1188
|
||||
* See: https://github.com/AngularClass/angular2-webpack-starter/issues/1188#issuecomment-262872034
|
||||
*/
|
||||
module: {
|
||||
|
||||
rules: [
|
||||
|
||||
/**
|
||||
* Source map loader support for *.js files
|
||||
* Extracts SourceMaps for source files that as added as sourceMappingURL comment.
|
||||
*
|
||||
* See: https://github.com/webpack/source-map-loader
|
||||
*/
|
||||
{
|
||||
enforce: 'pre',
|
||||
test: /\.js$/,
|
||||
loader: 'source-map-loader',
|
||||
exclude: [
|
||||
// these packages have problems with their sourcemaps
|
||||
helpers.root('node_modules/rxjs'),
|
||||
helpers.root('node_modules/@angular')
|
||||
]
|
||||
},
|
||||
|
||||
/**
|
||||
* Typescript loader support for .ts and Angular 2 async routes via .async.ts
|
||||
*
|
||||
* See: https://github.com/s-panferov/awesome-typescript-loader
|
||||
*/
|
||||
{
|
||||
test: /\.ts$/,
|
||||
use: [
|
||||
{
|
||||
loader: 'awesome-typescript-loader',
|
||||
query: {
|
||||
// use inline sourcemaps for "karma-remap-coverage" reporter
|
||||
sourceMap: false,
|
||||
inlineSourceMap: true,
|
||||
compilerOptions: {
|
||||
|
||||
// Remove TypeScript helpers to be injected
|
||||
// below by DefinePlugin
|
||||
removeComments: true
|
||||
|
||||
}
|
||||
},
|
||||
},
|
||||
'angular2-template-loader'
|
||||
],
|
||||
exclude: [/\.e2e\.ts$/]
|
||||
},
|
||||
|
||||
/**
|
||||
* Json loader support for *.json files.
|
||||
*
|
||||
* See: https://github.com/webpack/json-loader
|
||||
*/
|
||||
{
|
||||
test: /\.json$/,
|
||||
loader: 'json-loader',
|
||||
exclude: [helpers.root('src/index.html')]
|
||||
},
|
||||
|
||||
/**
|
||||
* Raw loader support for *.css files
|
||||
* Returns file content as string
|
||||
*
|
||||
* See: https://github.com/webpack/raw-loader
|
||||
*/
|
||||
{
|
||||
test: /\.css$/,
|
||||
loader: ['to-string-loader', 'css-loader'],
|
||||
exclude: [helpers.root('src/index.html')]
|
||||
},
|
||||
|
||||
/**
|
||||
* Raw loader support for *.scss files
|
||||
*
|
||||
* See: https://github.com/webpack/raw-loader
|
||||
*/
|
||||
{
|
||||
test: /\.scss$/,
|
||||
loader: ['raw-loader', 'sass-loader'],
|
||||
exclude: [helpers.root('src/index.html')]
|
||||
},
|
||||
|
||||
/**
|
||||
* Raw loader support for *.html
|
||||
* Returns file content as string
|
||||
*
|
||||
* See: https://github.com/webpack/raw-loader
|
||||
*/
|
||||
{
|
||||
test: /\.html$/,
|
||||
loader: 'raw-loader',
|
||||
exclude: [helpers.root('src/index.html')]
|
||||
},
|
||||
|
||||
/**
|
||||
* Instruments JS files with Istanbul for subsequent code coverage reporting.
|
||||
* Instrument only testing sources.
|
||||
*
|
||||
* See: https://github.com/deepsweet/istanbul-instrumenter-loader
|
||||
*/
|
||||
{
|
||||
enforce: 'post',
|
||||
test: /\.(js|ts)$/,
|
||||
loader: 'istanbul-instrumenter-loader',
|
||||
include: helpers.root('src'),
|
||||
exclude: [
|
||||
/\.(e2e|spec)\.ts$/,
|
||||
/node_modules/
|
||||
]
|
||||
}
|
||||
|
||||
]
|
||||
},
|
||||
|
||||
/**
|
||||
* Add additional plugins to the compiler.
|
||||
*
|
||||
* See: http://webpack.github.io/docs/configuration.html#plugins
|
||||
*/
|
||||
plugins: [
|
||||
|
||||
/**
|
||||
* Plugin: DefinePlugin
|
||||
* Description: Define free variables.
|
||||
* Useful for having development builds with debug logging or adding global constants.
|
||||
*
|
||||
* Environment helpers
|
||||
*
|
||||
* See: https://webpack.github.io/docs/list-of-plugins.html#defineplugin
|
||||
*/
|
||||
// NOTE: when adding more properties make sure you include them in custom-typings.d.ts
|
||||
new DefinePlugin({
|
||||
'ENV': JSON.stringify(ENV),
|
||||
'HMR': false,
|
||||
'process.env': {
|
||||
'ENV': JSON.stringify(ENV),
|
||||
'NODE_ENV': JSON.stringify(ENV),
|
||||
'HMR': false,
|
||||
}
|
||||
}),
|
||||
|
||||
/**
|
||||
* Plugin: ContextReplacementPlugin
|
||||
* Description: Provides context to Angular's use of System.import
|
||||
*
|
||||
* See: https://webpack.github.io/docs/list-of-plugins.html#contextreplacementplugin
|
||||
* See: https://github.com/angular/angular/issues/11580
|
||||
*/
|
||||
new ContextReplacementPlugin(
|
||||
// The (\\|\/) piece accounts for path separators in *nix and Windows
|
||||
/angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
|
||||
helpers.root('src'), // location of your src
|
||||
{
|
||||
// your Angular Async Route paths relative to this root directory
|
||||
}
|
||||
),
|
||||
|
||||
/**
|
||||
* Plugin LoaderOptionsPlugin (experimental)
|
||||
*
|
||||
* See: https://gist.github.com/sokra/27b24881210b56bbaff7
|
||||
*/
|
||||
new LoaderOptionsPlugin({
|
||||
debug: false,
|
||||
options: {
|
||||
// legacy options go here
|
||||
}
|
||||
}),
|
||||
|
||||
],
|
||||
|
||||
/**
|
||||
* Disable performance hints
|
||||
*
|
||||
* See: https://github.com/a-tarasyuk/rr-boilerplate/blob/master/webpack/dev.config.babel.js#L41
|
||||
*/
|
||||
performance: {
|
||||
hints: false
|
||||
},
|
||||
|
||||
/**
|
||||
* Include polyfills or mocks for various node stuff
|
||||
* Description: Node configuration
|
||||
*
|
||||
* See: https://webpack.github.io/docs/configuration.html#node
|
||||
*/
|
||||
node: {
|
||||
global: true,
|
||||
process: false,
|
||||
crypto: 'empty',
|
||||
module: false,
|
||||
clearImmediate: false,
|
||||
setImmediate: false
|
||||
}
|
||||
|
||||
};
|
||||
}
|
||||
35
docs/config.json
Normal file
35
docs/config.json
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
{
|
||||
"baseUrl": "/ng2-admin/",
|
||||
"locals": {
|
||||
"url": "http://localhost:8080",
|
||||
"name": "ng2-admin blog",
|
||||
"owner": "Akveo",
|
||||
"description": ""
|
||||
},
|
||||
"plugins": [
|
||||
"wintersmith-sassy",
|
||||
"./plugins/paginator.coffee"
|
||||
],
|
||||
"sass": {
|
||||
"debug": "undefined"
|
||||
},
|
||||
"require": {
|
||||
"moment": "moment",
|
||||
"_": "underscore",
|
||||
"typogr": "typogr"
|
||||
},
|
||||
"jade": {
|
||||
"pretty": true
|
||||
},
|
||||
"markdown": {
|
||||
"smartLists": true,
|
||||
"smartypants": true
|
||||
},
|
||||
"paginator": {
|
||||
"perPage": 3,
|
||||
"groupSort": {
|
||||
"Quick Start": 1000,
|
||||
"Customization": 900
|
||||
}
|
||||
}
|
||||
}
|
||||
50
docs/contents/articles/001-getting-started/index.md
Normal file
50
docs/contents/articles/001-getting-started/index.md
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
---
|
||||
title: Getting Started
|
||||
author: vl
|
||||
sort: 999
|
||||
group: Quick Start
|
||||
template: article.jade
|
||||
---
|
||||
|
||||
## What is ng2-admin?
|
||||
|
||||
ng2-admin is a front-end Admin Dashboard template based on Angular 2, Bootstrap 4 and Webpack. That means all the
|
||||
data you can see on graphs, charts and tables is mocked in Javascript so you can use the
|
||||
backend of your choice with no limitations.
|
||||
|
||||
## How can it help me?
|
||||
|
||||
We believe that at the moment a lot of business applications have administration/management interfaces inside of them. Sometimes it's not that obvious, but a lot of web applications have dashboards with panels, charts analytics, etc.
|
||||
|
||||
ng2-admin aims to bootstrap the development of your product and provide an
|
||||
ecosystem for building production-ready application or prototypes.
|
||||
|
||||
Frameworks like Bootstrap provide a number of components, but usually it's not enough to
|
||||
build a real-world app. This template comes with lots of popular UI components with a unified color scheme,
|
||||
plus it is based on a modern Angular 2 framework and has a flexible component based structure.
|
||||
|
||||
You can also use ng2-admin for the purpose of learning Angular 2.
|
||||
|
||||
## List of features
|
||||
|
||||
* Angular 2
|
||||
* Webpack 2
|
||||
* Bootstrap 4 CSS Framework
|
||||
* SASS
|
||||
* [Smart Table](http://akveo.com/ng2-admin/#/pages/tables/smarttables)
|
||||
* [Forms](http://akveo.com/ng2-admin/#/pages/forms/inputs)
|
||||
* [Editors](http://akveo.com/ng2-admin/#/pages/editors/ckeditor)
|
||||
* [Charts (amChart, Chartist, Chart.js, Morris)](http://akveo.com/ng2-admin/#/pages/charts/chartist-js)
|
||||
* [Maps (Google, Leaflet, amMap)](http://akveo.com/ng2-admin/#/pages/maps/googlemaps)
|
||||
* Responsive layout
|
||||
* High resolution
|
||||
* and many more!
|
||||
|
||||
## I want to start developing with ng2-admin
|
||||
|
||||
Welcome aboard!
|
||||
|
||||
You can start with the [Installation Guidelines](/ng2-admin/articles/002-installation-guidelines/).
|
||||
There we describe how you can download and run the template on your local machine.
|
||||
|
||||
Good luck and have fun!
|
||||
58
docs/contents/articles/002-installation-guidelines/index.md
Normal file
58
docs/contents/articles/002-installation-guidelines/index.md
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
---
|
||||
title: Installation Guidelines
|
||||
author: vl
|
||||
sort: 500
|
||||
group: Quick Start
|
||||
template: article.jade
|
||||
---
|
||||
|
||||
## Prerequisites
|
||||
|
||||
Although ng2-admin can be run without any development experience, it would be much easier if you already have some.
|
||||
The following instructions allow you to run a local copy on your machine.
|
||||
|
||||
## Install tools
|
||||
|
||||
If you don't have any of these tools installed already, you will need to:
|
||||
* Download and install [git](https://git-scm.com/)
|
||||
* Download and install nodejs [https://nodejs.org](https://nodejs.org)
|
||||
|
||||
**Note**: Make sure you have Node version >= 4.0 and NPM >= 3
|
||||
## Clone repository and install dependencies
|
||||
|
||||
You will need to clone the source code of ng2-admin GitHub repository:
|
||||
|
||||
```bash
|
||||
git clone https://github.com/akveo/ng2-admin.git
|
||||
```
|
||||
After the repository is cloned, go inside of the repository directory and install dependencies:
|
||||
|
||||
```bash
|
||||
cd ng2-admin
|
||||
npm install
|
||||
```
|
||||
This will setup a working copy of ng2-admin on your local machine.
|
||||
|
||||
## Running local copy
|
||||
|
||||
To run a local copy in development mode, execute:
|
||||
|
||||
```bash
|
||||
npm start
|
||||
```
|
||||
|
||||
Go to http://0.0.0.0:3000 or http://localhost:3000 in your browser.
|
||||
|
||||
|
||||
To run the local copy in production mode and build the sources, execute:
|
||||
|
||||
```bash
|
||||
npm run prebuild:prod && npm run build:prod && npm run server:prod
|
||||
```
|
||||
|
||||
This will clear up your dist folder (where release files are located), generate a release build and start the
|
||||
built-in server.
|
||||
Now you can copy the sources from the `dist` folder and use it with any backend framework or
|
||||
simply put it under a web server.
|
||||
|
||||
For addition information about creating a build, please check out [Angular2 Webpack Starter documentation](https://github.com/AngularClass/angular2-webpack-starter)
|
||||
128
docs/contents/articles/011-changing-color-scheme/index.md
Normal file
128
docs/contents/articles/011-changing-color-scheme/index.md
Normal file
|
|
@ -0,0 +1,128 @@
|
|||
---
|
||||
title: Changing Color Scheme
|
||||
author: vl
|
||||
sort: 900
|
||||
group: Customization
|
||||
template: article.jade
|
||||
---
|
||||
|
||||
We tried to make the process of color scheme customization as easy as possible.
|
||||
|
||||
By default ng2-admin has three built-in color profiles: ng2 (default blue sheme), mint and blur.
|
||||
This article will help you to create your own color profile.
|
||||
Let's say you want to make ng2-admin dark theme.
|
||||
|
||||
First we advise you to take some existing colorscheme file as a starting point.
|
||||
For light themes we suggest taking `src/app/theme/sass/conf/colorScheme/_mint.scss` and for
|
||||
dark `src/app/theme/sass/conf/colorScheme/_blue.scss`.
|
||||
As we want a dark theme, we're taking `blue`.
|
||||
|
||||
1) Copy `src/app/theme/sass/conf/colorScheme/_blue.scss` to `src/app/theme/sass/conf/colorScheme/_dark.scss`:
|
||||
<br><br>
|
||||
|
||||
2) Include your colorscheme file in `src/app/theme/sass/conf/conf.scss`.
|
||||
|
||||
To do this, replace
|
||||
```scss
|
||||
@import 'colorSchemes/ng2';
|
||||
```
|
||||
|
||||
with
|
||||
|
||||
```scss
|
||||
@import 'colorSchemes/dark';
|
||||
```
|
||||
<br><br>
|
||||
|
||||
3) Change the color scheme enabled:
|
||||
|
||||
Open `src/app/theme/theme.config.ts`.
|
||||
Uncomment the following line
|
||||
|
||||
```javascript
|
||||
//this._baConfig.changeTheme({name: 'my-theme'});
|
||||
```
|
||||
|
||||
and put your theme name, in our case it is `dark`
|
||||
|
||||
```javascript
|
||||
this._baConfig.changeTheme({name: 'dark'});
|
||||
```
|
||||
Beside notifying the system which scheme is currently enabled, this also puts a css class to a main element
|
||||
of the page. Thus you can freely create theme-specific css selectors in your code without breakking other themes' styles.
|
||||
|
||||
For example like this:
|
||||
```scss
|
||||
. dark .card-body {
|
||||
background-color: white;
|
||||
}
|
||||
```
|
||||
<br><br>
|
||||
|
||||
4) Change the colors:
|
||||
|
||||
Now you can start changing the colors.
|
||||
For example, after playing a bit with different colors, we changed the 2 first main variables in `_dark.scss` file:
|
||||
```sass
|
||||
$body-bg: #636363;
|
||||
$bootstrap-panel-bg: rgba(#000000, 0.2);
|
||||
|
||||
```
|
||||
|
||||
After this is done, you need to setup javascript to use the **same colors**. These colors
|
||||
are used for javascript charts and other components (maps, etc);
|
||||
Let's completely change the JS colors to a new set.
|
||||
To do this, add the following code to the configuration block inside `src/app/theme/theme.config.ts`:
|
||||
```javascript
|
||||
let colorScheme = {
|
||||
primary: '#209e91',
|
||||
info: '#2dacd1',
|
||||
success: '#90b900',
|
||||
warning: '#dfb81c',
|
||||
danger: '#e85656',
|
||||
};
|
||||
this._baConfig.changeColors({
|
||||
default: '#4e4e55',
|
||||
defaultText: '#e2e2e2',
|
||||
border: '#dddddd',
|
||||
borderDark: '#aaaaaa',
|
||||
|
||||
primary: colorScheme.primary,
|
||||
info: colorScheme.info,
|
||||
success: colorScheme.success,
|
||||
warning: colorScheme.warning,
|
||||
danger: colorScheme.danger,
|
||||
|
||||
primaryLight: colorHelper.tint(colorScheme.primary, 30),
|
||||
infoLight: colorHelper.tint(colorScheme.info, 30),
|
||||
successLight: colorHelper.tint(colorScheme.success, 30),
|
||||
warningLight: colorHelper.tint(colorScheme.warning, 30),
|
||||
dangerLight: colorHelper.tint(colorScheme.danger, 30),
|
||||
|
||||
primaryDark: colorHelper.shade(colorScheme.primary, 15),
|
||||
infoDark: colorHelper.shade(colorScheme.info, 15),
|
||||
successDark: colorHelper.shade(colorScheme.success, 15),
|
||||
warningDark: colorHelper.shade(colorScheme.warning, 15),
|
||||
dangerDark: colorHelper.shade(colorScheme.danger, 15),
|
||||
|
||||
dashboard: {
|
||||
blueStone: '#005562',
|
||||
surfieGreen: '#0e8174',
|
||||
silverTree: '#6eba8c',
|
||||
gossip: '#b9f2a1',
|
||||
white: '#10c4b5',
|
||||
},
|
||||
});
|
||||
```
|
||||
Here we defined a list of main colors `colorScheme` and then made light and dark versions of those using `colorHelper` methods.
|
||||
We also defined a couple of custom colors for dashboard charts.
|
||||
|
||||
|
||||
That's basically it! Right now your admin application should look like this:
|
||||
|
||||
|
||||
|
||||
For further reference, please look in
|
||||
- Colorscheme scss file (`src/app/theme/sass/conf/colorScheme/_ng2.scss`, `src/app/theme/sass/conf/colorScheme/_mint.scss` and `src/app/theme/sass/conf/colorScheme/_blur.scss`)
|
||||
- `src/app/theme/theme.configProvider.js` to understand which javascript colors can be changed
|
||||
- If you want to know how to change the theme to blur, read the [following article](/ng2-admin/articles/014-switch-to-blur-theme/)
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 284 KiB |
76
docs/contents/articles/012-project-structure/index.md
Normal file
76
docs/contents/articles/012-project-structure/index.md
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
---
|
||||
title: Project Structure
|
||||
author: vl
|
||||
sort: 800
|
||||
group: Customization
|
||||
template: article.jade
|
||||
---
|
||||
|
||||
The project structure is originally based on [Angular2 Webpack Starter](https://github.com/AngularClass/angular2-webpack-starter#file-structure). We made some changes we thought would be better in our particular case.
|
||||
|
||||
The directory structure of this template is as follows:
|
||||
|
||||
```
|
||||
ng2-admin/
|
||||
├──config/ * webpack build configuration
|
||||
│ ├──head-config.common.js * configuration for head elements in index.html
|
||||
│ │
|
||||
│ ├──helpers.js * helper functions for our configuration files
|
||||
│ │
|
||||
│ ├──webpack.dev.js * development webpack config
|
||||
│ │
|
||||
│ ├──webpack.prod.js * production webpack config
|
||||
│ │
|
||||
│ ├──webpack.test.js * testing webpack config
|
||||
│ │
|
||||
│ ├──electron/ * electron webpack config
|
||||
│ │
|
||||
│ └──html-elements-plugin/ * html elements plugin
|
||||
│
|
||||
├──src/ * source files that will be compiled to javascript
|
||||
│ ├──custom-typings.d.ts * custom typings for third-party modules
|
||||
│ │
|
||||
│ ├──desktop.ts * electron window initialization
|
||||
│ │
|
||||
│ ├──index.html * application layout
|
||||
│ │
|
||||
│ ├──main.browser.ts * entry file for our browser environment
|
||||
│ │
|
||||
│ ├──package.json * electrons package.json
|
||||
│ │
|
||||
│ ├──polyfills.browser.ts * polyfills file
|
||||
│ │
|
||||
│ ├──vendor.browser.ts * vendors file
|
||||
│ │
|
||||
│ ├──app/ * application code - our working directory
|
||||
│ │ │
|
||||
│ │ ├──app.component.ts * main application component
|
||||
│ │ │
|
||||
│ │ │
|
||||
│ │ ├──app.menu.ts * menu pages routes
|
||||
│ │ │
|
||||
│ │ ├──app.module.ts * main application module
|
||||
│ │ │
|
||||
│ │ ├──app.routes.ts * application routes
|
||||
│ │ │
|
||||
│ │ ├──global.state.ts * global application state for data exchange between components
|
||||
│ │ │
|
||||
│ │ ├──environment.ts * environment provider
|
||||
│ │ │
|
||||
│ │ ├──app.scss * application styles
|
||||
│ │ │
|
||||
│ │ ├──pages/ * application pages components, place where you can create pages and fill them with components
|
||||
│ │ │
|
||||
│ │ └──theme/ * template global components/directives/pipes and styles
|
||||
│ │
|
||||
│ └──assets/ * static assets are served here
|
||||
│
|
||||
│
|
||||
├──tslint.json * typescript lint config
|
||||
├──typedoc.json * typescript documentation generator
|
||||
├──tsconfig.json * config that webpack uses for typescript
|
||||
└──package.json * what npm uses to manage it's dependencies
|
||||
```
|
||||
In our template we tried to separate the theme layer and presentation layer. We believe most of other templates
|
||||
have them combined. That's why when you start developing using them, it gets very hard for you to remove things you
|
||||
don't need.
|
||||
137
docs/contents/articles/013-create-new-page/index.md
Normal file
137
docs/contents/articles/013-create-new-page/index.md
Normal file
|
|
@ -0,0 +1,137 @@
|
|||
---
|
||||
title: Create New Page
|
||||
author: vl
|
||||
sort: 300
|
||||
group: Customization
|
||||
template: article.jade
|
||||
---
|
||||
|
||||
ng2-admin uses [Angular 2 Component Router](https://angular.io/docs/ts/latest/guide/router.html) for navigation.
|
||||
|
||||
We strongly recommend to follow this page structure in your application.
|
||||
If it does not fit your needs please create a GitHub issue and tell us why. We would be glad to discuss.
|
||||
|
||||
|
||||
Basically any page is just a common Angular 2 Component with a route defined for it.
|
||||
|
||||
## Let's create a blank page in 6 easy steps
|
||||
|
||||
1) Create a new directory for our new page inside of `src/app/pages`. We can call the directory `new`.
|
||||
<br><br>
|
||||
|
||||
2) Then let's create a blank angular 2 component for our page called 'new.component.ts' inside of `src/app/pages/new`:
|
||||
|
||||
```javascript
|
||||
import {Component} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'new',
|
||||
template: `<strong>My page content here</strong>`
|
||||
})
|
||||
export class NewComponent {
|
||||
constructor() {}
|
||||
}
|
||||
```
|
||||
This will create a simple Angular 2 component. For more detail please check out [official Angular 2 documentation](https://angular.io/docs/ts/latest/guide/displaying-data.html).
|
||||
<br><br>
|
||||
|
||||
3) After that we should create our component routing called `new.routing.ts` in the `new` directory.
|
||||
|
||||
```javascript
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
import { NewComponent } from './new.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
component: NewComponent
|
||||
}
|
||||
];
|
||||
|
||||
export const routing = RouterModule.forChild(routes);
|
||||
```
|
||||
<br>
|
||||
|
||||
4) And now we should create `new.module.ts` in `src/app/pages/new` directory and import `new.component.ts` and `new.routing.ts` in it.
|
||||
|
||||
```javascript
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { NewComponent } from './new.component';
|
||||
import { routing } from './new.routing';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
routing
|
||||
],
|
||||
declarations: [
|
||||
NewComponent
|
||||
]
|
||||
})
|
||||
export class NewModule {}
|
||||
```
|
||||
<br>
|
||||
|
||||
5) The penultimate thing we need to do is to declare a route in `src/app/pages/pages.menu.ts`.
|
||||
Typically all pages are children of the `/pages` route and defined under the `children` property of the root `pages` route like this:
|
||||
|
||||
```javascript
|
||||
export const PAGES_MENU = [
|
||||
{
|
||||
path: 'pages',
|
||||
children: [
|
||||
{
|
||||
path: 'new', // path for our page
|
||||
data: { // custom menu declaration
|
||||
menu: {
|
||||
title: 'New Page', // menu title
|
||||
icon: 'ion-android-home', // menu icon
|
||||
pathMatch: 'prefix', // use it if item children not displayed in menu
|
||||
selected: false,
|
||||
expanded: false,
|
||||
order: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'dashboard',
|
||||
data: {
|
||||
menu: {
|
||||
title: 'Dashboard',
|
||||
icon: 'ion-android-home',
|
||||
selected: false,
|
||||
expanded: false,
|
||||
order: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
```
|
||||
If you’d like to highlight menu item when current URL path partially match the menu item
|
||||
path - use pathMatch: ‘prefix’. In this case if the menu item has no children in the menu and
|
||||
you navigated to some child route - the item will be highlighted.
|
||||
<br><br>
|
||||
|
||||
6) And in the end let's import our component in `src/app/pages/pages.routing.ts` like this:
|
||||
|
||||
```javascript
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: 'pages',
|
||||
component: Pages,
|
||||
children: [
|
||||
{ path: '', redirectTo: 'dashboard', pathMatch: 'full' },
|
||||
{ path: 'dashboard', loadChildren: 'app/pages/dashboard/dashboard.module#DashboardModule' },
|
||||
{ path: 'new', loadChildren: 'app/pages/new/new.module#NewModule' }
|
||||
]
|
||||
}
|
||||
];
|
||||
```
|
||||
<br>
|
||||
|
||||
And that's it! Now your page is available by the following this url [http://localhost:3000/#/pages/new](http://localhost:3000/#/pages/new).
|
||||
Plus, your page is registered inside the sidebar menu. If you don't want to have a link
|
||||
in the menu - just remove the `menu` declaration from the `pages.menu.ts` file.
|
||||
85
docs/contents/articles/014-switch-to-blur-theme/index.md
Normal file
85
docs/contents/articles/014-switch-to-blur-theme/index.md
Normal file
|
|
@ -0,0 +1,85 @@
|
|||
---
|
||||
title: Enabling blur theme
|
||||
author: kd
|
||||
sort: 850
|
||||
group: Customization
|
||||
template: article.jade
|
||||
---
|
||||
|
||||
If you want to switch theme to the blur, you need to follow 3 simple steps:
|
||||
|
||||
1) Blur color scheme needs some javascript to calculate initial background offsets for panels.
|
||||
That's why we need to tell the system that we want to use blur theme by specifying this in `src/app/theme/theme.config.ts`:
|
||||
```javascript
|
||||
this._baConfig.changeTheme({name: 'blur'});
|
||||
```
|
||||
<br><br>
|
||||
|
||||
2) Also you need to change some colors.
|
||||
For our blur theme we use the following configuration in `src/app/theme/theme.config.ts`:
|
||||
```javascript
|
||||
let colorScheme = {
|
||||
primary: '#209e91',
|
||||
info: '#2dacd1',
|
||||
success: '#90b900',
|
||||
warning: '#dfb81c',
|
||||
danger: '#e85656',
|
||||
};
|
||||
this._baConfig.changeColors({
|
||||
default: '#4e4e55',
|
||||
defaultText: '#e2e2e2',
|
||||
border: '#dddddd',
|
||||
borderDark: '#aaaaaa',
|
||||
|
||||
primary: colorScheme.primary,
|
||||
info: colorScheme.info,
|
||||
success: colorScheme.success,
|
||||
warning: colorScheme.warning,
|
||||
danger: colorScheme.danger,
|
||||
|
||||
primaryLight: colorHelper.tint(colorScheme.primary, 30),
|
||||
infoLight: colorHelper.tint(colorScheme.info, 30),
|
||||
successLight: colorHelper.tint(colorScheme.success, 30),
|
||||
warningLight: colorHelper.tint(colorScheme.warning, 30),
|
||||
dangerLight: colorHelper.tint(colorScheme.danger, 30),
|
||||
|
||||
primaryDark: colorHelper.shade(colorScheme.primary, 15),
|
||||
infoDark: colorHelper.shade(colorScheme.info, 15),
|
||||
successDark: colorHelper.shade(colorScheme.success, 15),
|
||||
warningDark: colorHelper.shade(colorScheme.warning, 15),
|
||||
dangerDark: colorHelper.shade(colorScheme.danger, 15),
|
||||
|
||||
dashboard: {
|
||||
blueStone: '#005562',
|
||||
surfieGreen: '#0e8174',
|
||||
silverTree: '#6eba8c',
|
||||
gossip: '#b9f2a1',
|
||||
white: '#10c4b5',
|
||||
},
|
||||
});
|
||||
```
|
||||
<br><br>
|
||||
|
||||
3) CSS should also be recompiled.
|
||||
Before running build command, switch to *blur* color profile.
|
||||
To do so replace theme in `src/app/theme/sass/conf/conf.scss`:
|
||||
|
||||
```scss
|
||||
@import 'colorSchemes/ng2';
|
||||
```
|
||||
|
||||
to
|
||||
|
||||
```scss
|
||||
@import 'colorSchemes/blur';
|
||||
```
|
||||
|
||||
Additionaly, if you would like to use some different background, replace the following images:
|
||||
|
||||
- `src/assets/img/blur-bg.jpg` (main background image)
|
||||
- `src/assets/img/blur-bg-blurred.jpg` (blurred background image used on panels)
|
||||
|
||||
We suggest using 10px Gaussian blur to blur an original image.
|
||||
|
||||
<br><br>
|
||||
That's it! You have successfully blurred your theme! Run `npm start` and check it out.
|
||||
97
docs/contents/articles/015-sidebar/index.md
Normal file
97
docs/contents/articles/015-sidebar/index.md
Normal file
|
|
@ -0,0 +1,97 @@
|
|||
---
|
||||
title: Sidebar
|
||||
author: vl
|
||||
sort: 900
|
||||
group: Components
|
||||
template: article.jade
|
||||
---
|
||||
|
||||
The sidebar provides a convenient way to navigate the application.
|
||||
Only one sidebar is supported per angular application.
|
||||
This means that the sidebar is basically a singleton object.
|
||||
|
||||
The Sidebar can be added to the page using the `BaSidebar` component:
|
||||
```html
|
||||
<ba-sidebar></ba-sidebar>
|
||||
```
|
||||
|
||||
The sidebar contains a `<ba-menu></ba-menu>` component which defines and renders the application menu based on routes provided. Generally the `ba-menu` component can be used separately from `ba-sidebar`.
|
||||
All menu items information is defined inside the `data` property of a route.
|
||||
|
||||
## Menu Configuration
|
||||
|
||||
All menu items are located inside the `src/app/app.routes.ts` file. Each route item can have a `menu` property under `data` defining a menu item:
|
||||
|
||||
```javascript
|
||||
{
|
||||
// first, router configuration
|
||||
path: 'dashboard',
|
||||
component: Dashboard,
|
||||
data: {
|
||||
// here additionaly we define how the menu item should look
|
||||
menu: {
|
||||
title: 'Dashboard', // menu title
|
||||
icon: 'ion-android-home', // menu icon
|
||||
selected: false, // selected or not
|
||||
expanded: false, // expanded or not (if item has children)
|
||||
order: 0, // item order in the menu list,
|
||||
hidden: true // hide menu item from a list but keep related features (breadcrumbs, page title)
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
You also can define a list of sub-menu items like this:
|
||||
```javascript
|
||||
{
|
||||
// parent route
|
||||
path: 'charts',
|
||||
component: Charts,
|
||||
data: {
|
||||
|
||||
// parent menu configuration
|
||||
menu: {
|
||||
title: 'Charts',
|
||||
icon: 'ion-stats-bars',
|
||||
selected: false,
|
||||
expanded: false,
|
||||
order: 200,
|
||||
}
|
||||
},
|
||||
|
||||
// children routes
|
||||
children: [
|
||||
{
|
||||
path: 'chartist-js',
|
||||
component: ChartistJs,
|
||||
data: {
|
||||
|
||||
// children menu item configuration
|
||||
menu: {
|
||||
title: 'Chartist.Js',
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
# Custom menu items
|
||||
|
||||
You also can define a menu item not connected to any existing route in the application:
|
||||
|
||||
```javascript
|
||||
{
|
||||
path: '', // just leave the path empty
|
||||
data: {
|
||||
|
||||
// and define your menu item
|
||||
menu: {
|
||||
title: 'External Link', // title
|
||||
url: 'http://akveo.com', // custom url
|
||||
icon: 'ion-android-exit', // icon
|
||||
order: 800, // order
|
||||
target: '_blank' // target property of <a> tag (_self, _blank, etc)
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
61
docs/contents/articles/016-spinner/index.md
Normal file
61
docs/contents/articles/016-spinner/index.md
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
---
|
||||
title: Theme Spinner
|
||||
author: vl
|
||||
sort: 950
|
||||
group: Components
|
||||
template: article.jade
|
||||
---
|
||||
|
||||
Theme Spinner `BaThemeSpinner` is a small service helper allowing you to show a preloader spinner while
|
||||
executing some long-running tasks.
|
||||
This is the same spinner you can see after reloading a page - it is shown while the application is initializing Angular 2 and loading charts and images.
|
||||
|
||||
The user interface in quite simple: there are two public methods: `show` and `hide`.
|
||||
|
||||
Theme Spinner comes with another small helper called `BaThemePreloader`.
|
||||
This service is globally integrated into the application and connected to the spinner.
|
||||
|
||||
You can register any promise in any part of the application so that the spinner will be
|
||||
hidden only after your promise is completed (resolved).
|
||||
|
||||
You can find an example of usage inside of the `app.component.ts` file.
|
||||
Here we are registering a loader (`this._imageLoader.load` just returns a `Promise`) which loads a background image:
|
||||
```javascript
|
||||
BaThemePreloader.registerLoader(this._imageLoader.load(layoutPaths.images.root + 'blur-bg-mobile.jpg'));
|
||||
```
|
||||
|
||||
Then we are starting all the registered promises and once they all are done - hiding the spinner.
|
||||
```javascript
|
||||
BaThemePreloader.load().then((values) => {
|
||||
this._spinner.hide();
|
||||
});
|
||||
```
|
||||
|
||||
## Example
|
||||
You also can register a loader on any page you want.
|
||||
Say you have a long-running task on the Charts page (you need to receive some data from a web service) and you want the spinner to be shown while the data is loading.
|
||||
|
||||
First thing you need to do is to import BaThemePreloader service:
|
||||
|
||||
```javascript
|
||||
import {BaThemePreloader} from '../../../../theme/services';
|
||||
```
|
||||
|
||||
Then, say you have a method loading some data called `_loadData`, in our case we just mocked this method with `setTimeout` to emulate the loading process:
|
||||
```javascript
|
||||
private _loadData():Promise<any> {
|
||||
return new Promise((resolve, reject) => {
|
||||
setTimeout(() => {
|
||||
resolve();
|
||||
}, 4000);
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
Last thing you need to do is to register your loader:
|
||||
|
||||
```javascript
|
||||
BaThemePreloader.registerLoader(this._loadData());
|
||||
```
|
||||
|
||||
That's basically it! Once your data is loaded and all other registered loaders are completed - the spinner will be hidden.
|
||||
920
docs/contents/css/main.scss
Normal file
920
docs/contents/css/main.scss
Normal file
|
|
@ -0,0 +1,920 @@
|
|||
@mixin header {
|
||||
margin: 10px 0;
|
||||
font-family: inherit;
|
||||
font-weight: bold;
|
||||
color: inherit;
|
||||
text-rendering: optimizelegibility;
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: 'Source Sans Pro', sans-serif;
|
||||
color: #484848;
|
||||
line-height: 1.28
|
||||
}
|
||||
|
||||
body {
|
||||
position: relative;
|
||||
min-width: 1060px;
|
||||
}
|
||||
p {
|
||||
margin: 0 0 10px
|
||||
}
|
||||
|
||||
em {
|
||||
font-style: italic
|
||||
}
|
||||
|
||||
h1 {
|
||||
@include header;
|
||||
|
||||
line-height: 40px;
|
||||
font-size: 39px
|
||||
}
|
||||
|
||||
h2 {
|
||||
@include header;
|
||||
|
||||
line-height: 40px;
|
||||
margin-top: 30px;
|
||||
font-size: 31px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@include header;
|
||||
|
||||
line-height: 40px;
|
||||
font-size: 23px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
@include header;
|
||||
|
||||
line-height: 20px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h5 {
|
||||
@include header;
|
||||
|
||||
line-height: 40px;
|
||||
text-transform: uppercase;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
h6 {
|
||||
@include header;
|
||||
|
||||
line-height: 20px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
|
||||
h1 small {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
h2 small {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
h3 small {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h4 small {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
margin: 0 0 10px 25px;
|
||||
padding: 0
|
||||
}
|
||||
|
||||
ul ul, ul ol, ol ol, ol ul {
|
||||
margin-bottom: 0
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 20px
|
||||
}
|
||||
|
||||
a {
|
||||
color: #285eb8;
|
||||
text-decoration: none
|
||||
}
|
||||
|
||||
a:hover, a:focus {
|
||||
color: #234fb8;
|
||||
text-decoration: underline
|
||||
}
|
||||
|
||||
a:focus {
|
||||
outline: thin dotted #333;
|
||||
outline: 5px auto -webkit-focus-ring-color;
|
||||
outline-offset: -2px
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center
|
||||
}
|
||||
|
||||
body, pre {
|
||||
border: none;
|
||||
margin: 0;
|
||||
padding: 0
|
||||
}
|
||||
|
||||
html {
|
||||
background: #f9f9f9
|
||||
}
|
||||
|
||||
.browser-mockup {
|
||||
border-top: 2em solid #F3F3F3;
|
||||
position: relative;
|
||||
border-radius: 3px 3px 0 0
|
||||
}
|
||||
|
||||
.browser-mockup:before {
|
||||
display: block;
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: -1.25em;
|
||||
left: 1em;
|
||||
width: 0.5em;
|
||||
height: 0.5em;
|
||||
border-radius: 50%;
|
||||
background-color: #f44;
|
||||
box-shadow: 0 0 0 2px #f44, 1.5em 0 0 2px #9b3, 3em 0 0 2px #fb5;
|
||||
}
|
||||
|
||||
.browser-mockup a {
|
||||
display: block;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #ddd;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.left {
|
||||
float: left
|
||||
}
|
||||
|
||||
.right {
|
||||
float: right
|
||||
}
|
||||
|
||||
.container {
|
||||
padding-top: 50px;
|
||||
min-width: 1060px
|
||||
}
|
||||
|
||||
.wrap {
|
||||
width: 1060px;
|
||||
box-sizing: border-box;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.skinnyWrap {
|
||||
width: 690px;
|
||||
box-sizing: border-box;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 0;
|
||||
border-top: 1px solid #ccc;
|
||||
border-bottom: 1px solid #eee
|
||||
}
|
||||
|
||||
ul, li {
|
||||
margin-left: 20px
|
||||
}
|
||||
|
||||
li + li {
|
||||
margin-top: 10px
|
||||
}
|
||||
|
||||
h1 .anchor, h2 .anchor, h3 .anchor, h4 .anchor, h5 .anchor, h6 .anchor {
|
||||
margin-top: -50px;
|
||||
position: absolute
|
||||
}
|
||||
|
||||
h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-link, h5:hover .hash-link, h6:hover .hash-link {
|
||||
display: inline
|
||||
}
|
||||
|
||||
.hash-link {
|
||||
color: #aaa;
|
||||
display: none
|
||||
}
|
||||
|
||||
.nav-main {
|
||||
background: #222;
|
||||
color: #fafafa;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
height: 50px;
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
|
||||
width: 100%;
|
||||
z-index: 100
|
||||
}
|
||||
|
||||
.nav-main:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both
|
||||
}
|
||||
|
||||
.nav-main a {
|
||||
color: #e9e9e9;
|
||||
text-decoration: none
|
||||
}
|
||||
|
||||
.nav-main .nav-site-internal {
|
||||
margin: 0 0 0 20px
|
||||
}
|
||||
|
||||
.nav-main .nav-site-external {
|
||||
float: right;
|
||||
margin: 0
|
||||
}
|
||||
|
||||
.nav-main .nav-site li {
|
||||
margin: 0
|
||||
}
|
||||
|
||||
.nav-main .nav-site li > a {
|
||||
box-sizing: content-box;
|
||||
padding: 0 10px;
|
||||
line-height: 50px;
|
||||
display: inline-block;
|
||||
height: 50px;
|
||||
color: #ddd
|
||||
}
|
||||
|
||||
.nav-main .nav-site li > a:hover {
|
||||
color: #fff
|
||||
}
|
||||
|
||||
.nav-main .nav-site li > a.active {
|
||||
color: #fafafa;
|
||||
border-bottom: 3px solid #00abff;
|
||||
background: #333
|
||||
}
|
||||
|
||||
.nav-main .nav-home {
|
||||
color: #ffffff;
|
||||
font-size: 24px;
|
||||
line-height: 50px;
|
||||
height: 50px;
|
||||
display: inline-block
|
||||
}
|
||||
|
||||
.nav-main .nav-home .blur-label {
|
||||
color: #00abff;
|
||||
}
|
||||
|
||||
.nav-main .nav-logo {
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
margin-bottom: 9px;
|
||||
}
|
||||
|
||||
.nav-main ul {
|
||||
display: inline-block;
|
||||
vertical-align: top
|
||||
}
|
||||
|
||||
.nav-main li {
|
||||
display: inline
|
||||
}
|
||||
|
||||
.hero {
|
||||
padding-bottom: 75px;
|
||||
}
|
||||
|
||||
.hero .hero-content {
|
||||
color: #e9e9e9;
|
||||
font-weight: 300;
|
||||
background: #313131;
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
.hero .text {
|
||||
font-size: 64px;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.hero .minitext {
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
text-transform: uppercase
|
||||
}
|
||||
|
||||
.hero strong {
|
||||
color: #00abff;
|
||||
font-weight: 400
|
||||
}
|
||||
|
||||
.white-text {
|
||||
color: rgb(249, 249, 249);
|
||||
}
|
||||
|
||||
.hero .admin-screenshots {
|
||||
margin-top: 40px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.hero .admin-screenshot {
|
||||
width: 100%;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
padding: 0 15px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.admin-screenshot img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.demo-link {
|
||||
display: block;
|
||||
position: relative;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.demo-link:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 52px;
|
||||
background-image: linear-gradient(to bottom, transparent, rgb(249, 259, 249));
|
||||
}
|
||||
|
||||
.demo-link .demo-link-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
content: 'Demo';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: black;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
color: rgb(249, 249, 249);
|
||||
font-size: 32px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease-out;
|
||||
}
|
||||
|
||||
.demo-link:hover .demo-link-label {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.buttons-unit {
|
||||
margin-top: 60px;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.buttons-unit a {
|
||||
color: #61dafb
|
||||
}
|
||||
|
||||
.buttons-unit .button {
|
||||
font-size: 24px;
|
||||
background: #00abff;
|
||||
color: #fafafa;
|
||||
}
|
||||
|
||||
.buttons-unit .button:active, .buttons-unit .button:focus {
|
||||
background: #00abff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.index-block {
|
||||
padding: 40px 0;
|
||||
|
||||
&:nth-child(even) {
|
||||
background: #f2f2f2;
|
||||
}
|
||||
}
|
||||
|
||||
.centered {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.why-items {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: baseline;
|
||||
margin-top: 15px;
|
||||
padding-top: 15px;
|
||||
}
|
||||
|
||||
.why-item {
|
||||
flex: 33%;
|
||||
text-align: center;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.why-item img {
|
||||
width: 110px;
|
||||
}
|
||||
|
||||
.nav-docs {
|
||||
color: #2d2d2d;
|
||||
font-size: 14px;
|
||||
float: left;
|
||||
width: 210px
|
||||
}
|
||||
|
||||
.nav-docs ul {
|
||||
list-style: none;
|
||||
margin: 0
|
||||
}
|
||||
|
||||
.nav-docs ul ul {
|
||||
margin: 6px 0 0 20px
|
||||
}
|
||||
|
||||
.nav-docs li {
|
||||
line-height: 16px;
|
||||
margin: 0 0 6px
|
||||
}
|
||||
|
||||
.nav-docs a {
|
||||
color: #666;
|
||||
display: block
|
||||
}
|
||||
|
||||
.nav-docs a:hover {
|
||||
text-decoration: none;
|
||||
color: #285eb8
|
||||
}
|
||||
|
||||
.nav-docs a.active {
|
||||
color: #285eb8
|
||||
}
|
||||
|
||||
.nav-docs a.external:after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
padding-left: 5px;
|
||||
background: url("../img/external.png") 100% 0 no-repeat;
|
||||
font-size: 10px;
|
||||
line-height: 1em;
|
||||
opacity: 0.5
|
||||
}
|
||||
|
||||
@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 1.3 / 1), only screen and (min-resolution: 125dpi), only screen and (min-resolution: 1.3dppx) {
|
||||
.nav-docs a.external:after {
|
||||
background-image: url("../img/external_2x.png");
|
||||
background-size: 10px 10px
|
||||
}
|
||||
}
|
||||
|
||||
.nav-docs .nav-docs-section {
|
||||
border-bottom: 1px solid #ccc;
|
||||
border-top: 1px solid #eee;
|
||||
padding: 12px 0
|
||||
}
|
||||
|
||||
.nav-docs .nav-docs-section:first-child {
|
||||
padding-top: 0;
|
||||
border-top: 0
|
||||
}
|
||||
|
||||
.nav-docs .nav-docs-section:last-child {
|
||||
padding-bottom: 0;
|
||||
border-bottom: 0
|
||||
}
|
||||
|
||||
.nav-blog li {
|
||||
margin-bottom: 5px
|
||||
}
|
||||
|
||||
.nav-docs-right {
|
||||
display: block;
|
||||
float: right;
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
.nav-docs-right a {
|
||||
color: #00abff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nav-docs-right a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.home-section {
|
||||
margin: 50px 0
|
||||
}
|
||||
|
||||
.home-divider {
|
||||
border-top-color: #bbb;
|
||||
margin: 0 auto;
|
||||
width: 400px
|
||||
}
|
||||
|
||||
.skinny-row:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both
|
||||
}
|
||||
|
||||
.skinny-col {
|
||||
float: left;
|
||||
margin-left: 40px;
|
||||
width: 305px
|
||||
}
|
||||
|
||||
.skinny-col:first-child {
|
||||
margin-left: 0
|
||||
}
|
||||
|
||||
.marketing-row {
|
||||
margin: 50px 0
|
||||
}
|
||||
|
||||
.marketing-row:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both
|
||||
}
|
||||
|
||||
.marketing-col {
|
||||
float: left;
|
||||
margin-left: 40px;
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
.marketing-col p {
|
||||
font-size: 16px
|
||||
}
|
||||
|
||||
.marketing-col:first-child {
|
||||
margin-left: 0
|
||||
}
|
||||
|
||||
.home-bottom-section {
|
||||
margin-bottom: 100px
|
||||
}
|
||||
|
||||
.docs-nextprev:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both
|
||||
}
|
||||
|
||||
.jsxCompiler {
|
||||
margin: 0 auto;
|
||||
padding-top: 20px;
|
||||
width: 1220px
|
||||
}
|
||||
|
||||
.jsxCompiler .compiler-option {
|
||||
display: block;
|
||||
margin-top: 5px
|
||||
}
|
||||
|
||||
.jsxCompiler .playgroundPreview {
|
||||
padding: 0;
|
||||
width: 600px;
|
||||
word-wrap: break-word
|
||||
}
|
||||
|
||||
.jsxCompiler .playgroundPreview pre {
|
||||
font-family: 'source-code-pro', Menlo, Consolas, 'Courier New', monospace;
|
||||
font-size: 13px;
|
||||
line-height: 1.5
|
||||
}
|
||||
|
||||
.jsxCompiler .playgroundError {
|
||||
padding: 15px 20px
|
||||
}
|
||||
|
||||
.docs-prev {
|
||||
float: left
|
||||
}
|
||||
|
||||
.docs-next {
|
||||
float: right
|
||||
}
|
||||
|
||||
footer {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
margin-top: 66px;
|
||||
margin-bottom: 18px;
|
||||
overflow: auto
|
||||
}
|
||||
|
||||
.blogContent {
|
||||
padding-top: 20px
|
||||
}
|
||||
|
||||
.blogContent:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both
|
||||
}
|
||||
|
||||
.blogContent blockquote {
|
||||
padding: 5px 15px;
|
||||
margin: 20px 0;
|
||||
background-color: #f8f5ec;
|
||||
border-left: 5px solid #f7ebc6
|
||||
}
|
||||
|
||||
.blogContent code {
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
color: #555;
|
||||
background-color: black;
|
||||
background-color: rgba(0, 0, 0, 0.04)
|
||||
}
|
||||
|
||||
.documentationContent {
|
||||
padding-top: 20px
|
||||
}
|
||||
|
||||
.documentationContent:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both
|
||||
}
|
||||
|
||||
.documentationContent blockquote {
|
||||
padding: 15px 30px 15px 15px;
|
||||
margin: 20px 0;
|
||||
background-color: black;
|
||||
background-color: rgba(204, 122, 111, 0.1);
|
||||
border-left: 5px solid black;
|
||||
border-left: 5px solid rgba(191, 87, 73, 0.2);
|
||||
}
|
||||
|
||||
.documentationContent blockquote p {
|
||||
margin-bottom: 0
|
||||
}
|
||||
|
||||
.documentationContent blockquote p:first-child {
|
||||
font-weight: bold;
|
||||
font-size: 17.5px;
|
||||
line-height: 20px;
|
||||
margin-top: 0;
|
||||
text-rendering: optimizelegibility
|
||||
}
|
||||
|
||||
.docs-prevnext {
|
||||
padding-top: 40px;
|
||||
padding-bottom: 40px
|
||||
}
|
||||
|
||||
.button {
|
||||
background: -webkit-linear-gradient(#9a9a9a, #646464);
|
||||
background: -moz-linear-gradient(#9a9a9a, #646464);
|
||||
background: -ms-linear-gradient(#9a9a9a, #646464);
|
||||
background: -o-linear-gradient(#9a9a9a, #646464);
|
||||
background: -webkit-gradient(#9a9a9a, #646464);
|
||||
background: linear-gradient(#9a9a9a, #646464);
|
||||
border-radius: 4px;
|
||||
padding: 8px 16px;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
margin: 0 12px;
|
||||
display: inline-block;
|
||||
color: #fafafa;
|
||||
text-decoration: none;
|
||||
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
text-decoration: none
|
||||
}
|
||||
|
||||
.button:active {
|
||||
box-shadow: none
|
||||
}
|
||||
|
||||
.hero .button {
|
||||
box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.3)
|
||||
}
|
||||
|
||||
.row {
|
||||
padding-bottom: 4px
|
||||
}
|
||||
|
||||
.row .span4 {
|
||||
width: 33.33%;
|
||||
display: table-cell
|
||||
}
|
||||
|
||||
.row .span8 {
|
||||
width: 66.66%;
|
||||
display: table-cell
|
||||
}
|
||||
|
||||
.row .span6 {
|
||||
width: 50%;
|
||||
display: table-cell
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 10px 0
|
||||
}
|
||||
|
||||
.highlight {
|
||||
padding: 10px;
|
||||
margin-bottom: 20px
|
||||
}
|
||||
|
||||
figure {
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.inner-content {
|
||||
float: right;
|
||||
width: 650px
|
||||
}
|
||||
|
||||
.nosidebar .inner-content {
|
||||
float: none;
|
||||
margin: 0 auto
|
||||
}
|
||||
|
||||
.inner-content img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.inner-content table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.inner-content th, .inner-content td {
|
||||
padding: 0.25rem;
|
||||
text-align: left;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.inner-content tbody tr:nth-child(odd) {
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
h1:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both
|
||||
}
|
||||
|
||||
.edit-page-link {
|
||||
float: right;
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
line-height: 20px;
|
||||
margin-top: 17px
|
||||
}
|
||||
|
||||
.post-list-item + .post-list-item {
|
||||
margin-top: 60px
|
||||
}
|
||||
|
||||
/* code styling */
|
||||
|
||||
code {
|
||||
font-family: 'Anonymous Pro', sans-serif;
|
||||
font-size: 0.85em;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
pre code {
|
||||
display: block;
|
||||
line-height: 1.1;
|
||||
color: #333333;
|
||||
background: #f8f5ec;
|
||||
padding: 30px 14px 14px;
|
||||
position: relative;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
pre code:before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
padding: 3px 7px;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
color: #c2c0bc;
|
||||
background-color: #f1ede4;
|
||||
content: "Code";
|
||||
}
|
||||
|
||||
p code {
|
||||
padding: 0.1em 0.3em 0.2em;
|
||||
border-radius: 0.3em;
|
||||
position: relative;
|
||||
background: #fffff3;
|
||||
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* syntax hl stuff */
|
||||
|
||||
code.lang-markdown {
|
||||
color: #424242;
|
||||
}
|
||||
|
||||
code.lang-markdown .header,
|
||||
code.lang-markdown .strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
code.lang-markdown .emphasis {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
code.lang-markdown .horizontal_rule,
|
||||
code.lang-markdown .link_label,
|
||||
code.lang-markdown .code,
|
||||
code.lang-markdown .header,
|
||||
code.lang-markdown .link_url {
|
||||
color: #555;
|
||||
}
|
||||
|
||||
code.lang-markdown .blockquote,
|
||||
code.lang-markdown .bullet {
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
/* Tomorrow Theme */
|
||||
/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
|
||||
/* Original theme - https://github.com/chriskempson/tomorrow-theme */
|
||||
/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
|
||||
.tomorrow-comment, pre .comment, pre .title {
|
||||
color: #8e908c;
|
||||
}
|
||||
|
||||
.tomorrow-red, pre .variable, pre .attribute, pre .tag, pre .regexp, pre .ruby .constant, pre .xml .tag .title, pre .xml .pi, pre .xml .doctype, pre .html .doctype, pre .css .id, pre .css .class, pre .css .pseudo {
|
||||
color: #c82829;
|
||||
}
|
||||
|
||||
.tomorrow-orange, pre .number, pre .preprocessor, pre .built_in, pre .literal, pre .params, pre .constant {
|
||||
color: #f5871f;
|
||||
}
|
||||
|
||||
.tomorrow-yellow, pre .class, pre .ruby .class .title, pre .css .rules .attribute {
|
||||
color: #eab700;
|
||||
}
|
||||
|
||||
.tomorrow-green, pre .string, pre .value, pre .inheritance, pre .header, pre .ruby .symbol, pre .xml .cdata {
|
||||
color: #718c00;
|
||||
}
|
||||
|
||||
.tomorrow-aqua, pre .css .hexcolor {
|
||||
color: #3e999f;
|
||||
}
|
||||
|
||||
.tomorrow-blue, pre .function, pre .python .decorator, pre .python .title, pre .ruby .function .title, pre .ruby .title .keyword, pre .perl .sub, pre .javascript .title, pre .coffeescript .title {
|
||||
color: #4271ae;
|
||||
}
|
||||
|
||||
.tomorrow-purple, pre .keyword, pre .javascript .function {
|
||||
color: #8959a8;
|
||||
}
|
||||
|
||||
/* media queries */
|
||||
|
||||
@media screen and (max-width: 960px) {
|
||||
.nav-main {
|
||||
position: static
|
||||
}
|
||||
|
||||
.container {
|
||||
padding-top: 0
|
||||
}
|
||||
}
|
||||
BIN
docs/contents/images/favicon.png
Normal file
BIN
docs/contents/images/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
docs/contents/images/logo.png
Normal file
BIN
docs/contents/images/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
docs/contents/images/sky-preview.png
Normal file
BIN
docs/contents/images/sky-preview.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
1
docs/contents/images/why-design.svg
Normal file
1
docs/contents/images/why-design.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" ?><!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.0//EN' 'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'><svg height="110px" style="enable-background:new 0 0 110 110;" version="1.0" viewBox="0 0 110 110" width="110px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Artboard"/><g id="Multicolor"><circle cx="55" cy="55" r="55" style="fill:#00abff;"/><g><g><path d="M81.937,24.303C81.205,23.507,80.166,23,79,23H31c-2.209,0-4,1.791-4,4v56c0,2.209,1.791,4,4,4h48 c2.209,0,4-1.791,4-4V27C83,25.957,82.591,25.015,81.937,24.303z" style="fill:#F0F1F1;"/></g><g><path d="M31,29c0-1.104,0.895-2,2-2h12c1.105,0,2,0.896,2,2v30.239l4.436-4.436 C51.179,54.623,51,54.338,51,54V44c0-0.552,0.448-1,1-1h10c0.338,0,0.622,0.179,0.803,0.436l4.632-4.632 C67.179,38.623,67,38.338,67,38V28c0-0.552,0.448-1,1-1h10c0.338,0,0.622,0.179,0.803,0.436l3.133-3.133 C81.205,23.507,80.166,23,79,23H31c-2.209,0-4,1.791-4,4v52.239l4-4V29z M51,28c0-0.552,0.448-1,1-1h10c0.552,0,1,0.448,1,1v10 c0,0.552-0.448,1-1,1H52c-0.552,0-1-0.448-1-1V28z" style="fill:#FFFFFF;"/></g><g><path d="M45,27H33c-1.105,0-2,0.896-2,2v46.239V81c0,1.104,0.895,2,2,2h12c1.105,0,2-0.896,2-2V59.239V29 C47,27.896,46.105,27,45,27z" style="fill:#F4D0A1;"/></g><g><path d="M45,27H33c-1.105,0-2,0.896-2,2v46.239l16-16V29C47,27.896,46.105,27,45,27z" style="fill:#F8E1C2;"/></g><g><path d="M52,39h10c0.552,0,1-0.448,1-1V28c0-0.552-0.448-1-1-1H52c-0.552,0-1,0.448-1,1v10 C51,38.552,51.448,39,52,39z" style="fill:#F79392;"/></g><g><path d="M78.803,27.436C78.622,27.179,78.338,27,78,27H68c-0.552,0-1,0.448-1,1v10 c0,0.338,0.179,0.623,0.436,0.803C67.598,38.918,67.786,39,68,39h10c0.552,0,1-0.448,1-1V28 C79,27.786,78.918,27.599,78.803,27.436z" style="fill:#FACB1B;"/></g><g><path d="M78,27H68c-0.552,0-1,0.448-1,1v10c0,0.338,0.179,0.623,0.436,0.803l11.368-11.368 C78.622,27.179,78.338,27,78,27z" style="fill:#FBE158;"/></g><g><path d="M62.803,43.436C62.622,43.179,62.338,43,62,43H52c-0.552,0-1,0.448-1,1v10 c0,0.338,0.179,0.623,0.436,0.803C51.598,54.918,51.786,55,52,55h10c0.552,0,1-0.448,1-1V44 C63,43.786,62.918,43.599,62.803,43.436z" style="fill:#12B2A0;"/></g><g><path d="M62,43H52c-0.552,0-1,0.448-1,1v10c0,0.338,0.179,0.623,0.436,0.803l11.368-11.368 C62.622,43.179,62.338,43,62,43z" style="fill:#47C4B7;"/></g><g><path d="M39,43h-4v4l1.876,30.024C36.946,78.135,37.867,79,38.98,79H39h0.02 c1.113,0,2.034-0.865,2.104-1.976L43,47v-4H39z" style="fill:#84462D;"/></g><g><path d="M35,43v4l1.876,30.024C36.946,78.135,37.867,79,38.98,79H39V43H35z" style="fill:#9C6144;"/></g><g><path d="M79,54c0,0.552-0.448,1-1,1H68c-0.552,0-1-0.448-1-1V44c0-0.552,0.448-1,1-1h10 c0.552,0,1,0.448,1,1V54z" style="fill:#47C4B7;"/></g><g><path d="M63,70c0,0.552-0.448,1-1,1H52c-0.552,0-1-0.448-1-1V60c0-0.552,0.448-1,1-1h10 c0.552,0,1,0.448,1,1V70z" style="fill:#40C9E7;"/></g><g><path d="M79,70c0,0.552-0.448,1-1,1H68c-0.552,0-1-0.448-1-1V60c0-0.552,0.448-1,1-1h10 c0.552,0,1,0.448,1,1V70z" style="fill:#40C9E7;"/></g><g><path d="M79,82c0,0.552-0.448,1-1,1H52c-0.552,0-1-0.448-1-1v-6c0-0.552,0.448-1,1-1h26 c0.552,0,1,0.448,1,1V82z" style="fill:#F4D0A1;"/></g><g><path d="M39,30L39,30c0,0-5,5.687-5,9c0,1.851,0.713,3.175,1.811,4H39h3.189 C43.287,42.175,44,40.851,44,39C44,35.687,39.001,30.001,39,30z" style="fill:#3E3E3F;"/></g><g><path d="M34,39c0,1.851,0.713,3.175,1.811,4H39V30h0C39,30,34,35.687,34,39z" style="fill:#5B5C5F;"/></g><g><polygon points="39,43 35,43 35,47 39,47 43,47 43,43 " style="fill:#F3B607;"/></g><g><polygon points="35.811,43 35,43 35,47 39,47 39,43 " style="fill:#FACB1B;"/></g></g></g></svg>
|
||||
|
After Width: | Height: | Size: 3.6 KiB |
1
docs/contents/images/why-practices.svg
Normal file
1
docs/contents/images/why-practices.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 9.6 KiB |
1
docs/contents/images/why-structure.svg
Normal file
1
docs/contents/images/why-structure.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" ?><!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.0//EN' 'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'><svg height="110px" style="enable-background:new 0 0 110 110;" version="1.0" viewBox="0 0 110 110" width="110px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Artboard"/><g id="Multicolor"><circle cx="55" cy="55" r="55" style="fill:#00abff;"/><g><g><path d="M23,26.84c0-2.121,1.719-3.84,3.84-3.84H55l16,13.44v46.72c0,2.121-1.719,3.84-3.84,3.84H26.84 C24.719,87,23,85.281,23,83.16V26.84z" style="fill:#FFFFFF;"/><path d="M55,23v9.6c0,2.121,1.719,3.84,3.84,3.84H71L55,23z" style="fill:#F0F1F1;"/></g><path d="M52,70h10c0.551,0,1-0.448,1-1v-5c0-0.552-0.449-1-1-1H52c-0.551,0-1,0.448-1,1v5 C51,69.552,51.449,70,52,70z" style="fill:#E2E4E5;"/><path d="M62,72H52c-1.654,0-3-1.346-3-3v-5c0-1.654,1.346-3,3-3h10c1.654,0,3,1.346,3,3v5 C65,70.654,63.654,72,62,72z M52,63c-0.551,0-1,0.448-1,1v5c0,0.552,0.449,1,1,1h10c0.551,0,1-0.448,1-1v-5c0-0.552-0.449-1-1-1 H52z" style="fill:#B6BCBD;"/><path d="M30,70h10c0.551,0,1-0.448,1-1v-5c0-0.552-0.449-1-1-1H30c-0.551,0-1,0.448-1,1v5 C29,69.552,29.449,70,30,70z" style="fill:#E2E4E5;"/><path d="M40,72H30c-1.654,0-3-1.346-3-3v-5c0-1.654,1.346-3,3-3h10c1.654,0,3,1.346,3,3v5 C43,70.654,41.654,72,40,72z M30,63c-0.551,0-1,0.448-1,1v5c0,0.552,0.449,1,1,1h10c0.551,0,1-0.448,1-1v-5c0-0.552-0.449-1-1-1 H30z" style="fill:#B6BCBD;"/><path d="M41,50h10c0.551,0,1-0.448,1-1v-5c0-0.552-0.449-1-1-1H41c-0.551,0-1,0.448-1,1v5 C40,49.552,40.449,50,41,50z" style="fill:#9CE5F4;"/><g><polygon points="50.272,52 48.014,52 52.728,61 54.986,61 " style="fill:#CFD3D4;"/></g><g><polygon points="41.728,52 37.014,61 39.272,61 43.986,52 " style="fill:#CFD3D4;"/></g><path d="M51,52H41c-1.654,0-3-1.346-3-3v-5c0-1.654,1.346-3,3-3h10c1.654,0,3,1.346,3,3v5 C54,50.654,52.654,52,51,52z M41,43c-0.551,0-1,0.448-1,1v5c0,0.552,0.449,1,1,1h10c0.551,0,1-0.448,1-1v-5c0-0.552-0.449-1-1-1 H41z" style="fill:#40C9E7;"/><g><path d="M84.144,57.498L62.941,81.466l-5.877,1.21c-0.17-0.818-0.593-1.593-1.267-2.189 c-0.674-0.596-1.495-0.922-2.328-0.991l0.484-5.981l21.203-23.967L84.144,57.498z" style="fill:#F4D0A1;"/></g><g><path d="M84.115,57.473c0.016,0.014,0.017,0.038,0.003,0.054L63.397,80.95 c-0.033,0.038-0.086-0.002-0.062-0.047c0.651-1.2,0.414-2.728-0.653-3.672c-1.126-0.996-2.785-0.995-3.905-0.062 c-0.032,0.027-0.075-0.011-0.052-0.046c0.79-1.225,0.589-2.871-0.537-3.868c-1.079-0.955-2.648-0.993-3.762-0.173 c-0.036,0.027-0.077-0.015-0.047-0.049l20.752-23.458c0.014-0.016,0.038-0.017,0.054-0.003L84.115,57.473z" style="fill:#059BBF;"/></g><g><rect height="2" style="fill:#FACB1B;" transform="matrix(0.749 0.6626 -0.6626 0.749 55.1274 -39.9673)" width="12" x="74.313" y="51.774"/></g><g><path d="M84.996,47.571l-0.09-0.08c-2.457-2.174-6.211-1.944-8.385,0.513l-0.04,0.045L85.469,56 l0.04-0.045C87.683,53.498,87.453,49.744,84.996,47.571z" style="fill:#F79392;"/></g><g><path d="M84.119,57.527L63.371,80.979c-0.03,0.034-0.077-0.002-0.055-0.042 c0.674-1.205,0.444-2.753-0.634-3.707c-1.124-0.994-2.777-0.995-3.897-0.068c-0.019,0.015-0.041-0.008-0.025-0.026l20.865-23.586 c0.014-0.016,0.038-0.017,0.053-0.003l4.437,3.925C84.131,57.487,84.133,57.511,84.119,57.527z" style="fill:#0484AB;"/></g><g><path d="M57.064,82.675l-3.918,0.807l0.323-3.987c0.833,0.069,1.654,0.395,2.328,0.991 C56.471,81.082,56.894,81.857,57.064,82.675z" style="fill:#3E3E3F;"/></g></g></g></svg>
|
||||
|
After Width: | Height: | Size: 3.4 KiB |
4
docs/contents/index.json
Normal file
4
docs/contents/index.json
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"template": "index.jade",
|
||||
"activeHome": true
|
||||
}
|
||||
10
docs/package.json
Normal file
10
docs/package.json
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
{
|
||||
"dependencies": {
|
||||
"moment": "2.3.x",
|
||||
"typogr": "0.5.x",
|
||||
"underscore": "1.4.x",
|
||||
"wintersmith": "2.3.1",
|
||||
"wintersmith-sassy": "^1.0.0"
|
||||
},
|
||||
"private": true
|
||||
}
|
||||
44
docs/plugins/paginator.coffee
Normal file
44
docs/plugins/paginator.coffee
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
|
||||
module.exports = (env, callback) ->
|
||||
### Paginator plugin. Defaults can be overridden in config.json
|
||||
e.g. "paginator": {"perPage": 10} ###
|
||||
|
||||
defaults =
|
||||
template: 'index.jade' # template that renders pages
|
||||
articles: 'articles' # directory containing contents to paginate
|
||||
first: 'index.html' # filename/url for first page
|
||||
filename: 'page/%d/index.html' # filename for rest of pages
|
||||
perPage: 2 # number of articles per page
|
||||
groupSort: {}
|
||||
|
||||
# assign defaults any option not set in the config file
|
||||
options = env.config.paginator or {}
|
||||
for key, value of defaults
|
||||
options[key] ?= defaults[key]
|
||||
|
||||
getArticles = (contents) ->
|
||||
# helper that returns a list of articles found in *contents*
|
||||
# note that each article is assumed to have its own directory in the articles directory
|
||||
articles = contents[options.articles]._.directories.map (item) -> item.index
|
||||
# skip articles that does not have a template associated
|
||||
articles = articles.filter (item) -> item.template isnt 'none'
|
||||
# sort article by date
|
||||
articles.sort (a, b) -> b.metadata.sort - a.metadata.sort
|
||||
groupedArticlesObj = articles.reduce (acc, curr) ->
|
||||
groupName = curr.metadata.group
|
||||
if not acc[groupName]
|
||||
acc[groupName] =
|
||||
groupName: groupName
|
||||
items: []
|
||||
acc[groupName].items.push curr
|
||||
return acc
|
||||
, {}
|
||||
groupedArticles = (val for key, val of groupedArticlesObj)
|
||||
groupedArticles.sort (a, b) -> (options.groupSort[b.groupName] || 0) - (options.groupSort[a.groupName] || 0)
|
||||
return groupedArticles
|
||||
|
||||
# add the article helper to the environment so we can use it later
|
||||
env.helpers.getGroupedArticles = getArticles
|
||||
|
||||
# tell the plugin manager we are done
|
||||
callback()
|
||||
21
docs/templates/article.jade
vendored
Normal file
21
docs/templates/article.jade
vendored
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
|
||||
extends layout
|
||||
|
||||
block title
|
||||
| ng2-admin documentation - #{page.title]
|
||||
|
||||
block content
|
||||
section.content.wrap.documentationContent
|
||||
div.nav-docs
|
||||
each group in groupedArticles
|
||||
div.nav-docs.section
|
||||
h5=group.groupName
|
||||
ul
|
||||
each article in group.items
|
||||
li
|
||||
a(href=article.url)(class= locals.page === article ? 'active': '')= article.title
|
||||
div.inner-content
|
||||
h1=locals.page.title
|
||||
div.subHeader
|
||||
!= typogr(page.html).typogrify()
|
||||
|
||||
59
docs/templates/index.jade
vendored
Normal file
59
docs/templates/index.jade
vendored
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
|
||||
extends layout
|
||||
|
||||
block title
|
||||
| Admin HTML template based on Angular 2, Bootstrap 4 and Webpack
|
||||
|
||||
block content
|
||||
div.hero
|
||||
div.hero-content
|
||||
div.wrap
|
||||
div.text
|
||||
strong ng2-#[span.white-text admin]
|
||||
div.minitext Angular 2 admin panel front-end framework
|
||||
div.buttons-unit
|
||||
a.button(href=installationArticleUrl) Installation guidelines
|
||||
a.button(href=firstArticleUrl) Documentation
|
||||
div.admin-screenshots
|
||||
div.admin-screenshot
|
||||
div.browser-mockup
|
||||
a.demo-link(href='http://akveo.com/ng2-admin/',target='_blank')
|
||||
img(src=contents.images['sky-preview.png'].url)
|
||||
span.demo-link-label Demo
|
||||
div.index-block
|
||||
div.wrap
|
||||
h1.centered Why ng2-admin?
|
||||
div.why-items
|
||||
div.why-item
|
||||
img(src=contents.images['why-structure.svg'].url)
|
||||
h4 Awesome structure
|
||||
p Component-based structure is the best choice for large Angular 2 applications.
|
||||
div.why-item
|
||||
img(src=contents.images['why-design.svg'].url)
|
||||
h4 Neat design
|
||||
p We have put a lot of effort and carefully selected each color and font for this template!
|
||||
div.why-item
|
||||
img(src=contents.images['why-practices.svg'].url)
|
||||
h4 Ease of customization
|
||||
p Check out #[a(href='/ng2-admin/articles/011-changing-color-scheme') our article], where we describe how you can create a different look in just 2 minutes!
|
||||
div.index-block
|
||||
div.wrap
|
||||
h1.centered Is it free?
|
||||
p Yes, ng2-admin is completely free and MIT licensed. That means you can do with it whatever you want.
|
||||
|
||||
div.index-block
|
||||
div.wrap
|
||||
h1.centered How can I support you guys?
|
||||
p Here's what you can do:
|
||||
ul
|
||||
li Star #[a(href='https://github.com/akveo/ng2-admin',target='_blank') our GitHub repo]
|
||||
li Create pull requests, submit bugs, suggest new features
|
||||
li Follow #[a(href='https://twitter.com/akveo_inc',target='_blank') us on Twitter]
|
||||
li Like #[a(href='https://www.facebook.com/akveo/',target='_blank') our page on Facebook]
|
||||
div.index-block
|
||||
div.wrap
|
||||
h1.centered Can I hire you?
|
||||
p Yes! We are available for hire. Visit #[a(href='http://akveo.com',target='_blank') our homepage]
|
||||
| or simply leave us a note at #[a(href='mailto:contact@akveo.com') contact@akveo.com].
|
||||
| We will be happy to work with you!
|
||||
|
||||
44
docs/templates/layout.jade
vendored
Normal file
44
docs/templates/layout.jade
vendored
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
doctype html
|
||||
block vars
|
||||
- var bodyclass = null;
|
||||
- var groupedArticles = env.helpers.getGroupedArticles(contents);
|
||||
- var firstArticleUrl = groupedArticles[0].items[0].url
|
||||
- var installationArticleUrl = groupedArticles[0].items[1].url
|
||||
html(lang='en')
|
||||
head
|
||||
block head
|
||||
meta(charset='utf-8')
|
||||
meta(http-equiv='X-UA-Compatible', content='IE=edge,chrome=1')
|
||||
meta(name='viewport', content='width=device-width')
|
||||
meta(name='keywords', content='admin,dashboard,template,angular,bootstrap,blur,panel,html,css,javascript')
|
||||
title
|
||||
block title
|
||||
= locals.name
|
||||
link(rel='alternate', href=locals.url+'/feed.xml', type='application/rss+xml', title=locals.description)
|
||||
link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900|Anonymous+Pro:400,700,400italic,700italic&subset=latin,greek,greek-ext,vietnamese,cyrillic-ext,latin-ext,cyrillic')
|
||||
link(rel='stylesheet', href='https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.0/gh-fork-ribbon.min.css')
|
||||
|
||||
link(rel='stylesheet', href=contents.css['main.scss'].url)
|
||||
link(rel='shortcut icon', href=contents.images['favicon.png'].url)
|
||||
body(class=bodyclass)
|
||||
div.container
|
||||
div.nav-main
|
||||
div.wrap
|
||||
a.nav-home(href=contents['index'].url)
|
||||
img.nav-logo(src=contents.images['logo.png'].url, width=24,height=24)
|
||||
| #[span.blur-label ng2-]admin
|
||||
ul.nav-site.nav-site-internal
|
||||
li
|
||||
a(class= locals.page.metadata.activeHome ? 'active': '')(href=contents['index'].url) Home
|
||||
li
|
||||
a(class= !locals.page.metadata.activeHome ? 'active': '')(href=firstArticleUrl) Docs
|
||||
span.nav-docs-right
|
||||
| Need some help? Let us know! #[a(href='mailto:contact@akveo.com') contact@akveo.com]
|
||||
block content
|
||||
h2 Welcome to blur admin!
|
||||
footer.wrap
|
||||
div.left Powered by Angular 2, Bootstrap 4, Webpack and many more...
|
||||
div.right
|
||||
| © 2015–2016 Akveo LLC<br />
|
||||
| Documentation licensed under #[a(href='https://creativecommons.org/licenses/by/4.0/') CC BY 4.0].
|
||||
a(href='https://github.com/akveo/ng2-admin', class='github-fork-ribbon', title="Star & Fork on GitHub")
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
import { Ng2AdminCLIPage } from './app.po';
|
||||
|
||||
describe('ng2-admin-cli App', () => {
|
||||
let page: Ng2AdminCLIPage;
|
||||
|
||||
beforeEach(() => {
|
||||
page = new Ng2AdminCLIPage();
|
||||
});
|
||||
|
||||
it('should display message saying app works', () => {
|
||||
page.navigateTo();
|
||||
expect(page.getParagraphText()).toEqual('app works!');
|
||||
});
|
||||
});
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
import { browser, element, by } from 'protractor';
|
||||
|
||||
export class Ng2AdminCLIPage {
|
||||
navigateTo() {
|
||||
return browser.get('/');
|
||||
}
|
||||
|
||||
getParagraphText() {
|
||||
return element(by.css('app-root h1')).getText();
|
||||
}
|
||||
}
|
||||
73
package.json
73
package.json
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "ng2-admin-cli",
|
||||
"version": "0.0.0",
|
||||
"name": "ng2-admin",
|
||||
"version": "0.9.0",
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"ng": "ng",
|
||||
|
|
@ -19,10 +19,12 @@
|
|||
"pree2e": "webdriver-manager update --standalone false --gecko false",
|
||||
"e2e": "ng e2e",
|
||||
"clean:dist": "npm run rimraf -- dist",
|
||||
"clean:coverage": "npm run rimraf -- coverage"
|
||||
"clean:coverage": "npm run rimraf -- coverage",
|
||||
"gh-pages": "wintersmith build -C docs && gh-pages -d docs/build"
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "4.0.1",
|
||||
"@angular/common": "4.0.1",
|
||||
"@angular/compiler": "4.0.1",
|
||||
"@angular/core": "4.0.1",
|
||||
|
|
@ -31,10 +33,7 @@
|
|||
"@angular/platform-browser": "4.0.1",
|
||||
"@angular/platform-browser-dynamic": "4.0.1",
|
||||
"@angular/router": "4.0.1",
|
||||
"@angularclass/conventions-loader": "1.0.13",
|
||||
"@angularclass/hmr": "1.2.2",
|
||||
"@angularclass/hmr-loader": "3.0.2",
|
||||
"@ng-bootstrap/ng-bootstrap": "1.0.0-alpha.22",
|
||||
"@ng-bootstrap/ng-bootstrap": "1.0.0-alpha.23",
|
||||
"@ngx-translate/core": "6.0.1",
|
||||
"@ngx-translate/http-loader": "0.0.3",
|
||||
"amcharts3": "github:amcharts/amcharts3",
|
||||
|
|
@ -49,8 +48,6 @@
|
|||
"font-awesome": "4.7.0",
|
||||
"fullcalendar": "3.3.1",
|
||||
"google-maps": "3.2.1",
|
||||
"http-server": "0.9.0",
|
||||
"ie-shim": "0.1.0",
|
||||
"ionicons": "2.0.1",
|
||||
"is-electron-renderer": "2.0.1",
|
||||
"jquery": "3.2.1",
|
||||
|
|
@ -64,91 +61,43 @@
|
|||
"ng2-tree": "2.0.0-alpha.5",
|
||||
"ngx-uploader": "2.2.5",
|
||||
"normalize.css": "6.0.0",
|
||||
"reflect-metadata": "0.1.10",
|
||||
"roboto-fontface": "0.7.0",
|
||||
"rxjs": "5.1.0",
|
||||
"stylelint": "7.10.1",
|
||||
"zone.js": "0.8.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular/cli": "1.0.0",
|
||||
"@angular/compiler-cli": "4.0.1",
|
||||
"@angular/platform-server": "4.0.1",
|
||||
"@types/electron": "1.4.35",
|
||||
"@types/fullcalendar": "2.7.40",
|
||||
"@types/hammerjs": "2.0.34",
|
||||
"@types/jasmine": "2.5.38",
|
||||
"@types/jquery": "2.0.41",
|
||||
"@types/jquery.slimscroll": "1.3.30",
|
||||
"@types/lodash": "4.14.61",
|
||||
"@types/node": "6.0.60",
|
||||
"@types/source-map": "0.5.0",
|
||||
"@types/uglify-js": "2.6.28",
|
||||
"@types/webpack": "2.2.14",
|
||||
"add-asset-html-webpack-plugin": "1.0.2",
|
||||
"angular2-template-loader": "0.6.2",
|
||||
"assets-webpack-plugin": "3.5.1",
|
||||
"autoprefixer": "6.5.3",
|
||||
"awesome-typescript-loader": "3.1.2",
|
||||
"bootstrap-loader": "2.0.0",
|
||||
"codelyzer": "2.0.0",
|
||||
"copy-webpack-plugin": "4.0.1",
|
||||
"css-loader": "0.26.1",
|
||||
"cssnano": "3.10.0",
|
||||
"electron": "1.6.2",
|
||||
"es6-promise": "4.1.0",
|
||||
"es6-shim": "0.35.3",
|
||||
"es7-reflect-metadata": "1.6.0",
|
||||
"exports-loader": "0.6.3",
|
||||
"expose-loader": "0.7.3",
|
||||
"extract-text-webpack-plugin": "2.1.0",
|
||||
"file-loader": "0.10.0",
|
||||
"find-root": "1.0.0",
|
||||
"font-awesome-sass-loader": "2.0.1",
|
||||
"gh-pages": "0.12.0",
|
||||
"html-webpack-plugin": "2.28.0",
|
||||
"imports-loader": "0.7.1",
|
||||
"istanbul-instrumenter-loader": "2.0.0",
|
||||
"jasmine-core": "2.5.2",
|
||||
"jasmine-spec-reporter": "3.2.0",
|
||||
"json-loader": "0.5.4",
|
||||
"karma": "1.4.1",
|
||||
"karma-chrome-launcher": "2.0.0",
|
||||
"karma-cli": "1.0.1",
|
||||
"karma-coverage-istanbul-reporter": "0.2.0",
|
||||
"karma-jasmine": "1.1.0",
|
||||
"karma-jasmine-html-reporter": "0.2.2",
|
||||
"karma-sourcemap-loader": "0.3.7",
|
||||
"less-loader": "2.2.3",
|
||||
"ng-router-loader": "2.1.0",
|
||||
"ngc-webpack": "1.2.0",
|
||||
"node-sass": "4.5.2",
|
||||
"npm-run-all": "4.0.2",
|
||||
"optimize-js-plugin": "0.0.4",
|
||||
"postcss-loader": "0.13.0",
|
||||
"postcss-url": "5.1.2",
|
||||
"protractor": "5.1.0",
|
||||
"raw-loader": "0.5.1",
|
||||
"resolve-url-loader": "2.0.2",
|
||||
"rimraf": "2.6.1",
|
||||
"sass-loader": "4.1.1",
|
||||
"script-ext-html-webpack-plugin": "1.7.1",
|
||||
"script-loader": "0.7.0",
|
||||
"source-map-loader": "0.1.5",
|
||||
"string-replace-loader": "1.2.0",
|
||||
"style-loader": "0.13.1",
|
||||
"stylus-loader": "2.4.0",
|
||||
"to-string-loader": "1.1.5",
|
||||
"stylelint": "7.10.1",
|
||||
"ts-helpers": "1.1.2",
|
||||
"ts-node": "2.0.0",
|
||||
"tslint": "4.5.0",
|
||||
"tslint-eslint-rules": "4.0.0",
|
||||
"typedoc": "0.5.10",
|
||||
"typescript": "2.2.0",
|
||||
"tslint-eslint-rules": "3.5.1",
|
||||
"typescript": "2.2.2",
|
||||
"typogr": "0.6.6",
|
||||
"underscore": "1.8.3",
|
||||
"url-loader": "0.5.7",
|
||||
"webpack-dev-server": "2.3.0",
|
||||
"wintersmith": "2.3.6",
|
||||
"wintersmith": "2.2.5",
|
||||
"wintersmith-sassy": "1.1.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@ import { BrowserModule } from '@angular/platform-browser';
|
|||
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
||||
import { HttpModule } from '@angular/http';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { removeNgStyles, createNewHosts, createInputTransfer } from '@angularclass/hmr';
|
||||
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
|
||||
import { TranslateService } from '@ngx-translate/core';
|
||||
/*
|
||||
|
|
|
|||
|
|
@ -19,14 +19,14 @@ export const routes: Routes = [
|
|||
component: Pages,
|
||||
children: [
|
||||
{ path: '', redirectTo: 'dashboard', pathMatch: 'full' },
|
||||
{ path: 'dashboard', loadChildren: 'app/pages/dashboard/dashboard.module#DashboardModule' },
|
||||
{ path: 'editors', loadChildren: 'app/pages/editors/editors.module#EditorsModule' },
|
||||
{ path: 'components', loadChildren: 'app/pages/components/components.module#ComponentsModule' },
|
||||
{ path: 'charts', loadChildren: 'app/pages/charts/charts.module#ChartsModule' },
|
||||
{ path: 'ui', loadChildren: 'app/pages/ui/ui.module#UiModule' },
|
||||
{ path: 'forms', loadChildren: 'app/pages/forms/forms.module#FormsModule' },
|
||||
{ path: 'tables', loadChildren: 'app/pages/tables/tables.module#TablesModule' },
|
||||
{ path: 'maps', loadChildren: 'app/pages/maps/maps.module#MapsModule' }
|
||||
{ path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardModule' },
|
||||
{ path: 'editors', loadChildren: './editors/editors.module#EditorsModule' },
|
||||
{ path: 'components', loadChildren: './components/components.module#ComponentsModule' },
|
||||
{ path: 'charts', loadChildren: './charts/charts.module#ChartsModule' },
|
||||
{ path: 'ui', loadChildren: './ui/ui.module#UiModule' },
|
||||
{ path: 'forms', loadChildren: './forms/forms.module#FormsModule' },
|
||||
{ path: 'tables', loadChildren: './tables/tables.module#TablesModule' },
|
||||
{ path: 'maps', loadChildren: './maps/maps.module#MapsModule' }
|
||||
]
|
||||
}
|
||||
];
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
// This file is intentionally without code.
|
||||
|
|
@ -1,37 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<!--<title><%= htmlWebpackPlugin.options.title %></title>-->
|
||||
<title>ng2-admin</title>
|
||||
|
||||
<!--<meta name="description" content="<%= htmlWebpackPlugin.options.metadata.description %>">-->
|
||||
|
||||
<!--<% if (webpackConfig.htmlElements.headTags) { %>-->
|
||||
<!--<!– Configured Head Tags –>-->
|
||||
<!--<%= webpackConfig.htmlElements.headTags %>-->
|
||||
<!--<% } %>-->
|
||||
|
||||
<!-- base url -->
|
||||
<!--<base href="<%= htmlWebpackPlugin.options.metadata.baseUrl %>">-->
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<app>
|
||||
</app>
|
||||
<app>
|
||||
</app>
|
||||
|
||||
<div id="preloader">
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<!--<% if (htmlWebpackPlugin.options.metadata.isDevServer && htmlWebpackPlugin.options.metadata.HMR !== true) { %>-->
|
||||
<!--<!– Webpack Dev Server reload –>-->
|
||||
<!--<script src="/webpack-dev-server.js"></script>-->
|
||||
<!--<% } %>-->
|
||||
<div id="preloader">
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue