Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
N
nexpie-grafana-theme
Overview
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Registry
Registry
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Kornkitt Poolsup
nexpie-grafana-theme
Commits
645f49ed
Commit
645f49ed
authored
Nov 30, 2017
by
Torkel Ödegaard
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
ux: updating header design for pages
parent
47f11c26
Hide whitespace changes
Inline
Side-by-side
Showing
20 changed files
with
373 additions
and
272 deletions
+373
-272
pkg/api/index.go
+2
-2
public/app/core/components/navbar/navbar.ts
+3
-3
public/app/core/nav_model_srv.ts
+16
-6
public/app/features/admin/partials/configuration_home.html
+11
-7
public/app/features/alerting/alert_list_ctrl.ts
+2
-1
public/app/features/alerting/notifications_list_ctrl.ts
+1
-0
public/app/features/alerting/partials/alert_list.html
+44
-21
public/app/features/alerting/partials/notifications_list.html
+30
-5
public/app/features/org/partials/profile.html
+9
-5
public/app/features/plugins/partials/ds_edit.html
+8
-3
public/app/features/plugins/partials/ds_list.html
+18
-10
public/app/features/plugins/partials/plugin_edit.html
+79
-78
public/app/features/plugins/partials/plugin_list.html
+62
-57
public/sass/_grafana.scss
+1
-0
public/sass/_variables.scss
+1
-1
public/sass/base/_icons.scss
+4
-0
public/sass/components/_footer.scss
+1
-1
public/sass/components/_page_header.scss
+61
-0
public/sass/components/_tabs.scss
+3
-3
public/sass/layout/_page.scss
+17
-69
No files found.
pkg/api/index.go
View file @
645f49ed
...
...
@@ -140,8 +140,8 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) {
if
setting
.
AlertingEnabled
&&
(
c
.
OrgRole
==
m
.
ROLE_ADMIN
||
c
.
OrgRole
==
m
.
ROLE_EDITOR
)
{
alertChildNavs
:=
[]
*
dtos
.
NavLink
{
{
Text
:
"Alert
List
"
,
Id
:
"alert-list"
,
Url
:
setting
.
AppSubUrl
+
"/alerting/list"
,
Icon
:
"fa fa-fw fa-list-ul"
},
{
Text
:
"Notification channels"
,
Id
:
"channels"
,
Url
:
setting
.
AppSubUrl
+
"/alerting/notifications"
,
Icon
:
"
fa fa-fw fa-bell-o
"
},
{
Text
:
"Alert
Rules
"
,
Id
:
"alert-list"
,
Url
:
setting
.
AppSubUrl
+
"/alerting/list"
,
Icon
:
"fa fa-fw fa-list-ul"
},
{
Text
:
"Notification channels"
,
Id
:
"channels"
,
Url
:
setting
.
AppSubUrl
+
"/alerting/notifications"
,
Icon
:
"
gicon gicon-alert-notification-channel
"
},
}
data
.
NavTree
=
append
(
data
.
NavTree
,
&
dtos
.
NavLink
{
...
...
public/app/core/components/navbar/navbar.ts
View file @
645f49ed
...
...
@@ -40,9 +40,9 @@ export function pageH1() {
restrict
:
'E'
,
template
:
`
<h1 class="page-header__title">
<i class="page-header__icon {{::model.
node.icon}}" ng-if="::model.node
.icon"></i>
<img class="page-header__img" ng-src="{{::model.
node.img}}" ng-if="::model.node
.img"></i>
{{model.
node
.text}}
<i class="page-header__icon {{::model.
header.icon}}" ng-if="::model.header
.icon"></i>
<img class="page-header__img" ng-src="{{::model.
header.img}}" ng-if="::model.header
.img"></i>
{{model.
header
.text}}
</h1>
`
,
scope
:
{
...
...
public/app/core/nav_model_srv.ts
View file @
645f49ed
...
...
@@ -5,15 +5,24 @@ import config from 'app/core/config';
import
_
from
'lodash'
;
export
interface
NavModelItem
{
t
itle
:
string
;
t
ext
:
string
;
url
:
string
;
icon
?:
string
;
i
conUrl
?:
string
;
i
mg
?:
string
;
}
export
interface
NavModel
{
section
:
NavModelItem
;
menu
:
NavModelItem
[];
export
class
NavModel
{
breadcrumbs
:
NavModelItem
[];
header
:
NavModelItem
;
node
:
NavModelItem
;
constructor
()
{
this
.
breadcrumbs
=
[];
}
setPageHeaderIndex
(
index
:
number
)
{
this
.
header
=
this
.
breadcrumbs
[
index
];
}
}
export
class
NavModelSrv
{
...
...
@@ -31,12 +40,13 @@ export class NavModelSrv {
getNav
(...
args
)
{
var
children
=
this
.
navItems
;
var
nav
=
{
breadcrumbs
:
[],
node
:
null
}
;
var
nav
=
new
NavModel
()
;
for
(
let
id
of
args
)
{
let
node
=
_
.
find
(
children
,
{
id
:
id
});
nav
.
breadcrumbs
.
push
(
node
);
nav
.
node
=
node
;
nav
.
header
=
node
;
children
=
node
.
children
;
}
...
...
public/app/features/admin/partials/configuration_home.html
View file @
645f49ed
<navbar
model=
"ctrl.navModel"
></navbar>
<div
class=
"page-container"
>
<div
class=
"page-header"
>
<page-h1
model=
"ctrl.navModel"
></page-h1>
</div>
<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>
<div
class=
"page-container page-body"
>
<section
class=
"card-section card-list-layout-grid"
>
<ol
class=
"card-list"
>
<li
class=
"card-item-wrapper"
ng-repeat=
"navItem in ctrl.navModel.node.children"
>
...
...
@@ -29,4 +34,4 @@
</li>
</ol>
</section>
</div>
\ No newline at end of file
</div>
public/app/features/alerting/alert_list_ctrl.ts
View file @
645f49ed
...
...
@@ -23,7 +23,8 @@ export class AlertListCtrl {
/** @ngInject */
constructor
(
private
backendSrv
,
private
$location
,
navModelSrv
)
{
this
.
navModel
=
navModelSrv
.
getNav
(
'alerting'
);
this
.
navModel
=
navModelSrv
.
getNav
(
'alerting'
,
'alert-list'
);
this
.
navModel
.
setPageHeaderIndex
(
0
);
var
params
=
$location
.
search
();
this
.
filters
.
state
=
params
.
state
||
null
;
...
...
public/app/features/alerting/notifications_list_ctrl.ts
View file @
645f49ed
...
...
@@ -10,6 +10,7 @@ export class AlertNotificationsListCtrl {
constructor
(
private
backendSrv
,
navModelSrv
)
{
this
.
loadNotifications
();
this
.
navModel
=
navModelSrv
.
getNav
(
'alerting'
,
'channels'
);
this
.
navModel
.
setPageHeaderIndex
(
0
);
}
loadNotifications
()
{
...
...
public/app/features/alerting/partials/alert_list.html
View file @
645f49ed
<navbar
model=
"ctrl.navModel"
></navbar>
<div
class=
"page-header-canvas"
>
<div
class=
"page-container"
>
<navbar
model=
"ctrl.navModel"
></navbar>
<div
class=
"page-container"
>
<div
class=
"page-header"
>
<page-h1
model=
"ctrl.navModel"
></page-h1>
<div
class=
"page-header"
>
<page-h1
model=
"ctrl.navModel"
class=
"page-header__heading"
></page-h1>
<a
class=
"btn btn-secondary"
ng-click=
"ctrl.openHowTo()"
>
<i
class=
"fa fa-info-circle"
></i>
How to add an alert
</a>
<a
class=
"btn btn-inverse"
href=
"alerting/notifications"
>
<i
class=
"fa fa-bell"
></i>
Notification channels
</a>
</div>
<ul
class=
"gf-tabs"
>
<li
class=
"gf-tabs-item"
>
<a
class=
"gf-tabs-link active"
href=
"alerting"
>
<i
class=
"fa fa-fw fa-list-ul"
></i>
Alert Rules
</a>
</li>
<li
class=
"gf-tabs-item"
>
<a
class=
"gf-tabs-link"
href=
"alerting/notifications"
>
<i
class=
"gicon gicon-alert-notification-channel"
></i>
Notification channels
</a>
</li>
</ul>
<div
class=
"gf-form-group"
>
<div
class=
"gf-form-inline"
>
<div
class=
"gf-form"
>
<label
class=
"gf-form-label"
>
Filter by state
</label>
<div
class=
"gf-form-select-wrapper width-13"
>
<select
class=
"gf-form-input"
ng-model=
"ctrl.filters.state"
ng-options=
"f.value as f.text for f in ctrl.stateFilters"
ng-change=
"ctrl.filtersChanged()"
>
</select>
</div>
</div>
</div>
</div>
<div
class=
"page-container page-body"
>
<div
class=
"page-action-bar"
>
<div
class=
"gf-form"
>
<label
class=
"gf-form-label"
>
Filter by state
</label>
<div
class=
"gf-form-select-wrapper width-13"
>
<select
class=
"gf-form-input"
ng-model=
"ctrl.filters.state"
ng-options=
"f.value as f.text for f in ctrl.stateFilters"
ng-change=
"ctrl.filtersChanged()"
>
</select>
</div>
</div>
<div
class=
"page-action-bar__spacer"
>
</div>
<a
class=
"btn btn-secondary"
ng-click=
"ctrl.openHowTo()"
>
<i
class=
"fa fa-info-circle"
></i>
How to add an alert
</a>
<!-- <a class="btn btn-inverse" href="alerting/notifications" > -->
<!-- <i class="fa fa-bell"></i> -->
<!-- Notification channels -->
<!-- </a> -->
</div>
<section
class=
"card-section card-list-layout-list"
>
...
...
public/app/features/alerting/partials/notifications_list.html
View file @
645f49ed
<navbar
model=
"ctrl.navModel"
></navbar>
<div
class=
"page-header-canvas"
>
<div
class=
"page-container"
>
<navbar
model=
"ctrl.navModel"
></navbar>
<div
class=
"page-container"
>
<div
class=
"page-header"
>
<page-h1
model=
"ctrl.navModel"
></page-h1>
<div
class=
"page-header"
>
<page-h1
model=
"ctrl.navModel"
class=
"page-header__heading"
></page-h1>
<a
href=
"alerting/notification/new"
class=
"btn btn-success pull-right"
>
<ul
class=
"gf-tabs"
>
<li
class=
"gf-tabs-item"
>
<a
class=
"gf-tabs-link"
href=
"alerting"
>
<i
class=
"fa fa-fw fa-list-ul"
></i>
Alert Rules
</a>
</li>
<li
class=
"gf-tabs-item"
>
<a
class=
"gf-tabs-link active"
href=
"alerting/notifications"
>
<i
class=
"gicon gicon-alert-notification-channel"
></i>
Notification channels
</a>
</li>
</ul>
</div>
</div>
</div>
<div
class=
"page-container page-body"
>
<div
class=
"page-action-bar"
>
<div
class=
"page-action-bar__spacer"
>
</div>
<a
href=
"alerting/notification/new"
class=
"btn btn-success"
>
<i
class=
"fa fa-plus"
></i>
New Channel
</a>
</div>
...
...
public/app/features/org/partials/profile.html
View file @
645f49ed
<navbar
model=
"ctrl.navModel"
></navbar>
<div
class=
"page-header-canvas"
>
<div
class=
"page-container"
>
<navbar
model=
"ctrl.navModel"
></navbar>
<div
class=
"page-container"
>
<div
class=
"page-header"
>
<page-h1
model=
"ctrl.navModel"
></page-h1>
</div>
<div
class=
"page-header"
>
<page-h1
model=
"ctrl.navModel"
></page-h1>
</div>
</div>
</div>
<div
class=
"page-container page-body"
>
<form
name=
"ctrl.userForm"
class=
"gf-form-group"
>
<h3
class=
"page-heading"
>
Information
</h3>
...
...
public/app/features/plugins/partials/ds_edit.html
View file @
645f49ed
...
...
@@ -3,9 +3,7 @@
<navbar
model=
"ctrl.navModel"
></navbar>
<div
class=
"page-header"
>
<page-h1
model=
"ctrl.navModel"
></page-h1>
<div
ng-if=
"ctrl.current.readOnly"
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.
</div>
<page-h1
model=
"ctrl.navModel"
></page-h1>
<div
class=
"page-header-tabs"
ng-show=
"ctrl.hasDashboards"
>
<ul
class=
"gf-tabs"
>
...
...
@@ -28,6 +26,13 @@
</div>
<div
class=
"page-container page-body"
>
<div
class=
"page-action-bar"
>
<div
ng-if=
"ctrl.current.readOnly"
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.
</div>
</div>
<div
ng-if=
"ctrl.tabIndex === 0"
>
<form
name=
"ctrl.editForm"
ng-if=
"ctrl.current"
>
<div
class=
"gf-form-group"
>
...
...
public/app/features/plugins/partials/ds_list.html
View file @
645f49ed
<navbar
model=
"ctrl.navModel"
></navbar>
<div
class=
"page-container"
>
<div
class=
"page-header"
>
<page-h1
model=
"ctrl.navModel"
></page-h1>
<div
class=
"page-header-canvas"
>
<div
class=
"page-container"
>
<navbar
model=
"ctrl.navModel"
></navbar>
<a
class=
"page-header__cta btn btn-success"
href=
"datasources/new"
>
Add data source
</a>
<div
class=
"page-header"
>
<page-h1
model=
"ctrl.navModel"
></page-h1>
</div>
</div>
</div>
<div
class=
"page-container page-body"
>
<div
class=
"page-action-bar"
>
<div
class=
"page-action-bar__spacer"
></div>
<a
class=
"page-header__cta btn btn-success"
href=
"datasources/new"
>
<i
class=
"fa fa-plus"
></i>
Add data source
</a>
</div>
<section
class=
"card-section"
layout-mode
>
<layout-selector></layout-selector>
<ol
class=
"card-list"
>
<li
class=
"card-item-wrapper"
ng-repeat=
"ds in ctrl.datasources"
>
<a
class=
"card-item"
href=
"datasources/edit/{{ds.id}}/"
>
...
...
@@ -43,4 +52,4 @@
<div
ng-if=
"ctrl.datasources.length === 0"
>
<em>
No data sources defined
</em>
</div>
</div>
\ No newline at end of file
</div>
public/app/features/plugins/partials/plugin_edit.html
View file @
645f49ed
<navbar
model=
"ctrl.navModel"
></navbar>
<div
class=
"page-header-canvas"
>
<div
class=
"page-container"
ng-init=
"ctrl.init()"
>
<navbar
model=
"ctrl.navModel"
></navbar>
<div
class=
"page-container"
ng-init=
"ctrl.init()"
>
<div
class=
"page-header"
>
<div
class=
"plugin-header"
>
<span
class=
"plugin-header-logo"
>
<img
ng-src=
"{{ctrl.model.info.logos.large}}"
>
</span>
<div
class=
"page-header"
>
<div
class=
"plugin-header"
>
<span
class=
"plugin-header-logo"
>
<img
ng-src=
"{{ctrl.model.info.logos.large}}"
>
</span>
<div
class=
"plugin-header-info-block"
>
<h1
class=
"plugin-header-name"
>
{{ctrl.model.name}}
</h1>
<div
class=
"plugin-header-author"
>
By {{ctrl.model.info.author.name}}
</div>
<div
class=
"plugin-header-stamps"
>
<span
class=
"plugin-header-stamps-type"
>
<i
class=
"{{ctrl.pluginIcon}}"
></i>
{{ctrl.model.type}}
</span>
<div
class=
"plugin-header-info-block"
>
<h1
class=
"plugin-header-name"
>
{{ctrl.model.name}}
</h1>
<div
class=
"plugin-header-author"
>
By {{ctrl.model.info.author.name}}
</div>
<div
class=
"plugin-header-stamps"
>
<span
class=
"plugin-header-stamps-type"
>
<i
class=
"{{ctrl.pluginIcon}}"
></i>
{{ctrl.model.type}}
</span>
</div>
</div>
</div>
</div>
<ul
class=
"gf-tabs"
>
<li
class=
"gf-tabs-item"
ng-repeat=
"tab in ctrl.tabs"
>
<a
class=
"gf-tabs-link"
ng-click=
"ctrl.tabIndex = $index"
ng-class=
"{active: ctrl.tabIndex === $index}"
>
{{::tab}}
</a>
</li>
</ul>
<ul
class=
"gf-tabs"
>
<li
class=
"gf-tabs-item"
ng-repeat=
"tab in ctrl.tabs"
>
<a
class=
"gf-tabs-link"
ng-click=
"ctrl.tabIndex = $index"
ng-class=
"{active: ctrl.tabIndex === $index}"
>
{{::tab}}
</a>
</li>
</ul>
</div>
</div>
</div>
<div
class=
"page-body page-body--with-sidebar"
>
<div
class=
"tab-content page-content-with-sidebar"
ng-if=
"ctrl.tabs[ctrl.tabIndex] === 'Readme'"
>
<div
ng-bind-html=
"ctrl.readmeHtml"
class=
"markdown-html"
>
</div>
<div
class=
"page-container page-body page-body--with-sidebar"
>
<div
class=
"tab-content page-content-with-sidebar"
ng-if=
"ctrl.tabs[ctrl.tabIndex] === 'Readme'"
>
<div
ng-bind-html=
"ctrl.readmeHtml"
class=
"markdown-html"
>
</div>
</div>
<div
class=
"tab-content page-content-with-sidebar"
ng-if=
"ctrl.tabs[ctrl.tabIndex] === 'Config'"
>
<div
ng-if=
"ctrl.model.id"
>
<plugin-component
type=
"app-config-ctrl"
></plugin-component>
<div
class=
"tab-content page-content-with-sidebar"
ng-if=
"ctrl.tabs[ctrl.tabIndex] === 'Config'"
>
<div
ng-if=
"ctrl.model.id"
>
<plugin-component
type=
"app-config-ctrl"
></plugin-component>
<div
class=
"gf-form-button-row"
>
<button
type=
"submit"
class=
"btn btn-success"
ng-click=
"ctrl.enable()"
ng-show=
"!ctrl.model.enabled"
>
Enable
</button>
<button
type=
"submit"
class=
"btn btn-success"
ng-click=
"ctrl.update()"
ng-show=
"ctrl.model.enabled"
>
Update
</button>
<button
type=
"submit"
class=
"btn btn-danger"
ng-click=
"ctrl.disable()"
ng-show=
"ctrl.model.enabled"
>
Disable
</button>
</div>
<div
class=
"gf-form-button-row"
>
<button
type=
"submit"
class=
"btn btn-success"
ng-click=
"ctrl.enable()"
ng-show=
"!ctrl.model.enabled"
>
Enable
</button>
<button
type=
"submit"
class=
"btn btn-success"
ng-click=
"ctrl.update()"
ng-show=
"ctrl.model.enabled"
>
Update
</button>
<button
type=
"submit"
class=
"btn btn-danger"
ng-click=
"ctrl.disable()"
ng-show=
"ctrl.model.enabled"
>
Disable
</button>
</div>
</div>
</div>
<div
class=
"tab-content page-content-with-sidebar"
ng-if=
"ctrl.tabs[ctrl.tabIndex] === 'Dashboards'"
>
<dashboard-import-list
plugin=
"ctrl.model"
></dashboard-import-list>
</div>
<aside
class=
"page-sidebar"
>
<section
class=
"page-sidebar-section"
>
<h4>
Version
</h4>
<span>
{{ctrl.model.info.version}}
</span>
<div
ng-show=
"ctrl.model.hasUpdate"
>
<a
ng-click=
"ctrl.updateAvailable()"
bs-tooltip=
"ctrl.model.latestVersion"
>
Update Available!
</a>
</div>
</section>
<section
class=
"page-sidebar-section"
ng-show=
"ctrl.model.type === 'app'"
>
<h5>
Includes
</h4>
<ul
class=
"ui-list plugin-info-list"
>
<li
ng-repeat=
"plug in ctrl.includes"
class=
"plugin-info-list-item"
>
<i
class=
"{{plug.icon}}"
></i>
{{plug.name}}
</li>
</ul>
</section>
<section
class=
"page-sidebar-section"
>
<h5>
Dependencies
</h4>
<ul
class=
"ui-list plugin-info-list"
>
<li
class=
"plugin-info-list-item"
>
<img
src=
"public/img/grafana_icon.svg"
></img>
Grafana {{ctrl.model.dependencies.grafanaVersion}}
</li>
<li
ng-repeat=
"plugDep in ctrl.model.dependencies.plugins"
class=
"plugin-info-list-item"
>
<i
class=
"{{plugDep.icon}}"
></i>
{{plugDep.name}} {{plugDep.version}}
</li>
</ul>
</section>
<section
class=
"page-sidebar-section"
>
<h5>
Links
</h4>
<ul
class=
"ui-list"
>
<li
ng-repeat=
"link in ctrl.model.info.links"
>
<a
href=
"{{link.url}}"
class=
"external-link"
target=
"_blank"
>
{{link.name}}
</a>
</li>
</ul>
</section>
</aside>
<div
class=
"tab-content page-content-with-sidebar"
ng-if=
"ctrl.tabs[ctrl.tabIndex] === 'Dashboards'"
>
<dashboard-import-list
plugin=
"ctrl.model"
></dashboard-import-list>
</div>
<aside
class=
"page-sidebar"
>
<section
class=
"page-sidebar-section"
>
<h4>
Version
</h4>
<span>
{{ctrl.model.info.version}}
</span>
<div
ng-show=
"ctrl.model.hasUpdate"
>
<a
ng-click=
"ctrl.updateAvailable()"
bs-tooltip=
"ctrl.model.latestVersion"
>
Update Available!
</a>
</div>
</section>
<section
class=
"page-sidebar-section"
ng-show=
"ctrl.model.type === 'app'"
>
<h5>
Includes
</h4>
<ul
class=
"ui-list plugin-info-list"
>
<li
ng-repeat=
"plug in ctrl.includes"
class=
"plugin-info-list-item"
>
<i
class=
"{{plug.icon}}"
></i>
{{plug.name}}
</li>
</ul>
</section>
<section
class=
"page-sidebar-section"
>
<h5>
Dependencies
</h4>
<ul
class=
"ui-list plugin-info-list"
>
<li
class=
"plugin-info-list-item"
>
<img
src=
"public/img/grafana_icon.svg"
></img>
Grafana {{ctrl.model.dependencies.grafanaVersion}}
</li>
<li
ng-repeat=
"plugDep in ctrl.model.dependencies.plugins"
class=
"plugin-info-list-item"
>
<i
class=
"{{plugDep.icon}}"
></i>
{{plugDep.name}} {{plugDep.version}}
</li>
</ul>
</section>
<section
class=
"page-sidebar-section"
>
<h5>
Links
</h4>
<ul
class=
"ui-list"
>
<li
ng-repeat=
"link in ctrl.model.info.links"
>
<a
href=
"{{link.url}}"
class=
"external-link"
target=
"_blank"
>
{{link.name}}
</a>
</li>
</ul>
</section>
</aside>
</div>
public/app/features/plugins/partials/plugin_list.html
View file @
645f49ed
<navbar
model=
"ctrl.navModel"
></navbar>
<div
class=
"page-container"
>
<div
class=
"page-header"
>
<h1>
<i
class=
"icon-gf icon-gf-apps"
></i>
Plugins
<span
class=
"muted small"
>
(currently installed)
</span>
</h1>
<div
class=
"page-header-canvas"
>
<div
class=
"page-container"
>
<navbar
model=
"ctrl.navModel"
></navbar>
<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}"
>
Panels
</a>
</li>
<li
class=
"gf-tabs-item"
>
<a
class=
"gf-tabs-link"
href=
"plugins?type=datasource"
ng-class=
"{active: ctrl.tabIndex === 1}"
>
Data sources
</a>
</li>
<li
class=
"gf-tabs-item"
>
<a
class=
"gf-tabs-link"
href=
"plugins?type=app"
ng-class=
"{active: ctrl.tabIndex === 2}"
>
Apps
</a>
</li>
</ul>
<div
class=
"page-header"
>
<page-h1
model=
"ctrl.navModel"
></page-h1>
<a
class=
"get-more-plugins-link"
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
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>
<section
class=
"card-section"
layout-mode
>
<layout-selector></layout-selector>
<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
class=
"page-container page-body"
>
<section
class=
"card-section"
layout-mode
>
<layout-selector></layout-selector>
<ol
class=
"card-list"
>
<li
class=
"card-item-wrapper"
ng-repeat=
"plugin in ctrl.plugins"
>
<a
class=
"card-item"
href=
"plugins/{{plugin.id}}/edit"
>
<div
class=
"card-item-header"
>
<div
class=
"card-item-type"
>
<i
class=
"icon-gf icon-gf-{{plugin.type}}"
></i>
{{plugin.type}}
</div>
<div
class=
"card-item-notice"
ng-show=
"plugin.hasUpdate"
>
<span
bs-tooltip=
"plugin.latestVersion"
>
Update available!
</span>
</div>
</div>
<div
class=
"card-item-body"
>
<figure
class=
"card-item-figure"
>
<img
ng-src=
"{{plugin.info.logos.small}}"
>
</figure>
<div
class=
"card-item-details"
>
<div
class=
"card-item-name"
>
{{plugin.name}}
</div>
<div
class=
"card-item-sub-name"
>
By {{plugin.info.author.name}}
</div>
</div>
</div>
</a>
</li>
</ol>
</section>
<ol
class=
"card-list"
>
<li
class=
"card-item-wrapper"
ng-repeat=
"plugin in ctrl.plugins"
>
<a
class=
"card-item"
href=
"plugins/{{plugin.id}}/edit"
>
<div
class=
"card-item-header"
>
<div
class=
"card-item-type"
>
<i
class=
"icon-gf icon-gf-{{plugin.type}}"
></i>
{{plugin.type}}
</div>
<div
class=
"card-item-notice"
ng-show=
"plugin.hasUpdate"
>
<span
bs-tooltip=
"plugin.latestVersion"
>
Update available!
</span>
</div>
</div>
<div
class=
"card-item-body"
>
<figure
class=
"card-item-figure"
>
<img
ng-src=
"{{plugin.info.logos.small}}"
>
</figure>
<div
class=
"card-item-details"
>
<div
class=
"card-item-name"
>
{{plugin.name}}
</div>
<div
class=
"card-item-sub-name"
>
By {{plugin.info.author.name}}
</div>
</div>
</div>
</a>
</li>
</ol>
</section>
</div>
public/sass/_grafana.scss
View file @
645f49ed
...
...
@@ -85,6 +85,7 @@
@import
"components/code_editor"
;
@import
"components/dashboard_grid"
;
@import
"components/dashboard_list"
;
@import
"components/page_header"
;
// PAGES
...
...
public/sass/_variables.scss
View file @
645f49ed
...
...
@@ -227,5 +227,5 @@ $dashboard-padding: $panel-margin * 2;
$panel-padding
:
0px
10px
5px
10px
;
// tabs
$tabs-padding
:
8px
15px
11
px
;
$tabs-padding
:
10px
15px
10
px
;
public/sass/base/_icons.scss
View file @
645f49ed
...
...
@@ -43,5 +43,9 @@
background-image
:
url('../img/icons_
#{
$theme-name
}
_theme/icon_add_panel.svg')
;
}
.gicon-alert-notification-channel
{
background-image
:
url('../img/icons_
#{
$theme-name
}
_theme/icon_notification_channels.svg')
;
}
public/sass/components/_footer.scss
View file @
645f49ed
...
...
@@ -5,7 +5,7 @@
.footer
{
color
:
$footer-link-color
;
padding
:
5rem
0
1rem
0
;
font-size
:
$font-size-
xs
;
font-size
:
$font-size-
sm
;
width
:
98%
;
/* was causing horiz scrollbars - need to examine */
a
{
...
...
public/sass/components/_page_header.scss
0 → 100644
View file @
645f49ed
.page-header-canvas
{
background
:
linear-gradient
(
90deg
,
#292a2d
,
black
);
box-shadow
:
inset
0px
-4px
14px
#2d2d2d
;
border-bottom
:
1px
solid
$dark-4
;
}
.page-header
{
padding
:
2rem
0
0
0
;
.btn
{
float
:
right
;
margin-left
:
1rem
;
// better align icons
.fa
{
position
:
relative
;
top
:
1px
;
}
}
}
.page-header__title
{
font-size
:
$font-size-h2
;
flex-grow
:
1
;
margin-bottom
:
2
.5rem
;
line-height
:
50px
;
}
.page-header__img
{
border-radius
:
50%
;
margin-right
:
0
.5rem
;
position
:
relative
;
top
:
-3px
;
width
:
50px
;
height
:
50px
;
}
.page-header__icon
{
font-size
:
150%
;
margin-right
:
0
.5rem
;
width
:
50px
;
height
:
50px
;
position
:
relative
;
&
.fa
{
top
:
3px
;
}
&
.icon-gf
{
top
:
3px
;
}
}
.page-heading
{
font-size
:
1
.25rem
;
margin-top
:
0
;
margin-bottom
:
$spacer
*
0
.7
;
}
public/sass/components/_tabs.scss
View file @
645f49ed
.gf-tabs
{
@include
clearfix
();
float
:
left
;
position
:
relative
;
top
:
1px
;
}
.gf-tabs-item
{
...
...
@@ -18,7 +20,7 @@
border-radius
:
3px
3px
0
0
;
i
{
padding
-right
:
5px
;
margin
-right
:
5px
;
}
&
:hover
,
...
...
@@ -32,8 +34,6 @@
border-color
:
$orange
$dark-4
transparent
;
background
:
$page-bg
;
color
:
$link-color
;
position
:
relative
;
top
:
1px
;
}
}
public/sass/layout/_page.scss
View file @
645f49ed
...
...
@@ -42,6 +42,17 @@
}
}
.page-action-bar
{
margin-bottom
:
$spacer
*
2
;
display
:
flex
;
align-items
:
flex-start
;
}
.page-action-bar__spacer
{
width
:
$spacer
*
2
;
flex-grow
:
1
;
}
.page-content-with-sidebar
{
width
:
calc
(
100%
-
#{
$page-sidebar-width
+
$page-sidebar-margin
}
);
// sidebar width + margin
}
...
...
@@ -53,68 +64,6 @@
}
}
.page-header-canvas
{
background
:
linear-gradient
(
90deg
,
#292a2d
,
black
);
box-shadow
:
inset
0px
-4px
14px
#2d2d2d
;
bottom-border
:
1px
solid
$dark-4
;
}
.page-header
{
padding
:
2rem
0
0
0
;
.btn
{
float
:
right
;
margin-left
:
1rem
;
// better align icons
.fa
{
position
:
relative
;
top
:
1px
;
}
}
}
.page-header__title
{
font-size
:
$font-size-h2
;
flex-grow
:
1
;
display
:
inline-block
;
margin-bottom
:
2
.5rem
;
}
.page-header__img
{
width
:
30px
;
height
:
30px
;
border-radius
:
50%
;
margin-right
:
1rem
;
position
:
relative
;
top
:
-3px
;
}
.page-header__icon
{
font-size
:
150%
;
margin-right
:
1rem
;
}
.page-heading
{
font-size
:
1
.25rem
;
margin-top
:
0
;
margin-bottom
:
$spacer
*
0
.7
;
}
.admin-page
{
max-width
:
800px
;
margin-left
:
10px
;
h2
{
margin-left
:
15px
;
margin-bottom
:
0px
;
font-size
:
$font-size-lg
;
color
:
$text-color
;
i
{
padding-right
:
6px
;
}
}
}
.page-sidebar
{
color
:
$text-color-weak
;
h4
{
...
...
@@ -207,13 +156,12 @@
// 5px - for rounded arrows and
// 50px - to prevent hover glitches on the border created using shadows*/
border-radius
:
0
5px
0
50px
;
}
border-radius
:
0
5px
0
50px
;
}
// we dont need an arrow after the last link
&
:last-child:after
{
content
:
none
;
}
// we dont need an arrow after the last link
&
:last-child:after
{
content
:
none
;
}
}
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment