Skip to content

N
nexpie-grafana-theme
Commit 78ea1dc8 by Torkel Ödegaard
Options

ux: new page header look wip

parent 8b879643
Showing with 173 additions and 118 deletions
public/app/features/plugins/partials/ds_edit.html
<navbar model="ctrl.navModel"></navbar> <div class="page-header container">
<div class="page-header-inner">
<div class="page-breadcrumb">
<div class="page-breadcrumb__item">
<a class="pointer">
Configuration <i class="fa fa-caret-down"></i>
</a>
</div>
<!-- <div class="page&#45;breadcrumb__item">/</div> -->
<div class="page-breadcrumb__item">
<a class="pointer">
Data sources
</a>
</div>
</div>
<div class="page-container"> <h1>
<i class="icon-gf icon-gf-datasources"></i>
<span ng-show="ctrl.isNew">Add data source</span>
<span ng-hide="ctrl.isNew">Settings</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>
<div class="page-header"> <div class="page-header-tabs" ng-show="ctrl.hasDashboards">
<h1 ng-show="ctrl.isNew">Add data source</h1> <ul class="gf-tabs">
<h1 ng-hide="ctrl.isNew">Edit data source</h1> <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>
<div class="page-header-tabs" ng-show="ctrl.hasDashboards"> <div class="page-container">
<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"> <form name="ctrl.editForm" ng-if="ctrl.current">
<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">
<span class="gf-form-label width-7">Name</span> <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> <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"> <info-popover offset="0px -135px" mode="right-absolute">
The name is used when you select the data source in panels. The name is used when you select the data source in panels.
The <em>Default</em> data source is preselected in new The <em>Default</em> data source is preselected in new
panels. panels.
</info-popover> </info-popover>
</div> </div>
<gf-form-switch class="gf-form" label="Default" checked="ctrl.current.isDefault" switch-class="max-width-6"></gf-form-switch> <gf-form-switch class="gf-form" label="Default" checked="ctrl.current.isDefault" switch-class="max-width-6"></gf-form-switch>
</div> </div>
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label width-7">Type</span> <span class="gf-form-label width-7">Type</span>
<div class="gf-form-select-wrapper max-width-23"> <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> <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>
</div> </div>
<div class="alert alert-info gf-form-group" ng-if="ctrl.datasourceMeta.state === 'alpha'"> <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 This plugin is marked as being in alpha state, which means it is in early development phase and
updates will include breaking changes. updates will include breaking changes.
</div> </div>
<rebuild-on-change property="ctrl.datasourceMeta.id"> <rebuild-on-change property="ctrl.datasourceMeta.id">
<plugin-component type="datasource-config-ctrl"> <plugin-component type="datasource-config-ctrl">
</plugin-component> </plugin-component>
</rebuild-on-change> </rebuild-on-change>
<div ng-if="ctrl.testing" class="gf-form-group"> <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> <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-{{ctrl.testing.status}} alert">
<div class="alert-title">{{ctrl.testing.title}}</div> <div class="alert-title">{{ctrl.testing.title}}</div>
<div ng-bind='ctrl.testing.message'></div> <div ng-bind='ctrl.testing.message'></div>
</div> </div>
</div> </div>
<div class="gf-form-button-row"> <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()">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-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()"> <button type="submit" class="btn btn-danger" ng-show="!ctrl.isNew" ng-click="ctrl.delete()">
Delete Delete
</button> </button>
<a class="btn btn-link" href="datasources">Cancel</a> <a class="btn btn-link" href="datasources">Cancel</a>
</div> </div>
</form> </form>
</div> </div>
<div ng-if="ctrl.tabIndex === 1" class="tab-content"> <div ng-if="ctrl.tabIndex === 1" class="tab-content">
<dashboard-import-list plugin="ctrl.datasourceMeta" datasource="ctrl.current"></dashboard-import-list> <dashboard-import-list plugin="ctrl.datasourceMeta" datasource="ctrl.current"></dashboard-import-list>
</div> </div>
</div> </div>
public/app/features/plugins/partials/ds_list.html
<div class="page-container"> <div class="page-header container">
<div class="page-header"> <div class="page-header-inner">
<h1>Data Sources</h1> <div class="page-breadcrumb">
<a class="btn btn-success" href="datasources/new"> <div class="page-breadcrumb__item">
<i class="fa fa-plus"></i> <a class="pointer">
Add data source Configuration <i class="fa fa-caret-down"></i>
</a> </a>
</div> </div>
</div>
<section class="card-section" layout-mode> <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>
</div>
<div class="page-container container">
<section class="card-section" layout-mode>
<layout-selector></layout-selector> <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">
<a class="card-item" href="datasources/edit/{{ds.id}}/"> <a class="card-item" href="datasources/edit/{{ds.id}}/">
<div class="card-item-header"> <div class="card-item-header">
<div class="card-item-type"> <div class="card-item-type">
{{ds.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}}"> <img ng-src="{{ds.typeLogoUrl}}">
</figure> </figure>
<div class="card-item-details"> <div class="card-item-details">
<div class="card-item-name"> <div class="card-item-name">
{{ds.name}} {{ds.name}}
<span ng-if="ds.isDefault"> <span ng-if="ds.isDefault">
<span class="btn btn-secondary btn-mini">default</span> <span class="btn btn-secondary btn-mini">default</span>
</span> </span>
</div> </div>
<div class="card-item-sub-name"> <div class="card-item-sub-name">
{{ds.url}} {{ds.url}}
</div> </div>
</div> </div>
</div> </div>
</a> </a>
</li> </li>
</ol> </ol>
</section> </section>
<div ng-if="ctrl.datasources.length === 0"> <div ng-if="ctrl.datasources.length === 0">
<em>No data sources defined</em> <em>No data sources defined</em>
</div> </div>
</div> </div>
public/sass/_variables.dark.scss
...@@ -48,7 +48,7 @@ $critical: #ed2e18; ...@@ -48,7 +48,7 @@ $critical: #ed2e18;
// Scaffolding // Scaffolding
// ------------------------- // -------------------------
$body-bg: rgb(20,20,20); $body-bg: rgb(24,20,20);
$page-bg: $dark-2; $page-bg: $dark-2;
$body-color: $gray-4; $body-color: $gray-4;
$text-color: $gray-4; $text-color: $gray-4;
......
public/sass/layout/_page.scss
...@@ -7,15 +7,20 @@ ...@@ -7,15 +7,20 @@
.main-view { .main-view {
flex-grow: 1; flex-grow: 1;
background: linear-gradient(180deg,#282020 0,#1e0f05);
} }
.page-container { .page-container {
@extend .container; @extend .container;
background-color: $page-bg;
padding: ($spacer * 2) ($spacer * 4); padding: $spacer;
min-height: calc(100% - 54px); min-height: calc(100% - 54px);
padding-bottom: $spacer * 5; padding-bottom: $spacer * 5;
background-image: linear-gradient(60deg, transparent 70%, darken($page-bg, 4%) 98%) }
.page-header-inner {
@include brand-bottom-border();
@include clearfix();
} }
.page-body { .page-body {
...@@ -38,21 +43,20 @@ ...@@ -38,21 +43,20 @@
} }
.page-header { .page-header {
padding: $spacer 0 0 0; padding: 2rem 0 1rem 0;
margin-bottom: 2rem;
@include brand-bottom-border();
@include clearfix();
h1 { h1 {
font-size: $font-size-h2;
flex-grow: 1; flex-grow: 1;
display: inline-block; display: inline-block;
margin-bottom: $spacer*1.5; margin-bottom: $spacer*1.5;
} }
button, a { }
float: right;
margin-left: $spacer; .page-header__cta {
} float: right;
margin-left: $spacer;
} }
.page-heading { .page-heading {
...@@ -90,3 +94,16 @@ ...@@ -90,3 +94,16 @@
.page-sidebar-section { .page-sidebar-section {
margin-bottom: $spacer*2; margin-bottom: $spacer*2;
} }
.page-breadcrumb {
display: flex;
margin-bottom: $spacer;
}
.page-breadcrumb__item {
a {
color: $text-color-weak;
}
padding-right: $spacer;
}
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