Issue with permanent notifications

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: '[email protected]',
+ age: '28'
+ },
+ {
+ id: 2,
+ firstName: 'Jacob',
+ lastName: 'Thornton',
+ username: '@fat',
+ email: '[email protected]',
+ age: '45'
+ },
+ {
+ id: 3,
+ firstName: 'Larry',
+ lastName: 'Bird',
+ username: '@twitter',
+ email: '[email protected]',
+ age: '18'
+ },
+ {
+ id: 4,
+ firstName: 'John',
+ lastName: 'Snow',
+ username: '@snow',
+ email: '[email protected]',
+ age: '20'
+ },
+ {
+ id: 5,
+ firstName: 'Jack',
+ lastName: 'Sparrow',
+ username: '@jack',
+ email: '[email protected]',
+ age: '30'
+ },
+ {
+ id: 6,
+ firstName: 'Ann',
+ lastName: 'Smith',
+ username: '@ann',
+ email: '[email protected]',
+ age: '21'
+ },
+ {
+ id: 7,
+ firstName: 'Barbara',
+ lastName: 'Black',
+ username: '@barbara',
+ email: '[email protected]',
+ age: '43'
+ },
+ {
+ id: 8,
+ firstName: 'Sevan',
+ lastName: 'Bagrat',
+ username: '@sevan',
+ email: '[email protected]',
+ age: '13'
+ },
+ {
+ id: 9,
+ firstName: 'Ruben',
+ lastName: 'Vardan',
+ username: '@ruben',
+ email: '[email protected]',
+ age: '22'
+ }
+ ];
+ } 
+
+})();

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();
+ }
+ }
+})();

src/app/pages/ui/animatedPanel/animatedPanel.html

@@ -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>

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,
+ },
+ });
+ }
+
+})();

src/app/pages/ui/notifications/NotificationsPageCtrl.js

@@ -96,7 +96,10 @@
  };
 
  $scope.openToast = function () {
- angular.extend(toastrConfig, $scope.options);
+ angular.extend(toastrConfig, $scope.options,{
+ timeOut: parseInt($scope.options.timeOut),
+ extendedTimeOut: parseInt($scope.options.extendedTimeOut)
+ });
  openedToasts.push(toastr[$scope.options.type]($scope.options.msg, $scope.options.title));
  var strOptions = {};
  for (var o in $scope.options) if (o != 'msg' && o != 'title')strOptions[o] = $scope.options[o];

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);
 

src/app/theme/components/baPanel/baPanel.service.js

@@ -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
  }
 

src/sass/theme/bootstrap-overrides/_panel.scss → 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;
-}*/
+}*/