header.html 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272
  1. <!-- navbar header -->
  2. <div class="navbar-header {{app.settings.navbarHeaderColor}}">
  3. <button class="pull-right visible-xs dk" ui-toggle-class="show" data-target=".navbar-collapse">
  4. <i class="glyphicon glyphicon-cog"></i>
  5. </button>
  6. <button class="pull-right visible-xs" ui-toggle-class="off-screen" data-target=".app-aside" ui-scroll="app">
  7. <i class="glyphicon glyphicon-align-justify"></i>
  8. </button>
  9. <!-- brand -->
  10. <a href="#/" class="navbar-brand text-lt">
  11. <i class="fa fa-btc"></i>
  12. <img src="img/logo.png" alt="." class="hide">
  13. <span class="hidden-folded m-l-xs">{{app.name}}</span>
  14. </a>
  15. <!-- / brand -->
  16. </div>
  17. <!-- / navbar header -->
  18. <!-- navbar collapse -->
  19. <div class="collapse pos-rlt navbar-collapse box-shadow {{app.settings.navbarCollapseColor}}">
  20. <!-- buttons -->
  21. <div class="nav navbar-nav hidden-xs">
  22. <a href class="btn no-shadow navbar-btn" ng-click="app.settings.asideFolded = !app.settings.asideFolded">
  23. <i class="fa {{app.settings.asideFolded ? 'fa-indent' : 'fa-dedent'}} fa-fw"></i>
  24. </a>
  25. <a href class="btn no-shadow navbar-btn" ui-toggle-class="show" target="#aside-user">
  26. <i class="icon-user fa-fw"></i>
  27. </a>
  28. </div>
  29. <!-- / buttons -->
  30. <!-- link and dropdown -->
  31. <ul class="nav navbar-nav hidden-sm">
  32. <li class="dropdown pos-stc" dropdown>
  33. <a href class="dropdown-toggle" dropdown-toggle>
  34. <span>Mega</span>
  35. <span class="caret"></span>
  36. </a>
  37. <div class="dropdown-menu wrapper w-full bg-white">
  38. <div class="row">
  39. <div class="col-sm-4">
  40. <div class="m-l-xs m-t-xs m-b-xs font-bold">Pages <span class="badge badge-sm bg-success">10</span></div>
  41. <div class="row">
  42. <div class="col-xs-6">
  43. <ul class="list-unstyled l-h-2x">
  44. <li>
  45. <a href><i class="fa fa-fw fa-angle-right text-muted m-r-xs"></i>Profile</a>
  46. </li>
  47. <li>
  48. <a href><i class="fa fa-fw fa-angle-right text-muted m-r-xs"></i>Post</a>
  49. </li>
  50. <li>
  51. <a href><i class="fa fa-fw fa-angle-right text-muted m-r-xs"></i>Search</a>
  52. </li>
  53. <li>
  54. <a href><i class="fa fa-fw fa-angle-right text-muted m-r-xs"></i>Invoice</a>
  55. </li>
  56. </ul>
  57. </div>
  58. <div class="col-xs-6">
  59. <ul class="list-unstyled l-h-2x">
  60. <li>
  61. <a href><i class="fa fa-fw fa-angle-right text-muted m-r-xs"></i>Price</a>
  62. </li>
  63. <li>
  64. <a href><i class="fa fa-fw fa-angle-right text-muted m-r-xs"></i>Lock screen</a>
  65. </li>
  66. <li>
  67. <a href><i class="fa fa-fw fa-angle-right text-muted m-r-xs"></i>Sign in</a>
  68. </li>
  69. <li>
  70. <a href><i class="fa fa-fw fa-angle-right text-muted m-r-xs"></i>Sign up</a>
  71. </li>
  72. </ul>
  73. </div>
  74. </div>
  75. </div>
  76. <div class="col-sm-4 b-l b-light">
  77. <div class="m-l-xs m-t-xs m-b-xs font-bold">UI Kits <span class="label label-sm bg-primary">12</span></div>
  78. <div class="row">
  79. <div class="col-xs-6">
  80. <ul class="list-unstyled l-h-2x">
  81. <li>
  82. <a href><i class="fa fa-fw fa-angle-right text-muted m-r-xs"></i>Buttons</a>
  83. </li>
  84. <li>
  85. <a href><i class="fa fa-fw fa-angle-right text-muted m-r-xs"></i>Icons <span class="badge badge-sm bg-warning">1000+</span></a>
  86. </li>
  87. <li>
  88. <a href><i class="fa fa-fw fa-angle-right text-muted m-r-xs"></i>Grid</a>
  89. </li>
  90. <li>
  91. <a href><i class="fa fa-fw fa-angle-right text-muted m-r-xs"></i>Widgets</a>
  92. </li>
  93. </ul>
  94. </div>
  95. <div class="col-xs-6">
  96. <ul class="list-unstyled l-h-2x">
  97. <li>
  98. <a href><i class="fa fa-fw fa-angle-right text-muted m-r-xs"></i>Bootstap</a>
  99. </li>
  100. <li>
  101. <a href><i class="fa fa-fw fa-angle-right text-muted m-r-xs"></i>Sortable</a>
  102. </li>
  103. <li>
  104. <a href><i class="fa fa-fw fa-angle-right text-muted m-r-xs"></i>Portlet</a>
  105. </li>
  106. <li>
  107. <a href><i class="fa fa-fw fa-angle-right text-muted m-r-xs"></i>Timeline</a>
  108. </li>
  109. </ul>
  110. </div>
  111. </div>
  112. </div>
  113. <div class="col-sm-4 b-l b-light">
  114. <div class="m-l-xs m-t-xs m-b-sm font-bold">Analysis</div>
  115. <div class="text-center">
  116. <div class="inline">
  117. <div ui-jq="easyPieChart" ui-options="{
  118. percent: 65,
  119. lineWidth: 50,
  120. trackColor: '{{app.color.light}}',
  121. barColor: '{{app.color.info}}',
  122. scaleColor: false,
  123. size: 100,
  124. rotate: 90,
  125. lineCap: 'butt',
  126. animate: 2000
  127. }">
  128. </div>
  129. </div>
  130. </div>
  131. </div>
  132. </div>
  133. </div>
  134. </li>
  135. <li class="dropdown" dropdown>
  136. <a href class="dropdown-toggle" dropdown-toggle>
  137. <i class="fa fa-fw fa-plus visible-xs-inline-block"></i>
  138. <span translate="header.navbar.new.NEW">New</span> <span class="caret"></span>
  139. </a>
  140. <ul class="dropdown-menu" role="menu">
  141. <li><a href="#" translate="header.navbar.new.PROJECT">Projects</a></li>
  142. <li>
  143. <a href>
  144. <span class="badge bg-info pull-right">5</span>
  145. <span translate="header.navbar.new.TASK">Task</span>
  146. </a>
  147. </li>
  148. <li><a href translate="header.navbar.new.USER">User</a></li>
  149. <li class="divider"></li>
  150. <li>
  151. <a href>
  152. <span class="badge bg-danger pull-right">4</span>
  153. <span translate="header.navbar.new.EMAIL">Email</span>
  154. </a>
  155. </li>
  156. </ul>
  157. </li>
  158. </ul>
  159. <!-- / link and dropdown -->
  160. <!-- search form -->
  161. <form class="navbar-form navbar-form-sm navbar-left shift" ui-shift="prependTo" target=".navbar-collapse" role="search" ng-controller="TypeaheadDemoCtrl">
  162. <div class="form-group">
  163. <div class="input-group">
  164. <input type="text" ng-model="selected" typeahead="state for state in states | filter:$viewValue | limitTo:8" class="form-control input-sm bg-light no-border rounded padder" placeholder="Search projects...">
  165. <span class="input-group-btn">
  166. <button type="submit" class="btn btn-sm bg-light rounded"><i class="fa fa-search"></i></button>
  167. </span>
  168. </div>
  169. </div>
  170. </form>
  171. <!-- / search form -->
  172. <!-- nabar right -->
  173. <ul class="nav navbar-nav navbar-right">
  174. <li class="dropdown hidden-sm" is-open="lang.isopen" dropdown>
  175. <a href class="dropdown-toggle" dropdown-toggle>
  176. {{selectLang}} <b class="caret"></b>
  177. </a>
  178. <!-- dropdown -->
  179. <ul class="dropdown-menu animated fadeInRight w">
  180. <li ng-repeat="(langKey, label) in langs">
  181. <a ng-click="setLang(langKey, $event)" href>{{label}}</a>
  182. </li>
  183. </ul>
  184. <!-- / dropdown -->
  185. </li>
  186. <li class="hidden-xs">
  187. <a ui-fullscreen></a>
  188. </li>
  189. <li class="dropdown" dropdown>
  190. <a href class="dropdown-toggle" dropdown-toggle>
  191. <i class="icon-bell fa-fw"></i>
  192. <span class="visible-xs-inline">Notifications</span>
  193. <span class="badge badge-sm up bg-danger pull-right-xs">2</span>
  194. </a>
  195. <!-- dropdown -->
  196. <div class="dropdown-menu w-xl animated fadeInUp">
  197. <div class="panel bg-white">
  198. <div class="panel-heading b-light bg-light">
  199. <strong>You have <span>2</span> notifications</strong>
  200. </div>
  201. <div class="list-group">
  202. <a href class="media list-group-item">
  203. <span class="pull-left thumb-sm">
  204. <img src="img/a0.jpg" alt="..." class="img-circle">
  205. </span>
  206. <span class="media-body block m-b-none">
  207. Use awesome animate.css<br>
  208. <small class="text-muted">10 minutes ago</small>
  209. </span>
  210. </a>
  211. <a href class="media list-group-item">
  212. <span class="media-body block m-b-none">
  213. 1.0 initial released<br>
  214. <small class="text-muted">1 hour ago</small>
  215. </span>
  216. </a>
  217. </div>
  218. <div class="panel-footer text-sm">
  219. <a href class="pull-right"><i class="fa fa-cog"></i></a>
  220. <a href="#notes" data-toggle="class:show animated fadeInRight">See all the notifications</a>
  221. </div>
  222. </div>
  223. </div>
  224. <!-- / dropdown -->
  225. </li>
  226. <li class="dropdown" dropdown>
  227. <a href class="dropdown-toggle clear" dropdown-toggle>
  228. <span class="thumb-sm avatar pull-right m-t-n-sm m-b-n-sm m-l-sm">
  229. <img src="img/a0.jpg" alt="...">
  230. <i class="on md b-white bottom"></i>
  231. </span>
  232. <span class="hidden-sm hidden-md">John.Smith</span> <b class="caret"></b>
  233. </a>
  234. <!-- dropdown -->
  235. <ul class="dropdown-menu animated fadeInRight w">
  236. <li class="wrapper b-b m-b-sm bg-light m-t-n-xs">
  237. <div>
  238. <p>300mb of 500mb used</p>
  239. </div>
  240. <progressbar value="60" class="progress-xs m-b-none bg-white"></progressbar>
  241. </li>
  242. <li>
  243. <a href>
  244. <span class="badge bg-danger pull-right">30%</span>
  245. <span>Settings</span>
  246. </a>
  247. </li>
  248. <li>
  249. <a ui-sref="app.page.profile">Profile</a>
  250. </li>
  251. <li>
  252. <a ui-sref="app.docs">
  253. <span class="label bg-info pull-right">new</span>
  254. Help
  255. </a>
  256. </li>
  257. <li class="divider"></li>
  258. <li>
  259. <a ui-sref="access.signin">Logout</a>
  260. </li>
  261. </ul>
  262. <!-- / dropdown -->
  263. </li>
  264. </ul>
  265. <!-- / navbar right -->
  266. </div>
  267. <!-- / navbar collapse -->