Add expand feature to notification drawer

Author: jeff-phillips-18

less/notifications-drawer.less

@@ -41,6 +41,29 @@
     cursor: pointer;
     display: block;
   }
+  &.drawer-pf-expanded {
+    left: 270px;
+    width: inherit;
+    .drawer-pf-toggle-expand:before {
+      content: "\f101";
+    }
+  }
+}
+.drawer-pf-toggle-expand {
+  color: inherit;
+  cursor: pointer;
+  left: 0;
+  padding: 2px 5px;
+  position: absolute;
+  &:before {
+    content: "\f100";
+    font-family: "FontAwesome";
+  }
+  &:hover,
+  &:focus {
+    color: inherit;
+    text-decoration: none;
+  }
 }
 
 .drawer-pf-action {
@@ -77,13 +100,22 @@
   }
   &:hover { background-color: @color-pf-blue-50; }
   &.unread .drawer-pf-notification-message { font-weight: bold; }
+  &.expanded-notification {
+    .date {
+      border-right: none;
+      padding-right: 0;
+    }
+  }
 }
 
 .drawer-pf-notification-info,
 .drawer-pf-notification-message {
   display: block;
   padding-left: 27px;
   padding-right: 19px;
+  .expanded-notification & {
+    display: inline-block;
+  }
 }
 
 .drawer-pf-notifications-non-clickable .drawer-pf-notification:hover {
@@ -128,4 +160,4 @@
     top: 26px;
   }
   .drawer-pf-trigger-icon { cursor: pointer; }
-}
+}

tests/pages/_includes/widgets/notification-drawer.html

@@ -1,5 +1,6 @@
 <div class="drawer-pf hide drawer-pf-notifications-non-clickable">
   <div class="drawer-pf-title">
+    <a class="drawer-pf-toggle-expand"></a>
     <h3 class="text-center">Notifications Drawer</h3>
   </div>
   <div class="panel-group" id="notification-drawer-accordion">
@@ -88,6 +89,19 @@ <h4 class="panel-title">
         $drawer.addClass('hide');
       }
     });
+    $('.drawer-pf-toggle-expand').click(function() {
+      var $drawer = $('.drawer-pf');
+      var $drawerNotifications = $drawer.find('.drawer-pf-notification');
+
+      if ($drawer.hasClass('drawer-pf-expanded')) {
+        $drawer.removeClass('drawer-pf-expanded');
+        $drawerNotifications.removeClass('expanded-notification');
+      } else {
+        $drawer.addClass('drawer-pf-expanded');
+        $drawerNotifications.addClass('expanded-notification');
+      }
+    });
+
     // Mark All Read
     $('.panel-collapse').each(function (index, panel) {
       var $panel = $(panel);
@@ -99,4 +113,4 @@ <h4 class="panel-title">
 
     $('#notification-drawer-accordion').initCollapseHeights('.panel-body');
   });
-</script>
+</script>