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

feat(progressButtons): integrate angular progress buttons

pull/3/head
Vladimir Lugovsky 2015-11-23 20:32:55 +03:00
parent 36f7dbc804
commit 71cbaf6e52
5 changed files with 123 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
bower.json
View File

@ -41,6 +41,7 @@
"jquery.easy-pie-chart": "~2.1.6",
"leaflet": "~0.7.5",
"moment": "~2.10.6",
"slimScroll": "jquery-slimscroll#~1.3.6"
"slimScroll": "jquery-slimscroll#~1.3.6",
"angular-progress-button-styles": "~0.1.0"
}
}

4
gulpfile.js
View File

@ -44,7 +44,8 @@ gulp.task('minify-css', ['minify-404-css', 'minify-auth-css'], function () {
'bower_components/bootstrap-tagsinput/dist/bootstrap-tagsinput.css',
'bower_components/Ionicons/css/ionicons.min.css',
'bower_components/font-awesome/css/font-awesome.min.css',
'bower_components/animate.css/animate.min.css'
'bower_components/animate.css/animate.min.css',
'bower_components/angular-progress-button-styles/dist/angular-progress-button-styles.min.css'
]);
var appFiles = gulp.src('src/assets/css/main.scss').pipe(sass({ style: 'compressed' }).on('error', sass.logError));
@ -109,6 +110,7 @@ gulp.task('js-lib', function(){
'bower_components/angular-slimscroll/angular-slimscroll.js',
'bower_components/hammerjs/hammer.min.js',
'bower_components/AngularHammer/angular.hammer.min.js',
'bower_components/angular-progress-button-styles/dist/angular-progress-button-styles.min.js',
'src/app/components/backTop/lib/jquery.backTop.min.js'
];

18
src/app/pages/buttons/_buttonsPage.scss
View File

@ -76,3 +76,21 @@ $btn-icon-size: 34px;
float: left;
}
.progress-buttons-container {
text-align: center;
font-size: 16px;
.progress {
margin-bottom: 0;
}
span.button-title {
display: inline-block;
width: 100%;
line-height: 1;
font-size: 14px;
margin-bottom: 10px;
}
.row + .row {
margin-top: 30px;
}
}

18
src/app/pages/buttons/buttons.js
View File

@ -1,6 +1,6 @@
'use strict';
angular.module('BlurAdmin.buttonsPage', ['ngRoute'])
angular.module('BlurAdmin.buttonsPage', ['ngRoute', 'angular-progress-button-styles'])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/buttons', {
@ -8,7 +8,11 @@ angular.module('BlurAdmin.buttonsPage', ['ngRoute'])
controller: 'buttonsPageCtrl'
});
}])
.controller('buttonsPageCtrl', ['$scope', function ($scope) {
.controller('buttonsPageCtrl', ['$scope', '$timeout', function ($scope, $timeout) {
$scope.progressFunction = function() {
return $timeout(function() {}, 3000);
};
$scope.widgetBlocks = [
{
widgets: [
@ -42,6 +46,16 @@ angular.module('BlurAdmin.buttonsPage', ['ngRoute'])
}
]
]
},
{
widgets: [
[
{
title: 'Progress Buttons',
url: 'app/pages/buttons/widgets/progressButtons.html'
}
]
]
}
];
}]);

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

@ -0,0 +1,84 @@
<div class="progress-buttons-container text-center" ng-controller="buttonsPageCtrl">
<div class="row">
<section class="col-md-6 col-lg-3">
<span class="button-title">fill horizontal</span>
<button progress-button="progressFunction()">Submit</button>
</section>
<section class="col-md-6 col-lg-3">
<span class="button-title">fill vertical</span>
<button progress-button="progressFunction()" pb-direction="vertical">Submit</button>
</section>
<section class="col-md-6 col-lg-3">
<span class="button-title">shrink horizontal</span>
<button progress-button="progressFunction()" pb-style="shrink">Submit</button>
</section>
<section class="col-md-6 col-lg-3">
<span class="button-title">shrink vertical</span>
<button progress-button="progressFunction()" pb-style="shrink" pb-direction="vertical">Submit</button>
</section>
</div>
<div class="row">
<section class="col-md-6 col-lg-3">
<span class="button-title">rotate-angle-bottom <br/>perspective</span>
<button progress-button="progressFunction()" pb-style="rotate-angle-bottom">Submit</button>
</section>
<section class="col-md-6 col-lg-3">
<span class="button-title">rotate-angle-top <br/>perspective</span>
<button progress-button="progressFunction()" pb-style="rotate-angle-top">Submit</button>
</section>
<section class="col-md-6 col-lg-3">
<span class="button-title">rotate-angle-left <br/>perspective</span>
<button progress-button="progressFunction()" pb-style="rotate-angle-left">Submit</button>
</section>
<section class="col-md-6 col-lg-3">
<span class="button-title">rotate-angle-right <br/>perspective</span>
<button progress-button="progressFunction()" pb-style="rotate-angle-right">Submit</button>
</section>
</div>
<div class="row">
<section class="col-md-6 col-lg-3">
<span class="button-title">rotate-side-down <br/>perspective</span>
<button progress-button="progressFunction()" pb-style="rotate-side-down">Submit</button>
</section>
<section class="col-md-6 col-lg-3">
<span class="button-title">rotate-side-up <br/>perspective</span>
<button progress-button="progressFunction()" pb-style="rotate-side-up">Submit</button>
</section>
<section class="col-md-6 col-lg-3">
<span class="button-title">rotate-side-left <br/>perspective</span>
<button progress-button="progressFunction()" pb-style="rotate-side-left">Submit</button>
</section>
<section class="col-md-6 col-lg-3">
<span class="button-title">rotate-side-right <br/>perspective</span>
<button progress-button="progressFunction()" pb-style="rotate-side-right">Submit</button>
</section>
</div>
<div class="row">
<section class="col-md-6 col-lg-3">
<span class="button-title">rotate-back <br/>perspective</span>
<button progress-button="progressFunction()" pb-style="rotate-back">Submit</button>
</section>
<section class="col-md-6 col-lg-3">
<span class="button-title">flip-open <br/>perspective</span>
<button progress-button="progressFunction()" pb-style="flip-open">Submit</button>
</section>
<section class="col-md-6 col-lg-3">
<span class="button-title">slide-down <br/>horizontal</span>
<button progress-button="progressFunction()" pb-style="slide-down">Submit</button>
</section>
<section class="col-md-6 col-lg-3">
<span class="button-title">move-up <br/>horizontal</span>
<button progress-button="progressFunction()" pb-style="move-up">Submit</button>
</section>
</div>
<div class="row">
<section class="col-md-6">
<span class="button-title">top-line <br/>horizontal</span>
<button progress-button="progressFunction()" pb-style="top-line">Submit</button>
</section>
<section class="col-md-6">
<span class="button-title">lateral-lines <br/>vertical</span>
<button progress-button="progressFunction()" pb-style="lateral-lines">Submit</button>
</section>
</div>
</div>