Skip to content

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

ux: new page header progress

parent b1a2344b
Showing with 74 additions and 75 deletions
pkg/api/index.go
...@@ -117,22 +117,23 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) { ...@@ -117,22 +117,23 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) {
if c.IsSignedIn { if c.IsSignedIn {
profileNode := &dtos.NavLink{ profileNode := &dtos.NavLink{
Text: c.SignedInUser.Login, Text: c.SignedInUser.Name,
SubTitle: c.SignedInUser.Login,
Id: "profile", Id: "profile",
Img: data.User.GravatarUrl, Img: data.User.GravatarUrl,
Url: setting.AppSubUrl + "/profile", Url: setting.AppSubUrl + "/profile",
HideFromMenu: true, HideFromMenu: true,
Children: []*dtos.NavLink{ 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}, {Text: "Change Password", Id: "change-password", Url: setting.AppSubUrl + "/profile/password", Icon: "fa fa-fw fa-lock", HideFromMenu: true},
}, },
} }
if !setting.DisableSignoutMenu { if !setting.DisableSignoutMenu {
// add sign out first // add sign out first
profileNode.Children = append([]*dtos.NavLink{ profileNode.Children = append(profileNode.Children, &dtos.NavLink{
{Text: "Sign out", Url: setting.AppSubUrl + "/logout", Icon: "fa fa-fw fa-sign-out", Target: "_self"}, Text: "Sign out", Id: "sign-out", Url: setting.AppSubUrl + "/logout", Icon: "fa fa-fw fa-sign-out", Target: "_self",
}, profileNode.Children...) })
} }
data.NavTree = append(data.NavTree, profileNode) data.NavTree = append(data.NavTree, profileNode)
......
public/app/features/org/partials/orgDetails.html
...@@ -32,7 +32,8 @@ ...@@ -32,7 +32,8 @@
<page-header model="navModel"></page-header> <page-header model="navModel"></page-header>
<div class="page-container page-body"> <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"> <form name="orgForm" class="gf-form-group">
<div class="gf-form-inline"> <div class="gf-form-inline">
<div class="gf-form max-width-28"> <div class="gf-form max-width-28">
......
public/app/features/org/partials/profile.html
<div class="page-header-canvas"> <page-header model="ctrl.navModel"></page-header>
<div class="page-container">
<navbar model="ctrl.navModel"></navbar>
<div class="page-header">
<page-h1 model="ctrl.navModel"></page-h1>
</div>
</div>
</div>
<div class="page-container page-body"> <div class="page-container page-body">
<h3 class="page-sub-heading">User Profile</h3>
<form name="ctrl.userForm" class="gf-form-group"> <form name="ctrl.userForm" class="gf-form-group">
<h3 class="page-heading">Information</h3>
<div class="gf-form max-width-30"> <div class="gf-form max-width-30">
<span class="gf-form-label width-8">Name</span> <span class="gf-form-label width-8">Name</span>
......
public/app/features/org/prefs_control.ts
...@@ -49,7 +49,7 @@ export class PrefsControlCtrl { ...@@ -49,7 +49,7 @@ export class PrefsControlCtrl {
var template = ` var template = `
<form name="ctrl.prefsForm" class="section gf-form-group"> <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"> <div class="gf-form">
<span class="gf-form-label width-11">UI Theme</span> <span class="gf-form-label width-11">UI Theme</span>
......
public/app/features/org/profile_ctrl.ts
...@@ -14,7 +14,7 @@ export class ProfileCtrl { ...@@ -14,7 +14,7 @@ export class ProfileCtrl {
constructor(private backendSrv, private contextSrv, private $location, navModelSrv) { constructor(private backendSrv, private contextSrv, private $location, navModelSrv) {
this.getUser(); this.getUser();
this.getUserOrgs(); this.getUserOrgs();
this.navModel = navModelSrv.getNav('profile'); this.navModel = navModelSrv.getNav('profile', 'profile-settings', 0);
} }
getUser() { getUser() {
......
public/app/features/plugins/partials/plugin_list.html
<page-header model="ctrl.navModel"></page-header>
<div class="page-header-canvas"> <!-- <div class="page&#45;header&#45;canvas"> -->
<div class="page-container"> <!-- <div class="page&#45;container"> -->
<navbar model="ctrl.navModel"></navbar> <!-- <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"> <div class="page-container page-body">
<page-h1 model="ctrl.navModel"></page-h1> <div class="page-action-bar">
<div class="gf-form">
<div class="page-header-tabs"> <label class="gf-form-label">Search</label>
<ul class="gf-tabs"> <input type="text" class="gf-form-input width-20" ng-model="ctrl.searchQuery" ng-change="ctrl.onQueryUpdated()" />
<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>
<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
</a>
</div>
</div> </div>
</div>
</div>
<div class="page-container page-body"> <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>
<section class="card-section" layout-mode> <section class="card-section" layout-mode>
<layout-selector></layout-selector> <layout-selector></layout-selector>
......
public/app/features/plugins/plugin_list_ctrl.ts
///<reference path="../../headers/common.d.ts" />
import angular from 'angular'; import angular from 'angular';
import _ from 'lodash';
export class PluginListCtrl { export class PluginListCtrl {
plugins: any[]; plugins: any[];
tabIndex: number; tabIndex: number;
navModel: any; navModel: any;
searchQuery: string;
allPlugins: any[];
/** @ngInject */ /** @ngInject */
constructor(private backendSrv: any, $location, navModelSrv) { constructor(private backendSrv: any, $location, navModelSrv) {
this.tabIndex = 0; 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, type: pluginType}).then(plugins => { this.backendSrv.get('api/plugins', {embedded: 0}).then(plugins => {
this.plugins = plugins; this.plugins = plugins;
this.allPlugins = 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 @@ ...@@ -59,9 +59,6 @@
margin-right: $spacer/2; margin-right: $spacer/2;
} }
.page-header-info-block {
}
.page-header__sub-title { .page-header__sub-title {
color: $text-muted; 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