Skip to content

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

ux: testing fixed sidemenu and breadcrumbs

parent 097fa743
Showing with 207 additions and 193 deletions
public/app/core/components/navbar/navbar.html
<div class="page-nav container">
<div class="page-nav">
<div class="container">
<div class="page-breadcrumb">
<div class="page-breadcrumb__item dropdown" ng-repeat="item in ctrl.model.items">
<a class="pointer" ng-href="{{::item.url}}" data-toggle="dropdown" ng-if="::item.items">
{{::item.title}}
<i class="page-breadcrumb__caret fa fa-caret-down"></i>
</a>
<div class="page-breadcrumb">
<div class="page-breadcrumb__item dropdown" ng-repeat="item in ctrl.model.items">
<a class="pointer" ng-href="{{::item.url}}" data-toggle="dropdown" ng-if="::item.items">
{{::item.title}}
<i class="page-breadcrumb__caret fa fa-caret-down"></i>
</a>
<a class="pointer" ng-href="{{::item.url}}" ng-if="::!item.items">
{{::item.title}}
</a>
<a class="pointer" ng-href="{{::item.url}}" ng-if="::!item.items">
{{::item.title}}
</a>
<ul class="dropdown-menu dropdown-menu--navbar">
<li ng-repeat="subItem in ::item.items">
<a class="pointer" ng-href="{{::subItem.url}}" ng-click="ctrl.navItemClicked(subItem, $event)">
{{::subItem.title}}
</a>
</li>
</ul>
<ul class="dropdown-menu dropdown-menu--navbar">
<li ng-repeat="subItem in ::item.items">
<a class="pointer" ng-href="{{::subItem.url}}" ng-click="ctrl.navItemClicked(subItem, $event)">
{{::subItem.title}}
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<dashboard-search></dashboard-search>
public/app/features/plugins/partials/ds_edit.html
<navbar model="ctrl.navModel"></navbar>
<div class="page-container">
<div class="page-header">
<h1>
<i class="icon-gf icon-gf-datasources"></i>
<span ng-show="ctrl.isNew">New data source</span>
<span ng-hide="ctrl.isNew">{{ctrl.current.name}}</span>
</h1>
<div class="scroll-canvas">
<div class="page-container">
<div class="page-header">
<h1>
<i class="icon-gf icon-gf-datasources"></i>
<span ng-show="ctrl.isNew">New data source</span>
<span ng-hide="ctrl.isNew">{{ctrl.current.name}}</span>
</h1>
<a class="page-header__cta btn btn-success" href="datasources/new" ng-show="ctrl.isNew">
<i class="fa fa-plus"></i>
Add data source
</a>
<a class="page-header__cta btn btn-success" href="datasources/new" ng-show="ctrl.isNew">
<i class="fa fa-plus"></i>
Add data source
</a>
<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}">
Config
</a>
</li>
<li class="gf-tabs-item">
<a class="gf-tabs-link" ng-click="ctrl.tabIndex = 1" ng-class="{active: ctrl.tabIndex === 1}">
Dashboards
</a>
</li>
</ul>
</div>
</div>
<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}">
Config
</a>
</li>
<li class="gf-tabs-item">
<a class="gf-tabs-link" ng-click="ctrl.tabIndex = 1" ng-class="{active: ctrl.tabIndex === 1}">
Dashboards
</a>
</li>
</ul>
</div>
</div>
<div ng-if="ctrl.tabIndex === 0" class="tab-content">
<div ng-if="ctrl.tabIndex === 0" class="tab-content">
<form name="ctrl.editForm" ng-if="ctrl.current">
<div class="gf-form-group">
<div class="gf-form-inline">
<div class="gf-form max-width-30">
<span class="gf-form-label width-7">Name</span>
<input class="gf-form-input max-width-23" type="text" ng-model="ctrl.current.name" placeholder="name" required>
<info-popover offset="0px -135px" mode="right-absolute">
The name is used when you select the data source in panels.
The <em>Default</em> data source is preselected in new
panels.
</info-popover>
</div>
<gf-form-switch class="gf-form" label="Default" checked="ctrl.current.isDefault" switch-class="max-width-6"></gf-form-switch>
</div>
<form name="ctrl.editForm" ng-if="ctrl.current">
<div class="gf-form-group">
<div class="gf-form-inline">
<div class="gf-form max-width-30">
<span class="gf-form-label width-7">Name</span>
<input class="gf-form-input max-width-23" type="text" ng-model="ctrl.current.name" placeholder="name" required>
<info-popover offset="0px -135px" mode="right-absolute">
The name is used when you select the data source in panels.
The <em>Default</em> data source is preselected in new
panels.
</info-popover>
</div>
<gf-form-switch class="gf-form" label="Default" checked="ctrl.current.isDefault" switch-class="max-width-6"></gf-form-switch>
</div>
<div class="gf-form">
<span class="gf-form-label width-7">Type</span>
<div class="gf-form-select-wrapper max-width-23">
<select class="gf-form-input" ng-model="ctrl.current.type" ng-options="v.id as v.name for v in ctrl.types" ng-change="ctrl.typeChanged()"></select>
</div>
</div>
</div>
<div class="gf-form">
<span class="gf-form-label width-7">Type</span>
<div class="gf-form-select-wrapper max-width-23">
<select class="gf-form-input" ng-model="ctrl.current.type" ng-options="v.id as v.name for v in ctrl.types" ng-change="ctrl.typeChanged()"></select>
</div>
</div>
</div>
<div class="alert alert-info gf-form-group" ng-if="ctrl.datasourceMeta.state === 'alpha'">
This plugin is marked as being in alpha state, which means it is in early development phase and
updates will include breaking changes.
</div>
<div class="alert alert-info gf-form-group" ng-if="ctrl.datasourceMeta.state === 'alpha'">
This plugin is marked as being in alpha state, which means it is in early development phase and
updates will include breaking changes.
</div>
<rebuild-on-change property="ctrl.datasourceMeta.id">
<plugin-component type="datasource-config-ctrl">
</plugin-component>
</rebuild-on-change>
<rebuild-on-change property="ctrl.datasourceMeta.id">
<plugin-component type="datasource-config-ctrl">
</plugin-component>
</rebuild-on-change>
<div ng-if="ctrl.testing" class="gf-form-group">
<h5 ng-show="!ctrl.testing.done">Testing.... <i class="fa fa-spiner fa-spin"></i></h5>
<div class="alert-{{ctrl.testing.status}} alert">
<div class="alert-title">{{ctrl.testing.title}}</div>
<div ng-bind='ctrl.testing.message'></div>
</div>
</div>
<div ng-if="ctrl.testing" class="gf-form-group">
<h5 ng-show="!ctrl.testing.done">Testing.... <i class="fa fa-spiner fa-spin"></i></h5>
<div class="alert-{{ctrl.testing.status}} alert">
<div class="alert-title">{{ctrl.testing.title}}</div>
<div ng-bind='ctrl.testing.message'></div>
</div>
</div>
<div class="gf-form-button-row">
<button type="submit" class="btn btn-success" ng-show="ctrl.isNew" ng-click="ctrl.saveChanges()">Add</button>
<button type="submit" class="btn btn-success" ng-show="!ctrl.isNew" ng-click="ctrl.saveChanges()">Save &amp; Test</button>
<button type="submit" class="btn btn-danger" ng-show="!ctrl.isNew" ng-click="ctrl.delete()">
Delete
</button>
<a class="btn btn-link" href="datasources">Cancel</a>
</div>
<div class="gf-form-button-row">
<button type="submit" class="btn btn-success" ng-show="ctrl.isNew" ng-click="ctrl.saveChanges()">Add</button>
<button type="submit" class="btn btn-success" ng-show="!ctrl.isNew" ng-click="ctrl.saveChanges()">Save &amp; Test</button>
<button type="submit" class="btn btn-danger" ng-show="!ctrl.isNew" ng-click="ctrl.delete()">
Delete
</button>
<a class="btn btn-link" href="datasources">Cancel</a>
</div>
</form>
</div>
</form>
</div>
<div ng-if="ctrl.tabIndex === 1" class="tab-content">
<dashboard-import-list plugin="ctrl.datasourceMeta" datasource="ctrl.current"></dashboard-import-list>
</div>
<div ng-if="ctrl.tabIndex === 1" class="tab-content">
<dashboard-import-list plugin="ctrl.datasourceMeta" datasource="ctrl.current"></dashboard-import-list>
</div>
</div>
</div>
public/app/features/plugins/partials/ds_list.html
<navbar model="ctrl.navModel"></navbar>
<div class="page-container">
<div class="page-header">
<h1>
<i class="icon-gf icon-gf-datasources"></i>
<span>Data Sources</span>
</h1>
<div class="scroll-canvas">
<div class="page-container">
<div class="page-header">
<h1>
<i class="icon-gf icon-gf-datasources"></i>
<span>Data Sources</span>
</h1>
<a class="page-header__cta btn btn-success" href="datasources/new">
<i class="fa fa-plus"></i>
Add data source
</a>
</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>
<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}}/">
<div class="card-item-header">
<div class="card-item-type">
{{ds.type}}
</div>
</div>
<div class="card-item-body">
<figure class="card-item-figure">
<img ng-src="{{ds.typeLogoUrl}}">
</figure>
<div class="card-item-details">
<div class="card-item-name">
{{ds.name}}
<span ng-if="ds.isDefault">
<span class="btn btn-secondary btn-mini">default</span>
</span>
</div>
<div class="card-item-sub-name">
{{ds.url}}
</div>
</div>
</div>
</a>
</li>
</ol>
</section>
<ol class="card-list" >
<li class="card-item-wrapper" ng-repeat="ds in ctrl.datasources">
<a class="card-item" href="datasources/edit/{{ds.id}}/">
<div class="card-item-header">
<div class="card-item-type">
{{ds.type}}
</div>
</div>
<div class="card-item-body">
<figure class="card-item-figure">
<img ng-src="{{ds.typeLogoUrl}}">
</figure>
<div class="card-item-details">
<div class="card-item-name">
{{ds.name}}
<span ng-if="ds.isDefault">
<span class="btn btn-secondary btn-mini">default</span>
</span>
</div>
<div class="card-item-sub-name">
{{ds.url}}
</div>
</div>
</div>
</a>
</li>
</ol>
</section>
<div ng-if="ctrl.datasources.length === 0">
<em>No data sources defined</em>
</div>
<div ng-if="ctrl.datasources.length === 0">
<em>No data sources defined</em>
</div>
</div>
</div>
public/sass/_variables.dark.scss
......@@ -162,7 +162,7 @@ $btn-drag-image: '../img/grab_dark.svg';
// Forms
// -------------------------
$input-bg: $dark-4;
$input-bg: $black;
$input-bg-disabled: $dark-3;
$input-color: $gray-4;
......
public/sass/_variables.scss
......@@ -65,7 +65,7 @@ $container-max-widths: (
sm: 576px,
md: 720px,
lg: 940px,
xl: 1140px
xl: 1080px
) !default;
// Grid columns
......
public/sass/base/_reboot.scss
......@@ -79,6 +79,8 @@ body {
// By default, `<body>` has no `background-color` so we set one as a best practice.
background-color: $body-bg;
height: 100%;
width: 100%;
position: absolute;
}
// Suppress the focus outline on elements that cannot be accessed via keyboard.
......
public/sass/components/_gf-form.scss
......@@ -53,6 +53,7 @@ $gf-form-margin: 0.25rem;
padding: $input-padding-y $input-padding-x;
margin-right: $gf-form-margin;
flex-shrink: 0;
font-weight: $font-weight-semi-bold;
background-color: $input-label-bg;
display: block;
......
public/sass/components/_navbar.scss
......@@ -57,9 +57,7 @@
.navbar-brand-btn {
display: block;
position: relative;
float: left;
margin: 0;
margin-bottom: 3rem;
background-color: $side-menu-bg;
padding: 0.4rem 1.0rem 0.4rem 1rem;
min-height: $navbarHeight;
......@@ -68,10 +66,6 @@
font-size: 70%;
}
.fa-chevron-left{
display: none;
}
&:hover {
background: $navbarButtonBackgroundHighlight;
}
......
public/sass/layout/_page.scss
.grafana-app {
height: 100%;
display: flex;
align-items: stretch;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.main-view {
position: relative;
flex-grow: 1;
background: linear-gradient(180deg,#282020 0,#1e0f05);
background: inear-gradient(180deg, #1b1d25 0, #210d0d);
}
.page-container {
@extend .container;
padding: $spacer $spacer $spacer $spacer*3;
}
padding: $spacer;
min-height: calc(100% - 54px);
padding-bottom: $spacer * 5;
.scroll-canvas {
position: absolute;
width: 100%;
height: calc(100% - 54px);
overflow: scroll;
}
.page-header-inner {
......@@ -96,15 +104,20 @@
margin-bottom: $spacer*2;
}
$breadcrumb-hover-hl: #111;
$page-nav-bg: black;
// .page-nav {
// background: $page-nav-bg;
// }
.page-breadcrumb {
display: flex;
margin-bottom: $spacer;
padding: 0 $spacer;
}
$breadcrumb-hover-hl: #111;
.page-breadcrumb__item {
background: black;
background: $page-nav-bg;
> a {
color: $text-color-weak;
......@@ -124,7 +137,7 @@ $breadcrumb-hover-hl: #111;
border-right-width: 0;
border-left-width: 41px;
z-index: 2;
border-left-color: black;
border-left-color: $page-nav-bg;
}
}
......
public/views/index.html
......@@ -40,41 +40,41 @@
<div class="main-view">
<div ng-view></div>
<footer class="footer">
<div class="row text-center">
<ul>
<li>
<a href="http://docs.grafana.org" target="_blank">
<i class="fa fa-file-code-o"></i>
Docs
</a>
</li>
<li>
<a href="https://grafana.com/services/support" target="_blank">
<i class="fa fa-support"></i>
Support Plans
</a>
</li>
<li>
<a href="https://community.grafana.com/" target="_blank">
<i class="fa fa-comments-o"></i>
Community
</a>
</li>
<li>
<a href="https://grafana.com" target="_blank">Grafana</a>
<span>v[[.BuildVersion]] (commit: [[.BuildCommit]])</span>
</li>
[[if .NewGrafanaVersionExists]]
<li>
<a href="https://grafana.com/get" target="_blank" bs-tooltip="'[[.NewGrafanaVersion]]'">
New version available!
</a>
</li>
[[end]]
</ul>
</div>
</footer>
<!-- <footer class="footer"> -->
<!-- <div class="row text&#45;center"> -->
<!-- <ul> -->
<!-- <li> -->
<!-- <a href="http://docs.grafana.org" target="_blank"> -->
<!-- <i class="fa fa&#45;file&#45;code&#45;o"></i> -->
<!-- Docs -->
<!-- </a> -->
<!-- </li> -->
<!-- <li> -->
<!-- <a href="https://grafana.com/services/support" target="_blank"> -->
<!-- <i class="fa fa&#45;support"></i> -->
<!-- Support Plans -->
<!-- </a> -->
<!-- </li> -->
<!-- <li> -->
<!-- <a href="https://community.grafana.com/" target="_blank"> -->
<!-- <i class="fa fa&#45;comments&#45;o"></i> -->
<!-- Community -->
<!-- </a> -->
<!-- </li> -->
<!-- <li> -->
<!-- <a href="https://grafana.com" target="_blank">Grafana</a> -->
<!-- <span>v[[.BuildVersion]] (commit: [[.BuildCommit]])</span> -->
<!-- </li> -->
<!-- [[if .NewGrafanaVersionExists]] -->
<!-- <li> -->
<!-- <a href="https://grafana.com/get" target="_blank" bs&#45;tooltip="'[[.NewGrafanaVersion]]'"> -->
<!-- New version available! -->
<!-- </a> -->
<!-- </li> -->
<!-- [[end]] -->
<!-- </ul> -->
<!-- </div> -->
<!-- </footer> -->
</div>
</grafana-app>
......
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