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

Added animated panel 

Added a panel which can open and close with animation
pull/270/head
harisali45 2017-06-17 12:41:37 +04:00
parent fbf225ea75
commit c5e2855963
7 changed files with 234 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
src/app/pages/ui/animatedPanel/AnimatedPanelPageCtrl.js Normal file
View File

@ -0,0 +1,93 @@
/**
* @author harisali
* created on 14.03.2017
*/
(function () {
'use strict';
angular.module('BlurAdmin.pages.ui.animatedPanel')
.controller('AnimatedPanelPageCtrl', AnimatedPanelPageCtrl);
/** @ngInject */
function AnimatedPanelPageCtrl($scope) {
$scope.showDetails=function(user){
$scope.data=user;
$scope.$broadcast("showDetails",user);
};
$scope.users = [
{
id: 1,
firstName: 'Mark',
lastName: 'Otto',
username: '@mdo',
email: 'mdo@gmail.com',
age: '28'
},
{
id: 2,
firstName: 'Jacob',
lastName: 'Thornton',
username: '@fat',
email: 'fat@yandex.ru',
age: '45'
},
{
id: 3,
firstName: 'Larry',
lastName: 'Bird',
username: '@twitter',
email: 'twitter@outlook.com',
age: '18'
},
{
id: 4,
firstName: 'John',
lastName: 'Snow',
username: '@snow',
email: 'snow@gmail.com',
age: '20'
},
{
id: 5,
firstName: 'Jack',
lastName: 'Sparrow',
username: '@jack',
email: 'jack@yandex.ru',
age: '30'
},
{
id: 6,
firstName: 'Ann',
lastName: 'Smith',
username: '@ann',
email: 'ann@gmail.com',
age: '21'
},
{
id: 7,
firstName: 'Barbara',
lastName: 'Black',
username: '@barbara',
email: 'barbara@yandex.ru',
age: '43'
},
{
id: 8,
firstName: 'Sevan',
lastName: 'Bagrat',
username: '@sevan',
email: 'sevan@outlook.com',
age: '13'
},
{
id: 9,
firstName: 'Ruben',
lastName: 'Vardan',
username: '@ruben',
email: 'ruben@gmail.com',
age: '22'
}
];
}
})();

36
src/app/pages/ui/animatedPanel/animatedPanel.directive.js Normal file
View File

@ -0,0 +1,36 @@
/**
* @author harisali
* created on 14.03.2015
*/
(function () {
'use strict';
angular.module('BlurAdmin.pages.ui.animatedPanel')
.directive('animatedPanelDir', animatedPanel);
/** @ngInject */
function animatedPanel() {
return {
controller: animatedPanelCtrl,
};
}
function animatedPanelCtrl($scope,$element,$animate){
$element.hide();
var child=$element.children(":eq(0)").children(":eq(0)");
$scope.$on("showDetails",function(event){
//animation to show element
$("html, body").animate({
scrollTop: 0
});
$element.slideDown();
$animate.setClass(child,"zoomIn","zoomOut");
});
$scope.hide=function(){
//animation to hide element
child.removeClass("zoomIn");
child.addClass("zoomOut");
$element.slideUp();
}
}
})();

67
src/app/pages/ui/animatedPanel/animatedPanel.html Normal file
View File

@ -0,0 +1,67 @@
<div class="row">
<div class="col-md-12" animated-panel-dir>
<div ba-panel ba-panel-class="with-scroll" ba-panel-title="User Details" close="hide()">
<div class="">
<form class="form-horizontal" editable-form name="tenderBondForm" shown="true" >
<div class="col-md-6">
<div class="form-group" >
<span class='col-sm-4' >First Name</span>
<div class='col-md-8'>
<input type="text" class="form-control" ng-model="data.firstName" />
</div>
</div>
<div class="form-group" >
<span class='col-sm-4' >Last Name</span>
<div class='col-md-8'>
<input type="text" class="form-control" ng-model="data.lastName" />
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group" >
<span class='col-sm-4' >Email</span>
<div class='col-md-8'>
<input type="text" class="form-control" ng-model="data.email" />
</div>
</div>
<div class="form-group" >
<span class='col-sm-4' >Age</span>
<div class='col-md-8'>
<input type="text" class="form-control" ng-model="data.age" />
</div>
</div>
<div class="col-sm-12" >
<button class="btn btn-primary btn-md pull-right"
type="submit" >
<span class="ion-android-checkmark-circle"> Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div ba-panel ba-panel-title="Users" ba-panel-class="with-scroll">
<table class="table">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users">
<td>{{user.firstName}}</td>
<td >{{user.lastName}}</td>
<td >{{user.username}}</td>
<td><button class="btn btn-sm btn-primary" ng-click="showDetails(user)"> View Details</button></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

25
src/app/pages/ui/animatedPanel/animatedPanel.module.js Normal file
View File

@ -0,0 +1,25 @@
/**
* @author harisali
* created on 14.03.2017
*/
(function () {
'use strict';
angular.module('BlurAdmin.pages.ui.animatedPanel', [])
.config(routeConfig);
/** @ngInject */
function routeConfig($stateProvider) {
$stateProvider
.state('ui.animatedPanel', {
url: '/animatedPanel',
templateUrl: 'app/pages/ui/animatedPanel/animatedPanel.html',
title: 'Animated Panel',
controller: 'AnimatedPanelPageCtrl',
sidebarMeta: {
order: 0,
},
});
}
})();

1
src/app/pages/ui/ui.module.js
View File

@ -17,6 +17,7 @@
'BlurAdmin.pages.ui.tabs',
'BlurAdmin.pages.ui.slider',
'BlurAdmin.pages.ui.panels',
'BlurAdmin.pages.ui.animatedPanel'
])
.config(routeConfig);

6
src/app/theme/components/baPanel/baPanel.service.js
View File

@ -18,7 +18,11 @@
template: function(elem, attrs) {
var res = '<div class="panel-body" ng-transclude></div>';
if (attrs.baPanelTitle) {
var titleTpl = '<div class="panel-heading clearfix"><h3 class="panel-title">' + attrs.baPanelTitle + '</h3></div>';
var titleTpl = '<div class="panel-heading clearfix"><h3 class="panel-title">' + attrs.baPanelTitle + '</h3>'
if(attrs.close) {
titleTpl+= '<button class="btn btn-sm btn-danger pull-right panel-close" ng-click='+attrs.close+'><span class="fa fa-times"></span> Close</button>';
}
titleTpl+='</div>';
res = titleTpl + res; // title should be before
}

8
src/sass/theme/bootstrap-overrides/_panel.scss → src/sass/theme/bootstrap-overrides/_panels.scss
View File

@ -171,7 +171,13 @@ $panel-heading-font-size: 16px;
font-weight: $font-light;
}
.panel-close{
position: absolute;
right: 10px;
top: 5px;
}
/*
.panel-group .panel {
border-radius: 0;
}*/
}*/