#24 move message-section directive to components directory, add theme attribute

Author: micrum

src/app/views/partials/messages-section.html

@@ -1,5 +1,5 @@
 <section>
-    <md-subheader class="md-accent">{{vm.title}}</md-subheader>
+    <md-subheader ng-class="vm.theme">{{vm.title}}</md-subheader>
     <md-list>
         <md-list-item class="md-3-line" ng-repeat="message in vm.messages">
             <img class="md-avatar" ng-src="assets/images/einstein.jpg">

src/app/views/partials/messages.html

@@ -1,9 +1,9 @@
 <div class="messages" ng-controller="MessagesController as vm">
     <md-content class="messages-content">
 
-        <messages-section title="New Orders" messages="vm.messages"></messages-section>
-        <messages-section title="Delivered" messages="vm.messages"></messages-section>
-        <messages-section title="Problems reported" messages="vm.messages"></messages-section>
+        <messages-section theme="md-accent" title="New Orders" messages="vm.messages"></messages-section>
+        <messages-section theme="md-primary" title="Delivered" messages="vm.messages"></messages-section>
+        <messages-section theme="md-warn" title="Problems reported" messages="vm.messages"></messages-section>
 
         <md-divider></md-divider>
     </md-content>

src/app/directives/messages-section.js renamed to src/components/directives/messagesSection.js

@@ -11,6 +11,7 @@
             controller: messagesSectionController,
             scope: {
                 title: '@',
+                theme: '@',
                 messages: '='
             },
             controllerAs: 'vm',
@@ -21,6 +22,7 @@
             var vm = this;
 
             vm.title = $scope.title;
+            vm.theme = $scope.theme;
             vm.messages = $scope.messages;
         }
     }