Skip to content

N
nexpie-grafana-theme
Commit 1eab7712 by Torkel Ödegaard
Options

ux: navigation work

parent db54416d
Showing with 164 additions and 127 deletions
pkg/api/dtos/index.go
...@@ -7,7 +7,7 @@ type IndexViewData struct { ...@@ -7,7 +7,7 @@ type IndexViewData struct {
AppSubUrl string AppSubUrl string
GoogleAnalyticsId string GoogleAnalyticsId string
GoogleTagManagerId string GoogleTagManagerId string
MainNavLinks []*NavLink NavTree []*NavLink
BuildVersion string BuildVersion string
BuildCommit string BuildCommit string
NewGrafanaVersionExists bool NewGrafanaVersionExists bool
...@@ -20,7 +20,9 @@ type PluginCss struct { ...@@ -20,7 +20,9 @@ type PluginCss struct {
} }
type NavLink struct { type NavLink struct {
Id string `json:"id,omitempty"`
Text string `json:"text,omitempty"` Text string `json:"text,omitempty"`
Description string `json:"description,omitempty"`
Icon string `json:"icon,omitempty"` Icon string `json:"icon,omitempty"`
Img string `json:"img,omitempty"` Img string `json:"img,omitempty"`
Url string `json:"url,omitempty"` Url string `json:"url,omitempty"`
......
pkg/api/index.go
...@@ -85,7 +85,7 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) { ...@@ -85,7 +85,7 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) {
} }
if c.OrgRole == m.ROLE_ADMIN || c.OrgRole == m.ROLE_EDITOR { if c.OrgRole == m.ROLE_ADMIN || c.OrgRole == m.ROLE_EDITOR {
data.MainNavLinks = append(data.MainNavLinks, &dtos.NavLink{ data.NavTree = append(data.NavTree, &dtos.NavLink{
Text: "New", Text: "New",
Icon: "fa fa-fw fa-plus", Icon: "fa fa-fw fa-plus",
Url: "", Url: "",
...@@ -103,7 +103,7 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) { ...@@ -103,7 +103,7 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) {
{Text: "Snapshots", Url: setting.AppSubUrl + "/dashboard/snapshots", Icon: "icon-gf icon-gf-snapshot"}, {Text: "Snapshots", Url: setting.AppSubUrl + "/dashboard/snapshots", Icon: "icon-gf icon-gf-snapshot"},
} }
data.MainNavLinks = append(data.MainNavLinks, &dtos.NavLink{ data.NavTree = append(data.NavTree, &dtos.NavLink{
Text: "Dashboards", Text: "Dashboards",
Icon: "icon-gf icon-gf-dashboard", Icon: "icon-gf icon-gf-dashboard",
Url: setting.AppSubUrl + "/", Url: setting.AppSubUrl + "/",
...@@ -116,7 +116,7 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) { ...@@ -116,7 +116,7 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) {
{Text: "Notification channels", Url: setting.AppSubUrl + "/alerting/notifications", Icon: "fa fa-fw fa-bell-o"}, {Text: "Notification channels", Url: setting.AppSubUrl + "/alerting/notifications", Icon: "fa fa-fw fa-bell-o"},
} }
data.MainNavLinks = append(data.MainNavLinks, &dtos.NavLink{ data.NavTree = append(data.NavTree, &dtos.NavLink{
Text: "Alerting", Text: "Alerting",
Icon: "icon-gf icon-gf-alert", Icon: "icon-gf icon-gf-alert",
Url: setting.AppSubUrl + "/alerting/list", Url: setting.AppSubUrl + "/alerting/list",
...@@ -165,13 +165,14 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) { ...@@ -165,13 +165,14 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) {
} }
if len(appLink.Children) > 0 { if len(appLink.Children) > 0 {
data.MainNavLinks = append(data.MainNavLinks, appLink) data.NavTree = append(data.NavTree, appLink)
} }
} }
} }
if c.OrgRole == m.ROLE_ADMIN { if c.OrgRole == m.ROLE_ADMIN {
cfgNode := &dtos.NavLink{ cfgNode := &dtos.NavLink{
Id: "cfg",
Text: "Configuration", Text: "Configuration",
Icon: "fa fa-fw fa-cogs", Icon: "fa fa-fw fa-cogs",
Url: setting.AppSubUrl + "/configuration", Url: setting.AppSubUrl + "/configuration",
...@@ -179,6 +180,8 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) { ...@@ -179,6 +180,8 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) {
{ {
Text: "Data Sources", Text: "Data Sources",
Icon: "icon-gf icon-gf-datasources", Icon: "icon-gf icon-gf-datasources",
Description: "Add and configure data sources",
Id: "datasources",
Url: setting.AppSubUrl + "/datasources", Url: setting.AppSubUrl + "/datasources",
Children: []*dtos.NavLink{ Children: []*dtos.NavLink{
{Text: "List", Url: setting.AppSubUrl + "/datasources", Icon: "icon-gf icon-gf-datasources"}, {Text: "List", Url: setting.AppSubUrl + "/datasources", Icon: "icon-gf icon-gf-datasources"},
...@@ -186,7 +189,16 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) { ...@@ -186,7 +189,16 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) {
}, },
}, },
{ {
Text: "Preferences",
Id: "org",
Description: "Organization preferences",
Icon: "fa fa-fw fa-sliders",
Url: setting.AppSubUrl + "/org",
},
{
Text: "Plugins", Text: "Plugins",
Id: "plugins",
Description: "View and configure plugins",
Icon: "icon-gf icon-gf-apps", Icon: "icon-gf icon-gf-apps",
Url: setting.AppSubUrl + "/plugins", Url: setting.AppSubUrl + "/plugins",
Children: []*dtos.NavLink{ Children: []*dtos.NavLink{
...@@ -195,6 +207,19 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) { ...@@ -195,6 +207,19 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) {
{Text: "Apps", Url: setting.AppSubUrl + "/plugins?type=app", Icon: "icon-gf icon-gf-apps"}, {Text: "Apps", Url: setting.AppSubUrl + "/plugins?type=app", Icon: "icon-gf icon-gf-apps"},
}, },
}, },
{
Text: "User Management",
Id: "users",
Description: "Manage users & user groups",
Icon: "fa fa-fw fa-users",
Url: setting.AppSubUrl + "/org/users",
},
{
Text: "API Keys",
Description: "Create & manage API keys",
Icon: "fa fa-fw fa-key",
Url: setting.AppSubUrl + "/org/apikeys",
},
}, },
} }
...@@ -212,7 +237,7 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) { ...@@ -212,7 +237,7 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) {
}) })
} }
data.MainNavLinks = append(data.MainNavLinks, cfgNode) data.NavTree = append(data.NavTree, cfgNode)
} }
return &data, nil return &data, nil
......
public/app/core/components/navbar/navbar.html
<div class="page-nav"> <div class="page-nav">
<div class="container"> <div class="container">
<div class="page-breadcrumb"> <div class="page-breadcrumb">
<div class="page-breadcrumb__item dropdown" ng-repeat="item in ctrl.model.items"> <div class="page-breadcrumb__item dropdown" ng-repeat="item in ctrl.model.breadcrumbs">
<a class="pointer" ng-href="{{::item.url}}" data-toggle="dropdown" ng-if="::item.items"> <!-- <a class="pointer" ng&#45;href="{{::item.url}}" data&#45;toggle="dropdown" ng&#45;if="::item.children"> -->
{{::item.title}} <!-- {{::item.text}} -->
<i class="page-breadcrumb__caret fa fa-caret-down"></i> <!-- <i class="page&#45;breadcrumb__caret fa fa&#45;caret&#45;down"></i> -->
</a> <!-- </a> -->
<a class="pointer" ng-href="{{::item.url}}" ng-if="::!item.items"> <a class="pointer" ng-href="{{::item.url}}">
{{::item.title}} {{::item.text}}
</a> </a>
<ul class="dropdown-menu dropdown-menu--navbar"> <ul class="dropdown-menu dropdown-menu--navbar">
<li ng-repeat="subItem in ::item.items"> <li ng-repeat="subItem in ::item.children">
<a class="pointer" ng-href="{{::subItem.url}}" ng-click="ctrl.navItemClicked(subItem, $event)"> <a class="pointer" ng-href="{{::subItem.url}}" ng-click="ctrl.navItemClicked(subItem, $event)">
{{::subItem.title}} {{::subItem.text}}
</a> </a>
</li> </li>
</ul> </ul>
......
public/app/core/components/navbar/navbar.ts
...@@ -11,6 +11,7 @@ export class NavbarCtrl { ...@@ -11,6 +11,7 @@ export class NavbarCtrl {
/** @ngInject */ /** @ngInject */
constructor(private $scope, private $rootScope, private contextSrv) { constructor(private $scope, private $rootScope, private contextSrv) {
console.log(this.model);
} }
showSearch() { showSearch() {
......
public/app/core/components/sidemenu/sidemenu.html
<div class="sidemenu__top"> <div class="sidemenu__top">
<a class="navbar-brand-btn pointer" ng-click="ctrl.contextSrv.toggleSideMenu()"> <a class="navbar-brand-btn pointer" ng-click="ctrl.contextSrv.toggleSideMenu()">
......
public/app/core/components/sidemenu/sidemenu.ts
...@@ -26,7 +26,7 @@ export class SideMenuCtrl { ...@@ -26,7 +26,7 @@ export class SideMenuCtrl {
this.showSignout = this.contextSrv.isSignedIn && !config['disableSignoutMenu']; this.showSignout = this.contextSrv.isSignedIn && !config['disableSignoutMenu'];
this.maxShownOrgs = 10; this.maxShownOrgs = 10;
this.mainLinks = config.bootData.mainNavLinks; this.mainLinks = config.bootData.navTree;
this.openUserDropdown(); this.openUserDropdown();
this.loginUrl = 'login?redirect=' + encodeURIComponent(this.$location.path()); this.loginUrl = 'login?redirect=' + encodeURIComponent(this.$location.path());
......
public/app/core/nav_model_srv.ts
///<reference path="../headers/common.d.ts" /> ///<reference path="../headers/common.d.ts" />
import coreModule from 'app/core/core_module'; import coreModule from 'app/core/core_module';
import config from 'app/core/config';
import _ from 'lodash';
export interface NavModelItem { export interface NavModelItem {
title: string; title: string;
...@@ -15,10 +17,24 @@ export interface NavModel { ...@@ -15,10 +17,24 @@ export interface NavModel {
} }
export class NavModelSrv { export class NavModelSrv {
navItems: any;
/** @ngInject */ /** @ngInject */
constructor(private contextSrv) { constructor(private contextSrv) {
this.navItems = config.bootData.navTree;
}
getCfgNode() {
return _.find(this.navItems, {id: 'cfg'});
}
getConfigurationNav() {
let cfg = this.getCfgNode();
return {
breadcrumbs: [cfg],
node: cfg,
};
} }
getAlertingNav(subPage) { getAlertingNav(subPage) {
...@@ -36,21 +52,11 @@ export class NavModelSrv { ...@@ -36,21 +52,11 @@ export class NavModelSrv {
} }
getDatasourceNav(subPage) { getDatasourceNav(subPage) {
let cfg = this.getCfgNode();
let ds = _.find(cfg.children, {id: 'datasources'});
return { return {
items: [ breadcrumbs: [cfg, ds],
{ node: ds
title: 'Configuration',
items: [
{title: 'Data sources', active: subPage === 0, url: 'datasources', icon: 'fa fa-database'},
{title: 'Users', active: subPage === 0, url: 'users', icon: 'fa fa-fw fa-users'},
{title: 'Plugins', active: subPage === 0, url: 'plugins', icon: 'icon-gf icon-gf-apps'},
]
},
{
title: 'Data sources',
url: 'datasources',
}
]
}; };
} }
...@@ -91,18 +97,11 @@ export class NavModelSrv { ...@@ -91,18 +97,11 @@ export class NavModelSrv {
} }
getOrgNav(subPage) { getOrgNav(subPage) {
let cfg = this.getCfgNode();
let org = _.find(cfg.children, {id: 'org'});
return { return {
section: { breadcrumbs: [this.getCfgNode(), org],
title: 'Organization', node: org
url: 'org',
icon: 'icon-gf icon-gf-users'
},
menu: [
{title: 'Preferences', active: subPage === 0, url: 'org', icon: 'fa fa-fw fa-cog'},
{title: 'Org Users', active: subPage === 1, url: 'org/users', icon: 'fa fa-fw fa-users'},
{title: 'API Keys', active: subPage === 2, url: 'org/apikeys', icon: 'fa fa-fw fa-key'},
{title: 'Org User Groups', active: subPage === 3, url: 'org/user-groups', icon: 'fa fa-fw fa-users'},
]
}; };
} }
...@@ -124,13 +123,20 @@ export class NavModelSrv { ...@@ -124,13 +123,20 @@ export class NavModelSrv {
} }
getPluginsNav() { getPluginsNav() {
let cfg = this.getCfgNode();
let plugins = _.find(cfg.children, {id: 'plugins'});
return { return {
section: { breadcrumbs: [this.getCfgNode(), plugins],
title: 'Plugins', node: plugins
url: 'plugins', };
icon: 'icon-gf icon-gf-apps' }
},
menu: [] getUserManNav() {
let cfg = this.getCfgNode();
let users = _.find(cfg.children, {id: 'users'});
return {
breadcrumbs: [cfg, users],
node: users,
}; };
} }
......
public/app/features/admin/admin.ts
...@@ -47,7 +47,7 @@ export class ConfigurationHomeCtrl { ...@@ -47,7 +47,7 @@ export class ConfigurationHomeCtrl {
/** @ngInject */ /** @ngInject */
constructor(private $scope, private backendSrv, private navModelSrv) { constructor(private $scope, private backendSrv, private navModelSrv) {
this.navModel = navModelSrv.getAdminNav(); this.navModel = navModelSrv.getConfigurationNav();
} }
} }
......
public/app/features/admin/partials/configuration_home.html
...@@ -4,35 +4,30 @@ ...@@ -4,35 +4,30 @@
<div class="page-container"> <div class="page-container">
<div class="page-header"> <div class="page-header">
<h1> <h1>
<i class="fa fa-cogs"></i> <i class="fa fa-fw fa-cogs"></i>
<span>Configuration</span> <span>Configuration</span>
</h1> </h1>
</div> </div>
<section class="card-section" layout-mode> <section class="card-section card-list-layout-grid">
<layout-selector></layout-selector>
<ol class="card-list" > <ol class="card-list" >
<li class="card-item-wrapper" ng-repeat="ds in ctrl.datasources"> <li class="card-item-wrapper" ng-repeat="navItem in ctrl.navModel.node.children">
<a class="card-item" href="datasources/edit/{{ds.id}}/"> <a class="card-item" ng-href="{{::navItem.url}}">
<div class="card-item-header"> <div class="card-item-header">
<div class="card-item-type"> <div class="card-item-type">
{{ds.type}}
</div> </div>
</div> </div>
<div class="card-item-body"> <div class="card-item-body">
<figure class="card-item-figure"> <figure class="card-item-figure">
<img ng-src="{{ds.typeLogoUrl}}"> <i class="{{navItem.icon}}"></i>
</figure> </figure>
<div class="card-item-details"> <div class="card-item-details">
<div class="card-item-name"> <div class="card-item-name">
{{ds.name}} {{navItem.text}}
<span ng-if="ds.isDefault">
<span class="btn btn-secondary btn-mini">default</span>
</span>
</div> </div>
<div class="card-item-sub-name"> <div class="card-item-sub-name">
{{ds.url}} {{navItem.description}}
</div> </div>
</div> </div>
</div> </div>
...@@ -40,9 +35,5 @@ ...@@ -40,9 +35,5 @@
</li> </li>
</ol> </ol>
</section> </section>
<div ng-if="ctrl.datasources.length === 0">
<em>No data sources defined</em>
</div>
</div> </div>
</div> </div>
public/app/features/org/org_users_ctrl.ts
...@@ -23,7 +23,8 @@ export class OrgUsersCtrl { ...@@ -23,7 +23,8 @@ export class OrgUsersCtrl {
loginOrEmail: '', loginOrEmail: '',
role: 'Viewer', role: 'Viewer',
}; };
this.navModel = navModelSrv.getOrgNav(0);
this.navModel = navModelSrv.getUserManNav(0);
this.get(); this.get();
this.editor = { index: 0 }; this.editor = { index: 0 };
......
public/app/features/org/partials/orgDetails.html
...@@ -2,14 +2,17 @@ ...@@ -2,14 +2,17 @@
<div class="page-container"> <div class="page-container">
<div class="page-header"> <div class="page-header">
<h1>Org Preferences</h1> <h1>
<i class="{{navModel.node.icon}}"></i>
{{navModel.node.text}}
</h1>
</div> </div>
<h3 class="page-heading">General</h3> <h3 class="page-heading">General</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">
<span class="gf-form-label width-6">Name</span> <span class="gf-form-label">Organization name</span>
<input class="gf-form-input" type="text" required ng-model="org.name"> <input class="gf-form-input" type="text" required ng-model="org.name">
</div> </div>
<div class="gf-form"> <div class="gf-form">
...@@ -61,16 +64,6 @@ ...@@ -61,16 +64,6 @@
</div> </div>
</form> </form>
<h3 class="page-heading">Admin Pages</h3>
<div class="gf-form-group">
<div class="gf-form-inline">
<div class="gf-form">
<a href="org/users" class="btn gf-form-btn btn-inverse">Users &amp; Roles</a>
</div>
<div class="gf-form">
<a href="org/apikeys" class="btn gf-form-btn btn-inverse">API Keys</a>
</div>
</div>
</div> </div>
public/app/features/org/partials/orgUsers.html
...@@ -2,7 +2,10 @@ ...@@ -2,7 +2,10 @@
<div class="page-container"> <div class="page-container">
<div class="page-header"> <div class="page-header">
<h1>Organization users</h1> <h1>
<i class="{{ctrl.navModel.node.icon}}"></i>
{{ctrl.navModel.node.text}}
</h1>
<div class="page-header-tabs"> <div class="page-header-tabs">
...@@ -22,8 +25,13 @@ ...@@ -22,8 +25,13 @@
Users ({{ctrl.users.length}}) Users ({{ctrl.users.length}})
</a> </a>
</li> </li>
<li class="gf-tabs-item">
<a class="gf-tabs-link" ng-click="ctrl.editor.index = 0" ng-class="{active: ctrl.editor.index === 1}">
Groups (0)
</a>
</li>
<li class="gf-tabs-item" ng-show="ctrl.showInviteUI"> <li class="gf-tabs-item" ng-show="ctrl.showInviteUI">
<a class="gf-tabs-link" ng-click="ctrl.editor.index = 1" ng-class="{active: ctrl.editor.index === 1}"> <a class="gf-tabs-link" ng-click="ctrl.editor.index = 1" ng-class="{active: ctrl.editor.index === 2}">
Pending Invitations ({{ctrl.pendingInvites.length}}) Pending Invitations ({{ctrl.pendingInvites.length}})
</a> </a>
</li> </li>
...@@ -54,8 +62,10 @@ ...@@ -54,8 +62,10 @@
<td><span class="ellipsis">{{user.email}}</span></td> <td><span class="ellipsis">{{user.email}}</span></td>
<td>{{user.lastSeenAtAge}}</td> <td>{{user.lastSeenAtAge}}</td>
<td> <td>
<select type="text" ng-model="user.role" class="input-medium" ng-options="f for f in ['Viewer', 'Editor', 'Read Only Editor', 'Admin']" ng-change="ctrl.updateOrgUser(user)"> <div class="gf-form-select-wrapper width-9">
<select type="text" ng-model="user.role" class="gf-form-input" ng-options="f for f in ['Viewer', 'Editor', 'Read Only Editor', 'Admin']" ng-change="ctrl.updateOrgUser(user)">
</select> </select>
</div>
</td> </td>
<td> <td>
<a ng-click="ctrl.removeUser(user)" class="btn btn-danger btn-mini"> <a ng-click="ctrl.removeUser(user)" class="btn btn-danger btn-mini">
......
public/app/features/plugins/ds_edit_ctrl.ts
...@@ -59,7 +59,7 @@ export class DataSourceEditCtrl { ...@@ -59,7 +59,7 @@ export class DataSourceEditCtrl {
initNewDatasourceModel() { initNewDatasourceModel() {
this.isNew = true; this.isNew = true;
this.current = angular.copy(defaults); this.current = angular.copy(defaults);
this.navModel.items.push({title: 'New data source'}); this.navModel.breadcrumbs.push({text: 'New data source'});
// We are coming from getting started // We are coming from getting started
if (this.$location.search().gettingstarted) { if (this.$location.search().gettingstarted) {
...@@ -86,7 +86,7 @@ export class DataSourceEditCtrl { ...@@ -86,7 +86,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.items.push({title: ds.name}); this.navModel.breadcrumbs.push({text: ds.name});
if (datasourceCreated) { if (datasourceCreated) {
datasourceCreated = false; datasourceCreated = false;
......
public/app/features/plugins/partials/ds_list.html
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<div class="page-container"> <div class="page-container">
<div class="page-header"> <div class="page-header">
<h1> <h1>
<i class="icon-gf icon-gf-datasources"></i> <i class="icon-gf icon-gf-fw icon-gf-datasources"></i>
<span>Data Sources</span> <span>Data Sources</span>
</h1> </h1>
...@@ -15,7 +15,6 @@ ...@@ -15,7 +15,6 @@
</div> </div>
<section class="card-section" layout-mode> <section class="card-section" layout-mode>
<layout-selector></layout-selector>
<ol class="card-list" > <ol class="card-list" >
<li class="card-item-wrapper" ng-repeat="ds in ctrl.datasources"> <li class="card-item-wrapper" ng-repeat="ds in ctrl.datasources">
......
public/app/features/plugins/plugin_edit_ctrl.ts
...@@ -42,6 +42,7 @@ export class PluginEditCtrl { ...@@ -42,6 +42,7 @@ export class PluginEditCtrl {
return this.backendSrv.get(`/api/plugins/${this.pluginId}/settings`).then(result => { return this.backendSrv.get(`/api/plugins/${this.pluginId}/settings`).then(result => {
this.model = result; this.model = result;
this.pluginIcon = this.getPluginIcon(this.model.type); this.pluginIcon = this.getPluginIcon(this.model.type);
this.navModel.breadcrumbs.push({text: this.model.name});
this.model.dependencies.plugins.forEach(plug => { this.model.dependencies.plugins.forEach(plug => {
plug.icon = this.getPluginIcon(plug.type); plug.icon = this.getPluginIcon(plug.type);
......
public/sass/base/_grafana_icons.scss
...@@ -18,12 +18,18 @@ ...@@ -18,12 +18,18 @@
font-variant: normal; font-variant: normal;
text-transform: none; text-transform: none;
line-height: 1; line-height: 1;
display: inline-block;
/* Better Font Rendering =========== */ /* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.icon-gf-fw {
width: 1.2857142857em;
text-align: center;
}
.inline-icon-gf { .inline-icon-gf {
vertical-align: middle; vertical-align: middle;
} }
......
public/sass/components/_cards.scss
...@@ -97,7 +97,7 @@ ...@@ -97,7 +97,7 @@
color: $text-color-weak; color: $text-color-weak;
text-transform: uppercase; text-transform: uppercase;
font-size: $font-size-sm; font-size: $font-size-sm;
font-weight: bold; font-weight: $font-weight-semi-bold;
} }
.card-item-notice { .card-item-notice {
...@@ -158,6 +158,9 @@ ...@@ -158,6 +158,9 @@
img { img {
width: 6rem; width: 6rem;
} }
.fa, .icon-gf {
font-size: 3.5rem;
}
} }
.card-item-name { .card-item-name {
......
public/sass/components/_gf-form.scss
...@@ -194,7 +194,7 @@ $gf-form-margin: 0.1rem; ...@@ -194,7 +194,7 @@ $gf-form-margin: 0.1rem;
select.gf-form-input { select.gf-form-input {
text-indent: .01px; text-indent: .01px;
text-overflow: ''; text-overflow: '';
padding-right: $input-padding-x*2; padding-right: $input-padding-x*4;
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: menulist-text; // was set to "window" and caused odd display on windos and linux. -moz-appearance: menulist-text; // was set to "window" and caused odd display on windos and linux.
appearance: none; appearance: none;
......
public/sass/components/_scrollbar.scss
...@@ -110,39 +110,39 @@ ...@@ -110,39 +110,39 @@
// Srollbars // Srollbars
// //
// ::-webkit-scrollbar { ::-webkit-scrollbar {
// width: 8px; width: 8px;
// height: 8px; height: 8px;
// } }
//
// ::-webkit-scrollbar:hover { ::-webkit-scrollbar:hover {
// height: 8px; height: 8px;
// } }
//
// ::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:start:decrement,
// ::-webkit-scrollbar-button:end:increment { display: none; } ::-webkit-scrollbar-button:end:increment { display: none; }
// ::-webkit-scrollbar-button:horizontal:decrement { display: none; } ::-webkit-scrollbar-button:horizontal:decrement { display: none; }
// ::-webkit-scrollbar-button:horizontal:increment { display: none; } ::-webkit-scrollbar-button:horizontal:increment { display: none; }
// ::-webkit-scrollbar-button:vertical:decrement { display: none; } ::-webkit-scrollbar-button:vertical:decrement { display: none; }
// ::-webkit-scrollbar-button:vertical:increment { display: none; } ::-webkit-scrollbar-button:vertical:increment { display: none; }
// ::-webkit-scrollbar-button:horizontal:decrement:active { background-image: none; } ::-webkit-scrollbar-button:horizontal:decrement:active { background-image: none; }
// ::-webkit-scrollbar-button:horizontal:increment:active { background-image: none; } ::-webkit-scrollbar-button:horizontal:increment:active { background-image: none; }
// ::-webkit-scrollbar-button:vertical:decrement:active { background-image: none; } ::-webkit-scrollbar-button:vertical:decrement:active { background-image: none; }
// ::-webkit-scrollbar-button:vertical:increment:active {background-image: none; } ::-webkit-scrollbar-button:vertical:increment:active {background-image: none; }
// ::-webkit-scrollbar-track-piece { background-color: transparent; } ::-webkit-scrollbar-track-piece { background-color: transparent; }
//
// ::-webkit-scrollbar-thumb:vertical { ::-webkit-scrollbar-thumb:vertical {
// height: 50px; height: 50px;
// background: -webkit-gradient(linear, left top, right top, color-stop(0%, $scrollbarBackground), color-stop(100%, $scrollbarBackground2)); background: -webkit-gradient(linear, left top, right top, color-stop(0%, $scrollbarBackground), color-stop(100%, $scrollbarBackground2));
// border: 1px solid $scrollbarBorder; border: 1px solid $scrollbarBorder;
// border-top: 1px solid $scrollbarBorder; border-top: 1px solid $scrollbarBorder;
// border-left: 1px solid $scrollbarBorder; border-left: 1px solid $scrollbarBorder;
// } }
//
// ::-webkit-scrollbar-thumb:horizontal { ::-webkit-scrollbar-thumb:horizontal {
// width: 50px; width: 50px;
// background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $scrollbarBackground), color-stop(100%, $scrollbarBackground2)); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $scrollbarBackground), color-stop(100%, $scrollbarBackground2));
// border: 1px solid $scrollbarBorder; border: 1px solid $scrollbarBorder;
// border-top: 1px solid $scrollbarBorder; border-top: 1px solid $scrollbarBorder;
// border-left: 1px solid $scrollbarBorder; border-left: 1px solid $scrollbarBorder;
// } }
public/sass/layout/_page.scss
...@@ -61,13 +61,13 @@ ...@@ -61,13 +61,13 @@
margin-bottom: $spacer*1.5; margin-bottom: $spacer*1.5;
} }
} a, button {
.page-header__cta {
float: right; float: right;
margin-left: $spacer; margin-left: $spacer;
}
} }
.page-heading { .page-heading {
font-size: 1.25rem; font-size: 1.25rem;
margin-top: 0; margin-top: 0;
......
public/views/index.html
...@@ -82,7 +82,7 @@ ...@@ -82,7 +82,7 @@
window.grafanaBootData = { window.grafanaBootData = {
user:[[.User]], user:[[.User]],
settings: [[.Settings]], settings: [[.Settings]],
mainNavLinks: [[.MainNavLinks]] navTree: [[.NavTree]]
}; };
</script> </script>
......
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