Skip to content

N
nexpie-grafana-theme
Commit b2add197 by Torkel Ödegaard
Options

ux: progress on new page header

parent 74ceb76e
Showing with 87 additions and 62 deletions
pkg/api/index.go
...@@ -215,10 +215,6 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) { ...@@ -215,10 +215,6 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) {
Description: "Add and configure data sources", Description: "Add and configure data sources",
Id: "datasources", Id: "datasources",
Url: setting.AppSubUrl + "/datasources", Url: setting.AppSubUrl + "/datasources",
Children: []*dtos.NavLink{
{Text: "List", Url: setting.AppSubUrl + "/datasources", Icon: "gicon gicon-datasources"},
{Text: "New", Url: setting.AppSubUrl + "/datasources", Icon: "fa fa-fw fa-plus"},
},
}, },
{ {
Text: "Members", Text: "Members",
......
public/app/features/org/org_users_ctrl.ts
...@@ -23,7 +23,7 @@ export class OrgUsersCtrl { ...@@ -23,7 +23,7 @@ export class OrgUsersCtrl {
role: 'Viewer', role: 'Viewer',
}; };
this.navModel = navModelSrv.getNav('cfg', 'users'); this.navModel = navModelSrv.getNav('cfg', 'users', 0);
this.get(); this.get();
this.editor = { index: 0 }; this.editor = { index: 0 };
...@@ -44,8 +44,7 @@ export class OrgUsersCtrl { ...@@ -44,8 +44,7 @@ export class OrgUsersCtrl {
if (this.externalUserMngLinkName) { if (this.externalUserMngLinkName) {
return this.externalUserMngLinkName; return this.externalUserMngLinkName;
} }
return "Add Member";
return "Add Members";
} }
get() { get() {
......
public/app/features/org/partials/orgUsers.html
<navbar model="ctrl.navModel"></navbar> <!-- <navbar model="ctrl.navModel"></navbar> -->
<!-- -->
<!-- <div class="page&#45;container"> -->
<!-- <div class="page&#45;header"> -->
<!-- <page&#45;h1 model="ctrl.navModel"></page&#45;h1> -->
<!-- -->
<!-- <button class="btn btn&#45;success" ng&#45;click="ctrl.openAddUsersView()" ng&#45;hide="ctrl.externalUserMngLinkUrl"> -->
<!-- <span>{{ctrl.addUsersBtnName}}</span> -->
<!-- </button> -->
<!-- -->
<!-- <div class="page&#45;header&#45;tabs"> -->
<!-- -->
<!-- <a class="btn btn&#45;inverse" ng&#45;href="{{ctrl.externalUserMngLinkUrl}}" target="_blank" ng&#45;if="ctrl.externalUserMngLinkUrl"> -->
<!-- <i class="fa fa&#45;external&#45;link&#45;square"></i> -->
<!-- {{ctrl.addUsersBtnName}} -->
<!-- </a> -->
<!-- -->
<!-- <ul class="gf&#45;tabs"> -->
<!-- <li class="gf&#45;tabs&#45;item"> -->
<!-- <a class="gf&#45;tabs&#45;link" ng&#45;click="ctrl.editor.index = 0" ng&#45;class="{active: ctrl.editor.index === 0}"> -->
<!-- Users ({{ctrl.users.length}}) -->
<!-- </a> -->
<!-- </li> -->
<!-- <li class="gf&#45;tabs&#45;item" ng&#45;show="ctrl.pendingInvites.length"> -->
<!-- <a class="gf&#45;tabs&#45;link" ng&#45;click="ctrl.editor.index = 1" ng&#45;class="{active: ctrl.editor.index === 1}"> -->
<!-- Pending Invites ({{ctrl.pendingInvites.length}}) -->
<!-- </a> -->
<!-- </li> -->
<!-- </ul> -->
<!-- </div> -->
<!-- </div> -->
<div class="page-container"> <page-header model="ctrl.navModel"></page-header>
<div class="page-header">
<page-h1 model="ctrl.navModel"></page-h1>
<div class="page-container page-body">
<div class="page-action-bar">
<div class="page-action-bar__spacer"></div>
<button class="btn btn-inverse" ng-show="ctrl.pendingInvites.length" ng-click="ctrl.editor.index = 1">
Pending Invites ({{ctrl.pendingInvites.length}})
</button>
<button class="btn btn-success" ng-click="ctrl.openAddUsersView()" ng-hide="ctrl.externalUserMngLinkUrl"> <button class="btn btn-success" ng-click="ctrl.openAddUsersView()" ng-hide="ctrl.externalUserMngLinkUrl">
<i class="fa fa-plus"></i>
<span>{{ctrl.addUsersBtnName}}</span> <span>{{ctrl.addUsersBtnName}}</span>
</button> </button>
<div class="page-header-tabs">
<a class="btn btn-inverse" ng-href="{{ctrl.externalUserMngLinkUrl}}" target="_blank" ng-if="ctrl.externalUserMngLinkUrl"> <a class="btn btn-inverse" ng-href="{{ctrl.externalUserMngLinkUrl}}" target="_blank" ng-if="ctrl.externalUserMngLinkUrl">
<i class="fa fa-external-link-square"></i> <i class="fa fa-external-link-square"></i>
{{ctrl.addUsersBtnName}} {{ctrl.addUsersBtnName}}
</a> </a>
<ul class="gf-tabs">
<li class="gf-tabs-item">
<a class="gf-tabs-link" ng-click="ctrl.editor.index = 0" ng-class="{active: ctrl.editor.index === 0}">
Users ({{ctrl.users.length}})
</a>
</li>
<li class="gf-tabs-item" ng-show="ctrl.pendingInvites.length">
<a class="gf-tabs-link" ng-click="ctrl.editor.index = 1" ng-class="{active: ctrl.editor.index === 1}">
Pending Invites ({{ctrl.pendingInvites.length}})
</a>
</li>
</ul>
</div>
</div> </div>
<div class="grafana-info-box" ng-if="ctrl.externalUserMngInfo"> <div class="grafana-info-box" ng-if="ctrl.externalUserMngInfo">
......
public/app/features/plugins/ds_edit_ctrl.ts
...@@ -41,7 +41,7 @@ export class DataSourceEditCtrl { ...@@ -41,7 +41,7 @@ export class DataSourceEditCtrl {
navModelSrv, navModelSrv,
) { ) {
this.navModel = navModelSrv.getNav('cfg', 'datasources'); this.navModel = navModelSrv.getNav('cfg', 'datasources', 0);
this.datasources = []; this.datasources = [];
this.tabIndex = 0; this.tabIndex = 0;
...@@ -58,9 +58,7 @@ export class DataSourceEditCtrl { ...@@ -58,9 +58,7 @@ export class DataSourceEditCtrl {
this.isNew = true; this.isNew = true;
this.current = _.cloneDeep(defaults); this.current = _.cloneDeep(defaults);
// add to nav & breadcrumbs this.navModel.breadcrumbs.push({text: 'New'});
this.navModel.node = {text: 'New data source', icon: 'icon-gf icon-gf-fw icon-gf-datasources'};
this.navModel.breadcrumbs.push(this.navModel.node);
// We are coming from getting started // We are coming from getting started
if (this.$location.search().gettingstarted) { if (this.$location.search().gettingstarted) {
...@@ -87,7 +85,7 @@ export class DataSourceEditCtrl { ...@@ -87,7 +85,7 @@ export class DataSourceEditCtrl {
this.backendSrv.get('/api/datasources/' + id).then(ds => { this.backendSrv.get('/api/datasources/' + id).then(ds => {
this.isNew = false; this.isNew = false;
this.current = ds; this.current = ds;
this.navModel.node = {text: ds.name, icon: 'icon-gf icon-gf-fw icon-gf-datasources'}; this.navModel.node = {text: ds.name, icon: 'icon-gf icon-gf-fw icon-gf-datasources', id: 'ds-new'};
this.navModel.breadcrumbs.push(this.navModel.node); this.navModel.breadcrumbs.push(this.navModel.node);
if (datasourceCreated) { if (datasourceCreated) {
......
public/app/features/plugins/partials/ds_edit.html
<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" ng&#45;show="ctrl.hasDashboards"> -->
<!-- <ul class="gf&#45;tabs"> -->
<!-- <li class="gf&#45;tabs&#45;item"> -->
<!-- <a class="gf&#45;tabs&#45;link" ng&#45;click="ctrl.tabIndex = 0" ng&#45;class="{active: ctrl.tabIndex === 0}"> -->
<!-- <i class="fa fa&#45;sliders"></i> -->
<!-- Config -->
<!-- </a> -->
<!-- </li> -->
<!-- <li class="gf&#45;tabs&#45;item"> -->
<!-- <a class="gf&#45;tabs&#45;link" ng&#45;click="ctrl.tabIndex = 1" ng&#45;class="{active: ctrl.tabIndex === 1}"> -->
<!-- <i class="fa fa&#45;th&#45;large"></i> -->
<!-- Dashboards -->
<!-- </a> -->
<!-- </li> -->
<!-- </ul> -->
<!-- </div> -->
<!-- </div> -->
<!-- </div> -->
<!-- </div> -->
<!-- -->
<div class="page-header"> <page-header model="ctrl.navModel"></page-header>
<page-h1 model="ctrl.navModel"></page-h1>
<div class="page-header-tabs" ng-show="ctrl.hasDashboards">
<ul class="gf-tabs">
<li class="gf-tabs-item">
<a class="gf-tabs-link" ng-click="ctrl.tabIndex = 0" ng-class="{active: ctrl.tabIndex === 0}">
<i class="fa fa-sliders"></i>
Config
</a>
</li>
<li class="gf-tabs-item">
<a class="gf-tabs-link" ng-click="ctrl.tabIndex = 1" ng-class="{active: ctrl.tabIndex === 1}">
<i class="fa fa-th-large"></i>
Dashboards
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="page-container page-body"> <div class="page-container page-body">
<div class="page-action-bar"> <h3 class="page-sub-heading" ng-hide="ctrl.isNew">Edit Data Source</h3>
<div ng-if="ctrl.current.readOnly" class="grafana-info-box span8"> <h3 class="page-sub-heading" ng-show="ctrl.isNew">New Data Source</h3>
<div ng-if="ctrl.current.readOnly" class="page-action-bar">
<div class="grafana-info-box span8">
Disclaimer. This datasource was added by config and cannot be modified using the UI. Please contact your server admin to update this datasource. Disclaimer. This datasource was added by config and cannot be modified using the UI. Please contact your server admin to update this datasource.
</div> </div>
</div> </div>
......
public/app/features/plugins/partials/ds_http_settings.html
<div class="gf-form-group"> <div class="gf-form-group">
<h3 class="page-heading">HTTP settings</h3> <h3 class="section-heading">HTTP</h3>
<div class="gf-form-group"> <div class="gf-form-group">
<div class="gf-form-inline"> <div class="gf-form-inline">
<div class="gf-form max-width-30"> <div class="gf-form max-width-30">
...@@ -38,7 +38,7 @@ ...@@ -38,7 +38,7 @@
</div> </div>
</div> </div>
<h3 class="page-heading">HTTP Auth</h3> <h3 class="section-heading">Auth</h3>
<div class="gf-form-group"> <div class="gf-form-group">
<div class="gf-form-inline"> <div class="gf-form-inline">
<gf-form-switch class="gf-form" label="Basic Auth" checked="current.basicAuth" label-class="width-8" switch-class="max-width-6"></gf-form-switch> <gf-form-switch class="gf-form" label="Basic Auth" checked="current.basicAuth" label-class="width-8" switch-class="max-width-6"></gf-form-switch>
......
public/sass/layout/_page.scss
...@@ -52,6 +52,10 @@ ...@@ -52,6 +52,10 @@
margin-bottom: $spacer * 2; margin-bottom: $spacer * 2;
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
> a, > button {
margin-left: $spacer;
}
} }
.page-action-bar__spacer { .page-action-bar__spacer {
...@@ -70,6 +74,10 @@ ...@@ -70,6 +74,10 @@
} }
} }
.page-sub-heading {
margin-bottom: $spacer;
}
.page-sidebar { .page-sidebar {
color: $text-color-weak; color: $text-color-weak;
h4 { h4 {
......
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