more icons not text, draghandle button

beat/web/reports/static/reports/app/directives/edit/panelContent.js

@@ -67,12 +67,24 @@ angular.module('reportApp').directive("groupPanelContent", ['GroupsService', fun
 				</span>
 			</span>
 		</form>
-		<div class='btn-group'>
-			<button ng-disabled='!isEditable' class='btn btn-danger' ng-click='deleteGroup(group.name)'>Delete Group</button>
+		<div
+			group-add-items-menu
+			class="btn-group" role="group" role='tab'
+			group='group'>
+		</div>
+		<div class='btn-group action-buttons'>
+			<span
+				ng-click='deleteGroup(group.name)'
+				class="btn btn-default btn-delete"
+				data-toggle="tooltip" data-placement="top" title="Delete Group">
+				<i class="fa fa-times fa-lg"></i>
+			</span>
+			<span
+				class='btn btn-default drag-handle'
+				data-toggle='tooltip' data-placement='top' title='Drag to re-order groups'>
+				<i class='fa fa-arrows fa-lg'></i>
+			</span>
 		</div>
-		<span class='btn btn-default drag-handle' data-toggle='tooltip' data-placement='top' title='Drag to re-order groups'>
-			<i class='fa fa-arrows'></i>
-		</span>
 	</h4>
 </div>
 <div id="collapse-{{group.name}}"

beat/web/reports/static/reports/app/directives/edit/panelExperiments.js

@@ -90,9 +90,14 @@ angular.module('reportApp').directive("groupPanelExperiments", ['GroupsService',
 			<tbody>
 				<tr ng-repeat='expName in group.experiments'>
 					<td>
-						<button ng-disabled='!isEditable' class="btn btn-danger" aria-hidden="true" ng-click='group.removeExperiment(expName)'>
-							Remove
-						</button>
+						<div class='btn-group action-buttons'>
+							<span
+								ng-click='group.removeExperiment(expName)'
+								class="btn btn-default btn-delete"
+								data-toggle="tooltip" data-placement="top" title="Remove Experiment from Group">
+								<i class="fa fa-times fa-lg"></i>
+							</span>
+						</div>
 					</td>
 					<td>{{ expName }}</td>
 					<td><input ng-disabled='!isEditable' ng-model='group.aliases[expName]'></input></td>

beat/web/reports/static/reports/app/directives/edit/panelItems.js

@@ -32,7 +32,7 @@ angular.module('reportApp').directive("groupPanelItems", [function(){
 		},
 		link: function(scope){
 			scope.sortableOptions = {
-				handle: '.panel-heading > .panel-title > .drag-handle'
+				handle: '.panel-heading > .panel-title > .action-buttons > .drag-handle'
 			};
 		},
 		template: `
@@ -48,11 +48,6 @@ angular.module('reportApp').directive("groupPanelItems", [function(){
 			aria-controls="collapse-{{group.name}}-itemlist">
 			Items
 		</a>
-		<div
-			group-add-items-menu
-			class="btn-group" role="group" role='tab'
-			group='group'
-		></div>
 	</h4>
 </div>
 <div id="collapse-{{group.name}}-itemlist"

beat/web/reports/static/reports/app/directives/edit/plotItem.js

@@ -37,7 +37,7 @@ angular.module('reportApp')
 			scope.domId = `${scope.group.name}_${scope.id}`;
 		},
 		template: `
-<div id="{{domId}}-heading" class="panel-heading" role="tab" style='cursor: grab;'>
+<div id="{{domId}}-heading" class="panel-heading" role="tab">
 	<h4 class="panel-title">
 		<a
 			class=''
@@ -55,19 +55,21 @@ angular.module('reportApp')
 				<!--<span class='glyphicon glyphicon-refresh'></span>!-->
 				Refresh Plot
 			</button>
-			<!--
-			<button class='btn btn-default' ng-click='showSerialized.val = !showSerialized.val'>
-				Toggle Serialize View
-			</button>
-			!-->
 		</div>
-		<button class='btn btn-danger' ng-click='group.removeReportItem(id)'>
-			Delete Plot
-		</button>
 
-		<span class='btn btn-default drag-handle' data-toggle='tooltip' data-placement='top' title='Drag to re-order item'>
-			<i class='fa fa-arrows'></i>
-		</span>
+		<div class='btn-group action-buttons'>
+			<span
+				ng-click='group.removeReportItem(id)'
+				class="btn btn-default btn-delete"
+				data-toggle="tooltip" data-placement="top" title="Delete Plot">
+				<i class="fa fa-times fa-lg"></i>
+			</span>
+			<span
+				class='btn btn-default drag-handle'
+				data-toggle='tooltip' data-placement='top' title='Drag to re-order item'>
+				<i class='fa fa-arrows fa-lg'></i>
+			</span>
+		</div>
 	</h4>
 </div>
 <div id="collapse-{{domId}}"

beat/web/reports/static/reports/app/directives/edit/tableItem.js

@@ -169,7 +169,7 @@ angular.module('reportApp')
 			};
 		},
 		template: `
-<div id="{{domId}}-heading" class="panel-heading" role="tab" style='cursor: grab;'>
+<div id="{{domId}}-heading" class="panel-heading" role="tab">
 	<h4 class="panel-title">
 		<a
 			class=''
@@ -205,19 +205,20 @@ angular.module('reportApp')
 			<button class='btn btn-default' ng-click='toggleViewingCSV()'>
 				Toggle CSV View
 			</button>
-			<!--
-			<button ng-disabled='!isEditable' class='btn btn-default' ng-click='showSerialized.val = !showSerialized.val'>
-				Toggle CSV View
-			</button>
-			!-->
 		</div>
-		<button ng-disabled='!isEditable' class='btn btn-danger' ng-click='group.removeReportItem(id)'>
-			Delete Table
-		</button>
-
-		<span class='btn btn-default drag-handle' data-toggle='tooltip' data-placement='top' title='Drag to re-order item'>
-			<i class='fa fa-arrows'></i>
-		</span>
+		<div class='btn-group action-buttons'>
+			<span
+				ng-click='group.removeReportItem(id)'
+				class="btn btn-default btn-delete"
+				data-toggle="tooltip" data-placement="top" title="Delete Table">
+				<i class="fa fa-times fa-lg"></i>
+			</span>
+			<span
+				class='btn btn-default drag-handle'
+				data-toggle='tooltip' data-placement='top' title='Drag to re-order item'>
+				<i class='fa fa-arrows fa-lg'></i>
+			</span>
+		</div>
 	</h4>
 </div>
 <div id="collapse-{{domId}}"

beat/web/reports/static/reports/app/directives/edit/textItem.js

@@ -80,7 +80,7 @@ angular.module('reportApp')
 			scope.compileContent();
 		},
 		template: `
-<div id="{{domId}}-heading" class="panel-heading" role="tab" style='cursor: grab;'>
+<div id="{{domId}}-heading" class="panel-heading" role="tab">
 	<h4 class="panel-title">
 		<a
 			class=''
@@ -100,20 +100,21 @@ angular.module('reportApp')
 			<button class='btn btn-default' ng-click='isViewingSrc.val = !isViewingSrc.val'>
 				Toggle View
 			</button>
-			<!-- dont show split view, just toggle between html/rst view
-			<button ng-disabled='!isEditable' class='btn btn-default' ng-click='showSerialized.val = !showSerialized.val'>
-				Toggle Compiled View
-			</button>
-			!-->
 		</div>
 
-		<button ng-disabled='!isEditable' class='btn btn-danger' ng-click='group.removeReportItem(item.id)'>
-			Delete Text Block
-		</button>
-
-		<span class='btn btn-default drag-handle' data-toggle='tooltip' data-placement='top' title='Drag to re-order item'>
-			<i class='fa fa-arrows'></i>
-		</span>
+		<div class='btn-group action-buttons'>
+			<span
+				ng-click='group.removeReportItem(item.id)'
+				class="btn btn-default btn-delete"
+				data-toggle="tooltip" data-placement="top" title="Delete Text Block">
+				<i class="fa fa-times fa-lg"></i>
+			</span>
+			<span
+				class='btn btn-default drag-handle'
+				data-toggle='tooltip' data-placement='top' title='Drag to re-order item'>
+				<i class='fa fa-arrows fa-lg'></i>
+			</span>
+		</div>
 	</h4>
 </div>
 <div id="collapse-{{domId}}"