diff --git a/beat/web/reports/static/reports/app/directives/edit/panelContent.js b/beat/web/reports/static/reports/app/directives/edit/panelContent.js
index 7ad60891e1f56b6a668dbe7d6bb201ce881a6698..9b5090d03bbee96a7f5031277bcd975307eb69d6 100644
--- a/beat/web/reports/static/reports/app/directives/edit/panelContent.js
+++ b/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}}"
diff --git a/beat/web/reports/static/reports/app/directives/edit/panelExperiments.js b/beat/web/reports/static/reports/app/directives/edit/panelExperiments.js
index 9ef23e626893fad7358f97981d7a48f097ec8724..b24f1d8d5d6fc068f869a657b0a05b08053e3279 100644
--- a/beat/web/reports/static/reports/app/directives/edit/panelExperiments.js
+++ b/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>
diff --git a/beat/web/reports/static/reports/app/directives/edit/panelItems.js b/beat/web/reports/static/reports/app/directives/edit/panelItems.js
index d1c0244692560d2bda95ac21855889bf83c129bb..4ad633fee326489f08f703a5ae0dbab915dd9457 100644
--- a/beat/web/reports/static/reports/app/directives/edit/panelItems.js
+++ b/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"
diff --git a/beat/web/reports/static/reports/app/directives/edit/plotItem.js b/beat/web/reports/static/reports/app/directives/edit/plotItem.js
index e1c35e52d9e59c3f509c16e72e7f416f942188a3..bcdd6e9dc9632acbd3acc8ebf9cd23b6e1a65041 100644
--- a/beat/web/reports/static/reports/app/directives/edit/plotItem.js
+++ b/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}}"
diff --git a/beat/web/reports/static/reports/app/directives/edit/tableItem.js b/beat/web/reports/static/reports/app/directives/edit/tableItem.js
index 3e1eab9de81a9d80cdb0029eea45994ca0ddadce..7f981b2c9e91535f6f71fc2abe71fea137d25776 100644
--- a/beat/web/reports/static/reports/app/directives/edit/tableItem.js
+++ b/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}}"
diff --git a/beat/web/reports/static/reports/app/directives/edit/textItem.js b/beat/web/reports/static/reports/app/directives/edit/textItem.js
index cdce2cc6fe8fd505ce49dcf2e15ac59aa98c399e..ffaae269124323279e7ab572a0b144b71626bcbe 100644
--- a/beat/web/reports/static/reports/app/directives/edit/textItem.js
+++ b/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}}"