jinql
/
blur-admin
mirror of https://github.com/akveo/blur-admin
1
0
Fork 0
Code Issues Releases Wiki Activity

Blur Admin 0.1

pull/3/head
Nasta 2015-09-09 11:38:46 +03:00
commit 0664345e3a
335 changed files with 57307 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
.gitignore vendored Normal file
View File

@ -0,0 +1,52 @@
# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion
*.iml
## Directory-based project format:
.idea/
# if you remove the above rule, at least ignore the following:
# User-specific stuff:
# .idea/workspace.xml
# .idea/tasks.xml
# .idea/dictionaries
# Sensitive or high-churn files:
# .idea/dataSources.ids
# .idea/dataSources.xml
# .idea/sqlDataSources.xml
# .idea/dynamic.xml
# .idea/uiDesigner.xml
# Gradle:
# .idea/gradle.xml
# .idea/libraries
# Mongo Explorer plugin:
# .idea/mongoSettings.xml
## File-based project format:
*.ipr
*.iws
## Plugin-specific files:
# IntelliJ
/out/
# mpeltonen/sbt-idea plugin
.idea_modules/
# JIRA plugin
atlassian-ide-plugin.xml
# Crashlytics plugin (for Android Studio and IntelliJ)
com_crashlytics_export_strings.xml
crashlytics.properties
crashlytics-build.properties
node_modules
gulp.1
build
/src/release

163
gulpfile.js Normal file
View File

@ -0,0 +1,163 @@
var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefix = require('gulp-autoprefixer');
var minifyCSS = require('gulp-minify-css');
var concat = require("gulp-concat");
var changed = require('gulp-changed');
var imagemin = require('gulp-imagemin');
var stripDebug = require('gulp-strip-debug');
var uglify = require('gulp-uglify');
gulp.task('sass-404', function () {
return gulp.src(['./src/assets/css/404.scss'])
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./src/release/css/'));
});
gulp.task("minify-404-css", ['sass-404'], function () {
return gulp.src(["./src/assets/css/lib/bootstrap.min.css", "./src/release/css/404.css"])
.pipe(concat("404.min.css"))
.pipe(autoprefix('last 2 versions'))
.pipe(minifyCSS())
.pipe(gulp.dest("./src/release/css/"))
});
gulp.task('sass-auth', function () {
return gulp.src(['./src/assets/css/auth.scss'])
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./src/release/css/'));
});
gulp.task("minify-auth-css", ['sass-auth'], function () {
return gulp.src(["./src/assets/css/lib/bootstrap.min.css", "./src/release/css/auth.css"])
.pipe(concat("auth.min.css"))
.pipe(autoprefix('last 2 versions'))
.pipe(minifyCSS())
.pipe(gulp.dest("./src/release/css/"))
});
gulp.task('sass', function () {
return gulp.src(['./src/assets/css/main.scss'])
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./src/release/css/'));
});
gulp.task("minify-css", ['minify-404-css', 'minify-auth-css', 'sass'], function () {
return gulp.src(["./src/assets/css/lib/*.css", "./src/release/css/main.css"])
.pipe(concat("index.min.css"))
.pipe(autoprefix('last 2 versions'))
.pipe(minifyCSS())
.pipe(gulp.dest("./src/release/css/"))
});
var imgSrc = [
'./src/assets/img/*',
'./src/assets/pictures/*',
'./src/app/pages/dashboard/widgets/timeline/img/*',
'./src/app/pages/profile/img/*',
'./src/app/pages/icons/widgets/kameleon/*',
'./src/assets/js/lib/amChart/images/*',
'./src/app/pages/maps/widgets/leaflet/images/*',
];
gulp.task('imagemin', function () {
var imgDst = './src/release/img/';
gulp.src(imgSrc).pipe(changed(imgDst)).pipe(imagemin()).pipe(gulp.dest(imgDst));
});
gulp.task('js', function () {
var libSrc = [
"./src/assets/js/global-variables.js",
"./src/assets/js/lib/jquery.min.js",
"./src/assets/js/lib/jquery-ui.min.js",
"./src/assets/js/lib/angular.min.js",
"./src/assets/js/lib/angular-route.js",
"./src/assets/js/lib/bootstrap.min.js",
"./src/assets/js/lib/sortable.js",
"./src/assets/js/lib/highlight.js",
"./src/assets/js/lib/bootstrap-switch.min.js",
"./src/assets/js/lib/bootstrap-select.js",
"./src/assets/js/lib/bootstrap-tagsinput.js",
"./src/assets/js/lib/amChart/amcharts.js",
"./src/assets/js/lib/amChart/serial.js",
"./src/assets/js/lib/amChart/funnel.js",
"./src/assets/js/lib/amChart/pie.js",
"./src/assets/js/lib/amChart/amstock.js",
"./src/assets/js/lib/amChart/ammap.js",
"./src/assets/js/lib/amChart/worldLow.js",
"./src/assets/js//lib/amChart/blur.js",
"./src/app/pages/maps/widgets/leaflet/lib/leaflet.js",
"./src/app/pages/maps/widgets/google-maps/lib/google-maps.js",
"./src/app/pages/modals/widgets/notifications/lib/angular-toastr.tpls.js"
];
var src = [
"./src/app/app.js",
"./src/app/components/widgets/widgets.js",
"./src/app/components/sidebar/sidebar.js",
"./src/app/components/pageTop/pageTop.js",
"./src/app/pages/dashboard/dashboard.js",
"./src/app/pages/buttons/buttons.js",
"./src/app/pages/charts/charts.js",
"./src/app/pages/icons/icons.js",
"./src/app/pages/profile/profile.js",
"./src/app/pages/tables/tables.js",
"./src/app/pages/typography/typography.js",
"./src/app/pages/form/layouts/layouts.js",
"./src/app/pages/form/inputs/inputs.js",
"./src/app/common/directives/autoFocus.js",
"./src/app/common/directives/autoExpand.js",
"./src/app/common/directives/animatedChange.js",
"./src/app/common/directives/zoomIn.js",
"./src/app/pages/dashboard/widgets/calendar/lib/moment.min.js",
"./src/app/pages/dashboard/widgets/calendar/lib/fullcalendar.min.js",
"./src/app/pages/dashboard/widgets/calendar/calendar.js",
"./src/app/pages/dashboard/widgets/todo/todo.js",
"./src/app/components/pieCharts/lib/jquery.easing.min.js",
"./src/app/components/pieCharts/lib/jquery.easypiechart.min.js",
"./src/app/components/pieCharts/pieCharts.js",
"./src/app/pages/dashboard/widgets/amChart/amChart.js",
"./src/app/components/backTop/lib/jquery.backTop.js",
"./src/app/components/backTop/backTop.js",
"./src/app/components/msgCenter/msgCenter.js",
"./src/app/pages/dashboard/widgets/amChartMap/amChartMap.js",
"./src/app/pages/dashboard/widgets/timeline/timeline.js",
"./src/app/pages/dashboard/widgets/chart/lib/Chart.min.js",
"./src/app/pages/dashboard/widgets/chart/chart.js",
"./src/app/pages/charts/widgets/areaChart/areaChart.js",
"./src/app/pages/charts/widgets/barChart/barChart.js",
"./src/app/pages/charts/widgets/funnelChart/funnelChart.js",
"./src/app/pages/charts/widgets/lineChart/lineChart.js",
"./src/app/pages/charts/widgets/pieChart/pieChart.js",
"./src/app/pages/form/inputs/widgets/switch/switch.js",
"./src/app/pages/form/inputs/widgets/select/select.js",
"./src/app/pages/form/inputs/widgets/tagsInput/tagsInput.js",
"./src/app/pages/profile/profileModal/profileModal.js",
"./src/app/common/controllers/mainCtrl.js",
"./src/app/pages/maps/maps.js",
"./src/app/pages/maps/widgets/leaflet/leaflet.js",
"./src/app/pages/maps/widgets/google-maps/google-maps.js",
"./src/app/pages/maps/widgets/map-bubbles/map-bubbles.js",
"./src/app/pages/maps/widgets/map-lines/map-lines.js",
"./src/app/pages/modals/modals.js",
"./src/app/pages/modals/widgets/notifications/notifications.js"
];
var dst = './src/release/js/';
gulp.src(libSrc).pipe(concat('lib.min.js')).pipe(uglify()).pipe(gulp.dest(dst));
gulp.src(src).pipe(concat('bundle.min.js')).pipe(uglify()).pipe(gulp.dest(dst));
});
gulp.task('font', function() {
var fontSrc = './src/assets/css/fonts/*';
var fontDst = './src/release/fonts/';
gulp.src(fontSrc).pipe(gulp.dest(fontDst));
});
gulp.task("watch", function () {
gulp.watch(["./src/app/**/*.css", "./src/assets/**/*.css", "./**/*.scss "], ["minify-css"]);
gulp.watch(imgSrc, ["imagemin"]);
gulp.watch(["./src/app/**/*.js", "./src/assets/**/*.js"], ["js"]);
});
gulp.task("init", ["minify-css", "imagemin", "js", "font"]);

15
package.json Normal file
View File

@ -0,0 +1,15 @@
{
"name": "blur_admin",
"version": "0.0.1",
"devDependencies": {
"gulp": "^3.9.0",
"gulp-autoprefixer": "^2.3.1",
"gulp-changed": "^1.3.0",
"gulp-concat": "^2.6.0",
"gulp-imagemin": "^2.3.0",
"gulp-minify-css": "^1.2.1",
"gulp-sass": "^2.0.4",
"gulp-strip-debug": "^1.0.2",
"gulp-uglify": "^1.4.0"
}
}

33
src/404.html Normal file
View File

@ -0,0 +1,33 @@
<!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>Blur Admin</title>
<link href='http://fonts.googleapis.com/css?family=Lato:300,400' rel='stylesheet' type='text/css'>
<link rel="icon" type="image/png" href="/release/img/favicon_16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/release/img/favicon_32x32.png" sizes="32x32">
<link rel="stylesheet" href="release/css/404.min.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="assets/js/lib/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!--[if lte IE 8]>
<script language="javascript" type="text/javascript" src="assets/js/lib/excanvas.min.js"></script><![endif]-->
</head>
<body>
<div class="page-not-found-modal">
<h1>404 Error</h1>
<p>Sorry, that page doesn't exist. <a href="/">Go to Home Page.</a></p>
</div>
</body>
</html>

34
src/app/app.js Normal file
View File

@ -0,0 +1,34 @@
"use strict";
var app = angular.module('BlurAdmin', [
'ui.sortable',
'ngRoute',
'BlurAdmin.dashboard',
'BlurAdmin.buttonsPage',
'BlurAdmin.chartsPage',
'BlurAdmin.formInputsPage',
'BlurAdmin.formLayoutsPage',
'BlurAdmin.iconsPage',
'BlurAdmin.mapsPage',
'BlurAdmin.modalsPage',
'BlurAdmin.profilePage',
'BlurAdmin.tablesPage',
'BlurAdmin.typographyPage',
'toastr'
]).config(['$routeProvider', 'toastrConfig', function ($routeProvider, toastrConfig) {
$routeProvider.otherwise({redirectTo: '/dashboard'});
angular.extend(toastrConfig, {
closeButton: true,
closeHtml: '<button>&times;</button>',
timeOut: 5000,
autoDismiss: false,
containerId: 'toast-container',
maxOpened: 0,
newestOnTop: true,
positionClass: 'toast-top-right',
preventDuplicates: false,
preventOpenDuplicates: false,
target: 'body'
});
}]);

11
src/app/common/controllers/mainCtrl.js Normal file
View File

@ -0,0 +1,11 @@
'use strict';
app.controller('mainCtrl', ['$scope', '$timeout', function ($scope, $timeout) {
$timeout(function () {
$scope.finishLoading = true;
}, 1000);
$timeout(function () {
pageLoaded = true;
}, 4000);
}]);

35
src/app/common/directives/animatedChange.js Normal file
View File

@ -0,0 +1,35 @@
/**
* Change top "Daily Downloads", "Active Users" values with animation effect
*/
'use strict';
app.directive('animatedChange', ["$timeout", function ($timeout) {
return {
link: function (scope, element) {
$timeout(function () {
var newValue = element.attr("new-value");
var oldvalue = parseInt(element.html());
function changeValue(val) {
$timeout(function () {
element.html(val);
}, 30);
}
if (newValue > oldvalue) {
for (var i = oldvalue; i <= newValue; i++) {
changeValue(i);
}
} else {
for (var j = oldvalue; j >= newValue; j--) {
changeValue(j);
}
}
$timeout(function () {
element.next().find("i").addClass("show-arr");
}, 500);
}, 3500);
}
};
}]);

28
src/app/common/directives/autoExpand.js Normal file
View File

@ -0,0 +1,28 @@
/**
* Auto expand textarea field
*/
'use strict';
app.directive('autoExpand', function () {
return {
restrict: 'A',
link: function ($scope, elem) {
elem.bind('keydown', function ($event) {
var element = $event.target;
$(element).height(0);
var height = $(element)[0].scrollHeight;
height = (height < 16) ? 16 : height;
$(element).height(height);
});
// Expand the textarea as soon as it is added to the DOM
setTimeout(function () {
var element = elem;
$(element).height(0);
var height = $(element)[0].scrollHeight;
height = (height < 16) ? 16 : height;
$(element).height(height);
}, 0)
}
};
});

20
src/app/common/directives/autoFocus.js Normal file
View File

@ -0,0 +1,20 @@
'use strict';
app.directive('autoFocus', ["$timeout", "$parse", function ($timeout, $parse) {
return {
link: function (scope, element, attrs) {
var model = $parse(attrs.autoFocus);
scope.$watch(model, function (value) {
if (value === true) {
$timeout(function () {
element[0].focus();
element[0].select();
});
}
});
element.bind('blur', function () {
scope.$apply(model.assign(scope, false));
});
}
};
}]);

23
src/app/common/directives/zoomIn.js Normal file
View File

@ -0,0 +1,23 @@
/**
* Animated load block
*/
'use strict';
app.directive('zoomIn', ['$timeout', function ($timeout) {
return {
restrict: 'A',
link: function ($scope, elem) {
var delay = 1000;
if (pageLoaded) {
delay = 100;
}
$timeout(function () {
elem.removeClass("invisible");
elem.addClass("animated zoomIn");
}, delay);
}
};
}]);

35
src/app/components/backTop/_backTop.scss Normal file
View File

@ -0,0 +1,35 @@
$height: 52px;
.back-top {
width: $height;
height: $height;
cursor: pointer;
z-index: 9999;
display: none;
text-decoration: none;
left: (180px - $height) / 2;
right: auto !important;
bottom: 20px !important;
font-size: 45px;
line-height: $height;
text-align: center;
opacity: 0.5;
color: $primary;
&:hover {
opacity: 1;
}
}
@media (max-width: $resS) {
.back-top {
left: 0;
}
}
@media (max-width: $resXS) {
.back-top {
background-color: rgba(0, 0, 0, 0.75);
border-radius: 50%;
line-height: 46px;
}
}

1
src/app/components/backTop/backTop.html Normal file
View File

@ -0,0 +1 @@
<i class="fa fa-angle-up back-top" id="backTop" title="Back to Top"></i>

14
src/app/components/backTop/backTop.js Normal file
View File

@ -0,0 +1,14 @@
'use strict';
app.directive('backTop', function () {
return {
restrict: 'E',
controller: [function () {
$('#backTop').backTop({
'position': 200,
'speed': 500
});
}],
templateUrl: '/app/components/backTop/backTop.html'
};
});

58
src/app/components/backTop/lib/jquery.backTop.js Normal file
View File

@ -0,0 +1,58 @@
(function($) {
$.fn.backTop = function(options) {
var backBtn = this;
var settings = $.extend({
'position' : 400,
'speed' : 500,
'color' : 'white'
}, options);
//Settings
var position = settings['position'];
var speed = settings['speed'];
var color = settings['color'];
if(color == 'white'){
backBtn.addClass('white');
} else if(color == 'red'){
backBtn.addClass('red');
}else if(color == 'green'){
backBtn.addClass('green');
}else{
backBtn.addClass('black');
}
backBtn.css({
'right' : 40,
'bottom' : 40,
'position' : 'fixed',
});
$(document).scroll(function(){
var pos = $(window).scrollTop();
if(pos >= position){
backBtn.fadeIn(speed);
} else{
backBtn.fadeOut(speed);
}
});
backBtn.click(function(){
$("html, body").animate({
scrollTop:0
},
{
duration: 1200
});
});
}
}(jQuery));

2
src/app/components/backTop/lib/jquery.backTop.min.js vendored Normal file
View File

@ -0,0 +1,2 @@
/* Minified js for jQuery BackTop */
!function(o){o.fn.backTop=function(e){var n=this,i=o.extend({position:400,speed:500,color:"white"},e),t=i.position,c=i.speed,d=i.color;n.addClass("white"==d?"white":"red"==d?"red":"green"==d?"green":"black"),n.css({right:40,bottom:40,position:"fixed"}),o(document).scroll(function(){var e=o(window).scrollTop();console.log(e),e>=t?n.fadeIn(c):n.fadeOut(c)}),n.click(function(){o("html, body").animate({scrollTop:0},{duration:1200})})}}(jQuery);

253
src/app/components/msgCenter/_msgCenter.scss Normal file
View File

@ -0,0 +1,253 @@
/* msg center */
@-webkit-keyframes pulsate {
30% {
-webkit-transform: scale(0.1, 0.1);
opacity: 0.0;
}
35% {
opacity: 1.0;
}
40% {
-webkit-transform: scale(1.2, 1.2);
opacity: 0.0;
}
}
.al-msg-center {
float: right;
padding: 0;
list-style: none;
margin: 9px 57px 0 0;
li {
list-style: none;
float: left;
margin-left: 30px;
& > a {
color: #ffffff;
text-decoration: none;
font-size: 13px;
position: relative;
span {
display: inline-block;
min-width: 10px;
padding: 2px 4px 2px 4px;
color: #ffffff;
vertical-align: baseline;
white-space: nowrap;
text-align: center;
border-radius: 13px;
text-shadow: none;
line-height: 11px;
background-color: $danger;
position: absolute;
top: -5px;
right: -14px;
font-size: 11px;
}
.notification-ring {
border: 1px solid $danger;
border-radius: 100px;
height: 40px;
width: 40px;
position: absolute;
top: -18px;
right: -27px;
animation: pulsate 8s ease-out;
animation-iteration-count: infinite;
opacity: 0.0
}
&:hover {
color: $danger;
&.msg {
color: $primary;
}
}
&.msg {
span {
background-color: $primary;
}
.notification-ring {
border-color: $primary;
}
}
}
&.open {
& > a {
color: $danger;
&.msg {
color: $primary;
}
}
}
}
}
@media (max-width: $resXXS) {
.al-msg-center {
margin-right: 32px;
}
.al-msg-center li:first-child {
margin-left: 20px;
}
}
.msg-block-header {
display: inline-block;
padding: 0;
font-size: 13px;
margin: 0 0 0 6px;
}
.top-dropdown-menu {
width: 316px;
left: auto;
right: -47px;
top: 26px;
border-radius: 0;
@include scrollbars(.5em, #ccc, #fff);
.header {
padding: 10px 12px;
border-bottom: 1px solid $border-light;
font-size: 12px;
strong {
float: left;
}
& > a {
float: right;
margin-left: 12px;
text-decoration: none;
&:hover {
color: $default-text;
}
}
}
.msg-list {
max-height: 296px;
overflow: scroll;
overflow-x: hidden;
& > a {
border-top: 1px solid $border-light;
padding: 10px 12px;
display: block;
text-decoration: none;
color: $default-text;
font-size: 12px;
&:first-child {
border-top: none;
}
.img-area {
float: left;
width: 36px;
img {
width: 36px;
height: 36px;
border-radius: 4px;
}
& > div {
width: 36px;
height: 36px;
border-radius: 4px;
font-size: 24px;
text-align: center;
&.comments {
color: $warning;
}
&.orders {
color: $warning;
}
i {
width: 36px;
line-height: 36px;
}
}
}
.msg-area {
float: right;
width: 230px;
div {
max-height: 34px;
overflow: hidden;
text-overflow: ellipsis;
}
span {
font-style: italic;
text-align: right;
display: block;
font-size: 11px;
}
}
&:hover {
background: #E2F0FF;
}
}
}
& > a {
border-top: 1px solid $border-light;
display: block;
text-align: center;
padding: 10px;
font-size: 12px;
text-decoration: none;
&:hover {
color: $default-text;
}
}
&.profile-dropdown {
width: 145px;
top: 47px;
right: -25px;
& > a {
text-align: left;
border: none;
text-decoration: none;
color: $default-text;
padding-left: 16px;
&.signout {
border-top: 1px solid $border-light;
}
i {
margin-right: 10px;
}
&:hover {
background: #f4fcff;
}
}
i.dropdown-arr {
right: 33px;
}
}
i.dropdown-arr {
position: absolute;
top: -22px;
right: 42px;
display: block;
width: 0;
height: 0;
border: 11px solid transparent;
border-bottom-color: rgba(0, 0, 0, .15);
&:after {
top: -9px;
left: 0px;
margin-left: -10px;
content: " ";
position: absolute;
display: block;
width: 0;
height: 0;
border: 10px solid transparent;
border-bottom-color: #ffffff;
}
}
}
@media (max-width: 415px) {
.top-dropdown-menu {
right: -81px;
i.dropdown-arr {
right: 75px;
}
}
}

145
src/app/components/msgCenter/msgCenter.html Normal file
View File

@ -0,0 +1,145 @@
<ul class="al-msg-center clearfix">
<li class="dropdown">
<a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-bell-o"></i><span>5</span>
<div class="notification-ring"></div>
</a>
<div class="dropdown-menu top-dropdown-menu">
<i class="dropdown-arr"></i>
<div class="header clearfix">
<strong>Notifications</strong>
<a href="javascript:void(0)">Mark All as Read</a>
<a href="javascript:void(0)">Settings</a>
</div>
<div class="msg-list">
<a href="javascript:void(0)" class="clearfix">
<div class="img-area"><img src="release/img/02.png"></div>
<div class="msg-area">
<div>Today is <strong>John Doe</strong>'s birthday.</div>
<span>1 min ago</span>
</div>
</a>
<a href="javascript:void(0)" class="clearfix">
<div class="img-area">
<div class="comments"><i class="fa fa-comments-o"></i></div>
</div>
<div class="msg-area">
<div>New comments on your post.</div>
<span>2 hrs ago</span>
</div>
</a>
<a href="javascript:void(0)" class="clearfix">
<div class="img-area"><img src="release/img/01.png"></div>
<div class="msg-area">
<div><strong>Carrol Black</strong> changed her name to <strong>Carrol White</strong>.</div>
<span>10 hrs ago</span>
</div>
</a>
<a href="javascript:void(0)" class="clearfix">
<div class="img-area"><img src="release/img/08.png"></div>
<div class="msg-area">
<div><strong>Bob Taylor</strong> posted in Startup Hub.</div>
<span>1 day ago</span>
</div>
</a>
<a href="javascript:void(0)" class="clearfix">
<div class="img-area">
<div class="orders"><i class="fa fa-shopping-cart"></i></div>
</div>
<div class="msg-area">
<div>New orders received.</div>
<span>5 mins ago</span>
</div>
</a>
<a href="javascript:void(0)" class="clearfix">
<div class="img-area"><img src="release/img/04.png"></div>
<div class="msg-area">
<div>Add <strong>Anna Smith</strong> as contact?</div>
<span>2 days ago</span>
</div>
</a>
<a href="javascript:void(0)" class="clearfix">
<div class="img-area"><img src="release/img/07.png"></div>
<div class="msg-area">
<div><strong>Helen Jonhnson</strong> invited you to join the event.</div>
<span>1 week ago</span>
</div>
</a>
</div>
<a href="javascript:void(0)">See all notifications</a>
</div>
</li>
<li class="dropdown">
<a href="javascript:void(0)" class="msg dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-envelope-o"></i><span>5</span>
<div class="notification-ring"></div>
</a>
<div class="dropdown-menu top-dropdown-menu">
<i class="dropdown-arr"></i>
<div class="header clearfix">
<strong>Messages</strong>
<a href="javascript:void(0)">Mark All as Read</a>
<a href="javascript:void(0)">Settings</a>
</div>
<div class="msg-list">
<a href="javascript:void(0)" class="clearfix">
<div class="img-area"><img src="release/img/02.png"></div>
<div class="msg-area">
<div><strong>John Doe:</strong> After you get up and running, you can place Font Awesome icons just about...
</div>
<span>1 min ago</span>
</div>
</a>
<a href="javascript:void(0)" class="clearfix">
<div class="img-area"><img src="release/img/09.png"></div>
<div class="msg-area">
<div>You asked, Font Awesome delivers with 40 shiny new icons in version 4.2.</div>
<span>2 hrs ago</span>
</div>
</a>
<a href="javascript:void(0)" class="clearfix">
<div class="img-area"><img src="release/img/01.png"></div>
<div class="msg-area">
<div>Want to request new icons? Here's how. Need vectors or want to use on the...</div>
<span>10 hrs ago</span>
</div>
</a>
<a href="javascript:void(0)" class="clearfix">
<div class="img-area"><img src="release/img/08.png"></div>
<div class="msg-area">
<div>Explore your passions and discover new ones by getting involved. Stretch your...</div>
<span>1 day ago</span>
</div>
</a>
<a href="javascript:void(0)" class="clearfix">
<div class="img-area"><img src="release/img/03.png"></div>
<div class="msg-area">
<div>Get to know who we are - from the inside out. From our history and culture, to the...</div>
<span>5 mins ago</span>
</div>
</a>
<a href="javascript:void(0)" class="clearfix">
<div class="img-area"><img src="release/img/04.png"></div>
<div class="msg-area">
<div>Need some support to reach your goals? Apply for scholarships across a variety of...</div>
<span>2 days ago</span>
</div>
</a>
<a href="javascript:void(0)" class="clearfix">
<div class="img-area"><img src="release/img/07.png"></div>
<div class="msg-area">
<div>Wrap the dropdown's trigger and the dropdown menu within .dropdown, or...</div>
<span>1 week ago</span>
</div>
</a>
</div>
<a href="javascript:void(0)">See all messages</a>
</div>
</li>
</ul>

8
src/app/components/msgCenter/msgCenter.js Normal file
View File

@ -0,0 +1,8 @@
'use strict';
app.directive('msgCenter', function () {
return {
restrict: 'E',
templateUrl: '/app/components/msgCenter/msgCenter.html'
};
});

162
src/app/components/pageTop/_pageTop.scss Normal file
View File

@ -0,0 +1,162 @@
.page-top {
padding: 12px 15px 0px;
position: relative;
}
.top-area {
margin-bottom: 32px;
position: relative;
z-index: 1;
}
.page-top-main {
margin-bottom: 19px;
}
.al-breadcrumb {
background: none;
color: #ffffff;
padding: 12px 0 0;
float: left;
margin-bottom: 0;
}
@media (max-width: $resXS) {
.al-breadcrumb {
display: none;
}
}
h1.al-title {
font-weight: 100;
color: #ffffff;
float: left;
width: auto;
margin: 7px 0 0;
}
.quick-stat-block {
margin-left: 20px;
padding: 0px 9px;
text-align: right;
color: #ffffff;
float: right;
display: table;
.quick-stat-row {
display: table-row;
& > div {
display: table-cell;
padding-left: 7px;
line-height: 21px;
padding-bottom: 2px;
}
i.icon-small {
display: none;
margin-right: 4px;
font-size: 18px;
margin-top: -1px;
}
.quick-stat-name {
font-weight: normal;
text-align: right;
line-height: 21px;
}
.quick-stat-val {
font-size: 15px;
}
}
.fa-long-arrow-up {
color: $success;
}
.fa-long-arrow-down {
color: $danger;
}
.quick-stat-up, .quick-stat-down {
height: 0;
transition: height 0.3s ease;
}
.show-arr {
height: 13px;
}
}
@media (max-width: $resL) {
.quick-stat-block {
display: block;
margin-top: 24px;
.quick-stat-row {
display: table;
float: left;
}
}
}
@media (max-width: 612px) {
.quick-stat-block .quick-stat-row {
i.icon-small {
display: block;
}
.quick-stat-name {
display: none;
}
}
}
.user-profile {
float: right;
min-width: 220px;
}
.al-user-profile {
float: right;
margin-right: 12px;
transition: all .15s ease-in-out;
padding: 0;
width: 36px;
height: 36px;
border: 0;
opacity: 1;
position: relative;
a {
display: block;
}
img {
width: 36px;
height: 36px;
}
}
a.refresh-data {
color: #ffffff;
font-size: 13px;
text-decoration: none;
font-weight: normal;
float: right;
margin-top: 9px;
&:hover {
color: $warning !important;
}
}
@media (max-width: $resXXS) {
h1.al-title {
font-size: 28px;
}
.top-area {
margin-bottom: 22px;
}
.page-top-main {
margin-bottom: 8px;
}
.quick-stat-block {
margin-top: 22px;
.quick-stat-row {
.quick-stat-val {
font-size: 13px;
}
}
}
}

47
src/app/components/pageTop/pageTop.html Normal file
View File

@ -0,0 +1,47 @@
<div class="page-top clearfix">
<div class="top-area clearfix">
<div class="user-profile clearfix">
<div class="al-user-profile dropdown">
<a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">
<img src="release/img/00.png">
</a>
<div class="dropdown-menu top-dropdown-menu profile-dropdown">
<i class="dropdown-arr"></i>
<a href="javascript:void(0)"><i class="fa fa-user"></i>Profile</a>
<a href="javascript:void(0)"><i class="fa fa-cog"></i>Settings</a>
<a href="javascript:void(0)" class="signout"><i class="fa fa-power-off"></i>Sign out</a>
</div>
</div>
<msg-center></msg-center>
<a href="javascript:void(0)" class="refresh-data"><i class="fa fa-refresh"></i></a>
</div>
<ul class="breadcrumb al-breadcrumb">
<li>
<a href="#/dashboard">Home</a></li>
<li>{{ activePageTitle }}</li>
</ul>
</div>
<pie-charts></pie-charts>
<div class="page-top-main clearfix">
<div class="quick-stat-block">
<div class="quick-stat-row">
<div><i class="icon-small ion-ios-download-outline"></i></div>
<div class="quick-stat-name">Daily Downloads:</div>
<div class="quick-stat-val" animated-change new-value="982">509</div>
<div><i class="icon-up quick-stat-up"></i></div>
</div>
<div class="quick-stat-row">
<div><i class="icon-small ion-ios-people-outline"></i></div>
<div class="quick-stat-name">Active Users:</div>
<div class="quick-stat-val" animated-change new-value="611">971</div>
<div><i class="icon-down quick-stat-down"></i></div>
</div>
</div>
<h1 class="al-title">{{ activePageTitle }}</h1>
</div>
</div>

31
src/app/components/pageTop/pageTop.js Normal file
View File

@ -0,0 +1,31 @@
'use strict';
app.directive('pageTop', ["$location", function ($location) {
return {
restrict: 'E',
templateUrl: '/app/components/pageTop/pageTop.html',
link: function ($scope) {
$scope.pages = {
"/dashboard": "Dashboard",
"/page": "Default Page",
"/404": "Page Not Found",
"/buttons": "Buttons",
"/charts": "Charts",
"/grid": "Grid",
"/icons": "Icons",
"/login": "Authentication",
"/maps": "Maps",
"/modals": "Modals",
"/profile": "User Profile",
"/tables": "Tables",
"/typography": "Typography",
"/form-layouts": "Form Layouts",
"/form-inputs": "Form Inputs"
};
$scope.$watch(function () {
$scope.activePageTitle = $scope.pages[$location.$$url];
});
}
};
}]);

79
src/app/components/pieCharts/_pieCharts.scss Normal file
View File

@ -0,0 +1,79 @@
.pie-charts {
white-space: nowrap;
min-width: 84px * 4;
padding: 0 300px 0;
position: absolute;
top: 24px;
left: 0;
width: 100%;
.pie-chart-item {
text-align: center;
display: inline-block;
width: 25%;
&:first-child {
margin-left: 0;
}
h6 {
text-transform: none;
color: #ffffff;
margin-top: 13px;
width: 100%;
}
}
.chart {
position: relative;
display: inline-block;
width: 84px;
height: 84px;
text-align: center;
color: #ffffff;
}
.chart canvas {
position: absolute;
top: 0;
left: 0;
}
.percent {
display: inline-block;
line-height: 84px;
z-index: 2;
font-size: 16px;
color: #ffffff;
}
.percent:after {
content: '%';
margin-left: 0.1em;
font-size: .8em;
}
.angular {
margin-top: 100px;
}
.angular .chart {
margin-top: 0;
}
}
@media (max-width: $resXXL) and (min-width: $resL), (max-width: $resS) {
.pie-charts {
padding: 0 250px;
}
}
@media (max-width: $resL) {
.pie-charts {
position: relative;
top: 0;
left: 0;
width: 100%;
padding: 0;
}
}
@media (max-width: $resXXS) {
.pie-charts {
white-space: normal;
.pie-chart-item {
width: 49%;
}
}
}

402
src/app/components/pieCharts/lib/angular.easypiechart.js Normal file
View File

@ -0,0 +1,402 @@
/**!
* easy-pie-chart
* Lightweight plugin to render simple, animated and retina optimized pie charts
*
* @license
* @author Robert Fleischmann <rendro87@gmail.com> (http://robert-fleischmann.de)
* @version 2.1.7
**/
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module unless amdModuleId is set
define(["angular"], function (a0) {
return (factory(a0));
});
} else if (typeof exports === 'object') {
// Node. Does not work with strict CommonJS, but
// only CommonJS-like environments that support module.exports,
// like Node.
module.exports = factory(require("angular"));
} else {
factory(angular);
}
}(this, function (angular) {
(function (angular) {
'use strict';
return angular.module('easypiechart', [])
.directive('easypiechart', [function() {
return {
restrict: 'AE',
require: '?ngModel',
scope: {
percent: '=',
options: '='
},
link: function (scope, element, attrs) {
scope.percent = scope.percent || 0;
/**
* default easy pie chart options
* @type {Object}
*/
var options = {
barColor: '#ef1e25',
trackColor: '#f9f9f9',
scaleColor: '#dfe0e0',
scaleLength: 5,
lineCap: 'round',
lineWidth: 3,
size: 110,
rotate: 0,
animate: {
duration: 1000,
enabled: true
}
};
scope.options = angular.extend(options, scope.options);
var pieChart = new EasyPieChart(element[0], options);
scope.$watch('percent', function(newVal, oldVal) {
pieChart.update(newVal);
});
}
};
}]);
})(angular);
/**
* Renderer to render the chart on a canvas object
* @param {DOMElement} el DOM element to host the canvas (root of the plugin)
* @param {object} options options object of the plugin
*/
var CanvasRenderer = function(el, options) {
var cachedBackground;
var canvas = document.createElement('canvas');
el.appendChild(canvas);
if (typeof(G_vmlCanvasManager) === 'object') {
G_vmlCanvasManager.initElement(canvas);
}
var ctx = canvas.getContext('2d');
canvas.width = canvas.height = options.size;
// canvas on retina devices
var scaleBy = 1;
if (window.devicePixelRatio > 1) {
scaleBy = window.devicePixelRatio;
canvas.style.width = canvas.style.height = [options.size, 'px'].join('');
canvas.width = canvas.height = options.size * scaleBy;
ctx.scale(scaleBy, scaleBy);
}
// move 0,0 coordinates to the center
ctx.translate(options.size / 2, options.size / 2);
// rotate canvas -90deg
ctx.rotate((-1 / 2 + options.rotate / 180) * Math.PI);
var radius = (options.size - options.lineWidth) / 2;
if (options.scaleColor && options.scaleLength) {
radius -= options.scaleLength + 2; // 2 is the distance between scale and bar
}
// IE polyfill for Date
Date.now = Date.now || function() {
return +(new Date());
};
/**
* Draw a circle around the center of the canvas
* @param {strong} color Valid CSS color string
* @param {number} lineWidth Width of the line in px
* @param {number} percent Percentage to draw (float between -1 and 1)
*/
var drawCircle = function(color, lineWidth, percent) {
percent = Math.min(Math.max(-1, percent || 0), 1);
var isNegative = percent <= 0 ? true : false;
ctx.beginPath();
ctx.arc(0, 0, radius, 0, Math.PI * 2 * percent, isNegative);
ctx.strokeStyle = color;
ctx.lineWidth = lineWidth;
ctx.stroke();
};
/**
* Draw the scale of the chart
*/
var drawScale = function() {
var offset;
var length;
ctx.lineWidth = 1;
ctx.fillStyle = options.scaleColor;
ctx.save();
for (var i = 24; i > 0; --i) {
if (i % 6 === 0) {
length = options.scaleLength;
offset = 0;
} else {
length = options.scaleLength * 0.6;
offset = options.scaleLength - length;
}
ctx.fillRect(-options.size/2 + offset, 0, length, 1);
ctx.rotate(Math.PI / 12);
}
ctx.restore();
};
/**
* Request animation frame wrapper with polyfill
* @return {function} Request animation frame method or timeout fallback
*/
var reqAnimationFrame = (function() {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
}());
/**
* Draw the background of the plugin including the scale and the track
*/
var drawBackground = function() {
if(options.scaleColor) drawScale();
if(options.trackColor) drawCircle(options.trackColor, options.trackWidth || options.lineWidth, 1);
};
/**
* Canvas accessor
*/
this.getCanvas = function() {
return canvas;
};
/**
* Canvas 2D context 'ctx' accessor
*/
this.getCtx = function() {
return ctx;
};
/**
* Clear the complete canvas
*/
this.clear = function() {
ctx.clearRect(options.size / -2, options.size / -2, options.size, options.size);
};
/**
* Draw the complete chart
* @param {number} percent Percent shown by the chart between -100 and 100
*/
this.draw = function(percent) {
// do we need to render a background
if (!!options.scaleColor || !!options.trackColor) {
// getImageData and putImageData are supported
if (ctx.getImageData && ctx.putImageData) {
if (!cachedBackground) {
drawBackground();
cachedBackground = ctx.getImageData(0, 0, options.size * scaleBy, options.size * scaleBy);
} else {
ctx.putImageData(cachedBackground, 0, 0);
}
} else {
this.clear();
drawBackground();
}
} else {
this.clear();
}
ctx.lineCap = options.lineCap;
// if barcolor is a function execute it and pass the percent as a value
var color;
if (typeof(options.barColor) === 'function') {
color = options.barColor(percent);
} else {
color = options.barColor;
}
// draw bar
drawCircle(color, options.lineWidth, percent / 100);
}.bind(this);
/**
* Animate from some percent to some other percentage
* @param {number} from Starting percentage
* @param {number} to Final percentage
*/
this.animate = function(from, to) {
var startTime = Date.now();
options.onStart(from, to);
var animation = function() {
var process = Math.min(Date.now() - startTime, options.animate.duration);
var currentValue = options.easing(this, process, from, to - from, options.animate.duration);
this.draw(currentValue);
options.onStep(from, to, currentValue);
if (process >= options.animate.duration) {
options.onStop(from, to);
} else {
reqAnimationFrame(animation);
}
}.bind(this);
reqAnimationFrame(animation);
}.bind(this);
};
var EasyPieChart = function(el, opts) {
var defaultOptions = {
barColor: '#ef1e25',
trackColor: '#f9f9f9',
scaleColor: '#dfe0e0',
scaleLength: 5,
lineCap: 'round',
lineWidth: 3,
trackWidth: undefined,
size: 110,
rotate: 0,
animate: {
duration: 1000,
enabled: true
},
easing: function (x, t, b, c, d) { // more can be found here: http://gsgd.co.uk/sandbox/jquery/easing/
t = t / (d/2);
if (t < 1) {
return c / 2 * t * t + b;
}
return -c/2 * ((--t)*(t-2) - 1) + b;
},
onStart: function(from, to) {
return;
},
onStep: function(from, to, currentValue) {
return;
},
onStop: function(from, to) {
return;
}
};
// detect present renderer
if (typeof(CanvasRenderer) !== 'undefined') {
defaultOptions.renderer = CanvasRenderer;
} else if (typeof(SVGRenderer) !== 'undefined') {
defaultOptions.renderer = SVGRenderer;
} else {
throw new Error('Please load either the SVG- or the CanvasRenderer');
}
var options = {};
var currentValue = 0;
/**
* Initialize the plugin by creating the options object and initialize rendering
*/
var init = function() {
this.el = el;
this.options = options;
// merge user options into default options
for (var i in defaultOptions) {
if (defaultOptions.hasOwnProperty(i)) {
options[i] = opts && typeof(opts[i]) !== 'undefined' ? opts[i] : defaultOptions[i];
if (typeof(options[i]) === 'function') {
options[i] = options[i].bind(this);
}
}
}
// check for jQuery easing
if (typeof(options.easing) === 'string' && typeof(jQuery) !== 'undefined' && jQuery.isFunction(jQuery.easing[options.easing])) {
options.easing = jQuery.easing[options.easing];
} else {
options.easing = defaultOptions.easing;
}
// process earlier animate option to avoid bc breaks
if (typeof(options.animate) === 'number') {
options.animate = {
duration: options.animate,
enabled: true
};
}
if (typeof(options.animate) === 'boolean' && !options.animate) {
options.animate = {
duration: 1000,
enabled: options.animate
};
}
// create renderer
this.renderer = new options.renderer(el, options);
// initial draw
this.renderer.draw(currentValue);
// initial update
if (el.dataset && el.dataset.percent) {
this.update(parseFloat(el.dataset.percent));
} else if (el.getAttribute && el.getAttribute('data-percent')) {
this.update(parseFloat(el.getAttribute('data-percent')));
}
}.bind(this);
/**
* Update the value of the chart
* @param {number} newValue Number between 0 and 100
* @return {object} Instance of the plugin for method chaining
*/
this.update = function(newValue) {
newValue = parseFloat(newValue);
if (options.animate.enabled) {
this.renderer.animate(currentValue, newValue);
} else {
this.renderer.draw(newValue);
}
currentValue = newValue;
return this;
}.bind(this);
/**
* Disable animation
* @return {object} Instance of the plugin for method chaining
*/
this.disableAnimation = function() {
options.animate.enabled = false;
return this;
};
/**
* Enable animation
* @return {object} Instance of the plugin for method chaining
*/
this.enableAnimation = function() {
options.animate.enabled = true;
return this;
};
init();
};
}));

9
src/app/components/pieCharts/lib/angular.easypiechart.min.js vendored Normal file
View File

@ -0,0 +1,9 @@
/**!
* easy-pie-chart
* Lightweight plugin to render simple, animated and retina optimized pie charts
*
* @license
* @author Robert Fleischmann <rendro87@gmail.com> (http://robert-fleischmann.de)
* @version 2.1.7
**/
!function(a,b){"function"==typeof define&&define.amd?define(["angular"],function(a){return b(a)}):"object"==typeof exports?module.exports=b(require("angular")):b(angular)}(this,function(a){!function(a){"use strict";return a.module("easypiechart",[]).directive("easypiechart",[function(){return{restrict:"AE",require:"?ngModel",scope:{percent:"=",options:"="},link:function(b,d,e){b.percent=b.percent||0;var f={barColor:"#ef1e25",trackColor:"#f9f9f9",scaleColor:"#dfe0e0",scaleLength:5,lineCap:"round",lineWidth:3,size:110,rotate:0,animate:{duration:1e3,enabled:!0}};b.options=a.extend(f,b.options);var g=new c(d[0],f);b.$watch("percent",function(a,b){g.update(a)})}}}])}(a);var b=function(a,b){var c,d=document.createElement("canvas");a.appendChild(d),"object"==typeof G_vmlCanvasManager&&G_vmlCanvasManager.initElement(d);var e=d.getContext("2d");d.width=d.height=b.size;var f=1;window.devicePixelRatio>1&&(f=window.devicePixelRatio,d.style.width=d.style.height=[b.size,"px"].join(""),d.width=d.height=b.size*f,e.scale(f,f)),e.translate(b.size/2,b.size/2),e.rotate((-0.5+b.rotate/180)*Math.PI);var g=(b.size-b.lineWidth)/2;b.scaleColor&&b.scaleLength&&(g-=b.scaleLength+2),Date.now=Date.now||function(){return+new Date};var h=function(a,b,c){c=Math.min(Math.max(-1,c||0),1);var d=0>=c?!0:!1;e.beginPath(),e.arc(0,0,g,0,2*Math.PI*c,d),e.strokeStyle=a,e.lineWidth=b,e.stroke()},i=function(){var a,c;e.lineWidth=1,e.fillStyle=b.scaleColor,e.save();for(var d=24;d>0;--d)d%6===0?(c=b.scaleLength,a=0):(c=.6*b.scaleLength,a=b.scaleLength-c),e.fillRect(-b.size/2+a,0,c,1),e.rotate(Math.PI/12);e.restore()},j=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(a){window.setTimeout(a,1e3/60)}}(),k=function(){b.scaleColor&&i(),b.trackColor&&h(b.trackColor,b.trackWidth||b.lineWidth,1)};this.getCanvas=function(){return d},this.getCtx=function(){return e},this.clear=function(){e.clearRect(b.size/-2,b.size/-2,b.size,b.size)},this.draw=function(a){b.scaleColor||b.trackColor?e.getImageData&&e.putImageData?c?e.putImageData(c,0,0):(k(),c=e.getImageData(0,0,b.size*f,b.size*f)):(this.clear(),k()):this.clear(),e.lineCap=b.lineCap;var d;d="function"==typeof b.barColor?b.barColor(a):b.barColor,h(d,b.lineWidth,a/100)}.bind(this),this.animate=function(a,c){var d=Date.now();b.onStart(a,c);var e=function(){var f=Math.min(Date.now()-d,b.animate.duration),g=b.easing(this,f,a,c-a,b.animate.duration);this.draw(g),b.onStep(a,c,g),f>=b.animate.duration?b.onStop(a,c):j(e)}.bind(this);j(e)}.bind(this)},c=function(a,c){var d={barColor:"#ef1e25",trackColor:"#f9f9f9",scaleColor:"#dfe0e0",scaleLength:5,lineCap:"round",lineWidth:3,trackWidth:void 0,size:110,rotate:0,animate:{duration:1e3,enabled:!0},easing:function(a,b,c,d,e){return b/=e/2,1>b?d/2*b*b+c:-d/2*(--b*(b-2)-1)+c},onStart:function(a,b){},onStep:function(a,b,c){},onStop:function(a,b){}};if("undefined"!=typeof b)d.renderer=b;else{if("undefined"==typeof SVGRenderer)throw new Error("Please load either the SVG- or the CanvasRenderer");d.renderer=SVGRenderer}var e={},f=0,g=function(){this.el=a,this.options=e;for(var b in d)d.hasOwnProperty(b)&&(e[b]=c&&"undefined"!=typeof c[b]?c[b]:d[b],"function"==typeof e[b]&&(e[b]=e[b].bind(this)));"string"==typeof e.easing&&"undefined"!=typeof jQuery&&jQuery.isFunction(jQuery.easing[e.easing])?e.easing=jQuery.easing[e.easing]:e.easing=d.easing,"number"==typeof e.animate&&(e.animate={duration:e.animate,enabled:!0}),"boolean"!=typeof e.animate||e.animate||(e.animate={duration:1e3,enabled:e.animate}),this.renderer=new e.renderer(a,e),this.renderer.draw(f),a.dataset&&a.dataset.percent?this.update(parseFloat(a.dataset.percent)):a.getAttribute&&a.getAttribute("data-percent")&&this.update(parseFloat(a.getAttribute("data-percent")))}.bind(this);this.update=function(a){return a=parseFloat(a),e.animate.enabled?this.renderer.animate(f,a):this.renderer.draw(a),f=a,this}.bind(this),this.disableAnimation=function(){return e.animate.enabled=!1,this},this.enableAnimation=function(){return e.animate.enabled=!0,this},g()}});

354
src/app/components/pieCharts/lib/easypiechart.js Normal file
View File

@ -0,0 +1,354 @@
/**!
* easy-pie-chart
* Lightweight plugin to render simple, animated and retina optimized pie charts
*
* @license
* @author Robert Fleischmann <rendro87@gmail.com> (http://robert-fleischmann.de)
* @version 2.1.7
**/
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module unless amdModuleId is set
define([], function () {
return (root['EasyPieChart'] = factory());
});
} else if (typeof exports === 'object') {
// Node. Does not work with strict CommonJS, but
// only CommonJS-like environments that support module.exports,
// like Node.
module.exports = factory();
} else {
root['EasyPieChart'] = factory();
}
}(this, function () {
/**
* Renderer to render the chart on a canvas object
* @param {DOMElement} el DOM element to host the canvas (root of the plugin)
* @param {object} options options object of the plugin
*/
var CanvasRenderer = function(el, options) {
var cachedBackground;
var canvas = document.createElement('canvas');
el.appendChild(canvas);
if (typeof(G_vmlCanvasManager) === 'object') {
G_vmlCanvasManager.initElement(canvas);
}
var ctx = canvas.getContext('2d');
canvas.width = canvas.height = options.size;
// canvas on retina devices
var scaleBy = 1;
if (window.devicePixelRatio > 1) {
scaleBy = window.devicePixelRatio;
canvas.style.width = canvas.style.height = [options.size, 'px'].join('');
canvas.width = canvas.height = options.size * scaleBy;
ctx.scale(scaleBy, scaleBy);
}
// move 0,0 coordinates to the center
ctx.translate(options.size / 2, options.size / 2);
// rotate canvas -90deg
ctx.rotate((-1 / 2 + options.rotate / 180) * Math.PI);
var radius = (options.size - options.lineWidth) / 2;
if (options.scaleColor && options.scaleLength) {
radius -= options.scaleLength + 2; // 2 is the distance between scale and bar
}
// IE polyfill for Date
Date.now = Date.now || function() {
return +(new Date());
};
/**
* Draw a circle around the center of the canvas
* @param {strong} color Valid CSS color string
* @param {number} lineWidth Width of the line in px
* @param {number} percent Percentage to draw (float between -1 and 1)
*/
var drawCircle = function(color, lineWidth, percent) {
percent = Math.min(Math.max(-1, percent || 0), 1);
var isNegative = percent <= 0 ? true : false;
ctx.beginPath();
ctx.arc(0, 0, radius, 0, Math.PI * 2 * percent, isNegative);
ctx.strokeStyle = color;
ctx.lineWidth = lineWidth;
ctx.stroke();
};
/**
* Draw the scale of the chart
*/
var drawScale = function() {
var offset;
var length;
ctx.lineWidth = 1;
ctx.fillStyle = options.scaleColor;
ctx.save();
for (var i = 24; i > 0; --i) {
if (i % 6 === 0) {
length = options.scaleLength;
offset = 0;
} else {
length = options.scaleLength * 0.6;
offset = options.scaleLength - length;
}
ctx.fillRect(-options.size/2 + offset, 0, length, 1);
ctx.rotate(Math.PI / 12);
}
ctx.restore();
};
/**
* Request animation frame wrapper with polyfill
* @return {function} Request animation frame method or timeout fallback
*/
var reqAnimationFrame = (function() {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
}());
/**
* Draw the background of the plugin including the scale and the track
*/
var drawBackground = function() {
if(options.scaleColor) drawScale();
if(options.trackColor) drawCircle(options.trackColor, options.trackWidth || options.lineWidth, 1);
};
/**
* Canvas accessor
*/
this.getCanvas = function() {
return canvas;
};
/**
* Canvas 2D context 'ctx' accessor
*/
this.getCtx = function() {
return ctx;
};
/**
* Clear the complete canvas
*/
this.clear = function() {
ctx.clearRect(options.size / -2, options.size / -2, options.size, options.size);
};
/**
* Draw the complete chart
* @param {number} percent Percent shown by the chart between -100 and 100
*/
this.draw = function(percent) {
// do we need to render a background
if (!!options.scaleColor || !!options.trackColor) {
// getImageData and putImageData are supported
if (ctx.getImageData && ctx.putImageData) {
if (!cachedBackground) {
drawBackground();
cachedBackground = ctx.getImageData(0, 0, options.size * scaleBy, options.size * scaleBy);
} else {
ctx.putImageData(cachedBackground, 0, 0);
}
} else {
this.clear();
drawBackground();
}
} else {
this.clear();
}
ctx.lineCap = options.lineCap;
// if barcolor is a function execute it and pass the percent as a value
var color;
if (typeof(options.barColor) === 'function') {
color = options.barColor(percent);
} else {
color = options.barColor;
}
// draw bar
drawCircle(color, options.lineWidth, percent / 100);
}.bind(this);
/**
* Animate from some percent to some other percentage
* @param {number} from Starting percentage
* @param {number} to Final percentage
*/
this.animate = function(from, to) {
var startTime = Date.now();
options.onStart(from, to);
var animation = function() {
var process = Math.min(Date.now() - startTime, options.animate.duration);
var currentValue = options.easing(this, process, from, to - from, options.animate.duration);
this.draw(currentValue);
options.onStep(from, to, currentValue);
if (process >= options.animate.duration) {
options.onStop(from, to);
} else {
reqAnimationFrame(animation);
}
}.bind(this);
reqAnimationFrame(animation);
}.bind(this);
};
var EasyPieChart = function(el, opts) {
var defaultOptions = {
barColor: '#ef1e25',
trackColor: '#f9f9f9',
scaleColor: '#dfe0e0',
scaleLength: 5,
lineCap: 'round',
lineWidth: 3,
trackWidth: undefined,
size: 110,
rotate: 0,
animate: {
duration: 1000,
enabled: true
},
easing: function (x, t, b, c, d) { // more can be found here: http://gsgd.co.uk/sandbox/jquery/easing/
t = t / (d/2);
if (t < 1) {
return c / 2 * t * t + b;
}
return -c/2 * ((--t)*(t-2) - 1) + b;
},
onStart: function(from, to) {
return;
},
onStep: function(from, to, currentValue) {
return;
},
onStop: function(from, to) {
return;
}
};
// detect present renderer
if (typeof(CanvasRenderer) !== 'undefined') {
defaultOptions.renderer = CanvasRenderer;
} else if (typeof(SVGRenderer) !== 'undefined') {
defaultOptions.renderer = SVGRenderer;
} else {
throw new Error('Please load either the SVG- or the CanvasRenderer');
}
var options = {};
var currentValue = 0;
/**
* Initialize the plugin by creating the options object and initialize rendering
*/
var init = function() {
this.el = el;
this.options = options;
// merge user options into default options
for (var i in defaultOptions) {
if (defaultOptions.hasOwnProperty(i)) {
options[i] = opts && typeof(opts[i]) !== 'undefined' ? opts[i] : defaultOptions[i];
if (typeof(options[i]) === 'function') {
options[i] = options[i].bind(this);
}
}
}
// check for jQuery easing
if (typeof(options.easing) === 'string' && typeof(jQuery) !== 'undefined' && jQuery.isFunction(jQuery.easing[options.easing])) {
options.easing = jQuery.easing[options.easing];
} else {
options.easing = defaultOptions.easing;
}
// process earlier animate option to avoid bc breaks
if (typeof(options.animate) === 'number') {
options.animate = {
duration: options.animate,
enabled: true
};
}
if (typeof(options.animate) === 'boolean' && !options.animate) {
options.animate = {
duration: 1000,
enabled: options.animate
};
}
// create renderer
this.renderer = new options.renderer(el, options);
// initial draw
this.renderer.draw(currentValue);
// initial update
if (el.dataset && el.dataset.percent) {
this.update(parseFloat(el.dataset.percent));
} else if (el.getAttribute && el.getAttribute('data-percent')) {
this.update(parseFloat(el.getAttribute('data-percent')));
}
}.bind(this);
/**
* Update the value of the chart
* @param {number} newValue Number between 0 and 100
* @return {object} Instance of the plugin for method chaining
*/
this.update = function(newValue) {
newValue = parseFloat(newValue);
if (options.animate.enabled) {
this.renderer.animate(currentValue, newValue);
} else {
this.renderer.draw(newValue);
}
currentValue = newValue;
return this;
}.bind(this);
/**
* Disable animation
* @return {object} Instance of the plugin for method chaining
*/
this.disableAnimation = function() {
options.animate.enabled = false;
return this;
};
/**
* Enable animation
* @return {object} Instance of the plugin for method chaining
*/
this.enableAnimation = function() {
options.animate.enabled = true;
return this;
};
init();
};
return EasyPieChart;
}));

9
src/app/components/pieCharts/lib/easypiechart.min.js vendored Normal file
View File

@ -0,0 +1,9 @@
/**!
* easy-pie-chart
* Lightweight plugin to render simple, animated and retina optimized pie charts
*
* @license
* @author Robert Fleischmann <rendro87@gmail.com> (http://robert-fleischmann.de)
* @version 2.1.7
**/
!function(a,b){"function"==typeof define&&define.amd?define([],function(){return a.EasyPieChart=b()}):"object"==typeof exports?module.exports=b():a.EasyPieChart=b()}(this,function(){var a=function(a,b){var c,d=document.createElement("canvas");a.appendChild(d),"object"==typeof G_vmlCanvasManager&&G_vmlCanvasManager.initElement(d);var e=d.getContext("2d");d.width=d.height=b.size;var f=1;window.devicePixelRatio>1&&(f=window.devicePixelRatio,d.style.width=d.style.height=[b.size,"px"].join(""),d.width=d.height=b.size*f,e.scale(f,f)),e.translate(b.size/2,b.size/2),e.rotate((-0.5+b.rotate/180)*Math.PI);var g=(b.size-b.lineWidth)/2;b.scaleColor&&b.scaleLength&&(g-=b.scaleLength+2),Date.now=Date.now||function(){return+new Date};var h=function(a,b,c){c=Math.min(Math.max(-1,c||0),1);var d=0>=c?!0:!1;e.beginPath(),e.arc(0,0,g,0,2*Math.PI*c,d),e.strokeStyle=a,e.lineWidth=b,e.stroke()},i=function(){var a,c;e.lineWidth=1,e.fillStyle=b.scaleColor,e.save();for(var d=24;d>0;--d)d%6===0?(c=b.scaleLength,a=0):(c=.6*b.scaleLength,a=b.scaleLength-c),e.fillRect(-b.size/2+a,0,c,1),e.rotate(Math.PI/12);e.restore()},j=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(a){window.setTimeout(a,1e3/60)}}(),k=function(){b.scaleColor&&i(),b.trackColor&&h(b.trackColor,b.trackWidth||b.lineWidth,1)};this.getCanvas=function(){return d},this.getCtx=function(){return e},this.clear=function(){e.clearRect(b.size/-2,b.size/-2,b.size,b.size)},this.draw=function(a){b.scaleColor||b.trackColor?e.getImageData&&e.putImageData?c?e.putImageData(c,0,0):(k(),c=e.getImageData(0,0,b.size*f,b.size*f)):(this.clear(),k()):this.clear(),e.lineCap=b.lineCap;var d;d="function"==typeof b.barColor?b.barColor(a):b.barColor,h(d,b.lineWidth,a/100)}.bind(this),this.animate=function(a,c){var d=Date.now();b.onStart(a,c);var e=function(){var f=Math.min(Date.now()-d,b.animate.duration),g=b.easing(this,f,a,c-a,b.animate.duration);this.draw(g),b.onStep(a,c,g),f>=b.animate.duration?b.onStop(a,c):j(e)}.bind(this);j(e)}.bind(this)},b=function(b,c){var d={barColor:"#ef1e25",trackColor:"#f9f9f9",scaleColor:"#dfe0e0",scaleLength:5,lineCap:"round",lineWidth:3,trackWidth:void 0,size:110,rotate:0,animate:{duration:1e3,enabled:!0},easing:function(a,b,c,d,e){return b/=e/2,1>b?d/2*b*b+c:-d/2*(--b*(b-2)-1)+c},onStart:function(a,b){},onStep:function(a,b,c){},onStop:function(a,b){}};if("undefined"!=typeof a)d.renderer=a;else{if("undefined"==typeof SVGRenderer)throw new Error("Please load either the SVG- or the CanvasRenderer");d.renderer=SVGRenderer}var e={},f=0,g=function(){this.el=b,this.options=e;for(var a in d)d.hasOwnProperty(a)&&(e[a]=c&&"undefined"!=typeof c[a]?c[a]:d[a],"function"==typeof e[a]&&(e[a]=e[a].bind(this)));"string"==typeof e.easing&&"undefined"!=typeof jQuery&&jQuery.isFunction(jQuery.easing[e.easing])?e.easing=jQuery.easing[e.easing]:e.easing=d.easing,"number"==typeof e.animate&&(e.animate={duration:e.animate,enabled:!0}),"boolean"!=typeof e.animate||e.animate||(e.animate={duration:1e3,enabled:e.animate}),this.renderer=new e.renderer(b,e),this.renderer.draw(f),b.dataset&&b.dataset.percent?this.update(parseFloat(b.dataset.percent)):b.getAttribute&&b.getAttribute("data-percent")&&this.update(parseFloat(b.getAttribute("data-percent")))}.bind(this);this.update=function(a){return a=parseFloat(a),e.animate.enabled?this.renderer.animate(f,a):this.renderer.draw(a),f=a,this}.bind(this),this.disableAnimation=function(){return e.animate.enabled=!1,this},this.enableAnimation=function(){return e.animate.enabled=!0,this},g()};return b});

44
src/app/components/pieCharts/lib/jquery.easing.min.js vendored Normal file
View File

@ -0,0 +1,44 @@
/*
* jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/
*
* Uses the built in easing capabilities added In jQuery 1.1
* to offer multiple easing options
*
* TERMS OF USE - EASING EQUATIONS
*
* Open source under the BSD License.
*
* Copyright © 2001 Robert Penner
* All rights reserved.
*
* TERMS OF USE - jQuery Easing
*
* Open source under the BSD License.
*
* Copyright © 2008 George McGinley Smith
* All rights reserved.
*
* Redistribution and use in source and binary forms, with or without modification,
* are permitted provided that the following conditions are met:
*
* Redistributions of source code must retain the above copyright notice, this list of
* conditions and the following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list
* of conditions and the following disclaimer in the documentation and/or other materials
* provided with the distribution.
*
* Neither the name of the author nor the names of contributors may be used to endorse
* or promote products derived from this software without specific prior written permission.
*
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
* MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
* COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
* EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
* GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
* AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
* NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
* OF THE POSSIBILITY OF SUCH DAMAGE.
*
*/
jQuery.easing.jswing=jQuery.easing.swing;jQuery.extend(jQuery.easing,{def:"easeOutQuad",swing:function(e,f,a,h,g){return jQuery.easing[jQuery.easing.def](e,f,a,h,g)},easeInQuad:function(e,f,a,h,g){return h*(f/=g)*f+a},easeOutQuad:function(e,f,a,h,g){return -h*(f/=g)*(f-2)+a},easeInOutQuad:function(e,f,a,h,g){if((f/=g/2)<1){return h/2*f*f+a}return -h/2*((--f)*(f-2)-1)+a},easeInCubic:function(e,f,a,h,g){return h*(f/=g)*f*f+a},easeOutCubic:function(e,f,a,h,g){return h*((f=f/g-1)*f*f+1)+a},easeInOutCubic:function(e,f,a,h,g){if((f/=g/2)<1){return h/2*f*f*f+a}return h/2*((f-=2)*f*f+2)+a},easeInQuart:function(e,f,a,h,g){return h*(f/=g)*f*f*f+a},easeOutQuart:function(e,f,a,h,g){return -h*((f=f/g-1)*f*f*f-1)+a},easeInOutQuart:function(e,f,a,h,g){if((f/=g/2)<1){return h/2*f*f*f*f+a}return -h/2*((f-=2)*f*f*f-2)+a},easeInQuint:function(e,f,a,h,g){return h*(f/=g)*f*f*f*f+a},easeOutQuint:function(e,f,a,h,g){return h*((f=f/g-1)*f*f*f*f+1)+a},easeInOutQuint:function(e,f,a,h,g){if((f/=g/2)<1){return h/2*f*f*f*f*f+a}return h/2*((f-=2)*f*f*f*f+2)+a},easeInSine:function(e,f,a,h,g){return -h*Math.cos(f/g*(Math.PI/2))+h+a},easeOutSine:function(e,f,a,h,g){return h*Math.sin(f/g*(Math.PI/2))+a},easeInOutSine:function(e,f,a,h,g){return -h/2*(Math.cos(Math.PI*f/g)-1)+a},easeInExpo:function(e,f,a,h,g){return(f==0)?a:h*Math.pow(2,10*(f/g-1))+a},easeOutExpo:function(e,f,a,h,g){return(f==g)?a+h:h*(-Math.pow(2,-10*f/g)+1)+a},easeInOutExpo:function(e,f,a,h,g){if(f==0){return a}if(f==g){return a+h}if((f/=g/2)<1){return h/2*Math.pow(2,10*(f-1))+a}return h/2*(-Math.pow(2,-10*--f)+2)+a},easeInCirc:function(e,f,a,h,g){return -h*(Math.sqrt(1-(f/=g)*f)-1)+a},easeOutCirc:function(e,f,a,h,g){return h*Math.sqrt(1-(f=f/g-1)*f)+a},easeInOutCirc:function(e,f,a,h,g){if((f/=g/2)<1){return -h/2*(Math.sqrt(1-f*f)-1)+a}return h/2*(Math.sqrt(1-(f-=2)*f)+1)+a},easeInElastic:function(f,h,e,l,k){var i=1.70158;var j=0;var g=l;if(h==0){return e}if((h/=k)==1){return e+l}if(!j){j=k*0.3}if(g<Math.abs(l)){g=l;var i=j/4}else{var i=j/(2*Math.PI)*Math.asin(l/g)}return -(g*Math.pow(2,10*(h-=1))*Math.sin((h*k-i)*(2*Math.PI)/j))+e},easeOutElastic:function(f,h,e,l,k){var i=1.70158;var j=0;var g=l;if(h==0){return e}if((h/=k)==1){return e+l}if(!j){j=k*0.3}if(g<Math.abs(l)){g=l;var i=j/4}else{var i=j/(2*Math.PI)*Math.asin(l/g)}return g*Math.pow(2,-10*h)*Math.sin((h*k-i)*(2*Math.PI)/j)+l+e},easeInOutElastic:function(f,h,e,l,k){var i=1.70158;var j=0;var g=l;if(h==0){return e}if((h/=k/2)==2){return e+l}if(!j){j=k*(0.3*1.5)}if(g<Math.abs(l)){g=l;var i=j/4}else{var i=j/(2*Math.PI)*Math.asin(l/g)}if(h<1){return -0.5*(g*Math.pow(2,10*(h-=1))*Math.sin((h*k-i)*(2*Math.PI)/j))+e}return g*Math.pow(2,-10*(h-=1))*Math.sin((h*k-i)*(2*Math.PI)/j)*0.5+l+e},easeInBack:function(e,f,a,i,h,g){if(g==undefined){g=1.70158}return i*(f/=h)*f*((g+1)*f-g)+a},easeOutBack:function(e,f,a,i,h,g){if(g==undefined){g=1.70158}return i*((f=f/h-1)*f*((g+1)*f+g)+1)+a},easeInOutBack:function(e,f,a,i,h,g){if(g==undefined){g=1.70158}if((f/=h/2)<1){return i/2*(f*f*(((g*=(1.525))+1)*f-g))+a}return i/2*((f-=2)*f*(((g*=(1.525))+1)*f+g)+2)+a},easeInBounce:function(e,f,a,h,g){return h-jQuery.easing.easeOutBounce(e,g-f,0,h,g)+a},easeOutBounce:function(e,f,a,h,g){if((f/=g)<(1/2.75)){return h*(7.5625*f*f)+a}else{if(f<(2/2.75)){return h*(7.5625*(f-=(1.5/2.75))*f+0.75)+a}else{if(f<(2.5/2.75)){return h*(7.5625*(f-=(2.25/2.75))*f+0.9375)+a}else{return h*(7.5625*(f-=(2.625/2.75))*f+0.984375)+a}}}},easeInOutBounce:function(e,f,a,h,g){if(f<g/2){return jQuery.easing.easeInBounce(e,f*2,0,h,g)*0.5+a}return jQuery.easing.easeOutBounce(e,f*2-g,0,h,g)*0.5+h*0.5+a}});

364
src/app/components/pieCharts/lib/jquery.easypiechart.js Normal file
View File

@ -0,0 +1,364 @@
/**!
* easy-pie-chart
* Lightweight plugin to render simple, animated and retina optimized pie charts
*
* @license
* @author Robert Fleischmann <rendro87@gmail.com> (http://robert-fleischmann.de)
* @version 2.1.7
**/
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module unless amdModuleId is set
define(["jquery"], function (a0) {
return (factory(a0));
});
} else if (typeof exports === 'object') {
// Node. Does not work with strict CommonJS, but
// only CommonJS-like environments that support module.exports,
// like Node.
module.exports = factory(require("jquery"));
} else {
factory(jQuery);
}
}(this, function ($) {
/**
* Renderer to render the chart on a canvas object
* @param {DOMElement} el DOM element to host the canvas (root of the plugin)
* @param {object} options options object of the plugin
*/
var CanvasRenderer = function(el, options) {
var cachedBackground;
var canvas = document.createElement('canvas');
el.appendChild(canvas);
if (typeof(G_vmlCanvasManager) === 'object') {
G_vmlCanvasManager.initElement(canvas);
}
var ctx = canvas.getContext('2d');
canvas.width = canvas.height = options.size;
// canvas on retina devices
var scaleBy = 1;
if (window.devicePixelRatio > 1) {
scaleBy = window.devicePixelRatio;
canvas.style.width = canvas.style.height = [options.size, 'px'].join('');
canvas.width = canvas.height = options.size * scaleBy;
ctx.scale(scaleBy, scaleBy);
}
// move 0,0 coordinates to the center
ctx.translate(options.size / 2, options.size / 2);
// rotate canvas -90deg
ctx.rotate((-1 / 2 + options.rotate / 180) * Math.PI);
var radius = (options.size - options.lineWidth) / 2;
if (options.scaleColor && options.scaleLength) {
radius -= options.scaleLength + 2; // 2 is the distance between scale and bar
}
// IE polyfill for Date
Date.now = Date.now || function() {
return +(new Date());
};
/**
* Draw a circle around the center of the canvas
* @param {strong} color Valid CSS color string
* @param {number} lineWidth Width of the line in px
* @param {number} percent Percentage to draw (float between -1 and 1)
*/
var drawCircle = function(color, lineWidth, percent) {
percent = Math.min(Math.max(-1, percent || 0), 1);
var isNegative = percent <= 0 ? true : false;
ctx.beginPath();
ctx.arc(0, 0, radius, 0, Math.PI * 2 * percent, isNegative);
ctx.strokeStyle = color;
ctx.lineWidth = lineWidth;
ctx.stroke();
};
/**
* Draw the scale of the chart
*/
var drawScale = function() {
var offset;
var length;
ctx.lineWidth = 1;
ctx.fillStyle = options.scaleColor;
ctx.save();
for (var i = 24; i > 0; --i) {
if (i % 6 === 0) {
length = options.scaleLength;
offset = 0;
} else {
length = options.scaleLength * 0.6;
offset = options.scaleLength - length;
}
ctx.fillRect(-options.size/2 + offset, 0, length, 1);
ctx.rotate(Math.PI / 12);
}
ctx.restore();
};
/**
* Request animation frame wrapper with polyfill
* @return {function} Request animation frame method or timeout fallback
*/
var reqAnimationFrame = (function() {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
}());
/**
* Draw the background of the plugin including the scale and the track
*/
var drawBackground = function() {
if(options.scaleColor) drawScale();
if(options.trackColor) drawCircle(options.trackColor, options.trackWidth || options.lineWidth, 1);
};
/**
* Canvas accessor
*/
this.getCanvas = function() {
return canvas;
};
/**
* Canvas 2D context 'ctx' accessor
*/
this.getCtx = function() {
return ctx;
};
/**
* Clear the complete canvas
*/
this.clear = function() {
ctx.clearRect(options.size / -2, options.size / -2, options.size, options.size);
};
/**
* Draw the complete chart
* @param {number} percent Percent shown by the chart between -100 and 100
*/
this.draw = function(percent) {
// do we need to render a background
if (!!options.scaleColor || !!options.trackColor) {
// getImageData and putImageData are supported
if (ctx.getImageData && ctx.putImageData) {
if (!cachedBackground) {
drawBackground();
cachedBackground = ctx.getImageData(0, 0, options.size * scaleBy, options.size * scaleBy);
} else {
ctx.putImageData(cachedBackground, 0, 0);
}
} else {
this.clear();
drawBackground();
}
} else {
this.clear();
}
ctx.lineCap = options.lineCap;
// if barcolor is a function execute it and pass the percent as a value
var color;
if (typeof(options.barColor) === 'function') {
color = options.barColor(percent);
} else {
color = options.barColor;
}
// draw bar
drawCircle(color, options.lineWidth, percent / 100);
}.bind(this);
/**
* Animate from some percent to some other percentage
* @param {number} from Starting percentage
* @param {number} to Final percentage
*/
this.animate = function(from, to) {
var startTime = Date.now();
options.onStart(from, to);
var animation = function() {
var process = Math.min(Date.now() - startTime, options.animate.duration);
var currentValue = options.easing(this, process, from, to - from, options.animate.duration);
this.draw(currentValue);
options.onStep(from, to, currentValue);
if (process >= options.animate.duration) {
options.onStop(from, to);
} else {
reqAnimationFrame(animation);
}
}.bind(this);
reqAnimationFrame(animation);
}.bind(this);
};
var EasyPieChart = function(el, opts) {
var defaultOptions = {
barColor: '#ef1e25',
trackColor: '#f9f9f9',
scaleColor: '#dfe0e0',
scaleLength: 5,
lineCap: 'round',
lineWidth: 3,
trackWidth: undefined,
size: 110,
rotate: 0,
animate: {
duration: 1000,
enabled: true
},
easing: function (x, t, b, c, d) { // more can be found here: http://gsgd.co.uk/sandbox/jquery/easing/
t = t / (d/2);
if (t < 1) {
return c / 2 * t * t + b;
}
return -c/2 * ((--t)*(t-2) - 1) + b;
},
onStart: function(from, to) {
return;
},
onStep: function(from, to, currentValue) {
return;
},
onStop: function(from, to) {
return;
}
};
// detect present renderer
if (typeof(CanvasRenderer) !== 'undefined') {
defaultOptions.renderer = CanvasRenderer;
} else if (typeof(SVGRenderer) !== 'undefined') {
defaultOptions.renderer = SVGRenderer;
} else {
throw new Error('Please load either the SVG- or the CanvasRenderer');
}
var options = {};
var currentValue = 0;
/**
* Initialize the plugin by creating the options object and initialize rendering
*/
var init = function() {
this.el = el;
this.options = options;
// merge user options into default options
for (var i in defaultOptions) {
if (defaultOptions.hasOwnProperty(i)) {
options[i] = opts && typeof(opts[i]) !== 'undefined' ? opts[i] : defaultOptions[i];
if (typeof(options[i]) === 'function') {
options[i] = options[i].bind(this);
}
}
}
// check for jQuery easing
if (typeof(options.easing) === 'string' && typeof(jQuery) !== 'undefined' && jQuery.isFunction(jQuery.easing[options.easing])) {
options.easing = jQuery.easing[options.easing];
} else {
options.easing = defaultOptions.easing;
}
// process earlier animate option to avoid bc breaks
if (typeof(options.animate) === 'number') {
options.animate = {
duration: options.animate,
enabled: true
};
}
if (typeof(options.animate) === 'boolean' && !options.animate) {
options.animate = {
duration: 1000,
enabled: options.animate
};
}
// create renderer
this.renderer = new options.renderer(el, options);
// initial draw
this.renderer.draw(currentValue);
// initial update
if (el.dataset && el.dataset.percent) {
this.update(parseFloat(el.dataset.percent));
} else if (el.getAttribute && el.getAttribute('data-percent')) {
this.update(parseFloat(el.getAttribute('data-percent')));
}
}.bind(this);
/**
* Update the value of the chart
* @param {number} newValue Number between 0 and 100
* @return {object} Instance of the plugin for method chaining
*/
this.update = function(newValue) {
newValue = parseFloat(newValue);
if (options.animate.enabled) {
this.renderer.animate(currentValue, newValue);
} else {
this.renderer.draw(newValue);
}
currentValue = newValue;
return this;
}.bind(this);
/**
* Disable animation
* @return {object} Instance of the plugin for method chaining
*/
this.disableAnimation = function() {
options.animate.enabled = false;
return this;
};
/**
* Enable animation
* @return {object} Instance of the plugin for method chaining
*/
this.enableAnimation = function() {
options.animate.enabled = true;
return this;
};
init();
};
$.fn.easyPieChart = function(options) {
return this.each(function() {
var instanceOptions;
if (!$.data(this, 'easyPieChart')) {
instanceOptions = $.extend({}, options, $(this).data());
$.data(this, 'easyPieChart', new EasyPieChart(this, instanceOptions));
}
});
};
}));

9
src/app/components/pieCharts/lib/jquery.easypiechart.min.js vendored Normal file
View File

@ -0,0 +1,9 @@
/**!
* easy-pie-chart
* Lightweight plugin to render simple, animated and retina optimized pie charts
*
* @license
* @author Robert Fleischmann <rendro87@gmail.com> (http://robert-fleischmann.de)
* @version 2.1.7
**/
!function(a,b){"function"==typeof define&&define.amd?define(["jquery"],function(a){return b(a)}):"object"==typeof exports?module.exports=b(require("jquery")):b(jQuery)}(this,function(a){var b=function(a,b){var c,d=document.createElement("canvas");a.appendChild(d),"object"==typeof G_vmlCanvasManager&&G_vmlCanvasManager.initElement(d);var e=d.getContext("2d");d.width=d.height=b.size;var f=1;window.devicePixelRatio>1&&(f=window.devicePixelRatio,d.style.width=d.style.height=[b.size,"px"].join(""),d.width=d.height=b.size*f,e.scale(f,f)),e.translate(b.size/2,b.size/2),e.rotate((-0.5+b.rotate/180)*Math.PI);var g=(b.size-b.lineWidth)/2;b.scaleColor&&b.scaleLength&&(g-=b.scaleLength+2),Date.now=Date.now||function(){return+new Date};var h=function(a,b,c){c=Math.min(Math.max(-1,c||0),1);var d=0>=c?!0:!1;e.beginPath(),e.arc(0,0,g,0,2*Math.PI*c,d),e.strokeStyle=a,e.lineWidth=b,e.stroke()},i=function(){var a,c;e.lineWidth=1,e.fillStyle=b.scaleColor,e.save();for(var d=24;d>0;--d)d%6===0?(c=b.scaleLength,a=0):(c=.6*b.scaleLength,a=b.scaleLength-c),e.fillRect(-b.size/2+a,0,c,1),e.rotate(Math.PI/12);e.restore()},j=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(a){window.setTimeout(a,1e3/60)}}(),k=function(){b.scaleColor&&i(),b.trackColor&&h(b.trackColor,b.trackWidth||b.lineWidth,1)};this.getCanvas=function(){return d},this.getCtx=function(){return e},this.clear=function(){e.clearRect(b.size/-2,b.size/-2,b.size,b.size)},this.draw=function(a){b.scaleColor||b.trackColor?e.getImageData&&e.putImageData?c?e.putImageData(c,0,0):(k(),c=e.getImageData(0,0,b.size*f,b.size*f)):(this.clear(),k()):this.clear(),e.lineCap=b.lineCap;var d;d="function"==typeof b.barColor?b.barColor(a):b.barColor,h(d,b.lineWidth,a/100)}.bind(this),this.animate=function(a,c){var d=Date.now();b.onStart(a,c);var e=function(){var f=Math.min(Date.now()-d,b.animate.duration),g=b.easing(this,f,a,c-a,b.animate.duration);this.draw(g),b.onStep(a,c,g),f>=b.animate.duration?b.onStop(a,c):j(e)}.bind(this);j(e)}.bind(this)},c=function(a,c){var d={barColor:"#ef1e25",trackColor:"#f9f9f9",scaleColor:"#dfe0e0",scaleLength:5,lineCap:"round",lineWidth:3,trackWidth:void 0,size:110,rotate:0,animate:{duration:1e3,enabled:!0},easing:function(a,b,c,d,e){return b/=e/2,1>b?d/2*b*b+c:-d/2*(--b*(b-2)-1)+c},onStart:function(a,b){},onStep:function(a,b,c){},onStop:function(a,b){}};if("undefined"!=typeof b)d.renderer=b;else{if("undefined"==typeof SVGRenderer)throw new Error("Please load either the SVG- or the CanvasRenderer");d.renderer=SVGRenderer}var e={},f=0,g=function(){this.el=a,this.options=e;for(var b in d)d.hasOwnProperty(b)&&(e[b]=c&&"undefined"!=typeof c[b]?c[b]:d[b],"function"==typeof e[b]&&(e[b]=e[b].bind(this)));"string"==typeof e.easing&&"undefined"!=typeof jQuery&&jQuery.isFunction(jQuery.easing[e.easing])?e.easing=jQuery.easing[e.easing]:e.easing=d.easing,"number"==typeof e.animate&&(e.animate={duration:e.animate,enabled:!0}),"boolean"!=typeof e.animate||e.animate||(e.animate={duration:1e3,enabled:e.animate}),this.renderer=new e.renderer(a,e),this.renderer.draw(f),a.dataset&&a.dataset.percent?this.update(parseFloat(a.dataset.percent)):a.getAttribute&&a.getAttribute("data-percent")&&this.update(parseFloat(a.getAttribute("data-percent")))}.bind(this);this.update=function(a){return a=parseFloat(a),e.animate.enabled?this.renderer.animate(f,a):this.renderer.draw(a),f=a,this}.bind(this),this.disableAnimation=function(){return e.animate.enabled=!1,this},this.enableAnimation=function(){return e.animate.enabled=!0,this},g()};a.fn.easyPieChart=function(b){return this.each(function(){var d;a.data(this,"easyPieChart")||(d=a.extend({},b,a(this).data()),a.data(this,"easyPieChart",new c(this,d)))})}});

18
src/app/components/pieCharts/pieCharts.html Normal file
View File

@ -0,0 +1,18 @@
<div class="pie-charts invisible clearfix" zoom-in>
<div class="pie-chart-item" id="chart1">
<span class="chart" rel="#41bee9" data-percent="60"> <span class="percent"></span> </span>
<h6>New Visits</h6>
</div>
<div class="pie-chart-item" id="chart2">
<span class="chart" rel="#9D498C" data-percent="50"> <span class="percent"></span> </span>
<h6>New Purchases</h6>
</div>
<div class="pie-chart-item" id="chart3">
<span class="chart" rel="#bbcb50" data-percent="40"> <span class="percent"></span> </span>
<h6>Active Users</h6>
</div>
<div class="pie-chart-item" id="chart4">
<span class="chart" rel="#5FBCBB" data-percent="70"> <span class="percent"></span> </span>
<h6>Server Load</h6>
</div>
</div>

51
src/app/components/pieCharts/pieCharts.js Normal file
View File

@ -0,0 +1,51 @@
'use strict';
app.directive('pieCharts', function () {
return {
restrict: 'E',
controller: ["$scope", "$element", "$window", "$timeout", function ($scope, $element, $window, $timeout) {
function getRandomArbitrary(min, max) {
return Math.random() * (max - min) + min;
}
function loadPieCharts() {
$('.chart').each(function () {
var chart = $(this);
chart.easyPieChart({
easing: 'easeOutBounce',
onStep: function (from, to, percent) {
$(this.el).find('.percent').text(Math.round(percent));
},
barColor: chart.attr("rel"),
trackColor: 'rgba(0,0,0,0)',
size: 84,
scaleLength: 0,
animation: 2000
});
});
$('.refresh-data').on('click', function () {
updatePieCharts();
});
}
function updatePieCharts() {
var chart1 = window.chart = $("#chart1").find('.chart').data('easyPieChart');
var chart2 = window.chart = $("#chart2").find('.chart').data('easyPieChart');
var chart3 = window.chart = $("#chart3").find('.chart').data('easyPieChart');
var chart4 = window.chart = $("#chart4").find('.chart').data('easyPieChart');
chart1.update(getRandomArbitrary(60, 100));
chart2.update(getRandomArbitrary(60, 100));
chart3.update(getRandomArbitrary(60, 100));
chart4.update(getRandomArbitrary(60, 100));
}
loadPieCharts();
$timeout(function () {
updatePieCharts();
}, 2000);
}],
templateUrl: '/app/components/pieCharts/pieCharts.html'
};
});

301
src/app/components/sidebar/_sidebar.scss Normal file
View File

@ -0,0 +1,301 @@
$sidebar-width: 180px;
$angle-left: "\f100";
$angle-right: "\f101";
.al-sidebar {
width: $sidebar-width;
position: absolute;
top: 0;
left: 0;
z-index: 904;
display: block;
min-height: 100%;
@include bg-translucent-dark(0.5);
transition: width 0.5s ease;
}
a.collapse-menu-link {
padding: 0px 0 0px 18px;
font-size: 13px;
color: $success;
@include bg-translucent-dark(0.5);
cursor: pointer;
display: block;
text-decoration: none;
line-height: 42px;
white-space: nowrap;
overflow: hidden;
&:hover {
text-decoration: none;
color: $warning;
}
i {
float: left;
margin-right: 18px;
width: 16px;
text-align: center;
line-height: 42px;
}
}
.al-sidebar-list {
margin: 0;
padding: 0;
list-style: none;
}
.al-sidebar-list-item {
display: block;
position: relative;
float: none;
padding: 0;
&.selected {
a.al-sidebar-list-link {
color: $primary;
b {
color: $primary;
}
}
}
}
a.al-sidebar-list-link {
display: block;
height: 42px;
padding-left: 18px;
text-shadow: none;
font-size: 13px;
text-decoration: none;
color: #ffffff;
line-height: 42px;
white-space: nowrap;
overflow: hidden;
&:hover {
color: $primary;
b {
color: $primary;
}
}
i {
margin-right: 18px;
width: 16px;
display: inline-block;
}
b {
display: block;
opacity: 1;
width: 14px;
height: 14px;
line-height: 14px;
text-shadow: none;
font-size: 18px;
position: absolute;
right: 10px;
top: 12px;
padding: 0;
text-align: center;
color: #cccccc;
}
}
@mixin default-sublist() {
margin: 0;
padding: 0;
list-style: none;
position: relative;
display: none;
&.expanded {
display: block;
}
li {
display: block;
float: none;
padding: 0;
border-bottom: none;
position: relative;
a {
display: block;
text-shadow: none;
font-size: 13px;
text-decoration: none;
color: #ffffff;
padding-left: 52px;
height: auto;
line-height: 29px;
&:hover {
color: $primary;
}
}
&.selected {
a {
color: $primary;
border: none;
}
}
}
}
.al-sidebar-sublist {
@include default-sublist();
}
.sidebar-hover-elem, .sidebar-select-elem {
width: 4px;
background: $primary;
position: absolute;
top: 0;
left: 176px;
height: 42px;
display: none;
transition: all 0.3s ease;
&.show-hover-elem {
height: 42px;
display: block;
}
}
.sidebar-select-elem {
display: block;
top: 94px;
}
@mixin sidebar-collapsed() {
.al-sidebar {
width: 52px;
.al-logo {
padding-left: 18px;
span {
padding-left: 18px;
}
}
.fa-angle-down, .fa-angle-up {
opacity: 0;
}
.al-sidebar-sublist {
position: absolute;
top: -1px;
left: 52px;
@include bg-translucent-dark(0.8);
width: 0;
display: block;
overflow: hidden;
transition: width 0.5s ease;
&.slide-right {
width: 135px;
}
&:before {
display: none;
}
li {
&:before {
display: none;
}
a {
padding-left: 18px;
padding-right: 18px;
min-width: 130px;
white-space: nowrap;
}
}
}
.collapse-menu-link {
.fa-angle-double-left:before {
content: $angle-right;
}
}
.sidebar-hover-elem, .sidebar-select-elem {
left: 48px;
}
}
}
@mixin sidebar-hidden() {
.al-sidebar {
width: 0;
.al-logo {
width: 180px;
}
a.collapse-menu-link {
display: block;
width: 18px;
position: relative;
cursor: pointer;
padding-left: 0px;
.fa-angle-double-left:before {
content: $angle-right;
}
}
.al-sidebar-list-block {
display: none;
}
}
}
.collapsed-sidebar {
@include layout-collapsed();
@include sidebar-collapsed();
}
@media (max-width: 1120px) and (min-width: $resXS) {
body {
@include layout-collapsed();
}
@include sidebar-collapsed();
}
@media (max-width: $resXS) {
@include sidebar-hidden();
.collapsed-sidebar {
@include sidebar-hidden();
}
}
.sidebar-full-width {
width: $sidebar-width;
.al-logo {
padding-left: 17px;
span {
padding-left: 0;
}
}
.fa-angle-down, .fa-angle-up {
opacity: 1;
}
.al-sidebar-list-block {
display: block;
}
.al-sidebar-sublist {
@include default-sublist();
top: auto;
left: auto;
background: none;
width: auto;
overflow: visible;
transition: none;
}
a.collapse-menu-link {
width: 100%;
position: relative;
padding-left: 18px;
.fa-angle-double-left:before {
content: $angle-left;
}
}
.sidebar-hover-elem, .sidebar-select-elem {
left: $sidebar-width - 4;
}
}
.sidebar-overlap {
background: rgba(0, 0, 0, .75);
@extend .sidebar-full-width;
}

38
src/app/components/sidebar/sidebar.html Normal file
View File

@ -0,0 +1,38 @@
<aside class="al-sidebar" ng-class="{'sidebar-overlap': showSidebar}">
<a href="#/dashboard" class="al-logo clearfix">
B<span>lur Admin</span>
</a>
<a href="javascript:void(0)" class="collapse-menu-link clearfix" ng-click="menuExpand()">
<i class="fa fa-angle-double-left"></i>
<span>Collapse Menu</span>
</a>
<div class="al-sidebar-list-block" ng-mouseleave="hideHoverElement()">
<ul class="al-sidebar-list">
<li ng-repeat="item in menuItems" class="al-sidebar-list-item"
ng-class="{'selected': item.selected, 'with-sub-menu': item.subMenu}" ng-mouseover="hoverItem($event, item)">
<a href="{{ item.root }}" ng-if="!item.subMenu" class="al-sidebar-list-link">
<i class="{{ item.icon }}"></i><span>{{ item.title }}</span>
</a>
<a ng-if="item.subMenu" href ng-click="toggleSubMenu($event, item); item.expanded = !item.expanded"
class="al-sidebar-list-link">
<i class="{{ item.icon }}"></i><span>{{ item.title }}</span>
<b class="fa" ng-class="{'fa-angle-up': item.expanded, 'fa-angle-down': !item.expanded}"
ng-if="item.subMenu"></b>
</a>
<ul ng-if="item.subMenu" class="al-sidebar-sublist" ng-class="{expanded: item.selected, 'slide-right': item.slideRight}">
<li ng-repeat="subitem in item.subMenu" ng-class="{selected: subitem.selected}">
<a href="{{ subitem.root }}">{{ subitem.title }}</a>
</li>
</ul>
</li>
</ul>
<div class="sidebar-select-elem" ng-style="{top: selectElemTop + 'px'}"></div>
<div class="sidebar-hover-elem" ng-style="{top: hoverElemTop + 'px'}"
ng-class="{'show-hover-elem': showHoverElem }"></div>
</div>
</aside>

181
src/app/components/sidebar/sidebar.js Normal file
View File

@ -0,0 +1,181 @@
'use strict';
app.directive('sidebar', function () {
return {
restrict: 'E',
templateUrl: '/app/components/sidebar/sidebar.html',
controller: ['$scope', '$element', '$window', '$timeout', '$location', function ($scope, $element, $window, $timeout, $location) {
var resWidthCollapseSidebar = 1200;
var resWidthHideSidebar = 500;
var body = $('body');
var collapsedClass = 'collapsed-sidebar';
$scope.menuItems = [
{
title: "Dashboard",
icon: "ion-android-home",
root: "#/dashboard"
},
{
title: "Charts",
icon: "ion-stats-bars",
root: "#/charts"
},
{
title: "Tables",
icon: "ion-grid",
root: "#/tables"
},
{
title: "Form Elements",
icon: "ion-compose",
subMenu: [
{
title: "Inputs",
root: "#/form-inputs"
},
{
title: "Form Layouts",
root: "#/form-layouts"
}
]
},
{
title: "UI Elements",
icon: "ion-android-laptop",
subMenu: [
{
title: "Typography",
root: "#/typography"
},
{
title: "Buttons",
root: "#/buttons"
},
{
title: "Icons",
root: "#/icons"
},
{
title: "Modals",
root: "#/modals"
}
]
},
{
title: "Maps",
icon: "ion-ios-location-outline",
root: "#/maps"
},
{
title: "User Profile",
icon: "ion-person",
root: "#/profile"
},
{
title: "Login Page",
icon: "ion-log-out",
root: "auth.html"
},
{
title: "404 Page",
icon: "ion-document",
root: "404.html"
}
];
function changeSelectElemTopValue() {
$timeout(function () {
var selectedItem = $('.al-sidebar-list-item.selected');
if (selectedItem) {
$scope.selectElemTop = selectedItem.position().top;
}
}, 101);
}
function selectMenuItem() {
$.each($scope.menuItems, function (index, value) {
value.selected = value.root === "#" + $location.$$url;
if (value.subMenu) {
var hasSelectedSubmenu = false;
$.each(value.subMenu, function (subIndex, subValue) {
subValue.selected = subValue.root === "#" + $location.$$url;
if (subValue.selected) {
hasSelectedSubmenu = true;
}
});
value.selected = hasSelectedSubmenu;
}
});
changeSelectElemTopValue();
}
selectMenuItem();
$scope.$on('$locationChangeSuccess', function () {
selectMenuItem();
});
$scope.menuExpand = function () {
if (window.innerWidth > resWidthCollapseSidebar) {
body.toggleClass(collapsedClass);
$scope.showSidebar = false;
} else {
body.removeClass(collapsedClass);
if (!$scope.selectElemTop) {
changeSelectElemTopValue();
}
if ($scope.showSidebar) {
$scope.showSidebar = false;
} else {
$timeout(function () {
$scope.showSidebar = true;
}, 20);
}
}
};
$scope.toggleSubMenu = function ($event, item) {
var submenu = $($event.currentTarget).next();
var isCollapsedSidebar = body.hasClass(collapsedClass) || (!$scope.showSidebar && window.innerWidth <= resWidthCollapseSidebar && window.innerWidth > resWidthHideSidebar);
if (isCollapsedSidebar) {
if (!item.slideRight) {
$timeout(function () {
item.slideRight = true;
$scope.anySlideRight = true;
}, 20);
}
} else {
submenu.slideToggle(100);
changeSelectElemTopValue();
}
};
window.onclick = function () {
$timeout(function () {
if ($scope.anySlideRight) {
$scope.menuItems.map(function(val){
return val.slideRight = false;
});
$scope.anySlideRight = false;
}
}, 10);
};
$scope.hoverItem = function ($event) {
$scope.showHoverElem = true;
$scope.hoverElemTop = ($event.currentTarget.getBoundingClientRect().top + $window.scrollY);
};
$scope.hideHoverElement = function () {
$scope.showHoverElem = false;
};
}]
};
});

75
src/app/components/widgets/_widgets.scss Normal file
View File

@ -0,0 +1,75 @@
.widgets {
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
}
.panel {
border-radius: 0px;
background-color: $panel-bg;
position: relative;
transition: all 0.2s ease;
margin-bottom: 24px;
&:hover {
background: $panel-bg-hover;
}
&.animated {
animation-duration: 0.5s;
}
}
.panel-heading, .panel-default > .panel-heading {
background-color: transparent;
border: none;
padding: 7px 22px 0px;
margin-bottom: -5px;
color: $default-text;
}
.panel-title {
font-weight: normal;
}
.panel-body {
padding: 16px 22px;
@include scrollbars(.5em, #ccc, #fff);
}
.full-width {
margin: 0 -22px -16px;
}
.horizontal-scroll {
overflow-x: auto;
overflow-y: visible;
}
.panel-subtitle {
font-size: 15px;
margin-bottom: 16px;
}
.panel-nav {
position: absolute;
top: 12px;
right: 15px;
z-index: 2;
i {
cursor: pointer;
font-size: 14px;
color: #bfbfbf;
margin-left: 11px;
display: inline-block;
&.fa-minus {
margin-bottom: -1px;
vertical-align: bottom;
}
&:hover {
color: $default-text;
}
}
}

14
src/app/components/widgets/widgets.html Normal file
View File

@ -0,0 +1,14 @@
<div class="widgets">
<div ng-repeat="widgetBlock in ngModel" ng-class="{'row': widgetBlock.widgets.length > 1}">
<div ng-repeat="widgetCol in widgetBlock.widgets" ng-class="{'col-md-6': widgetBlock.widgets.length === 2}" ng-model="widgetCol" class="widgets-block">
<div ng-repeat="widget in widgetCol" class="panel panel-default invisible" zoom-in>
<div class="panel-heading clearfix" ng-if="widget.title">
<h3 class="panel-title">{{ widget.title }}</h3>
</div>
<div class="panel-body">
<div ng-include="widget.url"></div>
</div>
</div>
</div>
</div>
</div>

14
src/app/components/widgets/widgets.js Normal file
View File

@ -0,0 +1,14 @@
'use strict';
app.directive('widgets', function () {
return {
restrict: 'EA',
scope: {
ngModel: "="
},
templateUrl: '/app/components/widgets/widgets.html',
replace: true,
link: function (scope, element, attrs, ctrls) {
}
};
});

78
src/app/pages/buttons/_buttonsPage.scss Normal file
View File

@ -0,0 +1,78 @@
.basic-btns {
padding-top: 8px;
margin-bottom: -8px;
h5 {
line-height: 35px;
font-size: 12px;
&.row-sm {
line-height: 30px;
}
&.row-xs {
line-height: 22px;
}
}
& > .row {
padding-bottom: 4px;
}
}
.btns-row {
& > div {
margin-bottom: 12px;
}
}
.btns-same-width-sm {
.btn {
width: 48px;
}
}
.btns-same-width-md {
.btn {
width: 79px;
}
}
.btns-same-width-lg {
.btn {
width: 112px;
}
}
ul.btn-list {
margin: 0 0 0 -18px;
padding: 0;
padding-top: 6px;
clear: both;
li {
margin: 0px 0 12px 18px;
padding: 0;
list-style: none;
float: left;
}
}
.btn-group-wrapper {
margin-bottom: 12px;
}
$btn-icon-size: 34px;
.btn-icon {
width: $btn-icon-size;
height: $btn-icon-size;
line-height: $btn-icon-size;
padding: 0;
text-align: center;
}
.btn-group-example {
float: left;
margin-right: 30px;
margin-bottom: 12px;
}
.btn-toolbar-example {
float: left;
}

1
src/app/pages/buttons/buttons.html Normal file
View File

@ -0,0 +1 @@
<widgets ng-model="widgetBlocks"></widgets>

47
src/app/pages/buttons/buttons.js Normal file
View File

@ -0,0 +1,47 @@
'use strict';
angular.module('BlurAdmin.buttonsPage', ['ngRoute'])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/buttons', {
templateUrl: '/app/pages/buttons/buttons.html',
controller: 'buttonsPageCtrl'
});
}])
.controller('buttonsPageCtrl', ['$scope', function ($scope) {
$scope.widgetBlocks = [
{
widgets: [
[
{
url: "/app/pages/buttons/widgets/buttons.html"
}
]
]
},
{
widgets: [
[
{
title: "Icon Buttons",
url: "/app/pages/buttons/widgets/iconButtons.html"
},
{
title: "Large Buttons",
url: "/app/pages/buttons/widgets/largeButtons.html"
}
],
[
{
title: "Button Dropdowns",
url: "/app/pages/buttons/widgets/dropdowns.html"
},
{
title: "Button Groups",
url: "/app/pages/buttons/widgets/buttonGroups.html"
}
]
]
}
];
}]);

26
src/app/pages/buttons/widgets/buttonGroups.html Normal file
View File

@ -0,0 +1,26 @@
<div class="btn-group-example">
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-danger">Left</button>
<button type="button" class="btn btn-danger">Middle</button>
<button type="button" class="btn btn-danger">Right</button>
</div>
</div>
<div class="btn-toolbar-example">
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group" role="group" aria-label="First group">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
<button type="button" class="btn btn-default">3</button>
<button type="button" class="btn btn-default">4</button>
</div>
<div class="btn-group" role="group" aria-label="Second group">
<button type="button" class="btn btn-default">5</button>
<button type="button" class="btn btn-default">6</button>
<button type="button" class="btn btn-default">7</button>
</div>
<div class="btn-group" role="group" aria-label="Third group">
<button type="button" class="btn btn-default">8</button>
</div>
</div>
</div>

57
src/app/pages/buttons/widgets/buttons.html Normal file
View File

@ -0,0 +1,57 @@
<div class="basic-btns">
<div class="row">
<div class="col-md-2"><h5>Default button</h5></div>
<div class="col-md-10">
<div class="row btns-row btns-same-width-md">
<div class="col-sm-2 col-xs-4"><button type="button" class="btn btn-primary">Primary</button></div>
<div class="col-sm-2 col-xs-4"><button type="button" class="btn btn-default">Default</button></div>
<div class="col-sm-2 col-xs-4"><button type="button" class="btn btn-success">Success</button></div>
<div class="col-sm-2 col-xs-4"><button type="button" class="btn btn-info">Info</button></div>
<div class="col-sm-2 col-xs-4"><button type="button" class="btn btn-warning">Warning</button></div>
<div class="col-sm-2 col-xs-4"><button type="button" class="btn btn-danger">Danger</button></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-2"><h5 class="row-sm">Small button</h5></div>
<div class="col-md-10">
<div class="row btns-row btns-same-width-md">
<div class="col-sm-2 col-xs-4"><button type="button" class="btn btn-primary btn-sm">Primary</button></div>
<div class="col-sm-2 col-xs-4"><button type="button" class="btn btn-default btn-sm">Default</button></div>
<div class="col-sm-2 col-xs-4"><button type="button" class="btn btn-success btn-sm">Success</button></div>
<div class="col-sm-2 col-xs-4"><button type="button" class="btn btn-info btn-sm">Info</button></div>
<div class="col-sm-2 col-xs-4"><button type="button" class="btn btn-warning btn-sm">Warning</button></div>
<div class="col-sm-2 col-xs-4"><button type="button" class="btn btn-danger btn-sm">Danger</button></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-2"><h5 class="row-xs">Extra small button</h5></div>
<div class="col-md-10">
<div class="row btns-row btns-same-width-md">
<div class="col-sm-2 col-xs-4"><button type="button" class="btn btn-primary btn-xs">Primary</button></div>
<div class="col-sm-2 col-xs-4"><button type="button" class="btn btn-default btn-xs">Default</button></div>
<div class="col-sm-2 col-xs-4"><button type="button" class="btn btn-success btn-xs">Success</button></div>
<div class="col-sm-2 col-xs-4"><button type="button" class="btn btn-info btn-xs">Info</button></div>
<div class="col-sm-2 col-xs-4"><button type="button" class="btn btn-warning btn-xs">Warning</button></div>
<div class="col-sm-2 col-xs-4"><button type="button" class="btn btn-danger btn-xs">Danger</button></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-2"><h5>Disabled button</h5></div>
<div class="col-md-10">
<div class="row btns-row btns-same-width-md">
<div class="col-sm-2 col-xs-4"><button type="button" class="btn btn-primary" disabled="disabled">Primary</button></div>
<div class="col-sm-2 col-xs-4"><button type="button" class="btn btn-default" disabled="disabled">Default</button></div>
<div class="col-sm-2 col-xs-4"><button type="button" class="btn btn-success" disabled="disabled">Success</button></div>
<div class="col-sm-2 col-xs-4"><button type="button" class="btn btn-info" disabled="disabled">Info</button></div>
<div class="col-sm-2 col-xs-4"><button type="button" class="btn btn-warning" disabled="disabled">Warning</button></div>
<div class="col-sm-2 col-xs-4"><button type="button" class="btn btn-danger" disabled="disabled">Danger</button></div>
</div>
</div>
</div>
</div>

187
src/app/pages/buttons/widgets/dropdowns.html Normal file
View File

@ -0,0 +1,187 @@
<div class="row btns-row">
<div class="col-sm-4 col-xs-6">
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Primary <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href>Action</a></li>
<li><a href>Another action</a></li>
<li><a href>Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href>Separated link</a></li>
</ul>
</div>
</div>
<div class="col-sm-4 col-xs-6">
<div class="btn-group">
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Success <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href>Action</a></li>
<li><a href>Another action</a></li>
<li><a href>Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href>Separated link</a></li>
</ul>
</div>
</div>
<div class="col-sm-4 col-xs-6">
<div class="btn-group">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Info <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href>Action</a></li>
<li><a href>Another action</a></li>
<li><a href>Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href>Separated link</a></li>
</ul>
</div>
</div>
<div class="col-sm-4 col-xs-6">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Default <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href>Action</a></li>
<li><a href>Another action</a></li>
<li><a href>Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href>Separated link</a></li>
</ul>
</div>
</div>
<div class="col-sm-4 col-xs-6">
<div class="btn-group">
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Warning <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href>Action</a></li>
<li><a href>Another action</a></li>
<li><a href>Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href>Separated link</a></li>
</ul>
</div>
</div>
<div class="col-sm-4 col-xs-6">
<div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Danger <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href>Action</a></li>
<li><a href>Another action</a></li>
<li><a href>Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href>Separated link</a></li>
</ul>
</div>
</div>
</div>
<h5 class="panel-subtitle">Split button dropdowns</h5>
<div class="row btns-row">
<div class="col-sm-4 col-xs-6">
<div class="btn-group">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a href>Action</a></li>
<li><a href>Another action</a></li>
<li><a href>Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href>Separated link</a></li>
</ul>
</div>
</div>
<div class="col-sm-4 col-xs-6">
<div class="btn-group">
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a href>Action</a></li>
<li><a href>Another action</a></li>
<li><a href>Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href>Separated link</a></li>
</ul>
</div>
</div>
<div class="col-sm-4 col-xs-6">
<div class="btn-group">
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a href>Action</a></li>
<li><a href>Another action</a></li>
<li><a href>Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href>Separated link</a></li>
</ul>
</div>
</div>
<div class="col-sm-4 col-xs-6">
<div class="btn-group">
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a href>Action</a></li>
<li><a href>Another action</a></li>
<li><a href>Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href>Separated link</a></li>
</ul>
</div>
</div>
<div class="col-sm-4 col-xs-6">
<div class="btn-group">
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a href>Action</a></li>
<li><a href>Another action</a></li>
<li><a href>Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href>Separated link</a></li>
</ul>
</div>
</div>
<div class="col-sm-4 col-xs-6">
<div class="btn-group">
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a href>Action</a></li>
<li><a href>Another action</a></li>
<li><a href>Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href>Separated link</a></li>
</ul>
</div>
</div>
</div>

19
src/app/pages/buttons/widgets/iconButtons.html Normal file
View File

@ -0,0 +1,19 @@
<ul class="btn-list clearfix">
<li><button type="button" class="btn btn-primary btn-icon"><i class="ion-android-download"></i></button></li>
<li><button type="button" class="btn btn-default btn-icon"><i class="ion-stats-bars"></i></button></li>
<li><button type="button" class="btn btn-success btn-icon"><i class="ion-android-checkmark-circle"></i></button></li>
<li><button type="button" class="btn btn-info btn-icon"><i class="ion-information"></i></button></li>
<li><button type="button" class="btn btn-warning btn-icon"><i class="ion-android-warning"></i></button></li>
<li><button type="button" class="btn btn-danger btn-icon"><i class="ion-nuclear"></i></button></li>
</ul>
<h5 class="panel-subtitle">Buttons with icons</h5>
<ul class="btn-list clearfix">
<li><button type="button" class="btn btn-primary btn-with-icon"><i class="ion-android-download"></i>Primary</button></li>
<li><button type="button" class="btn btn-default btn-with-icon"><i class="ion-stats-bars"></i>Default</button></li>
<li><button type="button" class="btn btn-success btn-with-icon"><i class="ion-android-checkmark-circle"></i>Success</button></li>
<li><button type="button" class="btn btn-info btn-with-icon"><i class="ion-information"></i>Info</button></li>
<li><button type="button" class="btn btn-warning btn-with-icon"><i class="ion-android-warning"></i>Warning</button></li>
<li><button type="button" class="btn btn-danger btn-with-icon"><i class="ion-nuclear"></i>Danger</button></li>
</ul>

8
src/app/pages/buttons/widgets/largeButtons.html Normal file
View File

@ -0,0 +1,8 @@
<div class="row btns-row btns-same-width-lg">
<div class="col-sm-4 col-xs-6"><button type="button" class="btn btn-primary btn-lg">Primary</button></div>
<div class="col-sm-4 col-xs-6"><button type="button" class="btn btn-success btn-lg">Success</button></div>
<div class="col-sm-4 col-xs-6"><button type="button" class="btn btn-info btn-lg">Info</button></div>
<div class="col-sm-4 col-xs-6"><button type="button" class="btn btn-default btn-lg">Default</button></div>
<div class="col-sm-4 col-xs-6"><button type="button" class="btn btn-warning btn-lg">Warning</button></div>
<div class="col-sm-4 col-xs-6"><button type="button" class="btn btn-danger btn-lg">Danger</button></div>
</div>

61
src/app/pages/charts/_chartsPage.scss Normal file
View File

@ -0,0 +1,61 @@
.admin-chart {
width: 100%;
height: 500px;
font-size: 11px;
}
.amcharts-export-menu-top-right {
top: 10px;
right: 0;
}
#funnelChart, #lineChart {
height: 360px;
}
#pieChart {
height: 400px;
}
#pieChart {
max-width: 1120px;
}
.amcharts-pie-slice {
transform: scale(1);
transform-origin: 50% 50%;
transition-duration: 0.3s;
transition: all .3s ease-out;
cursor: pointer;
box-shadow: 0 0 30px 0 #000;
}
.amcharts-pie-slice:hover {
transform: scale(1.1);
filter: url(#shadow);
}
.amChartsButtonSelected {
background-color: #CC0000;
border: 1px solid #CC0000;
color: #FFFFFF;
-moz-border-radius: 5px;
border-radius: 5px;
margin: 1px;
}
.amChartsButton {
background-color: #EEEEEE;
border: 1px solid #CCCCCC;
color: #000000;
border-radius: 5px;
margin: 1px;
}
.amChartsCompareList {
border: 1px solid #CCCCCC;
}
.pie-chart-panel {
padding: 0;
}

1
src/app/pages/charts/charts.html Normal file
View File

@ -0,0 +1 @@
<widgets ng-model="widgetBlocks"></widgets>

48
src/app/pages/charts/charts.js Normal file
View File

@ -0,0 +1,48 @@
'use strict';
angular.module('BlurAdmin.chartsPage', ['ngRoute'])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/charts', {
templateUrl: '/app/pages/charts/charts.html',
controller: 'chartsPageCtrl'
});
}])
.controller('chartsPageCtrl', ['$scope', function ($scope) {
$scope.widgetBlocks = [
{
widgets: [
[
{
title: "Bar Chart",
url: '/app/pages/charts/widgets/barChart/barChart.html'
},
{
title: 'Line Chart',
url: '/app/pages/charts/widgets/lineChart/lineChart.html'
}
],
[
{
title: 'Area Chart',
url: '/app/pages/charts/widgets/areaChart/areaChart.html'
},
{
title: 'Funnel Chart',
url: '/app/pages/charts/widgets/funnelChart/funnelChart.html'
}
]
]
},
{
widgets: [
[
{
title: 'Pie Chart',
url: '/app/pages/charts/widgets/pieChart/pieChart.html'
}
]
]
}
];
}]);

1
src/app/pages/charts/widgets/areaChart/areaChart.html Normal file
View File

@ -0,0 +1 @@
<div id="areaChart" class="admin-chart" ng-controller="areaChartCtrl"></div>

133
src/app/pages/charts/widgets/areaChart/areaChart.js Normal file
View File

@ -0,0 +1,133 @@
'use strict';
app.controller('areaChartCtrl', ['$scope', '$timeout', '$element', function($scope, $timeout, $element) {
var id = $element[0].getAttribute('id');
var areaChart = AmCharts.makeChart(id, {
"type": "serial",
"theme": "blur",
"dataProvider": [
{
"lineColor": colorDanger,
"date": "2012-01-01",
"duration": 408
},
{
"date": "2012-01-02",
"duration": 482
},
{
"date": "2012-01-03",
"duration": 562
},
{
"date": "2012-01-04",
"duration": 379
},
{
"lineColor": colorSuccess,
"date": "2012-01-05",
"duration": 501
},
{
"date": "2012-01-06",
"duration": 443
},
{
"date": "2012-01-07",
"duration": 405
},
{
"date": "2012-01-08",
"duration": 309,
"lineColor": colorPrimary
},
{
"date": "2012-01-09",
"duration": 287
},
{
"date": "2012-01-10",
"duration": 485
},
{
"date": "2012-01-11",
"duration": 890
},
{
"date": "2012-01-12",
"duration": 810
}
],
"balloon": {
"cornerRadius": 6,
"horizontalPadding": 15,
"verticalPadding": 10
},
"valueAxes": [
{
"duration": "mm",
"durationUnits": {
"hh": "h ",
"mm": "min"
},
"axisAlpha": 0
}
],
"graphs": [
{
"bullet": "square",
"bulletBorderAlpha": 1,
"bulletBorderThickness": 1,
"fillAlphas": 0.3,
"fillColorsField": "lineColor",
"legendValueText": "[[value]]",
"lineColorField": "lineColor",
"title": "duration",
"valueField": "duration"
}
],
"chartCursor": {
"categoryBalloonDateFormat": "YYYY MMM DD",
"cursorAlpha": 0,
"fullWidth": true
},
"dataDateFormat": "YYYY-MM-DD",
"categoryField": "date",
"categoryAxis": {
"dateFormats": [
{
"period": "DD",
"format": "DD"
},
{
"period": "WW",
"format": "MMM DD"
},
{
"period": "MM",
"format": "MMM"
},
{
"period": "YYYY",
"format": "YYYY"
}
],
"parseDates": true,
"autoGridCount": false,
"axisColor": "#555555",
"gridAlpha": 0,
"gridCount": 50
},
"export": {
"enabled": true
},
"pathToImages": '/release/img/'
});
areaChart.addListener("dataUpdated", zoomAreaChart);
function zoomAreaChart() {
areaChart.zoomToDates(new Date(2012, 0, 3), new Date(2012, 0, 11));
}
}]);

1
src/app/pages/charts/widgets/barChart/barChart.html Normal file
View File

@ -0,0 +1 @@
<div id="barChart" class="admin-chart" ng-controller="barChartCtrl"></div>

75
src/app/pages/charts/widgets/barChart/barChart.js Normal file
View File

@ -0,0 +1,75 @@
'use strict';
app.controller('barChartCtrl', ['$scope', '$timeout', '$element', function($scope, $timeout, $element) {
var id = $element[0].getAttribute('id');
var barChart = AmCharts.makeChart(id, {
"type": "serial",
"theme": "blur",
"dataProvider": [
{
"country": "USA",
"visits": 3025,
"color": colorPrimary
},
{
"country": "China",
"visits": 1882,
"color": colorDanger
},
{
"country": "Japan",
"visits": 1809,
"color": colorPrimaryLight
},
{
"country": "Germany",
"visits": 1322,
"color": colorSuccess
},
{
"country": "UK",
"visits": 1122,
"color": colorWarning
},
{
"country": "France",
"visits": 1114,
"color": colorDefault
}
],
"valueAxes": [
{
"axisAlpha": 0,
"position": "left",
"title": "Visitors from country"
}
],
"startDuration": 1,
"graphs": [
{
"balloonText": "<b>[[category]]: [[value]]</b>",
"fillColorsField": "color",
"fillAlphas": 0.9,
"lineAlpha": 0.2,
"type": "column",
"valueField": "visits"
}
],
"chartCursor": {
"categoryBalloonEnabled": false,
"cursorAlpha": 0,
"zoomable": false
},
"categoryField": "country",
"categoryAxis": {
"gridPosition": "start",
"labelRotation": 45
},
"export": {
"enabled": true
},
"creditsPosition": "top-right",
"pathToImages": '/release/img/'
});
}]);

1
src/app/pages/charts/widgets/funnelChart/funnelChart.html Normal file
View File

@ -0,0 +1 @@
<div id="funnelChart" class="admin-chart" ng-controller="funnelChartCtrl"></div>

56
src/app/pages/charts/widgets/funnelChart/funnelChart.js Normal file
View File

@ -0,0 +1,56 @@
'use strict';
app.controller('funnelChartCtrl', ['$scope', '$timeout', '$element', function($scope, $timeout, $element) {
var id = $element[0].getAttribute('id');
var funnelChart = AmCharts.makeChart(id, {
"type": "funnel",
"theme": "blur",
"dataProvider": [
{
"title": "Website visits",
"value": 300
},
{
"title": "Downloads",
"value": 123
},
{
"title": "Requested prices",
"value": 98
},
{
"title": "Contaced",
"value": 72
},
{
"title": "Purchased",
"value": 35
},
{
"title": "Asked for support",
"value": 25
},
{
"title": "Purchased more",
"value": 18
}
],
"titleField": "title",
"marginRight": 160,
"marginLeft": 15,
"labelPosition": "right",
"funnelAlpha": 0.9,
"valueField": "value",
"startX": 0,
"neckWidth": "0%",
"startAlpha": 0,
"outlineThickness": 1,
"neckHeight": "0%",
"balloonText": "[[title]]:<b>[[value]]</b>",
"export": {
"enabled": true
},
"creditsPosition": "bottom-left",
"pathToImages": '/release/img/'
});
}]);

1
src/app/pages/charts/widgets/lineChart/lineChart.html Normal file
View File

@ -0,0 +1 @@
<div id="lineChart" class="admin-chart" ng-controller="lineChartCtrl"></div>

143
src/app/pages/charts/widgets/lineChart/lineChart.js Normal file
View File

@ -0,0 +1,143 @@
'use strict';
app.controller('lineChartCtrl', ['$scope', '$timeout', '$element', function($scope, $timeout, $element) {
var id = $element[0].getAttribute('id');
var lineChart = AmCharts.makeChart(id, {
"type": "serial",
"theme": "blur",
"marginTop": 0,
"marginRight": 15,
"dataProvider": [
{
"year": "1990",
"value": -0.17
},
{
"year": "1991",
"value": -0.254
},
{
"year": "1992",
"value": 0.019
},
{
"year": "1993",
"value": -0.063
},
{
"year": "1994",
"value": 0.005
},
{
"year": "1995",
"value": 0.077
},
{
"year": "1996",
"value": 0.12
},
{
"year": "1997",
"value": 0.011
},
{
"year": "1998",
"value": 0.177
},
{
"year": "1999",
"value": -0.021
},
{
"year": "2000",
"value": -0.037
},
{
"year": "2001",
"value": 0.03
},
{
"year": "2002",
"value": 0.179
},
{
"year": "2003",
"value": 0.2
},
{
"year": "2004",
"value": 0.180
},
{
"year": "2005",
"value": 0.21
}
],
"valueAxes": [
{
"axisAlpha": 0,
"position": "left"
}
],
"graphs": [
{
"id": "g1",
"balloonText": "[[value]]",
"bullet": "round",
"bulletSize": 8,
"lineColor": colorDanger,
"lineThickness": 1,
"negativeLineColor": colorPrimary,
"type": "smoothedLine",
"valueField": "value"
}
],
"chartScrollbar": {
"graph": "g1",
"gridAlpha": 0,
"color": "#888888",
"scrollbarHeight": 55,
"backgroundAlpha": 0,
"selectedBackgroundAlpha": 0.1,
"selectedBackgroundColor": "#888888",
"graphFillAlpha": 0,
"autoGridCount": true,
"selectedGraphFillAlpha": 0,
"graphLineAlpha": 0.2,
"graphLineColor": "#c2c2c2",
"selectedGraphLineColor": "#888888",
"selectedGraphLineAlpha": 1
},
"chartCursor": {
"categoryBalloonDateFormat": "YYYY",
"cursorAlpha": 0,
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"valueLineAlpha": 0.5,
"fullWidth": true
},
"dataDateFormat": "YYYY",
"categoryField": "year",
"categoryAxis": {
"minPeriod": "YYYY",
"parseDates": true,
"minorGridAlpha": 0.1,
"minorGridEnabled": true
},
"export": {
"enabled": true
},
"creditsPosition": "bottom-right",
"pathToImages": '/release/img/'
});
lineChart.addListener("rendered", zoomChart);
if (lineChart.zoomChart) {
lineChart.zoomChart();
}
function zoomChart() {
lineChart.zoomToIndexes(Math.round(chart.dataProvider.length * 0.4), Math.round(chart.dataProvider.length * 0.55));
}
}]);

1
src/app/pages/charts/widgets/pieChart/pieChart.html Normal file
View File

@ -0,0 +1 @@
<div id="pieChart" class="admin-chart" ng-controller="pieChartCtrl"></div>

105
src/app/pages/charts/widgets/pieChart/pieChart.js Normal file
View File

@ -0,0 +1,105 @@
'use strict';
app.controller('pieChartCtrl', ['$scope', '$timeout', '$element', function($scope, $timeout, $element) {
var id = $element[0].getAttribute('id');
var pieChart = AmCharts.makeChart(id, {
"type": "pie",
"startDuration": 0,
"theme": "blur",
"addClassNames": true,
"legend": {
"position": "right",
"marginRight": 100,
"autoMargins": false
},
"innerRadius": "40%",
"defs": {
"filter": [
{
"id": "shadow",
"width": "200%",
"height": "200%",
"feOffset": {
"result": "offOut",
"in": "SourceAlpha",
"dx": 0,
"dy": 0
},
"feGaussianBlur": {
"result": "blurOut",
"in": "offOut",
"stdDeviation": 5
},
"feBlend": {
"in": "SourceGraphic",
"in2": "blurOut",
"mode": "normal"
}
}
]
},
"dataProvider": [
{
"country": "Lithuania",
"litres": 501.9
},
{
"country": "Czech Republic",
"litres": 301.9
},
{
"country": "Ireland",
"litres": 201.1
},
{
"country": "Germany",
"litres": 165.8
},
{
"country": "Australia",
"litres": 139.9
},
{
"country": "Austria",
"litres": 128.3
},
{
"country": "UK",
"litres": 99
},
{
"country": "Belgium",
"litres": 60
}
],
"valueField": "litres",
"titleField": "country",
"export": {
"enabled": true
},
"creditsPosition": "bottom-left",
autoMargins: false,
marginTop: 10,
marginBottom: 0,
marginLeft: 0,
marginRight: 0,
pullOutRadius: 0,
"pathToImages": '/release/img/'
});
pieChart.addListener("init", handleInit);
pieChart.addListener("rollOverSlice", function (e) {
handleRollOver(e);
});
function handleInit() {
pieChart.legend.addListener("rollOverItem", handleRollOver);
}
function handleRollOver(e) {
var wedge = e.dataItem.wedge.node;
wedge.parentNode.appendChild(wedge);
}
}]);

1
src/app/pages/dashboard/dashboard.html Normal file
View File

@ -0,0 +1 @@
<widgets ng-model="widgetBlocks"></widgets>

47
src/app/pages/dashboard/dashboard.js Normal file
View File

@ -0,0 +1,47 @@
'use strict';
angular.module('BlurAdmin.dashboard', ['ngRoute'])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/dashboard', {
templateUrl: '/app/pages/dashboard/dashboard.html',
controller: 'DashboardCtrl'
});
}])
.controller('DashboardCtrl', ['$scope', function ($scope) {
$scope.widgetBlocks = [
{
widgets: [
[
{
title: "Users by Country",
url: "/app/pages/dashboard/widgets/amChartMap/amChartMap.html"
},
{
title: "Revenue",
url: "/app/pages/dashboard/widgets/amChart/amChart.html"
},
{
title: "My Calendar",
url: "/app/pages/dashboard/widgets/calendar/calendar.html"
}
],
[
{
title: "Acquisition Channels",
url: "/app/pages/dashboard/widgets/chart/chart.html"
},
{
title: "Timeline",
url: "/app/pages/dashboard/widgets/timeline/timeline.html"
},
{
title: "ToDo List",
url: "/app/pages/dashboard/widgets/todo/todo.html"
}
]
]
}
];
}]);

4
src/app/pages/dashboard/widgets/amChart/_amChart.scss Normal file
View File

@ -0,0 +1,4 @@
#amchart {
width: 100%;
height: 400px;
}

1
src/app/pages/dashboard/widgets/amChart/amChart.html Normal file
View File

@ -0,0 +1 @@
<div id="amchart" style="" ng-controller="amChartCtrl"></div>

142
src/app/pages/dashboard/widgets/amChart/amChart.js Normal file
View File

@ -0,0 +1,142 @@
'use strict';
app.controller('amChartCtrl', ['$scope', '$timeout', '$element', function ($scope, $timeout, $element) {
var chartData = [
{ "date": new Date(2011, 0), "value": -30700},
{ "date": new Date(2011, 1), "value": -16800},
{ "date": new Date(2011, 2), "value": -7300},
{ "date": new Date(2011, 3), "value": -2700},
{ "date": new Date(2011, 4), "value": -25100},
{ "date": new Date(2011, 5), "value": -28100},
{ "date": new Date(2011, 6), "value": -34800},
{ "date": new Date(2011, 7), "value": -7400},
{ "date": new Date(2011, 8), "value": -1100},
{ "date": new Date(2011, 9), "value": -7400},
{ "date": new Date(2011, 10), "value": -12400},
{ "date": new Date(2011, 11), "value": -2400},
{ "date": new Date(2012, 0), "value": -2200},
{ "date": new Date(2012, 1), "value": 0},
{ "date": new Date(2012, 2), "value": -29600},
{ "date": new Date(2012, 3), "value": -21700},
{ "date": new Date(2012, 4), "value": -14700},
{ "date": new Date(2012, 5), "value": -1500},
{ "date": new Date(2012, 6), "value": -1600},
{ "date": new Date(2012, 7), "value": -1100},
{ "date": new Date(2012, 8), "value": -6800},
{ "date": new Date(2012, 9), "value": -1900},
{ "date": new Date(2012, 10), "value": -5600},
{ "date": new Date(2012, 11), "value": -7700},
{ "date": new Date(2013, 0), "value": -21300},
{ "date": new Date(2013, 1), "value": -13700},
{ "date": new Date(2013, 2), "value": -300},
{ "date": new Date(2013, 3), "value": 10900},
{ "date": new Date(2013, 4), "value": 20300},
{ "date": new Date(2013, 5), "value": 25500},
{ "date": new Date(2013, 6), "value": 10700},
{ "date": new Date(2013, 7), "value": -4200},
{ "date": new Date(2013, 8), "value": -5000},
{ "date": new Date(2013, 9), "value": 17700},
{ "date": new Date(2013, 10), "value": 25100},
{ "date": new Date(2013, 11), "value": 37000},
{ "date": new Date(2014, 0), "value": 300},
{ "date": new Date(2014, 1), "value": 17900},
{ "date": new Date(2014, 2), "value": 1800},
{ "date": new Date(2014, 3), "value": 10400},
{ "date": new Date(2014, 4), "value": 25500},
{ "date": new Date(2014, 5), "value": 2100},
{ "date": new Date(2014, 6), "value": 6500},
{ "date": new Date(2014, 7), "value": 1100},
{ "date": new Date(2014, 8), "value": 17200},
{ "date": new Date(2014, 9), "value": 26900},
{ "date": new Date(2014, 10), "value": 14100},
{ "date": new Date(2014, 11), "value": 35300},
{ "date": new Date(2015, 0), "value": 54800},
{ "date": new Date(2015, 1), "value": 29800},
{ "date": new Date(2015, 2), "value": 26700},
{ "date": new Date(2015, 3), "value": 41100},
{ "date": new Date(2015, 4), "value": 46200},
{ "date": new Date(2015, 5), "value": 4700},
{ "date": new Date(2015, 6), "value": 44500},
{ "date": new Date(2015, 7), "value": 4700}
];
var id = $element[0].getAttribute('id');
var chart = AmCharts.makeChart(id, {
"type": "serial",
"theme": "blur",
"marginTop": 0,
"marginRight": 15,
"dataProvider": chartData,
"valueAxes": [
{
"gridAlpha": 0
}
],
"graphs": [
{
"id": "g1",
"bullet": "round",
"bulletSize": 8,
"useLineColorForBulletBorder": true,
"lineColor": colorSuccess,
"lineThickness": 1,
"negativeLineColor": colorDanger,
"type": "smoothedLine",
"valueField": "value",
"fillAlphas": 0.3,
"fillColorsField": "lineColor"
}
],
"chartScrollbar": {
"graph": "g1",
"gridAlpha": 0,
"color": "#888888",
"scrollbarHeight": 55,
"backgroundAlpha": 0,
"selectedBackgroundAlpha": 0.1,
"selectedBackgroundColor": "#ffffff",
"graphFillAlpha": 0,
"autoGridCount": true,
"selectedGraphFillAlpha": 0,
"graphLineAlpha": 0.2,
"graphLineColor": "#c2c2c2",
"selectedGraphLineColor": "#888888",
"selectedGraphLineAlpha": 1
},
"chartCursor": {
"categoryBalloonDateFormat": "MM YYYY",
"categoryBalloonColor": "#4285F4",
"categoryBalloonAlpha": 0.7,
"cursorAlpha": 0,
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"valueLineAlpha": 0.5
},
"dataDateFormat": "MM YYYY",
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
"gridAlpha": 0
},
"export": {
"enabled": true
},
"creditsPosition": "bottom-right",
"zoomOutButton": {
backgroundColor: '#fff',
backgroundAlpha: 0
},
"zoomOutText": "",
"pathToImages": '/release/img/'
});
function zoomChart() {
chart.zoomToDates(new Date(2013, 3), new Date(2013, 10));
}
chart.addListener("rendered", zoomChart);
zoomChart();
if (chart.zoomChart) {
chart.zoomChart();
}
}]);

4
src/app/pages/dashboard/widgets/amChartMap/_amChartMap.scss Normal file
View File

@ -0,0 +1,4 @@
#amChartMap {
width: 100%;
height: 400px;
}

1
src/app/pages/dashboard/widgets/amChartMap/amChartMap.html Normal file
View File

@ -0,0 +1 @@
<div id="amChartMap" ng-controller="amMapCtrl"></div>

263
src/app/pages/dashboard/widgets/amChartMap/amChartMap.js Normal file
View File

@ -0,0 +1,263 @@
'use strict';
app.controller('amMapCtrl', ['$scope', '$timeout', '$element', function ($scope, $timeout, $element) {
var id = $element[0].getAttribute('id');
var map = AmCharts.makeChart(id, {
type: "map",
"theme": "blur",
dataProvider: {
map: "worldLow",
zoomLevel: 3.5,
zoomLongitude: 10,
zoomLatitude: 52,
areas: [
{
title: "Austria",
id: "AT",
color: colorPrimary,
customData: "1 244",
groupId: "1"
},
{
title: "Ireland",
id: "IE",
color: colorPrimary,
customData: "1 342",
groupId: "1"
},
{
title: "Denmark",
id: "DK",
color: colorPrimary,
customData: "1 973",
groupId: "1"
},
{
title: "Finland",
id: "FI",
color: colorPrimary,
customData: "1 573",
groupId: "1"
},
{
title: "Sweden",
id: "SE",
color: colorPrimary,
customData: "1 084",
groupId: "1"
},
{
title: "Great Britain",
id: "GB",
color: colorPrimary,
customData: "1 452",
groupId: "1"
},
{
title: "Italy",
id: "IT",
color: colorPrimary,
customData: "1 321",
groupId: "1"
},
{
title: "France",
id: "FR",
color: colorPrimary,
customData: "1 112",
groupId: "1"
},
{
title: "Spain",
id: "ES",
color: colorPrimary,
customData: "1 865",
groupId: "1"
},
{
title: "Greece",
id: "GR",
color: colorPrimary,
customData: "1 453",
groupId: "1"
},
{
title: "Germany",
id: "DE",
color: colorPrimary,
customData: "1 957",
groupId: "1"
},
{
title: "Belgium",
id: "BE",
color: colorPrimary,
customData: "1 011",
groupId: "1"
},
{
title: "Luxembourg",
id: "LU",
color: colorPrimary,
customData: "1 011",
groupId: "1"
},
{
title: "Netherlands",
id: "NL",
color: colorPrimary,
customData: "1 213",
groupId: "before2004"
},
{
title: "Portugal",
id: "PT",
color: colorPrimary,
customData: "1 291",
groupId: "1"
},
{
title: "Lithuania",
id: "LT",
color: colorSuccessLight,
customData: "567",
groupId: "2"
},
{
title: "Latvia",
id: "LV",
color: colorSuccessLight,
customData: "589",
groupId: "2"
},
{
title: "Czech Republic ",
id: "CZ",
color: colorSuccessLight,
customData: "785",
groupId: "2"
},
{
title: "Slovakia",
id: "SK",
color: colorSuccessLight,
customData: "965",
groupId: "2"
},
{
title: "Estonia",
id: "EE",
color: colorSuccessLight,
customData: "685",
groupId: "2"
},
{
title: "Hungary",
id: "HU",
color: colorSuccessLight,
customData: "854",
groupId: "2"
},
{
title: "Cyprus",
id: "CY",
color: colorSuccessLight,
customData: "754",
groupId: "2"
},
{
title: "Malta",
id: "MT",
color: colorSuccessLight,
customData: "867",
groupId: "2"
},
{
title: "Poland",
id: "PL",
color: colorSuccessLight,
customData: "759",
groupId: "2"
},
{
title: "Romania",
id: "RO",
color: colorSuccess,
customData: "302",
groupId: "3"
},
{
title: "Bulgaria",
id: "BG",
color: colorSuccess,
customData: "102",
groupId: "3"
},
{
title: "Slovenia",
id: "SI",
color: colorDanger,
customData: "23",
groupId: "4"
},
{
title: "Croatia",
id: "HR",
color: colorDanger,
customData: "96",
groupId: "4"
}
]
},
areasSettings: {
rollOverOutlineColor: "#FFFFFF",
rollOverColor: colorPrimaryDark,
alpha: 0.8,
unlistedAreasAlpha: 0.1,
balloonText: "[[title]]: [[customData]] users"
},
legend: {
width: "100%",
marginRight: 27,
marginLeft: 27,
equalWidths: false,
backgroundAlpha: 0.5,
backgroundColor: "#FFFFFF",
borderColor: "#ffffff",
borderAlpha: 1,
top: 362,
left: 0,
horizontalGap: 10,
data: [
{
title: "over 1 000 users",
color: colorPrimary
},
{
title: "500 - 1 000 users",
color: colorSuccessLight
},
{
title: "100 - 500 users",
color: colorSuccess
},
{
title: "0 - 100 users",
color: colorDanger
}
]
},
"export": {
"enabled": true
},
"creditsPosition": "bottom-right",
"pathToImages": '/release/img/'
});
}]);

718
src/app/pages/dashboard/widgets/calendar/_calendar.scss Normal file
View File

@ -0,0 +1,718 @@
#calendar {
@include scrollbars(.5em, #ccc, #fff);
}
.fc {
direction: ltr;
text-align: left;
button {
box-sizing: border-box;
margin: 0;
height: 2.1em;
padding: 0 .6em;
font-size: 1em;
white-space: nowrap;
cursor: pointer;
&::-moz-focus-inner {
margin: 0;
padding: 0;
}
.fc-icon {
position: relative;
top: .05em;
margin: 0 .1em;
}
}
.fc-button-group {
& > * {
float: left;
margin: 0 0 0 -1px;
}
& > :first-child {
margin-left: 0;
}
}
hr {
height: 0;
margin: 0;
padding: 0 0 2px;
border-style: solid;
border-width: 1px 0;
}
table {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
border-spacing: 0;
font-size: 1em;
}
th {
text-align: center;
}
th, td {
border: 1px solid;
padding: 0;
vertical-align: top;
}
td.fc-today {
border-style: double;
}
.fc-row {
border: 0 solid;
}
.fc-toolbar {
& > * {
& > * {
float: left;
margin-left: .75em;
}
& > :first-child {
margin-left: 0;
}
}
}
.fc-axis {
vertical-align: middle;
padding: 0 4px;
white-space: nowrap;
}
}
.fc-rtl {
text-align: right;
}
.fc-unthemed {
th, td, hr, thead, tbody, .fc-row, .fc-popover {
border-color: $border;
}
.fc-popover {
background-color: #ffffff;
border: 1px solid;
.fc-header {
background: #eee;
.fc-close {
color: #666666;
font-size: 25px;
margin-top: 4px;
}
}
}
hr {
background: #eee;
}
.fc-today {
background: $primary-bg;
}
}
.fc-highlight {
background: $primary-bg;
opacity: .3;
}
.fc-icon {
display: inline-block;
font-size: 2em;
line-height: .5em;
height: .5em;
font-family: "Courier New", Courier, monospace;
}
.fc-icon-left-single-arrow:after {
content: "\02039";
font-weight: bold;
}
.fc-icon-right-single-arrow:after {
content: "\0203A";
font-weight: bold;
}
.fc-icon-left-double-arrow:after {
content: "\000AB";
}
.fc-icon-right-double-arrow:after {
content: "\000BB";
}
.fc-icon-x:after {
content: "\000D7";
}
.fc-state-default {
border: 1px solid;
outline: none;
background: #f5f5f5 repeat-x;
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1);
color: #333333;
&.fc-corner-left {
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}
&.fc-corner-right {
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
}
}
.fc-state-hover,
.fc-state-down,
.fc-state-active,
.fc-state-disabled {
color: #333333;
background-color: $disabled-bg;
}
.fc-state-hover {
color: #333333;
text-decoration: none;
background-position: 0 -15px;
transition: background-position 0.1s linear;
}
.fc-state-down,
.fc-state-active {
background: #cccccc none;
}
.fc-state-disabled {
cursor: default;
background-image: none;
opacity: 0.65;
box-shadow: none;
}
.fc-button-group {
display: inline-block;
}
.fc-popover {
position: absolute;
.fc-header {
padding: 2px 4px;
}
.fc-header .fc-title {
margin: 0 2px;
}
.fc-header .fc-close {
cursor: pointer;
}
}
.fc-ltr .fc-popover .fc-header .fc-title,
.fc-rtl .fc-popover .fc-header .fc-close {
float: left;
}
.fc-rtl .fc-popover .fc-header .fc-title,
.fc-ltr .fc-popover .fc-header .fc-close {
float: right;
}
.fc-popover > .ui-widget-header + .ui-widget-content {
border-top: 0;
}
.fc-clear {
clear: both;
}
.fc-bg,
.fc-highlight-skeleton,
.fc-helper-skeleton {
position: absolute;
top: 0;
left: 0;
right: 0;
}
.fc-bg {
bottom: 0;
}
.fc-bg table {
height: 100%;
}
.fc-row {
position: relative;
table {
border-left: 0 hidden transparent;
border-right: 0 hidden transparent;
border-bottom: 0 hidden transparent;
}
&:first-child table {
border-top: 0 hidden transparent;
}
.fc-bg {
z-index: 1;
}
.fc-highlight-skeleton {
z-index: 2;
bottom: 0;
table {
height: 100%;
}
td {
border-color: transparent;
}
}
.fc-content-skeleton {
position: relative;
z-index: 3;
padding-bottom: 2px;
}
.fc-helper-skeleton {
z-index: 4;
}
.fc-content-skeleton td,
.fc-helper-skeleton td {
background: none;
border-color: transparent;
border-bottom: 0;
}
.fc-content-skeleton tbody td,
.fc-helper-skeleton tbody td {
border-top: 0;
}
}
.fc-scroller {
overflow-y: scroll;
overflow-x: hidden;
& > * {
position: relative;
width: 100%;
overflow: hidden;
}
}
.fc-event {
position: relative;
display: block;
font-size: .85em;
line-height: 1.3;
border: 1px solid $primary;
background-color: $primary;
font-weight: normal;
}
.fc-event,
.fc-event:hover,
.ui-widget .fc-event {
color: #ffffff;
text-decoration: none;
}
.fc-event[href],
.fc-event.fc-draggable {
cursor: pointer;
}
.fc-day-grid-event {
margin: 1px 2px 0;
padding: 0 1px;
}
.fc-ltr .fc-day-grid-event.fc-not-start,
.fc-rtl .fc-day-grid-event.fc-not-end {
margin-left: 0;
border-left-width: 0;
padding-left: 1px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.fc-ltr .fc-day-grid-event.fc-not-end,
.fc-rtl .fc-day-grid-event.fc-not-start {
margin-right: 0;
border-right-width: 0;
padding-right: 1px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.fc-day-grid-event > .fc-content {
white-space: nowrap;
overflow: hidden;
}
.fc-day-grid-event .fc-time {
font-weight: bold;
}
.fc-day-grid-event .fc-resizer {
position: absolute;
top: 0;
bottom: 0;
width: 7px;
}
.fc-ltr .fc-day-grid-event .fc-resizer {
right: -3px;
cursor: e-resize;
}
.fc-rtl .fc-day-grid-event .fc-resizer {
left: -3px;
cursor: w-resize;
}
a.fc-more {
margin: 1px 3px;
font-size: .85em;
cursor: pointer;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
.fc-limited {
display: none;
}
.fc-day-grid .fc-row {
z-index: 1;
}
.fc-more-popover {
z-index: 2;
width: 220px;
.fc-event-container {
padding: 10px;
}
}
.fc-toolbar {
text-align: center;
margin-bottom: 1em;
.fc-left {
float: left;
}
.fc-right {
float: right;
}
.fc-center {
display: inline-block;
}
h2 {
margin: 0;
font-size: 24px;
width: 100%;
line-height: 26px;
}
button {
position: relative;
}
.fc-state-hover, .ui-state-hover {
z-index: 2;
}
.fc-state-down {
z-index: 3;
}
.fc-state-active,
.ui-state-active {
z-index: 4;
}
button:focus {
z-index: 5;
}
}
.fc-view-container *,
.fc-view-container *:before,
.fc-view-container *:after {
box-sizing: content-box;
}
.fc-view,
.fc-view > table {
position: relative;
z-index: 1;
}
.fc-basicWeek-view .fc-content-skeleton,
.fc-basicDay-view .fc-content-skeleton {
padding-top: 1px;
padding-bottom: 1em;
}
.fc-basic-view tbody .fc-row {
min-height: 4em;
max-height: 70px;
}
.fc-row.fc-rigid {
overflow: hidden;
}
.fc-row.fc-rigid .fc-content-skeleton {
position: absolute;
top: 0;
left: 0;
right: 0;
}
.fc-basic-view .fc-week-number,
.fc-basic-view .fc-day-number {
padding: 0 2px;
}
.fc-basic-view td.fc-week-number span,
.fc-basic-view td.fc-day-number {
padding-top: 2px;
padding-bottom: 2px;
}
.fc-basic-view .fc-week-number {
text-align: center;
}
.fc-basic-view .fc-week-number span {
display: inline-block;
min-width: 1.25em;
}
.fc-ltr .fc-basic-view .fc-day-number {
text-align: right;
}
.fc-rtl .fc-basic-view .fc-day-number {
text-align: left;
}
.fc-day-number.fc-other-month {
opacity: 0.3;
}
.fc-agenda-view .fc-day-grid {
position: relative;
z-index: 2;
}
.fc-agenda-view .fc-day-grid .fc-row {
min-height: 3em;
}
.fc-agenda-view .fc-day-grid .fc-row .fc-content-skeleton {
padding-top: 1px;
padding-bottom: 1em;
}
.fc-ltr .fc-axis {
text-align: right;
}
.fc-rtl .fc-axis {
text-align: left;
}
.ui-widget td.fc-axis {
font-weight: normal;
}
.fc-time-grid-container,
.fc-time-grid {
position: relative;
z-index: 1;
}
.fc-time-grid {
min-height: 100%;
}
.fc-time-grid table {
border: 0 hidden transparent;
}
.fc-time-grid > .fc-bg {
z-index: 1;
}
.fc-time-grid .fc-slats,
.fc-time-grid > hr {
position: relative;
z-index: 2;
}
.fc-time-grid .fc-highlight-skeleton {
z-index: 3;
}
.fc-time-grid .fc-content-skeleton {
position: absolute;
z-index: 4;
top: 0;
left: 0;
right: 0;
}
.fc-time-grid > .fc-helper-skeleton {
z-index: 5;
}
.fc-slats {
td {
height: 1.5em;
border-bottom: 0;
}
.fc-minor td {
border-top-style: dotted;
}
.ui-widget-content {
background: none;
}
}
.fc-time-grid .fc-highlight-container {
position: relative;
}
.fc-time-grid .fc-highlight {
position: absolute;
left: 0;
right: 0;
}
.fc-time-grid .fc-event-container {
position: relative;
}
.fc-ltr .fc-time-grid .fc-event-container {
margin: 0 2.5% 0 2px;
}
.fc-rtl .fc-time-grid .fc-event-container {
margin: 0 2px 0 2.5%;
}
.fc-time-grid .fc-event {
position: absolute;
z-index: 1;
}
.fc-time-grid-event {
overflow: hidden;
&.fc-not-start {
border-top-width: 0;
padding-top: 1px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
&.fc-not-end {
border-bottom-width: 0;
padding-bottom: 1px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
& > .fc-content {
position: relative;
z-index: 2;
}
.fc-title {
padding: 0 1px;
}
.fc-time {
padding: 0 1px;
font-size: .85em;
white-space: nowrap;
}
.fc-bg {
z-index: 1;
background: #fff;
opacity: .25;
filter: alpha(opacity=25);
}
&.fc-short {
.fc-content {
white-space: nowrap;
}
.fc-time {
display: inline-block;
vertical-align: top;
span {
display: none;
}
&:before {
content: attr(data-start);
}
&:after {
content: "\000A0-\000A0";
}
}
.fc-title {
display: inline-block;
vertical-align: top;
font-size: .85em;
padding: 0;
}
}
.fc-resizer {
position: absolute;
z-index: 3;
left: 0;
right: 0;
bottom: 0;
height: 8px;
overflow: hidden;
line-height: 8px;
font-size: 11px;
font-family: monospace;
text-align: center;
cursor: s-resize;
&:after {
content: "=";
}
}
}

1
src/app/pages/dashboard/widgets/calendar/calendar.html Normal file
View File

@ -0,0 +1 @@
<div id='calendar' ng-controller="calendarCtrl"></div>

83
src/app/pages/dashboard/widgets/calendar/calendar.js Normal file
View File

@ -0,0 +1,83 @@
'use strict';
app.controller('calendarCtrl', ['$scope', '$timeout', '$element', function ($scope, $timeout, $element) {
$element.fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2015-07-12',
selectable: true,
selectHelper: true,
select: function (start, end) {
var title = prompt('Event Title:');
var eventData;
if (title) {
eventData = {
title: title,
start: start,
end: end
};
$element.fullCalendar('renderEvent', eventData, true); // stick? = true
}
$element.fullCalendar('unselect');
},
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'All Day Event',
start: '2015-07-01'
},
{
title: 'Long Event',
start: '2015-07-07',
end: '2015-07-10',
color: colorDanger
},
{
id: 999,
title: 'Repeating Event',
start: '2015-07-09T16:00:00'
},
{
id: 999,
title: 'Repeating Event',
start: '2015-07-16T16:00:00'
},
{
title: 'Conference',
start: '2015-07-11',
end: '2015-07-13',
color: colorSuccessLight
},
{
title: 'Meeting',
start: '2015-07-12T10:30:00',
end: '2015-07-12T12:30:00',
color: colorDanger
},
{
title: 'Meeting',
start: '2015-07-14T14:30:00',
color: colorSuccessLight
},
{
title: 'Dinner',
start: '2015-07-14T20:00:00',
color: colorSuccess
},
{
title: 'Birthday Party',
start: '2015-07-13T07:00:00',
color: colorSuccess
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2015-07-28'
}
]
});
}]);

8
src/app/pages/dashboard/widgets/calendar/lib/fullcalendar.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

6
src/app/pages/dashboard/widgets/calendar/lib/moment.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

78
src/app/pages/dashboard/widgets/chart/_chart.scss Normal file
View File

@ -0,0 +1,78 @@
.traffic-chart {
min-height: 300px;
.canvas-holder {
width: 300px;
height: 300px;
position: relative;
}
ul.doughnut-legend {
padding: 0 0 0 350px;
margin: -250px 0 0 0;
li {
list-style: none;
font-size: 13px;
margin-bottom: 12px;
line-height: 16px;
position: relative;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
span {
float: left;
display: inline-block;
width: 16px;
height: 16px;
margin-right: 10px;
}
}
}
}
.traffic-text {
width: 100%;
height: 40px;
position: absolute;
top: 50%;
left: 0;
margin-top: -24px;
line-height: 24px;
text-align: center;
font-size: 18px;
color: $danger;
span {
display: block;
color: $default-text;
}
}
@mixin doughnut-center() {
.traffic-chart {
ul.doughnut-legend {
padding: 0;
margin: 40px 0 0 0;
li {
width: 50%;
float: left;
}
}
.canvas-holder {
margin: 0 auto;
}
}
}
@media (max-width: $resXXL) and (min-width: $resL), (max-width: $resS) {
@include doughnut-center();
}
@media (max-width: 380px) {
$size: 250px;
.traffic-chart .canvas-holder {
width: $size;
height: $size;
canvas {
width: $size;
height: $size;
}
}
}

10
src/app/pages/dashboard/widgets/chart/chart.html Normal file
View File

@ -0,0 +1,10 @@
<div class="traffic-chart" id="trafficChart" ng-controller="trafficChartCtrl">
<div class="canvas-holder">
<canvas id="chart-area" width="300" height="300"></canvas>
<div class="traffic-text">
1,900,128
<span>Views Total</span>
</div>
</div>
<div class="traffic-legend"></div>
</div>

52
src/app/pages/dashboard/widgets/chart/chart.js Normal file
View File

@ -0,0 +1,52 @@
'use strict';
app.controller('trafficChartCtrl', [function () {
var doughnutData = [
{
value: 2000,
color: colorPrimary,
highlight: colorPrimaryDark,
label: "Ad Campaigns"
},
{
value: 1500,
color: colorDanger,
highlight: colorDangerDark,
label: "Search engines"
},
{
value: 1000,
color: colorSuccessLight,
highlight: '#6c9c3f',
label: "Direct Traffic"
},
{
value: 1200,
color: colorSuccess,
highlight: colorSuccessDark,
label: "Referral Traffic"
},
{
value: 400,
color: colorWarning,
highlight: colorWarningDark,
label: "Other"
}
];
var ctx = document.getElementById("chart-area").getContext("2d");
window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {
responsive: true,
legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend clearfix\">" +
"<% for (var i=0; i<segments.length; i++){%>" +
"<li class=\"clearfix\">" +
"<span style=\"background-color:<%=segments[i].fillColor%>\"></span>" +
"<%if(segments[i].label){%><%=segments[i].label%><%}%>" +
"</li><%}%>" +
"</ul>"
});
var legend = window.myDoughnut.generateLegend();
$('.traffic-legend').html(legend);
}]);

11
src/app/pages/dashboard/widgets/chart/lib/Chart.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

327
src/app/pages/dashboard/widgets/timeline/_timeline.scss Normal file
View File

@ -0,0 +1,327 @@
#cd-timeline {
position: relative;
&:before {
content: '';
position: absolute;
top: 0;
left: 18px;
height: 100%;
width: 4px;
background: #d7e4ed;
}
}
.cd-timeline-block {
position: relative;
margin: 2em 0;
&:after {
content: "";
display: table;
clear: both;
}
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
}
.cd-timeline-img {
position: absolute;
top: 0;
left: 0;
width: 40px;
height: 40px;
border-radius: 50%;
img {
display: block;
width: 24px;
height: 24px;
position: relative;
left: 50%;
top: 50%;
margin-left: -12px;
margin-top: -12px;
}
&.cd-picture {
background: $success;
}
&.cd-movie {
background: $danger;
}
&.cd-location {
background: $primary;
}
}
@media only screen and (min-width: $resXL) {
.cd-timeline-img {
width: 60px;
height: 60px;
left: 50%;
margin-left: -30px;
/* Force Hardware Acceleration in WebKit */
-webkit-transform: translateZ(0);
-webkit-backface-visibility: hidden;
}
.cssanimations .cd-timeline-img.is-hidden {
visibility: hidden;
}
.cssanimations .cd-timeline-img.bounce-in {
visibility: visible;
animation: cd-bounce-1 0.6s;
}
}
@keyframes cd-bounce-1 {
0% {
opacity: 0;
transform: scale(0.5);
}
60% {
opacity: 1;
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
.cd-timeline-content {
position: relative;
margin-left: 60px;
background: $primary;
padding: 1em;
&:after {
content: "";
display: table;
clear: both;
}
h2 {
color: #303e49;
margin: 0;
font-size: 18px;
}
.cd-read-more, .cd-date {
font-size: 13px;
display: inline-block;
}
p {
font-size: 13px;
margin-bottom: 0;
}
.cd-read-more {
float: right;
padding: .8em 1em;
background: #acb7c0;
color: white;
border-radius: 0.25em;
}
.cd-date {
float: left;
padding: .8em 0;
opacity: .7;
}
&::before {
content: '';
position: absolute;
top: 16px;
right: 100%;
height: 0;
width: 0;
border: 7px solid transparent;
border-right: 7px solid white;
}
}
@mixin cd-timeline-color($color) {
background: $color;
&::before {
border-right-color: $color;
}
}
.cd-timeline-content-green {
@include cd-timeline-color($success-bg);
}
.cd-timeline-content-red {
@include cd-timeline-color($danger-bg);
}
.cd-timeline-content-blue {
@include cd-timeline-color($primary-bg);
}
.no-touch .cd-timeline-content .cd-read-more:hover {
background-color: #bac4cb;
}
@media only screen and (min-width: $resXL) {
#cd-timeline::before {
left: 50%;
margin-left: -2px;
}
.cd-timeline-block {
margin: 4em 0;
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
}
.cd-timeline-content {
margin-left: 0;
padding: 1.6em;
width: 42%;
&::before {
top: 24px;
left: 100%;
border-color: transparent;
border-left-color: white;
}
.cd-read-more {
float: left;
}
.cd-date {
position: absolute;
width: 100%;
left: 137%;
top: 6px;
font-size: 16px;
}
}
@mixin cd-timeline-left-color($color) {
&:before {
border-left-color: $color;
}
}
.cd-timeline-content-green {
@include cd-timeline-left-color($success-bg);
}
.cd-timeline-content-red {
@include cd-timeline-left-color($danger-bg);
}
.cd-timeline-content-blue {
@include cd-timeline-left-color($primary-bg);
}
.cd-timeline-block:nth-child(even) .cd-timeline-content {
float: right;
}
.cd-timeline-block:nth-child(even) {
.cd-timeline-content {
&::before {
top: 24px;
left: auto;
right: 100%;
border-color: transparent;
border-right-color: white;
}
@mixin cd-timeline-right-color($color) {
&::before {
border-right-color: $color;
}
}
&.cd-timeline-content-green {
@include cd-timeline-right-color($success-bg);
}
&.cd-timeline-content-red {
@include cd-timeline-right-color($danger-bg);
}
&.cd-timeline-content-blue {
@include cd-timeline-right-color($primary-bg);
}
}
}
.cd-timeline-block:nth-child(even) {
.cd-timeline-content {
.cd-read-more {
float: right;
}
.cd-date {
left: auto;
right: 137%;
text-align: right;
}
}
}
.cssanimations .cd-timeline-content {
&.is-hidden {
visibility: hidden;
}
&.bounce-in {
visibility: visible;
animation: cd-bounce-2 0.6s;
}
}
}
@media only screen and (min-width: $resXL) {
/* inverse bounce effect on even content blocks */
.cssanimations .cd-timeline-block:nth-child(even) .cd-timeline-content.bounce-in {
animation: cd-bounce-2-inverse 0.6s;
}
}
@keyframes cd-bounce-2 {
0% {
opacity: 0;
transform: translateX(-100px);
}
60% {
opacity: 1;
transform: translateX(20px);
}
100% {
transform: translateX(0);
}
}
@keyframes cd-bounce-2-inverse {
0% {
opacity: 0;
transform: translateX(100px);
}
60% {
opacity: 1;
transform: translateX(-20px);
}
100% {
transform: translateX(0);
}
}

4
src/app/pages/dashboard/widgets/timeline/img/cd-icon-location.svg Normal file
View File

@ -0,0 +1,4 @@
<svg class="nc-icon glyph" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24">
<path fill="#ffffff" d="M12,0C7.6,0,3,3.4,3,9c0,5.3,8,13.4,8.3,13.7c0.2,0.2,0.4,0.3,0.7,0.3s0.5-0.1,0.7-0.3C13,22.4,21,14.3,21,9
C21,3.4,16.4,0,12,0z M12,12c-1.7,0-3-1.3-3-3s1.3-3,3-3s3,1.3,3,3S13.7,12,12,12z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 394 B

4
src/app/pages/dashboard/widgets/timeline/img/cd-icon-movie.svg Normal file
View File

@ -0,0 +1,4 @@
<svg class="nc-icon glyph" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24"><g>
<path fill="#ffffff" d="M23.6,6.2c-0.3-0.2-0.6-0.2-0.9-0.1L17,8.5V5c0-0.6-0.4-1-1-1H1C0.4,4,0,4.4,0,5v14c0,0.6,0.4,1,1,1h15
c0.6,0,1-0.4,1-1v-3.5l5.6,2.4C22.7,18,22.9,18,23,18c0.2,0,0.4-0.1,0.6-0.2c0.3-0.2,0.4-0.5,0.4-0.8V7C24,6.7,23.8,6.4,23.6,6.2z"></path>
</g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 442 B

5
src/app/pages/dashboard/widgets/timeline/img/cd-icon-picture.svg Normal file
View File

@ -0,0 +1,5 @@
<svg class="nc-icon glyph" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24"><g>
<path fill="#ffffff" d="M23,0H1C0.4,0,0,0.4,0,1v22c0,0.6,0.4,1,1,1h22c0.6,0,1-0.4,1-1V1C24,0.4,23.6,0,23,0z M10,5
c1.1,0,2,0.9,2,2c0,1.1-0.9,2-2,2S8,8.1,8,7C8,5.9,8.9,5,10,5z M18.2,19H5.9c-0.8,0-1.3-0.9-0.8-1.6L7.3,14c0.4-0.5,1.1-0.6,1.5-0.2
L11,16l3.1-3.9c0.4-0.5,1.3-0.5,1.6,0.1l3.3,5.3C19.5,18.1,19,19,18.2,19z"></path>
</g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 507 B

42
src/app/pages/dashboard/widgets/timeline/timeline.html Normal file
View File

@ -0,0 +1,42 @@
<section id="cd-timeline" class="cd-container cssanimations" ng-controller="timelineCtrl">
<div class="cd-timeline-block">
<div class="cd-timeline-img cd-picture">
<img src="/release/img/cd-icon-picture.svg" alt="Picture">
</div>
<div class="cd-timeline-content cd-timeline-content-green">
<h5>Title of section 1</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi
placeat iure tempora laudantium ipsa ad debitis unde? Iste voluptatibus minus veritatis qui ut.</p>
<span class="cd-date">Jan 14</span>
</div>
</div>
<div class="cd-timeline-block">
<div class="cd-timeline-img cd-movie">
<img src="/release/img/cd-icon-movie.svg" alt="Movie">
</div>
<div class="cd-timeline-content cd-timeline-content-red">
<h5>Title of section 2</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi
placeat iure tempora laudantium ipsa ad debitis unde?</p>
<span class="cd-date">Jan 18</span>
</div>
</div>
<div class="cd-timeline-block">
<div class="cd-timeline-img cd-location">
<img src="/release/img/cd-icon-location.svg" alt="Location">
</div>
<div class="cd-timeline-content cd-timeline-content-blue">
<h5>Title of section 3</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum.</p>
<span class="cd-date">Feb 18</span>
</div>
</div>
</section>

35
src/app/pages/dashboard/widgets/timeline/timeline.js Normal file
View File

@ -0,0 +1,35 @@
'use strict';
app.controller('timelineCtrl', [function () {
var timelineBlocks = $('.cd-timeline-block'),
offset = 0.8;
//hide timeline blocks which are outside the viewport
hideBlocks(timelineBlocks, offset);
//on scolling, show/animate timeline blocks when enter the viewport
$(window).on('scroll', function () {
if (!window.requestAnimationFrame) {
setTimeout(function () {
showBlocks(timelineBlocks, offset);
}, 100);
} else {
window.requestAnimationFrame(function () {
showBlocks(timelineBlocks, offset);
});
}
});
function hideBlocks(blocks, offset) {
blocks.each(function () {
( $(this).offset().top > $(window).scrollTop() + $(window).height() * offset ) && $(this).find('.cd-timeline-img, .cd-timeline-content').addClass('is-hidden');
});
}
function showBlocks(blocks, offset) {
blocks.each(function () {
( $(this).offset().top <= $(window).scrollTop() + $(window).height() * offset && $(this).find('.cd-timeline-img').hasClass('is-hidden') ) && $(this).find('.cd-timeline-img, .cd-timeline-content').removeClass('is-hidden').addClass('bounce-in');
});
}
}]);

101
src/app/pages/dashboard/widgets/todo/_todo.scss Normal file
View File

@ -0,0 +1,101 @@
input.task-todo {
margin-bottom: 14px;
margin-top: -2px;
}
ul.todo-list {
margin: 0;
padding: 0;
.placeholder, .ui-sortable-placeholder {
background: #fff;
}
li {
margin: 0 0 -1px 0;
padding: 12px;
list-style: none;
position: relative;
border: 1px solid $input-border;
cursor: grab;
&.ui-sortable-helper {
background: #ffffff;
}
i.remove-todo {
position: absolute;
cursor: pointer;
top: 0px;
right: 12px;
font-size: 32px;
transition: color 0.2s;
color: $input-border;
visibility: hidden;
line-height: 42px;
&:hover {
color: $danger-dark;
}
}
&:hover {
i.remove-todo {
visibility: visible;
}
}
&.checked {
.todo-text {
color: #BFBFBF;
}
&:before {
background: $input-border !important;
}
}
i.mark {
display: block;
position: absolute;
top: -1px;
left: -1px;
height: 42px;
width: 4px;
background: $input-border;
cursor: pointer;
}
@mixin mark($color) {
i.mark {
background: $color;
}
}
&.primary {
@include mark($primary);
}
&.danger {
@include mark($danger);
}
&.success {
@include mark($success);
}
&.info {
@include mark($info);
}
&.warning {
@include mark($warning);
}
}
}
.todo-checkbox {
position: absolute;
}
.todo-text {
padding-left: 25px;
width: 100%;
padding-right: 25px;
cursor: text;
input {
border: none;
background: transparent;
outline: none;
padding: 0;
width: 100%;
}
}

21
src/app/pages/dashboard/widgets/todo/todo.html Normal file
View File

@ -0,0 +1,21 @@
<input type="text" value="" class="form-control task-todo" placeholder="Task to do" ng-keyup="addToDoItem($event)" ng-model="newTodoText"/>
<ul class="todo-list" blur-todo ui-sortable ng-model="todoList">
<li ng-repeat="item in todoList" ng-if="!item.deleted" ng-class="{checked: isChecked}" class="{{ getMarkColor(item.markId) }}">
<i class="mark" ng-click="changeColor(item)"></i>
<label class="todo-checkbox custom-checkbox custom-input-success">
<input type="checkbox" ng-model="isChecked">
<span></span>
</label>
<span class="todo-text cut-with-dots nowrap">
<span ng-show="!item.edit" ng-click="item.edit = true">{{ item.text }}</span>
<input type="text"
ng-class="{'vis-hidden': !item.edit}"
ng-model="item.text"
ng-blur="item.edit = false"
auto-focus="item.edit"
ng-keydown="blurOnEnter($event, item)">
</span>
<i class="remove-todo ion-ios-close-empty" ng-click="item.deleted = true"></i>
</li>
</ul>

107
src/app/pages/dashboard/widgets/todo/todo.js Normal file
View File

@ -0,0 +1,107 @@
'use strict';
app.directive('blurTodo', function () {
return {
restrict: 'A',
controller: ["$scope", function ($scope) {
$scope.marks = [
{
id: 0,
color: 'default'
},
{
id: 1,
color: 'primary'
},
{
id: 2,
color: 'success'
},
{
id: 3,
color: 'warning'
},
{
id: 4,
color: 'danger'
}
];
$scope.todoList = [
{
text: "Check me out",
edit: false, // todo: remove edit
markId: 4
},
{
text: "Lorem ipsum dolor sit amet, possit denique oportere at his, etiam corpora deseruisse te pro",
edit: false,
markId: 3
},
{
text: "Ex has semper alterum, expetenda dignissim",
edit: false,
markId: 2
},
{
text: "Vim an eius ocurreret abhorreant, id nam aeque persius ornatus.",
edit: false,
markId: 1
},
{
text: "Simul erroribus ad usu",
edit: false,
markId: 0
},
{
text: "Ei cum solet appareat, ex est graeci mediocritatem",
edit: false,
markId: 4
},
{
text: "Lorem ipsum dolor sit amet, possit denique oportere at his, etiam corpora deseruisse te pro. Eirmod prompta usu ex, meliore oporteat est ad.",
edit: false,
markId: 3
}
];
$scope.getMarkColor = function (id) {
return $scope.marks.filter(function (item) {
return item.id === id;
})[0].color || '';
};
$scope.changeColor = function (todo) {
for (var i = 0; i < $scope.marks.length; ++i) {
if ($scope.marks[i].id === todo.markId) {
var next = (i + 1 !== $scope.marks.length) ? i + 1 : 0;
todo.markId = $scope.marks[next].id;
return false;
}
}
};
$scope.blurOnEnter = function (event, item) {
if (event.which === 13) {
item.edit = false;
}
};
$scope.newTodoText = "";
$scope.addToDoItem = function (event) {
if (event.which === 13) {
$scope.todoList.unshift({
text: $scope.newTodoText,
edit: false,
markId: 0
});
$scope.newTodoText = "";
}
};
}],
link: function ($scope, $element, $attrs) {
}
};
});

450
src/app/pages/form/_form.scss Normal file
View File

@ -0,0 +1,450 @@
.form-horizontal {
label {
line-height: 34px;
margin-bottom: 0;
padding-top: 0 !important;
}
}
.form-group {
label {
margin-bottom: 5px;
color: $default-text;
font-weight: normal;
font-size: 13px;
}
}
.form-control {
border-radius: 0;
background: transparent;
box-shadow: none;
&:focus {
box-shadow: none;
border-color: $input-border-focus;
background: #ffffff;
}
}
select.form-control {
padding-left: 8px;
}
textarea.form-control {
height: 96px;
}
.modal-form-btn {
text-align: center;
}
.form-inline {
.form-group {
input {
width: 100%;
}
label {
margin-right: 12px;
}
}
button[type="submit"] {
margin-left: 12px;
}
label.custom-checkbox > span {
display: block;
margin-top: -13px;
margin-right: 10px;
}
}
.modal-content {
border-radius: 0;
}
@mixin setSwitchBorder($color) {
.bootstrap-switch.bootstrap-switch-on {
border-color: $color;
}
}
.switch-container {
display: inline-block;
&.primary {
@include setSwitchBorder($primary);
}
&.success {
@include setSwitchBorder($success);
}
&.warning {
@include setSwitchBorder($warning);
}
&.danger {
@include setSwitchBorder($danger);
}
&.info {
@include setSwitchBorder($primary-light);
}
}
.bootstrap-switch {
border-radius: 0;
border: 1px solid $input-border;
transition: border-color ease-in-out .7s, box-shadow ease-in-out .7s;
&:focus {
outline: none;
}
&.bootstrap-switch-off {
border-color: $input-border;
}
&.bootstrap-switch-focused {
box-shadow: none;
border-color: $input-border-focus;
&.bootstrap-switch-off {
border-color: $input-border;
}
}
.bootstrap-switch-container {
border-radius: 0;
&:focus {
outline: none;
}
}
.bootstrap-switch-handle-on {
border-radius: 0;
&.bootstrap-switch-default {
background: $input-border;
}
&.bootstrap-switch-success {
background: $success;
}
&.bootstrap-switch-primary {
background: $primary;
}
&.bootstrap-switch-warning {
background: $warning;
}
&.bootstrap-switch-danger {
background: $danger;
}
&.bootstrap-switch-info {
background: $primary-light;
}
}
.bootstrap-switch-handle-off {
border-radius: 0;
}
.bootstrap-switch-label {
background: transparent;
}
&.bootstrap-switch-animate .bootstrap-switch-container {
transition: margin-left .2s;
}
}
.switches {
margin-left: -12px;
margin-bottom: -12px;
.switch-container {
float: left;
margin-left: 12px;
margin-bottom: 12px;
}
}
.input-group {
width: 100%;
margin-bottom: 15px;
& > span {
border-radius: 0;
}
}
label.custom-checkbox {
padding-right: 0;
padding-left: 0;
margin-bottom: 0;
& > input {
height: 0;
z-index: -100 !important;
opacity: 0;
position: absolute;
&:checked {
& + span {
&:before {
content: "\f00c";
}
}
}
&:disabled {
& + span {
color: $disabled;
&:before {
border-color: $disabled-bg !important;
}
}
}
}
& > span {
position: relative;
display: inline-block;
margin: 0;
line-height: 16px;
font-weight: normal;
cursor: pointer;
padding-left: 22px;
width: 100%;
&:before {
cursor: pointer;
font-family: fontAwesome;
font-weight: 400;
font-size: 12px;
color: $input-border-focus;
content: "\a0";
background-color: transparent;
border: 1px solid #c8c8c8;
border-radius: 0;
display: inline-block;
text-align: center;
height: 16px;
line-height: 14px;
min-width: 16px;
margin-right: 6px;
position: relative;
top: 0;
margin-left: -22px;
float: left;
}
&:hover {
&:before {
border-color: $input-border-focus;
}
}
}
}
.nowrap {
white-space: nowrap;
}
.cut-with-dots {
overflow: hidden;
text-overflow: ellipsis;
display: block;
}
label.custom-radio {
@extend .custom-checkbox;
& > input {
&:checked {
& + span {
&:before {
content: "\f111";
}
}
}
}
& > span {
&:before {
border-radius: 16px;
font-size: 9px;
}
}
}
@mixin customInput($color) {
& > span {
&:before {
color: $color;
}
&:hover {
&:before {
border-color: $color;
}
}
}
}
label.custom-input-primary {
@include customInput($primary);
}
label.custom-input-success {
@include customInput($success);
}
label.custom-input-warning {
@include customInput($warning)
}
label.custom-input-danger {
@include customInput($danger)
}
.form-horizontal {
.radio, .checkbox, .radio-inline, .checkbox-inline {
padding-top: 0px;
}
}
@mixin validationState($color, $focusColor) {
.control-label {
color: $color;
}
.form-control {
border-color: $color;
&:focus {
box-shadow: none;
border-color: $focusColor;
}
}
label.custom-checkbox {
color: $color;
& > span {
&:before {
color: $color;
}
&:hover {
&:before {
border-color: $color;
}
}
}
}
.form-control-feedback {
color: $color;
}
.input-group-addon {
background-color: $color;
color: #ffffff;
}
}
.has-success {
@include validationState($success, $success-dark);
}
.has-warning {
@include validationState($warning-dark, #4f571a);
}
.has-error {
@include validationState($danger, $danger-dark);
}
.has-feedback label ~ .form-control-feedback {
top: 21px;
font-size: 18px;
}
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
background: transparent;
color: $disabled;
border-color: $disabled-bg;
@include placeholderStyle($disabled);
}
.form-control-rounded {
border-radius: 16px;
}
.help-block {
color: $help-text;
}
@mixin groupAddon($color) {
background: $color;
color: #ffffff;
border-color: $color;
}
.input-group-addon-danger {
@include groupAddon($danger);
}
.input-group-addon-warning {
@include groupAddon($warning);
}
.input-group-addon-success {
@include groupAddon($success);
}
.input-group-addon-primary {
@include groupAddon($primary);
}
.checkbox-demo-row {
margin-bottom: 12px;
}
.dropdown-menu {
border-radius: 0;
}
.bootstrap-select {
.btn-default {
background: transparent;
border-color: $input-border;
color: #555555;
&:focus {
background: #ffffff;
border: 1px solid $input-border-focus;
box-shadow: none;
outline: 0 !important;
}
&:active {
border-color: $input-border;
box-shadow: none;
background: #ffffff;
}
}
&.open {
.btn-default.dropdown-toggle {
box-shadow: none;
background-color: #ffffff;
border-color: $input-border-focus;
}
}
}
.bootstrap-tagsinput {
background-color: transparent;
border: 1px solid $input-border;
box-shadow: none;
border-radius: 0;
color: #555555;
max-width: 100%;
font-size: 14px;
width: 100%;
&.form-control {
display: block;
width: 100%;
}
.tag {
border-radius: 0;
font-size: 11px;
padding: 4px 8px;
& [data-role="remove"]:hover {
box-shadow: none;
}
}
input {
font-size: 11px;
}
}
@media (max-width: $resM) {
.form-inline {
.checkbox {
margin-left: 15px;
}
label.custom-checkbox > span, label.custom-radio > span {
display: inline-block;
}
}
}

1
src/app/pages/form/inputs/inputs.html Normal file
View File

@ -0,0 +1 @@
<widgets ng-model="widgetBlocks"></widgets>

50
src/app/pages/form/inputs/inputs.js Normal file
View File

@ -0,0 +1,50 @@
'use strict';
angular.module('BlurAdmin.formInputsPage', ['ngRoute'])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/form-inputs', {
templateUrl: '/app/pages/form/inputs/inputs.html',
controller: 'formInputsPageCtrl'
});
}])
.controller('formInputsPageCtrl', ['$scope', function ($scope) {
$scope.widgetBlocks = [
{
widgets: [
[
{
title: "Standard Fields",
url: "/app/pages/form/inputs/widgets/standardFields.html"
},
{
title: "Tags Input",
url: "/app/pages/form/inputs/widgets/tagsInput/tagsInput.html"
},
{
title: "Input Groups",
url: "/app/pages/form/inputs/widgets/inputGroups.html"
},
{
title: "Checkboxes & Radios",
url: "/app/pages/form/inputs/widgets/checkboxesRadios.html"
}
],
[
{
title: "Validation States",
url: "/app/pages/form/inputs/widgets/validationStates.html"
},
{
title: "Selects",
url: "/app/pages/form/inputs/widgets/select/select.html"
},
{
title: "On/Off Switches",
url: "/app/pages/form/inputs/widgets/switch/switch.html"
}
]
]
}
];
}]);

65
src/app/pages/form/inputs/widgets/checkboxesRadios.html Normal file
View File

@ -0,0 +1,65 @@
<div class="row">
<div class="col-md-6">
<div class="row checkbox-demo-row">
<div class="col-xs-4">
<label class="checkbox-inline custom-checkbox nowrap">
<input type="checkbox" id="inlineCheckbox01" value="option1">
<span>Check 1</span>
</label>
</div>
<div class="col-xs-4">
<label class="checkbox-inline custom-checkbox nowrap">
<input type="checkbox" id="inlineCheckbox02" value="option2">
<span>Check 2</span>
</label>
</div>
<div class="col-xs-4">
<label class="checkbox-inline custom-checkbox nowrap">
<input type="checkbox" id="inlineCheckbox03" value="option3">
<span>Check 3</span>
</label>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row checkbox-demo-row">
<div class="col-xs-4">
<label class="radio-inline custom-radio nowrap">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
<span>Option 1</span>
</label>
</div>
<div class="col-xs-4">
<label class="radio-inline custom-radio nowrap">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
<span>Option 2</span>
</label>
</div>
<div class="col-xs-4">
<label class="radio-inline custom-radio nowrap">
<input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3">
<span>Option3</span>
</label>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="checkbox disabled">
<label class="custom-checkbox nowrap">
<input type="checkbox" value="" disabled>
<span>Checkbox is disabled</span>
</label>
</div>
</div>
<div class="col-sm-6">
<div class="radio disabled">
<label class="custom-radio nowrap">
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
<span>Disabled option</span>
</label>
</div>
</div>
</div>

22
src/app/pages/form/inputs/widgets/inputGroups.html Normal file
View File

@ -0,0 +1,22 @@
<div class="input-group">
<span class="input-group-addon input-group-addon-primary" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-addon input-group-addon-warning" id="basic-addon2">@example.com</span>
</div>
<div class="input-group">
<span class="input-group-addon input-group-addon-success">$</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-addon input-group-addon-success">.00</span>
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-danger" type="button">Go!</button>
</span>
</div>

131
src/app/pages/form/inputs/widgets/select/select.html Normal file
View File

@ -0,0 +1,131 @@
<div class="form-group">
<select class="form-control" title="Standard Select" selectpicker>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
</select>
</div>
<div class="form-group">
<select class="form-control" data-live-search="true" title="Select With Search" selectpicker>
<option>Hot Dog, Fries and a Soda</option>
<option>Burger, Shake and a Smile</option>
<option>Sugar, Spice and all things nice</option>
<option>Baby Back Ribs</option>
</select>
</div>
<div class="form-group">
<select class="form-control" title="Option Types" selectpicker>
<option>Standard option</option>
<option data-subtext="option subtext">Option with subtext</option>
<option disabled>Disabled Option</option>
<option data-icon="glyphicon-heart">Option with cion</option>
</select>
</div>
<div class="form-group">
<select class="form-control" disabled title="Disabled Select" selectpicker>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<select class="form-control" title="Select with Option Groups" selectpicker>
<optgroup label="Group 1">
<option>Group 1 - Option 1</option>
<option>Group 1 - Option 2</option>
</optgroup>
<optgroup label="Group 2">
<option>Group 2 - Option 1</option>
<option>Group 2 - Option 2</option>
</optgroup>
</select>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<select class="form-control" title="Select with Divider" selectpicker>
<option>Group 1 - Option 1</option>
<option>Group 1 - Option 2</option>
<option data-divider="true"></option>
<option>Group 2 - Option 1</option>
<option>Group 2 - Option 2</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<select class="form-control" title="Multiple Select" multiple selectpicker>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
<div class="form-group">
<select class="form-control" title="Multiple Select with Limit" multiple data-max-options="2" selectpicker>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<select class="form-control" title="Primary Select" data-style="btn-primary" selectpicker>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
</select>
</div>
<div class="form-group">
<select class="form-control" title="Success Select" data-style="btn-success" selectpicker>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
</select>
</div>
<div class="form-group">
<select class="form-control" title="Warning Select" data-style="btn-warning" selectpicker>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
</select>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<select class="form-control" title="Info Select" data-style="btn-info" selectpicker>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
</select>
</div>
<div class="form-group">
<select class="form-control" title="Danger Select" data-style="btn-danger" selectpicker>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
</select>
</div>
<div class="form-group">
<select class="form-control" title="Inverse Select" data-style="btn-inverse" selectpicker>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
</select>
</div>
</div>
</div>

10
src/app/pages/form/inputs/widgets/select/select.js Normal file
View File

@ -0,0 +1,10 @@
'use strict';
app.directive('selectpicker', [function() {
return {
restrict: 'A',
link: function( $scope, elem) {
$(elem).selectpicker();
}
};
}]);

35
src/app/pages/form/inputs/widgets/standardFields.html Normal file
View File

@ -0,0 +1,35 @@
<form>
<div class="form-group">
<label for="input01">Text</label>
<input type="text" class="form-control" id="input01" placeholder="Text">
</div>
<div class="form-group">
<label for="input02">Password</label>
<input type="password" class="form-control" id="input02" placeholder="Password">
</div>
<div class="form-group">
<label for="input03">Rounded Corners</label>
<input type="text" class="form-control form-control-rounded" id="input03" placeholder="Rounded Corners">
</div>
<div class="form-group">
<label for="input04">With help</label>
<input type="text" class="form-control" id="input04" placeholder="With help">
<span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group">
<label for="input05">Disabled Input</label>
<input type="text" class="form-control" id="input05" placeholder="Disabled Input" disabled>
</div>
<div class="form-group">
<label for="textarea01">Textarea</label>
<textarea placeholder="Default Input" class="form-control" id="textarea01"></textarea>
</div>
<div class="form-group">
<input type="text" class="form-control input-sm" id="input2" placeholder="Small Input">
</div>
<div class="form-group">
<input type="text" class="form-control input-lg" id="input4" placeholder="Large Input">
</div>
</form>

8
src/app/pages/form/inputs/widgets/switch/switch.html Normal file
View File

@ -0,0 +1,8 @@
<div ng-controller="switchCtrl" class="switches clearfix">
<switch color="success" ng-model="switches[0]"></switch>
<switch color="warning" ng-model="switches[1]"></switch>
<switch color="danger" ng-model="switches[2]"></switch>
<switch color="info" ng-model="switches[3]"></switch>
<switch color="default" ng-model="switches[4]"></switch>
<switch color="primary" ng-model="switches[5]"></switch>
</div>

25
src/app/pages/form/inputs/widgets/switch/switch.js Normal file
View File

@ -0,0 +1,25 @@
'use strict';
app.directive('switch', ['$timeout', function ($timeout) {
return {
restrict: 'EA',
replace: true,
scope: {
ngModel: "="
},
template: '<div class="switch-container {{color}}"><input type="checkbox" ng-model="ngModel"></div>',
link: function (scope, elem, attr) {
$timeout(function(){
scope.color = attr.color;
$(elem).find('input').bootstrapSwitch({
size: "small",
onColor: attr.color
});
});
}
};
}])
.controller('switchCtrl', ['$scope', function ($scope) {
$scope.switches = [ true, true, true, true, true, true ];
}]);

11
src/app/pages/form/inputs/widgets/tagsInput/tagsInput.html Normal file
View File

@ -0,0 +1,11 @@
<div class="form-group">
<div class="form-group">
<input type="text" tag-input="primary" value="Amsterdam,Washington,Sydney,Beijing,Cairo" data-role="tagsinput" placeholder="Add Tag">
</div>
<div class="form-group">
<input type="text" tag-input="warning" value="Minsk,Prague,Vilnius,Warsaw" data-role="tagsinput" placeholder="Add Tag">
</div>
<div class="form-group">
<input type="text" tag-input="danger" value="London,Berlin,Paris,Rome,Munich" data-role="tagsinput" placeholder="Add Tag">
</div>
</div>

12
src/app/pages/form/inputs/widgets/tagsInput/tagsInput.js Normal file
View File

@ -0,0 +1,12 @@
'use strict';
app.directive('tagInput', [function() {
return {
restrict: 'A',
link: function( $scope, elem, attr) {
$(elem).tagsinput({
tagClass: 'label label-' + attr.tagInput
});
}
};
}]);

64
src/app/pages/form/inputs/widgets/validationStates.html Normal file
View File

@ -0,0 +1,64 @@
<div class="form-group has-success">
<label class="control-label" for="inputSuccess1">Input with success</label>
<input type="text" class="form-control" id="inputSuccess1">
</div>
<div class="form-group has-warning">
<label class="control-label" for="inputWarning1">Input with warning</label>
<input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
<label class="control-label" for="inputError1">Input with error</label>
<input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
<div class="checkbox">
<label class="custom-checkbox">
<input type="checkbox" id="checkboxSuccess" value="option1">
<span>Checkbox with success</span>
</label>
</div>
</div>
<div class="has-warning">
<div class="checkbox">
<label class="custom-checkbox">
<input type="checkbox" id="checkboxWarning" value="option1">
<span>Checkbox with warning</span>
</label>
</div>
</div>
<div class="has-error">
<div class="checkbox">
<label class="custom-checkbox">
<input type="checkbox" id="checkboxError" value="option1">
<span>Checkbox with error</span>
</label>
</div>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess2">Input with success</label>
<input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
<i class="ion-checkmark-circled form-control-feedback" aria-hidden="true"></i>
<span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
<label class="control-label" for="inputWarning2">Input with warning</label>
<input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
<i class="ion-alert-circled form-control-feedback" aria-hidden="true"></i>
<span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
<label class="control-label" for="inputError2">Input with error</label>
<input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
<i class="ion-android-cancel form-control-feedback" aria-hidden="true"></i>
<span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputGroupSuccess1">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
</div>
<i class="ion-checkmark-circled form-control-feedback" aria-hidden="true"></i>
<span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>

1
src/app/pages/form/layouts/layouts.html Normal file
View File

@ -0,0 +1 @@
<widgets ng-model="widgetBlocks"></widgets>

48
src/app/pages/form/layouts/layouts.js Normal file
View File

@ -0,0 +1,48 @@
'use strict';
angular.module('BlurAdmin.formLayoutsPage', ['ngRoute'])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/form-layouts', {
templateUrl: '/app/pages/form/layouts/layouts.html',
controller: 'formLayoutsPageCtrl'
});
}])
.controller('formLayoutsPageCtrl', ['$scope', function ($scope) {
$scope.widgetBlocks = [
{
widgets: [
[
{
title: 'Inline Form',
url: "/app/pages/form/layouts/widgets/inlineForm.html"
}
]
]
},
{
widgets: [
[
{
title: "Basic Form",
url: "/app/pages/form/layouts/widgets/basicForm.html"
},
{
title: "Block Form",
url: "/app/pages/form/layouts/widgets/blockForm.html"
}
],
[
{
title: "Horizontal Form",
url: "/app/pages/form/layouts/widgets/horizontalForm.html"
},
{
title: "Form Without Labels",
url: "/app/pages/form/layouts/widgets/formWithoutLabels.html"
}
]
]
}
];
}]);

17
src/app/pages/form/layouts/widgets/basicForm.html Normal file
View File

@ -0,0 +1,17 @@
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="checkbox">
<label class="custom-checkbox">
<input type="checkbox">
<span>Check me out</span>
</label>
</div>
<button type="submit" class="btn btn-danger">Submit</button>
</form>

Some files were not shown because too many files have changed in this diff Show More