fix ui issues with enabling batarang

This commit is contained in:
Brian Ford 2012-11-13 19:03:12 -05:00
parent 0905deec4e
commit 6636a6f00f
4 changed files with 55 additions and 31 deletions

View File

@ -23,6 +23,19 @@ body {
background-color: #E0E0E0;
}
.bat-nav-check {
background-color: #fff;
border: 1px solid #ddd;
border-bottom-color: transparent;
border-radius: 4px 4px 0 0;
padding: 8px 12px 8px 12px;
margin-right: 2px;
line-height: 18px;
}
.bat-nav-check input[type="checkbox"] {
margin: 0;
}
/*
* Slider widget style based on jquery-ui-bootstrap

View File

@ -1,19 +0,0 @@
panelApp.controller('PanelCtrl', function PanelCtrl($scope, appContext) {
// TODO: remove this (newVal === oldVal ?)
var first = true;
appContext.getDebug(function (result) {
$scope.enable = result;
$scope.$watch('enable', function (newVal, oldVal) {
// prevent refresh on initial pageload
if (first) {
first = false;
} else {
appContext.setDebug(newVal);
}
});
});
});

View File

@ -10,18 +10,52 @@ panelApp.directive('batTabs', function ($compile, $templateCache, $http) {
'<li ng-repeat="pane in panes" ng-class="{active:pane.selected}">'+
'<a href="" ng-click="select(pane)">{{pane.title}}</a>' +
'</li>' +
'<li>' +
'<div class="bat-nav-check">' +
'<input type="checkbox" ng-model="enable" id="enable-instrumentation"> ' +
'Enable' +
'</div>' +
'</li>' +
'</ul>' +
'</div>' +
'<div class="row-fluid bat-tabs-inside"></div>' +
'<div ng-transclude></div>' +
'</div>',
replace: true,
controller: function ($scope, $element) {
controller: function ($scope, appContext) {
var panes = $scope.panes = [];
this.addPane = function(pane) {
panes.push(pane);
};
// TODO: remove this (newVal === oldVal ?)
var first = true;
appContext.getDebug(function (result) {
$scope.enable = result;
$scope.$watch('enable', function (newVal, oldVal) {
// prevent refresh on initial pageload
if (first) {
first = false;
} else {
appContext.setDebug(newVal);
if (!newVal) {
$scope.lastPane = $scope.currentPane;
$scope.select($scope.panes[$scope.panes.length - 1]);
} else {
$scope.select($scope.lastPane);
}
}
});
if (result) {
$scope.select($scope.panes[0]);
}
});
},
link: function (scope, element, attr) {
@ -36,6 +70,9 @@ panelApp.directive('batTabs', function ($compile, $templateCache, $http) {
}
scope.select = function (pane) {
if (!scope.enable && pane !== scope.panes[scope.panes.length - 1]) {
return;
}
$http.get(pane.src, { cache: $templateCache }).
then(function (response) {
var template = response.data;
@ -51,9 +88,11 @@ panelApp.directive('batTabs', function ($compile, $templateCache, $http) {
pane.selected = false;
});
pane.selected = true;
scope.currentPane = pane;
};
scope.select(scope.panes[0]);
scope.lastPane = scope.panes[0];
scope.select(scope.panes[scope.panes.length - 1]);
}
};

View File

@ -41,19 +41,10 @@
<script src="js/controllers/DepsCtrl.js"></script>
<script src="js/controllers/ModelCtrl.js"></script>
<script src="js/controllers/OptionsCtrl.js"></script>
<script src="js/controllers/PanelCtrl.js"></script>
<script src="js/controllers/PerfCtrl.js"></script>
</head>
<body ng-controller="PanelCtrl">
<label class="checkbox" for="enable-instrumentation">
<input type="checkbox" ng-model="enable" id="enable-instrumentation">
Enable
<span class="label label-important">
Causes refresh
<i class="icon-refresh icon-white"></i>
</span>
</label>
<body>
<bat-tabs>
<bat-pane title="Models" src="panes/model.html"></bat-pane>
<bat-pane title="Performance" src="panes/perf.html"></bat-pane>