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 { 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
<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
<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;
}
}
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