Skip to content

N
nexpie-grafana-theme
Commit 32ffb2d5 by Torkel Ödegaard
Options

progress on page header

parent 6f5a9bf7
Showing with 189 additions and 184 deletions
public/app/core/components/PageHeader.tsx
import React from 'react'; import React from 'react';
import { NavModel } from '../nav_model_srv'; import { NavModel, NavModelItem } from '../nav_model_srv';
import classNames from 'classnames'; import classNames from 'classnames';
export interface IProps { export interface IProps {
model: NavModel; model: NavModel;
} }
export default class PageHeader extends React.Component<IProps, any> { // function BreadcrumbItem(item: NavModelItem) {
constructor(props) { // return (
super(props); // <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) { function TabItem(tab: NavModelItem) {
return ( let tabClasses = classNames({
<a className="breadcrumb-item" href={breadcrumb.url} key={breadcrumb.id}> 'gf-tabs-link': true,
{breadcrumb.text} active: tab.active,
</a> });
);
}
renderTab(tab) { return (
let tabClasses = classNames({ <li className="gf-tabs-item" key={tab.url}>
'gf-tabs-link': true, <a className={tabClasses} href={tab.url}>
'active': tab.active, <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 ( export default class PageHeader extends React.Component<IProps, any> {
<li className="gf-tabs-item" key={tab.url}> constructor(props) {
<a className={tabClasses} href={tab.url}> super(props);
<i className={tab.icon} />
{tab.text}
</a>
</li>
);
} }
renderHeaderTitle(main) { renderHeaderTitle(main) {
return ( return (
<div className="page-header__inner"> <div className="page-header__inner">
<span className="page-header__logo"> <span className="page-header__logo">
{main.icon && <i className={`page-header__icon ${main.icon}`} />} {main.icon && <i className={`page-header__icon ${main.icon}`} />}
{main.img && <img className="page-header__img" src={main.img} />} {main.img && <img className="page-header__img" src={main.img} />}
</span> </span>
<div className="page-header__info-block"> <div className="page-header__info-block">
...@@ -50,7 +65,7 @@ export default class PageHeader extends React.Component<IProps, any> { ...@@ -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.subTitle && <div className="page-header__sub-title">{main.subTitle}</div>}
{main.subType && ( {main.subType && (
<div className="page-header__stamps"> <div className="page-header__stamps">
<i className={main.subType.icon}></i> <i className={main.subType.icon} />
{main.subType.text} {main.subType.text}
</div> </div>
)} )}
...@@ -63,23 +78,10 @@ export default class PageHeader extends React.Component<IProps, any> { ...@@ -63,23 +78,10 @@ export default class PageHeader extends React.Component<IProps, any> {
return ( return (
<div className="page-header-canvas"> <div className="page-header-canvas">
<div className="page-container"> <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"> <div className="page-header">
{this.renderHeaderTitle(this.props.model.main)} {this.renderHeaderTitle(this.props.model.main)}
{this.props.model.main.children && ( {this.props.model.main.children && <Tabs main={this.props.model.main} />}
<ul className="gf-tabs">
{this.props.model.main.children.map(this.renderTab)}
</ul>
)}
</div> </div>
</div> </div>
</div> </div>
......
public/app/core/nav_model_srv.ts
...@@ -7,6 +7,7 @@ export interface NavModelItem { ...@@ -7,6 +7,7 @@ export interface NavModelItem {
url: string; url: string;
icon?: string; icon?: string;
img?: string; img?: string;
id: string;
active?: boolean; active?: boolean;
children: NavModelItem[]; children: NavModelItem[];
} }
......
public/app/features/alerting/partials/alert_list.html
...@@ -18,11 +18,6 @@ ...@@ -18,11 +18,6 @@
<i class="fa fa-info-circle"></i> <i class="fa fa-info-circle"></i>
How to add an alert How to add an alert
</a> </a>
<!-- <a class="btn btn&#45;inverse" href="alerting/notifications" > -->
<!-- <i class="fa fa&#45;bell"></i> -->
<!-- Notification channels -->
<!-- </a> -->
</div> </div>
<section class="card-section card-list-layout-list"> <section class="card-section card-list-layout-list">
......
public/app/features/org/partials/user_groups.html
<navbar model="ctrl.navModel"></navbar> <page-header model="ctrl.navModel"></page-header>
<div class="page-container"> <div class="page-container page-body">
<div class="page-header"> <div class="page-action-bar">
<h1>User Groups</h1>
<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"> <div class="gf-form width-15 gf-form-group">
<span style="position: relative;"> <span style="position: relative;">
<input type="text" class="gf-form-input" placeholder="Find User Group by name" tabindex="1" give-focus="true" <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()" /> ng-model="ctrl.query" ng-model-options="{ debounce: 500 }" spellcheck='false' ng-change="ctrl.get()" />
</span> </span>
</div> </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"> <div class="admin-list-table">
<table class="filter-table form-inline" ng-show="ctrl.userGroups.length > 0"> <table class="filter-table form-inline" ng-show="ctrl.userGroups.length > 0">
<thead> <thead>
...@@ -42,7 +45,6 @@ ...@@ -42,7 +45,6 @@
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
......
public/app/features/org/user_groups_ctrl.ts
...@@ -15,7 +15,7 @@ export class UserGroupsCtrl { ...@@ -15,7 +15,7 @@ export class UserGroupsCtrl {
/** @ngInject */ /** @ngInject */
constructor(private backendSrv, navModelSrv) { constructor(private backendSrv, navModelSrv) {
this.navModel = navModelSrv.getNav('cfg', 'users'); this.navModel = navModelSrv.getNav('cfg', 'users', 0);
this.get(); this.get();
} }
......
public/app/features/plugins/partials/plugin_edit.html
<div class="page-header-canvas"> <!-- <div class="page&#45;header&#45;canvas"> -->
<div class="page-container" ng-init="ctrl.init()"> <!-- <div class="page&#45;container" ng&#45;init="ctrl.init()"> -->
<navbar model="ctrl.navModel"></navbar> <!-- <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"> <page-header model="ctrl.navModel"></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>
<div class="page-container page-body page-body--with-sidebar"> <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'"> <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 @@ ...@@ -6,7 +6,7 @@
} }
.page-header { .page-header {
padding: 2rem 0 0 0; padding: 2.5rem 0 0 0;
.btn { .btn {
float: right; float: right;
...@@ -36,18 +36,22 @@ ...@@ -36,18 +36,22 @@
border-radius: 50%; border-radius: 50%;
position: relative; position: relative;
top: -3px; top: -3px;
width: 65px; width: 50px;
height: 65px; height: 50px;
} }
.page-header__icon { .page-header__icon {
font-size: 70px; font-size: 50px;
width: 65; width: 50px;
height: 65; height: 50px;
position: relative; position: relative;
&.fa { &.fa {
top: 3px; top: 8px;
}
&.gicon {
top: 7px;
} }
&.icon-gf { &.icon-gf {
...@@ -56,7 +60,7 @@ ...@@ -56,7 +60,7 @@
} }
.page-header__logo { .page-header__logo {
margin-right: $spacer/2; margin: 0 $spacer;
} }
.page-header__sub-title { .page-header__sub-title {
...@@ -68,3 +72,88 @@ ...@@ -68,3 +72,88 @@
text-transform: uppercase; 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 @@ ...@@ -93,89 +93,3 @@
.page-sidebar-section { .page-sidebar-section {
margin-bottom: $spacer*2; 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;
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment