Skip to content

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

ux: add new panel and dash nav improvements

parent 12625784
Showing with 95 additions and 133 deletions
public/app/core/components/PageHeader.tsx
...@@ -6,27 +6,6 @@ export interface IProps { ...@@ -6,27 +6,6 @@ export interface IProps {
model: NavModel; model: NavModel;
} }
// function BreadcrumbItem(item: NavModelItem) {
// return (
// <a className="breadcrumb-item" href={item.url} key={item.id}>
// {item.text}
// </a>
// );
// }
//
// function Breadcrumb(model: NavModel) {
// return (
// <div className="page-nav">
// <div className="page-breadcrumbs">
// <a className="breadcrumb-item active" href="/">
// <i className="fa fa-home" />
// </a>
// {model.breadcrumbs.map(BreadcrumbItem)}
// </div>
// </div>
// );
// }
function TabItem(tab: NavModelItem) { function TabItem(tab: NavModelItem) {
if (tab.hideFromTabs) { if (tab.hideFromTabs) {
return (null); return (null);
...@@ -84,7 +63,6 @@ export default class PageHeader extends React.Component<IProps, any> { ...@@ -84,7 +63,6 @@ export default class PageHeader extends React.Component<IProps, any> {
<div className="page-container"> <div className="page-container">
<div className="page-header"> <div className="page-header">
{this.renderHeaderTitle(this.props.model.main)} {this.renderHeaderTitle(this.props.model.main)}
{this.props.model.main.children && <Tabs main={this.props.model.main} />} {this.props.model.main.children && <Tabs main={this.props.model.main} />}
</div> </div>
</div> </div>
......
public/app/core/routes/dashboard_loaders.ts
...@@ -36,12 +36,11 @@ export class NewDashboardCtrl { ...@@ -36,12 +36,11 @@ export class NewDashboardCtrl {
meta: { canStar: false, canShare: false, isNew: true }, meta: { canStar: false, canShare: false, isNew: true },
dashboard: { dashboard: {
title: "New dashboard", title: "New dashboard",
rows: [ panels: [
{ {
title: 'Dashboard Row', type: 'add-panel',
height: '350px', gridPos: {x: 0, y: 0, w: 12, h: 9},
panels: [], title: 'Panel Title',
isNew: true,
} }
] ]
}, },
......
public/app/features/dashboard/dashgrid/AddPanelPanel.tsx
...@@ -72,8 +72,18 @@ export class AddPanelPanel extends React.Component<AddPanelPanelProps, AddPanelP ...@@ -72,8 +72,18 @@ export class AddPanelPanel extends React.Component<AddPanelPanelProps, AddPanelP
render() { render() {
return ( return (
<div className="panel-container"> <div className="panel-container">
<div className="add-panel">{this.state.panelPlugins.map(this.renderPanelItem.bind(this))}</div> <div className="add-panel">
<div className="add-panel__header">
<i className="gicon gicon-add-panel"></i>
<span className="add-panel__title">New Panel</span>
<span className="add-panel__sub-title">Select a visualization</span>
</div>
<div className="add-panel__items">
{this.state.panelPlugins.map(this.renderPanelItem.bind(this))}
</div>
</div>
</div> </div>
); );
} }
} }
public/app/features/dashboard/dashnav/dashnav.html
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
<div class="navbar__spacer"></div> <div class="navbar__spacer"></div>
<div class="navbar-buttons"> <div class="navbar-buttons navbar-buttons--actions">
<button class="btn navbar-button navbar-button--add-panel" ng-show="::ctrl.dashboard.meta.canSave" bs-tooltip="'Add panel'" data-placement="bottom" ng-click="ctrl.addPanel()"> <button class="btn navbar-button navbar-button--add-panel" ng-show="::ctrl.dashboard.meta.canSave" bs-tooltip="'Add panel'" data-placement="bottom" ng-click="ctrl.addPanel()">
<i class="gicon gicon-add-panel"></i> <i class="gicon gicon-add-panel"></i>
</button> </button>
...@@ -42,7 +42,7 @@ ...@@ -42,7 +42,7 @@
</button> </button>
<div class="dropdown"> <div class="dropdown">
<button class="btn navbar-button" data-toggle="dropdown"> <button class="btn navbar-button" data-toggle="dropdown" bs-tooltip="'Settings'" data-placement="bottom">
<i class="fa fa-cog"></i> <i class="fa fa-cog"></i>
</button> </button>
......
public/app/features/dashboard/dashnav/dashnav.ts
...@@ -150,7 +150,7 @@ export class DashNavCtrl { ...@@ -150,7 +150,7 @@ export class DashNavCtrl {
this.dashboard.addPanel({ this.dashboard.addPanel({
type: 'add-panel', type: 'add-panel',
gridPos: {x: 0, y: 0, w: 12, h: 9}, gridPos: {x: 0, y: 0, w: 12, h: 9},
title: 'New Graph', title: 'Panel Title',
}); });
} }
......
public/app/features/dashboard/partials/dashboardList.html
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div class="page-container page-body"> <div class="page-container page-body">
<div class="page-action-bar"> <div class="page-action-bar">
<div class="gf-form"> <div class="gf-form gf-form--grow">
<label class="gf-form-label">Search</label> <label class="gf-form-label">Search</label>
<input type="text" class="gf-form-input max-width-30" placeholder="Find Dashboard by name" tabindex="1" give-focus="true" ng-model="ctrl.query.query" ng-model-options="{ debounce: 500 }" spellcheck='false' ng-change="ctrl.onQueryChange()" /> <input type="text" class="gf-form-input max-width-30" placeholder="Find Dashboard by name" tabindex="1" give-focus="true" ng-model="ctrl.query.query" ng-model-options="{ debounce: 500 }" spellcheck='false' ng-change="ctrl.onQueryChange()" />
</div> </div>
......
public/app/features/dashboard/timepicker/timepicker.html
<div class="navbar-buttons"> <div class="navbar-buttons navbar-buttons--zoom">
<button class="btn navbar-button navbar-button--tight gf-timepicker-time-control" bs-tooltip="'Shift time backward <br> (left arrow key)'" data-placement="bottom" ng-click='ctrl.move(-1)'> <button class="btn navbar-button navbar-button--tight" ng-click='ctrl.move(-1)'>
<i class="fa fa-chevron-left"></i> <i class="fa fa-chevron-left"></i>
</button> </button>
<button class="btn navbar-button dashnav-zoom-out gf-timepicker-time-control" bs-tooltip="'Time range zoom out <br> CTRL+Z'" data-placement="bottom" ng-click='ctrl.zoom(2)'> <button class="btn navbar-button" bs-tooltip="'Time range zoom out <br> CTRL+Z'" data-placement="bottom" ng-click='ctrl.zoom(2)'>
<i class="fa fa-search-minus"></i> <i class="fa fa-search-minus"></i>
</button> </button>
<button class="btn navbar-button navbar-button--tight gf-timepicker-time-control" bs-tooltip="'Shift time forward <br> (right arrow key)'" data-placement="bottom" ng-click='ctrl.move(1)'> <button class="btn navbar-button navbar-button--tight" ng-click='ctrl.move(1)'>
<i class="fa fa-chevron-right"></i> <i class="fa fa-chevron-right"></i>
</button> </button>
</div> </div>
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
<span ng-show="ctrl.dashboard.refresh" class="text-warning">&nbsp; Refresh every {{ctrl.dashboard.refresh}}</span> <span ng-show="ctrl.dashboard.refresh" class="text-warning">&nbsp; Refresh every {{ctrl.dashboard.refresh}}</span>
</button> </button>
<button class="btn navbar-button dashnav-refresh-action" ng-click="ctrl.timeSrv.refreshDashboard()"> <button class="btn navbar-button navbar-button--refresh" ng-click="ctrl.timeSrv.refreshDashboard()">
<i class="fa fa-refresh"></i> <i class="fa fa-refresh"></i>
</button> </button>
</div> </div>
public/app/features/org/partials/change_password.html
...@@ -7,9 +7,6 @@ ...@@ -7,9 +7,6 @@
<div ng-if="ldapEnabled || authProxyEnabled"> <div ng-if="ldapEnabled || authProxyEnabled">
You cannot change password when ldap or auth proxy authentication is enabled. You cannot change password when ldap or auth proxy authentication is enabled.
<br>
<br>
<a class="btn-text" href="profile">Back to profile</a>
</div> </div>
<form name="userForm" class="gf-form-group" ng-hide="ldapEnabled || authProxyEnabled"> <form name="userForm" class="gf-form-group" ng-hide="ldapEnabled || authProxyEnabled">
......
public/app/features/org/partials/user_groups.html
...@@ -3,9 +3,9 @@ ...@@ -3,9 +3,9 @@
<div class="page-container page-body"> <div class="page-container page-body">
<div class="page-action-bar"> <div class="page-action-bar">
<div class="gf-form width-15"> <div class="gf-form gf-form--grow">
<label class="gf-form-label">Search</label> <label class="gf-form-label">Search</label>
<input type="text" class="gf-form-input" placeholder="Find User Group by name" tabindex="1" give-focus="true" <input type="text" class="gf-form-input max-width-20" placeholder="Find User Group by name" tabindex="1" give-focus="true"
ng-model="ctrl.query" ng-model-options="{ debounce: 500 }" spellcheck='false' ng-change="ctrl.get()" /> ng-model="ctrl.query" ng-model-options="{ debounce: 500 }" spellcheck='false' ng-change="ctrl.get()" />
</div> </div>
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
<a class="btn btn-success" ng-click="ctrl.openUserGroupModal()"> <a class="btn btn-success" ng-click="ctrl.openUserGroupModal()">
<i class="fa fa-plus"></i> <i class="fa fa-plus"></i>
Create User Group Add Team
</a> </a>
</div> </div>
......
public/app/features/plugins/partials/ds_http_settings.html
<div class="gf-form-group"> <div class="gf-form-group">
<h3 class="section-heading">HTTP</h3> <h3 class="page-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="section-heading">Auth</h3> <h3 class="page-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/app/plugins/datasource/graphite/partials/config.html
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
suggest-url="http://localhost:8080"> suggest-url="http://localhost:8080">
</datasource-http-settings> </datasource-http-settings>
<h3 class="section-heading">Graphite details</h3> <h3 class="page-heading">Graphite details</h3>
<div class="gf-form-group"> <div class="gf-form-group">
<div class="gf-form"> <div class="gf-form">
......
public/sass/_old_responsive.scss
...@@ -6,15 +6,22 @@ ...@@ -6,15 +6,22 @@
// Media queries // Media queries
// --------------------- // ---------------------
@include media-breakpoint-down(lg) {
.navbar-page-btn {
max-width: 290px;
}
.gf-timepicker-nav-btn {
max-width: 240px;
}
}
@include media-breakpoint-down(md) {
.navbar-buttons--zoom {
display: none;
}
}
@include media-breakpoint-down(sm) { @include media-breakpoint-down(sm) {
// div.panel {
// width: 100% !important;
// padding: 0px !important;
// }
// .panel-margin {
// margin-right: 0;
// margin-left: 0;
// }
body { body {
padding: 0; padding: 0;
} }
...@@ -24,17 +31,7 @@ ...@@ -24,17 +31,7 @@
.gf-timepicker-nav-btn { .gf-timepicker-nav-btn {
max-width: 120px; max-width: 120px;
} }
.dashnav-zoom-out, .navbar-buttons--actions {
.dashnav-move-timeframe,
.dashnav-action-icons {
display: none;
}
.page-container {
padding: 0 $spacer * 2;
}
.dash-row-menu-container {
display: none; display: none;
} }
} }
...@@ -50,50 +47,8 @@ ...@@ -50,50 +47,8 @@
.page-dashboard .navbar-page-btn { .page-dashboard .navbar-page-btn {
max-width: 280px; max-width: 280px;
} }
.gf-timepicker-nav-btn {
max-width: 120px;
}
.dashnav-move-timeframe {
display: none;
}
.panel-in-fullscreen {
.dashnav-action-icons {
display: none;
}
.dashnav-back-to-dashboard {
display: block;
}
}
}
@include media-breakpoint-up(lg) {
.page-dashboard .navbar-page-btn {
max-width: 290px;
}
.gf-timepicker-nav-btn {
max-width: 240px;
}
.dashnav-zoom-out {
display: block;
}
.dashnav-move-timeframe {
display: block;
}
}
@include media-breakpoint-up(xl) {
.panel-in-fullscreen {
.dashnav-action-icons {
display: block;
}
}
.page-dashboard .navbar-page-btn {
max-width: none;
}
.gf-timepicker-nav-btn { .gf-timepicker-nav-btn {
max-width: none; max-width: 120px;
} }
} }
public/sass/_variables.dark.scss
...@@ -15,7 +15,7 @@ $dark-3: #262628; ...@@ -15,7 +15,7 @@ $dark-3: #262628;
$dark-4: #333333; $dark-4: #333333;
$dark-5: #444444; $dark-5: #444444;
$gray-1: #555555; $gray-1: #555555;
$gray-2: #7B7B7B; $gray-2: #8e8e8e;
$gray-3: #b3b3b3; $gray-3: #b3b3b3;
$gray-4: #D8D9DA; $gray-4: #D8D9DA;
$gray-5: #ECECEC; $gray-5: #ECECEC;
......
public/sass/_variables.scss
...@@ -89,6 +89,7 @@ $font-size-root: 14px !default; ...@@ -89,6 +89,7 @@ $font-size-root: 14px !default;
$font-size-base: 13px !default; $font-size-base: 13px !default;
$font-size-lg: 18px !default; $font-size-lg: 18px !default;
$font-size-md: 15px !default;
$font-size-sm: 11px !default; $font-size-sm: 11px !default;
$font-size-xs: 9px !default; $font-size-xs: 9px !default;
...@@ -197,8 +198,8 @@ $form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www ...@@ -197,8 +198,8 @@ $form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www
// Used for a bird's eye view of components dependent on the z-axis // Used for a bird's eye view of components dependent on the z-axis
// Try to avoid customizing these :) // Try to avoid customizing these :)
$zindex-dropdown: 1000; $zindex-dropdown: 1000;
$zindex-tooltip: 1020; $zindex-navbar-fixed: 1020;
$zindex-navbar-fixed: 1030; $zindex-tooltip: 1030;
$zindex-modal-backdrop: 1040; $zindex-modal-backdrop: 1040;
$zindex-modal: 1050; $zindex-modal: 1050;
$zindex-typeahead: 1060; $zindex-typeahead: 1060;
......
public/sass/components/_dashboard_grid.scss
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
} }
} }
@include media-breakpoint-down(md) { @include media-breakpoint-down(sm) {
.react-grid-layout { .react-grid-layout {
height: 100% !important; height: 100% !important;
} }
......
public/sass/components/_navbar.scss
...@@ -82,6 +82,7 @@ ...@@ -82,6 +82,7 @@
color: $text-muted; color: $text-muted;
border: 1px solid #151515; border: 1px solid #151515;
margin-right: 1px; margin-right: 1px;
white-space: nowrap;
.gicon { .gicon {
font-size: 16px; font-size: 16px;
......
public/sass/components/_page_header.scss
.page-header-canvas { .page-header-canvas {
background: linear-gradient(90deg, #292a2d, black); background: linear-gradient(90deg, #292a2d, black);
box-shadow: inset 0px -4px 14px #2d2d2d; box-shadow: inset 0px -4px 14px $dark-2;
border-bottom: 1px solid $dark-4; border-bottom: 1px solid $dark-4;
} }
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
.page-header__img { .page-header__img {
border-radius: 50%; border-radius: 50%;
position: relative; position: relative;
top: -3px; top: 10px;
width: 50px; width: 50px;
height: 50px; height: 50px;
} }
......
public/sass/components/_panel_add_panel.scss
.add-panel { .add-panel {
height: 100%;
}
.add-panel__header {
padding: 5px 15px;
display: flex;
align-items: center;
i {
font-size: 30px;
margin-right: $spacer;
}
}
.add-panel__title {
font-size: $font-size-md;
margin-right: $spacer/2;
}
.add-panel__sub-title {
font-style: italic;
color: $text-muted;
position: relative;
top: 1px;
}
.add-panel__items {
padding: 3px 0;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
overflow: auto; overflow: auto;
height: 100%; height: calc(100% - 43px);
align-content: flex-start; align-content: flex-start;
justify-content: space-around; justify-content: space-around;
padding: 3px 0;
} }
.add-panel__item { .add-panel__item {
......
public/sass/components/_timepicker.scss
...@@ -7,6 +7,11 @@ ...@@ -7,6 +7,11 @@
display: flex; display: flex;
} }
.gf-timepicker-nav-btn {
text-overflow: ellipsis;
overflow: hidden;
}
.gf-timepicker-dropdown { .gf-timepicker-dropdown {
margin: -8px -10px 10px 5px; margin: -8px -10px 10px 5px;
padding: 10px 20px; padding: 10px 20px;
......
public/sass/components/_view_states.scss
...@@ -21,33 +21,22 @@ ...@@ -21,33 +21,22 @@
.playlist-active, .playlist-active,
.user-activity-low { .user-activity-low {
.react-resizable-handle
.add-row-panel-hint, .add-row-panel-hint,
.dash-row-menu-container, .dash-row-menu-container,
.panel-drop-zone .navbar-button--refresh,
.dashnav-refresh-action, .navbar-buttons--zoom,
.dashnav-zoom-out, .navbar-buttons--actions,
.panel-menu-container, .panel-menu-container,
.dashnav-action-icons,
.panel-info-corner--info, .panel-info-corner--info,
.panel-info-corner--links, .panel-info-corner--links {
.dashnav-move-timeframe {
opacity: 0; opacity: 0;
transition: all 1.5s ease-in-out 1s; transition: all 1.5s ease-in-out 1s;
} }
// navbar buttons
.navbar {
border-color: transparent;
background: transparent;
transition: all 1.5s ease-in-out 1s;
.fa {
opacity: 0;
transition: all 1.5s ease-in-out 1s;
}
}
.navbar { .navbar {
box-shadow: none; box-shadow: none;
background: transparent;
} }
.navbar-page-btn { .navbar-page-btn {
......
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