ux: new page header progress

This commit is contained in:
Torkel Ödegaard 2017-11-30 17:28:24 +01:00
parent b1a2344be1
commit 6f5a9bf768
8 changed files with 75 additions and 76 deletions

View File

@ -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)

View File

@ -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">

View File

@ -1,16 +1,9 @@
<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>

View File

@ -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>

View File

@ -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() {

View File

@ -1,42 +1,55 @@
<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-header"> <!-- <div class="page&#45;header"> -->
<page-h1 model="ctrl.navModel"></page-h1> <!-- <page&#45;h1 model="ctrl.navModel"></page&#45;h1> -->
<!-- -->
<div class="page-header-tabs"> <!-- <div class="page&#45;header&#45;tabs"> -->
<ul class="gf-tabs"> <!-- <ul class="gf&#45;tabs"> -->
<li class="gf-tabs-item"> <!-- <li class="gf&#45;tabs&#45;item"> -->
<a class="gf-tabs-link" href="plugins?type=panel" ng-class="{active: ctrl.tabIndex === 0}"> <!-- <a class="gf&#45;tabs&#45;link" href="plugins?type=panel" ng&#45;class="{active: ctrl.tabIndex === 0}"> -->
<i class="icon-gf icon-gf-panel"></i> <!-- <i class="icon&#45;gf icon&#45;gf&#45;panel"></i> -->
Panels <!-- Panels -->
</a> <!-- </a> -->
</li> <!-- </li> -->
<li class="gf-tabs-item"> <!-- <li class="gf&#45;tabs&#45;item"> -->
<a class="gf-tabs-link" href="plugins?type=datasource" ng-class="{active: ctrl.tabIndex === 1}"> <!-- <a class="gf&#45;tabs&#45;link" href="plugins?type=datasource" ng&#45;class="{active: ctrl.tabIndex === 1}"> -->
<i class="gicon gicon-datasources"></i> <!-- <i class="gicon gicon&#45;datasources"></i> -->
Data sources <!-- Data sources -->
</a> <!-- </a> -->
</li> <!-- </li> -->
<li class="gf-tabs-item"> <!-- <li class="gf&#45;tabs&#45;item"> -->
<a class="gf-tabs-link" href="plugins?type=app" ng-class="{active: ctrl.tabIndex === 2}"> <!-- <a class="gf&#45;tabs&#45;link" href="plugins?type=app" ng&#45;class="{active: ctrl.tabIndex === 2}"> -->
<i class="icon-gf icon-gf-apps"></i> <!-- <i class="icon&#45;gf icon&#45;gf&#45;apps"></i> -->
Apps <!-- Apps -->
</a> <!-- </a> -->
</li> <!-- </li> -->
</ul> <!-- </ul> -->
<!-- -->
<a class="get-more-plugins-link pull-right" href="https://grafana.com/plugins?utm_source=grafana_plugin_list" target="_blank"> <!-- <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-plugins-tiny.svg" />plugins on Grafana.com <!-- Find more <img src="public/img/icn&#45;plugins&#45;tiny.svg" />plugins on Grafana.com -->
</a> <!-- </a> -->
</div> <!-- </div> -->
</div> <!-- </div> -->
</div> <!-- </div> -->
</div> <!-- </div> -->
<div class="page-container page-body"> <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>
<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>

View File

@ -1,34 +1,28 @@
///<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'; this.backendSrv.get('api/plugins', {embedded: 0}).then(plugins => {
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.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);
}); });
} }
} }

View File

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