progress on page header

public/app/core/components/PageHeader.tsx

@@ -1,48 +1,63 @@
 import React from 'react';
-import { NavModel } from '../nav_model_srv';
-import classNames  from 'classnames';
+import { NavModel, NavModelItem } from '../nav_model_srv';
+import classNames from 'classnames';
 
 export interface IProps {
   model: NavModel;
 }
 
-export default class PageHeader extends React.Component<IProps, any> {
-  constructor(props) {
-    super(props);
-  }
+// function BreadcrumbItem(item: NavModelItem) {
+//   return (
+//     <a className="breadcrumb-item" href={item.url} key={item.id}>
+//       {item.text}
+//     </a>
+//   );
+// }
+//
+// function Breadcrumb(model: NavModel) {
+//   return (
+//     <div className="page-nav">
+//       <div className="page-breadcrumbs">
+//         <a className="breadcrumb-item active" href="/">
+//           <i className="fa fa-home" />
+//         </a>
+//         {model.breadcrumbs.map(BreadcrumbItem)}
+//       </div>
+//     </div>
+//   );
+// }
 
-  renderBreadcrumb(breadcrumb) {
-    return (
-      <a className="breadcrumb-item" href={breadcrumb.url} key={breadcrumb.id}>
-        {breadcrumb.text}
-      </a>
-    );
-  }
+function TabItem(tab: NavModelItem) {
+  let tabClasses = classNames({
+    'gf-tabs-link': true,
+    active: tab.active,
+  });
 
-  renderTab(tab) {
-    let tabClasses = classNames({
-      'gf-tabs-link': true,
-      'active': tab.active,
-    });
+  return (
+    <li className="gf-tabs-item" key={tab.url}>
+      <a className={tabClasses} href={tab.url}>
+        <i className={tab.icon} />
+        {tab.text}
+      </a>
+    </li>
+  );
+}
 
-    console.log(tab.active);
+function Tabs({main}: {main: NavModelItem}) {
+  return <ul className="gf-tabs">{main.children.map(TabItem)}</ul>;
+}
 
-    return (
-      <li className="gf-tabs-item" key={tab.url}>
-        <a className={tabClasses} href={tab.url}>
-          <i className={tab.icon} />
-          {tab.text}
-        </a>
-      </li>
-    );
+export default class PageHeader extends React.Component<IProps, any> {
+  constructor(props) {
+    super(props);
   }
 
   renderHeaderTitle(main) {
     return (
       <div className="page-header__inner">
         <span className="page-header__logo">
-           {main.icon && <i className={`page-header__icon ${main.icon}`} />}
-           {main.img && <img className="page-header__img" src={main.img} />}
+          {main.icon && <i className={`page-header__icon ${main.icon}`} />}
+          {main.img && <img className="page-header__img" src={main.img} />}
         </span>
 
         <div className="page-header__info-block">
@@ -50,7 +65,7 @@ export default class PageHeader extends React.Component<IProps, any> {
           {main.subTitle && <div className="page-header__sub-title">{main.subTitle}</div>}
           {main.subType && (
             <div className="page-header__stamps">
-              <i className={main.subType.icon}></i>
+              <i className={main.subType.icon} />
               {main.subType.text}
             </div>
           )}
@@ -63,23 +78,10 @@ export default class PageHeader extends React.Component<IProps, any> {
     return (
       <div className="page-header-canvas">
         <div className="page-container">
-          <div className="page-nav">
-            <div className="page-breadcrumbs">
-              <a className="breadcrumb-item active" href="/">
-                <i className="fa fa-home" />
-              </a>
-              {this.props.model.breadcrumbs.map(this.renderBreadcrumb)}
-            </div>
-          </div>
-
           <div className="page-header">
             {this.renderHeaderTitle(this.props.model.main)}
 
-            {this.props.model.main.children && (
-              <ul className="gf-tabs">
-              {this.props.model.main.children.map(this.renderTab)}
-              </ul>
-            )}
+            {this.props.model.main.children && <Tabs main={this.props.model.main} />}
           </div>
         </div>
       </div>

public/app/core/nav_model_srv.ts

@@ -7,6 +7,7 @@ export interface NavModelItem {
   url: string;
   icon?: string;
   img?: string;
+  id: string;
   active?: boolean;
   children: NavModelItem[];
 }

public/app/features/alerting/partials/alert_list.html

@@ -18,11 +18,6 @@
       <i class="fa fa-info-circle"></i>
       How to add an alert
     </a>
-
-    <!-- <a class="btn btn&#45;inverse" href="alerting/notifications" > -->
-    <!--   <i class="fa fa&#45;bell"></i> -->
-    <!--   Notification channels -->
-    <!-- </a> -->
   </div>
 
   <section class="card-section card-list-layout-list">

public/app/features/org/partials/user_groups.html

@@ -1,20 +1,23 @@
-<navbar model="ctrl.navModel"></navbar>
+<page-header model="ctrl.navModel"></page-header>
 
-<div class="page-container">
-	<div class="page-header">
-		<h1>User Groups</h1>
+<div class="page-container page-body">
+	<div class="page-action-bar">
 
-    <a class="btn btn-success" ng-click="ctrl.openUserGroupModal()">
-      <i class="fa fa-plus"></i>
-      Create User Group
-    </a>
-  </div>
     <div class="gf-form width-15 gf-form-group">
       <span style="position: relative;">
         <input type="text" class="gf-form-input" placeholder="Find User Group by name" tabindex="1" give-focus="true"
           ng-model="ctrl.query" ng-model-options="{ debounce: 500 }" spellcheck='false' ng-change="ctrl.get()" />
       </span>
     </div>
+
+    <div class="page-action-bar__spacer">
+
+    <a class="btn btn-success" ng-click="ctrl.openUserGroupModal()">
+      <i class="fa fa-plus"></i>
+      Create User Group
+    </a>
+  </div>
+
   <div class="admin-list-table">
     <table class="filter-table form-inline" ng-show="ctrl.userGroups.length > 0">
       <thead>
@@ -42,7 +45,6 @@
           </td>
         </tr>
       </tbody>
-
     </table>
   </div>
 

public/app/features/org/user_groups_ctrl.ts

@@ -15,7 +15,7 @@ export class UserGroupsCtrl {
 
   /** @ngInject */
   constructor(private backendSrv, navModelSrv) {
-    this.navModel = navModelSrv.getNav('cfg', 'users');
+    this.navModel = navModelSrv.getNav('cfg', 'users', 0);
     this.get();
   }
 

public/app/features/plugins/partials/plugin_edit.html

@@ -1,34 +1,36 @@
-<div class="page-header-canvas">
-  <div class="page-container" ng-init="ctrl.init()">
-    <navbar model="ctrl.navModel"></navbar>
+<!-- <div class="page&#45;header&#45;canvas"> -->
+<!--   <div class="page&#45;container" ng&#45;init="ctrl.init()"> -->
+<!--     <navbar model="ctrl.navModel"></navbar> -->
+<!--  -->
+<!--     <div class="page&#45;header"> -->
+<!--       <div class="plugin&#45;header"> -->
+<!--         <span class="plugin&#45;header&#45;logo"> -->
+<!--           <img ng&#45;src="{{ctrl.model.info.logos.large}}"> -->
+<!--         </span> -->
+<!--  -->
+<!--         <div class="plugin&#45;header&#45;info&#45;block"> -->
+<!--           <h1 class="plugin&#45;header&#45;name">{{ctrl.model.name}}</h1> -->
+<!--           <div class="plugin&#45;header&#45;author">By {{ctrl.model.info.author.name}}</div> -->
+<!--           <div class="plugin&#45;header&#45;stamps"> -->
+<!--             <span class="plugin&#45;header&#45;stamps&#45;type"> -->
+<!--               <i class="{{ctrl.pluginIcon}}"></i> {{ctrl.model.type}} -->
+<!--             </span> -->
+<!--           </div> -->
+<!--         </div> -->
+<!--       </div> -->
+<!--  -->
+<!--       <ul class="gf&#45;tabs"> -->
+<!--         <li class="gf&#45;tabs&#45;item" ng&#45;repeat="tab in ctrl.tabs"> -->
+<!--           <a class="gf&#45;tabs&#45;link" ng&#45;click="ctrl.tabIndex = $index" ng&#45;class="{active: ctrl.tabIndex === $index}"> -->
+<!--             {{::tab}} -->
+<!--           </a> -->
+<!--         </li> -->
+<!--       </ul> -->
+<!--     </div> -->
+<!--   </div> -->
+<!-- </div> -->
 
-    <div class="page-header">
-      <div class="plugin-header">
-        <span class="plugin-header-logo">
-          <img ng-src="{{ctrl.model.info.logos.large}}">
-        </span>
-
-        <div class="plugin-header-info-block">
-          <h1 class="plugin-header-name">{{ctrl.model.name}}</h1>
-          <div class="plugin-header-author">By {{ctrl.model.info.author.name}}</div>
-          <div class="plugin-header-stamps">
-            <span class="plugin-header-stamps-type">
-              <i class="{{ctrl.pluginIcon}}"></i> {{ctrl.model.type}}
-            </span>
-          </div>
-        </div>
-      </div>
-
-      <ul class="gf-tabs">
-        <li class="gf-tabs-item" ng-repeat="tab in ctrl.tabs">
-          <a class="gf-tabs-link" ng-click="ctrl.tabIndex = $index" ng-class="{active: ctrl.tabIndex === $index}">
-            {{::tab}}
-          </a>
-        </li>
-      </ul>
-    </div>
-  </div>
-</div>
+<page-header model="ctrl.navModel"></page-header>
 
 <div class="page-container page-body page-body--with-sidebar">
   <div class="tab-content page-content-with-sidebar" ng-if="ctrl.tabs[ctrl.tabIndex] === 'Readme'">

public/sass/components/_page_header.scss

@@ -6,7 +6,7 @@
 }
 
 .page-header {
-  padding: 2rem 0 0 0;
+  padding: 2.5rem 0 0 0;
 
   .btn {
     float: right;
@@ -36,18 +36,22 @@
   border-radius: 50%;
   position: relative;
   top: -3px;
-  width: 65px;
-  height: 65px;
+  width: 50px;
+  height: 50px;
 }
 
 .page-header__icon {
-  font-size: 70px;
-  width: 65;
-  height: 65;
+  font-size: 50px;
+  width: 50px;
+  height: 50px;
   position: relative;
 
   &.fa {
-    top: 3px;
+    top: 8px;
+  }
+
+  &.gicon {
+    top: 7px;
   }
 
   &.icon-gf {
@@ -56,7 +60,7 @@
 }
 
 .page-header__logo {
-  margin-right: $spacer/2;
+  margin: 0 $spacer;
 }
 
 .page-header__sub-title {
@@ -68,3 +72,88 @@
   text-transform: uppercase;
 }
 
+.page-breadcrumbs {
+  display: flex;
+  padding: 10px 0;
+  line-height: 0.5;
+}
+
+.breadcrumb {
+  display: inline-block;
+  box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.35);
+  overflow: hidden;
+  border-radius: 5px;
+  counter-reset: flag;
+}
+
+.breadcrumb-item {
+  @include gradientBar($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color);
+
+  text-decoration: none;
+  outline: none;
+  display: block;
+  float: left;
+  font-size: 12px;
+  line-height: 30px;
+  padding: 0 7px 0 37px;
+  position: relative;
+  box-shadow: $card-shadow;
+
+  &:first-child {
+    padding-left: 10px;
+    border-radius: 5px 0 0 5px; /*to match with the parent's radius*/
+    font-size: 18px;
+  }
+
+  &:first-child:before {
+    left: 14px;
+  }
+
+  &:last-child {
+    border-radius: 0 5px 5px 0; /*this was to prevent glitches on hover*/
+    padding-right: 20px;
+  }
+
+  &.active,
+  &:hover {
+    background: #333;
+    background: linear-gradient(#333, #000);
+  }
+
+  &.active:after,
+  &:hover:after {
+    background: #333;
+    background: linear-gradient(135deg, #333, #000);
+  }
+
+  &:after {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: -14px; // half of square's length
+
+    // same dimension as the line-height of .breadcrumb-item
+    width: 30px;
+    height: 30px;
+
+    transform: scale(0.707) rotate(45deg);
+    // we need to prevent the arrows from getting buried under the next link
+    z-index: 1;
+
+    // background same as links but the gradient will be rotated to compensate with the transform applied
+    background: linear-gradient(135deg, $btn-inverse-bg, $btn-inverse-bg-hl);
+
+    // stylish arrow design using box shadow
+    box-shadow: 2px -2px 0 2px rgb(35, 31, 31), 3px -3px 0 2px rgba(255, 255, 255, 0.1);
+
+    // 5px - for rounded arrows and
+    // 50px - to prevent hover glitches on the border created using shadows*/
+    border-radius: 0 5px 0 50px;
+  }
+
+  // we dont need an arrow after the last link
+  &:last-child:after {
+    content: none;
+  }
+}
+

public/sass/layout/_page.scss

@@ -93,89 +93,3 @@
 .page-sidebar-section {
   margin-bottom: $spacer*2;
 }
-
-.page-breadcrumbs {
-  display: flex;
-  padding: 10px 0;
-  line-height: 0.5;
-}
-
-.breadcrumb {
-  display: inline-block;
-  box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.35);
-  overflow: hidden;
-  border-radius: 5px;
-  counter-reset: flag;
-}
-
-.breadcrumb-item {
-  @include gradientBar($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color);
-
-  text-decoration: none;
-  outline: none;
-  display: block;
-  float: left;
-  font-size: 12px;
-  line-height: 30px;
-  padding: 0 7px 0 37px;
-  position: relative;
-  box-shadow: $card-shadow;
-
-  &:first-child {
-    padding-left: 10px;
-    border-radius: 5px 0 0 5px; /*to match with the parent's radius*/
-    font-size: 18px;
-  }
-
-  &:first-child:before {
-    left: 14px;
-  }
-
-  &:last-child {
-    border-radius: 0 5px 5px 0; /*this was to prevent glitches on hover*/
-    padding-right: 20px;
-  }
-
-  &.active,
-  &:hover {
-    background: #333;
-    background: linear-gradient(#333, #000);
-  }
-
-  &.active:after,
-  &:hover:after {
-    background: #333;
-    background: linear-gradient(135deg, #333, #000);
-  }
-
-  &:after {
-    content: '';
-    position: absolute;
-    top: 0;
-    right: -14px; // half of square's length
-
-    // same dimension as the line-height of .breadcrumb-item
-    width: 30px;
-    height: 30px;
-
-    transform: scale(0.707) rotate(45deg);
-    // we need to prevent the arrows from getting buried under the next link
-    z-index: 1;
-
-    // background same as links but the gradient will be rotated to compensate with the transform applied
-    background: linear-gradient(135deg, $btn-inverse-bg, $btn-inverse-bg-hl);
-
-    // stylish arrow design using box shadow
-    box-shadow: 2px -2px 0 2px rgb(35, 31, 31), 3px -3px 0 2px rgba(255, 255, 255, 0.1);
-
-    // 5px - for rounded arrows and
-    // 50px - to prevent hover glitches on the border created using shadows*/
-    border-radius: 0 5px 0 50px;
-  }
-
-  // we dont need an arrow after the last link
-  &:last-child:after {
-    content: none;
-  }
-}
-