diff --git a/src/app/pages/ui/animatedPanel/AnimatedPanelPageCtrl.js b/src/app/pages/ui/animatedPanel/AnimatedPanelPageCtrl.js new file mode 100644 index 0000000..4b6c035 --- /dev/null +++ b/src/app/pages/ui/animatedPanel/AnimatedPanelPageCtrl.js @@ -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' + } + ]; + } + +})(); diff --git a/src/app/pages/ui/animatedPanel/animatedPanel.directive.js b/src/app/pages/ui/animatedPanel/animatedPanel.directive.js new file mode 100644 index 0000000..cf51195 --- /dev/null +++ b/src/app/pages/ui/animatedPanel/animatedPanel.directive.js @@ -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(); + } + } +})(); \ No newline at end of file diff --git a/src/app/pages/ui/animatedPanel/animatedPanel.html b/src/app/pages/ui/animatedPanel/animatedPanel.html new file mode 100644 index 0000000..865e581 --- /dev/null +++ b/src/app/pages/ui/animatedPanel/animatedPanel.html @@ -0,0 +1,67 @@ +
+
+
+
+
+
+
+ First Name +
+ +
+
+
+ Last Name +
+ +
+
+
+
+
+ Email +
+ +
+
+
+ Age +
+ +
+
+
+ +
+
+
+
+
+
+
+
+
+
+ + + + + + + + + + + + + + + + + +
First NameLast NameUsername
{{user.firstName}}{{user.lastName}}{{user.username}}
+
+
+
\ No newline at end of file diff --git a/src/app/pages/ui/animatedPanel/animatedPanel.module.js b/src/app/pages/ui/animatedPanel/animatedPanel.module.js new file mode 100644 index 0000000..d9267f8 --- /dev/null +++ b/src/app/pages/ui/animatedPanel/animatedPanel.module.js @@ -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, + }, + }); + } + +})(); diff --git a/src/app/pages/ui/ui.module.js b/src/app/pages/ui/ui.module.js index 7696ad2..2895acc 100644 --- a/src/app/pages/ui/ui.module.js +++ b/src/app/pages/ui/ui.module.js @@ -17,6 +17,7 @@ 'BlurAdmin.pages.ui.tabs', 'BlurAdmin.pages.ui.slider', 'BlurAdmin.pages.ui.panels', + 'BlurAdmin.pages.ui.animatedPanel' ]) .config(routeConfig); diff --git a/src/app/theme/components/baPanel/baPanel.service.js b/src/app/theme/components/baPanel/baPanel.service.js index cfd1cf7..298afbf 100644 --- a/src/app/theme/components/baPanel/baPanel.service.js +++ b/src/app/theme/components/baPanel/baPanel.service.js @@ -18,7 +18,11 @@ template: function(elem, attrs) { var res = '
'; if (attrs.baPanelTitle) { - var titleTpl = '

' + attrs.baPanelTitle + '

'; + var titleTpl = '

' + attrs.baPanelTitle + '

' + if(attrs.close) { + titleTpl+= ''; + } + titleTpl+='
'; res = titleTpl + res; // title should be before } diff --git a/src/sass/theme/bootstrap-overrides/_panel.scss b/src/sass/theme/bootstrap-overrides/_panels.scss similarity index 97% rename from src/sass/theme/bootstrap-overrides/_panel.scss rename to src/sass/theme/bootstrap-overrides/_panels.scss index 0ed448f..7006b31 100644 --- a/src/sass/theme/bootstrap-overrides/_panel.scss +++ b/src/sass/theme/bootstrap-overrides/_panels.scss @@ -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; -}*/ +}*/ \ No newline at end of file