Skip to content

N
nexpie-grafana-theme
Commit 6f5a9bf7 by Torkel Ödegaard
Options

ux: new page header progress

parent b1a2344b
Showing with 71 additions and 72 deletions
pkg/api/index.go
......@@ -117,22 +117,23 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) {
if c.IsSignedIn {
profileNode := &dtos.NavLink{
Text: c.SignedInUser.Login,
Text: c.SignedInUser.Name,
SubTitle: c.SignedInUser.Login,
Id: "profile",
Img: data.User.GravatarUrl,
Url: setting.AppSubUrl + "/profile",
HideFromMenu: true,
Children: []*dtos.NavLink{
{Text: "Your profile", Url: setting.AppSubUrl + "/profile", Icon: "fa fa-fw fa-sliders"},
{Text: "Preferences", Id: "profile-settings", Url: setting.AppSubUrl + "/profile", Icon: "fa fa-fw fa-sliders"},
{Text: "Change Password", Id: "change-password", Url: setting.AppSubUrl + "/profile/password", Icon: "fa fa-fw fa-lock", HideFromMenu: true},
},
}
if !setting.DisableSignoutMenu {
// add sign out first
profileNode.Children = append([]*dtos.NavLink{
{Text: "Sign out", Url: setting.AppSubUrl + "/logout", Icon: "fa fa-fw fa-sign-out", Target: "_self"},
}, profileNode.Children...)
profileNode.Children = append(profileNode.Children, &dtos.NavLink{
Text: "Sign out", Id: "sign-out", Url: setting.AppSubUrl + "/logout", Icon: "fa fa-fw fa-sign-out", Target: "_self",
})
}
data.NavTree = append(data.NavTree, profileNode)
......
public/app/features/org/partials/orgDetails.html
......@@ -32,7 +32,8 @@
<page-header model="navModel"></page-header>
<div class="page-container page-body">
<h3 class="page-heading">General</h3>
<h3 class="page-sub-heading">Organization profile</h3>
<form name="orgForm" class="gf-form-group">
<div class="gf-form-inline">
<div class="gf-form max-width-28">
......
public/app/features/org/partials/profile.html
<div class="page-header-canvas">
<div class="page-container">
<navbar model="ctrl.navModel"></navbar>
<div class="page-header">
<page-h1 model="ctrl.navModel"></page-h1>
</div>
</div>
</div>
<page-header model="ctrl.navModel"></page-header>
<div class="page-container page-body">
<h3 class="page-sub-heading">User Profile</h3>
<form name="ctrl.userForm" class="gf-form-group">
<h3 class="page-heading">Information</h3>
<div class="gf-form max-width-30">
<span class="gf-form-label width-8">Name</span>
......
public/app/features/org/prefs_control.ts
......@@ -49,7 +49,7 @@ export class PrefsControlCtrl {
var template = `
<form name="ctrl.prefsForm" class="section gf-form-group">
<h3 class="page-heading">Preferences</h3>
<h3 class="section-heading">Preferences</h3>
<div class="gf-form">
<span class="gf-form-label width-11">UI Theme</span>
......
public/app/features/org/profile_ctrl.ts
......@@ -14,7 +14,7 @@ export class ProfileCtrl {
constructor(private backendSrv, private contextSrv, private $location, navModelSrv) {
this.getUser();
this.getUserOrgs();
this.navModel = navModelSrv.getNav('profile');
this.navModel = navModelSrv.getNav('profile', 'profile-settings', 0);
}
getUser() {
......
public/app/features/plugins/partials/plugin_list.html
<page-header model="ctrl.navModel"></page-header>
<div class="page-header-canvas">
<div class="page-container">
<navbar model="ctrl.navModel"></navbar>
<!-- <div class="page&#45;header&#45;canvas"> -->
<!-- <div class="page&#45;container"> -->
<!-- <navbar model="ctrl.navModel"></navbar> -->
<!-- -->
<!-- <div class="page&#45;header"> -->
<!-- <page&#45;h1 model="ctrl.navModel"></page&#45;h1> -->
<!-- -->
<!-- <div class="page&#45;header&#45;tabs"> -->
<!-- <ul class="gf&#45;tabs"> -->
<!-- <li class="gf&#45;tabs&#45;item"> -->
<!-- <a class="gf&#45;tabs&#45;link" href="plugins?type=panel" ng&#45;class="{active: ctrl.tabIndex === 0}"> -->
<!-- <i class="icon&#45;gf icon&#45;gf&#45;panel"></i> -->
<!-- Panels -->
<!-- </a> -->
<!-- </li> -->
<!-- <li class="gf&#45;tabs&#45;item"> -->
<!-- <a class="gf&#45;tabs&#45;link" href="plugins?type=datasource" ng&#45;class="{active: ctrl.tabIndex === 1}"> -->
<!-- <i class="gicon gicon&#45;datasources"></i> -->
<!-- Data sources -->
<!-- </a> -->
<!-- </li> -->
<!-- <li class="gf&#45;tabs&#45;item"> -->
<!-- <a class="gf&#45;tabs&#45;link" href="plugins?type=app" ng&#45;class="{active: ctrl.tabIndex === 2}"> -->
<!-- <i class="icon&#45;gf icon&#45;gf&#45;apps"></i> -->
<!-- Apps -->
<!-- </a> -->
<!-- </li> -->
<!-- </ul> -->
<!-- -->
<!-- <a class="get&#45;more&#45;plugins&#45;link pull&#45;right" href="https://grafana.com/plugins?utm_source=grafana_plugin_list" target="_blank"> -->
<!-- Find more <img src="public/img/icn&#45;plugins&#45;tiny.svg" />plugins on Grafana.com -->
<!-- </a> -->
<!-- </div> -->
<!-- </div> -->
<!-- </div> -->
<!-- </div> -->
<div class="page-header">
<page-h1 model="ctrl.navModel"></page-h1>
<div class="page-header-tabs">
<ul class="gf-tabs">
<li class="gf-tabs-item">
<a class="gf-tabs-link" href="plugins?type=panel" ng-class="{active: ctrl.tabIndex === 0}">
<i class="icon-gf icon-gf-panel"></i>
Panels
</a>
</li>
<li class="gf-tabs-item">
<a class="gf-tabs-link" href="plugins?type=datasource" ng-class="{active: ctrl.tabIndex === 1}">
<i class="gicon gicon-datasources"></i>
Data sources
</a>
</li>
<li class="gf-tabs-item">
<a class="gf-tabs-link" href="plugins?type=app" ng-class="{active: ctrl.tabIndex === 2}">
<i class="icon-gf icon-gf-apps"></i>
Apps
</a>
</li>
</ul>
<div class="page-container page-body">
<div class="page-action-bar">
<div class="gf-form">
<label class="gf-form-label">Search</label>
<input type="text" class="gf-form-input width-20" ng-model="ctrl.searchQuery" ng-change="ctrl.onQueryUpdated()" />
</div>
<a class="get-more-plugins-link pull-right" href="https://grafana.com/plugins?utm_source=grafana_plugin_list" target="_blank">
Find more <img src="public/img/icn-plugins-tiny.svg" />plugins on Grafana.com
<div class="page-action-bar__spacer"></div>
<a class="btn btn-success" href="https://grafana.com/plugins?utm_source=grafana_plugin_list" target="_blank">
Find more plugins on Grafana.com
</a>
</div>
</div>
</div>
</div>
<div class="page-container page-body">
<section class="card-section" layout-mode>
<layout-selector></layout-selector>
......
public/app/features/plugins/plugin_list_ctrl.ts
///<reference path="../../headers/common.d.ts" />
import angular from 'angular';
import _ from 'lodash';
export class PluginListCtrl {
plugins: any[];
tabIndex: number;
navModel: any;
searchQuery: string;
allPlugins: any[];
/** @ngInject */
constructor(private backendSrv: any, $location, navModelSrv) {
this.tabIndex = 0;
this.navModel = navModelSrv.getNav('cfg', 'plugins');
this.navModel = navModelSrv.getNav('cfg', 'plugins', 0);
var pluginType = $location.search().type || 'panel';
switch (pluginType) {
case "datasource": {
this.tabIndex = 1;
break;
}
case "app": {
this.tabIndex = 2;
break;
}
case "panel":
default:
this.tabIndex = 0;
this.backendSrv.get('api/plugins', {embedded: 0}).then(plugins => {
this.plugins = plugins;
this.allPlugins = plugins;
});
}
this.backendSrv.get('api/plugins', {embedded: 0, type: pluginType}).then(plugins => {
this.plugins = plugins;
onQueryUpdated() {
let regex = new RegExp(this.searchQuery, 'ig');
this.plugins = _.filter(this.allPlugins, item => {
return regex.test(item.name) || regex.test(item.type);
});
}
}
......
public/sass/components/_page_header.scss
......@@ -59,9 +59,6 @@
margin-right: $spacer/2;
}
.page-header-info-block {
}
.page-header__sub-title {
color: $text-muted;
}
......
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