Merge pull request #40 from Kraku/divider-label

Divider label

Author: jseppi

README.md

@@ -26,6 +26,10 @@ app.controller('AppCtrl', function($scope) {
     // If an options object has an 'href' property set, then that dropdown entry
     //   will behave as a link and cannot be selected.
     $scope.ddSelectOptions = [
+        {
+            text: 'divider label',
+            divider: true
+        },
         {
             text: 'Option1',
             value: 'a value'

angular-dropdowns.css

@@ -63,6 +63,13 @@
   background: #e6e8ea;
 }
 
+.wrap-dd-select .dropdown li.divider-label {
+  background: #e6e8ea;
+  cursor: default;
+  color: #000;
+  padding: 10px 0;
+}
+
 .wrap-dd-select .dropdown li a {
   display: block;
   padding: 10px;
@@ -157,6 +164,13 @@
   background: #e6e8ea;
 }
 
+.wrap-dd-menu .dropdown li.divider-label {
+  background: #e6e8ea;
+  cursor: default;
+  color: #000;
+  padding: 10px 0;
+}
+
 .wrap-dd-menu .dropdown li a {
   display: block;
   padding: 10px;

angular-dropdowns.js

@@ -21,13 +21,16 @@ dd.run(['$templateCache', function ($templateCache) {
   ].join(''));
 
   $templateCache.put('ngDropdowns/templates/dropdownSelectItem.html', [
-    '<li ng-class="{divider: dropdownSelectItem.divider}">',
+    '<li ng-class="{divider: (dropdownSelectItem.divider && !dropdownSelectItem.text), \'divider-label\': (dropdownSelectItem.divider && dropdownSelectItem.text)}">',
       '<a href="" class="dropdown-item"',
       ' ng-if="!dropdownSelectItem.divider"',
       ' ng-href="{{dropdownSelectItem.href}}"',
       ' ng-click="selectItem()">',
         '{{dropdownSelectItem[dropdownItemLabel]}}',
       '</a>',
+      '<span ng-if="dropdownSelectItem.divider">',
+        '{{dropdownSelectItem.text}}',
+      '</span>',
     '</li>'
   ].join(''));
 
@@ -42,13 +45,16 @@ dd.run(['$templateCache', function ($templateCache) {
   ].join(''));
 
   $templateCache.put('ngDropdowns/templates/dropdownMenuItem.html', [
-    '<li ng-class="{divider: dropdownMenuItem.divider}">',
+    '<li ng-class="{divider: dropdownMenuItem.divider, \'divider-label\': dropdownMenuItem.divider && dropdownMenuItem.text}">',
       '<a href="" class="dropdown-item"',
       ' ng-if="!dropdownMenuItem.divider"',
       ' ng-href="{{dropdownMenuItem.href}}"',
       ' ng-click="selectItem()">',
         '{{dropdownMenuItem[dropdownItemLabel]}}',
       '</a>',
+      '<span ng-if="dropdownMenuItem.divider">',
+        '{{dropdownMenuItem.text}}',
+      '</span>',
     '</li>'
   ].join(''));
 

dist/angular-dropdowns.css

@@ -55,15 +55,21 @@
   list-style: none;
 
   /* Hiding */
-  opacity: 0;
-  pointer-events: none;
+  visibility: hidden;
 }
 
 .wrap-dd-select .dropdown li.divider {
   padding: 2px 0;
   background: #e6e8ea;
 }
 
+.wrap-dd-select .dropdown li.divider-label {
+  background: #e6e8ea;
+  cursor: default;
+  color: #000;
+  padding: 10px 0;
+}
+
 .wrap-dd-select .dropdown li a {
   display: block;
   padding: 10px;
@@ -119,8 +125,7 @@
 }
 
 .wrap-dd-select.active .dropdown {
-  opacity: 1;
-  pointer-events: auto;
+  visibility: visible;
 }
 
 /****** dropdown-menu *******/
@@ -151,15 +156,21 @@
   list-style: none;
 
   /* Hiding */
-  opacity: 0;
-  pointer-events: none;
+  visibility: hidden;
 }
 
 .wrap-dd-menu .dropdown li.divider {
   padding: 2px 0;
   background: #e6e8ea;
 }
 
+.wrap-dd-menu .dropdown li.divider-label {
+  background: #e6e8ea;
+  cursor: default;
+  color: #000;
+  padding: 10px 0;
+}
+
 .wrap-dd-menu .dropdown li a {
   display: block;
   padding: 10px;
@@ -214,6 +225,5 @@
 }
 
 .wrap-dd-menu .dropdown.active {
-  opacity: 1;
-  pointer-events: auto;
-}
+  visibility: visible;
+}

dist/angular-dropdowns.js

@@ -21,13 +21,16 @@ dd.run(['$templateCache', function ($templateCache) {
   ].join(''));
 
   $templateCache.put('ngDropdowns/templates/dropdownSelectItem.html', [
-    '<li ng-class="{divider: dropdownSelectItem.divider}">',
+    '<li ng-class="{divider: (dropdownSelectItem.divider && !dropdownSelectItem.text), \'divider-label\': (dropdownSelectItem.divider && dropdownSelectItem.text)}">',
       '<a href="" class="dropdown-item"',
       ' ng-if="!dropdownSelectItem.divider"',
       ' ng-href="{{dropdownSelectItem.href}}"',
       ' ng-click="selectItem()">',
         '{{dropdownSelectItem[dropdownItemLabel]}}',
       '</a>',
+      '<span ng-if="dropdownSelectItem.divider">',
+        '{{dropdownSelectItem.text}}',
+      '</span>',
     '</li>'
   ].join(''));
 
@@ -42,13 +45,16 @@ dd.run(['$templateCache', function ($templateCache) {
   ].join(''));
 
   $templateCache.put('ngDropdowns/templates/dropdownMenuItem.html', [
-    '<li ng-class="{divider: dropdownMenuItem.divider}">',
+    '<li ng-class="{divider: dropdownMenuItem.divider, \'divider-label\': dropdownMenuItem.divider && dropdownMenuItem.text}">',
       '<a href="" class="dropdown-item"',
       ' ng-if="!dropdownMenuItem.divider"',
       ' ng-href="{{dropdownMenuItem.href}}"',
       ' ng-click="selectItem()">',
         '{{dropdownMenuItem[dropdownItemLabel]}}',
       '</a>',
+      '<span ng-if="dropdownMenuItem.divider">',
+        '{{dropdownMenuItem.text}}',
+      '</span>',
     '</li>'
   ].join(''));
 

dist/angular-dropdowns.min.js

@@ -5,6 +5,9 @@ var app = angular.module('app', ['ngDropdowns']);
 app.controller('AppCtrl', function($scope) {
   $scope.ddSelectOptions = [
     {
+      text: 'Label',
+      divider: true
+    }, {
       text: 'Option1',
       value: 'one',
       iconCls: 'someicon'
@@ -25,6 +28,9 @@ app.controller('AppCtrl', function($scope) {
 
   $scope.ddMenuOptions = [
     {
+      text: 'Label',
+      divider: true
+    }, {
       text: 'Option1',
       iconCls: 'someicon'
     }, {