adjust entity tree header elements and styling
diff --git a/ui-modules/app-inspector/app/views/main/main.less b/ui-modules/app-inspector/app/views/main/main.less
index d14fed7..527554f 100644
--- a/ui-modules/app-inspector/app/views/main/main.less
+++ b/ui-modules/app-inspector/app/views/main/main.less
@@ -20,11 +20,9 @@
.entity-tree-header {
display: flex;
+ justify-content: space-between;
- .entity-tree-title {
- flex-grow: 1;
- }
- .entity-tree-action {
+ .entity-tree-title, .entity-tree-sort-action, .entity-tree-action {
flex-shrink: 1;
vertical-align: middle;
margin-left: 0.5em;
diff --git a/ui-modules/app-inspector/app/views/main/main.template.html b/ui-modules/app-inspector/app/views/main/main.template.html
index 8721985..c7a90cd 100644
--- a/ui-modules/app-inspector/app/views/main/main.template.html
+++ b/ui-modules/app-inspector/app/views/main/main.template.html
@@ -22,31 +22,33 @@
<br-card>
<br-card-content class="entity-tree">
<div class="entity-tree-header">
- <h2 class="entity-tree-title">Applications</h2>
-
- <button class="entity-sort-action" >
- <div class="entity-sort-action-toggle" ng-click="ctrl.toggleSortOrder($event)" >
- <span class="glyphicon" ng-class="ctrl.sortReverse ? 'fa fa-sort-amount-desc' : 'fa fa-sort-amount-asc'"></span>
- </div>
- </button>
- <button class="btn btn-link entity-tree-action"
+ <div class="entity-tree-header-section">
+ <h2 class="entity-tree-title">Applications</h2>
+ <button class="btn btn-sm btn-default entity-tree-sort-action" ng-click="ctrl.toggleSortOrder($event)">
+ <div>
+ <span class="glyphicon" ng-class="ctrl.sortReverse ? 'fa fa-sort-amount-desc' : 'fa fa-sort-amount-asc'"></span>
+ </div>
+ </button>
+ </div>
+ <div class="entity-tree-header-section">
+ <button class="btn btn-link entity-tree-action"
ng-class="{'btn-sm': !ctrl.isNotificationsBlocked, 'btn-xs': ctrl.isNotificationsBlocked}"
ng-if="ctrl.isNotificationsSupported"
ng-disabled="ctrl.isNotificationsBlocked"
ng-click="ctrl.toggleNotifications()">
- <i class="fa fa-bell notifications" ng-if="!ctrl.isNotificationsBlocked"
- ng-class="{'active': ctrl.isNotificationsEnabled}"></i>
- <span class="fa-stack" ng-if="ctrl.isNotificationsBlocked"
- uib-tooltip="Notifications are currently blocked. You can allow them in your browser settings"
- tooltip-placement="left">
- <i class="fa fa-bell fa-stack-1x"></i>
- <i class="fa fa-ban fa-stack-2x text-danger"></i>
- </span>
- </button>
-
- <a href="/brooklyn-ui-blueprint-composer" class="btn btn-sm btn-default entity-tree-action">
- <i class="fa fa-plus"></i>
- </a>
+ <i class="fa fa-bell notifications" ng-if="!ctrl.isNotificationsBlocked"
+ ng-class="{'active': ctrl.isNotificationsEnabled}"></i>
+ <span class="fa-stack" ng-if="ctrl.isNotificationsBlocked"
+ uib-tooltip="Notifications are currently blocked. You can allow them in your browser settings"
+ tooltip-placement="left">
+ <i class="fa fa-bell fa-stack-1x"></i>
+ <i class="fa fa-ban fa-stack-2x text-danger"></i>
+ </span>
+ </button>
+ <a href="/brooklyn-ui-blueprint-composer" class="btn btn-sm btn-default entity-tree-action">
+ <i class="fa fa-plus"></i>
+ </a>
+ </div>
</div>
<entity-tree sort-reverse="ctrl.sortReverse"></entity-tree>
