<!DOCTYPE html>
<html>
<head>
<script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script data-require="angular.js@1.x" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
<script data-require="ui-bootstrap@*" data-semver="0.13.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.min.js"></script>
<link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="myApp" ng-controller="MainController">
<div class="col-lg-12 col-md-12 col-sm-12 zero-padding-left-right">
<div>
<div class="pull-left" style="color: #656D78; margin-top: 5px;">
<div class="col-lg-2 col-md-3 sidebar">
<div class="sidebar-nav" style="height:100% !important;min-height: 100% !important">
<div class="navbar navbar-custom" role="navigation">
<ul class="nav recommendation-nav">
<li >
<a href="#/"><img style="padding-right: 5px" /> Side bar</a>
</li>
<li >
<a href="#/"><img style="padding-right: 5px" />Side bar</a>
</li>
<li >
<a href="#/"><img style="padding-right: 5px" />Side bar</a>
</li>
<li >
<a href="#/"><img style="padding-right: 5px" />Side bar 1</a>
</li>
<li >
<a href="#/"><img style="padding-right: 5px" />Side bar 2</a>
</li>
<li >
<a href="#/"><img style="padding-right: 5px"/>Side bar 3</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-lg-10 col-md-9 report-area">
<div class="panel panel-default">
<div class="panel-body" style="padding-right:0px; padding-left:0px">
<div class="row">
<div class="col-md-1" style="padding-right:0px; padding-left:0px; margin-top:5px">
<div ng-show="!loadinga">
<b>Agent: </b>
</div>
</div>
<div class="col-md-2" style="padding-left:0px;">
<div class="dropdown " ng-show="!loadinga">
<button class="btn btn-default btn-block dropdown-toggle whiteDropdown" ng-disabled="loading" style="background-color: #fff; border-color: #C3C3C3" type="button" id="dropdownMenu1" aria-expanded="true">
{{dropDownTitle}}
<span class="caret"></span>
</button>
<ul class="dropdown-menu scroll-menu nav" role="menu" aria-labelledby="dropdownMenu1">
<li ng-repeat="agent in agentListData">
<a role="menuitem" href="#" ng-click="">{{agent}}</a>
</li>
</ul>
</div>
</div>
<div class="col-md-2" style="padding-left:0px;">
<div class="dropdown " ng-show="!loadinga">
<button class="btn btn-default btn-block dropdown-toggle whiteDropdown" ng-disabled="loading" type="button" id="dropdownMenu2" aria-expanded="true">
{{dropDownAllTaskStatusTitle}}
<span class="caret"></span>
</button>
<ul class="dropdown-menu scroll-menu nav" role="menu" aria-labelledby="dropdownMenu2">
<li ng-repeat="task in taskStatusListData">
<a role="menuitem" href="#" ng-click="">{{task.title}}</a>
</li>
</ul>
</div>
</div>
<div class="col-md-2" style="padding-right: 0px; padding-left:0px;">
<div ng-show="!loadinga">
<input id="autoComplete" ng-model="selected" typeahead="task.name for task in taskList | filter:$viewValue | limitTo:20" class="form-control" typeahead-on-select="" placeholder="Search Tasks" typeahead-focus-first="true" ng-disabled="loading" type="text"
ng-blur="" />
</div>
</div>
<div class="col-md-2 divGridText" ng-show="!loadinga" style="padding-right: 0px; padding-left:0px; margin-right:0px" align="right">
<input ng-model="isChecked" ng-click="checkboxClicked(isChecked)" ng-disabled="loading" type="checkbox" />
<label for="excludeMinutesStep" style="font-weight:normal">Exclude tasks running < </label>
<input id="excludeMinutesStep" min="0" max="10" ng-disabled="!isChecked || loading" ng-model="excludeValue" ng-change="" size="2" style="width:40px" type="number" /> minutes
</div>
<div class="col-md-2 divGridText" ng-show="!loadinga" style="padding-right: 0px; padding-left:0px;" align="centr">
<input id="datalabels" ng-model="isLabelShowChecked" ng-click="" ng-disabled="loading" type="checkbox" />
<label for="datalabels" style="font-weight:normal;">Show Task Labels</label>
</div>
<div class="col-md-1 divGridImage" ng-show="!loadinga" align="center" style="padding-right: 0px; padding-left:0px;">
<button style="margin-left:3px" class="btn btn-custom" ng-click="">Reset</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
// Code goes here
var myApp = angular.module("myApp", ['ui.bootstrap']);
myApp.controller("MainController", ["$scope", function($scope) {
$scope.isChecked = isLabelShowChecked = false;
$scope.excludeValue = 5;
$scope.dropDownTitle = "Some Long/short Title 1";
$scope.dropDownAllTaskStatusTitle = "Some Other Long/short Title 1";
$scope.agentListData = ["aaaaaa","bbbbb"];
$scope.taskStatusListData = [{title:"aa"},{title:"qq"}];
$scope.taskList = [{name:"aa"},{name:"qq"}];
}]);
/* Styles go here */
html, body {
height: 100% !important;
min-height: 100% !important;
}
/* for leftbar menu */
.navbar-default {
width: 100%;
}
.navbar-custom {
background-color:#FFFFFF;
color:#656D78;
border-radius:0;
border: none;
}
.navbar-custom .navbar-nav > li > a {
color:#fff;
}
.navbar-custom .navbar-nav > .active > a, .navbar-nav > .active > a:hover, .navbar-nav > .active > a:focus {
color: #ffffff;
background-color:transparent;
}
.navbar-custom .navbar-brand {
color:#eeeeee;
}
.ul-custom > li:hover {
background-color: #424A50;
}
.leftbar-item-container {
cursor: pointer;
cursor: hand;
}
.leftbar-title {
color: #f2f2f2;
font: 11pt Arial;
}
.text-label {
color: #aab2bd;
font: 8pt;
}
.text-label-emphasize {
color: #575F64;
}
.sidebar {
float: left;
height: 850px !important;
min-height: 100px !important;
padding-left: 0px !important;
padding-right: 0px !important;
min-width: 170px;
left: 0px;
background: #FFFFFF;
border-right: 1px solid #AAB2BD;
}
.report-area {
min-width: 830px;
display: inline-block;
float: left;
}