Integrate view mode button section into toolbar

app/assets/stylesheets/layout/_toolbar.css.sass

@@ -8,6 +8,7 @@
   height:  $header_height
   padding: 0px
 
+#toolbar
   ul
     margin:  0
     padding: 0
@@ -16,13 +17,19 @@
   li
     list-style-type: none
     float: left
-    margin-right: 5 //$drop-nav-spacing // spacing between nav items
-    //font-size: $font-size
-    //line-height: $line-height
-    
+    &.toolbar-item
+      margin: 0 0 0 5px //$drop-nav-spacing // spacing between nav items
+
+  .toolbar-button-group
+    button
+      margin-right: 0
+
   a.last, .last
     margin-right: 0px
-    
+    //font-size: $font-size
+    //line-height: $line-height
+
+
 
 .title-container
   $line-height: 20px

app/views/work_packages/index.html.erb

@@ -50,7 +50,7 @@ end
 <div id="work-packages-index" ng-controller="WorkPackagesController">
 
   <div class="toolbar-container">
-    <toolbar>
+    <div toolbar id="toolbar">
       <selectable-title selected-title="selectedTitle"
                         reload-method="reloadQuery"
                         data-groups="dataGroups"
@@ -58,17 +58,46 @@ end
       </selectable-title>
 
       <ul>
-        <li><button class="button_highlight" with-dropdown dropdown-id="tasksDropdown"><i class="icon-add icon4"></i>New Task<i class="icon-pulldown-arrow1 icon-dropdown"></i></button></li>
-        <li>
+        <li class="toolbar-item">
+          <button class="button_highlight" with-dropdown dropdown-id="tasksDropdown">
+            <i class="icon-add icon4"></i>
+            New Task
+            <i class="icon-pulldown-arrow1 icon-dropdown"></i>
+          </button>
+        </li>
+        <li class="toolbar-item">
           <button class="button"
                   ng-click="showFiltersOptions = !showFiltersOptions"
                   ng-class="{active: showFiltersOptions}">
             <i class="icon-pin icon-buttons"></i>Filter
           </button>
         </li>
-        <li><button class="button last" with-dropdown dropdown-id="settingsDropdown"><i class="icon-settings"></i><i class="icon-pulldown-arrow1 icon-dropdown"></i></button></li>
+        <li class="toolbar-item">
+          <ul id="work-packages-view-mode-selection" class="toolbar-button-group">
+            <li>
+              <button class="button"
+                      ng-click="viewMode = 'list'"
+                      ng-class="{active: viewMode === 'list'}">
+                <i class="icon-view2 icon-buttons"></i>
+              </button>
+            </li>
+            <li>
+              <button class="button"
+                      ng-click="viewMode = 'work-package-details'"
+                      ng-class="{active: viewMode === 'work-package-details'}">
+                <i class="icon-cup icon-buttons"></i>
+              </button>
+            </li>
+          </ul>
+        </li>
+        <li class="toolbar-item">
+          <button class="button last" with-dropdown dropdown-id="settingsDropdown">
+            <i class="icon-settings"></i>
+            <i class="icon-pulldown-arrow1 icon-dropdown"></i>
+          </button>
+        </li>
       </ul>
-    </toolbar>
+    </div>
   </div>
 
   <div class="dropdown dropdown-relative dropdown-anchor-right" id="tasksDropdown">